@charset "UTF-8";

/*-----------------------------------
 * モバイル 修正
 */
 /* モバイルのinputタグの自動拡大を避けたい */
@media screen and (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/*-----------------------------------
 * Bootstrap 5.3 修正
 */

/* Pagenation Active が z-index=3 になるのを防ぐ */
.page-link.active,
.active>.page-link {
  z-index: 0;
}

/**
 * パンくずが2行以上の場合に間を詰める
 */
nav[aria-label="breadcrumb"]>ol.breadcrumb {
  margin-bottom: 0.1rem;
}

nav[aria-label="breadcrumb"]>ol.breadcrumb:last-child {
  margin-bottom: 1rem;
}

/*-----------------------------------
 * common.js 定義
 */

/**
 * ページスピナー表示（すべてのリソースをロードするまで）
 * [data-sc-loading]
 *
 * [data-sc-loading="スピナー表示(true/false)"]
 * [data-sc-loading-type="circle"] スピナー
 * [data-sc-loading-type="text"]   文字
 */
[data-sc-loading] {
  position: fixed;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #f8f8f8;
  pointer-events: none;
}

[data-sc-loading="true"] {
  opacity: 0.7;
  transition: opacity .5s;
}

[data-sc-loading="false"] {
  opacity: 0;
  transition: opacity .5s;
}


@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

[data-sc-loading] [data-sc-loading-type="circle"] {
  display: block;
  position: relative;
  width: 48px;
  height: 48px;
  top: calc(50% - 20px);
  margin: 0 auto;
  border: 6px solid #e0e0e0;
  border-top: 7px solid #333333;
  border-radius: 50px;
  animation: loading .7s linear 0s infinite normal both;
}

[data-sc-loading] [data-sc-loading-type="text"] {
  display: block;
  position: relative;
  top: calc(50%);
  margin: 0 auto;
  text-align: center;
  color: #333333;
}

/**
 * 背景オーバレイ表示（ページにひとつ）
 * [data-sc-overlay]
 *
 * [data-sc-overlay="背景オーバレイの表示状態(true/false)"]
 * [data-sc-overlay-noevent="背景オーバレイのイベント停止(true/false)"]
 */
[data-sc-overlay] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  /* クリックなどのイベントを無効化 */
}

[data-sc-overlay="false"] {
  opacity: 0;
  transition: opacity .5s;
}

[data-sc-overlay="true"] {
  opacity: 1;
  transition: opacity .5s;
}

[data-sc-overlay-noevent="true"] {
  /* クリックなどのイベントを無効化 */
  pointer-events: none;
}

/**
 * スクロール状態（ページに複数）
 * [data-sc-scroll]
 *
 * [data-sc-scroll="#body-header"]
 * [data-sc-scroll-passed="true/false"]
 */
[data-sc-scroll="#body-header"] {
  opacity: 0;
  transition: opacity .7s;
  pointer-events: none;
}

[data-sc-scroll="#body-header"][data-sc-scroll-passed="true"] {
  opacity: .9;
  transition: opacity .7s;
  pointer-events: all;
}

/**
 * もっと読む
 * [data-sc-expand]
 * 
 * コンテナ側
 * [data-sc-expand="コンテナ名"]
 * [data-sc-expand-height="縮小時の高さ(px)"]
 * [data-sc-expand-expanded="拡張(ture/false)"]
 * 
 * ボタン側
 * [data-sc-expand-target="コンテナ名"]
 * [data-sc-expand-toggle="ボタン表示(true時, false時)"]
 */
[data-sc-expand] {
  position: relative;
  overflow: visible;
  height: auto;
  transition: height .3s ease-in-out;
  will-change: max-height;
}

[data-sc-expand].collapsed {
  overflow: hidden;
}

[data-sc-expand].expanded {
  overflow: hidden;
}

/* グラデーションオーバーレイ */
[data-sc-expand]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
  transition: opacity .3s ease-in-out;
}

/* グラデーションを消す */
[data-sc-expand]::after,
[data-sc-expand].expanded::after {
  opacity: 0;
}

/* グラデーションを消す */
[data-sc-expand].collapsed::after {
  opacity: 1;
}

[data-sc-expand-target] {
  display: none;
}

/**
 * [data-sc-filter-buttons="#ボタンリスト#"]
 * [data-sc-filter-tags="#タグリスト#"]
 * filterByTag
 */
[data-sc-filter-tags] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-sc-filter-tags].show {
  opacity: 1;
  transform: translateY(0);
}

[data-sc-filter-tags].hide {
  opacity: 0;
  transform: translateY(20px);
  /* 下に移動しながら消える */
}

/*-----------------------------------
 * common.css 単独
 */

/**
 * [data-sc-background="loading-image"]
 * 画像の背景
 */
[data-sc-background="loading-image"] {
  display: inline-block;
  background-color: #eeeeee;
  background-image: url('/assets/images/loading_image_48.svg');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}

[data-sc-background="loading-image-24"] {
  display: inline-block;
  background-color: #eeeeee;
  background-image: url('/assets/images/loading_image_24.svg');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}


/**
 * stretched-link の画像に対して Hover時のアクション
 */
.position-relative:has(.stretched-link):hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}


/*-----------------------------------
 * css 単独
 */

/**
 * ヘッダーメニュー
 * #body-header ul.navbar-nav > li.dropdown > a.nav-link
 */
/* ヘッダー選択メニュー背景変更（scriptも記述済） */
#body-header ul.navbar-nav > li.dropdown > a.nav-link {
  background-color: transparent;
}

#body-header ul.navbar-nav > li.dropdown > a.nav-link.show {
  background-color: #f8f8f8;
}

/* Hover時に下線アニメーション */
#body-header ul.navbar-nav > li.dropdown > a.nav-link {
  position: relative;
  text-decoration: none;
  transition: .3s;
}

#body-header ul.navbar-nav > li.dropdown > a.nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 4px;
  background: #0073e6;
  transition: .3s;
}

#body-header ul.navbar-nav > li.dropdown > a.nav-link:hover::before {
  left: 0;
  width: 100%;
}

/* ヘッダメニュー 商品カテゴリの矢印アイコンの回転 */
[data-bs-toggle="collapse"] i {
  display: inline-block;
  transition: transform .3s;
}
[data-bs-toggle="collapse"][aria-expanded="false"] i {
  transform: rotate(0deg);
}

[data-bs-toggle="collapse"][aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* フッタメニュー 商品カテゴリの矢印アイコンの回転 */
#footer_newmenu a[aria-expanded="true"] i::before {
  transform: rotate(45deg);
  transition: transform .3s;
}