@charset "UTF-8";
/* =============================================================
 * wp-parts.css
 * WordPress化で新規追加した部品（検索フォーム・ページャー・認定店バッジ等）専用の
 * スタイル。静的サイトの main.css / sub.css には手を入れず、追加分をここに隔離する。
 *
 * 取扱店検索（/store/・/store/area/）は sub.css の既存スタイルを使うため、
 * .store_search / .store_region_dot 等はここで定義しない（上書きで崩れる）。
 * ============================================================= */

/* =============================================================
 * 認定店バッジ（店舗カード内）
 * ============================================================= */
.store_card_certified {
  white-space: nowrap;
}

/* 認定店の注釈（取扱店検索フォーム・WP追加項目） */
main .store_search_card .store_search_note {
  text-align: left;
}

/* =============================================================
 * 検索フォーム（商品ラインナップ）… 詳細検索で選ぶ（Figmaカンプ準拠）
 * アコーディオン開閉。静的実装が無いためここで完結させる。
 * ============================================================= */
.products_search {
  padding: 40px 55px;
  overflow: hidden;
}
.products_search_group {
  border-bottom: 1px dashed #cbb8a6;
  padding: 25px 0;
}
.products_search_group:first-of-type {
  padding-top: 5px;
}

/* グループ見出し行（● ラベル ＋「〜から選ぶ」ボタン） */
.products_search_label {
  min-width: 2.5em;
}

/* 「〜から選ぶ」トグル：ブラウン背景・白文字、矢印は白背景×茶色 */
.products_search_toggle {
  background: #85726a;
  border: none;
  border-radius: 6px;
  padding: 5px 5px 5px 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.products_search_toggle:hover {
  opacity: 0.88;
}
.products_search_toggle_text {
  color: #fff;
}
.products_search_toggle_icon {
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 4px;
  color: #85726a;
  transition: transform 0.2s;
}
.products_search_group.is-open .products_search_toggle_icon {
  transform: rotate(180deg);
}

/* 開閉本体：既定は閉じる */
.products_search_body {
  display: none;
}
.products_search_group.is-open .products_search_body {
  display: block;
}

/* 各タームのチェック：取扱店検索（sub.css）の .store_check と同じ見た目を移植 */
.products_search .store_check {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.products_search .store_check_box {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #85726a;
  border-radius: 2px;
  background-color: #F9F7F2;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.products_search .store_check_box:checked {
  background-color: #4C3930;
  border-color: #4C3930;
}
.products_search .store_check_box:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.products_search_btn {
  cursor: pointer;
  transition: opacity 0.2s;
}
.products_search_btn:hover {
  opacity: 0.85;
}

/* ---------- 色チップ ----------
 * 既定は他ターム（形・柄・年齢）と同じ見た目（bg_beige04）。
 * 選択（チェック）されたときだけ、ラベルの --cbg / --ctext で着色する。 */
.color_chip {
  transition: background 0.2s, color 0.2s;
}
.products_search .color_chip:has(.store_check_box:checked) {
  background: var(--cbg);
}
.products_search .color_chip:has(.store_check_box:checked) span {
  color: var(--ctext);
}

/* ---------- 形チップのアイコン ---------- */
.shape_chip_icon {
  width: 70px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* =============================================================
 * 商品：検索結果（一覧見出し・カードグリッド）Figmaカンプ node 682:5213 準拠
 * ============================================================= */
.products_result_head {
  background: #85726a;
  border-radius: 5px;
}
.products_result_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.products_result_item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s;
}
.products_result_item:hover {
  transform: translateY(-4px);
}
.products_result_item img {
  width: 100%;
  height: auto;
}
.products_result_item p {
  margin-top: auto;
}

/* =============================================================
 * 商品詳細：豊富なラインナップ（品番カードのスライダー＋拡大モーダル）
 *
 * ・対象は .lineup_card が付いた「商品詳細側のカード」だけ。
 *   検索結果側（.products_result_item 単体）には一切効かせない。
 * ・スライドはグリッドで重ねてクロスフェードする。高さが常に最大スライドに
 *   揃うので、切替でカードがガタつかない。
 * ・JSが動かない環境でも1枚目だけが見える（PHP側で is-active を付与済み）。
 * ============================================================= */
.lineup_card {
  position: relative;
}
/* 詳細側の品番カードはホバーで浮かせない（.products_result_item の translateY(-4px) を打ち消す）。
 * カード自体は遷移せず、中で矢印を押したり画像を拡大するUIなので「浮く」と誤解を招くため。
 * 検索結果側（.lineup_card が付かない .products_result_item）の浮き上がりはそのまま残す。 */
.products_result_item.lineup_card:hover {
  transform: none;
}
.lineup_card_slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 縦スクロールは殺さず、横スワイプだけ拾う */
  touch-action: pan-y;
}
.lineup_card_track {
  display: grid;
}
.lineup_card_slide {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.lineup_card_slide.is-active {
  opacity: 1;
  visibility: visible;
}
.lineup_card_slider img {
  display: block;
  width: 100%;
  height: auto;
}

/* 拡大モーダルを開く透明ボタン（画像全面）。矢印より下のレイヤーに置く。 */
.lineup_card_open {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  z-index: 1;
}
.lineup_card_open:focus-visible {
  outline: 2px solid #e8813a;
  outline-offset: -2px;
}

/* 左右の矢印：白丸×オレンジ、ホバーで反転（store_card_btn の流儀） */
.lineup_card_nav {
  position: absolute;
  top: 70%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e8813a;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #e8813a;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lineup_card_prev {
  left: 6px;
}
.lineup_card_next {
  right: 6px;
}
.lineup_card:hover .lineup_card_nav,
.lineup_card_nav:focus-visible {
  opacity: 1;
}
.lineup_card_nav:hover {
  background: #e8813a;
  color: #fff;
}
.lineup_card_nav .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
/* タッチ端末（ホバーが無い）では矢印を常時表示する */
@media (hover: none) {
  .lineup_card_nav {
    opacity: 1;
  }
}

/* ---------- モーダル本体 ---------- */
.lineup_modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999; /* サイト内の最大 z-index は 1000 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  /* フェードアウト中の誤クリックを拾わない */
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lineup_modal[hidden] {
  display: none;
}
.lineup_modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lineup_modal_overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(76, 57, 48, 0.65);
  cursor: pointer;
}
.lineup_modal_dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 30px 24px;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}
.lineup_modal.is-open .lineup_modal_dialog {
  transform: none;
}
.lineup_modal_dialog:focus {
  outline: none;
}
.lineup_modal_close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #85726a;
  border-radius: 50%;
  background: #fff;
  color: #85726a;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.lineup_modal_close:hover {
  background: #85726a;
  color: #fff;
}
.lineup_modal_close .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}
/* 品番名が長くても右上の×ボタンに潜り込まないよう左右に逃げを作る */
.lineup_modal_title {
  padding: 0 44px;
}
.lineup_modal_slider {
  position: relative;
  touch-action: pan-y;
}
.lineup_modal_track {
  display: grid;
}
.lineup_modal_slide {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lineup_modal_slide.is-active {
  opacity: 1;
  visibility: visible;
}
.lineup_modal_slide img {
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
}
.lineup_modal_nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e8813a;
  border-radius: 50%;
  background: #e8813a;
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lineup_modal_nav:hover {
  background: #fff;
  color: #e8813a;
}
.lineup_modal_nav[hidden] {
  display: none;
}
.lineup_modal_prev {
  left: -8px;
}
.lineup_modal_next {
  right: -8px;
}
.lineup_modal_nav .material-symbols-outlined {
  font-size: 26px;
  line-height: 1;
}
/* ドット（Bootstrapの d-flex は !important でhiddenを潰すのでCSS側でflex指定する） */
.lineup_modal_dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.lineup_modal_dots[hidden] {
  display: none;
}
.lineup_modal_dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #85726a;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.lineup_modal_dot.is-active {
  background: #e8813a;
  border-color: #e8813a;
}

/* ---------- モーダル内：品番ごとの紹介動画（SCF: item_video） ----------
 * スライダーの下に 16:9 で表示する。中身は自前iframeでもoEmbed出力でも同じように収まる。
 *
 * 【高さの考え方】
 *   モーダルは max-height:90vh。画像＋動画を縦に積むと、ノートPC（縦768px程度）では
 *   すぐ画面からはみ出す。そこで
 *     ・動画がある品番だけ dialog に .has-video が付く（JSが付与）
 *     ・.has-video のときは画像の max-height を下げる
 *     ・動画は「幅」ではなく「高さ」で頭打ちにする（width: min(100%, 高さ×16/9)）
 *   の3点で、縦の合計が画面に収まるようにしている。
 *   それでも溢れる極端な環境では dialog 側の overflow-y:auto でスクロールする。 */
/* スライダー（＋カウンター・ドット）との間隔。見出しを置かない構成なので、
 * ここで明確に離さないと画像と動画が地続きに見える。
 * 画面幅で伸縮する mt* ユーティリティ（vw基準）だとSPでほぼ潰れるため固定値にしている。 */
.lineup_modal_video {
  margin-top: 32px;
}
.lineup_modal_video[hidden] {
  display: none;
}
.lineup_modal_video_frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* aspect-ratio 非対応ブラウザ向けフォールバック */
  padding-top: 56.25%;
  overflow: hidden;
  background: #000;
}
@supports (aspect-ratio: 16 / 9) {
  .lineup_modal_video_frame {
    padding-top: 0;
    aspect-ratio: 16/9;
  }
}
/* 高さで頭打ち（58vh幅 ≒ 32.6vh高さ）。min() 非対応ブラウザは width:100% のまま。 */
@supports (width: min(100%, 58vh)) {
  .lineup_modal_video_frame {
    width: min(100%, 58vh);
  }
}
.lineup_modal_video_frame > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
/* 動画がある時は画像を控えめにして、1画面に画像＋動画が収まるようにする */
.lineup_modal_dialog.has-video {
  max-width: 780px;
}
.lineup_modal_dialog.has-video .lineup_modal_slide img {
  max-height: 36vh;
}

/* 縦が狭い画面（ノートPCの1366×768 等）ではさらに詰める */
@media screen and (max-height: 780px) {
  .lineup_modal_dialog.has-video .lineup_modal_slide img {
    max-height: 28vh;
  }
  .lineup_modal_dialog.has-video .lineup_modal_video_frame {
    width: 100%;
  }
  @supports (width: min(100%, 46vh)) {
    .lineup_modal_dialog.has-video .lineup_modal_video_frame {
      width: min(100%, 46vh);
    }
  }
  /* 縦が足りないので余白は詰めるが、画像と地続きに見えない程度は残す */
  .lineup_modal_dialog.has-video .lineup_modal_video {
    margin-top: 20px;
  }
}

/* カードの「動画あり」バッジ（クリックは下の拡大ボタンに通す） */
.lineup_card_video_badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: rgba(232, 129, 58, 0.92);
  line-height: 1;
  pointer-events: none;
}
.lineup_card_video_badge .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

/* =============================================================
 * ブログ：前後記事ナビの無効プレースホルダ
 * ============================================================= */
.single_post_nav_link.is-disabled {
  visibility: hidden;
}

/* =============================================================
 * レスポンシブ
 * ============================================================= */
@media screen and (max-width: 768px) {
  .products_result_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .products_search {
    padding: 25px 20px;
  }
  .products_search_group {
    padding: 20px 0;
  }
  .products_color_list {
    gap: 18px 15px;
  }
  .shape_chip_icon {
    width: 54px;
    height: 38px;
  }
  .products_result_head {
    font-size: 24px;
  }

  /* ---------- 商品詳細：ラインナップ・モーダル（SP） ---------- */
  .lineup_card_nav {
    width: 26px;
    height: 26px;
  }
  .lineup_card_nav .material-symbols-outlined {
    font-size: 18px;
  }
  .lineup_modal {
    padding: 12px;
  }
  .lineup_modal_dialog {
    max-height: 94vh;
    padding: 24px 16px 20px;
  }
  .lineup_modal_slide img {
    max-height: 56vh;
  }
  .lineup_modal_nav {
    width: 36px;
    height: 36px;
  }
  .lineup_modal_prev {
    left: 0;
  }
  .lineup_modal_next {
    right: 0;
  }

  /* SPは横幅いっぱいでよい（縦は @media (max-height) 側で既に抑えている）。
   * 見出し文字（f_20）は mediaquery.css 側で 3.8vw に落ちるのでそのまま使う。 */
  .lineup_modal_dialog.has-video .lineup_modal_slide img {
    max-height: 32vh;
  }
  .lineup_modal_dialog.has-video .lineup_modal_video_frame {
    width: 100%;
  }
}

/* 横向きスマホ（縦が極端に狭い）：画像は小さく、動画を主役にする */
@media screen and (max-height: 520px) {
  .lineup_modal_dialog.has-video .lineup_modal_slide img {
    max-height: 22vh;
  }
  .lineup_modal_dialog.has-video .lineup_modal_video_frame {
    width: 100%;
  }
  @supports (width: min(100%, 40vh)) {
    .lineup_modal_dialog.has-video .lineup_modal_video_frame {
      width: min(100%, 40vh);
    }
  }
}