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

   ・ルート変数／フォント／共通レイアウトは assets/css/style.css
   ・ヒーロー（背景画像＋ロゴ＋タイトル＋リード文）は
     assets/css/items.css の .items-hero を流用し、
     背景画像だけをこのファイルで look 用に差し替える
   ・1行分の中身（写真｜名前・職業＋手描きロゴ＋購入リンク）は
     assets/css/modal.css の「Look: 着用アイテム紹介モーダル」で
     使っているクラス（.modal__photo--look / .modal__name /
     .modal__job など）をそのまま流用し、モーダルではなく
     ページ内の一覧として並べている。
   ・写真スライダーと着用アイテムリストは一覧からは廃止し、
     「購入はこちらから」のテキストリンクをクリックした時に開く
     モーダル（#modal-look）側に移設している。

   このファイルでは、上記CSSに無い
   「look用ヒーローの背景差し替え」と
   「一覧の行レイアウト（写真｜テキストを横に並べる部分）」、
   「手描きロゴ・購入リンクのスタイル」だけを追加する。
   ※ women/men の絞り込みタブは look には無いため未使用。
   ========================================================= */

/* ============ ヒーロー：パネル4枚＋ロゴ＋リード文 ============ */
/* トップページのパネル（top.css の .panel-page / .panel）と同じ見た目で、
   正方形画像4枚を白い枠線（グリッドの隙間 --gap ＝ 白背景が透ける）で
   区切って横一列に並べ、その上に BY_logo.svg を重ねる。
   ロゴは画像の下端から少しはみ出す（translateY）。 */
.look-hero__stage {
  position: relative; /* ロゴの絶対配置の基準 */
}
.look-hero__panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* SP/PC共通：横一列4枚 */
  gap: var(--gap, 1.5px); /* パネルと同じ隙間幅 */
  background: #fff; /* 隙間から白が透けて「白い枠線」に見える */
}
.look-hero__panel {
  aspect-ratio: 1 / 1; /* パネルと同じ正方形 */
  overflow: hidden;
  background: #eee; /* 画像読み込み前の仮の背景色 */
}
.look-hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ロゴ：パネルの上に重ね、下側を少しはみ出させる。
   パネルが画面幅に比例して伸縮するため、ロゴも幅の割合で指定して
   SP/PCとも参考デザインと同じ見た目の比率を保つ */
.look-hero__logo {
  position: absolute;
  left: 8px; /* 左端ぴったりではなく少しだけ右にずらす */
  bottom: 0;
  transform: translateY(18%); /* この分だけ画像の下にはみ出す */
  width: 82%;
  height: auto;
  z-index: 1;
}
/* リード文：フォントサイズは items.css の .items-hero__lead のまま。
   look では中央寄せの親（.items-hero）が無いため左寄せになる。
   ロゴのはみ出しと重ならないよう上の余白を確保する */
.look-hero .items-hero__lead {
  margin-top: clamp(28px, 5vw, 56px);
  margin-inline: 0;
  padding-inline: var(--side-sp, 20px);
  text-align: left;
  font-size: 15px; /* look のみ少し大きく（items は 13px のまま） */
}
@media (min-width: 1024px) {
  .look-hero .items-hero__lead {
    font-size: 18px; /* PC も少し大きく（items は 15px のまま） */
  }
}

/* ============ シーン一覧（行の外枠） ============ */
/* 固定の横幅を指定すると、実際の中身（写真＋名前＋ロゴ＋リンク）より
   箱の方が広くなり、テキスト側に間延びした余白ができてしまう。
   かといって行ごとに中身の幅へ縮めると、今度は行ごとに幅がバラついて
   写真の位置が揃わなくなってしまう。
   そこで.look-itemsを1列のグリッドにし、列幅を「一番幅が広い行の
   中身に合わせたサイズ（max-content）」に自動計算させることで、
   全ての行を「一番広い行」に揃えた上で、その1列をページ中央に
   寄せている（幅が足りない行は右側に余白ができるだけで、
   写真の開始位置・行全体の横幅はどの行も同じになる）。 */
.look-items {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--side-sp);
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
}

/* 1シーン分の行。中身は modal.css の Look モーダル用クラスを流用し、
   ここでは「モーダルの箱」の外で横並びにするための最小限の上書きだけを行う。
   （PC＝写真｜テキストの横並び／SP＝写真→テキストの縦並び）
   グリッドの列幅（＝一番広い行の幅）いっぱいに広がる（既定のstretch）。 */
.look-item {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
/* 最後の行は下の余白を消す */
.look-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 左カラム：写真スライド＋ドット。
   modal.css の .modal__left は縦並び・余白ありなので、
   ここでは一覧用に幅と余白を上書きする */
.look-item .modal__left {
  width: 300px;
  flex-shrink: 0;
  padding: 0;
}

/* 一覧の写真もクリック／タップで着用アイテムのモーダルを開けるようにしている
   （look.html 側で写真の枠に data-modal を付与）。
   手描きロゴ＋購入リンクと同じく、押せることが伝わるように
   カーソルを指の形にし、ホバーで少し薄くする。
   キーボード操作でも開けるよう look.html 側で role="button" / tabindex="0" を
   付けている。フォーカス時の枠線は、このサイト全体で outline を上書きしていない
   （他ページにも outline 指定は一切無い）ため、ブラウザ標準のリングを
   そのまま活かす方針とし、ここでは outline を触らない。 */
.look-item__photo {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.look-item__photo:hover {
  opacity: 0.85;
}

/* 右カラム：名前・職業＋アイテムリスト。
   モーダルでは高さ固定でリストだけスクロールさせているが、
   一覧ページでは全アイテムをそのまま縦に並べたいので、
   スクロールを解除して自然な高さにする */
.look-item .modal__right--look {
  padding: 0;
  overflow: visible;
}

/* 名前ブロックと手描きロゴの間隔 */
.look-item .modal__profile {
  margin-bottom: 1.25rem;
}

/* 名前の横に添えるローマ字表記。日本語表記より一回り小さく表示する */
.modal__name-romaji {
  font-size: 14px;
  font-weight: 400;
}

/* ============ 手描きロゴ＋購入リンク（1つの<a>にまとめている） ============
   届いた実素材は画像ごとにサイズがバラバラのため、縦30pxに統一して
   揃えている（横幅は各画像の比率のまま auto で伸縮）。
   手描きロゴと「購入はこちら」のテキストをセットで1つの<a data-modal>に
   まとめているため、どちらをクリック／タップしても着用アイテムの
   モーダル（#modal-look）が開く。 */
.look-item__buy-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.look-item__buy-link:hover {
  opacity: 0.6;
}
.look-item__logo {
  display: block;
}
.look-item__logo-img {
  display: block;
  width: auto;
  height: 30px;
}
/* 「着用アイテムはこちら」ボタン。
   seeitem.svg をそのまま貼ると枠線（原寸で0.56px相当）が縮小時に潰れて
   かすれるため、SVGの見た目をCSSのテキスト＋border で再現している。
   ── seeitem.svg の実測値（viewBox 136x26）を高さ34px基準に換算 ──
     枠     : 136 x 26      → 約178 x 34px（border-radius 6.208 → 約8px）
     文字   : 高さ10.6      → 約13.9px（font-size 約15.5px 相当）
     左右余白: 12           → 約15.7px
   高さはTOPのSEE MOREボタン（seemore.svg）と揃えている。 */
.look-item__buy-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: clamp(28px, 7.6vw, 34px);
  padding-inline: 0.72em;
  border: 1px solid #e60012;
  border-radius: 0.52em;
  color: #e60012;
  font-size: clamp(12.8px, 3.47vw, 15.5px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .look-item__buy-text {
    height: 34px;
    font-size: 15.5px;
  }
}

/* ============ PC（1024px以上） ============ */
@media (min-width: 1024px) {
  /* 写真360px｜gap48px｜テキストは中身の幅だけ（flex:1で残り幅いっぱいに
     広げず、名前・ロゴ・リンクの実際の幅にとどめる） */
  .look-item {
    gap: 48px;
  }
  .look-item .modal__left {
    width: 360px;
  }
  .look-item .modal__right--look {
    flex: none;
    min-width: 0;
  }
}

/* ============ SP（767px以下） ============ */
@media (max-width: 767px) {
  /* PCの「一番広い行に揃える」列幅(max-content)のままだと、
     横長の行が画面幅からはみ出してしまうため、SPでは列幅を
     画面いっぱい(1fr)に戻す。写真→テキストの縦並びに切り替え、
     縦並びでは中身に合わせて縮めず画面幅いっぱいに広げる。 */
  .look-items {
    grid-template-columns: minmax(0, 1fr);
  }
  .look-item {
    flex-direction: column;
    width: 100%;
  }
  .look-item .modal__left {
    width: 100%;
  }
  /* SPのみ左右余白を40pxに */
  .look-items {
    padding-inline: 40px;
  }

  /* SPのみ、写真の下に並ぶ「モデル名」「職業」「手描きロゴ＋着用アイテムボタン」を
     右寄せにする。.look-item を頭に付けて一覧ページ限定にしているので、
     モーダル内（#modal-look）の同じクラスは左寄せのまま影響を受けない。 */
  .look-item .modal__right--look {
    /* この要素は modal.css で display:flex / flex-direction:column /
       align-items:flex-start になっているため、text-align だけでは寄らない。
       align-items も flex-end にして各ブロックごと右端に揃える。 */
    align-items: flex-end;
    text-align: right;
  }
  /* 購入リンクは inline-flex なので、親の text-align: right で右端に寄る。
     中の手描きロゴとボタン画像は align-items で右端に揃える。 */
  .look-item .look-item__buy-link {
    align-items: flex-end;
  }
}