@charset "UTF-8";
/* =========================================================
   InMe セクション：スタッフ紹介モーダル
   more-inme.html のデザインをそのまま流用
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 20px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}
.modal.is-open {
  display: flex;
}
.modal.is-visible {
  opacity: 1;
}

.modal__box {
  position: relative;
  width: 900px;
  max-width: 95vw;
  /* 固定高さのベース値（現在はどのモーダルも.modal__box--fitを
     併用しているため上書きされ、実際には使われていない）。 */
  height: 80vh;
  max-height: 560px;
  display: flex;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

/* 内容（写真＋プロフィール）のサイズに合わせて高さを自動調整する。
   InMe・Itemsモーダルに加え、Lookモーダルにも付与している
   （左カラムの「写真｜職業」の下で箱が切れるように、固定の高さ
   (80vh/560px)をやめてコンテンツに合わせて縮める）。
   右カラムのITEM LISTが左カラムより長くなった場合は、
   .modal__item-scrollがこの高さの中で内部スクロールする。 */
.modal__box--fit {
  height: auto;
  max-height: 90vh;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.modal__close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}

/* 左カラム：スタッフ写真 */
.modal__left {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem 2rem 2rem;
  box-sizing: border-box;
}
.modal__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f4;
}
.modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* InMe（スタッフ）モーダルのスライダー写真：枠は正方形のまま、
   長方形（縦長）の写真は縦サイズを枠に合わせて収める（object-fit:contain）。
   はみ出す代わりに左右へ余白（枠の背景#f5f5f4）が出る。 */
.modal__photo--slider img {
  object-fit: contain;
}

/* 右カラム：プロフィール＋コメント */
.modal__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 2rem 2rem 2.5rem;
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
}
.modal__profile {
  margin-bottom: 1.5rem;
}
.modal__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.modal__store {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}
/* 身長・普段サイズ（店舗名の下に表示） */
.modal__spec {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}
.modal__comment {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* PC：写真|プロフィール（＋コメント／アイテムリスト）の2カラムをそのまま
   並べるラッパー。SP：写真から末尾のコンテンツまでを1つの縦スクロールに
   するラッパー（@media側でflex-directionとoverflow-yを切り替える）。
   InMe・Lookどちらのモーダルでも共通して使う。 */
.modal__body {
  display: flex;
  width: 100%;
  height: 100%;
}

/* =========================================================
   Look セクション：着用アイテム紹介モーダル
   more-info-modal.html のデザインを流用
   （写真スライドは削除し、モデル写真1枚のみを表示。
   　横幅はInMeモーダルのスタッフ写真と同じ.modal__photoを使い回し、
   　比率のみ縦長に変更）

   ※このファイルはPC用の既定スタイルをすべて先に書き、
   　SP用の上書きは末尾の @media (max-width: 767px) の中だけに
   　まとめている。同じセレクタに対する「既定」と「SP用」を
   　@media の前後に分けて書くと、詳細度が同じ場合は
   　「後に書かれた方」が常に勝ってしまい、@media の指定が
   　意図せず打ち消されるバグが起きやすいため。
   ========================================================= */
.modal__photo--look {
  /* 他モーダルの写真（InMe・Items）と同じ正方形に統一 */
  aspect-ratio: 1 / 1;
}

/* -------- 写真スライド（Look・InMeモーダル共通） --------
   写真の左半分＝前へ／右半分＝次へ の透明なクリックゾーン。
   写真の上に重ねるため position:absolute。画像より前面に出す。
   InMe（スタッフ）モーダルは.modal__photo--sliderを付与して使う。 */
/* -------- 写真スライドのトラック（Look・InMeモーダル共通） --------
   写真の枚数分の<img>を横一列に並べ、JSがtransformで左右に動かす。
   SPではこのトラックを指のフリックに追従させて切り替える。
   touch-action: pan-y … 縦スクロールはブラウザに任せ、横方向の
   指の動き（フリック）だけをJS側で受け取るための指定 */
.modal__slide-track {
  display: flex;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  will-change: transform;
}
.modal__slide-track img {
  /* 1枚＝枠と同じ幅。縮ませず横に並べ、枠からはみ出た分は
     .modal__photo の overflow:hidden で隠れる */
  flex: 0 0 100%;
}

.modal__photo--look .modal__slide-nav,
.modal__photo--slider .modal__slide-nav {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.modal__slide-nav--prev {
  left: 0;
}
.modal__slide-nav--next {
  right: 0;
}

/* 写真の下に置くドット（スライドの現在位置表示）。
   ドットの数はJS側で写真の枚数に合わせて生成する。 */
.modal__slide-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 10px;
}
.modal__slide-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal__slide-dot.is-active {
  background: var(--ink);
}

/* PC/SPそれぞれの表示先を切り替えるための2つのプロフィール。
   PC/SPともITEM LISTの上（modal__right内）に表示するが、
   余白の付き方が異なるためPC用とSP用の2つを置いて切り替える。
   既定（PC）ではSP用を非表示にしておく。 */
.modal__profile--sp {
  display: none;
}

/* モデル名（Lookモーダルのみ）は#000で表示。PC/SPどちらの表示先にも適用 */
.modal__right--look .modal__name {
  color: #000;
}

/* Lookモーダル：箱の高さを左カラムのコンテンツ
   （写真344px＋ドット16px＋上下余白4rem＝64px）に合わせて縮める。
   写真の高さは「左カラム幅400px − 左右padding3.5rem(56px)＝344px」
   （正方形のため高さも344px）。
   右カラムのITEM LISTがこれより長い場合は.modal__item-scrollが
   この高さの中で内部スクロールする。SPは従来通り（下の@mediaの指定が効く）。 */
@media (min-width: 768px) {
  #modal-look .modal__box--fit {
    height: calc(344px + 16px + 4rem);
  }
  /* Lookモーダルのアイテム行間も、スタッフモーダル（#modal-inme）と
     同じ12pxに詰める（既定は20px）。SPは両モーダルとも既定の20pxのまま */
  #modal-look .modal__item {
    margin-bottom: 12px;
  }
}

/* 名前の下の職業（Lookモーダルのみ）。
   文字サイズはITEM LISTの品名（.modal__item-name＝15px/500）に合わせ、色は#000。
   各シーンの職業はJS側（lookDataのjob）で差し込む。 */
.modal__job {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

/* 右カラム（Look用）：PCでは見出しを固定し、リスト部分のみスクロールさせる */
.modal__right--look {
  overflow-y: hidden;
}

/* アイテムリスト見出し（PCではスクロールさせず常に上部に固定表示） */
.modal__item-heading {
  flex-shrink: 0;
  width: 100%;
  /* スタッフ名｜店舗名と同じ余白（.modal__store の margin-top:6px）に揃える */
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* アイテムリストのスクロール領域（PC用） */
.modal__item-scroll {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* アイテムリスト */
.modal__item-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.modal__item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.modal__item:last-child {
  margin-bottom: 0;
}
.modal__item-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f4;
}
.modal__item-info {
  flex: 1;
  min-width: 0;
}
/* ブランド名：商品名（.modal__item-name＝15px）のすぐ上に、
   ひと回り小さいグレーで表示する行。内容はJS（modal.js）が
   look.html側の <li data-brand="…"> から差し込む。
   同じブランド名が連続する場合はJS側で先頭の1行だけ出力する */
.modal__item-brand {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #888; /* アイテムリストのメタ情報（.modal__item-meta）と同じグレー */
}
.modal__item-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.modal__item-meta {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #888;
}
.modal__item-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.modal__item-buy {
  flex-shrink: 0;
  align-self: center;
  /* サイズ固定：ASK/BUYの文字幅に左右されず、全ボタンを同じ大きさにする。
     幅64px・高さ34pxは従来の padding:9px 16px 時の実寸に合わせた値。
     文字はflexで上下左右とも中央に配置する */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 34px;
  padding: 0;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.modal__item-buy:hover {
  opacity: 0.85;
}
/* 購入ボタンをリンク（<a>）にした場合の見た目合わせ。
   <a>と<button>はブラウザ既定のスタイルが異なるため、<a>側を
   <button>とまったく同じ描画に矯正する（items.cssと同じ対応）：
   下線を消し、buttonの既定と同じ line-height:normal と
   システムフォントを明示する */
a.modal__item-buy {
  text-decoration: none;
  /* display は .modal__item-buy 本体の inline-flex（サイズ固定）を
     そのまま使うため、ここでは指定しない */
  box-sizing: border-box;
  line-height: normal;
  font-family: system-ui, sans-serif;
}
/* ============ 購入リンク未定の商品：行内展開の販売予定案内 ============
   スタッフモーダル（index.html／top.js）とLookモーダル（look.html／modal.js）
   共通。リンク先URLが未定の購入ボタン（<button>のほう。<a>はURL決定済み）を
   押すと、その商品の行のすぐ下がアコーディオンのように開いて
   「○月販売予定＋店舗お問合せ用の品番」を表示する。
   （モーダルの上にさらにポップアップを重ねると画面が騒がしくなるため、
   　行内で開く方式にしている。開閉はJS側で .is-tbd-open を付け外しする） */
.modal__item {
  flex-wrap: wrap; /* 案内パネル（幅100%）を商品名｜ボタンの下の段へ折り返す */
  /* 縦方向は gap(16px) を効かせない。折り返した案内パネルとの隙間は
     .modal__item-tbd の margin-top だけで管理する（余白の詰め対応） */
  row-gap: 0;
  column-gap: 16px;
}
.modal__item-tbd {
  display: none;
  width: 100%;
  /* 商品リストと見分けやすいよう、薄いグレーの箱にして表示する。
     背景色はサイト内の写真枠と同じ #f5f5f4、角丸は購入ボタンと同じ 8px */
  margin-top: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  background: #f5f5f4;
  border-radius: 8px;
}
.modal__item.is-tbd-open .modal__item-tbd {
  display: block;
  animation: modal-item-tbd-in 0.2s ease;
}
@keyframes modal-item-tbd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal__item-tbd__release {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--ink);
}
.modal__item-tbd__note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #666;
}
.modal__item-tbd__codes {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Look・InMe（スタッフ）モーダル共通：商品名｜購入ボタンを横並びで表示
   （old/more-info-modal.html と同じ構成。画像・着用カラー／サイズ／
   値段は表示しない）。購入ボタンは.modal__itemの直接の子として配置し、
   上記既定の「右端・上下中央」(align-self:center)をそのまま適用する。 */

/* =========================================================
   InMe（スタッフ）モーダル：レイアウト
   PC：左カラム＝写真スライダー＋プロフィール（名前／店舗名／身長・普段サイズ）
   　　右カラム＝ITEM LIST＋スタッフコメント（左カラムの高さの中で内部スクロール）
   SP：写真→プロフィール→ITEM LIST→コメントの順に1つの縦スクロール
   　　（DOM順のまま。SP用の上書きは末尾の@media内）
   ========================================================= */
/* プロフィールは写真（ドット）の下に表示。既定の下マージン(1.5rem)は
   左カラムの下padding側で余白を取るため打ち消す */
#modal-inme .modal__profile {
  margin: 1.25rem 0 0;
}
/* 店舗名の文字色は#000（PC・SP共通） */
#modal-inme .modal__store {
  color: #000;
}
/* ---- スタッフ名の横のアイコンとリンク（内容はtop.jsが差し込む）----
   ・.modal__name-link … 名前＋blank.svg（新窓アイコン）をまとめたリンク。
     文字の見た目は.modal__nameのまま（色・太さを継承し、下線は付けない）
   ・.modal__name-ig … instagram.svgだけの小さなリンク
   ・アイコンはどちらも16px固定（指定サイズ） */
/* スタッフ名の行全体：名前・blank.svg・instagram.svgを縦中央で揃える
   （inline-flex同士だとベースライン基準でアイコンがわずかに下がるため、
   行そのものをflexにしてalign-items:centerで揃える） */
#modal-inme .modal__name {
  display: flex;
  align-items: center;
}
#modal-inme .modal__name-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
#modal-inme .modal__name-link:hover {
  opacity: 0.7;
}
#modal-inme .modal__name-ig {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}
#modal-inme .modal__name-ig:hover {
  opacity: 0.7;
}
#modal-inme .modal__name-icon {
  width: 16px;
  height: 16px;
  display: block;
}
/* ---- ITEM LIST（InMeモーダルのみ）のデザイン調整 ----
   文字スタイルはlook.htmlのモーダルに合わせる：
   ・ブランド名 … 上書きせず共通スタイルのまま（.modal__item-brand＝12px/500/グレー#888）
   ・商品名 … 共通スタイルのまま（.modal__item-name＝15px/500/黒）
   ・金額 … ブランド名と同じサイズ（12px）・黒で商品名の下に表示 */
#modal-inme .modal__item-price {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
/* 商品名と「○月販売予定」の太さは同じ500に揃える
   （販売予定は従来boldだったが、商品名と同じ太さに変更） */
#modal-inme .modal__item-tbd__release {
  font-weight: 500;
}
/* InMe: アイテム1件のレイアウトはlook.htmlモーダルと同じ共通スタイルのまま
   （左＝ブランド名→商品名→金額の縦積み｜右＝BUY/ASKボタン。
   　案内パネルはASKを押した時のみ下の段に幅いっぱいで開く） */

@media (min-width: 768px) {
  /* モーダルの縦サイズを左カラム（写真＋ドット＋プロフィール）の
     コンテンツ量の高さに合わせる：右カラムをposition:absoluteにして
     高さの計算から外し、箱の高さ＝左カラムの高さにする。
     右カラムはその高さいっぱいに広がり、中身が長い場合は
     .modal__item-scrollが内部スクロールする */
  #modal-inme .modal__right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 400px; /* 左カラム（.modal__left）の幅ぶん右から始める */
    overflow-y: hidden; /* 見出しITEM LISTは固定し、リスト＋コメントだけスクロール */
  }
  /* ウィンドウが低く、箱がmax-height(90vh)で切られた場合の保険：
     左カラム側をmodal__bodyのスクロールで読めるようにする */
  #modal-inme .modal__body {
    overflow-y: auto;
  }
  /* ITEM LIST見出しと最初のアイテムの余白は、既定の margin-bottom:6px
     （＝スタッフ名と店舗名の間隔と同じ）をそのまま使う */
  /* アイテム同士の余白を少し狭くする（既定20px→12px） */
  #modal-inme .modal__item {
    margin-bottom: 12px;
  }
  /* ITEM LISTの下に続くスタッフコメント */
  #modal-inme .modal__item-scroll .modal__comment {
    margin-top: 1.5rem;
  }
}

/* =========================================================
   Items セクション：商品紹介モーダル
   Lookモーダルの構成（写真|商品情報の2カラム、SPは写真縮小演出付きの
   全体スクロール）を流用しつつ、写真はInMeモーダルと同じ正方形固定
   （.modal__photo）をそのまま使用するため、追加のCSSは購入ボタンのみ
   ========================================================= */
.modal__buy {
  flex-shrink: 0;
  margin-top: 1.5rem;
  font-size: 13px;          /* 他ページの購入ボタン(.modal__item-buy)に合わせる */
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 9px 16px;        /* 他ページの購入ボタンに合わせる */
  cursor: pointer;
  white-space: nowrap;
}
.modal__buy:hover {
  opacity: 0.85;
}

/* モーダル表示中は背面スクロールを止める */
body.modal-open {
  overflow: hidden;
}

/* =========================================================
   SP（767px以下）向けの上書き
   ========================================================= */
@media (max-width: 767px) {
  .modal {
    height: 100vh;
    min-height: 0;
    padding: 1rem 0;
    overflow: hidden;
  }
  .modal__box {
    flex-direction: column;
    /* コンテンツの長さに関わらずモーダルの高さを固定する
       （縦サイズを抑えるため85vh→80vhに調整） */
    height: 80vh;
    max-height: 80vh;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }
  /* InMe・Itemsモーダル用：SPでも上のheight:85vh固定を打ち消し、
     写真サイズ（＋余白）に合わせた高さ(auto)にする */
  .modal__box--fit {
    height: auto;
    max-height: 90vh;
  }
  .modal__left {
    width: 100%;
    flex-shrink: 0;
    /* PCと同じように余白を持たせ、白背景を見せる */
    padding: 1.25rem 1.25rem 0 1.25rem;
  }
  .modal__photo {
    /* スタッフ写真は左右の余白の分だけ縮めつつ大きく表示 */
    width: 100%;
    margin: 0;
  }
  .modal__right {
    /* SPではmodal__body側の1つのスクロールに合流させるため、
       既定(PC用)のflex:1とoverflow-y:autoを打ち消し、
       自然な高さのまま並ぶ（＝はみ出した分はmodal__bodyがスクロールする）
       ようにする */
    flex: none;
    overflow-y: visible;
    padding: 1.25rem;
  }

  /* Look用：SPでは名前をITEM LISTの上（modal__right側）に表示する */
  .modal__profile--pc {
    display: none;
  }
  .modal__profile--sp {
    display: block;
    width: 100%;
    /* 名前・職業ブロックとITEM LISTの間に余白を持たせる */
    margin: 0 0 1.75rem;
  }

  /* InMe・Look共通：SPは写真から末尾のコンテンツまでを1つの縦スクロールにする。
     modal__body自体をスクロール領域にすることで、写真がスクロールで
     流れていき、最終的にコメントやITEM LISTが画面いっぱいに広く見える形になる。
     （modal__closeはmodal__boxの直接の子のままなので、
     　スクロールしても閉じるボタンの位置は動かない） */
  .modal__body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* アイテムリスト（Look用）：SPでは個別にスクロールさせず、
     modal__body側の1つのスクロールに合流させる */
  .modal__item-scroll {
    flex: none;
    min-height: auto;
    overflow-y: visible;
  }

  /* SPは「写真の左右半分タップ」での切り替えを廃止し、
     フリック（スワイプ）操作のみで写真を切り替える。
     （下のドットのタップでの移動は残す。PCは従来どおり左右クリック） */
  .modal__slide-nav {
    display: none;
  }

  /* InMe（スタッフ）モーダル：SPは「写真→スタッフ名・店舗名→
     ITEM LIST→コメント」の順（DOM順のまま）で1つの縦スクロールに並ぶ。
     modal__left（写真＋ドット＋プロフィール）とmodal__right（ITEM LIST＋
     コメント）が縦に積まれるだけなので、並べ替えの指定は不要。
     ここではブロック間の余白だけを従来の見た目に合わせて調整する。 */
  #modal-inme .modal__comment {
    /* 最後のアイテムとコメントの間を広く空けてブロックの切れ目を
       はっきりさせる（従来の 1.25rem＋1.5rem＝2.75rem と同じ間隔） */
    margin-top: 2.75rem;
  }
}