/* ═══════════════════════════════════════════════════════════
   v3-page.css — 下層ページ共通（v3）

   トップ・ジャーナル・ルック・スタイル詳細を除いた、
   読みもの型のページ（プラン／スタイル一覧／FAQ／規約 など）の共通部品です。
   v3-base.css のあとに読み込まれます。

   ■ 考え方
     ・面（カード・囲み・塗り）をつくらない。区切りは1本の細い罫線だけ。
     ・要素は中央に置かず、12カラムの番号で置き場所を決める。
       セクションごとに開始カラムをずらし、左の余白を毎回変える。
     ・和文の見出しは大きくしない。字間と行間で格をつくる（v3-base.css の .v-h）。
     ・情報が多いページほど、余白で「節」を分ける。罫線を増やさない。

   ■ 触るときの注意
     ・カラム番号は「1が左端・13が右端」。2から始めると本文の基準線に乗ります。
     ・900px以下では v3-base.css が .v-cols を6カラムへ組み替えます。
       このファイルの最後にも、同じ分岐で置き直しを書いてあります。
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 1. ページ冒頭 ─────────── */
/* パンくずの下に置く、ページの名乗り。
   トップのヒーローと違い、写真を先に見せません。
   下層は「探しに来た人」が読む場所なので、何のページかを先に言います。 */
body.v3 .p-head{
  padding-top:clamp(40px,7vh,86px);
  padding-bottom:clamp(56px,9vh,120px);
  row-gap:0;
}
body.v3 .p-head .v-en   { grid-column:2 / 8; margin-bottom:clamp(26px,4vh,46px); }
body.v3 .p-head .p-no   { grid-column:2 / 4; margin-bottom:18px; }
body.v3 .p-head .v-h    { grid-column:2 / 9; }
body.v3 .p-head .p-sub  {
  /* 見出しとの間隔。下限を44pxにしてあります。
     以前は clamp(30px,4.6vh,54px) でしたが、下限30pxは本文の行間
     （13px×2.5＝32.5px）より狭く、画面の高さが低い端末ほど見出しに
     文章が貼りつきました。さらに /about/ が2段落になったことで、
     段落間（3.2em＝41.6px）のほうが見出しとの間隔より広くなり、
     1段落目が見出し側にくっついて見える逆転が起きていました。
     見出し→本文は、必ず段落間より広く取ります。 */
  grid-column:3 / 9; margin-top:clamp(44px,5.6vh,66px);
  font-size:13px; line-height:2.5; letter-spacing:.1em; color:var(--ink-2);
}
/* 冒頭が2段落になるページ（/about/ のミッション）用。
   上の margin-top は「見出しとの間隔」なので、段落どうしに使うと
   スマホで30pxまで縮み、行間（13px×2.5＝32.5px）より狭くなります。
   そうなると2段落が1つの塊に見えるので、本文の段落間と同じ
   3.2em（＝41.6px）に揃えます。p-sec-lead の p + p と同じ値です。 */
body.v3 .p-head .p-sub + .p-sub{ margin-top:3.2em; }
/* 冒頭の英文キッカーだけは、トップの章見出しと同じ斜体にします。
   ページの性格（案内文か、詩か）を書体で先に伝えるためです。 */
body.v3 .p-head .v-en.it{
  font-family:var(--fe); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.65vw,22px); letter-spacing:.06em;
  text-transform:none; color:var(--ink-lead); line-height:1.75;
}

/* ─────────── 2. 大きな写真 ─────────── */
/* 本文と同じ12カラムに乗せ、6カラム目から右の基準線までに収めます。

   ■ なぜ全幅に近い大きさをやめたか
     もとは幅88%・高さ62vh（1440pxで1267×558）で、紙面の右端まで抜いていました。
     下層ページに置く写真としては大きすぎます。章が3つ4つ続くトップや、
     写真が主役のスタイル詳細と違って、ここは文章を読ませるページで、
     写真は「スタジオがある」ことを示す添えだからです。
     左に5カラム分の紙を残すことで、文章の列との段差も生まれます。

   ■ 縦横比は16:10
     素材（set-shoin-reverie.jpg）が 640×396＝ほぼ16:10 なので、
     この比なら切り落としが出ません。横幅も1267→728pxに下がるので、
     引き伸ばし率が約2.0倍から約1.1倍になり、眠さも減ります。
     ※ 高さは aspect-ratio に任せ、max-height を足さないこと。
       縦を抑えると幅まで縮んで、右端が基準線からずれます（過去に実際起きました）。

   ■ 上の余白
     もとは margin-top が無く、直前の文章の下端と0pxで接していました。
     他の節は243px空いているので、ここだけ詰まって見えます。
     ここは153px（1440×900時）。節の区切り243pxよりは狭く取ります。
     この写真は直前の「スタジオ」の節に属する添えなので、
     同じだけ空けると別の節に見え、文章との関係が切れます。

   マークアップでは data-rv-img="fade" を付けてください。
   覆いを引かず、その場で溶かします
   （出方の使い分けは v3-base.css の [data-rv-img="fade"] を参照）。 */
body.v3 .p-figure{
  grid-column:6 / 13;
  position:relative; overflow:hidden;
  aspect-ratio:16 / 10;
  margin-top:clamp(110px,17vh,230px);
}
body.v3 .p-figure img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
}
/* 縦位置の写真を入れる枠（2026-10-05）。
   16:10 の横長の枠に全身の縦写真を入れると、顔と足元が切れます
   （/solo/ の打掛で実際にそうなりました）。
   全身を見せたい写真には .is-tall を足してください。
   列も狭めます。横幅いっぱいのまま背を高くすると、1枚で画面が埋まります。 */
body.v3 .p-figure.is-tall{ grid-column:7 / 13; aspect-ratio:4 / 5; }
body.v3 .p-figure-sub.is-tall{ grid-column:4 / 10; aspect-ratio:4 / 5; }
@media (max-width:900px){
  body.v3 .p-figure.is-tall,
  body.v3 .p-figure-sub.is-tall{ grid-column:1 / 7 !important; }
}

/* ─────────── 3. セクション ─────────── */
body.v3 .p-sec{ padding-top:var(--secY); }
body.v3 .p-sec.tight{ padding-top:clamp(96px,15vh,190px); }

/* 章の名乗り。連番と英字を縦に積み、本文より左に置きます。
   「01 — Two Plans」と横に並べるとラベルが一塊の帯に見えるので、
   数字だけを先に置いて、視線が縦に落ちるようにしています。 */
body.v3 .p-sec-head{ grid-column:2 / 4; }
body.v3 .p-sec-no{
  display:block; font-family:var(--fe); font-style:italic;
  font-size:clamp(20px,2.2vw,30px); line-height:1; color:var(--ink-3);
  margin-bottom:16px;
}
body.v3 .p-sec-en{ display:block; }
body.v3 .p-sec-title{ grid-column:5 / 12; }
body.v3 .p-sec-lead{
  grid-column:5 / 11; margin-top:clamp(30px,4.6vh,54px);
  font-size:13px; line-height:2.5; letter-spacing:.1em; color:var(--ink-2);
}
/* 段落の間は、行の間より広くないと2つの段落が1つに見えます。
   ここは line-height:2.5（13px → 32.5px）なので、1.9em（24.7px）では
   行間より狭く、実際に /about/ などで文章が続いて見えていました。
   行間の約1.3倍を取ります。 */
body.v3 .p-sec-lead p + p{ margin-top:3.2em; }

/* ─────────── 4. プラン ─────────── */
/* 2枚を「カード」にしません。罫線1本で分け、上下に大きく余白を取ります。
   囲むと比較表になり、料金表のページになってしまいます。 */
/* 親（.p-sec）の12カラムを丸ごと1枚使い、同じ幅・同じ隙間でもう一度12に割ります。
   grid-column を省くと自動配置で1カラム幅に潰れます（実際に潰れました）。 */
/* ─────────── 4-a. プラン1枚（ソロポートレート用）─────────── */
/* 比較する相手がいない1プランのページ（/solo/）で使う横長カードです。
   プランページは比較表（下の .p-table）に移しました。 */
body.v3 .p-plans{ grid-column:1 / 13; margin-top:clamp(70px,11vh,150px); row-gap:0; }
body.v3 .p-plan{
  grid-column:2 / 13;
  padding-top:clamp(48px,7vh,86px); padding-bottom:clamp(48px,7vh,86px);
  border-top:1px solid var(--line-f);
  display:grid; grid-template-columns:repeat(11,minmax(0,1fr));
  column-gap:var(--colgap); align-items:start;
}
body.v3 .p-plan:last-child{ border-bottom:1px solid var(--line-f); }
body.v3 .p-plan-name{ grid-column:1 / 4; }
body.v3 .p-plan-badge{ display:block; margin-bottom:14px; }
body.v3 .p-plan-jp{
  display:block; font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.4vw,19px); letter-spacing:.16em; color:var(--ink);
}
/* 価格。ここだけは欧文ディスプレイで大きく取ります。
   数字は和文明朝だと線が細くて読みに迷うので、Bodoni に渡します。 */
body.v3 .p-plan-price{ grid-column:4 / 7; }
body.v3 .p-price-num{
  display:block; font-family:var(--fe); font-weight:400;
  font-size:clamp(26px,3vw,42px); line-height:1.15; letter-spacing:.02em;
  color:var(--ink);
}
body.v3 .p-price-tax{
  display:block; margin-top:12px;
  font-family:var(--fl); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-sub);
}
body.v3 .p-plan-body{ grid-column:7 / 12; }
body.v3 .p-plan-for{
  font-size:13px; line-height:2.4; letter-spacing:.1em; color:var(--ink-2);
  margin-bottom:clamp(26px,3.6vh,40px);
}
body.v3 .p-plan-for strong{ font-weight:500; color:var(--ink); }

/* ─────────── 4. プラン比較表 ─────────── */
/* 以前は1プラン＝1枚の横長カードを縦に積んでいました。
   名前と価格が左、内訳が右にあり、左下に大きな空白ができるうえ、
   2プランが600px離れて並ぶので「見くらべる」ことができませんでした。
   料金表の仕事は比較なので、項目名を左に1本だけ置き、
   StandardとPremiumを2列にして同じ行で突き合わせます。 */
body.v3 .p-table{
  grid-column:2 / 13;
  margin-top:clamp(70px,11vh,150px);
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);
  column-gap:var(--colgap);
}
body.v3 .p-table-head,
body.v3 .p-tr{
  display:grid; grid-column:1 / -1;
  grid-template-columns:subgrid;
  align-items:baseline;
}
/* subgrid が無い環境では列が崩れるので、同じ比率を直接持たせます */
@supports not (grid-template-columns:subgrid){
  body.v3 .p-table-head,
  body.v3 .p-tr{
    grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);
    column-gap:var(--colgap);
  }
}

/* ── 表の頭 ── */
body.v3 .p-table-head{
  align-items:end;
  padding-bottom:clamp(30px,4.2vh,46px);
  border-bottom:1px solid var(--line);
}
body.v3 .p-th-badge{ display:block; margin-bottom:12px; }
body.v3 .p-th-jp{
  display:block; margin-bottom:clamp(18px,2.4vh,26px);
  font-family:var(--fd); font-weight:500;
  font-size:clamp(14px,1.2vw,17px); letter-spacing:.16em; color:var(--ink);
}
/* 価格は欧文ディスプレイで。和文明朝の数字は線が細く、桁を読み違えます */
body.v3 .p-th-price{
  display:block; font-family:var(--fe); font-weight:400;
  font-size:clamp(26px,3vw,42px); line-height:1.1; letter-spacing:.02em;
  color:var(--ink);
}
body.v3 .p-th-tax{
  display:block; margin-top:10px;
  font-family:var(--fl); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-sub);
}
body.v3 .p-th-for{
  display:block; margin-top:clamp(16px,2.2vh,24px);
  font-size:12px; line-height:2.1; letter-spacing:.09em; color:var(--ink-2);
}

/* ── 行 ── */
body.v3 .p-tr{ padding:clamp(15px,2vh,20px) 0; border-bottom:1px solid var(--line-f); }
body.v3 .p-td-l{
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink-sub);
}
body.v3 .p-td{ font-size:12.5px; line-height:1.9; letter-spacing:.09em; color:var(--ink-2); }
/* 数量だけは墨で立てます。横に目を走らせたとき、
   差があるのは数字だけなので、そこだけ濃くすれば比較が一瞬で済みます。 */
body.v3 .p-td em{
  font-style:normal; font-weight:500; color:var(--ink);
  font-size:13.5px; letter-spacing:.06em;
  /* 中では折らないこと。和文は字単位で折れるので、
     「いずれか1着」が「…いずれか1／着」と割れ、2行目に「着」だけが
     残ります（実際に起きました）。数量は1かたまりで読ませます。 */
  white-space:nowrap;
}
body.v3 .p-td[data-p]::before{ content:none; }

/* 未確定の値。数字と並んだときに、決まっていないことが分かる濃さにします */
body.v3 .p-tbd{
  font-family:var(--fl); font-size:.88em; letter-spacing:.14em;
  color:var(--ink-3);
}
/* 価格の欄は 26〜42px あるので、そのままだと「調整中」が金額より目立ちます */
body.v3 .p-th-price .p-tbd{ font-size:15px; letter-spacing:.2em; }

/* ─────────── 4-b. スタイルの3枚 ─────────── */
body.v3 .p-styles{
  grid-column:2 / 12;                     /* 右に余白を残す（全幅に見せない） */
  margin-top:clamp(56px,8vh,104px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--imggap); row-gap:clamp(40px,6vh,64px);
}
/* 3枚を一直線に置かず、真ん中を下げます */
body.v3 .p-styles > :nth-child(2){ margin-top:clamp(30px,4.6vh,66px); }
body.v3 .p-style{ display:block; text-decoration:none; color:inherit; }
body.v3 .p-style-media{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4 / 5; margin-bottom:18px;
}
body.v3 .p-style-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.9s var(--ease-slow);
}
body.v3 a.p-style:hover .p-style-media img{ transform:scale(1.04); }
body.v3 .p-style-en{ display:block; margin-bottom:8px; }
body.v3 .p-style-ja{
  display:block; margin-bottom:12px;
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; letter-spacing:.14em; color:var(--ink);
}
body.v3 .p-style-d{
  display:block; font-size:12px; line-height:2.1; letter-spacing:.08em;
  color:var(--ink-2); margin-bottom:12px;
}
body.v3 .p-style-plan{
  display:block; font-family:var(--fl); font-size:9.5px; letter-spacing:.16em;
  line-height:2; color:var(--ink-sub);
}
/* 詳細ページがあるものだけ、押せることを下線で示します */
body.v3 a.p-style .p-style-ja{
  display:inline-block;
  border-bottom:1px solid var(--line-link);
  transition:border-color .5s var(--ease);
}
body.v3 a.p-style:hover .p-style-ja{ border-bottom-color:var(--ink); }
body.v3 .p-styles-more{ grid-column:2 / 13; margin-top:clamp(36px,5vh,56px); }

/* ─────────── 5. ラベルと値の行 ─────────── */
/* プランの内訳・キャンセル規定・アクセスなど、
   「左に項目名、右に値」の形はすべてこれを使います。 */
body.v3 .p-rows{ list-style:none; margin:0; padding:0; }
body.v3 .p-rows li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; padding:13px 0; border-bottom:1px solid var(--line-f);
}
body.v3 .p-rows li:first-child{ border-top:1px solid var(--line-f); }
body.v3 .p-rows .l{
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink-sub); white-space:nowrap;
}
body.v3 .p-rows .r{
  font-size:12.5px; letter-spacing:.09em; color:var(--ink); text-align:right;
}
body.v3 .p-rows .r strong{ font-weight:500; }

/* 値が文章になる行。既定の .p-rows は「1着」「約3.5h」のような短い値のための
   右寄せなので、そのまま文章を入れると最後の1〜2文字だけが右端に取り残されます。 */
body.v3 .p-rows.is-desc li{ gap:clamp(24px,4vw,56px); align-items:baseline; }
body.v3 .p-rows.is-desc .l{ flex:0 0 auto; min-width:12em; }
body.v3 .p-rows.is-desc .r{ flex:1 1 auto; text-align:left; line-height:2.1; }
@media (max-width:900px){
  body.v3 .p-rows.is-desc li{ display:block; }
  body.v3 .p-rows.is-desc .l{ display:block; margin-bottom:8px; }
  body.v3 .p-rows.is-desc .r{ display:block; }
}

/* 行の下に添える一言。
   18px は .p-rows（罫線で区切られた表）の直下に置くときの値です。
   罫線がない相手（段落・写真の並び）の下では狭すぎるので、下で上書きします。 */
body.v3 .p-row-note{
  margin-top:18px;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em;
  line-height:2.1; color:var(--ink-sub);
}

/* ─────────── 5-b. ビューティーオプション ─────────── */
/* 仕上がりそのものが商品なので、ここだけ写真で見せます。
   データ・グッズは文字で足りるので表のままです（下の .p-opts）。
   5点を1列に並べるため1枚は小さめ。正方形の素材なので 1:1 で置きます。 */
/* --setgap は、ビューティーの写真の間隔とオプション表の列間で共有します。
   オプション表の列の境目を写真の切れ目に合わせるため、同じ値を使ってください。 */
body.v3 .p-beauty,
body.v3 .p-opts{ --setgap:clamp(16px,1.8vw,30px); }
body.v3 .p-beauty{ grid-column:2 / 13; margin-top:clamp(56px,8vh,110px); }
/* 写真の上に置く一文。※の注記（10px・薄墨）ではなく本文の濃さで出します。
   ここは但し書きではなく、選ぶ理由になる情報のためです。 */
/* 詳細ページのあるオプションだけ、名前をリンクにします */
body.v3 .p-beauty-n a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--line-link);
  transition:border-color .5s var(--ease);
}
body.v3 .p-beauty-n a:hover{ border-bottom-color:var(--ink); }

/* 節の中に置く2枚目以降の写真。.p-figure は見出し直後の1枚目用で
   上に大きな余白を持っているため、そのままでは節の中で浮きます。 */
/* 節の中に置く写真。
   列は本文（5/11）とあえて揃えていません。写真が本文の枠から外れて
   置かれること自体が、このサイトの組み方です（本文と揃えたほうが整いますが、
   整いすぎて他の節と馴染まなくなります）。
   ただし、すぐ上の注記（10px の但し書き）との距離が54pxしかなく、
   大きな写真が脚注にくっついて見えていたので、間隔だけ広げます。 */
body.v3 .p-figure-sub{
  grid-column:2 / 10;
  margin-top:clamp(72px,11vh,150px);
  aspect-ratio:3 / 2;
}
@media (max-width:900px){
  body.v3 .p-figure-sub{ grid-column:1 / 7; aspect-ratio:4 / 3; }
}

body.v3 .p-beauty-lead{
  max-width:62ch; margin-top:18px;
  font-size:12.5px; line-height:2.3; letter-spacing:.09em; color:var(--ink-2);
}
/* 女性向け・男性向けの小見出し（2026-10-04）。
   上の .p-opt-t（ビューティーオプション）より一段弱く、グリッドの直前に置きます。
   2つ目の並びは、前のグリッドから十分に離します。 */
body.v3 .p-beauty-sub{
  display:block; margin-top:clamp(30px,4vh,44px);
  font-family:var(--fl); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .p-beauty-sub.is-next{ margin-top:clamp(52px,7vh,86px); }
/* 小見出しの直後のグリッドは、見出しとの間を詰めます（既定の34px → 18px） */
body.v3 .p-beauty-sub + .p-beauty-grid{ margin-top:18px; }
body.v3 .p-beauty-grid{
  /* 列数は点数に合わせます（--n はPHPが渡しています）。
     5列に固定していたため、ソロのように3点のページでは
     左に3枚だけ寄り、右に475pxの空白が残っていました。 */
  display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  /* --colgap を使わないこと。携帯では --colgap が 10px まで下がりますが、
     そこでは2列になって写真が159pxになるため、10pxでは6.3%しか空きません
     （横の写真は約12%が目安）。下限を16pxで止めます。 */
  column-gap:var(--setgap); row-gap:clamp(36px,5vh,56px);
  margin-top:34px;   /* 上のリードは行間28.75px。26pxでは行送りより狭くなります */
}
body.v3 .p-beauty-media{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:1 / 1; margin-bottom:16px;
}
body.v3 .p-beauty-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 写真が未入稿のもの。空欄にすると崩れに見えるので、紙より一段濃い面を置きます */
body.v3 .p-beauty-media.is-blank{
  background:var(--paper-d);
  box-shadow:inset 0 0 0 1px var(--line-f);
}
/* 英字ラベルが1枚だけ2行になると、その列の和名から下が全部ずれます。
   .v-en は 10px / line-height 1.8 なので、2行ぶんを確保して揃えます。 */
body.v3 .p-beauty-en{ display:block; margin-bottom:8px; min-height:36px; }
/* 名前が1行のものと2行のものが混ざると、その下の価格が列ごとにずれます。
   2行ぶん（12.5px × 1.7 × 2）を確保して、価格の行を揃えます。 */
body.v3 .p-beauty-n{
  display:block; margin-bottom:9px; min-height:43px;
  font-family:var(--fd); font-weight:500;
  font-size:12.5px; line-height:1.7; letter-spacing:.1em; color:var(--ink);
}
/* 「（白塗り）」のような補足は、途中で折らずひとまとまりで送ります */
body.v3 .p-beauty-n i{ font-style:normal; white-space:nowrap; }
/* ■ 行の揃え方（2026-10-03にsubgridへ移行）
     上の2つの min-height は「名前が2行になる列に合わせて、全列の価格の行を
     揃える」ための保険です。ただし1行で足りるときも2行ぶん空くので、
     名前と金額の間が22px広がって見えます（英語はほぼ1行なので毎回そうなります）。
     subgrid が使えるブラウザでは、カードの各行を親グリッド側で揃えるので、
     折り返しが起きたときだけ自動で高さが揃い、余白は残りません。
     --rows はカード内の要素数です（和文5／英語4。英語は英字ラベルを出しません）。
     min-height は @supports が効かないブラウザ用にそのまま残してあります。 */
@supports (grid-template-rows: subgrid){
  body.v3 .p-beauty-item{
    display:grid; grid-template-rows:subgrid;
    grid-row:span var(--rows,5); row-gap:0;
  }
  body.v3 .p-beauty-en,
  body.v3 .p-beauty-n{ min-height:0; }
}
body.v3 .p-beauty-p{
  display:block; margin-bottom:15px;
  font-family:var(--fl); font-size:11px; letter-spacing:.1em; color:var(--ink);
}
body.v3 .p-beauty-d{
  display:block; font-size:11.5px; line-height:2; letter-spacing:.07em;
  color:var(--ink-2);
}
/* 説明文の中に置く詳細リンク（2026-10-04）。
   カードは subgrid で行を揃えているので、独立した要素として足すと
   その1枚だけ行数が増えて並びがずれます。必ず .p-beauty-d の中に入れること。 */
/* リンクを説明文の続きに流さないための包み。中のリンクは inline-block のまま */
body.v3 .p-beauty-morew{ display:block; margin-top:10px; }
body.v3 .p-beauty-more{
  display:inline-block;
  font-size:11.5px; letter-spacing:.08em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line-link);
  transition:border-color .3s ease;
}
body.v3 .p-beauty-more:hover{ border-bottom-color:var(--ink); }

/* 段落のすぐあとに置く注記。本文の行間（32.5px）より広くします */
body.v3 .p-sec-lead p + .p-row-note{ margin-top:clamp(34px,4.2vh,44px); }
/* 写真の並びのあとに置く注記。グリッドの行間45pxに対して18pxでは近すぎます */
body.v3 .p-beauty > .p-row-note{ margin-top:clamp(34px,5vh,56px); }

/* ─────────── 5-c. 予約への分岐（お問い合わせページ）─────────── */
/* このサイトには塗りのボタンも影も1つもありません。
   目立たせる手段は「地より沈んだ面」「罫線」「位置と級数」の3つだけなので、
   ページ上部に --paper-d の面を1枚置いて作っています。 */
body.v3 .p-fork{ margin-top:clamp(50px,7vh,88px); }
body.v3 .p-fork-panel{
  grid-column:2 / 13;
  background:var(--paper-d);
  padding:clamp(38px,5.4vh,64px) clamp(32px,3.6vw,60px);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(30px,4vw,64px); align-items:start;
}
body.v3 .p-fork-en{ display:block; margin-bottom:clamp(16px,2.2vh,24px); }
body.v3 .p-fork-h{
  font-family:var(--fd); font-weight:400;
  font-size:clamp(17px,1.7vw,23px); line-height:1.85; letter-spacing:.1em;
  color:var(--ink);
}
body.v3 .p-fork-d{
  font-size:12.5px; line-height:2.3; letter-spacing:.09em; color:var(--ink-2);
  margin-bottom:clamp(26px,3.6vh,38px);
}
/* 面の上なので、下線は紙色に埋もれない濃さにします */
body.v3 .p-fork-go::before{ background:var(--line-link); }

@media (max-width:900px){
  body.v3 .p-fork-panel{
    grid-column:1 / 7;
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(24px,4vw,32px);
  }
}

/* ─────────── 韓国メイクページの写真 ─────────── */
/* 仕上がりの幅を見せる2枚。左右で高さをずらし、
   「並べた2枚」ではなく構成に見えるようにします（Look Book と同じ考え方）。 */
body.v3 .p-pair{ margin-top:clamp(90px,13vh,170px); }
body.v3 .p-pair-item{ position:relative; overflow:hidden; aspect-ratio:4 / 5; }
body.v3 .p-pair-item:nth-child(1){ grid-column:2 / 7; }
body.v3 .p-pair-item:nth-child(2){ grid-column:8 / 12; margin-top:clamp(50px,8vh,120px); }
body.v3 .p-pair-item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 寄りの1枚は縦位置の素材なので、横長の既定から変えます */
/* ── 韓国メイクページの3枚 ──
   横長（3:2）の枠はそのまま。変えるのは置く位置だけです。
   以前は「施術中」と「デコレーション」が同じ 2/10 で、
   同じ位置・同じ大きさの写真が続いて単調でした。
   左→右→左と振って、節ごとに見え方が変わるようにしています。 */
body.v3 .p-figure-sub.km-detail { grid-column:3 / 9;  aspect-ratio:4 / 5; }  /* 寄り：やや左・縦（素材が縦のため） */
body.v3 .p-figure-sub.km-process{ grid-column:5 / 13; }                      /* 施術中：右へ振る */
body.v3 .p-figure-sub.km-deco   { grid-column:2 / 10; }                      /* デコ：左 */

@media (max-width:900px){
  body.v3 .p-pair-item:nth-child(1),
  body.v3 .p-pair-item:nth-child(2){ grid-column:1 / 7; margin-top:0; }
  body.v3 .p-pair-item + .p-pair-item{ margin-top:clamp(26px,5vw,40px); }
  body.v3 .p-figure-sub.km-detail{ grid-column:1 / 7; aspect-ratio:4 / 5; }
}

/* ─────────── 6. オプション ─────────── */
body.v3 .p-opts{ grid-column:2 / 13; margin-top:clamp(56px,8vh,110px); }
body.v3 .p-opt-group + .p-opt-group{ margin-top:clamp(56px,8vh,100px); }
/* 見出しと表の間は、ビューティーの「ラベル→写真の並び」と同じ34pxに揃えます */
body.v3 .p-opt-t{ display:block; margin-bottom:34px; }
body.v3 .p-opt-list{ list-style:none; margin:0; padding:0; }
/* ■ 2列です（2026-10-03に3列から変更）。
     3列（名前｜価格｜説明）だと、縦の基準線が上のビューティーの並び
     （3列／5列）ともプランの表とも一致せず、1画面に4本も通っていました。
     左に「名前＋価格」、右に説明。価格を名前の真下に置くのは
     ビューティーのカードと同じ組みで、ページ全体で1つの決まりになります。 */
body.v3 .p-opt-list > li{
  display:grid;
  /* 左の列幅は、上のビューティーの写真1枚ぶんと同じ式です（3列ぶんの1列）。
     そのため列の境目が、カードの1枚目と2枚目の間とぴたりと重なります。
     列の間隔も同じ clamp を使うこと。違う値にすると数pxずれて、
     「揃えようとして揃っていない」いちばん雑に見える状態になります。 */
  grid-template-columns:calc( (100% - 2 * var(--setgap)) / 3 ) minmax(0,1fr);
  column-gap:var(--setgap); align-items:start;
  padding:22px 0; border-top:1px solid var(--line-f);
}
body.v3 .p-opt-list > li:last-child{ border-bottom:1px solid var(--line-f); }
body.v3 .p-opt-n{
  grid-column:1; grid-row:1;
  font-size:13px; line-height:1.9; letter-spacing:.1em; color:var(--ink);
}
body.v3 .p-opt-n a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-link); }
body.v3 .p-opt-n a:hover{ border-bottom-color:var(--ink); }
/* 名前→価格の9pxは、ビューティーのカード（.p-beauty-n の margin-bottom）と同値です */
body.v3 .p-opt-p{
  grid-column:1; grid-row:2; margin-top:9px;
  font-family:var(--fl); font-size:11px; letter-spacing:.12em; color:var(--ink);
}
/* 価格が2通りあるものは1行ずつ。.p-opt-pv は page-plan / page-solo が出します */
body.v3 .p-opt-pv{ display:block; line-height:2; }
body.v3 .p-opt-d{
  grid-column:2; grid-row:1 / span 2;
  font-size:12px; line-height:2.2; letter-spacing:.09em; color:var(--ink-sub);
}

/* ─────────── 6-b. フォトグッズ（写真つきのカード） ─────────── */
/* ビューティーのカードと同じ組みです。同じページに2種類の並べ方を作らないため、
   列数（--n）・写真の正方形・subgridでの行揃えまで揃えてあります。
   違うのはカード全体がリンクであることだけ。
   ※ データオプションは行のままです（写真に撮れるものがありません）。 */
body.v3 .p-goods-grid{
  display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  column-gap:var(--setgap); row-gap:clamp(36px,5vh,56px);
  margin-top:34px;
}
body.v3 .p-goods-item{
  display:block; color:inherit; text-decoration:none;
}
body.v3 .p-goods-media{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:1 / 1; margin-bottom:16px;
  background:var(--paper-d);   /* 読み込み中に穴が空かないように */
}
body.v3 .p-goods-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
body.v3 .p-goods-item:hover .p-goods-media img{ transform:scale(1.04); }
body.v3 .p-goods-media.is-blank{
  background:var(--paper-d); box-shadow:inset 0 0 0 1px var(--line-f);
}
/* 名前は、押せることが分かるように下線を敷きます。
   このサイトではリンクの合図が下線なので、カードでも同じにします。 */
body.v3 .p-goods-n{
  display:block; margin-bottom:9px;
  font-family:var(--fd); font-weight:500;
  font-size:12.5px; line-height:1.7; letter-spacing:.1em; color:var(--ink);
}
body.v3 .p-goods-n::after{
  content:''; display:block; width:100%; height:1px; margin-top:6px;
  background:var(--line-link);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease), background .5s var(--ease);
}
body.v3 .p-goods-item:hover .p-goods-n::after{ transform:scaleX(1); background:var(--ink); }
body.v3 .p-goods-p{
  display:block; margin-bottom:15px;
  font-family:var(--fl); font-size:11px; letter-spacing:.1em; color:var(--ink);
}
/* 価格が2通りあるものは1行ずつ（行の一覧と同じ扱い） */
body.v3 .p-goods-pv{ display:block; line-height:2; }
body.v3 .p-goods-d{
  display:block; font-size:11.5px; line-height:2; letter-spacing:.07em;
  color:var(--ink-2);
}
/* 行の高さを列どうしで揃えます（名前が2行のものと1行のものが混ざるため）。
   --rows はカード内の要素数（写真・名前・価格・説明の4つ）。 */
@supports (grid-template-rows: subgrid){
  body.v3 .p-goods-item{
    display:grid; grid-template-rows:subgrid;
    grid-row:span var(--rows,4); row-gap:0;
  }
}
@media (prefers-reduced-motion:reduce){
  body.v3 .p-goods-media img,
  body.v3 .p-goods-n::after{ transition:none !important; transform:none !important; }
}

/* ─────────── 7. 箇条書き（注意事項） ─────────── */
/* 中黒や・を使わず、字下げと行間だけで並びを見せます。 */
body.v3 .p-list{ list-style:none; margin:0; padding:0; }
body.v3 .p-list li{
  position:relative; padding-left:26px;
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
}
/* 1項目が複数行になるため、項目の間（18px）が行の間（31px）より狭いと
   どこで項目が切れているか分かりません。行間より広く取ります。 */
body.v3 .p-list li + li{ margin-top:34px; }
body.v3 .p-list li::before{
  content:''; position:absolute; left:0; top:1.15em;
  width:12px; height:1px; background:var(--line-link);
}

/* ─────────── 7-b. 文中のテキストリンク ─────────── */
/* .v-more（独立して立つリンク）とは別に、文章・表・箇条書きの
   「中に」出るリンクの作法です。

   ここに指定が無いと、ブラウザ既定の青＋下線がそのまま出ます
   （お問い合わせの連絡先表で実際に出ました）。
   v3には「すべてのaを整える」という指定を置いていません。
   ナビ・カード・ボタンまで巻き込むからです。そのぶん、
   文章の中にリンクを置く場所を増やすときは、
   セレクタをここに足してください。 */
body.v3 .p-rows a,
body.v3 .p-row-note a,
body.v3 .p-list a,
body.v3 .p-notes a,
body.v3 .p-sub a,
body.v3 .p-sec-lead p a,
body.v3 .p-a a:not(.v-more),
body.v3 .p-plan-for a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line-link);
  transition:border-color .5s var(--ease);
}
body.v3 .p-rows a:hover,
body.v3 .p-row-note a:hover,
body.v3 .p-list a:hover,
body.v3 .p-notes a:hover,
body.v3 .p-sub a:hover,
body.v3 .p-sec-lead p a:hover,
body.v3 .p-a a:not(.v-more):hover,
body.v3 .p-plan-for a:hover{ border-bottom-color:var(--ink); }

/* 指で触る画面にはホバーが無いので、最初から濃いめの下線にします
   （サイト共通の考え方。v3-base.css の @media (hover:none) と同じ） */
@media (hover: none){
  body.v3 .p-rows a,
  body.v3 .p-row-note a,
  body.v3 .p-list a,
  body.v3 .p-notes a,
  body.v3 .p-sub a,
  body.v3 .p-sec-lead p a,
  body.v3 .p-a a:not(.v-more),
  body.v3 .p-plan-for a{ border-bottom-color:var(--ink-sub); }
}

/* ─────────── 8. 小さな注記 ─────────── */
body.v3 .p-notes{
  font-family:var(--fl); font-size:10px; line-height:2.3;
  letter-spacing:.14em; color:var(--ink-sub);
}

/* ─────────── 9. 締めのCTA ─────────── */
/* トップのCTAと同じ作法にそろえます（面を敷かず、罫線1本の上に置く）。 */
body.v3 .p-cta{
  margin-top:var(--secY); padding-top:clamp(56px,8vh,110px);
  padding-bottom:clamp(90px,13vh,170px);
  border-top:1px solid var(--line-f); row-gap:0;
}
body.v3 .p-cta-title{ grid-column:2 / 9; }
body.v3 .p-cta-note{
  grid-column:2 / 8; margin-top:clamp(24px,3.4vh,36px);
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  line-height:2.2; color:var(--ink-sub);
}
body.v3 .p-cta-links{
  grid-column:9 / 13; display:flex; flex-direction:column;
  align-items:flex-start; gap:clamp(18px,2.6vh,28px);
  margin-top:clamp(30px,4vh,46px);
}

/* ─────────── 10. 一覧（スタイル一覧など） ─────────── */
/* 1件ずつ、写真と文章を左右に振り分けます。
   偶数番は左右を入れ替え、上下の位置もずらして、一覧が表に見えないようにします。 */
body.v3 .p-index{ row-gap:0; }
body.v3 .p-index-row{
  grid-column:1 / 13; display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--colgap);
  text-decoration:none; color:inherit;
  padding-top:var(--secY);
}
body.v3 .p-index-media{
  position:relative; overflow:hidden;
  grid-column:1 / 7; aspect-ratio:4/5;
}
body.v3 .p-index-media img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  transition:transform 1.9s var(--ease-slow);
}
body.v3 .p-index-row:hover .p-index-media img{ transform:scale(1.04); }
body.v3 .p-index-body{ grid-column:8 / 13; align-self:center; }

/* 偶数番は鏡像。写真を右、文章を左に */
body.v3 .p-index-row:nth-child(even) .p-index-media{ grid-column:7 / 13; }
body.v3 .p-index-row:nth-child(even) .p-index-body{ grid-column:2 / 7; }
/* 2番目だけ写真を下げ、3番目は上げる。等間隔に並ばないようにするため */
body.v3 .p-index-row:nth-child(2) .p-index-media{ margin-top:clamp(40px,7vh,110px); }
body.v3 .p-index-row:nth-child(3) .p-index-body{ margin-top:clamp(-70px,-6vh,0px); }

body.v3 .p-index-no{
  display:block; font-family:var(--fe); font-style:italic;
  font-size:clamp(20px,2.2vw,30px); line-height:1; color:var(--ink-3);
  margin-bottom:16px;
}
body.v3 .p-index-en{ display:block; margin-bottom:clamp(22px,3vh,34px); }
body.v3 .p-index-h{ margin-bottom:clamp(24px,3.4vh,38px); }
body.v3 .p-index-d{
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
  margin-bottom:clamp(24px,3.4vh,34px);
}
body.v3 .p-index-plan{
  font-family:var(--fl); font-size:10px; letter-spacing:.18em;
  line-height:2.2; color:var(--ink-sub); margin-bottom:clamp(26px,3.6vh,40px);
}
body.v3 .p-index-plan b{ color:var(--ink); font-weight:500; letter-spacing:.2em; }
/* 行ごと押せるので、リンクは「合図」です。
   実際の下線は .v-more と同じ作法（薄い線 → ホバーで濃い線）。 */
body.v3 .p-index-row:hover .v-more::after{ transform:scaleX(1); transform-origin:left center; }

/* ─────────── 11. 撮影セットの帯 ─────────── */
/* 横に流して、画面の外へ続いていくように見せます。
   6枚を画面内に収めると一覧表になり、「選べる」感じが出ません。 */
body.v3 .p-sets{ grid-column:1 / 13; margin-top:clamp(48px,7vh,90px); }
/* 全部見える並び。4列×2段。
   以前は横スクロールの帯でしたが、見えない写真が5枚あり、
   進捗バーとホイール変換を足してようやく使える状態でした。
   操作を覚えさせる部品は、このサイトの作りに合いません。 */
/* 他の要素と同じ列に収めること。
   以前はここだけ全幅（0..1440）で、ページ内の他は全部 194..1354 でした。
   1つだけ両端に接していると、そこだけ画面いっぱいに見えます。 */
body.v3 .p-sets-grid{
  grid-column:2 / 13;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(16px,2.1vw,36px);
  row-gap:clamp(44px,6vh,78px);
}
/* 4枚が一直線に並ぶと表に見えるので、2・4枚目を少し下げます */
body.v3 .p-sets-grid > :nth-child(4n+2),
body.v3 .p-sets-grid > :nth-child(4n+4){ margin-top:clamp(26px,4vh,56px); }
body.v3 .p-set-img{
  display:block; width:100%; aspect-ratio:3/4; overflow:hidden;
  background-size:cover; background-position:center;
}
body.v3 .p-set-cap{ display:block; margin-top:14px; }
body.v3 .p-set-en{ display:block; }
body.v3 .p-set-ja{
  display:block; margin-top:6px;
  font-size:11.5px; letter-spacing:.1em; color:var(--ink-sub);
}

/* ─────────── 12. 狭い画面 ─────────── */
@media (max-width:900px){
  /* v3-base.css が .v-cols を6カラムに組み替え、子を 1/7 に寄せます。
     ここでは「それでは崩れるもの」だけを置き直します。 */
  body.v3 .p-head .v-en,
  body.v3 .p-head .v-h,
  body.v3 .p-head .p-sub,
  body.v3 .p-head .p-no,
  body.v3 .p-sec-head,
  body.v3 .p-sec-title,
  body.v3 .p-sec-lead,
  body.v3 .p-opts,
  body.v3 .p-cta-title,
  body.v3 .p-cta-note,
  body.v3 .p-cta-links{ grid-column:1 / 7 !important; }

  body.v3 .p-sec-title{ margin-top:clamp(26px,4vw,38px); }
  /* 幅は .v-cols が1/7に広げます。比と上の余白だけ調整します */
  body.v3 .p-figure{
    grid-column:1 / 7 !important;
    aspect-ratio:3 / 2;
    margin-top:clamp(80px,14vw,130px);
  }

  /* プランは縦に積みます。横3列のままだと価格が2桁で折り返します */
  body.v3 .p-plan{
    grid-column:1 / 7 !important;
    grid-template-columns:minmax(0,1fr); row-gap:clamp(22px,4vw,32px);
  }
  body.v3 .p-plan-name,
  body.v3 .p-plan-price,
  body.v3 .p-plan-body{ grid-column:1 !important; }

  /* ── 比較表 ──
     横3列は携帯に入りません。項目名を見出しにして、その下に
     StandardとPremiumを1行ずつ並べます。どちらの値かは
     data-p を ::before で出して示します（表の頭から離れるため）。 */
  body.v3 .p-table{
    grid-column:1 / 7 !important;
    grid-template-columns:minmax(0,1fr);
  }
  body.v3 .p-table-head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--colgap);
    align-items:start;
    padding-bottom:clamp(24px,5vw,34px);
  }
  body.v3 .p-table-head .p-th-l{ display:none; }
  body.v3 .p-th-price{ font-size:clamp(22px,7vw,30px); }
  body.v3 .p-th-for{ font-size:11.5px; }

  body.v3 .p-tr{
    grid-template-columns:minmax(0,1fr);
    row-gap:7px; padding:clamp(16px,4vw,22px) 0;
  }
  body.v3 .p-td-l{ margin-bottom:3px; }
  /* 値は .p-td-v で1つにまとめてあります。
     直に書くと「小紋・ドレス」と <em>1着</em> が別々のグリッド項目になり、
     <em> だけが次の行の1列目（＝項目名の位置）へ落ちます。実際に落ちました。 */
  body.v3 .p-td{
    display:grid; grid-template-columns:72px minmax(0,1fr);
    column-gap:14px; align-items:baseline;
  }
  body.v3 .p-td[data-p]::before{
    content:attr(data-p);
    font-family:var(--fl); font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-3);
  }

  /* スタイルは3列→2列。3列のままだと写真が100px幅になります
     （3枚なので2列目の下に1枚残りますが、それで構いません） */
  body.v3 .p-styles{
    grid-column:1 / 7 !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(34px,7vw,48px);
  }
  body.v3 .p-styles-more{ grid-column:1 / 7 !important; }

  /* ── 携帯でも写真の位置を揃えないこと ──
     全部を 1/7（全幅）にすると、要素がすべて同じ幅で縦に積まれ、
     PCの「余白と不揃い」がそっくり失われます
     （実測：韓国メイクは全要素の91%が同じ 24..351 でした）。
     文字は幅を変えると読みにくくなるので、動かすのは写真だけ。
     ・画面の端まで出す（bleed）… 左右どちらかの余白を越えさせる
     ・内側に寄せる（inset）    … 本文より狭くして片側に寄せる
     この2つを交互に使い、同じ置き方が続かないようにします。 */

  /* 見出し直後の1枚：右の端まで出す */
  body.v3 .p-figure{
    grid-column:1 / 7;
    margin-right:calc(var(--gut) * -1);
  }
  /* 節の中の写真：種類ごとに置き方を変える */
  body.v3 .p-figure-sub.km-detail{
    grid-column:1 / 7; aspect-ratio:4 / 5;
    margin-left:clamp(28px,9vw,44px);           /* 内側に寄せる */
  }
  body.v3 .p-figure-sub.km-process{
    grid-column:1 / 7; aspect-ratio:3 / 2;
    margin-left:calc(var(--gut) * -1);          /* 左の端まで出す */
  }
  body.v3 .p-figure-sub.km-deco{
    grid-column:1 / 7; aspect-ratio:3 / 2;
    margin-right:clamp(28px,9vw,44px);          /* 内側に寄せる */
  }
  /* 2枚組：1枚目は左の端まで、2枚目は右に寄せて狭く */
  body.v3 .p-pair-item:nth-child(1){
    margin-left:calc(var(--gut) * -1); margin-right:clamp(40px,12vw,64px);
  }
  body.v3 .p-pair-item:nth-child(2){
    margin-left:clamp(40px,12vw,64px); margin-right:calc(var(--gut) * -1);
  }
  /* スタイル一覧：3通りで回す。
     odd/even の2通りだと1枚目と3枚目が同じ置き方になり、
     3枚しかないこのページでは繰り返しが見えてしまいます。 */
  body.v3 .p-index-row:nth-child(3n+1) .p-index-media{
    margin-right:calc(var(--gut) * -1);                /* 右の端まで */
  }
  body.v3 .p-index-row:nth-child(3n+2) .p-index-media{
    margin-left:clamp(32px,10vw,52px);                 /* 内側へ寄せる */
  }
  body.v3 .p-index-row:nth-child(3n) .p-index-media{
    margin-left:calc(var(--gut) * -1);                 /* 左の端まで */
  }

  /* グッズ：3列→2列。縦1列だと写真が全部同じ幅で積まれます */
  body.v3 .p-goods{
    grid-column:1 / 7;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(16px,4vw,26px);
    row-gap:clamp(36px,7vw,52px);
  }
  /* フォトブックの写真：1冊ごとに寄せる向きを変える */
  body.v3 .p-book:nth-of-type(odd) .p-book-ph{ margin-right:clamp(28px,9vw,44px); }
  body.v3 .p-book:nth-of-type(even) .p-book-ph{ margin-left:clamp(28px,9vw,44px); }

  /* 撮影セットは4列→2列。4列のままだと1枚が70px幅になります */
  body.v3 .p-sets-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(34px,6vw,50px);
  }

  /* ビューティーは5列→2列。5列のままだと写真が55px幅になります */
  body.v3 .p-beauty{ grid-column:1 / 7 !important; }
  body.v3 .p-beauty-grid,
  body.v3 .p-goods-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(30px,6vw,44px);
  }


  /* オプションは2列→縦積み。PCで指定した行・列は戻します */
  body.v3 .p-opt-list > li{
    grid-template-columns:minmax(0,1fr); row-gap:8px; padding:20px 0;
  }
  body.v3 .p-opt-n,
  body.v3 .p-opt-p,
  body.v3 .p-opt-d{ grid-column:1; grid-row:auto; }
  /* 価格は名前のもの。等間隔にすると3つが1かたまりに見えるので、
     名前→価格は詰めて、価格→説明を広く取ります。 */
  body.v3 .p-opt-p{ margin-top:0; }
  body.v3 .p-opt-d{ margin-top:6px; }

  /* 一覧は写真が上、文章が下。鏡像も段差もやめます
     （縦1列では左右の振り分けが読み取れず、ずらしても隙間にしか見えません） */
  /* 行そのものも6カラムに組み替えること。
     .p-index-row は .v-cols ではないので、v3-base.css の6カラム化が効きません。
     12カラムのまま子に 1/7 を指定すると、写真と文章が同じ半分の枠に重なります
     （実際に重なりました）。 */
  body.v3 .p-index-row{
    grid-column:1 / 7 !important;
    grid-template-columns:repeat(6,minmax(0,1fr));
    padding-top:clamp(96px,16vw,170px);
  }
  body.v3 .p-index-media,
  body.v3 .p-index-row:nth-child(even) .p-index-media{
    grid-column:1 / 7 !important; aspect-ratio:4/5;
  }
  body.v3 .p-index-body,
  body.v3 .p-index-row:nth-child(even) .p-index-body{
    grid-column:1 / 7 !important; margin-top:clamp(28px,5vw,40px) !important;
  }
  body.v3 .p-index-row:nth-child(2) .p-index-media{ margin-top:0; }

  body.v3 .p-cta-links{ margin-top:clamp(34px,6vw,48px); }
}

/* ─────────── 動きを減らす設定への配慮 ─────────── */
@media (prefers-reduced-motion:reduce){
  body.v3 .p-index-media img,
  body.v3 .p-figure img{ transition:none !important; }
}

/* ─────────── 13. FAQ ─────────── */
/* 質問だけを並べ、押すと答えが開きます（<details> なので JS なしで動きます）。
   答えを全部開いたまま並べると、読みたい1問に辿り着くまでが長すぎます。 */
body.v3 .p-faq-group{ grid-column:2 / 13; }
body.v3 .p-faq-group + .p-faq-group{ margin-top:var(--secY); }
body.v3 .p-faq-head{
  display:grid; grid-template-columns:repeat(11,minmax(0,1fr));
  column-gap:var(--colgap); align-items:baseline;
  margin-bottom:clamp(34px,5vh,60px);
}
body.v3 .p-faq-no{
  grid-column:1 / 3; font-family:var(--fe); font-style:italic;
  font-size:clamp(20px,2.2vw,30px); line-height:1; color:var(--ink-3);
}
body.v3 .p-faq-gt{ grid-column:4 / 11; }
body.v3 .p-faq-gt .v-en{ margin-bottom:12px; }

body.v3 .p-q{ border-top:1px solid var(--line-f); }
body.v3 .p-q:last-child{ border-bottom:1px solid var(--line-f); }
body.v3 .p-q > summary{
  list-style:none; cursor:pointer; position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) 28px;
  column-gap:var(--colgap); align-items:baseline;
  padding:24px 0;
  font-size:13px; line-height:2.3; letter-spacing:.1em; color:var(--ink);
  transition:color .5s var(--ease);
}
body.v3 .p-q > summary::-webkit-details-marker{ display:none; }
body.v3 .p-q > summary:hover{ color:var(--ink-2); }
/* 開閉の印は十字。開くと横棒1本になります（＋ → −）。
   三角や矢印は向きを持つので、静かな面の中で目立ちすぎます。 */
body.v3 .p-q-mark{
  position:relative; justify-self:end; align-self:center;
  width:11px; height:11px; display:block;
}
body.v3 .p-q-mark::before,
body.v3 .p-q-mark::after{
  content:''; position:absolute; left:0; top:5px;
  width:11px; height:1px; background:var(--ink-3);
  transition:transform .55s var(--ease), background .55s var(--ease);
}
body.v3 .p-q-mark::after{ transform:rotate(90deg); }
body.v3 .p-q[open] .p-q-mark::after{ transform:rotate(0deg); }
body.v3 .p-q[open] .p-q-mark::before,
body.v3 .p-q[open] .p-q-mark::after{ background:var(--ink); }

body.v3 .p-a{
  padding:0 0 30px;
  max-width:46em;
  font-size:12.5px; line-height:2.6; letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .p-a p{ margin:0; }
/* 答えが2段落以上になる場合の間隔。行間（12.5px×2.6＝32.5px）より
   広く取らないと、2段落が1つの塊に見えます。本文共通の 3.2em に揃えます。 */
body.v3 .p-a p + p{ margin-top:3.2em; }
body.v3 .p-a .v-more{ margin-top:22px; }

/* ─────────── 14. 規約・ポリシー・特商法 ─────────── */
/* 読みものではなく「引く」文書なので、飾りを足しません。
   条番号を左の余白に逃がし、本文は1カラムの読み幅に収めます。 */
body.v3 .ailea-legal{
  max-width:none; margin:0;
  padding:clamp(40px,7vh,86px) var(--gut) clamp(110px,16vh,200px);
}
body.v3 .ailea-legal > *{ max-width:44em; }
body.v3 .ailea-legal .legal-eyebrow{
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 clamp(26px,4vh,46px);
}
/* 見出しは英語（h1）と和名（legal-jp-title）が並びます。
   英語を小さく添え、和名を実際の見出しとして大きく見せます
   （日本語のページで英語を大見出しにすると、読む順番が逆になります）。 */
body.v3 .ailea-legal h1{
  font-family:var(--fe); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.65vw,22px); letter-spacing:.06em;
  line-height:1.75; color:var(--ink-lead); margin:0 0 14px;
}
body.v3 .ailea-legal .legal-jp-title{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(17px,1.75vw,25px); line-height:2.35; letter-spacing:.16em;
  color:var(--ink); margin:0 0 clamp(34px,5vh,58px);
}
body.v3 .ailea-legal .legal-lead{
  font-size:12.5px; line-height:2.6; letter-spacing:.09em; color:var(--ink-2);
  margin:0 0 clamp(50px,7vh,90px);
}
body.v3 .ailea-legal h2{
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.2; letter-spacing:.16em; color:var(--ink);
  margin:clamp(46px,6.5vh,76px) 0 20px;
  padding-top:22px; border-top:1px solid var(--line-f);
}
body.v3 .ailea-legal h3{
  font-family:var(--fl); font-size:11px; letter-spacing:.2em;
  color:var(--ink-sub); margin:30px 0 12px;
}
body.v3 .ailea-legal p{
  font-size:12.5px; line-height:2.6; letter-spacing:.09em; color:var(--ink-2);
  margin:0 0 1.5em;
}
body.v3 .ailea-legal ul,
body.v3 .ailea-legal ol{ margin:0 0 1.5em; padding-left:1.5em; }
body.v3 .ailea-legal li{
  font-size:12.5px; line-height:2.6; letter-spacing:.09em; color:var(--ink-2);
  margin-bottom:.5em;
}
body.v3 .ailea-legal a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-link); }
body.v3 .ailea-legal a:hover{ border-bottom-color:var(--ink); }
/* 注記。旧デザインでは金色の囲みでしたが、v3では面を敷きません。
   左に1本線を引いて、本文から半歩ずらすだけにします。 */
body.v3 .ailea-legal .legal-note{
  border:0; border-left:1px solid var(--line-link); background:none;
  padding:4px 0 4px 22px; margin:0 0 1.5em;
  font-size:11.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-sub);
}
body.v3 .ailea-legal .req{ color:var(--ink); }
body.v3 .ailea-legal .legal-meta{
  margin-top:clamp(60px,9vh,110px); padding-top:26px;
  border-top:1px solid var(--line-f);
  font-family:var(--fl); font-size:10px; letter-spacing:.16em;
  line-height:2.3; color:var(--ink-sub);
}
/* 特商法の「項目｜内容」表 */
body.v3 .ailea-legal .legal-dl{ margin:0; }
body.v3 .ailea-legal .legal-dl dt{
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink-sub); padding-top:24px; border-top:1px solid var(--line-f);
}
body.v3 .ailea-legal .legal-dl dd{
  margin:10px 0 24px;
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink);
}
body.v3 .ailea-legal .legal-dl dd .sub{
  display:block; margin-top:10px;
  font-size:11.5px; line-height:2.3; color:var(--ink-sub);
}
/* キャンセル料と、販売価格・役務の「項目｜金額」。組みは同じものです。 */
body.v3 .ailea-legal .legal-cancel,
body.v3 .ailea-legal .legal-rows{ list-style:none; margin:12px 0 0; padding:0; }
body.v3 .ailea-legal .legal-cancel li,
body.v3 .ailea-legal .legal-rows li{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--line-f); margin:0;
}
body.v3 .ailea-legal .legal-cancel li:first-child,
body.v3 .ailea-legal .legal-rows li:first-child{ border-top:1px solid var(--line-f); }
body.v3 .ailea-legal .legal-cancel .pct,
body.v3 .ailea-legal .legal-rows .pct{ color:var(--ink); text-align:right; }

@media (min-width:901px){
  /* 本文は2カラム目から。ほかのページの基準線に合わせます */
  body.v3 .ailea-legal{
    padding-left:calc(var(--gut) + (100% - var(--gut) * 2 - var(--colgap) * 11) / 12 + var(--colgap));
  }
}
@media (max-width:900px){
  body.v3 .p-faq-group{ grid-column:1 / 7 !important; }
  body.v3 .p-faq-head{ grid-template-columns:minmax(0,1fr); row-gap:14px; }
  body.v3 .p-faq-no,
  body.v3 .p-faq-gt{ grid-column:1 !important; }
  body.v3 .ailea-legal .legal-cancel li,
  body.v3 .ailea-legal .legal-rows li{ flex-direction:column; gap:4px; }
  body.v3 .ailea-legal .legal-cancel .pct,
  body.v3 .ailea-legal .legal-rows .pct{ text-align:left; }
}

/* ─────────── 15. 選ばれる理由（About） ─────────── */
/* カードにしません。番号を薄く置き、罫線1本で区切るだけにします。
   4枚をタイルで並べると「特徴の一覧表」になり、読ませたい文が飛ばされます。 */
body.v3 .p-why{ grid-column:2 / 13; margin-top:clamp(56px,8vh,110px); }
body.v3 .p-why-item{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,5fr);
  column-gap:var(--colgap); align-items:baseline;
  padding:clamp(30px,4.4vh,48px) 0; border-top:1px solid var(--line-f);
}
body.v3 .p-why-item:last-child{ border-bottom:1px solid var(--line-f); }
body.v3 .p-why-no{
  font-family:var(--fe); font-style:italic;
  font-size:clamp(18px,1.9vw,26px); line-height:1; color:var(--ink-3);
}
body.v3 .p-why-h{
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.2; letter-spacing:.14em; color:var(--ink);
}
body.v3 .p-why-b{
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
}

/* ─────────── 16. 撮影の流れ（About） ─────────── */
/* 6段階を縦に積み、左に細い罫線を通します。
   線が1本つながることで「順番がある」ことが figure なしで伝わります。 */
body.v3 .p-flow{ grid-column:3 / 11; margin-top:clamp(56px,8vh,110px); position:relative; }
body.v3 .p-flow::before{
  content:''; position:absolute; left:0; top:10px; bottom:10px;
  width:1px; background:var(--line-f);
}
body.v3 .p-flow-step{ position:relative; padding-left:clamp(44px,5.5vw,86px); }
body.v3 .p-flow-step + .p-flow-step{ margin-top:clamp(40px,6vh,72px); }
/* 縦線の上に置く点。紙色で塗りつぶし、線を切って見せます */
body.v3 .p-flow-step::before{
  content:''; position:absolute; left:-2px; top:.55em;
  width:5px; height:5px; border-radius:50%;
  background:var(--ink-3); box-shadow:0 0 0 5px var(--paper);
}
body.v3 .p-flow-no{
  display:block; margin-bottom:10px;
  font-family:var(--fl); font-size:10px; letter-spacing:.3em; color:var(--ink-3);
}
body.v3 .p-flow-t{
  display:block; margin-bottom:12px;
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.1; letter-spacing:.14em; color:var(--ink);
}
body.v3 .p-flow-d{
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2); margin:0;
}

@media (max-width:900px){
  body.v3 .p-why,
  body.v3 .p-flow{ grid-column:1 / 7 !important; }
  body.v3 .p-why-item{
    grid-template-columns:minmax(0,1fr); row-gap:12px;
  }
}

/* ─────────── 17. フォトアイテム（グッズ） ─────────── */
/* 商品を「カード」にしません。写真・名前・価格を縦に積み、
   罫線も囲みも置かずに余白だけで分けます。
   枠を付けると通販のカタログになり、ここまでの面と断絶します。 */
body.v3 .p-goods{
  grid-column:2 / 13; margin-top:clamp(56px,8vh,110px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--colgap); row-gap:clamp(56px,8vh,100px);
}
body.v3 .p-goods-ph{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:4 / 3; margin-bottom:clamp(20px,2.8vh,28px);
}
body.v3 .p-goods-ph img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
}
body.v3 .p-goods-en{ display:block; margin-bottom:10px; }
body.v3 .p-goods-name{
  display:block; margin-bottom:14px;
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.1; letter-spacing:.14em; color:var(--ink);
}
body.v3 .p-goods-desc{
  font-size:12px; line-height:2.3; letter-spacing:.09em; color:var(--ink-2);
  margin:0 0 clamp(18px,2.4vh,24px);
}
body.v3 .p-goods-price{
  display:block; font-family:var(--fe); font-weight:400;
  font-size:clamp(17px,1.5vw,21px); line-height:1.2; color:var(--ink);
}
body.v3 .p-goods-tax,
body.v3 .p-goods-ship{
  display:block; margin-top:8px;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.16em; color:var(--ink-sub);
}

/* ─────────── 18. フォトブック ─────────── */
/* 1冊ずつ、写真と説明を左右に。ページ数×料金は表のまま出します
   （ここは読ませる文章ではなく、引く数字なので、整列が優先です）。 */
body.v3 .p-books{ grid-column:2 / 13; margin-top:clamp(56px,8vh,110px); }
body.v3 .p-book{
  display:grid; grid-template-columns:repeat(11,minmax(0,1fr));
  column-gap:var(--colgap);
  padding-top:clamp(44px,6vh,76px); padding-bottom:clamp(44px,6vh,76px);
  border-top:1px solid var(--line-f);
}
body.v3 .p-book:last-of-type{ border-bottom:1px solid var(--line-f); }
body.v3 .p-book-ph{
  grid-column:1 / 5; position:relative; overflow:hidden; aspect-ratio:4 / 3;
}
body.v3 .p-book-ph img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
body.v3 .p-book-body{ grid-column:6 / 12; }
body.v3 .p-book-en{ display:block; margin-bottom:10px; }
body.v3 .p-book-name{
  display:block; margin-bottom:22px;
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.1; letter-spacing:.14em; color:var(--ink);
}
body.v3 .p-book-desc{
  font-size:12.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-2); margin:0;
}
body.v3 .p-book-prices{ margin-top:clamp(26px,3.6vh,36px); }
body.v3 .p-book-prices-t{ display:block; margin-bottom:20px; }
body.v3 .p-book-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:0;
}
body.v3 .p-book-cell{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line-f);
}
body.v3 .p-book-pp{
  font-family:var(--fl); font-size:10px; letter-spacing:.18em; color:var(--ink-sub);
  min-width:3.4em;
}
body.v3 .p-book-pv{ font-size:12px; letter-spacing:.06em; color:var(--ink); }
body.v3 .p-book-pv small{ font-size:10px; color:var(--ink-sub); margin-left:4px; }

@media (max-width:900px){
  body.v3 .p-goods{ grid-column:1 / 7 !important; grid-template-columns:minmax(0,1fr); }
  body.v3 .p-books{ grid-column:1 / 7 !important; }
  body.v3 .p-book{ grid-template-columns:minmax(0,1fr); row-gap:clamp(22px,4vw,30px); }
  body.v3 .p-book-ph,
  body.v3 .p-book-body{ grid-column:1 !important; }
  body.v3 .p-book-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--colgap); }
}

/* ─────────── 19. キャンペーンのページ ─────────── */
/* 本文は管理画面のエディタで書かれます。
   何が入ってくるか決められないので、見出し・段落・箇条書き・表の
   どれが来ても読める体裁をここで用意しておきます。 */
body.v3 .p-cmp-term{
  display:block;
  font-family:var(--fl); font-size:10.5px; letter-spacing:.2em; color:var(--ink-sub);
}
body.v3 .p-cmp-end,
body.v3 .p-cmp-soon{
  display:inline-block; margin-top:14px;
  padding:5px 14px; border:1px solid var(--line);
  font-family:var(--fl); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
}
/* 開始前のものは「これから」の知らせなので、終了の印より一段濃く出します */
body.v3 .p-cmp-soon{ border-color:var(--line-link); color:var(--ink-2); }

body.v3 .p-cmp-body{ grid-column:3 / 11; }
body.v3 .p-cmp-body > *:first-child{ margin-top:0; }
body.v3 .p-cmp-body p{
  font-size:13px; line-height:2.5; letter-spacing:.1em; color:var(--ink-2); margin:0 0 1.9em;
}
body.v3 .p-cmp-body h2{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.4vw,19px); line-height:2.3; letter-spacing:.16em; color:var(--ink);
  margin:clamp(56px,8vh,100px) 0 clamp(22px,3vh,30px);
}
body.v3 .p-cmp-body h3{
  font-family:var(--fd); font-weight:500;
  font-size:13.5px; line-height:2.1; letter-spacing:.14em; color:var(--ink);
  margin:clamp(40px,5.4vh,64px) 0 16px;
}
body.v3 .p-cmp-body ul,
body.v3 .p-cmp-body ol{ margin:0 0 1.9em; padding-left:1.5em; }
body.v3 .p-cmp-body li{
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2); margin-bottom:.5em;
}
body.v3 .p-cmp-body a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line-link); transition:border-color .5s var(--ease);
}
body.v3 .p-cmp-body a:hover{ border-bottom-color:var(--ink); }
body.v3 .p-cmp-body strong{ font-weight:500; color:var(--ink); }
body.v3 .p-cmp-body img{ max-width:100%; height:auto; display:block; margin:clamp(34px,5vh,60px) 0; }
body.v3 .p-cmp-body table{
  width:100%; border-collapse:collapse; margin:0 0 1.9em;
  font-size:12.5px; letter-spacing:.09em;
}
body.v3 .p-cmp-body th,
body.v3 .p-cmp-body td{
  padding:13px 0; border-bottom:1px solid var(--line-f); text-align:left; vertical-align:top;
}
body.v3 .p-cmp-body th{
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  color:var(--ink-sub); font-weight:400; white-space:nowrap; padding-right:20px;
}
body.v3 .p-cmp-body td{ color:var(--ink); }
body.v3 .p-cmp-body blockquote{
  margin:0 0 1.9em; padding:4px 0 4px 22px;
  border-left:1px solid var(--line-link);
  font-size:12.5px; line-height:2.4; color:var(--ink-sub);
}

@media (max-width:900px){
  body.v3 .p-cmp-body{ grid-column:1 / 7 !important; }
  body.v3 .p-cmp-body table,
  body.v3 .p-cmp-body th,
  body.v3 .p-cmp-body td{ display:block; width:100%; }
  body.v3 .p-cmp-body th{ border-bottom:0; padding-bottom:4px; }
}

/* ─────────── 20. 開催中のキャンペーン（1行のお知らせ） ─────────── */
/* 予約フォームと予約の選択画面に出ます。
   面も画像も持たせません。入力の途中に「宣伝の塊」が挟まると、
   読む対象が増えて手が止まります。
   ラベル・名前・期限の3つを1行に置くだけにしてあります。
   ※ v3-reserve.css / v3-booking.css の両方から参照されるので、
     ここ（共通）に置いています。読み込み順はどちらでも効きます。 */
body.v3 .cmp-note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding:14px 0 15px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:0 0 clamp(40px,5.4vh,64px);
}
body.v3 .cmp-note-l{
  font-family:var(--fl); font-size:9.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .cmp-note-t{
  font-size:12.5px; letter-spacing:.09em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line-link);
  transition:border-color .5s var(--ease);
}
body.v3 .cmp-note-t:hover{ border-bottom-color:var(--ink); }
body.v3 .cmp-note-d{
  margin-left:auto;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}
@media (hover: none){
  body.v3 .cmp-note-t{ border-bottom-color:var(--ink-3); }
}
@media (max-width:900px){
  body.v3 .cmp-note-d{ margin-left:0; width:100%; }
}