@charset "UTF-8";
/* =========================================================
   Items 一覧ページ（items.html）専用スタイル

   ・ルート変数／フォント／共通レイアウトは assets/css/style.css
   ・商品情報パーツ（.modal__photo, .modal__name, .modal__comment,
     .modal__buy など）は assets/css/modal.css の
     「Items: 商品紹介モーダル」で使っているクラスをそのまま流用
   このファイルでは、上記2つのCSSに無い
   「ヘッダー（背景画像＋ロゴ＋タイトル＋タブ）」と
   「商品リストの行レイアウト（写真|テキストを横に並べる部分）」、
   そして women/men の表示切り替え（CSSのみ・JS不使用）を追加する。

   表示切り替えの仕組み：
   items.html の body 先頭に、目に見えないラジオボタン
   (#filter-all / #filter-women / #filter-men) を置いておき、
   その選択状態を兄弟結合子(~)でここから参照して、
   タブの見た目（黒背景）と商品リストの表示・非表示を切り替えている。
   ========================================================= */

/* ============ このページの左右余白（1ヶ所で決める） ============ */
/* 商品リスト（.items-items）・タブ（.items-tabs）・
   フッターのALL ITEMSバナー（.items-footer）は、必ず左右の余白が
   そろっていなければならない（縦のラインが1本に見えるようにするため）。
   3ヶ所それぞれに数値を書くと、片方だけ直し忘れて余白がずれる事故が
   起きるので、値はこの変数1ヶ所だけで決め、各所はこれを参照する。
   余白を変えたいときは、この変数の値を書き換えるだけでよい。 */
:root {
  --items-side: var(--side-sp); /* 標準（PC・タブレット）: 20px */
}
@media (max-width: 767px) {
  :root {
    --items-side: 40px; /* SPのみ広めの40px */
  }
}

/* 表示切り替え用のラジオボタン本体は非表示 */
.items-filter-input {
  display: none;
}

/* ============ ヘッダー（背景画像4枚＋ロゴ＋リード文） ============ */
/* look.html のヒーロー（assets/css/look.css）と同じ見た目。
   トップページのパネル（top.css の .panel）風に、正方形画像4枚を
   白い枠線（グリッドの隙間 --gap ＝ 白背景が透ける）で区切って
   横一列に並べ、その上に横組み白抜きロゴを重ねる。 */
.items-hero__stage {
  position: relative; /* ロゴの絶対配置の基準 */
}
.items-hero__panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* SP/PC共通：横一列4枚 */
  gap: var(--gap, 1.5px); /* パネルと同じ隙間幅 */
  background: #fff; /* 隙間から白が透けて「白い枠線」に見える */
}
.items-hero__panel {
  aspect-ratio: 1 / 1; /* パネルと同じ正方形 */
  overflow: hidden;
  background: #eee; /* 画像読み込み前の仮の背景色 */
}
.items-hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ロゴ：パネルの上に重ね、下側を少しはみ出させる。
   パネルが画面幅に比例して伸縮するため、ロゴも幅の割合で指定 */
.items-hero__logo {
  position: absolute;
  left: 8px; /* 左端ぴったりではなく少しだけ右にずらす（lookと同じ） */
  bottom: 0;
  transform: translateY(18%); /* この分だけ画像の下にはみ出す */
  width: 82%;
  height: auto;
  z-index: 1;
}

/* リード文：lookと同じ見た目（左寄せ・SP15px/PC18px）。
   ロゴのはみ出しと重ならないよう上の余白を確保する */
.items-hero__lead {
  margin-top: clamp(28px, 5vw, 56px);
  padding-inline: var(--side-sp, 20px);
  font-size: 15px;
  font-weight: normal;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-align: left;
}

/* ============ women/men タブ（商品リストの1番上） ============ */
.items-tabs {
  display: flex;
  flex-wrap: nowrap; /* SPでも折り返さず必ず横一列に並べる */
  justify-content: center;
  gap: 12px; /* SPは狭めに */
  margin-top: clamp(40px, 6vw, 72px);
  padding-inline: var(--items-side); /* 商品リスト・バナーと共通の左右余白 */
}

.items-tab {
  display: inline-block;
  flex: 1 1 0; /* SP：3つで均等に幅を分け合う（画面幅が狭くても折り返さない） */
  width: auto;
  max-width: 120px; /* 幅の広いSP/タブレットで間延びしないための上限 */
  padding: 6px 0; /* PCと同じ比率でSPも縦の余白を短めに */
  /* 旧ヘッダー内では親の text-align:center を継承して文字が中央に
     出ていたが、タブを白背景のページへ移動したため明示的に中央揃えにする */
  text-align: center;
  background: #f0f0f0; /* 未選択時から薄グレー（白背景ページでも枠が見えるように） */
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: none;
  cursor: pointer;
  border: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.items-tab:hover {
  background: #e2e2e2; /* デフォルトが薄グレーになったため、ホバーは一段濃く */
}

/* 選択中のタブ（all/women/men）を黒く塗りつぶして選択状態を示す
   （初期状態は #filter-all が checked のため all が黒で始まる） */
#filter-all:checked ~ .items-tabs label[for="filter-all"],
#filter-women:checked ~ .items-tabs label[for="filter-women"],
#filter-men:checked ~ .items-tabs label[for="filter-men"] {
  background: var(--ink);
  color: #fff;
}

@media (min-width: 1024px) {
  .items-hero__lead {
    font-size: 18px; /* lookと同じくPCは少し大きく */
  }
  .items-tabs {
    gap: 40px; /* women/menボタンの間隔 */
  }
  .items-tab {
    flex: none; /* PCは元通り固定幅に戻す */
    width: 140px;
    max-width: none;
    padding: 4px 0;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: none;
  }
}

/* ============ 商品リスト ============ */
.items-items {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  /* 左右はタブ・バナーと共通の変数、上下は独自の余白 */
  padding: clamp(48px, 6vw, 88px) var(--items-side);
}

/* 商品1件分の行。中身（写真｜商品名＋説明＋購入ボタン）は
   modal.css の .modal__left / .modal__right をそのまま利用し、
   ここでは「モーダルの箱」の外で横並びにするための最小限の
   上書きだけを行う。
   表示・非表示は下の「表示切り替えロジック」でまとめて制御するため、
   ここでは基本 display:none にしておく */
.items-item {
  display: none;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.items-item .modal__left {
  width: 300px; /* look.html のモデル写真（.look-item .modal__left）と同じ幅 */
  padding: 0;
}
.items-item .modal__right {
  padding: 0;
  overflow: visible;
  justify-content: flex-start;
}
.items-item .modal__profile {
  margin-bottom: 0.5rem;
}

/* ブランド名：アイテム名（.modal__name）のすぐ上に小さく表示する行。
   文字の大きさ・太さ・字間は all/women/men タブ（.items-tab）と
   同じ設定にそろえている（SP 12px／PC 14px）。
   色は、黒のアイテム名（.modal__name）とはっきり区別がつくように
   グレーにしている。#666 は modal.css の店舗名（.modal__store）で
   使っているグレーと同じ値で、サイト全体のトーンにそろえたもの */
.items-item__brand {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #666;
}

/* ============ 商品リスト（商品名＋購入ボタン） ============
   index.html のスタッフモーダル ITEM LIST と同じ
   .modal__item-list / .modal__item / .modal__item-name / .modal__item-buy
   （assets/css/modal.css）を流用し、ここでは一覧ページ向けの調整だけを行う。
   品番は各 <li> の data-code 属性にのみ入っており、画面には表示されない */
.items-item .modal__item-list {
  margin-top: 1.75rem; /* 商品説明文とリストの間の余白 */
}
/* 行間はスタッフモーダル（index.html）のITEM LISTと完全に同じにそろえる：
   SPは modal.css の既定20px、PC（768px〜）はスタッフモーダルの
   「#modal-inme .modal__item { margin-bottom: 12px; }」と同じ12px */
@media (min-width: 768px) {
  .items-item .modal__item {
    margin-bottom: 12px;
  }
}
.items-item .modal__item:last-child {
  margin-bottom: 0;
}
/* 購入ボタンは、URLが決まっているものは <a>、未定のものは <button>。
   <a> と <button> はブラウザ既定のスタイルが異なるため、<a> 側を
   スタッフモーダルの <button> とまったく同じ描画に矯正する：
   ・text-decoration … リンクの下線を消す
   ・line-height: normal … buttonの既定値。これが無いとページの行間
     （1.9）を継承してボタンの背が約7px高くなる
   ・font-family: system-ui … buttonの既定フォント（Macではシステム
     フォント）。これが無いとサイトの本文フォント（Yu Gothic Medium）を
     継承して「購入」の文字がbuttonより太く見える */
.items-item a.modal__item-buy {
  text-decoration: none;
  /* display は modal.css 側の .modal__item-buy（inline-flex・サイズ固定）を
     そのまま使うため、ここでは指定しない */
  box-sizing: border-box;
  line-height: normal;
  font-family: system-ui, sans-serif;
}

@media (min-width: 1024px) {
  /* 写真360px（正方形・look.htmlのモデル写真と同じ幅）｜gap48px｜
     テキスト480px（計888px）で中央寄せ */
  .items-item {
    max-width: 888px;
    margin-inline: auto;
    gap: 48px;
  }
  .items-item .modal__left {
    width: 360px;
  }
  .items-item .modal__right {
    width: 480px;
    flex: none;
  }
  .items-item__brand {
    font-size: 14px; /* PCのタブ（.items-tab）と同じ大きさ */
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767px) {
  .items-item {
    flex-direction: column;
  }
  .items-item .modal__left {
    width: 100%;
  }
  /* 商品リスト・タブ・バナーのSPの左右余白（40px）は、
     ファイル冒頭の --items-side でまとめて指定している。
     ここに個別の padding-inline を書き足すと、後ろにある
     padding ショートハンドに打ち消されて効かないことがあるため書かない */
}

/* ============ 表示切り替えロジック（CSSのみ・JS不使用） ============
   以前は「先頭から◯件」を :nth-child で出し分けていたが、
   記入シート反映後は各アイテムにタブの分類クラスが付いているため、
   クラスで出し分ける方式に変更した：
     ・items-item--men   … men タブのときだけ表示
     ・items-item--women … women タブのときだけ表示
     ・items-item--all   … women / men どちらのタブでも表示
     ・ALL タブ（初期状態）は全アイテム表示
   アイテムの所属タブを変えたいときは、記入シートのタブ欄を直して
   再反映するか、該当 .items-item のクラスを書き換えるだけでよい */
#filter-all:checked ~ .items-items .items-item {
  display: flex;
}
#filter-women:checked ~ .items-items .items-item--women,
#filter-women:checked ~ .items-items .items-item--all {
  display: flex;
}
#filter-men:checked ~ .items-items .items-item--men,
#filter-men:checked ~ .items-items .items-item--all {
  display: flex;
}

/* 絞り込み表示中、最後に表示される商品の余白を消す。
   「そのタブで最後に表示されるアイテム」はHTML生成時に
   items-item--last-all / --last-women / --last-men の
   目印クラスを付けてあるので、それを参照する */
#filter-all:checked ~ .items-items .items-item--last-all,
#filter-women:checked ~ .items-items .items-item--last-women,
#filter-men:checked ~ .items-items .items-item--last-men {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ============ 商品リストの金額 ============
   index.htmlスタッフモーダルのITEM LISTと同じ見た目：
   商品名（15px）の下に、ひと回り小さい12px・黒で表示する。
   modal.css側の共通 .modal__item-price（15px/600）をこのページ用に上書き */
.items-items .modal__item-price {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* ============ タブごとの表示順 ============
   DOMの並びはALLタブの表示順そのまま。men／womenタブは
   ALLと一部順番が異なるため、タブ選択中はコンテナをflex縦積みに
   切り替え、orderプロパティで表示順を指定する
   （表示・非表示の出し分けは上のdisplay切り替えをそのまま使用）。
   並び順を変えるときは下のorderの数字を並べ替えるだけでよい */
#filter-men:checked ~ .items-items,
#filter-women:checked ~ .items-items {
  display: flex;
  flex-direction: column;
}
#filter-men:checked ~ .items-items .items-item[data-img="p18"] { order: 1; }
#filter-men:checked ~ .items-items .items-item[data-img="p09"] { order: 2; }
#filter-men:checked ~ .items-items .items-item[data-img="p16"] { order: 3; }
#filter-men:checked ~ .items-items .items-item[data-img="p01"] { order: 4; }
#filter-men:checked ~ .items-items .items-item[data-img="p03"] { order: 5; }
#filter-men:checked ~ .items-items .items-item[data-img="p06"] { order: 6; }
#filter-men:checked ~ .items-items .items-item[data-img="p10"] { order: 7; }
#filter-men:checked ~ .items-items .items-item[data-img="p12"] { order: 8; }
#filter-men:checked ~ .items-items .items-item[data-img="p20"] { order: 9; }
#filter-men:checked ~ .items-items .items-item[data-img="p14"] { order: 10; }
#filter-men:checked ~ .items-items .items-item[data-img="p05"] { order: 11; }
#filter-men:checked ~ .items-items .items-item[data-img="p15"] { order: 12; }

#filter-women:checked ~ .items-items .items-item[data-img="p09"] { order: 1; }
#filter-women:checked ~ .items-items .items-item[data-img="p13"] { order: 2; }
#filter-women:checked ~ .items-items .items-item[data-img="p19"] { order: 3; }
#filter-women:checked ~ .items-items .items-item[data-img="p04"] { order: 4; }
#filter-women:checked ~ .items-items .items-item[data-img="p07"] { order: 5; }
#filter-women:checked ~ .items-items .items-item[data-img="p02"] { order: 6; }
#filter-women:checked ~ .items-items .items-item[data-img="p11"] { order: 7; }
#filter-women:checked ~ .items-items .items-item[data-img="p17"] { order: 8; }
#filter-women:checked ~ .items-items .items-item[data-img="p05"] { order: 9; }
#filter-women:checked ~ .items-items .items-item[data-img="p08"] { order: 10; }

/* ============ フッター：ALL ITEMS ボタン ============ */
/* アイテムリストの一番下に置く導線ボタン。
   以前は幅888pxの横長バナーだったが、TOPページのSEE MOREボタンと
   見た目をそろえるため、同じサイズ・同じ比率の小さめボタンに変更した。
   遷移先が決まったら items.html の href="#" を書き換えるだけでよい。

   デザインは all/women/men タブ（.items-tab）と役割が違うことが
   ひと目で分かるように、意図的に見た目を分けている：
     ・タブ  ＝「今どれを見ているか」を示す → 選択中は黒のベタ塗り
     ・ボタン＝「別のページへ進む」導線     → 白地＋赤の細い枠線＋矢印
   ホバー時はSEE MOREボタンと同じく全体を薄くして、押せることを伝える */
.items-footer {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  /* 左右は商品リスト・タブと共通の変数（SPでは40px）。
     これで商品写真の左右端とバナーの左右端がぴったりそろう */
  padding: 0 var(--items-side) clamp(56px, 8vw, 96px);
  box-sizing: border-box;
  /* ボタンが横幅いっぱいのバナーから小さめのボタンに変わったため、
     中央寄せは親側のflexで行う */
  display: flex;
  justify-content: center;
}
.items-allitems {
  /* TOPページのSEE MOREボタン（.panel-seemore__btn）と同じ作り。
     枠込みのSVGは線が原寸0.5px相当で縮小時に潰れるため、枠だけCSSのborderで
     描き、中身は文字の all.svg（69x10）と矢印の arrow.svg（13x7）を並べている。
     各値は枠の高さ --h に対する比率で、SEE MOREと完全に同一。 */
  --h: clamp(27px, 7.37vw, 33px); /* 枠の高さ */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--h);
  padding-left: calc(var(--h) * 0.6);
  padding-right: calc(var(--h) * 0.3022);
  gap: calc(var(--h) * 0.756);
  background: #fff;
  border: 1px solid #e60012;
  border-radius: calc(var(--h) * 0.2387);
  text-decoration: none;
  transition: opacity 0.3s ease; /* ホバーはSEE MOREと同じく全体を薄く */
}
.items-allitems__text,
.items-allitems__arrow {
  display: block;
  width: auto;
}
.items-allitems__text {
  height: calc(var(--h) * 0.382);
}
.items-allitems__arrow {
  height: calc(var(--h) * 0.2674);
  transition: transform 0.2s ease;
}

/* ホバーはTOPページのSEE MOREボタンと同じく、全体をふわっと薄くする。
   （以前の「赤地・白文字に反転」はやめた） */
.items-allitems:hover {
  opacity: 0.6;
}
.items-allitems:hover .items-allitems__arrow {
  transform: translateX(4px); /* 矢印がわずかに右へ進む */
}

/* キーボード操作時のフォーカス枠。枠線と重なって見えなくならないよう
   outline-offset で少し外側に離して描く */
.items-allitems:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  .items-allitems {
    --h: 33px;
  }
}

/* ============ 購入リンク未定の商品用：販売予定のご案内モーダル ============
   items.html の #modal-buy-tbd 専用。枠・オーバーレイ・閉じるボタンは
   modal.css の .modal / .modal__box / .modal__close をそのまま流用し、
   ここでは「箱を内容に合わせて小さくする」上書きと、中の文字組みだけを行う。
   セレクタを .modal__box.modal__box--mini（クラス2つ）にしているのは、
   modal.css のSP用上書き（.modal__box { height:80vh; width:… }）より
   詳細度を上げて、PC・SPとも確実に小さいサイズを効かせるため */
.modal__box.modal__box--mini {
  display: block;
  width: auto;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 40px));
  height: auto;
  max-height: 90vh;
  padding: 3rem 2.5rem 2.5rem;
  box-sizing: border-box;
  text-align: center;
  overflow-y: auto;
}

/* 販売予定月（例：○月販売予定） */
.buy-tbd__title {
  margin: 0 0 1rem;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* 案内文 */
.buy-tbd__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* 品番（複数ある場合は1行ずつ改行して表示） */
.buy-tbd__codes {
  margin: 1rem 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink);
}