/*
Theme Name: VIVIA
Theme URI: https://vivia.studio/
Author: Ryuichi Komi
Description: 株式会社VIVIA ブランドサイト用テーマ。親テーマ不要のスタンドアロン。
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: vivia
*/

/* ==========================================================
   ベースは静的モック（vivia-mock.css）と同一。
   モック専用の .mock-bar ブロックのみ除いてある。
   ========================================================== */

/* =========================================================
   VIVIA ブランドサイト モック 共通スタイル
   既存 Salon Li'aet テーマ (style.css) のトークン・世界観を継承
   ========================================================= */
:root{
  --color-cream:#FBF9F5;
  --color-beige:#EEE9DD;
  --color-light-gray:#F7F7F7;
  --color-ink:#33302E;
  --color-near-black:#222;
  --color-muted:#777;
  --color-white:#FFF;
  --color-accent:#B07A4E;

  --font-en:"Cormorant Garamond","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-jp:"Zen Kaku Gothic New","Hiragino Sans","Helvetica Neue",system-ui,sans-serif;

  --container:1280px;

  --fs-sm:14px;
  --fs-base:16px;
  --fs-xl:28px;
  --fs-2xl:40px;
  --fs-hero:clamp(40px,5.5vw,76px);

  --lh-tight:1.4;
  --lh-base:1.85;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--color-cream);
  color:var(--color-ink);
  font-family:var(--font-jp);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:opacity .2s ease;}
a:hover{opacity:.7;}

/* Header ------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;width:100%;background:rgba(251,249,245,.92);backdrop-filter:blur(8px);}
.site-header__inner{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;max-width:100%;}
.site-header__logo{font-family:var(--font-en);font-size:24px;letter-spacing:.18em;color:var(--color-ink);}
.site-header__logo small{display:block;font-family:var(--font-jp);font-size:10px;letter-spacing:.24em;color:var(--color-muted);margin-top:2px;}
.site-header__nav{display:flex;align-items:center;gap:36px;}
.site-header__menu{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.site-header__menu a{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.12em;}
.site-header__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.1em;border:1px solid var(--color-ink);border-radius:999px;padding:9px 20px;}
@media(max-width:920px){.site-header__menu{display:none;}}

/* Section base ------------------------------------------- */
.section{padding:120px 144px;}
.section--tight{padding:100px 144px;}
.section--white{background:var(--color-white);}
.main>.section:nth-of-type(even){background:var(--color-white);}
.section__inner{max-width:var(--container);margin:0 auto;}
.section__inner--narrow{max-width:760px;margin:0 auto;}
.section__head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:60px;}
.section__head-en{font-family:var(--font-en);font-size:var(--fs-2xl);font-weight:400;line-height:var(--lh-tight);margin:0;color:var(--color-ink);}
.section__head-jp{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--color-muted);margin:0;}

/* Placeholder（画像仮置き） ------------------------------ */
.ph{position:relative;background:var(--color-beige);background-image:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 55%);display:flex;align-items:center;justify-content:center;}
.ph::after{content:attr(data-label);font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.24em;color:rgba(51,48,46,.4);text-transform:uppercase;}

/* Buttons ------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.14em;padding:16px 36px;border-radius:999px;border:1px solid var(--color-ink);}
.btn--solid{background:var(--color-ink);color:var(--color-cream);}
.btn--ghost{background:transparent;color:var(--color-ink);}

/* =========================================================
   トップページ専用
   ========================================================= */
/* Hero */
.hero{position:relative;padding:24px 0 90px;display:flex;flex-direction:column;gap:72px;background:var(--color-cream);}
.hero__intro{padding:0 144px;max-width:980px;}
.hero__eyebrow{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.28em;color:var(--color-muted);margin:0 0 24px;}
.hero__title{font-family:var(--font-en);font-size:var(--fs-hero);font-weight:400;line-height:var(--lh-tight);margin:0 0 32px;color:var(--color-ink);}
.hero__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;max-width:680px;margin:0;}
.hero__media{margin:0 0 0 144px;width:calc(100% - 144px);aspect-ratio:16/6;overflow:hidden;border-radius:32px 0 0 32px;}
.hero__media.ph{border-radius:32px 0 0 32px;}

/* 絵の上に言葉を重ねるファーストビュー ---------------------
   絵を置いた下に見出しを積むのではなく、ひとつの面にする。
   キービジュアルは人物が右に寄って左が空いているので、そこへ文字を置く。

   見出しの下に引く短い金の罫は、パンフレット案が見出しごとに使っている
   意匠をそのまま持ってきたもの。ここだけで飾らず、同じ罫を節の見出しにも引く。 */
.hero--overlay{position:relative;padding:0;display:block;gap:0;}
.hero--overlay .hero__media{margin:0;width:100%;aspect-ratio:auto;border-radius:0;}
/* 画面の高さに収める。引くのはヘッダーのぶん。
   人物を画面の右端に置きたいので、はみ出るぶんは左から詰める。 */
.hero--overlay .hero__media img{width:100%;height:calc(100svh - 86px);
  object-fit:cover;object-position:78% center;}
.hero--overlay .hero__intro{position:absolute;top:50%;transform:translateY(-50%);
  left:max(40px,calc((100% - var(--container)) / 2));
  padding:0;max-width:min(46%,540px);}
.hero--overlay .hero__eyebrow{color:var(--color-accent);margin:0 0 20px;}
.hero--overlay .hero__title{margin:0;}
/* 見出しと本文のあいだに引く罫。パンフレットの見出し下と同じ長さ・太さ */
.hero--overlay .hero__title::after{content:"";display:block;
  width:56px;height:1px;background:var(--color-accent);margin:clamp(24px,3.4vh,40px) 0 0;}

.hero--overlay .hero__lead{margin:clamp(24px,3.4vh,40px) 0 0;font-size:var(--fs-sm);line-height:2.05;}
/* 縦に余裕のない画面では、行間と余白だけを詰める */
@media(min-width:901px) and (max-height:820px){
  .hero--overlay .hero__lead{line-height:1.9;}
}

/* Philosophy */
.philosophy__lead{font-family:var(--font-jp);font-size:var(--fs-xl);font-weight:400;line-height:1.7;letter-spacing:.08em;margin:0 0 48px;max-width:880px;}
.philosophy__media{margin:0 0 48px;max-width:980px;aspect-ratio:16/9;overflow:hidden;border-radius:24px;}
.philosophy__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;max-width:980px;}
.philosophy__block h3{font-family:var(--font-en);font-size:22px;font-weight:500;letter-spacing:.08em;margin:0 0 4px;}
.philosophy__block .jp-label{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--color-muted);margin:0 0 16px;}
.philosophy__block p{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;margin:0;}
@media(max-width:768px){.philosophy__grid{grid-template-columns:1fr;gap:36px;}}

/* Message */
.message__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;}
.message__portrait{aspect-ratio:4/5;border-radius:24px 24px 0 0;overflow:hidden;}
.message__intro{font-family:var(--font-jp);font-size:var(--fs-xl);font-weight:400;line-height:1.7;letter-spacing:.08em;margin:0 0 32px;}
.message__body p{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;margin:0;}
.message__body p+p{margin-top:1.6em;}
.message__sign{margin-top:40px;font-family:var(--font-jp);}
.message__sign .role{font-size:var(--fs-sm);letter-spacing:.16em;color:var(--color-muted);}
.message__sign .name{font-size:var(--fs-base);font-weight:500;letter-spacing:.12em;}
.message__sign .name span{font-family:var(--font-en);font-size:22px;margin-left:12px;letter-spacing:.08em;}
@media(max-width:880px){.message__grid{grid-template-columns:1fr;gap:36px;}}

/* Business cards */
.biz__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;max-width:720px;margin:-24px 0 56px;}
.biz__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;}
/* カードはどこを押しても開ける。
   ホバーで画像が動くので反応する場所に見えるのに、
   実際に押せるのが「View More」の文字だけだと取りこぼす。

   画像だけをリンクで包む手もあるが、それだと見出しや説明文が押せないままになる。
   リンク自身を広げてカードを覆う。「準備中」は <span> なので覆わず、押しても何も起きない。 */
.biz__item{min-width:0;position:relative;}
a.biz__more::after{content:"";position:absolute;inset:0;}
/* 画像は事業名の下に置くので、カード上端に接していた頃の上だけ角丸をやめて全周にする */
.biz__media{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;margin-bottom:20px;}
.biz__badge{position:absolute;right:14px;top:16px;font-family:var(--font-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--color-ink);color:var(--color-cream);padding:5px 12px;border-radius:999px;}
.biz__name-en{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.16em;color:var(--color-muted);margin:0 0 4px;}
.biz__name{font-family:var(--font-jp);font-size:18px;font-weight:500;letter-spacing:.06em;margin:0 0 16px;}
.biz__desc{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;color:var(--color-muted);margin:0 0 16px;}
.biz__more{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.16em;}
@media(max-width:1080px){.biz__list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.biz__list{grid-template-columns:1fr;}}

/* Blog cards */
.blog__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;}
.blog__media{aspect-ratio:16/10;border-radius:16px 16px 0 0;overflow:hidden;margin-bottom:18px;}
.blog__meta{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.blog__date{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.08em;color:var(--color-muted);}
.blog__cat{font-family:var(--font-en);font-size:11px;letter-spacing:.14em;border:1px solid var(--color-ink);border-radius:999px;padding:3px 11px;}
.blog__title{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;line-height:1.6;letter-spacing:.04em;margin:0;}
.blog__more-wrap{margin-top:48px;}
.blog__more{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.18em;}
@media(max-width:880px){.blog__list{grid-template-columns:1fr;gap:32px;}}

/* Contact CTA (トップ末尾) */
.section--contact{text-align:center;}
.contact__inner{max-width:720px;margin:0 auto;}
.contact__en{font-family:var(--font-en);font-size:clamp(36px,5vw,56px);font-weight:400;line-height:1.2;margin:0 0 20px;}
.contact__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;margin:0 0 40px;}
.contact__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* =========================================================
   下層ページ共通
   ========================================================= */
/* Sub-page hero */
.page-hero{padding:72px 144px 0;}
.page-hero__inner{max-width:var(--container);margin:0 auto;}
.page-hero__en{font-family:var(--font-en);font-size:clamp(40px,5vw,68px);font-weight:400;line-height:1.1;margin:0 0 12px;}
.page-hero__jp{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--color-muted);margin:0 0 28px;}
/* 事業ページ用。見出しが日本語で、英字はその上の小見出しになる */
.page-hero__eyebrow{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--color-muted);margin:0 0 14px;}
.page-hero__title{font-family:var(--font-jp);font-size:clamp(28px,3.2vw,40px);font-weight:500;line-height:1.45;letter-spacing:.06em;margin:0 0 28px;}
/* LP のファーストビュー ------------------------------------
   絵の上に、ポスターに書かれている文言をそのまま文字として重ねる。
   ポスター（A4 縦）をそのまま貼ると 1 画面に収まらず、コピーが
   スクロールするまで出てこないため、画像は画面の形に合わせて 2 種類用意した。
   広い画面には横長、スマホには同じモデル・同じ光で組み替えた縦長。
   どちらも人物を片側に寄せてあり、空けたほうに文字が乗る。
   出し分けは picture の source（max-width:900px）で行う。 */
.lp-hero__visual{position:relative;background:#F6F2EC;}
.lp-hero__bg{width:100%;height:auto;object-fit:cover;}
.lp-hero__mark{font-family:var(--font-en);font-weight:400;line-height:1;
  letter-spacing:.02em;color:var(--color-ink);margin:0;}
.lp-hero__plus{color:var(--color-accent);font-size:.42em;vertical-align:super;margin-left:.06em;}
.lp-hero__name{font-family:var(--font-en);font-weight:400;letter-spacing:.2em;
  color:var(--color-ink);margin:6px 0 0;}
.lp-hero__catch{font-family:var(--font-en);font-weight:400;line-height:1.7;
  letter-spacing:.16em;color:var(--color-ink);}
.lp-hero__lead{font-family:var(--font-en);line-height:2;letter-spacing:.14em;
  color:var(--color-accent);}

/* スマホ。人物が下半分にいるので、文字は上の空きに置く。 */
@media(max-width:900px){
  .lp-hero__bg{height:calc(100svh - 76px);object-position:center bottom;}
  .lp-hero__copy{position:absolute;top:clamp(40px,8svh,80px);left:0;right:0;
    padding:0 24px;text-align:center;}
  .lp-hero__mark{font-size:clamp(56px,17vw,84px);}
  .lp-hero__name{font-size:clamp(15px,4.4vw,20px);}
  .lp-hero__catch{font-size:clamp(19px,5.6vw,26px);margin:clamp(20px,4svh,34px) 0 0;}
  .lp-hero__lead{font-size:clamp(11px,3.1vw,13px);margin:14px 0 0;}
}

/* 広い画面。人物が右にいるので、文字は左の空きに置く。 */
@media(min-width:901px){
  /* 画面の高さに収める。引くのは下に貼りついた CTA の高さ。
     横長なので幅が基準になり、はみ出るのは上下。
     均等に切ると頭頂部が落ちるので、上を多めに残す。 */
  .lp-hero__bg{max-height:calc(100svh - 84px);object-position:center 22%;}
  .lp-hero__copy{position:absolute;top:50%;left:clamp(48px,8vw,140px);transform:translateY(-50%);
    max-width:min(46%,520px);}
  .lp-hero__mark{font-size:clamp(72px,8.5vw,132px);}
  .lp-hero__name{font-size:clamp(22px,2.2vw,34px);}
  .lp-hero__catch{font-size:clamp(26px,2.6vw,40px);margin:clamp(28px,4vh,56px) 0 0;}
  .lp-hero__lead{font-size:clamp(14px,1.15vw,18px);margin:22px 0 0;}
}
/* 縦に余裕のない画面では文字を詰めて、絵と重ならないようにする */
@media(min-width:901px) and (max-height:760px){
  .lp-hero__catch{margin-top:24px;}
  .lp-hero__lead{margin-top:14px;}
}
.page-hero__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;max-width:740px;margin:0;}
/* アイキャッチは 4:3 で用意してある。帯に切ると絵の意図が崩れるので比率をそのまま使う。
   ただし全幅だと縦に伸びすぎてファーストビューが埋まるため、高さに上限を置く。 */
.page-hero__media{margin-top:56px;aspect-ratio:4/3;max-height:620px;border-radius:24px;overflow:hidden;}

/* Prose（リッチ本文・記事本文） */
.prose{font-family:var(--font-jp);font-size:var(--fs-base);line-height:1.95;letter-spacing:.06em;max-width:720px;color:var(--color-ink);}
.prose>*:first-child{margin-top:0;}
.prose>*+*{margin-top:1.5em;}
.prose h2{font-size:20px;font-weight:700;line-height:1.5;margin:2.4em 0 .2em;}
.prose h3{font-size:var(--fs-base);font-weight:700;margin:2em 0 0;}
.prose img{border-radius:8px;}
.prose ul,.prose ol{padding-left:1.4em;}
.prose li+li{margin-top:.4em;}
.prose blockquote{border-left:2px solid var(--color-ink);padding-left:16px;color:var(--color-muted);margin:0;}

/* Feature（事業の特徴3〜4枠） */
.feature__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;}
.feature__no{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.18em;color:var(--color-accent);margin:0 0 12px;}
.feature__title{font-family:var(--font-jp);font-size:18px;font-weight:500;margin:0 0 10px;letter-spacing:.04em;}
.feature__desc{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;color:var(--color-muted);margin:0;}
@media(max-width:880px){.feature__list{grid-template-columns:1fr;gap:28px;}}

/* Flow（流れ・ステップ） */
.flow{list-style:none;padding:0;margin:0;}
.flow__item{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-top:1px solid rgba(51,48,46,.12);}
.flow__item:last-child{border-bottom:1px solid rgba(51,48,46,.12);}
.flow__num{font-family:var(--font-en);font-size:30px;font-weight:300;color:var(--color-muted);line-height:1;}
.flow__title{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;margin:0 0 6px;letter-spacing:.04em;}
.flow__desc{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.8;color:var(--color-muted);margin:0;}

/* Spec / info テーブル（会社概要・受講概要） */
/* 会社概要の表の前に置く一文。事業紹介のリード文と同じ扱いにそろえる */
.company__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;max-width:720px;margin:-24px 0 56px;}
.spec-table{width:100%;border-collapse:collapse;max-width:760px;margin:0;}
/* 節の中で他の要素と幅を揃えたいとき（法人向けの料金表など） */
.spec-table--wide{max-width:880px;}
.spec-table th,.spec-table td{border-bottom:1px solid rgba(51,48,46,.12);padding:18px 12px;text-align:left;font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.8;vertical-align:top;}
.spec-table th{width:160px;font-weight:400;letter-spacing:.14em;color:var(--color-muted);}
/* 値に添える補足（受講料の別途費用、カリキュラムのテーマなど） */
.spec-table__note{display:block;font-size:var(--fs-sm);line-height:1.8;letter-spacing:.06em;color:var(--color-muted);margin-top:6px;}

/* カリキュラムのように行数が多く、見出しが番号だけで済む表。
   th を 160px のまま出すとスマホで本文に 140px しか残らず、
   全 6 行が 4 行ずつに折れて縦に伸びるため、番号列を細くして本文に幅を渡す。 */
@media(max-width:600px){
  .spec-table--steps th{width:2.2em;padding:14px 10px 14px 0;text-align:center;letter-spacing:0;}
  .spec-table--steps td{padding:14px 0;}
  /* 列が細いので「回目」は落とす。番号だけで何回目かは読める */
  .spec-table--steps .spec-table__unit{display:none;}
}

/* 見出しの直下に置くリード文 */
.section__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;max-width:760px;margin:-24px 0 40px;}

/* 表と写真を左右に並べる ----------------------------------
   表は 760px で頭打ちになるため、広い画面では右側が丸ごと空いていた。
   そこに写真を置いて、条件を読みながら場の空気も伝わるようにする。
   狭い画面では縦に積む。写真は表のあとに回る。 */
.section__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(40px,5vw,72px);align-items:start;}
/* 並べたときは列いっぱいまで使わせる（単独で置くときの 760px 制限を外す） */
.section__split .spec-table{max-width:none;}
/* 写真の置き方。
   ポスターの内側には金の細罫が一本引かれていて、それがこのブランドの
   目印になっている。同じ罫を写真の後ろに少しずらして重ね、
   貼っただけに見えないようにする。罫は絵ではないので読み上げには出さない。 */
.section__media{margin:0;position:relative;}
.section__media::before{content:"";position:absolute;inset:0;pointer-events:none;
  transform:translate(20px,-20px);
  border:1px solid rgba(176,122,78,.42);border-radius:16px;}
.section__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;position:relative;}
/* 写真がまだ無い枠。どこに何が入るかだけ見せる */
.section__media--empty .ph{aspect-ratio:4/3;border-radius:16px;position:relative;}
/* 左が長い節では、読み進めるあいだ写真が付いてくるようにする */
.section__media--sticky{position:sticky;top:56px;}

/* 節と節のあいだに挟む写真の帯 ----------------------------
   画面の端まで使い、2 枚を隙間なく並べる。
   高さは画面幅に合わせて伸ばすが、伸びすぎると帯ではなくなるので上限を置く。 */
.lp-band{display:grid;grid-template-columns:repeat(3,1fr);}
.lp-band__item{margin:0;height:clamp(200px,22vw,400px);overflow:hidden;}
.lp-band__item img{width:100%;height:100%;object-fit:cover;}
.lp-band__item .ph{height:100%;}
@media(max-width:640px){
  /* 3 枚を並べると 1 枚が細くなるので、高さも詰めて正方形に近づける。
     縦長のまま小さくすると、何が写っているのか分からなくなる。 */
  .lp-band__item{height:34vw;}
}

/* 高さをずらして置く 2 枚組（動画＋写真）------------------
   帯は 3 枚をきっちり並べるので、こちらは段差と間で見せて、
   同じ見せ方が二度続かないようにする。真ん中の 1fr が 2 枚のあいだの空きになる。

   広い画面では条件の表と左右に並ぶ（.course-body）。
   2 枚のあいだは詰める。離すと段差で見せているつもりが、
   ただ別々に置いてあるように見えるため。
   枠の中では右へ寄せ、1 列目の 1fr が余りになる。

   1 枚は細長く切る。絵の中身は人と手元なので縦に見れば足り、
   横に広いと表の隣で重くなる。切るのは左右で、中央は残る。 */
.lp-duo{display:grid;grid-template-columns:1fr minmax(0,38%) 6% minmax(0,38%);
  align-items:start;}
.lp-duo__item{margin:0;min-width:0;}
/* 段差。左を下げることで、並んでいるのに揃っていない状態を作る */
.lp-duo__item--lead{grid-column:2;margin-top:clamp(40px,5vw,88px);}
.lp-duo__item--trail{grid-column:4;}

/* 受講概要。広い画面では表と絵を左右に並べる。
   表は 760px で頭打ちになるので、そのままだと右がずっと空いたままになる。 */
.course-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:clamp(32px,4vw,72px);align-items:start;}
.course-body .spec-table{max-width:none;}
.lp-duo__item img,.lp-duo__item .ph,.lp-duo__item video{width:100%;height:auto;
  aspect-ratio:5/8;object-fit:cover;display:block;}
/* 打ち消す幅は節の余白と同じ。節が変わったらここも合わせる */
@media(max-width:1080px){
  /* 横に並べると表も絵も狭くなりすぎるので、絵を表の下に回す。
     節の右余白を打ち消して、右端は画面の端まで抜く。 */
  .course-body{grid-template-columns:1fr;gap:clamp(40px,6vw,64px);}
  .lp-duo{width:calc(100% + 40px);margin-right:-40px;}
  .lp-duo__item--lead{margin-top:clamp(40px,7vw,88px);}
}
@media(max-width:768px){
  .lp-duo{width:calc(100% + 20px);margin-right:-20px;}
  .lp-duo__item--lead{margin-top:48px;}
}

@media(max-width:1080px){
  .section__split{grid-template-columns:1fr;gap:40px;}
  /* 縦に積むと 3:4 では高くなりすぎるので、帯に切る */
  .section__media img,.section__media--empty .ph{aspect-ratio:4/3;max-height:420px;}
}

/* 受講スタイル ------------------------------------------- */
/* 3 枚はいつも同じ高さにする。開いても閉じても、一番高いカードに揃う。

   さらに subgrid で行そのものを 3 枚で共有する。こうしないと、説明文の行数や
   バッジの有無でカードごとに位置がずれ、区切り線の高さが揃わない。
   行は上から 見出しの塊／選ぶ理由／詳細／金額／ボタン の 5 つ。
   見出しの中（番号・名前・サブ・説明）は 1 行ずつ揃えない。揃えると、
   サブや「おすすめ」が無いカードに空行ができて間延びするため。
   2 行目（選ぶ理由）を 1fr にして余った高さを吸収し、金額とボタンを下端に押し下げる。 */
.styles__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;
  grid-template-rows:auto 1fr auto auto auto;}
/* 中身は中央に寄せる。3 枚を見比べるとき、視線が縦に落ちるようにするため。
   行は親から受け継ぐ（subgrid）ので、3 枚で同じ位置に同じものが並ぶ。 */
.styles__item{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:center;text-align:center;min-width:0;
  background:var(--color-white);border:1px solid rgba(51,48,46,.14);border-radius:16px;
  padding:34px 26px 26px;position:relative;}
.main>.section:nth-of-type(even) .styles__item{background:var(--color-cream);}
.styles__item--recommended{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent);}
/* おすすめの札。カードの角に添える */
.styles__ribbon{position:absolute;top:18px;left:22px;margin:0;
  font-family:var(--font-en);font-style:italic;font-size:13px;letter-spacing:.04em;color:var(--color-accent);}
.styles__no{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 14px;
  border-radius:50%;background:rgba(51,48,46,.06);
  font-family:var(--font-en);font-size:19px;letter-spacing:.02em;color:var(--color-muted);}
.styles__item--recommended .styles__no{background:rgba(176,122,78,.14);color:var(--color-accent);}
.styles__name{font-family:var(--font-jp);font-size:21px;font-weight:500;letter-spacing:.06em;line-height:1.5;margin:0;}
/* 見出しの塊。中身は上から詰める（間に空行を作らない） */
.styles__head{display:flex;flex-direction:column;align-items:center;width:100%;}
.styles__sub{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.08em;color:var(--color-muted);margin:2px 0 0;}
.styles__badge{font-family:var(--font-jp);font-size:12px;font-weight:500;letter-spacing:.12em;
  background:var(--color-accent);color:var(--color-white);padding:5px 20px;border-radius:999px;margin:12px 0 0;}
.styles__desc{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;margin:14px 0 0;width:100%;}
/* 選ぶ理由。ここだけ左揃えに戻す（行頭が揃っていないと読みにくい） */
.styles__points{list-style:none;padding:0;margin:22px 0 0;text-align:left;width:100%;
  padding-top:20px;border-top:1px solid rgba(51,48,46,.12);}
.styles__points li{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.85;letter-spacing:.04em;padding-left:1.5em;position:relative;}
.styles__points li+li{margin-top:8px;}
.styles__points li::before{content:"✓";position:absolute;left:0;color:var(--color-accent);font-size:12px;}
.styles__points--plain{border-top:0;padding-top:0;margin-top:10px;}
.styles__points--plain li::before{content:"・";color:var(--color-muted);}
/* 行はいちばん高いカードに合わせて揃う。3 枚で金額の位置が同じ高さになる */
.styles__fee{padding-top:26px;width:100%;}
.styles__fee-label{font-family:var(--font-jp);font-size:11px;letter-spacing:.14em;color:var(--color-muted);margin:0 0 4px;}
.styles__fee-value{font-family:var(--font-en);font-size:32px;font-weight:400;line-height:1.2;letter-spacing:.02em;margin:0;}
.styles__item--recommended .styles__fee-value{color:var(--color-accent);}
.styles__fee-note{font-family:var(--font-jp);font-size:12px;line-height:1.7;letter-spacing:.04em;color:var(--color-muted);margin:8px 0 0;}
/* 満席のように見落とされると困る補足。彩度は抑えて、地の色から浮かせすぎない */
.styles__fee-note--alert{color:#B4453C;}

/* 開閉ボタンはカードの一番下。中身は金額の上に出す */
.styles__foot-row{width:100%;}
.styles__more-open{cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-family:var(--font-jp);font-size:12px;letter-spacing:.12em;color:var(--color-muted);
  background:none;padding:8px 18px;border:1px solid rgba(51,48,46,.2);border-radius:999px;}
.styles__more-open::after{content:"＋";font-size:11px;}
.styles__more-open[aria-expanded="true"]::after{content:"－";}
.styles__more-body{width:100%;text-align:left;margin-top:18px;padding-top:18px;border-top:1px solid rgba(51,48,46,.12);}
.styles__group-title{font-family:var(--font-jp);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--color-muted);margin:0 0 8px;}
.styles__note{font-family:var(--font-jp);font-size:12px;line-height:1.8;letter-spacing:.04em;color:var(--color-muted);background:rgba(51,48,46,.04);border-radius:8px;padding:14px 16px;margin:18px 0 0;}
.styles__foot{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;color:var(--color-muted);max-width:900px;margin:40px 0 0;}
/* 狭い画面では縦に積まず、横へスクロールさせる。
   3 つは選ぶために見比べるものなので、縦に並べると比較にならない。
   1 枚が画面いっぱいにならない幅にして、隣があることを見せる。 */
@media(max-width:1080px){
  /* flex にすると subgrid が効かず、カードごとに区切り線の位置がずれる。
     grid のまま横へ流す（grid-auto-flow:column）ことで、
     広い画面と同じように 3 枚で行を共有できる。 */
  .styles__list{grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:clamp(260px,78vw,340px);gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    /* カードの影とバッジが切れないように、内側で余白を取る */
    padding:14px 20px;margin:-14px -20px;}
  .styles__list::-webkit-scrollbar{display:none;}
  .styles__item{scroll-snap-align:center;}
}

/* 法人向け研修 ------------------------------------------- */
.corp-subhead{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;letter-spacing:.12em;margin:56px 0 20px;}
.corp-effects{list-style:none;padding:0;margin:0;max-width:760px;}
.corp-effects li{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;padding-left:1.5em;position:relative;}
.corp-effects li::before{content:"✓";position:absolute;left:0;color:var(--color-accent);}
/* プログラムの特徴。表に入る前に「何が違うのか」を 4 枚で見せる。 */
.corp-features{list-style:none;padding:0;margin:0 0 48px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(51,48,46,.12);
  border:1px solid rgba(51,48,46,.12);max-width:960px;}
/* 概要（表＋特徴）を写真と並べたとき。表のすぐ下に特徴が続く。
   写真のぶん幅が狭いので、4 枚を横一列にすると見出しが単語の途中で折れる。
   2 列 2 行に固定して、1 枚ずつ読める幅を確保する。 */
.corp-overview .corp-features{margin:40px 0 0;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:520px){
  .corp-overview .corp-features{grid-template-columns:1fr;}
}
.corp-features li{background:var(--color-white);padding:24px 22px;}
.corp-features b{display:block;font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.1em;line-height:1.7;}
.corp-features span{display:block;font-family:var(--font-jp);font-size:var(--fs-sm);
  line-height:1.9;letter-spacing:.06em;color:var(--color-muted);margin-top:8px;}
/* カリキュラムの「内容（例）」。テーマより一段落として読ませる。 */
.corp-curriculum__body{margin-top:6px;opacity:.85;}

/* カリキュラムの全 6 回 --------------------------------------
   表で組むと 6 行が同じ重さで並ぶだけになる。研修は順を追って進むものなので、
   縦に積んで番号を線でつなぎ、始まりと終わりが見えるようにする。

   線は番号の中心を通す。番号は地色で塗って線を分断し、玉のように見せる
   （最後の 1 件だけ線を出さない）。 */
.corp-steps{list-style:none;padding:0;margin:0;max-width:880px;}
.corp-steps__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,36px);padding-bottom:40px;}
.corp-steps__item:last-child{padding-bottom:0;}
/* 番号と番号をつなぐ線。番号の中心（幅 44px の半分）に合わせる */
.corp-steps__item::before{content:"";position:absolute;left:21px;top:44px;bottom:0;
  width:1px;background:rgba(176,122,78,.3);}
.corp-steps__item:last-child::before{display:none;}
.corp-steps__no{position:relative;z-index:1;width:44px;height:44px;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-size:19px;letter-spacing:.08em;
  color:var(--color-accent);background:var(--color-cream);
  border:1px solid rgba(176,122,78,.42);border-radius:999px;}
.main>.section:nth-of-type(even) .corp-steps__no{background:var(--color-white);}
.corp-steps__body{padding-top:8px;}
.corp-steps__theme{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;
  letter-spacing:.1em;line-height:1.7;margin:0;}
.corp-steps__form{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.08em;
  line-height:1.8;color:var(--color-accent);margin:6px 0 0;}
.corp-steps__detail{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;
  letter-spacing:.06em;color:var(--color-muted);margin:10px 0 0;}

@media(max-width:600px){
  .corp-steps__item{gap:16px;padding-bottom:32px;}
  .corp-steps__no{width:36px;height:36px;font-size:var(--fs-sm);}
  .corp-steps__item::before{left:17px;top:36px;}
}

/* 研修で得られる効果 ----------------------------------------
   導入するかどうかを決める話なので、箇条書きのまま小さく流さず、
   本文と同じ大きさで 2 列に流す。

   グリッドで枠を組むと、件数が列数の倍数でないときに空のマスが残る
   （5 件・3 列で 1 マス空いた）。columns なら余りが出ないので、
   箱を持たせず文字の塊として見せる。すぐ上の「特徴」が箱なので、
   同じ見せ方が続かないという意味でも都合がいい。 */
.corp-outcomes{list-style:none;padding:0;margin:0;max-width:880px;
  columns:2;column-gap:clamp(32px,4vw,64px);}
.corp-outcomes li{break-inside:avoid;-webkit-column-break-inside:avoid;
  font-family:var(--font-jp);font-size:var(--fs-base);line-height:1.8;letter-spacing:.08em;
  padding-left:1.7em;position:relative;margin:0 0 20px;}
.corp-outcomes li::before{content:"✓";position:absolute;left:0;color:var(--color-accent);}
@media(max-width:600px){
  .corp-outcomes{columns:1;}
}

/* 研修管理項目。
   助成金の申請で記録が要るときに確認するもの。必要な人だけが見ればいいので、
   効果より一段落として横に流す。 */
.corp-admin{max-width:880px;margin:56px 0 0;}
.corp-admin__title{font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.12em;color:var(--color-muted);margin:0 0 16px;}
.corp-admin__list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 10px;}
.corp-admin__list li{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.7;
  letter-spacing:.06em;color:var(--color-muted);
  border:1px solid rgba(51,48,46,.16);border-radius:999px;padding:6px 16px;}

/* 提供状況。まだ受け付けていないことを、読み始める前に伝える。 */
.corp-status{display:inline-block;font-family:var(--font-jp);font-size:var(--fs-sm);
  line-height:1.7;letter-spacing:.1em;color:var(--color-accent);
  border:1px solid var(--color-accent);border-radius:999px;padding:7px 18px;margin:0 0 32px;}
@media(max-width:600px){
  /* 狭い画面では文が 2 行に折れる。丸のままだと角が間延びして形が崩れるので、
     行数が変わっても保つ角丸にする。 */
  .corp-status{border-radius:14px;padding:10px 16px;letter-spacing:.06em;}
}

/* これまでの技術講習の実績。
   法人研修の実績はまだ無いので、この 1 行がページで唯一の裏付けになる。
   本文に埋もれないよう左に金の縦罫を引くが、囲みにはしない
   （囲むと「宣伝」に見え、事実の記述として読まれなくなる）。 */
.corp-proof{font-family:var(--font-jp);font-size:var(--fs-base);line-height:1.9;
  letter-spacing:.08em;max-width:880px;margin:0 0 40px;
  padding-left:20px;border-left:2px solid var(--color-accent);}

.corp-note{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;color:var(--color-muted);max-width:760px;margin:48px 0 0;}
/* 表のすぐ下に添える補足。表と幅を合わせる */
.corp-note--tight{margin-top:20px;max-width:880px;}

/* 助成金・補助金。
   対象になるかは企業ごとに変わり、こちらでは判断できない。
   読み飛ばされる注釈にはせず、枠で囲って本文と同じ大きさで読ませる。 */
.corp-subsidy{max-width:880px;margin:56px 0 0;padding:32px 32px 28px;
  background:var(--color-white);border:1px solid rgba(51,48,46,.12);border-left:3px solid var(--color-accent);}
.main>.section:nth-of-type(even) .corp-subsidy{background:var(--color-cream);}
.corp-subsidy__title{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;letter-spacing:.12em;margin:0 0 20px;}
.corp-subsidy__list{list-style:none;padding:0;margin:0;}
.corp-subsidy__list li{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;
  padding-left:1.2em;position:relative;}
.corp-subsidy__list li+li{margin-top:10px;}
.corp-subsidy__list li::before{content:"−";position:absolute;left:0;color:var(--color-accent);}
.corp-subsidy__note{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;
  color:var(--color-muted);margin:20px 0 0;}

@media (max-width:600px){
  .corp-subsidy{padding:24px 20px 20px;}
}

/* サロンのメニュー ----------------------------------------
   料金が決まっていないので、いまは名前と説明だけ。
   金額が入るようになっても行が増えるだけで済むよう、罫線で区切った縦並びにしてある。 */
.shop-menu{list-style:none;padding:0;margin:0;max-width:880px;
  border-top:1px solid rgba(51,48,46,.12);}
.shop-menu li{padding:28px 0;border-bottom:1px solid rgba(51,48,46,.12);}
.shop-menu__name{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;
  letter-spacing:.1em;line-height:1.7;margin:0;}
.shop-menu__desc{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;
  letter-spacing:.06em;color:var(--color-muted);margin:8px 0 0;}

/* 地図。写真の枠と同じ角丸に収めるだけにする。
   写真には金の細罫をずらして重ねているが、地図には付けない。
   中身が動く UI なので、枠が斜めにずれているとただの位置ずれに見える。 */
.shop-map{margin:0;}
.shop-map iframe{width:100%;height:100%;min-height:320px;aspect-ratio:4/3;
  border:0;border-radius:16px;display:block;}

/* 予約ボタンの下に添える一言 */
.cta-band__note{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.8;
  letter-spacing:.06em;color:var(--color-muted);margin:20px 0 0;}

/* 受講者の声 --------------------------------------------
   誰の発言かは出さないので、名前や肩書きを置く欄は作らない。
   2 列で読み進められるだけの、引用符ひとつの控えめな作りにしてある。 */
.voices__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.voices__item{position:relative;background:var(--color-white);border:1px solid rgba(51,48,46,.12);border-radius:16px;padding:36px 32px 32px;font-family:var(--font-jp);font-size:var(--fs-sm);line-height:2;letter-spacing:.06em;}
/* セクションの地色と反転させる（styles__item と同じ扱い） */
.main>.section:nth-of-type(even) .voices__item{background:var(--color-cream);}
.voices__item::before{content:"“";position:absolute;top:14px;left:26px;font-family:var(--font-en);font-size:42px;line-height:1;color:var(--color-accent);opacity:.5;}
.voices__note{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--color-muted);margin:32px 0 0;}
@media(max-width:880px){
  .voices__list{grid-template-columns:1fr;gap:16px;}
  .voices__item{padding:32px 24px 28px;}
}

/* 受講を終えた方との集合写真を流す帯
   下の感想の帯と上下で対になる。あちらは左へ、こちらは右へ流して、
   同じ動きが二度続かないようにする。作りは感想の帯と同じ。

   1 枚ずつ見せるものではなく、数がそのまま中身なので、
   感想の帯と同じく手では止められない。 */
.lp-marquee{margin:0 0 clamp(48px,6vw,80px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
/* 左へ 1 セット分ずらした状態から 0 へ戻すことで、絵は右へ流れる。
   ずらす量に gap の半分を足すのは感想の帯と同じ理由。 */
.lp-marquee__track{display:flex;gap:16px;width:max-content;
  animation:lesson-flow 120s linear infinite;}
@keyframes lesson-flow{
  from{transform:translateX(calc(-50% - 8px));}
  to{transform:translateX(0);}
}
/* 1 枚あたりは小さく。読ませるものではなく、並んでいる数が中身なので、
   一度に見える枚数が多いほうが伝わる。 */
.lp-marquee__item{margin:0;flex:0 0 auto;width:clamp(104px,11vw,168px);
  aspect-ratio:3/4;overflow:hidden;border-radius:10px;background:var(--color-beige);}
.lp-marquee__item img{width:100%;height:100%;object-fit:cover;}

/* いただいた感想を流す帯
   section__inner の外に置いて、画面の端まで使う。

   手では止められない。読ませるための帯ではなく「これだけある」と伝えるための帯なので、
   触れるかどうかより、いつ見ても同じ速さで流れ続けていることを取る。 */
.voices-marquee{margin-top:64px;overflow:hidden;
  /* 左右の端で切れて見えないよう、フェードで消す */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
/* 同じ並びを 2 セット出してあるので、1 セット分ずらした時点で先頭に戻せば継ぎ目が見えない。
   ずらす量はトラックの半分では足りない。セットとセットのあいだにも gap があり、
   半分だと gap の半分（10px）ぶん手前で戻ってしまうため。 */
.voices-marquee__track{display:flex;gap:20px;width:max-content;
  animation:voices-flow 150s linear infinite;}
@keyframes voices-flow{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 10px));}
}
.voices-marquee__item{margin:0;flex:0 0 auto;width:260px;height:420px;overflow:hidden;
  border:1px solid rgba(51,48,46,.12);border-radius:12px;background:var(--color-white);position:relative;}
/* 縦の長さがまちまちなので、頭を揃えて下は切る */
.voices-marquee__item img{display:block;width:100%;height:auto;}
/* 切れた下端をぼかして、途中で断ち切られた感じを和らげる */
.voices-marquee__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95));}
@media(max-width:768px){
  .voices-marquee{margin-top:48px;}
  .voices-marquee__item{width:210px;height:340px;}
}
/* 視差効果を減らす設定の人にだけは止める。
   端末側で「動きを減らす」を選んでいる人には、動き続ける帯そのものが負担になるため。 */
@media(prefers-reduced-motion:reduce){.voices-marquee__track,.lp-marquee__track{animation:none;}}

/* CTA band（下層ページ末尾の誘導） */
.cta-band{background:var(--color-ink);color:var(--color-cream);border-radius:24px;padding:64px 40px;text-align:center;}
.cta-band__en{font-family:var(--font-en);font-size:clamp(30px,4vw,44px);font-weight:400;margin:0 0 16px;}
.cta-band__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:1.8;margin:0 0 32px;color:rgba(251,249,245,.8);}
.cta-band__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta-band .btn--ghost{color:var(--color-cream);border-color:rgba(251,249,245,.6);}
.cta-band .btn--solid{background:var(--color-cream);color:var(--color-ink);border-color:var(--color-cream);}

/* 事業ページ（LP）の、画面下に貼りつく CTA
   ヘッダーを出さないので、常設の入り口はこれだけになる。 */
.lp-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;justify-content:center;
  padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(251,249,245,.94);backdrop-filter:blur(10px);
  border-top:1px solid rgba(51,48,46,.12);}
.lp-cta__btn{width:100%;max-width:420px;justify-content:center;}
/* 固定バーがフッターの終わりを隠さないよう、その分だけ下に余白を足す */
body.single-vivia_business{padding-bottom:84px;}
@media(max-width:768px){
  .lp-cta{padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  body.single-vivia_business{padding-bottom:78px;}
}

/* お問い合わせフォーム */
.form{max-width:640px;margin:0 auto;}
.form__row{margin-bottom:26px;}
.form__label{display:block;font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.12em;margin-bottom:10px;}
.form__label .req{color:var(--color-accent);margin-left:8px;font-size:12px;letter-spacing:.1em;}
.form__control{width:100%;font-family:var(--font-jp);font-size:var(--fs-base);padding:14px 16px;border:1px solid rgba(51,48,46,.2);border-radius:8px;background:var(--color-white);color:var(--color-ink);letter-spacing:.04em;}
.form__control:focus{outline:none;border-color:var(--color-ink);}
textarea.form__control{min-height:160px;resize:vertical;}
.form__note{font-family:var(--font-jp);font-size:12px;line-height:1.7;color:var(--color-muted);margin:8px 0 0;}
.form__actions{text-align:center;margin-top:36px;}

/* Article（ブログ記事個別） */
.article__head{max-width:720px;margin:0 auto 36px;}
.article__meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.article__title{font-family:var(--font-jp);font-size:26px;font-weight:500;line-height:1.6;letter-spacing:.04em;margin:0;}
.article__thumb{max-width:880px;margin:0 auto 48px;aspect-ratio:16/8;border-radius:16px;overflow:hidden;}
.article__body{margin:0 auto;}
.article__nav{max-width:720px;margin:72px auto 0;}
.article__back{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.18em;}

/* Footer ------------------------------------------------- */
.site-footer{background:var(--color-ink);color:var(--color-cream);padding:80px 32px 36px;}
.site-footer__inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;}
.site-footer__brand{font-family:var(--font-en);font-size:30px;letter-spacing:.18em;}
.site-footer__brand small{display:block;font-family:var(--font-jp);font-size:11px;letter-spacing:.24em;color:rgba(251,249,245,.6);margin-top:6px;}
.site-footer__nav{list-style:none;display:flex;flex-wrap:wrap;gap:24px;padding:0;margin:0;}
.site-footer__nav a{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.12em;color:var(--color-cream);}
.site-footer__copy{font-family:var(--font-en);font-size:11px;letter-spacing:.16em;margin:0;color:rgba(251,249,245,.6);}

/* Q&A ---------------------------------------------------- */
.faq__list{list-style:none;padding:0;margin:0 0 56px;max-width:900px;border-top:1px solid rgba(51,48,46,.14);}
/* 下の 56px は後ろに続く一文（faq__note）との間隔。トップのように何も続かないときは要らない */
.faq__list:last-child{margin-bottom:0;}
.faq__item{border-bottom:1px solid rgba(51,48,46,.14);}
/* アンカーで飛んだとき、追従ヘッダーの下に質問が隠れないよう余白を取る。
   ログイン中は上に管理バーが乗るぶん、さらに下げる。 */
#qa,#faq,#styles,#course,#corporate,.faq__item{scroll-margin-top:140px;}
body.admin-bar #qa,body.admin-bar #faq,body.admin-bar #styles,body.admin-bar #course,body.admin-bar #corporate,body.admin-bar .faq__item{scroll-margin-top:172px;}
.faq__item summary{list-style:none;cursor:pointer;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__q{display:flex;align-items:flex-start;gap:16px;font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;line-height:1.7;letter-spacing:.04em;padding:26px 0;}
.faq__q::before{content:"Q";font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.1em;color:var(--color-accent);line-height:1.9;}
.faq__q::after{content:"+";margin-left:auto;font-family:var(--font-en);font-size:20px;line-height:1.4;color:var(--color-muted);transition:transform .3s ease;}
.faq__item details[open] .faq__q::after{transform:rotate(45deg);}
.faq__a{display:flex;gap:16px;padding:0 0 26px;}
.faq__a-body{flex:1;min-width:0;}
.faq__a-body p+p{margin-top:1em;}
.faq__a::before{content:"A";font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.1em;color:var(--color-muted);line-height:1.9;}
.faq__a p{font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.9;letter-spacing:.06em;color:var(--color-muted);margin:0;}
/* faq__list は下に 56px の余白を持っているので、この一文の上には足さない */
.faq__note{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--color-muted);margin:0;}

/* Newsletter signup -------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.signup{margin:56px auto 0;max-width:560px;}
.signup__label{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.08em;color:var(--color-muted);margin:0 0 16px;}
.signup__row{display:flex;gap:12px;}
.signup__input{flex:1;min-width:0;font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.06em;padding:16px 22px;border:1px solid rgba(51,48,46,.28);border-radius:999px;background:var(--color-white);color:var(--color-ink);}
.signup__input::placeholder{color:rgba(51,48,46,.4);}
.signup__input:focus{outline:none;border-color:var(--color-ink);}
.signup__submit{white-space:nowrap;padding:16px 28px;cursor:pointer;}
.signup__note{font-family:var(--font-jp);font-size:11px;letter-spacing:.06em;color:var(--color-muted);margin:14px 0 0;}
@media(max-width:560px){.signup__row{flex-direction:column;}.signup__submit{justify-content:center;}}

/* Salons list -------------------------------------------- */
.salons__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.08em;margin:-24px 0 48px;max-width:760px;}
.salons__area{margin-bottom:48px;}
.salons__area-name{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;letter-spacing:.16em;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(51,48,46,.2);max-width:900px;}
.salons__table{max-width:900px;}
.salons__table thead th{width:auto;font-family:var(--font-jp);font-size:11px;letter-spacing:.16em;color:var(--color-muted);font-weight:400;text-align:left;padding:0 12px 8px;border-bottom:1px solid rgba(51,48,46,.12);}
.salons__table tbody td:last-child{width:120px;}
.salons__note{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--color-muted);margin:0;}

/* モバイルメニュー（WordPress 版で追加） -------------------
   モックにはメニューボタンが無く、920px 以下でナビゲーションが
   丸ごと消えていた。オーナーはモバイルで見ているため必須。
   -------------------------------------------------------- */
.site-header__menu-toggle{display:none;background:transparent;color:var(--color-ink);border:1px solid var(--color-ink);border-radius:999px;width:44px;height:44px;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;position:relative;z-index:101;-webkit-tap-highlight-color:transparent;}
.site-header__menu-toggle:focus-visible{box-shadow:0 0 0 2px var(--color-cream),0 0 0 3px var(--color-ink);outline:none;}
.site-header__menu-bar{display:block;width:16px;height:1px;background:var(--color-ink);transition:transform .25s ease;transform-origin:center;}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(1){transform:translateY(3px) rotate(45deg);}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-bar:nth-child(2){transform:translateY(-3px) rotate(-45deg);}

.site-menu{position:fixed;inset:0;background:var(--color-cream);z-index:99;display:flex;align-items:center;justify-content:center;overflow-y:auto;}
.site-menu[hidden]{display:none;}
.site-menu__list{list-style:none;margin:0;padding:40px 20px;text-align:center;}
.site-menu__list li{margin-bottom:28px;}
.site-menu__list li:last-child{margin-bottom:0;}
.site-menu__list a{font-family:var(--font-en);font-size:34px;font-weight:400;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:6px;}
.site-menu__list a span{font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.16em;color:var(--color-muted);}

@media(max-width:920px){
  .site-header__menu-toggle{display:inline-flex;}
  .site-header__cta{display:none;}
  .site-header__nav{gap:16px;}
}
@media(max-width:560px){
  .site-menu__list a{font-size:28px;}
  .site-menu__list li{margin-bottom:22px;}
}

/* お問い合わせフォーム（WordPress 版で追加） --------------- */
/* ハニーポット。人には見せず、bot にだけ埋めさせる */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__notice{max-width:640px;margin:0 auto 36px;padding:20px 24px;border-radius:8px;font-family:var(--font-jp);font-size:var(--fs-sm);line-height:1.8;letter-spacing:.06em;}
.form__notice p{margin:0;}
.form__notice--ok{background:rgba(176,122,78,.08);border:1px solid rgba(176,122,78,.3);}
.form__notice--ng{background:rgba(51,48,46,.05);border:1px solid rgba(51,48,46,.2);}
.form textarea.form__control{min-height:180px;resize:vertical;}
.form select.form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-muted) 50%),linear-gradient(135deg,var(--color-muted) 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;}

/* WordPress 用の追加 --------------------------------------
   モックは全ての画像枠がプレースホルダ (.ph) だったため、
   実画像を入れたときに枠いっぱいに収まるルールが無かった。
   -------------------------------------------------------- */
.hero__media img,
.message__portrait img,
.philosophy__media img,
.biz__media img,
.blog__media img,
.page-hero__media img,
.article__media img{width:100%;height:100%;object-fit:cover;}
.article__media{aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:0 0 28px;}

/* 投稿本文（エディタで書いた内容） */
.prose h2{font-family:var(--font-jp);font-size:var(--fs-xl);font-weight:500;line-height:1.6;letter-spacing:.04em;margin:48px 0 20px;}
.prose h3{font-family:var(--font-jp);font-size:var(--fs-base);font-weight:500;line-height:1.7;letter-spacing:.04em;margin:36px 0 14px;}
.prose ul,.prose ol{margin:0 0 24px;padding-left:1.4em;}
.prose li{font-family:var(--font-jp);font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:.06em;margin-bottom:8px;}
.prose img{border-radius:16px;margin:28px 0;}
.prose a{text-decoration:underline;text-underline-offset:.2em;}

/* ページネーション */
.pagination{display:flex;justify-content:center;gap:14px;margin-top:56px;}
.pagination .page-numbers{font-family:var(--font-en);font-size:var(--fs-sm);letter-spacing:.12em;padding:10px 16px;border:1px solid rgba(51,48,46,.2);border-radius:999px;}
.pagination .page-numbers.current{background:var(--color-ink);color:var(--color-cream);border-color:var(--color-ink);}

/* Reveal ------------------------------------------------- */
/* セクションの枠自体は動かさない。中身を 1 つずつ出す (assets/site.js) */
.reveal{opacity:1;transform:none;}
.reveal-item{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms);}
.reveal-item.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-item{opacity:1;transform:none;transition:none;}}

/* Responsive --------------------------------------------- */
@media(max-width:1080px){
  .section{padding:100px 40px;}
  .section--tight{padding:80px 40px;}
  .hero__intro{padding:0 40px;}
  .hero__media{margin-left:40px;width:calc(100% - 40px);}
  .page-hero{padding:56px 40px 0;}
}
@media(max-width:768px){
  .section{padding:80px 20px;}
  .section--tight{padding:64px 20px;}
  .section__head{margin-bottom:40px;}
  .section__head-en{font-size:32px;}
  /* 28px の日本語は 390px 幅だと 1 行 10 文字ほどにしかならず読みづらい */
  .philosophy__lead{font-size:20px;line-height:1.9;margin-bottom:36px;}
  .message__intro{font-size:20px;line-height:1.9;margin-bottom:24px;}
  .hero{padding:24px 0 60px;gap:40px;}
  .hero__intro{padding:0 20px;}
  .hero__media{margin-left:20px;width:calc(100% - 20px);aspect-ratio:4/3;}
  /* 絵に言葉を重ねるファーストビューは、狭い画面でも重ねたまま。
     人物が右にいる横長の絵なので、縦の画面では人物を残して左右を切り、
     文字は上の空いているところへ置く。 */
  /* 縦の画面では、絵の中で置き場所を上下に分ける。
     大きい見出しは人物の顔の横、本文は絵の下のほうへ落とす。
     文字の塊をひとつにまとめると、顔にも光にもかぶって絵が読めなくなる。

     位置は絵の高さを基準に決めるので、画面の高さが変わっても崩れない。 */
  .hero--overlay{padding:0;gap:0;}
  .hero--overlay .hero__media{margin:0;width:100%;position:relative;}
  .hero--overlay .hero__media img{height:calc(100svh - 72px);object-position:88% center;}
  /* 文字が乗るのは左側と下側。そこだけ地の色を薄くかけて字を持ち上げる */
  .hero--overlay .hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(251,249,245,.66) 0%,rgba(251,249,245,.22) 46%,rgba(251,249,245,0) 72%),
               linear-gradient(0deg,rgba(251,249,245,.8) 0%,rgba(251,249,245,.32) 22%,rgba(251,249,245,0) 42%);}
  /* 絵の高さいっぱいに枠を張り、見出しは縦中央に置く。
     幅を絞ってあるので、人物の顔の横に並ぶ。 */
  .hero--overlay .hero__intro{top:0;bottom:0;left:0;right:0;transform:none;
    max-width:none;padding:0 20px;
    display:flex;flex-direction:column;justify-content:center;}
  .hero--overlay .hero__eyebrow{margin-bottom:14px;}
  .hero--overlay .hero__title{font-size:clamp(28px,7.8vw,36px);max-width:64%;}
  .hero--overlay .hero__title::after{margin-top:18px;width:44px;}
  /* 本文は絵の下端に貼りつける。中央に寄せた見出しとは切り離して置く */
  .hero--overlay .hero__lead{position:absolute;left:20px;right:20px;bottom:26px;
    margin:0;font-size:12.5px;line-height:1.95;}
  .site-header__inner{padding:14px 20px;}
  .page-hero{padding:44px 20px 0;}
  .cta-band{padding:48px 24px;}
}

/* =========================================================
   トップページの版面
   パンフレット案（assets/vivia-brand/）の組み方に合わせてある。
   - 節の頭は「小さな金の欧文ラベル → 金の短い罫 → 日本語」
   - 主張の一文は明朝、説明や UI はゴシック
   - 写真は片側へ寄せて画面の端まで抜く
   ここは .home に閉じてある。下層ページの見た目は変えない。
   ========================================================= */
body.home{
  --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --color-panel:#F2ECE1;
  --color-hairline:rgba(51,48,46,.14);
  --color-gold-line:rgba(176,122,78,.5);
  --section-x:144px;
  --section-y:clamp(104px,9vw,148px);
  --container:1360px;
  --color-muted:#6E655F;
}
@media(max-width:1080px){body.home{--section-x:40px;--section-y:96px;}}
@media(max-width:768px){body.home{--section-x:20px;--section-y:76px;}}

/* 左右の余白そのもので中身の幅を決める。
   節ごとに枠を中央寄せすると、画面が広いときだけ節ごとに左端がずれるため、
   どの節も画面の端から同じ距離で始まるようにしてある。
   写真を端まで抜くときは、この余白ぶんだけ外へ出せばよい。 */
body.home{--gutter:max(var(--section-x),calc((100vw - var(--container)) / 2));}
.home .section{padding:var(--section-y) var(--gutter);background:var(--color-cream);overflow-x:clip;}
.home .section__inner{max-width:none;}

/* 地の色は 1 節おきに入れ替える。白ではなく生成りにするのは、
   パンフレットが white ではなくベージュの面で頁を分けているため。
   ヒーローを除いて奇数番目を生成りにすると、お知らせの節があってもなくても
   代表の言葉（3 番目）が必ず生成りの面に乗り、隣り合う節が同じ色にならない。 */
.home .main>.section:not(.hero):nth-of-type(odd){background:var(--color-panel);}

/* 節の見出し --------------------------------------------- */
.home .section__head{gap:0;margin-bottom:clamp(48px,5vw,72px);}
.home .section__head-en{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--color-accent);line-height:1.4;}
.home .section__head-en::after{
  content:"";display:block;width:40px;height:1px;
  background:var(--color-gold-line);margin:14px 0 18px;}
.home .section__head-jp{
  font-family:var(--font-mincho);font-size:clamp(19px,1.7vw,23px);font-weight:400;
  letter-spacing:.16em;line-height:1.6;color:var(--color-ink);}

/* 節の主張になる一文。ここだけ明朝で組む */
.home .philosophy__lead,
.home .message__intro{
  font-family:var(--font-mincho);font-weight:400;
  font-size:clamp(22px,2.05vw,27px);line-height:2;letter-spacing:.07em;
  word-break:auto-phrase;}

/* Philosophy ---------------------------------------------
   文章を左、写真を右に置いて右端へ抜く。パンフレットの理念ページと同じ置き方。 */
.home #philosophy .section__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  column-gap:clamp(40px,5vw,80px);align-items:start;}
/* 写真が未設定のときは右の列を空けたままにしない */
.home #philosophy .section__inner:not(:has(.philosophy__media)){grid-template-columns:1fr;}
.home #philosophy .section__head{grid-column:1;grid-row:1;}
.home .philosophy__lead{grid-column:1;grid-row:2;margin:0;max-width:none;}
.home .philosophy__media{
  grid-column:2;grid-row:1 / span 2;
  margin:6px calc(-1 * var(--gutter)) 0 0;max-width:none;
  aspect-ratio:4/5;border-radius:20px 0 0 20px;}
.home .philosophy__media img{object-position:38% center;}
.home .philosophy__grid{
  grid-column:1 / -1;grid-row:3;max-width:none;
  margin-top:clamp(64px,7vw,104px);
  gap:clamp(40px,5vw,88px);padding-top:44px;border-top:1px solid var(--color-hairline);}
.home .philosophy__block h3{
  font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--color-accent);margin:0 0 12px;}
.home .philosophy__block .jp-label{
  font-family:var(--font-mincho);font-size:18px;letter-spacing:.14em;
  color:var(--color-ink);margin:0 0 18px;}
.home .philosophy__block p:not(.jp-label){
  font-size:15px;line-height:2.05;color:var(--color-muted);}

/* Message -------------------------------------------------
   人の声の節。地の色を変えた面にして、肖像を左端まで抜く。 */
.home #message{padding-left:0;}
.home #message .section__head{padding-left:var(--gutter);}
.home .message__grid{
  grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:clamp(40px,5vw,88px);align-items:center;}
.home .message__portrait{border-radius:0 20px 20px 0;aspect-ratio:4/5;}
.home .message__grid>div{max-width:640px;padding-right:var(--gutter);}
.home .message__intro{margin:0 0 36px;}
.home .message__body p{font-size:15px;line-height:2.1;}
.home .message__sign{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--color-gold-line);
  display:inline-block;}
.home .message__sign .role{margin:0 0 8px;font-size:12px;letter-spacing:.18em;color:var(--color-muted);}
.home .message__sign .name{font-family:var(--font-mincho);font-size:19px;font-weight:400;letter-spacing:.14em;}
.home .message__sign .name span{font-size:15px;letter-spacing:.16em;color:var(--color-muted);margin-left:14px;}

/* Business ------------------------------------------------
   パンフレットの「VIVIA の 3 つの事業」と同じく、細い金の縦罫で仕切る。
   3 列は同じ幅・同じ余白にする。両端だけ余白を外すと真ん中の絵が小さくなるので、
   列の余白は揃えたまま、一覧そのものを外側へずらして端を節の余白に合わせる。 */
.home .biz__lead{margin:0 0 clamp(56px,6vw,80px);font-size:15px;line-height:2.1;color:var(--color-muted);max-width:640px;}
.home .biz__list{gap:0;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 calc(-1 * clamp(24px,2.6vw,40px));}
.home .biz__item{padding:0 clamp(24px,2.6vw,40px);border-left:1px solid var(--color-gold-line);display:flex;flex-direction:column;}
.home .biz__item:first-child{border-left:0;}
.home .biz__name-en{color:var(--color-accent);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin:0 0 10px;}
.home .biz__name{font-family:var(--font-mincho);font-size:20px;font-weight:400;letter-spacing:.1em;margin:0 0 22px;}
.home .biz__media{aspect-ratio:1/1;border-radius:16px;margin-bottom:22px;}
.home .biz__media img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.home .biz__item:hover .biz__media img{transform:scale(1.04);}
.home .biz__desc{font-size:14px;line-height:2;margin:0 0 24px;}
.home .biz__more{margin-top:auto;align-self:flex-start;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--color-gold-line);}
.home a.biz__more:hover{opacity:1;color:var(--color-accent);}

/* News & Blog ---------------------------------------------- */
.home .blog__media{border-radius:16px;}
.home .blog__date{color:var(--color-accent);letter-spacing:.18em;}
.home .blog__cat{border-color:var(--color-gold-line);color:var(--color-muted);letter-spacing:.16em;}
.home .blog__title{font-family:var(--font-mincho);font-size:17px;font-weight:400;letter-spacing:.08em;line-height:1.8;}
.home .blog__more{font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--color-gold-line);}
.home a.blog__more:hover{opacity:1;color:var(--color-accent);}

/* Q&A ------------------------------------------------------ */
.home .faq__list{border-top-color:var(--color-hairline);}
.home .faq__item{border-bottom-color:var(--color-hairline);}
.home .faq__q{letter-spacing:.06em;}

/* Company -------------------------------------------------- */
.home .company__lead{margin:0 0 clamp(48px,5vw,72px);font-size:15px;line-height:2.1;color:var(--color-muted);max-width:640px;}
.home .spec-table{max-width:900px;}
.home .spec-table th{letter-spacing:.18em;font-size:12px;}
.home .spec-table th,.home .spec-table td{border-bottom-color:var(--color-hairline);padding:20px 12px;}

/* Contact --------------------------------------------------
   欧文の大きな文字は、冒頭のヒーローとここだけ。頁の始まりと終わりで対にする。 */
.home .contact__en{position:relative;padding-top:34px;letter-spacing:.02em;}
.home .contact__en::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:40px;height:1px;background:var(--color-gold-line);}
.home .contact__lead{font-size:15px;line-height:2.1;color:var(--color-muted);}
.home .btn--solid{transition:background-color .35s ease,border-color .35s ease;}
.home a.btn--solid:hover{background:var(--color-accent);border-color:var(--color-accent);opacity:1;}

/* キーボードで辿ったときの現在地 */
.home a:focus-visible,.home button:focus-visible,.home summary:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:4px;border-radius:2px;}

/* 読み込み時のヒーロー ------------------------------------
   金の罫が引かれてから本文が出る。動きはこの一度だけにする。 */
@media(prefers-reduced-motion:no-preference){
  .home .hero--overlay .hero__eyebrow,
  .home .hero--overlay .hero__title,
  .home .hero--overlay .hero__lead{
    opacity:0;animation:hero-rise 1.1s cubic-bezier(.16,1,.3,1) forwards;}
  .home .hero--overlay .hero__eyebrow{animation-delay:.15s;}
  .home .hero--overlay .hero__title{animation-delay:.35s;}
  .home .hero--overlay .hero__lead{animation-delay:1.05s;}
  .home .hero--overlay .hero__title::after{
    width:0;animation:hero-rule 1s cubic-bezier(.16,1,.3,1) .8s forwards;}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes hero-rule{from{width:0;}to{width:56px;}}

/* 狭い画面 ------------------------------------------------- */
@media(max-width:1000px){
  .home #philosophy .section__inner{grid-template-columns:1fr;}
  .home #philosophy .section__head{grid-row:auto;}
  .home .philosophy__lead{grid-column:1;grid-row:auto;}
  .home .philosophy__media{
    grid-column:1;grid-row:auto;aspect-ratio:16/10;
    margin:clamp(40px,6vw,64px) calc(-1 * var(--gutter)) 0;
    border-radius:0;}
  .home .philosophy__grid{grid-row:auto;margin-top:clamp(48px,6vw,72px);}

  /* 縦に積むときは、肖像だけを左右の端まで抜いて他は節の余白にそろえる */
  .home #message{padding-left:var(--gutter);}
  .home #message .section__head{padding-left:0;}
  .home .message__grid{grid-template-columns:1fr;gap:clamp(32px,5vw,48px);}
  .home .message__portrait{border-radius:0;aspect-ratio:1/1;margin:0 calc(-1 * var(--gutter));}
  .home .message__portrait img{object-position:50% 22%;}
  .home .message__grid>div{max-width:none;padding-right:0;}

  .home .biz__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,56px) 0;}
  .home .biz__item:nth-child(odd){border-left:0;}
}
@media(max-width:620px){
  .home .biz__list{grid-template-columns:1fr;gap:0;margin:0;}
  .home .biz__item{padding:36px 0 0;border-left:0;border-top:1px solid var(--color-gold-line);}
  .home .biz__item:first-child{padding-top:0;border-top:0;}
  .home .biz__item+.biz__item{margin-top:36px;}
  .home .philosophy__media{aspect-ratio:4/3;}
}

/* 2026-09-06 に足した4つの節（問題提起・原点・考え方・時短の位置づけ）
   ------------------------------------------------------------------
   英字の見出しを置かず、日本語の問いをそのまま大きく出す。
   「英語タイトル＋日本語説明」の型に文章を当てはめると、
   何を伝えたい会社なのかが読み手に届かないため。 */

/* トップは .home .section__inner が max-width を外すので、読み物の節では戻す。
   1行が 1300px を超えると目が行を追えず、文章が頭に入らない。
   中央には寄せない。他の節の見出しと左端が揃わなくなる。 */
.home .section__inner--narrow{max-width:min(720px,100%);margin-left:0;margin-right:0;}

/* 節の頭に置く問い。section__head-en の代わりになる */
.lede{
  font-family:var(--font-jp);
  font-size:clamp(22px,2.4vw,31px);
  font-weight:500;
  line-height:1.75;
  letter-spacing:.03em;
  margin:0 0 clamp(36px,3.4vw,48px);
  color:var(--color-ink);
}

/* 短い文が続く箇所。箱に区切らず、読点のリズムのまま縦に流す。
   1文ずつ改行するので、行間はそのまま文と文の間隔になる。 */
.flow{
  font-size:clamp(17px,1.35vw,20px);
  line-height:2.4;
  letter-spacing:.05em;
  margin:clamp(34px,3.2vw,44px) 0;
}

/* 本文。長い日本語を読み進める設定にする */
.prose{
  font-size:clamp(16px,1.15vw,17.5px);
  line-height:2.15;
  letter-spacing:.05em;
}
.prose p{margin:0 0 1.85em;}
.prose p:last-child{margin-bottom:0;}
.prose__close{margin-top:1.85em;color:var(--color-muted);}

/* 3つ並ぶ問い。縦線で本文と区別する */
.questions{
  border-left:2px solid var(--color-accent);
  padding-left:26px;
  margin:0 0 clamp(36px,3.4vw,46px);
  font-size:clamp(17px,1.35vw,20px);
  line-height:2.4;
  letter-spacing:.05em;
}

/* トップは .home .main>.section:nth-of-type(odd) が交互に地色を敷いている。
   ここで塗る節はその指定に勝つ必要があるので、同じ形で強く書く。
   足したのは4節なので、philosophy 以降の縞の順番は変わらない。 */

/* ページの中心である「考え方」の節だけ地色を反転させる */
.home .main>.section.section--invert{background:var(--color-ink);color:var(--color-cream);}
.section--invert .lede{color:var(--color-cream);}
/* 濃い地の上では細い字が沈むので、白より少しだけ落とすに留める */
.section--invert .prose{color:rgba(251,249,245,.92);}
.section--invert .flow{color:var(--color-cream);}

.origin__grid{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;}
.origin__media{margin:0;}
.origin__media img{width:100%;height:auto;}

@media (max-width:880px){
  .origin__grid{grid-template-columns:1fr;gap:28px;}
  .origin__media{max-width:280px;}
}

/* Hero の見出しが英字から日本語の問いに変わったので、書体と字送りを合わせる。
   明朝の英字用サイズのままだと、日本語2行が画面からはみ出す。 */
.hero__title{
  font-family:var(--font-jp);
  font-size:clamp(26px,4vw,46px);
  font-weight:500;
  line-height:1.6;
  letter-spacing:.04em;
}
.hero--overlay .hero__title{max-width:14em;}

@media (max-width:768px){
  .hero--overlay .hero__title{font-size:clamp(21px,5.6vw,28px);max-width:82%;}
}

/* 原点の節は写真が届くまで1カラムで出す */
.origin__grid--text{grid-template-columns:1fr;max-width:44em;}