/* ============================================================
   DCIG Diamond Course 1 LP — style.css
   デザイン元: Claude Design「案4 白磁と墨」(handoff/lp-3/project/DCIG-LP-4-Aito.dc.html)
   デザイン仕様: 47.LPデザイン/DESIGN_5_AITO.md（aito.co.jp 実測値）
   数値はプロトタイプの値をそのまま使う（フォントだけ 2026-09-25 に過去LPと同じ系統へ変更）。レスポンシブ（@media）は実装側で追加したもの。
   ============================================================ */

:root{
  --bg:#FAFAFA;          /* 地色 */
  --surface:#F5F5F5;     /* 一段沈んだ面 */
  --text:#3A3A3B;        /* 本文（AITO #4E4E4E を読みやすさ優先で一段濃く） */
  --text-strong:#1F1F20; /* 見出し */
  --muted:#767676;       /* 日付・番号・表の項目名（コントラスト約4.3:1） */
  --label:#9A9A9A;       /* 英字ラベル・区切り線の縦棒（装飾） */
  --line:#E1E1E1;        /* 罫線 --color-gray-light */
  --link:#4B6AA5;        /* 本文中リンク --color-primary */
  --on-dark:#E4E4E4;     /* 暗い写真の上の文字 */
  --on-dark-sub:#C9C9C9;
  --ease-out:cubic-bezier(.215,.61,.355,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  /* フォントは過去LP（DCIG1-5 / DCIG9）と同じ系統：和文 Shippori Mincho・欧文 Cormorant Garamond・英字ラベル Cinzel */
  --ff-latin:'Cormorant Garamond','Shippori Mincho',serif;
  --ff-mincho:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --ff-caps:'Cinzel','Cormorant Garamond',serif;
  /* 大きな数字（25年・350億円・198,000・日付）は lining-nums で高さをそろえる。Cormorant 既定の上下に揺れる数字は読みにくいため（2026-09-25 決定） */
  --pad-x:clamp(20px,3vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:'Cormorant Garamond','Shippori Mincho','Hiragino Mincho ProN',serif;font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%}
a{color:var(--text);text-decoration:none;transition:color .3s var(--ease-expo),border-color .3s var(--ease-expo)}
a:hover{color:var(--text-strong)}
a:focus-visible,button:focus-visible{outline:1px solid var(--text);outline-offset:4px}
p,h1,h2,h3,blockquote,dl,dd,ol{margin:0}
p,li,dd,h1,h2,h3,blockquote,.catch,.way__title{text-wrap:pretty}   /* 行末に1〜2文字だけ落ちるのを防ぐ */
ol{padding:0;list-style:none}
.strong{color:var(--text-strong)}
.nw{display:inline-block}   /* 文節のまとまり：この中では改行しない（1〜2文字だけ次の行に落ちるのを防ぐ） */

/* ---------- 共通パーツ ---------- */
/* 英字ラベル「| LABEL」 */
.label{display:flex;align-items:center;gap:23px;height:fit-content;font-family:var(--ff-caps);font-size:12px;letter-spacing:.24em;color:var(--label)}
.label::before{content:"";width:1px;height:9px;background:var(--label)}
.label--end{align-self:flex-end}

/* 縦書きの見出し（左の列・スクロール追従） */
.vtitle{position:sticky;top:120px;writing-mode:vertical-lr;font-family:var(--ff-mincho);font-weight:400;font-size:clamp(18px,2vw,28px);line-height:1.1;letter-spacing:.1em;color:var(--text-strong)}

/* キャッチコピー */
.catch-group{display:flex;flex-direction:column;gap:28px}
.catch{font-family:var(--ff-mincho);font-weight:400;font-size:clamp(22px,2.3vw,32px);line-height:1.8;letter-spacing:.05em;color:var(--text-strong)}
.catch--lg{font-size:clamp(24px,2.6vw,36px);line-height:1.7}
.catch-en{font-family:var(--ff-latin);font-style:italic;font-weight:400;font-size:16px;line-height:1.5;letter-spacing:.06em}

/* 本文 */
.body-text{font-family:var(--ff-mincho);font-size:16px;line-height:2.05;letter-spacing:.03em}
.prose{display:flex;flex-direction:column;gap:45px;max-width:400px;font-family:var(--ff-mincho);font-size:16px;line-height:2.05;letter-spacing:.03em}
.prose--center{justify-self:center}
.prose--self-center{align-self:center}
.prose--tight{gap:30px}
.prose--wide{max-width:420px}

/* 下線＋三角矢印のボタン */
.btn-line{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);font-family:var(--ff-mincho)}
.tri{width:0;height:0;border-left:7px solid var(--tri,var(--text));border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .8s var(--ease-out)}
.btn-line:hover .tri{transform:translateX(4px)}
.btn-line--sm{min-width:160px;max-width:240px;font-size:15px}
.btn-line--sm:hover{border-bottom-color:var(--muted)}
.btn-line--strong{border-bottom-color:var(--muted);font-size:16px;letter-spacing:.1em;color:var(--text-strong)}
.btn-line--strong:hover{border-bottom-color:var(--text-strong)}
.btn-line--light{--tri:#E4E4E4;min-width:220px;border-bottom-color:rgba(228,228,228,.6);font-size:16px;letter-spacing:.1em;color:var(--on-dark)}
.btn-line--light:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* 番号付きの行リスト */
.rows li{display:grid;border-bottom:1px solid var(--line);font-family:var(--ff-mincho)}
.rows__no{font-family:var(--ff-latin);font-size:1.1em;color:var(--muted)}
.rows--learn li{grid-template-columns:3em 1fr;padding:16px 0;font-size:16px;line-height:1.8}
.rows--foryou{border-top:1px solid var(--line)}
.rows--foryou li{grid-template-columns:4em 1fr;padding:24px 0;font-size:clamp(16px,1.25vw,18px);line-height:1.9}

.note{font-size:14px;color:var(--muted)}
.text-link{color:var(--link);border-bottom:1px solid var(--link)}
.text-link:hover{color:var(--link)}

/* 背景が一段沈んだ帯 */
.band{background:var(--surface)}

/* ---------- セクションの基本グリッド（縦書き見出し列＋本文列） ---------- */
.sec{box-sizing:content-box;max-width:1120px;margin:0 auto;padding:clamp(100px,11vw,160px) var(--pad-x);display:grid;grid-template-columns:clamp(70px,12vw,180px) minmax(0,1fr)}
.sec__body{display:flex;flex-direction:column;gap:clamp(64px,8vw,110px);min-width:0}
.sec__body--rule{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.sec__body--gap-md{gap:clamp(56px,7vw,100px)}
.sec__body--gap-sm{gap:clamp(48px,6vw,80px)}
.sec__body--gap-xs{gap:clamp(40px,5vw,64px)}
.sec__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}

/* ---------- 01 HERO（2026-09-25 案4b インパクト） ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(84px,13svh,120px)}
/* 先生の写真：右 58%（最小420px）に置き、左端 30% を透明にして背景に溶かす */
.hero__photo{position:absolute;top:0;bottom:0;right:0;width:min(100%,max(58%,420px))}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%);
  mask-image:linear-gradient(to right,transparent 0%,#000 30%)}
.hero__name{position:absolute;right:clamp(16px,3vw,48px);top:120px;writing-mode:vertical-rl;font-family:var(--ff-caps);font-size:12px;letter-spacing:.3em;color:var(--text);pointer-events:none}

/* 左上：縦書きの DCIG＋縦線 ｜ キャッチコピー・サブ・申し込む */
.hero__main{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2.2vw,36px);max-width:min(100%,840px);padding:clamp(8px,3svh,40px) clamp(20px,4vw,72px) 0 clamp(20px,6vw,100px)}
.hero__brand{grid-row:1/span 3;writing-mode:vertical-rl;font-family:var(--ff-latin);font-size:clamp(13px,1.1vw,17px);letter-spacing:.5em;line-height:1;color:var(--text-strong);padding:.4em clamp(10px,1vw,16px) 0 0;border-right:1px solid var(--label)}
.hero__title{font-family:var(--ff-mincho);font-weight:500;font-size:clamp(20px,min(2.7vw,4.8svh),42px);line-height:1.55;letter-spacing:.08em;color:var(--text-strong);text-shadow:0 0 24px rgba(244,243,240,.9);white-space:nowrap}   /* 1行目「ゲシェ・マイケル・ローチが、」を折らない（Shippori はプロトタイプの Zen Old Mincho より字幅が広いので max-width を 680→840px に） */
.hero__sub{margin-top:clamp(12px,2.6svh,32px);font-family:var(--ff-mincho);font-size:clamp(14px,1vw,15px);letter-spacing:.14em;line-height:2.1;color:var(--text)}
.hero__cta{width:200px;margin-top:clamp(14px,3.4svh,44px);padding-bottom:14px;font-size:15px;letter-spacing:.16em}

/* 講座名（h1）：下端いっぱいの特大「Diamond」＋右寄せの「Course 1」。白＋difference で、背景の上は黒っぽく・写真の上は反転 */
.hero__course{position:relative;z-index:1;display:flex;flex-direction:column;padding:0 clamp(12px,2.4vw,40px);font-family:var(--ff-latin);font-weight:300;line-height:.8;color:#fff;mix-blend-mode:difference;pointer-events:none;font-variant-numeric:lining-nums}
.hero__course-sub{display:flex;align-items:baseline;justify-content:flex-end;gap:.28em;padding-right:.1em;font-size:clamp(40px,min(8vw,12svh),160px);letter-spacing:-.01em;line-height:1}
.hero__course-sub i{font-style:italic;line-height:1}
.hero__course-main{font-size:clamp(72px,min(19.5vw,27svh),380px);letter-spacing:-.035em;line-height:.9;margin-bottom:-.06em;white-space:nowrap}

/* 左上：日付の帯（ロゴの代わり） */
.hero__header{position:absolute;z-index:2;top:0;left:0;right:0;height:100px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4.2vw,60px);pointer-events:none}
.hero__date{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);padding-left:clamp(0px,calc(6vw - 4.2vw),40px);white-space:nowrap}
.hero__date-year,.hero__date-place{font-family:var(--ff-caps);font-size:12px;letter-spacing:.3em}
.hero__date-year{color:var(--muted)}
.hero__date-place{color:var(--text)}
.hero__sep{width:1px;height:14px;background:var(--label)}
.hero__date-days{font-family:var(--ff-latin);font-weight:500;font-size:clamp(20px,1.7vw,26px);line-height:1;font-variant-numeric:lining-nums;color:var(--text-strong)}
.hero__date-dow{font-family:var(--ff-caps);font-weight:400;font-size:10px;letter-spacing:.2em;padding:0 .8em 0 .4em;color:var(--text)}
.hero__date-dow--end{padding-right:0}

/* ---------- 02 BEYOND ---------- */
.beyond__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(48px,6vw,90px);align-items:start}
.beyond__grid--center{align-items:center}   /* 世界に一人・序章：写真の縦中央に本文をそろえる */
/* 序章は写真を右に（その先へ=右 → 世界に一人=左 → 序章=右 のジグザグ）。スマホは写真→本文の順のまま */
@media (min-width:768px){ .beyond__grid--reverse > .ph{order:2} }
.ph{overflow:hidden}
.ph--4x5{aspect-ratio:4/5}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 画像が未配置のときのプレースホルダー（main.js が読み込み失敗で .is-empty を付ける）。images/ に指定名で置けば自動で表示される */
.ph.is-empty{display:grid;place-items:center;background:#EFEFEF;outline:1px dashed #C8C8C8;outline-offset:-1px}
.ph.is-empty img{display:none}
.ph.is-empty::after{content:attr(data-ph);padding:0 24px;text-align:center;font-family:var(--ff-mincho);font-size:13px;line-height:1.8;color:var(--muted)}

/* ---------- 03 LIFETIME / 08 TEACHER（左右分割） ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.split--lifetime{border-top:1px solid var(--line)}
.split__photo{position:relative;min-height:clamp(360px,50vw,720px)}
.split__photo--teacher{min-height:clamp(420px,56vw,860px);overflow:hidden}
.split__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__text{display:flex;flex-direction:column;justify-content:center}
.split__title{font-family:var(--ff-mincho);font-weight:400;font-size:clamp(20px,1.8vw,24px);line-height:1.6;letter-spacing:.1em;color:var(--text-strong)}
.lifetime__text{background:var(--surface);gap:45px;padding:clamp(64px,7vw,100px) clamp(24px,5vw,75px) clamp(64px,7vw,100px) clamp(24px,4vw,60px)}
.quote{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--ff-mincho);font-size:clamp(17px,1.5vw,20px);line-height:2;letter-spacing:.05em;color:var(--text-strong)}
.teacher__text{gap:40px;padding:clamp(80px,9vw,140px) clamp(24px,6vw,100px) clamp(80px,9vw,140px) clamp(24px,5vw,75px)}
.teacher__head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.teacher__tagline{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--ff-mincho);font-size:16px;line-height:1.9;letter-spacing:.05em;color:var(--text-strong)}

/* ---------- 04 DIAMOND WAY ---------- */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(32px,4vw,60px)}
.way{display:flex;flex-direction:column;gap:22px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.way__img{aspect-ratio:1/1;overflow:hidden}
.way__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-expo)}
.way:hover .way__img img{transform:scale(1.05)}
.way__no{font-family:var(--ff-latin);font-style:italic;font-size:18px;letter-spacing:.1em;color:var(--muted)}
.way__title{font-family:var(--ff-mincho);font-weight:400;font-size:19px;line-height:1.7;letter-spacing:.05em;color:var(--text-strong)}
.way__body{font-family:var(--ff-mincho);font-size:15px;line-height:2.05;letter-spacing:.03em}

.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border:1px solid var(--line)}
.learn__main,.learn__aside{padding:clamp(32px,5vw,72px) clamp(24px,5vw,72px);display:flex;flex-direction:column}
.learn__main{gap:28px}
.learn__aside{background:var(--surface);justify-content:center;gap:40px}
.learn__head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.learn__title{font-family:var(--ff-mincho);font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:.1em;color:var(--text-strong)}
.learn__en{font-family:var(--ff-caps);font-size:11px;letter-spacing:.24em;color:var(--label)}
.learn__catch{font-family:var(--ff-mincho);font-size:clamp(20px,1.8vw,24px);line-height:1.8;letter-spacing:.08em;color:var(--text-strong)}

/* ---------- 05 ONLY ONE（2026-09-25 v3：2つの円が重なる図） ---------- */
/* 僧侶（生成り）と経営者（灰）の円を 28% 重ね、multiply で重なりを濃く。重なりの中央に「ゲシェ・マイケル」 */
.venn{--d:min(46vw,440px);position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate;padding:clamp(8px,2vw,24px) 0}
.venn__circle{position:relative;flex:0 0 auto;width:var(--d);height:var(--d);border-radius:50%;mix-blend-mode:multiply;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(6px,1.2vw,16px)}
.venn__circle--monk{border:1px solid #B5A993;background:#EDE6D8;padding:0 22% 0 6%}
.venn__circle--business{border:1px solid #8E9296;background:#E2E4E6;padding:0 6% 0 22%;margin-left:calc(var(--d) * -.28)}
.venn__en{font-family:var(--ff-caps);font-size:clamp(10px,1vw,13px);letter-spacing:.3em;white-space:nowrap;color:var(--text)}
.venn__ja{padding-left:.8em;font-family:var(--ff-mincho);letter-spacing:.2em}
.venn__num{font-family:var(--ff-latin);font-style:italic;font-weight:400;font-size:clamp(60px,11.5vw,164px);line-height:.9;letter-spacing:-.01em;font-variant-numeric:lining-nums;white-space:nowrap;color:var(--text-strong)}
.venn__unit{font-family:var(--ff-mincho);font-style:normal;font-weight:500;font-size:.24em;padding-left:.2em}
.venn__desc{margin-top:clamp(4px,.8vw,10px);padding-top:clamp(8px,1.2vw,16px);border-top:1px solid var(--text-strong);font-family:var(--ff-mincho);font-weight:500;font-size:clamp(12px,1.4vw,19px);line-height:1.7;letter-spacing:.04em;color:var(--text-strong)}
.venn__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.6vw,8px);pointer-events:none}
.venn__center-en{font-family:var(--ff-latin);font-style:italic;font-size:clamp(11px,1.1vw,15px);line-height:1;letter-spacing:.12em;white-space:nowrap;color:var(--text)}
.venn__center-ja{font-family:var(--ff-mincho);font-weight:500;font-size:clamp(13px,1.6vw,22px);line-height:1.3;letter-spacing:.12em;white-space:nowrap;text-align:center;color:var(--text-strong)}

/* ---------- 06 COURSE 1 ---------- */
.series{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;font-family:var(--ff-latin);font-size:18px;letter-spacing:.06em}
.series__item{color:var(--muted)}
.series__item.is-current{color:var(--text-strong);padding-bottom:6px;border-bottom:1px solid var(--text)}
.series__item--more{color:var(--label)}
.series__dot{width:4px;height:4px;border-radius:50%;background:#929EAA;opacity:.33}

/* ---------- 07 FOR YOU ---------- */
.notes{display:flex;flex-direction:column;gap:16px;font-family:var(--ff-mincho);font-size:14px;line-height:2}

/* ---------- 09 FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{appearance:none;background:none;border:0;margin:0;cursor:pointer;width:100%;display:grid;grid-template-columns:4em 1fr 2em;align-items:baseline;padding:26px 0;text-align:left;font-family:var(--ff-mincho);font-size:clamp(16px,1.25vw,18px);line-height:1.8;color:var(--text-strong);transition:color .3s var(--ease-expo)}
.faq__q:hover{color:var(--text)}
.faq__no{font-family:var(--ff-latin);font-style:italic;font-size:17px;letter-spacing:.06em;color:var(--muted)}
.faq__sign{font-family:var(--ff-latin);font-weight:300;font-size:26px;text-align:right;color:var(--muted)}
.faq__a p{padding:0 2em 30px 4em;font-family:var(--ff-mincho);font-size:16px;line-height:2.05;letter-spacing:.03em}

/* ---------- 10 APPLY ---------- */
.apply__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(40px,6vw,80px);align-items:start}
.details{border-top:1px solid var(--line)}
.details > div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);font-family:var(--ff-mincho);font-size:16px;line-height:1.8}
.details dt{color:var(--muted)}
.price{display:flex;flex-direction:column;gap:40px;padding:clamp(32px,4vw,56px);border:1px solid var(--line);background:var(--bg)}
.price__body{display:flex;flex-direction:column;gap:12px}
.price__label{font-family:var(--ff-mincho);font-size:15px;letter-spacing:.1em}
.price__num{white-space:nowrap;font-family:var(--ff-latin);font-weight:400;font-variant-numeric:lining-nums;font-size:clamp(52px,5.2vw,72px);line-height:1.1;color:var(--text-strong)}
.price__unit{font-family:var(--ff-mincho);font-size:.26em;padding-left:.4em}
.price__regular{padding-top:14px;margin-top:4px;border-top:1px solid var(--line);font-family:var(--ff-mincho);font-size:16px}

/* ---------- 11 CLOSING ---------- */
.closing{position:relative;min-height:max(90svh,50vw);display:grid;overflow:hidden}
.closing__overlay{grid-area:1/1;pointer-events:none;background:rgba(19,19,19,.35)}
.closing__inner{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;gap:36px;padding:clamp(80px,10vw,160px) clamp(20px,4.2vw,60px) clamp(60px,8vw,120px)}
.closing__en{font-family:var(--ff-caps);font-size:12px;letter-spacing:.24em;color:var(--on-dark-sub)}
.closing__title{font-family:var(--ff-mincho);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.7;letter-spacing:.04em;color:var(--on-dark)}
.closing__text{font-family:var(--ff-mincho);font-size:16px;line-height:2.05;letter-spacing:.03em;color:var(--on-dark)}

/* ---------- 12 FOOTER ---------- */
.footer{box-sizing:content-box;max-width:1120px;margin:0 auto;padding:64px var(--pad-x) 110px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;font-family:var(--ff-mincho);font-size:14px}
.footer__brand{display:flex;flex-direction:column;gap:14px}
.footer__logo{font-family:var(--ff-caps);font-size:20px;letter-spacing:.14em;line-height:1;color:var(--text-strong)}
.footer__nav{display:flex;flex-wrap:wrap;gap:12px 32px}
.footer__copy{font-family:var(--ff-latin);font-size:14px;letter-spacing:.08em;color:var(--muted)}

/* ---------- 追従CTA ---------- */
.follow-cta{position:fixed;right:clamp(12px,2vw,32px);bottom:clamp(12px,2vw,32px);z-index:80;display:flex;justify-content:space-between;align-items:center;gap:40px;min-width:160px;padding:18px 22px;background:var(--bg);border:1px solid var(--line);font-family:var(--ff-mincho);font-size:15px;letter-spacing:.1em;color:var(--text-strong);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),visibility 0s linear .6s}
.follow-cta.is-show{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),visibility 0s}
.follow-cta:hover .tri{transform:translateX(4px)}

/* ---------- スクロール出現（show 側の詳細度を hide 側より高くする） ---------- */
.js [data-anim]{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.js [data-anim].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none;transition:none}
  .way__img img,.tri{transition:none}
}

/* ============================================================
   レスポンシブ（プロトタイプに無いので実装側で追加）
   ============================================================ */

/* スマホ：HERO を「写真（上）→ 特大の Diamond（写真の下端に重ねる）→ コピー → 申し込む」の縦積みに */
@media (max-width:767.98px){
  .hero{height:auto;min-height:100svh;justify-content:flex-start;padding:0 0 48px;background-position:center top !important}
  .hero__photo{position:relative;width:100%;height:52svh;min-height:320px;flex:none}
  .hero__photo img{
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  .hero__name{display:none}  /* 写真の建物に重なって読めないので隠す（装飾のみ） */
  .hero__course{order:1;margin-top:-.62em;padding:0 12px;font-size:clamp(72px,27vw,120px)}
  .hero__course-sub{order:-1;font-size:.4em;padding-right:.1em;margin-bottom:.05em}
  .hero__course-main{font-size:1em;margin-bottom:0}
  .hero__main{order:2;max-width:none;padding:28px 20px 0}
  .hero__title{font-size:clamp(17px,5vw,22px);letter-spacing:.04em}
  .hero__cta{width:100%;max-width:240px}
  .hero__header{height:64px}
  .hero__date{gap:10px;padding-left:0}
  .hero__date-year{display:none}
  .hero__date-year + .hero__sep{display:none}
  .hero__date-days{font-size:19px}
  .hero__date-place{font-size:10px;letter-spacing:.2em}

  /* --- 過去LP（DCIG1-5）に合わせたスマホの組み方 ---
     縦書きの見出し列をやめて1カラムに。見出しは本文の上に「── その先へ」の小見出しとして置く */
  .sec{grid-template-columns:minmax(0,1fr);padding:72px 20px 80px}
  .sec__side{margin-bottom:28px}
  .vtitle{position:static;writing-mode:horizontal-tb;display:flex;align-items:center;gap:14px;font-size:13px;line-height:1.6;letter-spacing:.2em;color:var(--text)}
  .vtitle::before{content:"";flex:none;width:24px;height:1px;background:var(--label)}
  .sec__head .label,.label--end{display:none}   /* 英字ラベルは小見出しと重複するので隠す */
  .sec__head{gap:0}
  .sec__body,.sec__body--gap-md,.sec__body--gap-sm{gap:48px}
  .sec__body--gap-xs{gap:0}
  .sec__body--rule{padding-top:36px}
  .prose{max-width:none;gap:32px}
  .prose--center,.prose--self-center{justify-self:stretch;align-self:stretch}
  .beyond__grid{gap:40px}
  .beyond__grid > .ph{order:-1}   /* スマホは3セクションとも「写真→本文」。千年の秘密の写真が次の先生写真と続かないように */
  .way__img{aspect-ratio:4/3}      /* ダイヤモンドウェイの3枚は横長にして縦の長さを詰める */
  .series{gap:14px 18px;font-size:16px}
  .ways{gap:48px}
  .learn__main,.learn__aside{padding:32px 20px}
  .apply__grid{gap:32px}
  .price{padding:32px 24px;gap:32px}

  /* Only One の円：横に並べると小さく文字が折れるので、縦に重ねる（重なりは同じ 28%） */
  .venn{--d:min(78vw,320px);flex-direction:column;padding:0}
  .venn__circle{gap:8px}
  .venn__circle--monk{padding:0 8% 20%}
  .venn__circle--business{padding:20% 8% 0;margin-left:0;margin-top:calc(var(--d) * -.28)}
  .venn__en{font-size:11px}
  .venn__num{font-size:64px}
  .venn__desc{font-size:14px;padding-top:10px}
  .venn__center-en{font-size:11px}
  .venn__center-ja{font-size:14px}
  .venn__center-ja br{display:none}

  /* 左右分割（LIFETIME / TEACHER）は写真を横長にして文字を先に見せやすく */
  .split__photo{min-height:0;aspect-ratio:4/3}
  .split__photo--teacher{min-height:0;aspect-ratio:4/5}
  .lifetime__text{padding:56px 20px 64px;gap:32px}
  .teacher__text{padding:64px 20px 56px;gap:32px}

  /* 追従CTA：画面下に横幅いっぱいのバー（DCIG9 と同じ形） */
  .follow-cta{left:0;right:0;bottom:0;min-width:0;justify-content:center;gap:16px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);background:rgba(250,250,250,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:15px}
  .footer{padding-bottom:120px}

  .closing{background-position:15% center !important}
  .closing__overlay{background:rgba(19,19,19,.5)}
  .closing__inner{align-items:flex-start;text-align:left}

  .faq__q{grid-template-columns:3.4em 1fr 1.6em}
  .faq__a p{padding:0 0 26px 3.4em}
}

/* 数字ブロックは狭い幅では縦積み。区切り線を縦→横に */
@media (max-width:640px){
  .catch{font-size:20px}
  .catch--lg{font-size:22px}
  .prose,.body-text,.faq__a p,.closing__text{font-size:15px;line-height:2}
  .way__body{font-size:14px}
  .rows--foryou li{grid-template-columns:3em 1fr}
  .details > div{grid-template-columns:5.5em 1fr}
}