/*
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:15px;
  --fs-base:17px;
  --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__title{font-family:var(--font-jp);font-size:clamp(24px,2.6vw,32px);font-weight:500;line-height:1.5;letter-spacing:.08em;margin:0;color:var(--color-ink);}

/* 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{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__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;}
.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;}
.page-hero__media picture{display:block;height:100%;}

/* 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:14px;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:14px;letter-spacing:.14em;color:var(--color-muted);margin:0 0 4px;}
.styles__fee-value{font-family:var(--font-jp);font-size:30px;font-weight:500;font-variant-numeric:lining-nums tabular-nums;line-height:1.2;letter-spacing:.02em;margin:0;}
.styles__item--recommended .styles__fee-value{color:var(--color-accent);}
/* 税込は税抜のすぐ下に、ひと目で読める大きさで出す。
   小さくしたり薄くしたりすると総額表示と見なされないおそれがある（data/content.yaml の plans の注記） */
.styles__fee-tax-in{font-family:var(--font-jp);font-size:20px;font-weight:500;font-variant-numeric:lining-nums tabular-nums;
  line-height:1.4;letter-spacing:.02em;margin:4px 0 0;}
.styles__item--recommended .styles__fee-tax-in{color:var(--color-accent);}
.styles__fee-note{font-family:var(--font-jp);font-size:14px;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:14px;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:14px;font-weight:500;letter-spacing:.18em;color:var(--color-muted);margin:0 0 8px;}
.styles__note{font-family:var(--font-jp);font-size:15px;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;}
}
/* 2 枚のときは 2 列。狭い画面の横スクロールには手を出さないよう、広い画面だけに効かせる */
@media(min-width:1081px){
  .styles__list--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-left:auto;margin-right:auto;}
}

/* あなたに合うプラン（受講スタイルのカードと同じ部品）
   「こんな方に」を先に置き、そこだけで選べるようにする。
   高さの差は特徴の行（3 行目）で吸収し、金額の位置を 3 枚で揃える。 */
.lineup__list{grid-template-rows:auto auto 1fr auto auto;}
.lineup__for{width:100%;text-align:left;margin-top:22px;padding:18px 18px 16px;
  background:rgba(176,122,78,.08);border-radius:10px;}
.lineup__for .styles__group-title{color:var(--color-accent);margin-bottom:4px;}
.lineup__for-list{margin-top:0;}
.lineup__for-list li{font-weight:500;color:var(--color-ink);}
.lineup__fee-note{font-size:15px;font-weight:500;color:var(--color-accent);}
.lineup__more{display:inline-flex;align-items:center;margin-top:18px;
  font-family:var(--font-jp);font-size:14px;letter-spacing:.12em;color:var(--color-muted);
  padding:8px 18px;border:1px solid rgba(51,48,46,.2);border-radius:999px;}
.lineup__more:hover{opacity:1;color:var(--color-accent);border-color:var(--color-accent);}
.lineup__store{margin-top:24px;}
.lineup__legal{margin:28px 0 0;font-size:14px;letter-spacing:.05em;color:var(--color-muted);}
.lineup__legal a,.cta-band__note a{text-decoration:underline;text-underline-offset:4px;}
.is-centered .lineup__legal{text-align:center;}

/* 特定商取引法に基づく表記（tokushoho.php）
   ------------------------------------------------
   項目名と内容の 2 列を、1 枚の表で淡々と並べる。目立たせる要素は置かない。 */
/* リード文のすぐ下に表が始まるので、節の上の余白を詰める。
   120px のままだと、見出しと表の間が空きすぎて別のものに見える */
.section--legal{padding-top:48px;}
@media(max-width:1080px){.section--legal{padding-top:40px;}}
@media(max-width:768px){.section--legal{padding-top:32px;}}
.legal{font-family:var(--font-jp);font-size:16px;line-height:1.95;letter-spacing:.04em;}
.legal__table-wrap{margin:0;}
/* 内容は 1 行ずつ段落で出す。折り返した行を頭の位置で揃え、条件を拾いやすくする */
.legal__line{margin:0;}
.legal__line+.legal__line{margin-top:2px;}
.legal__line--item{padding-left:1em;text-indent:-1em;}
.legal__line--item+.legal__line--item{margin-top:8px;}
/* 箇条書きの中に入れる表（キャンセル料の日数区分）。
   いつ・いくらの 2 列にして、条件を縦に見比べられるようにする。
   契約の条件そのものなので、色は薄くしない。
   外側の表の指定（幅 11em・薄い色）に負けないよう、.legal__table から書く */
.legal__rates{margin:8px 0 0 1em;border-collapse:collapse;}
.legal__table .legal__rates th,.legal__table .legal__rates td{border:1px solid rgba(51,48,46,.2);
  padding:8px 12px;text-align:left;font-size:15px;line-height:1.7;font-weight:400;
  white-space:nowrap;width:auto;color:inherit;}
.legal__table .legal__rates th{background:rgba(51,48,46,.03);}
.legal__line--item+.legal__rates{margin-top:6px;}
/* 表が終わったことが分かるよう、次の箇条書きとの間は広めに空ける */
.legal__rates+.legal__line--item{margin-top:18px;}
/* 罫線は外枠も含めてすべて引く。法定の表記なので、どこまでが表か分かる方がよい */
.legal__table{width:100%;border-collapse:collapse;border:1px solid rgba(51,48,46,.2);}
/* 行の高さは内容の量でまちまちなので、項目名と内容は上下中央で揃える */
.legal__table th,.legal__table td{border:1px solid rgba(51,48,46,.2);padding:16px 14px;text-align:left;vertical-align:middle;
  font-size:15px;line-height:1.9;letter-spacing:.03em;}
/* 項目名の列は幅を決めて、内容の列を読みやすくする */
.legal__table tbody th{width:11em;font-weight:400;color:var(--color-muted);background:rgba(51,48,46,.03);}
/* 埋まっていない項目。見落としたまま公開しないよう、ひと目で分かる色にする */
.legal__pending{color:#B4453C;}
/* 狭い画面では横に流さず、項目名を内容の上に積む */
@media(max-width:640px){
  .legal__table,.legal__table tbody,.legal__table tr,.legal__table th,.legal__table td{display:block;width:auto;}
  .legal__table tr+tr{border-top:1px solid rgba(51,48,46,.2);}
  .legal__table th,.legal__table td{border:0;}
  .legal__table tbody th{padding-bottom:0;}
}
/* LB⁺ 導入店一覧（Cloudflare 版の salons.astro）
   ------------------------------------------------
   受講者数と掲載店を別の塊にする。同じ行に並べると、その店から何名受けたかに読めるため。
   受講者数は全国の合計と地域ごとの合計の札。掲載店は店名・都道府県・リンクの表。 */
/* 数字と店名を読み比べるページなので、地の色を付けず白にする（2026-10-05 古味さん）。
   クリーム色の上の黒い文字は、表では読みにくいため */
body.page-salons,body.page-salons .site-header{background:#fff;}
.section--salons{padding-top:48px;}
@media(max-width:1080px){.section--salons{padding-top:40px;}}
@media(max-width:768px){.section--salons{padding-top:32px;}}
.salons{font-family:var(--font-jp);}
.salons__block+.salons__block{margin-top:72px;}
.salons__title{font-family:var(--font-jp);font-size:22px;font-weight:500;letter-spacing:.08em;margin:0 0 24px;}
.salons__total{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 20px;padding:36px 24px 32px;
  background:var(--color-cream);border-radius:16px;text-align:center;}
.salons__total-label{font-family:var(--font-en);font-size:15px;letter-spacing:.24em;color:var(--color-accent);}
/* 数字はロゴと同じ英字の明朝。VIVIA らしい細く上品な数字にする */
.salons__total-num{font-family:var(--font-en);font-size:clamp(64px,8vw,96px);font-weight:400;line-height:1;letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;color:var(--color-ink);}
.salons__total-num small{font-family:var(--font-jp);font-size:18px;margin-left:6px;letter-spacing:.06em;}
.salons__areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.salons__area{display:flex;justify-content:space-between;align-items:baseline;padding:16px 20px;border:1px solid rgba(51,48,46,.14);border-radius:12px;}
.salons__area-name{font-size:16px;letter-spacing:.08em;}
.salons__area--unknown{color:var(--color-muted);}
.salons__num{font-family:var(--font-en);font-size:30px;line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;}
.salons__num small{font-size:14px;margin-left:3px;}
/* 受講者数の動き（salons.astro の script）。JS が付けるクラスだけに掛け、動かないときは普通の数字のまま。
   ぼかしから、ゆっくり浮かび上がる。VIVIA のサイトの柔らかい見せ方に合わせる。
   クラス名は .reveal にしない。サイト全体の読み物の .reveal（site.js）とぶつかり、全ページの文がぼけたため（2026-10-05） */
.salons-fade,.salons-fade-children>li{opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.22,1,.36,1),filter 1.2s ease;}
.salons-fade.is-on,.salons-fade-children>li.is-on{opacity:1;transform:none;filter:none;}
.salons__note{margin:20px 0 0;font-size:13px;color:var(--color-muted);}
.salons__table{width:100%;border-collapse:collapse;border:1px solid rgba(51,48,46,.2);}
.salons__table th,.salons__table td{border:1px solid rgba(51,48,46,.2);padding:14px;text-align:left;vertical-align:middle;
  font-size:15px;line-height:1.8;letter-spacing:.03em;font-weight:400;}
.salons__table thead th{font-size:13px;color:var(--color-muted);background:rgba(51,48,46,.03);white-space:nowrap;}
.salons__table td{width:7em;}
.salons__table td.salons__links-cell{width:5em;}
.salons__links{display:flex;flex-wrap:wrap;gap:8px;}
/* 見本（ricca-beauty.com/inputblow/）に合わせ、別タブで開く矢印のアイコンだけにする（2026-10-05 古味さん） */
.salons__link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:inherit;}
.salons__link:hover{opacity:.6;}
@media(max-width:640px){
  .salons__areas{grid-template-columns:1fr 1fr;gap:8px;}
  .salons__area{padding:12px 14px;}
  .salons__area-name{font-size:14px;letter-spacing:.04em;}
  .salons__num{font-size:22px;}
  .salons__table th,.salons__table td{padding:10px 8px;font-size:14px;}
  .salons__table td{width:5em;white-space:nowrap;}
}
.lineup__foot{display:flex;flex-direction:column;align-items:center;gap:4px;}
.lineup__apply{margin-top:22px;}

/* 状況を選ぶ問い。選ぶと合うカードが縁取られ、ほかは薄くなる */
.lineup__ask{max-width:900px;margin:0 auto clamp(32px,3.4vw,48px);text-align:center;}
.lineup__ask-q{font-family:var(--font-jp);font-size:18px;font-weight:500;letter-spacing:.06em;margin:0 0 16px;}
.lineup__ask-options{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.lineup__ask-btn{cursor:pointer;font-family:var(--font-jp);font-size:15px;letter-spacing:.04em;line-height:1.5;
  color:var(--color-ink);background:var(--color-white);
  padding:10px 20px;border:1px solid rgba(51,48,46,.2);border-radius:999px;transition:background .2s,border-color .2s,color .2s;}
.lineup__ask-btn:hover{border-color:var(--color-accent);}
.lineup__ask-btn[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-white);}
.lineup__ask-result{min-height:1.6em;margin:16px 0 0;font-family:var(--font-jp);font-size:17px;font-weight:500;letter-spacing:.05em;color:var(--color-accent);}
/* カード自体はフェードイン（.reveal-item）が opacity と transition を使っているので、薄くするのは中身だけにする */
.lineup__list .styles__item > *{transition:opacity .3s ease;}
.lineup__list .styles__item.is-dim > *{opacity:.4;}
.lineup__list .styles__item.is-match{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent);}
/* 状況の選択肢を「ご自身で受講する」「サロン・スタッフのために」のように分けて並べる */
.lineup__ask-group+.lineup__ask-group{margin-top:22px;}
.lineup__ask-group-title{font-family:var(--font-jp);font-size:14px;font-weight:500;letter-spacing:.14em;color:var(--color-muted);margin:0 0 10px;}
/* 別のページへ飛ぶ選択肢。押すと移ることが分かるよう、地の色を変えて矢印を添える */
.lineup__ask-btn--link{display:inline-flex;align-items:center;text-decoration:none;background:var(--color-cream);}
.lineup__ask-btn--link:hover{opacity:1;color:var(--color-accent);}
/* プランを縦に 1 枚ずつ並べる（サロン向けのページと、カードが 1 枚だけのとき）。
   説明を読み比べてから選ぶので、横に流さない */
.styles__list--stacked{grid-template-columns:minmax(0,1fr);grid-template-rows:none;max-width:640px;margin-left:auto;margin-right:auto;gap:32px;}
.styles__list--stacked .styles__item{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;align-items:center;}
/* ほかのページの選択肢から #plan-… で飛んできたとき、上の固定ヘッダーに隠れないようにする */
.lineup__list .styles__item{scroll-margin-top:110px;}
@media(max-width:1080px){
  .styles__list.styles__list--stacked{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding:0;margin:0 auto;}
}
.is-centered .lineup__store{text-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__lead{font-family:var(--font-jp);font-size:var(--fs-base);line-height:1.9;letter-spacing:.06em;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);}


/* お問い合わせフォーム */
.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__legal{font-family:var(--font-jp);font-size:13px;letter-spacing:.08em;margin:-8px 0 0;}
.site-footer__legal a{color:rgba(251,249,245,.7);padding-bottom:4px;border-bottom:1px solid rgba(251,249,245,.3);}
.site-footer__legal a:hover{opacity:1;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;}}

/* モバイルメニュー（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__title{font-size:24px;}
  /* 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__title::before{
  content:"";display:block;width:40px;height:1px;
  background:var(--color-gold-line);margin:0 0 18px;}
.home .section__title{
  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{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;}

/* 節の頭に置く問い。節の見出しの代わりになる */
.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);}

/* 写真と本文が 720px を分け合うと1行20字ほどになって読めない。
   この節だけ、本文が他の節と同じ幅を保てるところまで広げる。 */
#origin .section__inner--narrow{max-width:min(1060px,100%);}
.origin__grid{display:grid;grid-template-columns:300px 1fr;gap:56px;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%;}
}

/* 写真が決まるまで枠だけ置く。
   「写真」ではなく何を撮るかを書く。用意する側が迷わないため。 */
.origin__media.ph{aspect-ratio:4/5;padding:0 22px;}
.origin__media.ph::after{
  font-family:var(--font-jp);
  font-size:13px;
  letter-spacing:.08em;
  line-height:1.9;
  text-transform:none;
  text-align:center;
}

  white-space:normal;
/* 問い合わせの見出しを日本語にしたので、書体とサイズを合わせる。
   英字用の 56px のままだと、日本語では画面を占めすぎる。 */
.contact__en{
  font-family:var(--font-jp);
  font-size:clamp(24px,3.2vw,38px);
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.6;
}

/* 読み物の節は、1段落ずつゆっくり現れる。
   カードを並べる節と同じ速さだと、読む前に全部そこにある状態になる。
   .reveal-item が transition を一括指定しているので、こちらも一括で上書きする。 */
.reveal-item--slow{
  transform:translateY(18px);
  transition:
    opacity 1.5s cubic-bezier(.16,1,.3,1),
    transform 1.5s cubic-bezier(.16,1,.3,1);
}
.reveal-item--slow.is-visible{transform:none;}

/* 事業が3つを超えて2行以上になったときの間隔
   ------------------------------------------------
   3列に収まる前提の設計だったので、行が増えると上下がくっついて
   どこまでが1つのカードか分からなくなる。
   横線は列の padding で途切れて汚くなるので、余白で離す。 */
.home .biz__list{row-gap:clamp(56px,6vw,88px);}

/* 縦線は各行の左端で消す。3の倍数+1 番目が行頭になる */
.home .biz__item:nth-child(3n+1){border-left:0;}

/* 受講プラン
   ------------------------------------------------
   枠に入れて並べるのではなく、読み物として縦に流す。
   本文は大きめにして、内容を知りたい人がそのまま読み進められるようにする。 */
/* 読む列は、どの節もページの中央に置く。列の中の文字は左揃え */
.story__inner{max-width:760px;margin-left:auto;margin-right:auto;}
.story__title{
  font-family:var(--font-jp);font-size:clamp(24px,2.8vw,34px);font-weight:500;
  line-height:1.6;letter-spacing:.06em;margin:0 0 clamp(24px,2.6vw,36px);
}
.story__sub{
  font-family:var(--font-jp);font-size:clamp(19px,1.9vw,22px);font-weight:500;
  letter-spacing:.06em;margin:clamp(40px,4vw,56px) 0 16px;
}
.story__body p{font-size:clamp(16px,1.5vw,18px);line-height:2.1;letter-spacing:.05em;margin:0 0 1.4em;}
.story__body p:last-child{margin-bottom:0;}
/* 改行は句点と読点で入れてある。それでも折り返すときは、語の途中で切らない（対応ブラウザのみ） */
.story__title,.story__body p,.page-hero__lead{word-break:auto-phrase;}
.story__link{margin:28px 0 0;font-size:17px;letter-spacing:.05em;}
.story__link a{padding-bottom:6px;border-bottom:1px solid rgba(176,122,78,.5);}
.story__link a:hover{opacity:1;color:var(--color-accent);}

.plans__points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.plans__points li{font-size:clamp(16px,1.5vw,17px);line-height:1.9;letter-spacing:.05em;padding-left:22px;position:relative;}
.plans__points li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:1px;background:var(--color-accent);}
/* 含まれないものは、目立たせずに事実として置く */
.plans__points--excl li{color:var(--color-muted);}
.plans__points--excl li::before{background:var(--color-muted);}

/* 導入の流れ。順に進むものなので番号を振る */
.plans__steps{list-style:none;counter-reset:step;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.plans__steps li{counter-increment:step;position:relative;padding-left:2.4em;font-size:clamp(16px,1.5vw,17px);line-height:1.9;letter-spacing:.05em;}
.plans__steps li::before{
  content:counter(step);position:absolute;left:0;top:.2em;
  width:1.7em;height:1.7em;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:var(--color-white);background:var(--color-accent);
}

/* 金額は読み間違えられないことが先。
   欧文の書体は数字の高さが揃わず（6 や 9 が下に下がる）読みにくいので、本文と同じゴシックにする */
.plans__price{
  font-size:28px;font-weight:500;line-height:1.5;letter-spacing:.02em;margin:0;
  font-variant-numeric:lining-nums tabular-nums;
}
.plans__price .tax-in{font-size:20px;margin-left:6px;}
.plans__price small{font-size:15px;font-weight:400;letter-spacing:.08em;color:var(--color-muted);margin-left:10px;}
.plans__note{font-size:15px;line-height:1.95;color:var(--color-muted);margin:clamp(24px,2.4vw,32px) 0 0;}

/* 中央揃えで組む事業ページ（inc/routing.php で body に is-centered が付く）
   ------------------------------------------------
   見出し・文章・写真を、すべてページの中央にそろえる。
   箇条書きや表は、行の頭がそろわないと読めないので、塊ごと中央に置いて中身は左揃えのまま。 */
.is-centered .page-hero__inner,
.is-centered .story__inner,
.is-centered .section__head,
.is-centered .section__lead,
.is-centered .styles__foot,
.is-centered .voices__note,
.is-centered .faq__note,
.is-centered .plans__note{text-align:center;}
.is-centered .section__head{align-items:center;}
.is-centered .section__lead,
.is-centered .styles__foot{margin-left:auto;margin-right:auto;}
.is-centered .page-hero__media{margin-left:auto;margin-right:auto;}
.is-centered .plans__points,
.is-centered .plans__steps{display:inline-flex;text-align:left;}
.is-centered .course-body .spec-table{margin-left:auto;margin-right:auto;}
/* 受講概要は表と写真の左右 2 列だと左に寄って見えるので、1 列にして表を中央、写真をその下に置く */
.is-centered .course-body{grid-template-columns:1fr;justify-items:center;}
.is-centered .course-body .spec-table{max-width:760px;}
.is-centered .course-body .lp-duo{width:100%;max-width:760px;}
/* 2 枚の写真は左に空きを取らず、中央に並べる */
.is-centered .course-body .lp-duo{grid-template-columns:minmax(0,1fr) 6% minmax(0,1fr);}
.is-centered .lp-duo__item--lead{grid-column:1;}
.is-centered .lp-duo__item--trail{grid-column:3;}

/* リードと読み物の本文は、一行ずつ読めるよう行間を広めに取る。
   Zen Kaku Gothic New は同じ文字サイズでも字面が小さく見えるので、18px を下限にする */
.page-hero__lead,
.section__lead{font-size:18px;line-height:2.3;letter-spacing:.06em;}
.story__body p{font-size:18px;line-height:2.3;}

/* 本文を読みやすく組むページ（body に is-reading が付く）
   ------------------------------------------------
   書体はサイトの Zen Kaku Gothic New のまま、この書体に合わせて大きさと行間を決める。
   - 字面が小さい：同じ大きさでヒラギノの 97% ほど（2026-09-11 に計測）。そのぶん 1px 大きくする
   - 線が細い：標準の太さだと薄く見えるので、リードと本文は 500 にする
   - 色：黒に近い色で、背景の生成りとの差を大きくする
   - 幅：1 行 34 字前後。note の記事と同じくらい
   ヒラギノに替えて試したが、サイトの雰囲気が崩れたので書体は変えない。 */
.is-reading{--color-read:#1F1D1B;}
.is-reading .story__inner{max-width:660px;}
.is-reading .page-hero__lead,
.is-reading .section__lead,
.is-reading .story__body p,
.is-reading .plans__points li,
.is-reading .plans__steps li,
.is-reading .voices__item,
.is-reading .styles__desc,
.is-reading .styles__points li,
.is-reading .spec-table td,
.is-reading .faq__q,
.is-reading .faq__a,
.is-reading .faq__a-body p{color:var(--color-read);letter-spacing:.04em;}
.is-reading .page-hero__lead,
.is-reading .section__lead,
.is-reading .story__body p{font-size:19px;font-weight:500;line-height:1.9;}
.is-reading .story__body p{margin:0 0 2em;}
.is-reading .story__body p:last-child{margin-bottom:0;}
.is-reading .plans__points li,
.is-reading .plans__steps li{font-size:18px;line-height:1.9;}
/* 含まれないものは、薄くしすぎず読める濃さに */
.is-reading .plans__points--excl li{color:#5E5853;}
/* 受講者の声と受講概要の表も、本文に近い大きさにする */
.is-reading .voices__item,
.is-reading .spec-table td,
.is-reading .spec-table th{font-size:17px;line-height:1.9;}

/* スマホでは、読ませる文章を左揃えにする。
   1 行が短く折り返しが増えるので、中央揃えのままだと行の頭が毎行ずれて読みにくい。
   見出しは短いので中央のまま。読点での改行はパソコン向けなので外す（functions.php の vivia_nl2br_read） */
@media(max-width:768px){
  .br-pc{display:none;}
  .is-centered .page-hero__lead,
  .is-centered .section__lead,
  .is-centered .story__body,
  .is-centered .plans__note,
  .is-centered .styles__foot,
  .is-centered .voices__note,
  .is-centered .faq__note{text-align:left;}
  .is-centered .plans__points,
  .is-centered .plans__steps{display:flex;}
  .is-reading .page-hero__lead,
  .is-reading .section__lead,
  .is-reading .story__body p{font-size:17px;line-height:1.8;}
  .is-reading .story__body p{margin-bottom:1.6em;}
}
/* スマホは左揃えなので、読点での改行（.br-pc）と、語のまとまりで折り返す指定は外して自然に流す。
   どちらも残すと、行末が大きく余った短い行が続いてしまう。句点での改行はスマホでも残す */
@media(max-width:768px){
  .is-centered .page-hero__lead,
  .is-centered .section__lead,
  .is-centered .story__body p{word-break:normal;}
}
/* よくある質問の一覧は、塊ごと中央に置いたうえで中の文字は左揃え */
.is-centered .faq__list{text-align:left;}

/* 一文ずつの塊（functions.php の vivia_nl2br_read）。文と文のあいだを少し空ける */
.line{display:block;}
.line + .line{margin-top:.5em;}

/* 中央揃えのページの、法人向けの節（研修の概要・得られるもの・料金と助成金）
   ------------------------------------------------
   お手本（LB⁺ 時短技術講習）と同じく、読む列を中央に置いて枠を減らす。
   箇条書きや表は、塊ごと中央に置いて中の文字は左揃え。 */
.is-centered #corporate > .section__inner,
.is-centered #outcome > .section__inner,
.is-centered #fee > .section__inner{max-width:660px;text-align:center;}
.is-centered #corporate .section__split{grid-template-columns:1fr;gap:40px;}
/* 追従はやめるが、写真の後ろの金の罫（::before）の基準は写真のまま残す。static にすると罫がページ全体に広がり、横にもはみ出す */
.is-centered #corporate .section__media--sticky{position:relative;top:auto;}
.is-centered .corp-overview,
.is-centered .spec-table,
.is-centered .corp-subsidy{text-align:left;}
.is-centered #fee .spec-table{max-width:none;}
.is-centered .corp-proof{border-left:0;padding-left:0;max-width:none;}
/* 特徴は白い箱に入れず、見出しと説明の組で縦に並べる */
.is-centered .corp-features{display:block;background:none;border:0;margin:40px 0 0;}
.is-centered .corp-features li{background:none;padding:0;margin:0 0 24px;}
.is-centered .corp-outcomes{display:inline-block;columns:1;text-align:left;}
.is-centered .corp-admin{margin-left:auto;margin-right:auto;}
.is-centered .corp-admin__list{justify-content:center;}
.is-centered .corp-note{margin-left:auto;margin-right:auto;}
.is-centered .corp-subsidy{margin-left:auto;margin-right:auto;}

/* 法人向けの節の文字も、本文に近い大きさと濃さにする */
.is-reading .corp-proof{font-size:19px;font-weight:500;line-height:1.9;color:var(--color-read);}
.is-reading .corp-features b{font-size:18px;color:var(--color-read);}
.is-reading .corp-features span{font-size:17px;line-height:1.9;color:var(--color-read);}
.is-reading .corp-outcomes li{font-size:18px;line-height:1.9;letter-spacing:.04em;color:var(--color-read);}
.is-reading .corp-admin__list li{font-size:15px;}
.is-reading .corp-subsidy__lead{font-size:17px;color:var(--color-read);}
.is-reading .corp-subsidy__list li,
.is-reading .corp-subsidy__note{font-size:16px;color:var(--color-read);}
.is-reading .corp-note{font-size:15px;}

/* 項目名と内容の 2 列の表は、狭い画面では項目名を内容の上に積む。
   項目名の列が 160px のままだと、スマホでは内容が数文字ごとに折れて縦に伸びるため。
   番号だけの表（--steps）は列が細いので横のまま。
   .home や .is-reading の余白・字の大きさの指定より後に置いて、こちらを効かせる */
@media(max-width:640px){
  .spec-table:not(.spec-table--steps),
  .spec-table:not(.spec-table--steps) tbody,
  .spec-table:not(.spec-table--steps) tr,
  .spec-table:not(.spec-table--steps) th,
  .spec-table:not(.spec-table--steps) td{display:block;width:auto;}
  .spec-table:not(.spec-table--steps) tr{border-bottom:1px solid rgba(51,48,46,.12);}
  .spec-table:not(.spec-table--steps) th,
  .spec-table:not(.spec-table--steps) td{border-bottom:0;}
  .spec-table:not(.spec-table--steps) th{padding-bottom:0;}
  .spec-table:not(.spec-table--steps) td{padding-top:6px;}
}

/* PC で LINE の申込ボタンを押したときの案内（site.js）。画面の下に数秒だけ出す */
.line-pc-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;max-width:min(560px,calc(100% - 32px));
  padding:14px 20px;border-radius:12px;background:var(--color-ink);color:#fff;font-family:var(--font-jp);font-size:14px;line-height:1.7;
  letter-spacing:.04em;box-shadow:0 8px 24px rgba(0,0,0,.18);}