@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   AILÉA v3 — スタイル詳細ページ（Concept / Dress / Kimono）
   共通の土台は v3-base.css にあります（先に読み込まれます）。

   ページの流れ：
     見出し → 主役写真 → 説明 → ラインナップ → Look Book → 締め
   トップの「章」と同じ作法で、写真は片側だけ紙の端まで抜きます。
   ══════════════════════════════════════════════════════════ */

/* ─────────── 1. 見出し ─────────── */
body.v3 .s-head{
  padding-top:clamp(56px,8vh,96px);
  padding-bottom:clamp(64px,9vh,120px);
}
body.v3 .s-head .v-en{ grid-column:2 / 7; margin-bottom:26px; }
body.v3 .s-no{
  grid-column:2 / 7; display:block; margin-bottom:clamp(36px,5.5vh,64px);
  font-family:var(--fl); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink);
}
body.v3 .s-head .v-h{ grid-column:2 / 9; }
body.v3 .s-sub{
  grid-column:3 / 9; display:block; margin-top:clamp(32px,4.5vh,54px);
  font-family:var(--fl); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-sub);
}
/* 和名。カード（/plan/ と /style/）で押させている言葉を、着いた先でも名乗ります。
   英字と同じ字送りだと和文が間延びするので、ここだけ詰めています。
   区切りの線は文字ではなく罫線です（「／」を入れると読み上げに乗ります）。 */
body.v3 .s-sub-ja{
  margin-left:1.4em; padding-left:1.4em;
  border-left:1px solid var(--line-f);
  font-family:var(--fd); font-size:12px; letter-spacing:.18em;
  color:var(--ink-2);
}

/* ─────────── 2. 主役写真 ─────────── */
/* 右端まで抜き、左に紙を残します（トップの第1章と同じ扱い） */
body.v3 .s-hero{
  position:relative; overflow:hidden;
  width:88%; height:clamp(420px,78vh,880px);
  margin-left:auto; margin-right:0;
}
body.v3 .s-hero img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
/* 3ページとも同じ「右へ88%」だと、テンプレートを3回見せることになります。
   抜く向きと幅をページごとに変えて、めくったときの印象を変えます。
   クラスは WordPress が body に出している page-template-page-style-◯◯ です。 */
body.v3.page-template-page-style-kimono .s-hero{   /* 和装は左へ抜く */
  width:84%; margin-left:0; margin-right:auto;
}
body.v3.page-template-page-style-concept .s-hero{  /* 映画的に、横長で深く */
  width:94%; height:clamp(460px,86vh,980px);
}
/* ※ 上の2つは body のクラスを足しているぶん、下のレスポンシブ指定
     （body.v3 .s-hero）より詳細度が高くなります。狭い画面でも
     そのまま効き続けるので、打ち消しは下の @media の中に書いてあります。 */

/* ─────────── 3. 説明 ─────────── */
body.v3 .s-about{
  padding-top:clamp(110px,16vh,220px); padding-bottom:var(--secY);
  align-items:start;
}
body.v3 .s-about-txt{ grid-column:2 / 7; }
/* 段落の間隔は、必ず行間より広く取ること。
   以前は 1.9em（13px×1.9＝24.7px）でしたが、行間が 32.5px あるため
   段落の切れ目が行送りより狭く、3段落が1つの塊に見えていました。
   本文共通の 3.2em（41.6px）に揃えます。 */
body.v3 .s-about-txt .v-p + .v-p{ margin-top:3.2em; }
/* タグはもう1カラム右へ送り、本文の頭より深い位置から始めます。
   横に並ぶと「左が文章・右が表」の二段組みに見えてしまうので、
   斜めにずらして、紙の右上に余白を残します。 */
body.v3 .s-about-side{ grid-column:9 / 13; margin-top:clamp(56px,10vh,130px); }
body.v3 .s-tags{ list-style:none; margin:0; padding:0; }
body.v3 .s-tags li{
  padding:clamp(14px,2vh,20px) 0;
  border-bottom:1px solid var(--line-f);
  font-family:var(--fl); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-2);
}
body.v3 .s-tags li:first-child{ border-top:1px solid var(--line-f); }

/* ─────────── 3-b. 引用（ラインナップを持たないページ用） ─────────── */
/* Concept は6スタイルの一覧を持ちますが、Dress と Kimono は持ちません。
   代わりにここへ短い引用を置いて、説明とLook Bookの間に一拍つくります。 */
body.v3 .s-quote{ padding-bottom:var(--secY); }
/* 以前は 4/11 の中央揃えで、罫線で上下を挟んでいました。
   紙のまんなかに左右対称の箱が置かれるので、このサイトで唯一
   「整って」しまい、前後の段差が死んでいました。
   いまは右に寄せ、罫線は上の1本だけにしています。
   直前の説明文が左（2/7）なので、左に大きな余白が残ります。 */
body.v3 .s-quote-inner{
  grid-column:6 / 13;
  padding-top:clamp(48px,7vh,84px);
  border-top:1px solid var(--line-f);
  text-align:left;
}
body.v3 .s-quote-txt{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.5vw,21px); line-height:2.6; letter-spacing:.18em;
  color:var(--ink);
}
body.v3 .s-quote-by{
  display:block; margin-top:clamp(28px,4vh,46px);
  font-family:var(--fl); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ─────────── 4. ラインナップ ─────────── */
body.v3 .s-lineup{ padding-bottom:var(--secY); }
body.v3 .s-lineup .v-en{ grid-column:3 / 12; margin-bottom:26px; }
body.v3 .s-lineup .v-h { grid-column:3 / 10; margin-bottom:clamp(64px,9vh,120px); }

/* 比較して選ぶ面なので、ここだけは段違いにせず整列させます */
body.v3 .s-grid{
  grid-column:3 / 12;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.8vw,50px); row-gap:clamp(48px,7vh,96px);
}
body.v3 .s-card{ display:block; }
body.v3 .s-card-media{
  position:relative; display:block; overflow:hidden; aspect-ratio:3/4;
  margin-bottom:22px;
}
body.v3 .s-card-media img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  /* opacity も必ず書くこと。transform だけ書くと、v3-base.css の
     [data-rv-img] img が持っている不透明度のフェードを丸ごと消してしまい、
     覆いが開くより先に写真がパッと出ます（実際に出ました）。 */
  transition:opacity 1.9s var(--ease-slow), transform 1.9s var(--ease-slow);
}
body.v3 .s-card:hover .s-card-media img{ transform:scale(1.05); }
/* 通し番号（Concept 01）。見出しは下の型番なので、ここは番号だけです。 */
body.v3 .s-card-no{
  /* ■ 余白は実測で決めています（2026-10-05）
       文字box間の実寸で、番号→型番 12px、型番→説明 22px。
       説明の行間は10.6pxなので、見出しとの間はその約2倍です。
       ここを 12px / 22px（＝実測 20.4px / 32.3px）にしていたときは、
       ふたつの間隔が近すぎて「番号＋型番がひとまとまり」に見えず、
       説明との間だけが本文3行ぶん空いて見えていました。
       数字を変えるときは、必ず文字box間で測り直してください
       （margin の値と見た目の間隔は、行間の半分ずつぶんずれます）。 */
  display:block; margin-bottom:4px;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
/* 型番を見出しにする場合の組み（.s-card-name.is-code）。
   .s-card-name は明朝ですが、型番を明朝で組むと数字と英字の幅が揃わず、
   記号に見えません。ラベル用の書体に替え、字間を広げて型番らしくします。 */
body.v3 .s-card-name.is-code{
  font-family:var(--fl); font-weight:500;
  font-size:clamp(14px,1.2vw,16px); letter-spacing:.22em;
  text-transform:uppercase;
}
/* 名前（American Indie など）は出していません（2026-10-03）。
   そのぶん型番だけでは中身が分からないので、説明文（desc）に
   「ゴシックファンタジー」「大正浪漫」などの言葉を必ず入れてください。 */
body.v3 .s-card-name{
  font-family:var(--fd); font-weight:400; font-size:clamp(13px,1.1vw,15px);
  line-height:2.1; letter-spacing:.12em; color:var(--ink); display:block;
}
/* 番号と型番は1つのまとまり。説明はそこから離します（上の実測メモ参照）。 */
body.v3 .s-card-desc{
  margin-top:12px; font-size:12px; line-height:2.3;
  letter-spacing:.09em; color:var(--ink-2);
}

/* ─────────── 5. Look Book（段組み） ─────────── */
/* 仕組みはジャーナル一覧と同じです。行を1pxに刻み、
   各カードが自分の高さぶん行をまたぐよう JS が指定します。
   align-items:start を外すと高さが測れなくなるので注意。 */
body.v3 .s-look{ padding-bottom:var(--secY); }
/* 見出しは左に吊り、写真の段組みは2カラム右から始めます。
   以前はどちらも3カラム目で始まっていて、見出しと写真が
   同じ縦線に乗り、中央寄りの長方形に見えていました。 */
body.v3 .s-look .v-en{ grid-column:2 / 7; margin-bottom:26px; }
body.v3 .s-look .v-h { grid-column:2 / 8; margin-bottom:clamp(84px,12vh,160px); }
body.v3 .s-mason{
  grid-column:4 / 13;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.8vw,50px); row-gap:0;
  grid-auto-rows:1px; align-items:start;
}
body.v3 .s-mason .sg-item{
  display:block; overflow:hidden; cursor:pointer;
  padding-bottom:clamp(20px,2.8vw,50px);   /* 縦の間隔。高さに含まれます */
}
/* 列ごとに肩を落とします。
   写真の高さはもともと不揃いですが、3列とも同じ高さから始まるため、
   上辺だけが1本の直線に揃って見えていました。
   最初の3枚がそのまま左・中・右の列の頭になるので、2枚目と3枚目に
   違う量の余白を上に足して、3列とも違う高さから始めます。
   実測（1440px）：左 3927 ／ 中 3976 ／ 右 4037。
   padding は v3.js が測る高さに含まれるため、段組みの計算を壊しません
   （padding-bottom を縦の間隔に使っているのと同じ理屈です）。 */
body.v3 .s-mason .sg-item:nth-child(2){ padding-top:clamp(28px,5vh,80px); }
body.v3 .s-mason .sg-item:nth-child(3){ padding-top:clamp(62px,11vh,170px); }
/* 元の写真は縦横比がほぼ揃っているため、そのまま並べると
   全部同じ高さになり段組みになりません。1枚ずつ比率を変えて高さをばらけさせます。
   比率は PHP 側から --ar で渡しています。 */
body.v3 .s-mason .sg-item img{
  width:100%; height:auto; display:block;
  aspect-ratio:var(--ar,3/4); object-fit:cover;
  transition:opacity 1.2s var(--ease-slow);
}
body.v3 .s-mason .sg-item:hover img{ opacity:.82; }

/* Premiumプランの衣装で撮ったルックにつく目印。
   囲みは作らず、写真の左上に小さく文字だけを置きます。 */
body.v3 .s-mason .sg-item{ position:relative; }
body.v3 .s-badge{
  position:absolute; left:14px; top:12px; z-index:2;
  font-family:var(--fl); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  pointer-events:none;
}

/* ─────────── 6. 締め ─────────── */
body.v3 .s-cta{ padding-bottom:calc(var(--secY) * 1.1); }
/* 締めも左に吊ります（以前は 3/11 で紙のまんなかでした）。
   右に1カラム以上あけることで、最後まで余白が続きます。 */
body.v3 .s-cta-inner{
  grid-column:2 / 10;
  padding-top:clamp(52px,7.5vh,90px); border-top:1px solid var(--line);
}
body.v3 .s-cta-wing{ display:block; width:38px; color:var(--ink-3); margin-bottom:24px; }
body.v3 .s-cta-wing svg{ width:100%; height:auto; display:block; }
body.v3 .s-cta-title{
  font-family:var(--fd); font-weight:500; font-size:clamp(15px,1.35vw,19px);
  line-height:2.2; letter-spacing:.14em; color:var(--ink);
}
body.v3 .s-cta-note{
  margin-top:1.8em; font-size:12px; line-height:2.3;
  letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .s-cta-links{ margin-top:2.4em; display:flex; gap:clamp(24px,3.5vw,56px); flex-wrap:wrap; }

/* ─────────── 7. レスポンシブ ─────────── */
@media (max-width:900px){
  /* v3-base.css で6カラムに組み替わります。ここで置き直します */
  body.v3 .s-head .v-en  { grid-column:1 / 5 !important; }
  body.v3 .s-head .s-no  { grid-column:1 / 5 !important; }
  body.v3 .s-head .v-h   { grid-column:1 / 7 !important; }
  body.v3 .s-head .s-sub { grid-column:2 / 7 !important; }

  /* 主役写真は右の画面外へ抜きます（PCの「右端まで抜く」と同じ扱い） */
  body.v3 .s-hero{ width:92%; height:auto; aspect-ratio:3/4; margin-left:auto; margin-right:0; }
  /* 抜く向きはページごとに変えたままにしますが、高さと幅はここで揃えます。
     Concept の height:clamp(460px,86vh,980px) は詳細度が高く、
     打ち消さないとスマホで 353×698（縦横ほぼ1:2）になり、
     顔が切れるほど縦長の切り抜きになっていました（実測）。 */
  body.v3.page-template-page-style-kimono .s-hero{
    width:92%; margin-left:0; margin-right:auto;
  }
  body.v3.page-template-page-style-concept .s-hero{
    width:92%; height:auto; aspect-ratio:3/4;
  }

  body.v3 .s-about-txt { grid-column:1 / 6 !important; }
  body.v3 .s-about-side{ grid-column:2 / 7 !important; margin-top:clamp(40px,7vh,64px); }
  /* 引用の箱はグリッドの直下の子である .s-quote-inner のほうです。
     以前ここは .s-quote-txt（箱の中の <p>）を指していて、
     カラム指定がどこにも効いていませんでした。 */
  body.v3 .s-quote-inner{ grid-column:1 / 7 !important; }
  body.v3 .s-lineup .v-en{ grid-column:1 / 5 !important; }
  body.v3 .s-lineup .v-h { grid-column:1 / 7 !important; }
  body.v3 .s-look .v-en  { grid-column:2 / 7 !important; }
  body.v3 .s-look .v-h   { grid-column:1 / 7 !important; }
  body.v3 .s-cta-inner   { grid-column:1 / 7 !important; }
  body.v3 .s-grid,
  body.v3 .s-mason{ grid-column:1 / 7 !important; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 2列のときは右の列だけ下げて、水平に並ばないようにします */
  body.v3 .s-grid > *:nth-child(even){ margin-top:clamp(30px,6vh,64px); }
}
@media (max-width:600px){
  /* 1列のときは段組みをやめる。JS側も列数1を検出して指定を外します */
  body.v3 .s-grid { grid-template-columns:minmax(0,1fr); }
  body.v3 .s-mason{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  body.v3 .s-grid > *:nth-child(even){ margin-top:0; }
  /* 1列になったら肩落としは不要です（下のmargin振りで崩しています） */
  body.v3 .s-mason .sg-item:nth-child(2),
  body.v3 .s-mason .sg-item:nth-child(3){ padding-top:0; }

  /* 1列でも「一覧」に見せないため、1件ずつ左右に振ります
     （マージンで振るのは、段組みのJSに触れないためです） */
  body.v3 .s-grid > *:nth-child(odd),
  body.v3 .s-mason > *:nth-child(odd) { margin-right:clamp(30px,13vw,64px); }
  body.v3 .s-grid > *:nth-child(even),
  body.v3 .s-mason > *:nth-child(even){ margin-left :clamp(30px,13vw,64px); }
  /* 3件に1件は幅いっぱいに戻して、目を休ませます */
  body.v3 .s-grid > *:nth-child(3n+1),
  body.v3 .s-mason > *:nth-child(3n+1){ margin-left:0; margin-right:0; }

  body.v3 .s-cta-links{ flex-direction:column; gap:18px; }
}

/* ─────────── 8. 動きを減らす設定への配慮 ─────────── */
@media (prefers-reduced-motion:reduce){
  body.v3 .s-card-media img,
  body.v3 .s-mason .sg-item img{ transition:none !important; transform:none !important; }
}