/* ---- ghost button ---- */
.btn-ghost{border:1.5px solid var(--color-border-btn);border-radius:9px;font-weight:700;color:var(--color-ink);transition:border-color .2s,background .2s}
.btn-ghost:hover{border-color:var(--color-ink);background:var(--color-bg-alt)}

/* ---- service cards ---- */
.scard{transition:transform .2s,box-shadow .2s,border-color .2s}
.scard:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--color-shadow-sm);border-color:var(--color-border-hover)}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- hero (index overrides) ---- */
/* TODO: 動画完成後に .hero-video を有効化し、この background-image を削除する */
.hero-index .hero-inner{background-image:url('../images/index_hero_background.jpg');background-size:cover;background-position:center}
.hero-index{min-height:680px}
.hero-index .hero-content{padding-top:6rem}
.hero-index .hero-badge{gap:0;padding:0.5625rem 1.0625rem;margin-bottom:1.875rem}
.hero-index .hero-title{font-size:4.5rem;line-height:1.12;max-width:900px;margin-bottom:1.625rem}
.hero-index .hero-sub{font-size:1.09rem;max-width:580px;margin-bottom:2.375rem}

/* ---- strength cards ---- */
.scard-inner{border:1px solid var(--color-border);border-radius:16px;padding:2.125rem;background:var(--color-white);height:100%}
.card-num{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-text-silver);margin-bottom:1.125rem}

/* ---- service cards (link cards) ---- */
.svc-card{display:block;background:var(--color-white);border:1px solid var(--color-border);border-radius:18px;overflow:hidden;height:100%}
.svc-img-wrap{width:100%;height:240px;overflow:hidden}
.svc-body{padding:2rem 2.125rem 2.25rem}
.svc-label{font-family:'Schibsted Grotesk';font-size:0.78rem;font-weight:700;color:var(--color-amber);letter-spacing:.06em;margin-bottom:0.8125rem}
.svc-more{font-size:0.91rem;font-weight:700;color:var(--color-ink)}

/* ---- works / stats ---- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat-amber{color:var(--color-white);border-radius:16px;padding:1.875rem 1.75rem;background-color:var(--color-amber)}
.stat-light{border-radius:16px;padding:1.875rem 1.75rem;display:flex;flex-direction:column;justify-content:center;background-color:var(--color-amber-light)}
.stat-num-xl{font-family:'Schibsted Grotesk';font-size:2.875rem;font-weight:900;line-height:1}
.stat-unit{font-size:1.125rem}
.stat-num-lg{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:1.75rem;font-weight:900;line-height:1.15;color:var(--color-amber)}
.stat-label-white{font-size:0.81rem;color:var(--color-white);margin-top:0.5rem}
.stat-label-amber{font-size:0.81rem;color:var(--color-amber);margin-top:0.5rem}

/* ---- CTA section ---- */
.cta-title{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:2.5rem;font-weight:900;letter-spacing:-.01em;line-height:1.3;margin-bottom:1rem}
.cta-sub-dark{font-size:1rem;color:var(--color-text-pale);margin-bottom:2.125rem;line-height:1.9}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- strengths section ---- */
.why-intro{margin-bottom:3rem}
.restaurant-award-column{display:flex;justify-content:center;align-items:center}
.restaurant-award-column #b-gold{max-width:100%;}
.sec-strengths .sec-title{font-size:2.5rem;line-height:1.3;margin-bottom:0.875rem;max-width:680px}
.sec-strengths .sec-intro{font-size:1rem;line-height:1.9;max-width:620px}
.sec-strengths .scard h3{font-size:1.25rem;font-weight:700;margin-bottom:0.6875rem}
.sec-strengths .scard .sec-sub{font-size:0.91rem;line-height:1.9}

/* ---- services section ---- */
.sec-services .svc-body h3{font-size:1.56rem;font-weight:700;margin-bottom:0.6875rem}
.sec-services .svc-body .sec-sub{font-size:0.91rem;line-height:1.9;margin-bottom:1.25rem}

/* ---- works section ---- */
.sec-works .columns{--bulma-column-gap:28px}
.sec-works .sec-title{font-size:2.375rem;line-height:1.3;margin-bottom:1.125rem}
.sec-works .sec-sub{font-size:0.97rem;line-height:1.95}

/* ======== 2026-09 法人向け強化: ここから下は追記のみ（上の既存ルールは変更していない） ======== */

/* ---- for companies（hero 直下・ink 地。amber の文字はダーク地の上だけ） ---- */
/* grid のトラックは minmax(0,…) にする。素の 1fr は中身の最小幅より狭くならず、英語の長い語や「数字 + 単位」で
   375px からはみ出す（実測 2026-09-20: EN で新節が right 386px まで広がった）。 */
.corp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.5rem;align-items:center}
.sec-corp .sec-title{font-size:2.5rem;line-height:1.3;margin-bottom:1.25rem;color:var(--color-white)}
.corp-sub{font-size:1rem;line-height:1.95;color:var(--color-text-silver2);margin-bottom:2rem}
.corp-ctas{display:flex;gap:14px;flex-wrap:wrap}
.corp-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.corp-stat{background:var(--color-ink-card);border:1px solid var(--color-ink-border);border-radius:16px;padding:1.75rem}
.corp-stat-wide{grid-column:1 / -1}
/* 数字と単位は、入らなければ単位だけ次の行へ折り返す（EN の単位は長い） */
.corp-stat-num{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0.25rem;row-gap:0.375rem;font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-weight:900;font-size:2.875rem;line-height:1;color:var(--color-amber)}
.corp-stat-unit{font-size:1.125rem;line-height:1.3}
.corp-stat-label{font-size:0.81rem;line-height:1.6;color:var(--color-text-silver2);margin-top:0.75rem}
.corp-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--color-ink-border)}
.corp-pillar{display:grid;grid-template-columns:auto 1fr;column-gap:0.875rem;align-content:start}
.corp-pillar-key{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:900;color:var(--color-amber);padding-top:0.2rem}
.corp-pillar h3{font-size:0.97rem;font-weight:700;color:var(--color-white);margin-bottom:0.4rem}
.corp-pillar p{grid-column:2;font-size:0.81rem;line-height:1.85;color:var(--color-text-pale)}

/* ---- by role ---- */
.sec-roles .sec-title{font-size:2.5rem;line-height:1.3}

/* ---- service card 04（ラベルは淡色地なので amber を使わない） ---- */
.svc-label--ink{color:var(--color-text)}

@media screen and (max-width:1023px){
  /* 店舗サイトからの着地（375px）で、1 スクロール以内に「70 社以上 / 10 社」が見えるよう、1 列のときは
     見出しの直後に数字を出す（実測 2026-09-20: 並べ替え前は数字の下端が 1710〜1900px で、1 スクロールの下限 1624px を超えた）。
     視覚順だけを変え、DOM 順（見出し → 本文 → ボタン → 数字）は変えない。数字のタイルにフォーカス可能な要素は無い。 */
  .corp-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .corp-lead{display:contents}
  .corp-lead > .eyebrow{order:1}
  .corp-lead > .sec-title{order:2}
  .corp-stats{order:3;margin-bottom:2rem}
  .corp-lead > .corp-sub{order:4}
  .corp-lead > .corp-ctas{order:5}
  .corp-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:768px){
  .sec-corp .sec-title,.sec-roles .sec-title{font-size:1.75rem}
  .corp-pillars{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:2.5rem;padding-top:2rem}
  .corp-stat{padding:1.375rem}
  .corp-stat-num{font-size:2.25rem}
}

/* ---- #works の実績グリッド: EN 375px の横はみ出し修正（変更前からの不具合・実測 2026-09-20）。上の既存ルールは変えず、ここで上書きする ---- */
/* 素の 1fr（= minmax(auto,1fr)）は中身の最小幅より狭くならない。EN の「Company」（1.75rem・weight 900 = 136px）が 1 列目を 192px に広げ、
   2 列目が画面の外へ 47px 出ていた（トラック 192 / 148px、グリッド幅 311px）。JA は元から 146.5 / 146.5px なので、この行では何も変わらない。 */
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* トラックを縮めるだけだと、今度は語がセルの枠を 46px はみ出す。EN だけ、グリッドの幅に合わせて左右の余白と見出しの大きさを CSS が自動で縮める。
   cqi = 最も近いコンテナ（.stat-grid）の幅の 1%。幅が約 510px 以上なら現行値（余白 1.75rem・見出し 1.75rem）に張り付くので、デスクトップは変わらない。
   :lang(en) は layouts/index.html の <html lang> に依存する（以前は EN ページでも lang="ja" 固定だった）。JA には当てない。
   cqi に対応しないブラウザは clamp(…cqi…) の行を無視し、直前の固定値（768px 以下）で収まる。
   overflow-wrap は極端に狭い幅のための最後の保険で、通常は発動しない（発動すると語の途中で折り返す）。 */
:lang(en) .stat-grid{container-type:inline-size}
@media screen and (max-width:768px){
  :lang(en) .stat-amber,:lang(en) .stat-light{padding-left:1rem;padding-right:1rem}
  :lang(en) .stat-num-lg{font-size:1.375rem}
}
:lang(en) .stat-amber,:lang(en) .stat-light{padding-left:clamp(0.875rem,5.5cqi,1.75rem);padding-right:clamp(0.875rem,5.5cqi,1.75rem)}
:lang(en) .stat-num-lg{font-size:clamp(1.125rem,6.8cqi,1.75rem);overflow-wrap:anywhere}

/* ---- EN・モバイルの hero 見出し（2026-09-20 決裁）。既存 CSS にはモバイル用の指定が無く、EN は 72px のまま 5 行になって hero が 1174px に伸び、
   店舗サイトからの着地（375px）で「70+ / 10 companies」と問い合わせ CTA がスクロール 1 回以内に入らなかった。
   EN だけ 48px にする（実測: 3 行・hero 932px。JA の 924px と同等）。JA と 769px 以上は不変。 ---- */
@media screen and (max-width:768px){
  .hero-index .hero-title:lang(en){font-size:3rem}
}