@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   AILÉA v3 — トップページ固有
   共通の土台は v3-base.css にあります（先に読み込まれます）。
   ══════════════════════════════════════════════════════════ */

/* ─────────── 3-c. ローディング演出 ─────────── */
/* ロゴが左から現れ、現れきると上へ飛び去り、紙がめくれるように写真が出ます。
   ロゴはワードマークの中を翼の線が左から右へ抜けていく形なので、
   左から順に開いていくと、その線をなぞっているように見えます。

   ■ 消える処理はすべてCSS（animation-fill-mode:forwards）です。
     JSでクラスを外す作りにすると、JSが落ちたとき画面が覆われたまま
     何も操作できなくなります。ここは必ずCSSだけで完結させてください。
   ■ 出すかどうかの判定だけ header.php の小さなスクリプトが行い、
     <html> に v-loading を付けています。付かなければ最初から非表示です。 */
body.v3 .v-loader{ display:none; }

html.v-loading body.v3 .v-loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:400;
  background:var(--paper);
  /* ロゴごと、その場で静かに消えます。
     動かす演出（上へ抜ける／ヘッダーへ着地する）は試しましたが、
     描き終わったあとにもう一度動きが入るぶん、忙しなく感じます。
     描く→消える、の二拍で終わらせること。 */
  animation:v-loader-out 1s var(--ease-slow) 1.5s forwards;
}
html.v-loading body.v3 .v-loader-mark{
  display:block; width:clamp(180px,24vw,340px);
  /* 右端から左へ隠しておき、それを開いていくことで「描かれる」ように見せます */
  clip-path:inset(0 100% 0 0);

  /* 消えるのは親（.v-loader）ごとです。ロゴ自身は動かしません。 */
  animation:v-loader-draw 1.15s cubic-bezier(.5,0,.25,1) .12s forwards;
}
html.v-loading body.v3 .v-loader-mark img{ width:100%; height:auto; display:block; }

@keyframes v-loader-draw{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@keyframes v-loader-out{      /* 紙もロゴも、その場で静かに消える */
  from{ opacity:1; }
  to  { opacity:0; visibility:hidden; }
}

/* ローディングを出す回は、ヒーローの入場をその分だけ遅らせます
   （出さない回は下の既定の遅延のまま、すぐ動きます） */
html.v-loading body.v3 .v-hero-zoom{ animation-delay:1.75s; }
html.v-loading body.v3 .v-hero-frame::after{ animation-delay:1.75s; }
html.v-loading body.v3 .v-hero-aside::after,
html.v-loading body.v3 .v-hero-aside .v-hero-zoom{ animation-delay:2.15s; }
html.v-loading body.v3 .v-hero-foot{ animation-delay:2.75s; }

/* ─────────── 4. ヒーロー ─────────── */
/* 全面ではなく、紙の上に余白を残して写真を「額装」します。
   文字は写真に重ねず、下の紙面に置きます（覆いが要らなくなり、写真が濁りません）。

   ■ 組み方
     主写真を右の紙端に寄せ、その左下に小さい添えを置きます。
     2枚は下端を揃え、余白は左上へ向かって開きます。
     低いほうから高いほうへ上がる形が、翼の輪郭になります。

   ■ 縦横比について（ここは触るとすぐ崩れます）
     素材写真はすべて 4:5 の縦位置です。
     以前は主写真を 16:9 に近い横長にしていましたが、それだと縦位置の
     写真から高さを半分以上捨てることになり、人物が小さく浮いて見えます。
     主写真は 7:6、添えは素材そのままの 4:5 に留めてあります。
     ここを横長に戻す場合は、素材も横位置で撮り直す前提にしてください。 */
body.v3 .v-hero{
  background:var(--paper);
  /* 上の余白はヘッダーが固定で乗るぶんを含みます。
     ロゴを大きくしてヘッダーが高くなった（78→92px）ぶん、ここも上げました。
     ヘッダーの下端と写真の上端で30px前後は空けてください。
     ここを詰めると、他が余白だらけなぶん、上だけ窮屈に見えます。 */
  padding:clamp(112px,14vh,160px) 0 0;
}
/* 2枚を12カラムの上に置き、下端を基準に並べます（align-items:end が肝）。
   添えはそこからさらに --aside-drop ぶん下へ出るので、
   その分の場所を padding で空けておきます（これが無いとキャプションに重なります）。 */
body.v3 .v-hero-stage{
  align-items:end;
  row-gap:0;
  --aside-drop:clamp(56px,7vh,96px);
  /* 落とした分だけでは足りません。添えの下端は必ずこの padding の端に
     一致するので、padding = drop のままだとキャプションとの間が
     foot のパディング（18px）だけになり、紙の縁（16px）と重なります。
     drop に「離すぶん」を足しておくこと。 */
  padding-bottom:calc(var(--aside-drop) + clamp(26px,3.5vh,44px));
}

/* 主写真：右の紙端に寄せます。右端はヘッダーや他のセクションと同じ位置 */
body.v3 .v-hero-frame{
  position:relative; overflow:hidden;
  /* 7:6 の比では高さが「幅」で決まります。添えを下へ落としたぶん
     ヒーローが伸びるので、その分は写真の幅を1カラム狭めて吸収します。
     max-height で高さを抑えると、比のぶん幅まで縮んで右端が
     基準線（--gut）から外れます（実測で右余白が86→143pxになりました）。
     右端は13カラム目のまま動かさないこと。 */
  grid-column:7 / 13;
  aspect-ratio:7 / 6;
  max-height:78svh;
}
/* 添え：主写真の左下。素材の縦横比のまま、切らずに見せます。
   ── 下ぞろえをやめた理由 ──
   以前は主写真と下端をぴたりと揃えていました。しかしページ内で
   2つの要素を並べている箇所を全部測ったところ、下端が完全に一致するのは
   ここだけで（他は35〜332pxずれ、アクセスに至っては117px重なる）、
   ヒーローだけが几帳面に収まって見えていました。
   さらにスマホ側は重ねてずらしているため、PCのほうが大人しいという
   逆転も起きていました。同じ作法に揃えます。 */
body.v3 .v-hero-aside{
  position:relative; overflow:hidden;
  grid-column:2 / 5;
  aspect-ratio:4 / 5;
  max-height:52svh;
  /* 右へ寄せて主写真に近づけ、下へ落とします。
     PCでは重ねません。写真が大きいので、重ねると2枚が1枚の塊に見えて
     かえって窮屈になります。40px前後だけ空けて、下端をずらすことで
     「並んでいるが揃っていない」状態をつくります。
     （スマホは面積が小さく、離すと組写真に見えないので重ねてあります）

     横移動は transform で行うこと。margin-left を使うと、グリッド項目は
     割り当てられた領域から余白ぶんを引かれるため、幅が297→139pxまで縮み、
     縦横比のぶん高さも一緒に小さくなります（実際に起きました）。
     ※ パララックスは内側の [data-px-target] に transform を書くので、
        ここで transform を使っても取り合いにはなりません。 */
  transform:translateX(clamp(120px,14vw,290px));
  margin-bottom:calc(var(--aside-drop) * -1);
}
body.v3 .v-hero-zoom{ position:absolute; inset:0; display:block; overflow:hidden; }

/* もとはパララックスで動かす層で、枠より12%高くしていました。
   パララックスを止めたので、余り幅をなくして枠と同じ高さにしてあります
   （余らせたままだと、動かないのに写真が余分に切れます）。 */
body.v3 .v-hero-px{
  position:absolute; top:0; left:0; right:0; height:100%;
  display:block; will-change:transform;
}
body.v3 .v-slide{ position:absolute; inset:0; display:block; }
body.v3 .v-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}

/* ── 3枚の入れ替え ──
   1周21秒。1枚が約7秒表示され、前後1.5秒ほど重ねて溶かします。
   --i（0,1,2）で開始をずらしているだけなので、枚数を増やすときは
   duration を 7秒 × 枚数 に、keyframes の割合をそれに合わせて直してください。 */
body.v3 .v-slide,
body.v3 .v-hs{
  /* opacity:0 と backwards は必須。
     2枚目以降は開始を遅らせていますが、その待機中は自前のCSSが効くため、
     どちらも欠けると3枚が重なって最後の1枚が見えたままになります。 */
  opacity:0;
  animation:v-slide 21s linear infinite backwards;
  animation-delay:calc(var(--i) * 7s);
}
@keyframes v-slide{
  0%   { opacity:0; }
  5%   { opacity:1; }
  33%  { opacity:1; }
  40%  { opacity:0; }
  100% { opacity:0; }
}
/* ── 添えの写真だけ、半枚ぶん（3.5秒）早送りします ──
   2枚が同じ瞬間に入れ替わると、切り替えという仕掛けのほうに目が行きます。
   添えを半拍ずらすと、画面のどこかが常に静かに変わっている状態になり、
   「いま切り替わった」と意識させずに済みます。

   ■ 同じ写真が2枚並ばないこと（3枚のときの確認）
     添えはもともと1枚先（--i を1つ手前）を出しています。
     そこから半拍早めるので、主写真が k のとき添えは k+1 または k+2 です。
     3枚なら k+2 ＝ k−1 なので、どの時刻でも主写真と一致しません。
     枚数を変えるときは、この条件を必ず確認してください。

   ■ 右下のスタイル名（.v-hs）はずらしません。
     あれは主写真の名前なので、主写真と同時に変わる必要があります。 */
body.v3 .v-hero-aside .v-slide{
  animation-delay:calc( var(--i) * 7s - 3.5s );
}

/* ── 読み込み時の演出 ──
   紙の覆いがその場で溶けて写真が現れ、写真自体は少し引きながら落ち着きます。
   覆い（2.2秒）より写真（3.0秒）を長くして、消えたあとも動きが残るようにしています。
   覆いに向きを持たせないので、動きを担うのは「引き」だけになります。

   ※ JSではなくCSSアニメーションで組んでいます。
     クラスの付け外しで制御すると、JSが読み込めなかったときに
     覆いが外れず、ヒーローが消えたままになるためです。 */
body.v3 .v-hero-zoom{
  animation:v-hero-zoom 3s var(--ease-slow) .15s backwards;
}
@keyframes v-hero-zoom{
  from{ transform:scale(1.12); } to{ transform:scale(1); }
}

/* 覆いは向きを持たず、その場で白く溶けて消えます（ディゾルブ）。

   ※ 以前はここを scaleY で上へ縮めていました。写真が下から立ち上がる形になり、
     上向きの動き＝「持ち上がる・ひらく」という高揚の合図になります。
     このサイトは静けさと余白が主題なので、動きから向きを取り除きました。
     ローディングの紙も「その場で消える」ので、続きとしても揃います。

   ※ opacity:0 と backwards は対で必須です。遅延中は素のCSSが効くため、
     backwards を外すと待機のあいだ覆いが消えたままになります。
     （終わったあとは素の opacity:0 が残るので forwards は要りません）

   ※ 他案に差し替えるときは、この2つ（宣言と @keyframes）だけを直します。
       B 横に引かれる … transform-origin:right center;
                        animation 1.9s var(--ease) / from scaleX(1) → to scaleX(0)
       C 上から現れる … transform-origin:bottom center;
                        animation 1.7s var(--ease) / from scaleY(1) → to scaleY(0)
     いずれも transform を使う案では opacity:0 を外し、forwards に戻すこと。 */
body.v3 .v-hero-frame::after,
body.v3 .v-hero-aside::after{
  content:''; position:absolute; z-index:2; pointer-events:none;
  background:var(--paper); opacity:0;

  /* inset:0 ではなく -6px。枠からわざと6pxはみ出させます。
     枠の高さは aspect-ratio から出るので端が小数になります（例 448.19px）。
     中の写真は will-change:transform で合成レイヤーになっており、
     合成レイヤーの切り抜きは整数ピクセルに外側へ丸められますが、
     覆いの塗りは小数のままアンチエイリアスされます。
     この差のぶんだけ写真が四辺からはみ出し、覆いが不透明でも
     細い輪郭線が見えます（実際に出ました）。
     はみ出させた6pxは枠の overflow:hidden が切るので、見た目は変わりません。
     ※ 以前 scaleY で抜いていたときは覆いにも transform があり、
       覆い自身も同じ丸めを受けていたので出ませんでした。 */
  inset:-6px;

  animation:v-hero-veil 2.2s var(--ease-slow) .15s backwards;
}
/* 添えは主写真より0.4秒あとに現れます。同時に抜くと2枚が
   ひとつの大きな面に見えてしまい、組み写真として読めません。 */
body.v3 .v-hero-aside::after{ animation-delay:.55s; }
body.v3 .v-hero-aside .v-hero-zoom{ animation-delay:.55s; }
@keyframes v-hero-veil{
  from{ opacity:1; } to{ opacity:0; }
}

/* 写真が現れきってから、キャプションと Scroll が遅れて上がってきます。
   位置は写真と同じ12カラムに乗せ、左は添えの下、右は主写真の右端に揃えます */
body.v3 .v-hero-foot{
  align-items:baseline;
  padding-top:18px;
  animation:v-hero-foot 1.3s var(--ease-slow) 1.15s backwards;
}
body.v3 .v-hero-cap{ grid-column:2 / 7; }
body.v3 .v-hero-right{ grid-column:7 / 13; justify-content:flex-end; }
@keyframes v-hero-foot{
  from{ opacity:0; transform:translate3d(0,12px,0); }
  to  { opacity:1; transform:none; }
}
body.v3 .v-hero-cap{
  font-family:var(--fl); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}

/* 右側：入れ替わるスタイル名 ＋ Scroll */
body.v3 .v-hero-right{ display:flex; align-items:center; gap:clamp(22px,3vw,52px); }
body.v3 .v-hero-style{
  position:relative; display:block;
  /* 3つを重ねて置くので、中身は絶対配置＝親に幅がありません。
     いちばん長い "Concept Portrait" が入る幅を、ここで確保しておきます。
     足りないと、右揃えの文字が左へはみ出して切れます。 */
  min-width:16em; height:1.6em;
  font-family:var(--fl); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink);
}
body.v3 .v-hs{
  position:absolute; right:0; top:0; white-space:nowrap; line-height:1.6;
}

/* ── スタイル名を1文字ずつ打ち込む ──
   JSが動いた回だけ .is-typed が付き、重ねてあった3つを伏せて
   打ち込み用の1行に差し替えます。
   JSが動かなかった回は、上のCSSの入れ替えがそのまま残ります。
   （打ち込みをCSSだけで作ると、3つの文字数の違いを吸収できません。
     かといってJSに全部任せると、JSが落ちた回に文字が出ません。
     「CSSで成立させ、JSは上書きで足す」形にしてあります。）

   打つ速さは v3.js の initHeroType() が決めています。
   写真の入れ替え（21秒で3枚）と同じ時計を読んでいるので、
   写真が変わる呼吸に合わせて打ち始め、変わる前に消えます。 */
body.v3 .v-hero-style.is-typed .v-hs{ opacity:0 !important; animation:none !important; }
body.v3 .v-hs-type{
  position:absolute; left:0; top:0;
  white-space:nowrap; line-height:1.6; color:var(--ink);
}
/* 打ち込み位置のカーソル。1文字ぶんの細い縦線が点滅します */
body.v3 .v-hs-type::after{
  content:''; display:inline-block;
  width:1px; height:1em; margin-left:.3em; vertical-align:-.14em;
  background:currentColor;
  animation:v-caret 1.05s steps(1,end) infinite;
}
@keyframes v-caret{ 0%,50%{ opacity:1 } 50.01%,100%{ opacity:0 } }
body.v3 .v-scroll{
  display:flex; align-items:center; gap:12px;
  font-family:var(--fl); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .v-scroll i{
  display:block; width:52px; height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
body.v3 .v-scroll i::after{
  content:''; position:absolute; inset:0; background:var(--ink-2);
  transform:translateX(-100%); animation:v-cue 2.8s var(--ease) infinite;
}
@keyframes v-cue{
  0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)}
}

/* ─────────── 4-b. トップのお知らせ ─────────── */
/* ヒーローのすぐ下に出る帯（外観 → カスタマイズ → トップのお知らせ）。
   既定では非表示で、本文を入れて「表示する」にしたときだけ出ます。

   ■ ここに指定が必要な理由
     旧デザインの指定は assets/css/page-top.css にありますが、
     あのファイルは v3 のページでは読み込みません。つまり v3 では
     この帯だけ素のHTML（枠なし・字も既定のまま）で出ていました。
     しかも旧の指定は Space Mono・Cormorant Garamond・ゴールドで、
     v3で使わないと決めたものばかりです。流用はできません。

   ■ 組み方
     面の色は敷きません。上下に細い罫線を1本ずつ引くだけで帯にします。
     中身は本文と同じ12カラムに乗せ、見出しと同じ2カラム目から始めます。 */
body.v3 .top-notice{
  background:none; border:0;

  /* ── 罫線は全幅に引きません ──
     紙の端から端まで引くと、線ではなく「帯（面）」になります。
     面になると、そこだけ別の紙を貼ったように浮いて、
     余白でつないでいくこのページの流れが一度断ち切られます。
     本文と同じ12カラムに乗せ、見出しと同じ2カラム目から右端までにします。
     ::before / ::after はグリッドコンテナの子になるので、
     ふつうの要素と同じように列を指定できます。 */
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  padding-left:var(--gut); padding-right:var(--gut);

  /* ── 上下の間 ──
     ヒーローには下パディングが無いので、何も足さないと上罫線が
     ヒーローの文字とほぼ接します（実測で−12px、ぶつかっていました）。
     下のプロローグまでは321px空いているので、そこだけ極端に詰まって見えます。
     ・帯の外（上）… ヒーローから離す。ただし節の区切り（--secY≒320px）までは
       取らない。お知らせはヒーローに続く一言なので、離しすぎると迷子になります
     ・帯の中     … 罫線と文字の間。20pxでは窮屈でした */
  margin-top:clamp(96px,14vh,180px);
}
body.v3 .top-notice::before,
body.v3 .top-notice::after{
  content:''; grid-column:2 / 13; height:1px; background:var(--line-f);
}
/* 中身は外側の12カラムをそのまま丸ごと使い、同じ幅・同じ隙間で
   もう一度12に割ります（＝外側と同じ位置の12本になります）。
   罫線と文字の間（旧 padding:… 0）は、こちらへ移しました。 */
body.v3 .tn-inner{
  grid-column:1 / 13;
  max-width:none; margin:0;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap); align-items:baseline;
  padding:clamp(34px,4.4vh,54px) 0;
}
body.v3 .tn-label{
  grid-column:2 / 3;
  border:0; padding:0;                /* 旧デザインの囲みを外します */
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
body.v3 .tn-text{
  grid-column:3 / 10; min-width:0;
  font-size:12.5px; line-height:2.2; letter-spacing:.09em; color:var(--ink-2);
}
/* リンクは本文中のリンクと同じ作法（下線が左から引かれる）に揃えます */
body.v3 .tn-link{
  grid-column:10 / 13; justify-self:end;
  /* text-decoration:none は必須。入れないとブラウザ既定の下線が出て、
     自前の罫線と合わせて線が2本に見えます（旧CSSには入っていましたが、
     あのファイルは v3 では読み込まれません）。 */
  text-decoration:none;
  position:relative; border:0; padding:0 0 7px;
  font-family:var(--fl); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
body.v3 .tn-link::before,
body.v3 .tn-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
body.v3 .tn-link::before{ background:var(--line-link); }
body.v3 .tn-link::after{
  background:var(--ink); transform:scaleX(0); transform-origin:right center;
  transition:transform .7s var(--ease);
}
body.v3 .tn-link:hover::after{ transform:scaleX(1); transform-origin:left center; }
/* 指で触る画面にはホバーが無いので、濃い下線を最初から出します。
   押せる範囲も広げます（既定では37×29pxで、指には小さすぎました）。 */
@media (hover: none){
  body.v3 .tn-link::after{ transform:scaleX(1); }
  body.v3 .tn-link{ padding:10px 12px 12px; margin-left:-12px; }
  /* 左右に余白を足しても、下線は文字の幅のままにします
     （left/right を余白ぶん寄せる。width:100% のままだと線が文字からはみ出します） */
  body.v3 .tn-link::before,
  body.v3 .tn-link::after{ left:12px; right:12px; width:auto; }
}

/* ─────────── 4-c. キャンペーンバナー ─────────── */
/* 画像1枚だけの面です。見出しも枠も付けません。
   このサイトで唯一「宣伝」として置く面なので、
   周りを飾ると広告が二重になって浮きます。

   ■ 幅はお知らせの罫線と同じ 2〜13カラム
     紙の端まで抜くと帯になり、トップの流れを断ち切ります
     （お知らせの罫線を全幅からこの幅に直したのと同じ理由です）。
   ■ 比は画像のまま、高さだけ上限あり
     切り抜きはしません（文字入りのバナーで端が欠けると困るため）。
     ただし高さだけ上限を置いています。縦長の画像を入れられたとき、
     バナー1枚で画面を何枚ぶんも占めてしまうからです（実際になりました）。
     上限に当たった画像は、比を保ったまま縮んで中央に寄ります。
     横長を入れれば上限には当たらず、幅いっぱいに出ます。
   ■ 上下の余白
     お知らせの直後に来るので、節の区切り（--secY）までは取りません。
     「お知らせの続き」として読める距離に留めます。 */
/* ─────────── キャンペーンのバナー ─────────── */
/* 以前は全幅の箱に画像を margin:0 auto で中央置きしていました。
   左右対称の「貼り付けた画像」になり、中央揃えをやめて段差を作る
   という他の節の作りから浮いていました。
   ここも左に寄せ、空いた右に小さく情報を置いて段差を作ります。 */
body.v3 .top-campaign{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  padding-left:var(--gut); padding-right:var(--gut);
  margin-top:clamp(80px,13vh,180px);
  margin-bottom:clamp(40px,6vh,90px);
}
body.v3 .tc-link{
  grid-column:2 / 12;
  display:grid;
  grid-template-columns:subgrid;
  text-decoration:none; color:inherit;
  align-items:end;
}
@supports not (grid-template-columns:subgrid){
  body.v3 .tc-link{
    grid-template-columns:repeat(10,minmax(0,1fr));
    column-gap:var(--colgap);
  }
}
/* 画像は左寄り。全幅にはしません（この面でいちばん強い要素なので、
   幅まで与えると前後の余白が効かなくなります） */
body.v3 .tc-media{ grid-column:1 / 8; display:block; overflow:hidden; }
body.v3 .tc-img{
  /* 枠いっぱいに敷きます。
     以前は width:auto だったため、入稿画像が枠より小さいと拡大されず、
     小さな画像がぽつんと置かれたままになっていました（実際になりました）。
     縦長の画像を誤って入れたときだけ max-height が効き、
     object-fit:contain で比を保ったまま収めます（余った面は紙色なので目立ちません）。
     ※ 枠は最大 728px 前後になるので、入稿は横 1600px 以上を推奨。
     読み込み中に高さが決まるよう、width/height属性は PHP が付けています。 */
  display:block; width:100%; height:auto;
  max-height:min(56vh,480px); object-fit:contain; object-position:center;
  transition:transform 1.9s var(--ease-slow);
}
body.v3 .tc-link:hover .tc-img{ transform:scale(1.02); }

/* 右に残した余白へ、期間と導線だけを小さく置きます。
   タイトルは画像が持っているので、ここでは繰り返しません。 */
body.v3 .tc-meta{ grid-column:9 / 11; display:block; padding-bottom:6px; }
body.v3 .tc-label{ display:block; margin-bottom:clamp(14px,2vh,20px); }
body.v3 .tc-term{
  display:block; margin-bottom:clamp(20px,2.8vh,30px);
  font-family:var(--fl); font-size:10.5px; letter-spacing:.16em;
  line-height:2; color:var(--ink-sub);
}
body.v3 .tc-more{ display:inline-block; }
body.v3 .tc-link:hover .tc-more::after{ transform:scaleX(1); transform-origin:left center; }

@media (max-width:900px){
  /* 携帯では横に並べる余地がないので、画像の下に情報を置きます */
  body.v3 .top-campaign{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  body.v3 .tc-link{
    grid-column:1 / 7;
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(22px,4vw,30px);
  }
  body.v3 .tc-media{ grid-column:1 !important; }
  body.v3 .tc-meta { grid-column:1 !important; padding-bottom:0; }
}

/* ─────────── 5. プロローグ ─────────── */
/* 中央揃えをやめ、詩は左寄り・リード文は右寄りに置いて段差を作ります */
body.v3 .v-prologue{ padding-top:calc(var(--secY) * 1.45); padding-bottom:calc(var(--secY) * 1.45); }
body.v3 .v-prologue .v-en{ grid-column:2 / 6; margin-bottom:clamp(70px,11vh,150px); }
/* 詩のように、改行位置を固定した短い行を積む。
   1行を大きくせず、行間をたっぷり取って「間」で読ませます */
body.v3 .v-poem{
  grid-column:2 / 10;
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.55vw,21px);
  line-height:2.95; letter-spacing:.2em; color:var(--ink);
}
body.v3 .v-poem span{ display:block; }
body.v3 .v-poem .v-line{ color:var(--ink-2); }   /* 1〜3行目は淡く */

/* 4行目＝結論。ここだけ濃く・大きくし、左に細い罫線を引きながら現れます。
   罫線は「翼の軌跡」と同じ、線が伸びる仕草に揃えてあります。 */
body.v3 .v-poem .is-turn{
  --rule: clamp(38px,5vw,88px);
  position:relative; color:var(--ink);
  font-size:1.28em; margin-top:.75em;
}
body.v3 .v-poem .is-turn > span{ padding-left:calc(var(--rule) + 24px); }
body.v3 .v-poem .is-turn::before{
  content:''; position:absolute; left:0; top:50%; width:var(--rule); height:1px;
  background:var(--ink-3); transform:scaleX(0); transform-origin:left center;
  transition:transform 1.15s var(--ease);
  transition-delay:calc(var(--d,0s) + .28s);
}
body.v3 .v-poem .is-turn.is-in::before{ transform:scaleX(1); }
body.v3 .v-lead{
  grid-column:6 / 12; margin-top:clamp(96px,14vh,190px);
  font-size:13px; line-height:2.6; letter-spacing:.1em; color:var(--ink-2);
}
/* 店名の由来。翼マークを行頭に小さく添えます */
/* リードを2段落に分けたときの間隔（2026-10-03）。
   .v-lead の margin-top は「詩 → リード」の間を取るための値なので、
   そのままだと段落間が107pxになり、2つの別の節に見えます。
   本文の段落間（.v-p + .v-p の 3.2em）と同じ考え方で、行間より広く取ります。 */
body.v3 .v-lead + .v-lead{ margin-top:3.2em; }
/* 名前の読み方。本文の流れを止めないよう、色だけ一段落とします */
body.v3 .v-say{ color:var(--ink-3); letter-spacing:.06em; white-space:nowrap; }
body.v3 .v-origin{
  grid-column:6 / 12; margin-top:3.4em;
  display:flex; gap:16px; align-items:flex-start;
  font-size:11.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
  padding-top:2.2em; border-top:1px solid var(--line-f);
}
body.v3 .v-origin-wing{ flex:0 0 auto; width:26px; color:var(--ink-3); padding-top:.9em; }
body.v3 .v-origin-wing svg{ width:100%; height:auto; display:block; }
body.v3 .v-origin em{ font-style:italic; letter-spacing:.04em; }

body.v3 .v-credit{
  grid-column:6 / 12; margin-top:2.4em;
  font-size:11px; line-height:2.4; letter-spacing:.08em; color:var(--ink-sub);
}

/* ─────────── 5-b. Occasions（撮る理由の目録） ─────────── */
/* 左に説明、右に目録。行ごとに罫線で区切り、上から順に現れます。 */
body.v3 .v-occasions{
  padding-top:var(--secY); padding-bottom:var(--secY);
  align-items:start;
}
/* 説明の塊と目録は、必ず1カラム以上あけて離すこと。
   隣り合わせにすると（2/7 と 7/13 のように）すき間がカラム間隔ぶんの
   25pxしか空かず、ふたつがひとつの詰まった塊に見えます。
   目録側も右端まで伸ばさず、右に紙を残します。 */
body.v3 .v-occ-head{ grid-column:2 / 7; }
body.v3 .v-occ-head .v-en{ margin-bottom:22px; }
/* 見出しと本文のあいだ。 */
body.v3 .v-occ-head .v-p{ margin-top:2.2em; }
/* 本文どうしの間隔。2.2em（13px×2.2＝28.6px）は行間32.5pxより狭く、
   2段落が1つの塊に見えていました。本文共通の3.2emに揃えます。 */
body.v3 .v-occ-head .v-p + .v-p{ margin-top:3.2em; }
body.v3 .v-occ-list{ grid-column:8 / 12; list-style:none; margin:0; padding:0; }

body.v3 .v-occ-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.6vh,26px) 0;
  border-bottom:1px solid var(--line-f);
}
body.v3 .v-occ-list li:first-child{ border-top:1px solid var(--line-f); }
body.v3 .v-occ-ja{
  font-family:var(--fd); font-size:clamp(14px,1.25vw,17px);
  letter-spacing:.14em; color:var(--ink); line-height:1.8;
}
body.v3 .v-occ-en{
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
/* 最後の1行＝前撮り済みの方向け。ここだけ少し引き立てます */
body.v3 .v-occ-list li:last-child .v-occ-ja{ color:var(--ink); }
body.v3 .v-occ-list li:last-child{ border-bottom-color:var(--line); }

/* ─────────── 6. 章（Chapter 01〜03） ─────────── */
body.v3 .v-chapter{ padding:var(--secY) 0; position:relative; }

/* ── 章の英文キッカーだけは、ラベルではなく「一文」として組みます ──
   .v-en の既定は 10px・大文字・字間.34em のラベル組みです。
   ところが章のキッカーは "A dress, for a day that is simply yours." という
   読ませる一文で、ラベル組みのままだと読む文なのに読めません。
   欧文ディスプレイ書体の斜体にし、字間を詰めて、文として置きます。
   ここだけ英字が大きくなり、和文見出しへの入口になります。 */
body.v3 .v-ch-head .v-en{
  font-family:var(--fe); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.65vw,22px);
  letter-spacing:.015em; text-transform:none;
  line-height:1.65; color:var(--ink-lead);
  margin-bottom:clamp(26px,4vh,44px);
}

/* ── 章ごとに「別の扱い」を与えます ──
   左右を鏡像に振るだけだと A-B-A の繰り返しになり、
   3章目で先が読めてしまいます。そこで置き場所・写真の大きさ・高さを
   章ごとに変え、CONCEPT（第1章）が最も大きく見えるようにしています。

   c1 DRESS   … 左起点・写真は最大で右端まで抜く（主役）
   c2 KIMONO  … 右起点・写真は中くらいで左端まで抜く
   c3 CONCEPT … 中寄り・写真は最小でどちらの端にも着けず宙に置く
*/
body.v3 .v-ch-head .v-en{ margin-bottom:26px; }
body.v3 .v-ch-head .v-no{ margin-bottom:clamp(36px,5.5vh,64px); }

/* ── c1：左起点 ── */
body.v3 .c1 .v-ch-head .v-en,
body.v3 .c1 .v-ch-head .v-no{ grid-column:2 / 7; }
body.v3 .c1 .v-ch-head .v-h { grid-column:2 / 9; }
body.v3 .c1 .v-ch-head .v-ch-sub{ grid-column:3 / 9; }

/* ── c2：右起点。見出しの塊自体も c1 より右へ深く送る ──
   ※ 3章とも「英文ラベル・章番号・日本語見出しは同じ左端に揃え、
     スタイル名だけを1カラム字下げする」という規則です。
     ここだけ開始カラムを変えると、意図した崩しではなく事故に見えます。 */
body.v3 .c2 .v-ch-head .v-en,
body.v3 .c2 .v-ch-head .v-no{ grid-column:6 / 13; }
body.v3 .c2 .v-ch-head .v-h { grid-column:6 / 13; }
body.v3 .c2 .v-ch-head .v-ch-sub{ grid-column:7 / 13; }

/* ── c3：中寄り。左右どちらの端にも触れさせない ── */
body.v3 .c3 .v-ch-head .v-en,
body.v3 .c3 .v-ch-head .v-no{ grid-column:4 / 9; }
body.v3 .c3 .v-ch-head .v-h { grid-column:4 / 11; }
body.v3 .c3 .v-ch-head .v-ch-sub{ grid-column:5 / 11; }
body.v3 .v-ch-sub{
  font-family:var(--fl); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-sub);
  margin-top:clamp(32px,4.5vh,54px); display:block;
}

/* 章の主役写真。幅・高さ・寄せ先を章ごとに変えます。
   3章とも同じ大きさだと、どれが主役か構図から読み取れなくなります。 */
body.v3 .v-ch-figure{
  position:relative; overflow:hidden;
  margin-top:clamp(88px,14vh,200px);
}
body.v3 .v-ch-figure img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
}

/* 大きさは章の順番どおりに小さくしていきます（c1 > c2 > c3）。
   読み進めるほど静かになり、最初に出てくる章がいちばん強く見えます。 */

/* c1：最大・最も高い。右端まで抜く */
body.v3 .c1 .v-ch-figure{
  width:88%; height:clamp(460px,84vh,940px);
  margin-left:auto; margin-right:0;
}
/* c2：中間。左端まで抜き、右に空白を残す */
body.v3 .c2 .v-ch-figure{
  width:74%; height:clamp(430px,74vh,830px);
  margin-left:0; margin-right:auto;
}
/* c3：最小。左右どちらの端にも着けず、紙の上に浮かせる。
   中央寄りにすると「置き損ね」に見えるので、右へはっきり送ります
   （左右の余白比がおよそ 3.5:1 になる位置） */
body.v3 .c3 .v-ch-figure{
  width:62%; height:clamp(380px,64vh,700px);
  margin-left:30%; margin-right:auto;
}

/* 本文 ＋ 添えの写真。等分にせず、幅も高さもずらして置きます */
body.v3 .v-ch-body{
  padding-top:clamp(88px,14vh,200px); align-items:start;
}
body.v3 .v-ch-txt .v-more{ margin-top:clamp(36px,5vh,60px); }
body.v3 .v-ch-side{ overflow:hidden; }

/* 本文と添え写真は、必ず同じ行に置くこと。
   grid-row を省くと、本文を右カラムに置いた章（c2）で自動配置が
   左へ戻れず、添え写真だけが2行目に送られて大きく下がります。 */
body.v3 .v-ch-txt,
body.v3 .v-ch-side{ grid-row:1; }
body.v3 .v-ch-side img{ height:100%; will-change:transform; }

/* c1：本文は左、添えは右。添えを下げる */
body.v3 .c1 .v-ch-txt { grid-column:2 / 7; }
body.v3 .c1 .v-ch-side{ grid-column:8 / 12; aspect-ratio:4/5;
  margin-top:clamp(56px,10vh,150px); }
/* c2：添えは左。写真を上に、本文を下げて段差をつくる。
   ここだけ本文側に margin-top を入れているのは、写真を「上げる」ため。
   align-items:start なので、写真に margin-bottom を足しても持ち上がりません。 */
body.v3 .c2 .v-ch-txt { grid-column:8 / 13; margin-top:clamp(64px,11vh,160px); }
body.v3 .c2 .v-ch-side{ grid-column:2 / 6; aspect-ratio:3/4; margin-top:0; }
/* c3：本文はやや内側、添えは右端まで寄せて横長に */
body.v3 .c3 .v-ch-txt { grid-column:3 / 8; }
body.v3 .c3 .v-ch-side{ grid-column:9 / 13; aspect-ratio:1/1;
  margin-top:clamp(30px,6vh,90px); }

/* ─────────── 8. プラン ─────────── */
body.v3 .v-plan{
  padding:var(--secY) 0;
  background:var(--paper-d);
}
/* 説明は左、価格は右へ大きく離す。価格側は下げて水平を崩す */
body.v3 .v-plan-inner{ align-items:start; }
body.v3 .v-plan-txt  { grid-column:2 / 7;  grid-row:1; }
body.v3 .v-plan-fig  { grid-column:9 / 13; grid-row:1; margin-top:clamp(40px,7vh,110px); }
/* リンクはPCでは説明文の真下（左の列）。見た目は以前と同じ位置です */
body.v3 .v-plan-more { grid-column:2 / 7;  grid-row:2; margin-top:clamp(34px,5vh,52px); }
body.v3 .v-plan .v-en{ margin-bottom:20px; }
/* 数字は欧文なので和文ほど荒れませんが、ここも上限を抑えて品を保ちます */
body.v3 .v-plan-price{
  font-family:var(--fe); font-weight:400;
  font-size:clamp(30px,4vw,52px); line-height:1; letter-spacing:.04em;
  color:var(--ink); display:block;
}
body.v3 .v-plan-price small{ font-size:.32em; letter-spacing:.1em; vertical-align:.45em; margin-left:.25em; }
body.v3 .v-plan-tax{
  display:block; margin-top:22px;
  font-size:11px; letter-spacing:.14em; color:var(--ink-sub);
}
/* 4つ（Plans／Duration／Shots／Retouched）並びます。
   折り返しを許すこと（2026-10-04）。nowrap のままだと、1024px前後で
   右端の Retouched が列からはみ出します（実測で38px）。 */
body.v3 .v-plan-meta{
  display:flex; flex-wrap:wrap;
  /* 横の間隔は、4つが1行に収まる範囲にしています（375px・1024pxで実測）。
     広げると Retouched だけが2行目に落ちて、1つだけ余った並びになります。 */
  gap:clamp(20px,2.6vh,30px) clamp(16px,1.9vw,44px);
  margin-top:clamp(34px,5vh,56px);
  padding-top:clamp(26px,3.5vh,40px); border-top:1px solid var(--line);
}
body.v3 .v-plan-m{ display:flex; flex-direction:column; gap:8px; }
body.v3 .v-plan-mn{ font-family:var(--fe); font-size:clamp(15px,1.5vw,20px); letter-spacing:.06em; color:var(--ink); line-height:1; }
body.v3 .v-plan-ml{ font-family:var(--fl); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* ─────────── 8-b. Solo（副商品への小さな入口） ─────────── */
/* 章にはしません。罫線1本の上に3行だけ置きます。
   見出しを大きくしたり写真を足したりすると、ここが「章」になり、
   トップが「カップルとソロの総合写真館」に見えはじめます。
   面積そのものが、この商品の位置づけです。 */
/* .v-solo（もう一方のプランへの入口）は v3-base.css に移しました。
   トップだけでなく /plan/ と /solo/ でも使うためです。 */

/* ─────────── 8-b. 韓国メイク（オプションへの入口）─────────── */
/* 章（.v-chapter）より軽く、ソロの一言（.v-solo）より重い扱いです。
   写真は1枚だけ・左に寄せ、本文は右。章のように全幅の写真は置きません。 */
/* 上下とも空けること。padding-top だけにすると、上は前の節のぶんと合わせて
   486px、下は次の節まかせで0になり、節が下に詰まって見えます（実際になりました）。
   このサイトは余白で間を作っているので、節の余白は必ず上下で持たせます。 */
/* padding は必ず縦だけを個別に指定すること。
   padding:var(--secY) 0 と一括で書くと、.v-cols が持っている
   左右の余白（--gut）まで 0 で上書きされ、写真も文字も画面の端に付きます
   （実際にそうなりました）。 */
body.v3 .v-km{ padding-top:var(--secY); padding-bottom:var(--secY); align-items:center; }
body.v3 .v-km-img{
  grid-column:2 / 7; margin:0;
  position:relative; overflow:hidden; aspect-ratio:4 / 5;
}
body.v3 .v-km-img img{
  width:100%; height:100%; object-fit:cover; display:block; will-change:transform;
}
body.v3 .v-km-txt{ grid-column:8 / 12; }
body.v3 .v-km-txt .v-en{ display:block; margin-bottom:clamp(20px,2.8vh,30px); }
body.v3 .v-km-txt .v-h{ margin-bottom:clamp(30px,4.2vh,46px); }
body.v3 .v-km-txt .v-p{ margin-bottom:clamp(26px,3.6vh,36px); }
/* 段落が続く場合は、行間より広く空けること（狭いと2段落が1つに見えます）。
   ※ 以前の clamp(28px,3.8vh,40px) は、下限28px・実測29pxで
     行間32.5pxを下回っていました。個別指定をやめ、v3-base.css の
     既定（3.2em＝41.6px）に任せます。 */
body.v3 .v-km-note{
  margin-bottom:clamp(30px,4vh,44px);
  font-family:var(--fl); font-size:10px; letter-spacing:.16em;
  line-height:2.2; color:var(--ink-sub);
}

@media (max-width:900px){
  body.v3 .v-km-img{ grid-column:1 / 7; }
  body.v3 .v-km-txt{ grid-column:1 / 7; margin-top:clamp(34px,6vw,52px); }
}

/* ─────────── 9. ルックブック ─────────── */
body.v3 .v-look{ padding:var(--secY) 0; }
/* 見出しは左に寄せ、写真の面は右端を空けて置きます */
body.v3 .v-look-head{ margin-bottom:clamp(88px,14vh,190px); }
body.v3 .v-look-head .v-en{ grid-column:2 / 6; margin-bottom:26px; }
body.v3 .v-look-head .v-h { grid-column:2 / 8; }

/* 高さを不揃いにして、雑誌の版面のようなリズムを作る */
body.v3 .v-look-grid{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,2vw,30px);
  padding-left:var(--hgut);                       /* 左は紙の端まで */
  padding-right:clamp(48px,13vw,260px);           /* 右は大きく空ける */
}
/* text-decoration:none は必須。<a> なので、入れないとホバーで出る
   ラベル（.v-look-tag）にブラウザ既定の下線が付きます。 */
body.v3 .v-look-item{ position:relative; overflow:hidden; display:block; text-decoration:none; }

/* ── 写真のホバー ──
   ゆっくり寄る（1.9秒）。同時に、下からラベルがせり上がります。
   速度は transition の秒数で決まります。遅すぎると感じたら数字を下げてください。 */
body.v3 .v-look-media{
  position:absolute; inset:0; overflow:hidden; display:block;
  transition:transform 1.9s var(--ease-slow);
}
body.v3 .v-look-media img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
}
body.v3 .v-look-item:hover .v-look-media{ transform:scale(1.05); }

/* 写真の上をごく薄い墨がゆっくり覆い、白い文字を読ませる */
body.v3 .v-look-item::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,18,15,0) 45%,rgba(20,18,15,.42) 100%);
  opacity:0; transition:opacity 1.5s var(--ease-slow);
}
body.v3 .v-look-item:hover::before{ opacity:1; }

/* ラベルは平常時は隠しておき、ホバーで下からせり上がります
   （ヘッダーのメニューと同じ「上へ抜ける」動きに揃えています） */
body.v3 .v-look-item .v-look-tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#fff;
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  transition-delay:.12s;
}
body.v3 .v-look-item:hover .v-look-tag{ opacity:1; transform:none; }
body.v3 .v-look-item:nth-child(1){ grid-column:span 5; aspect-ratio:3/4; }
body.v3 .v-look-item:nth-child(2){ grid-column:span 4; aspect-ratio:3/4; margin-top:clamp(30px,7vh,90px); }
body.v3 .v-look-item:nth-child(3){ grid-column:span 3; aspect-ratio:2/3; }
body.v3 .v-look-item:nth-child(4){ grid-column:span 4; aspect-ratio:4/5; }
body.v3 .v-look-item:nth-child(5){ grid-column:span 3; aspect-ratio:3/4; margin-top:clamp(-60px,-6vh,0px); }
body.v3 .v-look-item:nth-child(6){ grid-column:span 5; aspect-ratio:4/3; margin-top:clamp(24px,5vh,70px); }
body.v3 .v-look-more{
  margin-top:clamp(72px,11vh,140px); padding-left:var(--gut);
  /* Look Book と Instagram の2本。横に並べ、狭い画面では縦に落とします。 */
  display:flex; flex-wrap:wrap; gap:clamp(18px,2.6vh,26px) clamp(28px,4vw,56px);
}
/* インスタは外部リンクなので、Look Book より一段弱く置きます
   （同じ濃さだと、サイトの外へ出る導線が主導線と並んで見えます）。 */
body.v3 .v-look-ig{ color:var(--ink-3); }

/* ─────────── 10. ジャーナル ─────────── */
body.v3 .v-journal{ padding:var(--secY) 0; }
/* 一覧への入口。3枚の帯は左を大きく空けているので、
   リンクもその左端（帯の padding-left）に合わせます。
   Look Book 側は帯が左端から始まるので --gut、こちらは帯に合わせた値です。 */
body.v3 .v-journal-more{
  margin-top:clamp(72px,11vh,140px);
  padding-left:clamp(48px,13vw,260px);
}
/* 見出しは右寄せ。直前のLook Bookが左寄せなので、視線を左右に振らせます */
body.v3 .v-journal-head{ margin-bottom:clamp(84px,13vh,170px); }
/* 和文の見出しを外したので、ラベルだけが残ります（front-page.php 参照）。
   7/12 のままだと、左から始まる3枚の上でラベルだけが紙の中ほどに浮きます。
   他の節のラベルと同じ2カラム目に戻して、節の頭を左で揃えます。
   .v-h の指定は、和文見出しを戻したときのために残してあります。 */
body.v3 .v-journal-head .v-en{ grid-column:2 / 7; margin-bottom:26px; }
body.v3 .v-journal-head .v-h { grid-column:6 / 12; }
body.v3 .v-jp-grid{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.5vw,56px);
  padding-left:clamp(48px,13vw,260px);   /* 左を大きく空け、右は端まで */
  padding-right:var(--hgut);
}
/* 3枚のカードの天地もずらす */
body.v3 .v-jp:nth-child(2){ margin-top:clamp(28px,5vh,72px); }
body.v3 .v-jp:nth-child(3){ margin-top:clamp(56px,10vh,144px); }
/* カード全体がわずかに浮き上がり、写真はゆっくり寄ります。
   見出しには左から下線が引かれます（本文リンクと同じ作法） */
body.v3 .v-jp{
  display:block; text-decoration:none; color:inherit;
  transition:transform 1.2s var(--ease-slow);
}
body.v3 .v-jp:hover{ transform:translate3d(0,-7px,0); }
body.v3 .v-jp-img{ overflow:hidden; aspect-ratio:4/5; margin-bottom:24px; }
body.v3 .v-jp-img img{ transition:opacity 1.9s var(--ease-slow), transform 1.9s var(--ease-slow); }
body.v3 .v-jp:hover .v-jp-img img{ transform:scale(1.045); }
body.v3 .v-jp-cat{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:12px; }
/* 見出しはブロック、下線は内側の span。
   以前は h3 自体を display:inline にして下線を文字幅に沿わせていましたが、
   インライン要素には text-wrap:balance が効かず、
   「ふたりで決めたい／こと」のように最後の2文字だけが残っていました。
   span に下線を移せば、見た目はそのままで折り返しだけ改善します。 */
body.v3 .v-jp-title{
  display:block; text-wrap:balance;
  font-family:var(--fd); font-weight:400; font-size:13px;
  line-height:2.2; letter-spacing:.1em; color:var(--ink);
}
body.v3 .v-jp-title > span{
  display:inline; background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size 1.1s var(--ease-slow);
}
body.v3 .v-jp:hover .v-jp-title > span{ background-size:100% 1px; }
body.v3 .v-jp-date{ font-size:10px; letter-spacing:.18em; color:var(--ink-sub); display:block; margin-top:14px; }

/* ─────────── 11. アクセス ─────────── */
body.v3 .v-access{ padding:var(--secY) 0; }
body.v3 .v-access-inner{ align-items:start; }

/* ── 地図と一室の箱 ──
   一室を「地図の下端に対して」置きたいので、2枚をこの箱に入れます。
   12カラムに直接置くと、行の高さが右の本文で決まってしまい、
   下端そろえにしても本文の高さに引っぱられて大きく下がります。
   （実際に293px下がりました。狙いは約94pxです） */
body.v3 .v-access-place{
  grid-column:1 / 8; grid-row:1; position:relative;
  --set-drop:clamp(40px,6.5vw,96px);     /* 一室が地図の下へ出る量 */
}

/* 地図は縦長の帯にして、左の画面外まで抜きます。
   4:3の横長のままだと、どこにでもある「埋め込み地図」の顔になります。
   縦に長く切って端から抜くと、地図というより紙の上の地の面に見え、
   章の写真と同じ扱いで読めるようになります。 */
body.v3 .v-access-map{
  margin-left:calc(var(--gut) * -1);
  width:calc(54% + var(--gut));
  aspect-ratio:3/4; overflow:hidden; background:var(--paper-d);
}
body.v3 .v-access-map iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(.92) brightness(1.06);
}

/* ── 地図の右下に、スタジオの一室を重ねます ──
   ヒーローの2枚組と同じ仕草です。紙色の縁を回して「上に載っている」ことを
   見せます（縁がないと、地図と衝突しているように見えます）。
   ここが「場所」の章の主役で、地図はその下に敷いた地の面という関係です。 */
body.v3 .v-access-set{
  position:absolute; right:0; bottom:calc(var(--set-drop) * -1);
  width:62%; margin:0; z-index:1;
  overflow:hidden; aspect-ratio:16/10;
  box-shadow:0 0 0 clamp(8px,1vw,14px) var(--paper);
}
body.v3 .v-access-set img{ width:100%; height:100%; object-fit:cover; display:block; }

body.v3 .v-access-txt{ grid-column:9 / 13; grid-row:1; margin-top:clamp(40px,8vh,130px); }
body.v3 .v-access .v-en{ margin-bottom:0; }

/* 英文の一行。章のキッカーと同じ扱いにして、和文見出しへの入口にします */
body.v3 .v-ac-lead{
  display:block; margin:clamp(20px,3vh,32px) 0 clamp(26px,4vh,44px);
  font-family:var(--fe); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.5vw,20px); letter-spacing:.015em;
  line-height:1.65; color:var(--ink-lead);
}
body.v3 .v-access .v-h{ margin-bottom:clamp(40px,6vh,72px); }

/* ── 徒歩の分数 ──
   プランの価格と同じ「数字だけ大きく」の扱いにします。
   注記の中に紛れていた「徒歩約10分」を、読まなくても目に入る位置へ出す狙いです。 */
body.v3 .v-ac-times{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px);
  padding-bottom:clamp(34px,5vh,54px);
  margin-bottom:clamp(34px,5vh,54px);
  border-bottom:1px solid var(--line-f);
}
body.v3 .v-ac-time{ display:block; min-width:0; }
body.v3 .v-ac-num{
  display:block; font-family:var(--fe); font-weight:400;
  font-size:clamp(32px,4.2vw,56px); line-height:1;
  letter-spacing:.01em; color:var(--ink);
}
body.v3 .v-ac-num small{
  font-family:var(--fl); font-size:.24em; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
  margin-left:.6em; vertical-align:.55em;
}
body.v3 .v-ac-tl{
  display:block; margin-top:14px;
  font-size:11px; line-height:2; letter-spacing:.08em; color:var(--ink-sub);
  /* 「○○駅から徒歩」の短いラベルです。本文は字単位で折る方針
     （v3-base.css の word-break:normal）ですが、ここだけ例外に
     します。2行しかないので「徒／歩」と割れると目立ち、かつ
     横に並べて幅を比べる相手がいないため、文節で折って困りません。
     text-wrap:pretty は和文に効かないので入れていません。 */
  word-break:auto-phrase;
}

/* ── 住所の並び ──
   1行ずつ罫線で区切ると、4本並んだところで申込用紙の顔になります。
   罫線は上の分数との境に1本だけ引き、ここはラベルを左に離して
   ぶら下げるだけにします（奥付の組み方）。 */
body.v3 .v-ac-row{
  display:flex; gap:clamp(20px,2.4vw,40px);
  padding:0 0 clamp(16px,2.2vh,24px); border-bottom:0;
}
body.v3 .v-ac-label{
  font-family:var(--fl); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
  flex-shrink:0; width:52px; padding-top:.55em;
}
body.v3 .v-ac-val{ font-size:13px; line-height:2.1; letter-spacing:.08em; color:var(--ink-2); }
body.v3 .v-ac-val a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
/* 英語ページだけ、住所の下に和文（タクシー・地図検索用）を小さく添えます */
body.v3 .v-ac-sub{
  display:block; margin-top:5px;
  font-size:11px; line-height:1.9; letter-spacing:.06em; color:var(--ink-3);
}
body.v3 .v-ac-note{ margin-top:20px; font-size:11.5px; line-height:2.2; letter-spacing:.07em; color:var(--ink-sub); }

/* ─────────── 12. 締めのCTA ─────────── */
body.v3 .v-cta{
  padding-top:calc(var(--secY) * 1.3); padding-bottom:calc(var(--secY) * 1.3);
  background:var(--ink); color:var(--paper);
}
/* 締めくくりに、署名として翼をひとつだけ置きます */
/* 締めくくりの署名はロゴそのもの。翼のモチーフはロゴの中に入っているので、
   別に翼マークを置く必要がなくなりました。
   ワードマークが「AILÉA」と読めるため、下にあった英字ラベルも外しています
   （同じ語が2行続いていました）。 */
body.v3 .v-cta-logo{
  grid-column:2 / 5; display:block;
  width:clamp(104px,11vw,152px); margin-bottom:clamp(40px,6vh,72px);
  /* 墨地なので白ヌキのロゴ（logo_wt）を置いています。
     opacity で薄めないこと。書き出された色をそのまま出します。 */
}
body.v3 .v-cta-logo img{ width:100%; height:auto; display:block; }
body.v3 .v-cta .v-h { grid-column:2 / 9; color:var(--paper); }
body.v3 .v-cta .v-p { grid-column:6 / 11; color:rgba(var(--paper-rgb),.62); margin-top:clamp(44px,7vh,80px); }
body.v3 .v-cta-btns{ grid-column:6 / 12; display:flex; gap:clamp(16px,2.5vw,32px); flex-wrap:wrap; margin-top:clamp(56px,8vh,96px); }
body.v3 .v-btn{
  display:inline-block; text-decoration:none; padding:19px 44px;
  font-family:var(--fl); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  border:1px solid rgba(var(--paper-rgb),.32); color:var(--paper);
  transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
body.v3 .v-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
body.v3 .v-btn.fill{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
body.v3 .v-btn.fill:hover{ background:transparent; color:var(--paper); border-color:rgba(var(--paper-rgb),.32); }

/* ─────────── 15. レスポンシブ ─────────── */
@media (max-width:900px){
  /* ══ 狭い画面の版面 ══
     v3-base.css で12カラム→6カラムに組み替わり、いったん全部が 1/7
     （紙いっぱい）に戻ります。ここではそこから置き直して、
     PCと同じ「余白」と「ずらし」を狭い画面にも残します。
     数字はPCの12カラムをおおむね半分にしたものです（2/7→1/6 など）。 */

  /* ── ヒーロー：2枚組は残します ──
     狭いからと1枚に戻すと、3つのスタイルがあることが7秒待たないと
     伝わらなくなります。主写真を右へ寄せ、添えを左下に重ねます。
     重ねた側には紙色の縁を回して、「上に載っている」ことを見せます
     （縁がないと、ただ写真同士が衝突しているように見えます）。

     ■ 添えは下へずらして、角だけ重ねます
       主写真と下端をそろえると、添えが主写真の左下をまるごと覆い、
       主写真の人物が隠れてしまいます。添えを下へ落として、
       重なりを左下の角だけに留めます。
       --aside-drop が落とす量です。添えの高さは幅から決まる
       （3カラム × 4:5 ≒ 53vw）ので、落とす量も vw で持っておくと
       画面幅が変わっても重なりの割合が一定になります。
       37vw 落とすと、重なりは約16vw ＝ 添えの高さのおよそ3割です。 */
  body.v3 .v-hero{ padding-left:0; padding-right:0; }
  body.v3 .v-hero-stage{
    align-items:end;
    /* 落とした添えのぶんだけ、下に場所を空けておきます。
       これがないと、はみ出した添えがキャプションに重なります。 */
    --aside-drop:clamp(80px,37vw,320px);
    padding-bottom:var(--aside-drop);
  }
  body.v3 .v-hero-frame{
    grid-column:2 / 7 !important; grid-row:1;
    aspect-ratio:4/5; max-height:none; width:auto; height:auto;
  }
  body.v3 .v-hero-aside{
    display:block;
    grid-column:1 / 4 !important; grid-row:1;
    aspect-ratio:4/5; max-height:none;
    align-self:end; z-index:1;
    transform:none;                      /* PC用の横寄せを打ち消します */
    /* 負の下マージンで、行の下端よりさらに下へ出します */
    margin-bottom:calc(var(--aside-drop) * -1);
    box-shadow:0 0 0 clamp(6px,2.2vw,10px) var(--paper);
  }
  /* 文字は左端そろえ。重ねた3つのスタイル名も左に合わせます
     （右端そろえのままだと、はみ出した分が画面外で切れます） */
  body.v3 .v-hs{ left:0; right:auto; }
  body.v3 .v-hero-foot{ padding-top:clamp(22px,4vw,30px); }
  body.v3 .v-hero-cap  { grid-column:1 / 7 !important; }
  body.v3 .v-hero-right{ grid-column:1 / 7 !important; justify-content:flex-start; margin-top:10px; }

  /* ── お知らせ：横1列に収まらないので縦に積みます ── */
  body.v3 .top-notice{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  /* スマホは文字も1カラム目から始まるので、罫線もそこから引きます
     （＝左右の余白ぶんだけ内側。全幅にはなりません） */
  body.v3 .top-notice::before,
  body.v3 .top-notice::after{ grid-column:1 / 7; }
  body.v3 .tn-inner{ grid-column:1 / 7; grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:10px; }
  body.v3 .tn-label{ grid-column:1 / 7; }
  body.v3 .tn-text { grid-column:1 / 7; }
  body.v3 .tn-link { grid-column:1 / 7; justify-self:start; margin-top:4px; }

  /* ── プロローグ：詩は紙いっぱい、続く文は1カラム分だけ右へ送る ── */
  body.v3 .v-prologue .v-en{ grid-column:1 / 5 !important; margin-bottom:clamp(48px,9vh,90px); }
  body.v3 .v-poem   { grid-column:1 / 7 !important; }
  body.v3 .v-lead   { grid-column:1 / 6 !important; margin-top:clamp(56px,9vh,96px); }
  body.v3 .v-origin { grid-column:2 / 7 !important; }
  body.v3 .v-credit { grid-column:2 / 7 !important; }
  body.v3 .v-origin{ display:block; }
  /* display:block を必ず入れること。
     .v-origin は狭い画面で display:block に変わるため、この <span> は
     フレックスの子ではなくなり、ただのインライン要素に戻ります。
     インラインには width が効かないので、指定した26pxは無視され、
     中のSVG（width:100%）が段落の幅いっぱい（271px）まで広がっていました。 */
  body.v3 .v-origin-wing{ display:block; width:30px; padding-top:0; margin-bottom:16px; }
  body.v3 .v-poem .is-turn{ --rule:32px; font-size:1.2em; }

  /* ── 撮る理由：目録だけ右へ送って、見出しとの段差をつくる ── */
  body.v3 .v-occ-head{ grid-column:1 / 7 !important; }
  body.v3 .v-occ-list{ grid-column:2 / 7 !important; margin-top:clamp(44px,7vh,72px); }

  /* ── 章：主役写真は「片側だけ画面の外へ抜く」で崩します ──
     狭い画面で幅を何%かに縮めると、ただ小さいだけで余白に見えません。
     片側を紙の端から抜き、反対側にだけ余白を残すと、
     PCの「右端まで抜く／左端まで抜く」がそのまま縦画面でも成立します。
     章ごとに抜く向きを変えて、A-B-A の繰り返しを避けています。 */
  body.v3 .v-ch-figure{ margin-top:clamp(56px,9vh,110px); }
  /* 幅は % で指定します。--gut は狭い画面では24pxしかないので、
     その倍数で余白を作ろうとすると3章とも似た位置に来てしまいます。 */
  /* c1：右へ抜く（左に余白）。いちばん大きく、いちばん縦長 */
  body.v3 .c1 .v-ch-figure{
    width:90% !important; height:auto !important; aspect-ratio:3/4;
    margin-left:auto !important; margin-right:0 !important;
  }
  /* c2：左へ抜く（右に余白）。c1より少し低く */
  body.v3 .c2 .v-ch-figure{
    width:84% !important; height:auto !important; aspect-ratio:4/5;
    margin-left:0 !important; margin-right:auto !important;
  }
  /* c3：どちらの端にも着けず、紙の上に浮かせる。
     左右の余白比をはっきり変えること（2:1）。均等に近いと
     「浮かせた」ではなく「中央に置き損ねた」ように見えます。 */
  body.v3 .c3 .v-ch-figure{
    width:70% !important; height:auto !important; aspect-ratio:1/1;
    margin-left:20% !important; margin-right:auto !important;
  }

  /* 見出しと本文。章ごとに寄せ先を変えます */
  body.v3 .v-ch-head .v-no,
  body.v3 .v-ch-head .v-h,
  body.v3 .v-ch-head .v-ch-sub{ grid-column:1 / 7 !important; }
  body.v3 .c2 .v-ch-head .v-no,
  body.v3 .c2 .v-ch-head .v-h,
  body.v3 .c2 .v-ch-head .v-ch-sub{ grid-column:2 / 7 !important; }
  body.v3 .c3 .v-ch-head .v-ch-sub,
  body.v3 .c1 .v-ch-head .v-ch-sub{ grid-column:2 / 7 !important; }

  /* 添えの写真は本文の下。小さいまま、章ごとに左右を振り分けます。
     ここで全幅に戻すと、主役写真と同じ大きさになって主従が消えます。 */
  body.v3 .v-ch-body{ padding-top:clamp(56px,9vh,110px); }
  body.v3 .v-ch-txt, body.v3 .v-ch-side{ grid-row:auto; }
  body.v3 .v-ch-txt { grid-column:1 / 7 !important; margin-top:0 !important; }
  body.v3 .v-ch-side{
    margin-top:clamp(44px,7vh,72px) !important; margin-bottom:0 !important;
    height:auto !important;
  }
  body.v3 .c1 .v-ch-side{ grid-column:3 / 7 !important; aspect-ratio:4/5 !important; }
  body.v3 .c2 .v-ch-side{ grid-column:1 / 5 !important; aspect-ratio:3/4 !important; }
  body.v3 .c3 .v-ch-side{ grid-column:2 / 6 !important; aspect-ratio:1/1 !important; }

  /* ── プラン：価格側を右へ送って水平を崩す ──
     リンクは価格のあとに置きます。説明→価格→リンク、の順に読ませたいので。 */
  body.v3 .v-plan-txt { grid-column:1 / 6 !important; grid-row:1 !important; }
  body.v3 .v-plan-fig { grid-column:2 / 7 !important; grid-row:2 !important; margin-top:clamp(48px,8vh,72px); }
  body.v3 .v-plan-more{ grid-column:1 / 6 !important; grid-row:3 !important; margin-top:clamp(40px,7vh,60px); }


  /* ── ルックブックの帯：左右に振りながら縦へ積みます ──
     2列に並べると1枚が140px程度になり、写真として見られません。
     片側に寄せた大きめの1枚を交互に置くほうが、余白も出て写真も見えます。 */
  body.v3 .v-look-head .v-en{ grid-column:1 / 5 !important; }
  body.v3 .v-look-head .v-h { grid-column:1 / 7 !important; }
  body.v3 .v-look-head{ margin-bottom:clamp(56px,9vh,100px); }
  body.v3 .v-look-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:0; row-gap:clamp(30px,5vh,56px);
    padding-left:var(--gut); padding-right:var(--gut);
  }
  body.v3 .v-look-item:nth-child(n){ margin-top:0; }
  body.v3 .v-look-item:nth-child(odd) { grid-column:1 / 5; }
  body.v3 .v-look-item:nth-child(even){ grid-column:3 / 7; }
  body.v3 .v-look-item:nth-child(1){ aspect-ratio:3/4; }
  body.v3 .v-look-item:nth-child(2){ aspect-ratio:4/5; }
  body.v3 .v-look-item:nth-child(3){ aspect-ratio:2/3; }
  body.v3 .v-look-item:nth-child(4){ aspect-ratio:3/4; }
  body.v3 .v-look-item:nth-child(5){ aspect-ratio:1/1; }
  body.v3 .v-look-item:nth-child(6){ grid-column:2 / 7; aspect-ratio:4/3; }

  /* ── ジャーナルの3枚：左右に振って、天地もずらす ── */
  body.v3 .v-journal-head .v-en{ grid-column:2 / 7 !important; }
  body.v3 .v-journal-head .v-h { grid-column:1 / 7 !important; }
  body.v3 .v-jp-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:0; row-gap:clamp(40px,6vh,64px);
    padding-left:var(--gut); padding-right:var(--gut);
  }
  body.v3 .v-jp:nth-child(n){ margin-top:0; }
  body.v3 .v-jp:nth-child(odd) { grid-column:1 / 6; }
  body.v3 .v-jp:nth-child(even){ grid-column:2 / 7; }
  /* 狭い画面では帯の左右が --gut になるので、リンクもそこに揃えます */
  body.v3 .v-journal-more{ padding-left:var(--gut); margin-top:clamp(48px,8vh,80px); }

  /* ── アクセス：地図は左端から画面の外へ抜きます ──
     PCと同じ扱いです。ここだけ全幅に戻すと、他の写真と同じ顔になります。 */
  /* 地図は左の画面外へ抜き、スタジオの一室をその右下に重ねます。
     縦積みにすると2枚が同じ大きさの写真として並び、
     「地図の上に一室が載っている」という関係が読めなくなります。 */
  /* 行は 1（写真）／2（本文）と番号で決め打ちします。
     PC側は両方を grid-row:1 に置いて左右に並べているので、
     ここで 2 に移さないと本文が写真の上に重なります。
     grid-row:auto では打ち消しきれませんでした（!important 付きで明示します）。 */
  body.v3 .v-access-place{ grid-column:1 / 7 !important; grid-row:1 !important; }
  body.v3 .v-access-map{ width:calc(72% + var(--gut)); aspect-ratio:4/5; }
  body.v3 .v-access-set{ width:60%; }
  /* 一室が地図の下へ出るぶん、本文の上を大きめに空けます */
  body.v3 .v-access-txt{
    grid-column:1 / 7 !important; grid-row:2 !important;
    margin-top:clamp(86px,20vw,150px);
  }
  /* 横に2つ並べると1つが90px程度になり、駅名が読めません */
  body.v3 .v-ac-times{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,6vh,40px); }

  /* ── 締めくくり ── */
  body.v3 .v-cta-logo{ grid-column:1 / 5 !important; }
  body.v3 .v-cta .v-en{ grid-column:1 / 5 !important; }
  body.v3 .v-cta .v-h { grid-column:1 / 7 !important; }
  body.v3 .v-cta .v-p { grid-column:2 / 7 !important; }
  body.v3 .v-cta-btns { grid-column:2 / 7 !important; }
}
@media (max-width:600px){

  /* ── Occasions の行 ──
     日本語（左）と英字（右）を1行に収める作りですが、英字は
     white-space:nowrap なので折れません。幅が足りなくなると
     日本語側だけが押し潰され、「結婚の予定はないけれ／ど」のように
     最後の1文字が行に取り残されます（実機で発生）。
     この幅では横並びをやめ、英字を下に送ります。 */
  body.v3 .v-occ-list li{
    display:block;
    padding:clamp(16px,3.4vw,22px) 0;
  }
  body.v3 .v-occ-ja{ display:block; }
  body.v3 .v-occ-en{ display:block; margin-top:9px; }

  body.v3 .v-poem{ line-height:2.7; letter-spacing:.14em; }
  body.v3 .v-plan-meta{ gap:22px 16px; }
  body.v3 .v-cta-btns{ flex-direction:column; }
  body.v3 .v-btn{ padding:17px 24px; }
}

/* ─────────── 16. 動きを減らす設定への配慮 ─────────── */
/* OS側で「視差効果を減らす」がONのときは、動きを全部止めて即表示する */
@media (prefers-reduced-motion:reduce){
  body.v3 [data-rv],
  body.v3 .v-line > span{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.v3 [data-rv-img]::after{ display:none; }
  body.v3 .v-scroll i::after{ animation:none; transform:none; }
  /* 写真のホバーも動かさない。ラベルは常に見えるようにしておく */
  body.v3 .v-look-media,
  body.v3 .v-look-item::before,
  body.v3 .v-look-tag,
  body.v3 .v-jp,
  body.v3 .v-jp-img img,
  body.v3 .v-jp-title > span{ transition:none !important; }
  body.v3 .v-look-tag{ opacity:1 !important; transform:none !important; }
  body.v3 .v-look-item::before{ opacity:1 !important; }
  /* ヒーローの読み込み演出も止めて、最初から出来上がった状態で見せる */
  body.v3 .v-hero-zoom,
  body.v3 .v-hero-foot{ animation:none !important; transform:none !important; opacity:1 !important; }
  body.v3 .v-hero-frame::after,
  body.v3 .v-hero-aside::after{ display:none; }
  body.v3 .v-hs-type::after{ animation:none !important; }
  body.v3 .v-loader{ display:none !important; }
  /* 写真の入れ替えも止め、1枚目だけを出す */
  body.v3 .v-slide,
  body.v3 .v-hs{ animation:none !important; opacity:0 !important; }
  body.v3 .v-slide:first-child,
  body.v3 .v-hs:first-child{ opacity:1 !important; }
}