/* ============================================================
   service-hero-light.css — サービスページ共通 ヒーローB案
   （ライト基調・右側ビジュアル型） 2026-06-10
   対象: web-consulting / portal-system / matching-system /
         recruit-system / ec-system / ai-system / business-system
   ▼ 元に戻す場合
   各ページのHTMLを _rollback/ 内の .orig に差し替えれば、
   本CSSへのlinkごと消えるため完全に元に戻ります。
   ※ portal-system.css / recruit-system.css / ec-system.css /
     common.css など既存CSSには一切手を加えていません
   ============================================================ */

/* hero 全体（.hero.hero--light の2クラスで既存定義より優先） */
.hero.hero--light{background:#f5f9fd;color:var(--ink);position:relative;overflow:hidden;padding:44px 0 22px}
.hero.hero--light::before{content:"";position:absolute;right:-150px;top:-180px;width:440px;height:440px;border-radius:50%;background:#e2effa}
.hero.hero--light::after{content:"";position:absolute;left:-110px;bottom:-170px;width:300px;height:300px;border-radius:50%;background:#eaf3fb}
.hero.hero--light .hero-inner{max-width:1100px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;position:relative;z-index:2}

/* 眉ラベル：枠ピル → ライン＋ブルー文字 */
.hero.hero--light .eyebrow{display:inline-flex;align-items:center;gap:10px;border:0;padding:0;border-radius:0;color:var(--blue);font-family:var(--latin);font-weight:700;font-size:13px;letter-spacing:.16em;margin-bottom:14px}
.hero.hero--light .eyebrow::before{content:"";display:inline-block;width:30px;height:2px;background:var(--blue)}

/* 見出し・リード（フォントは既存変数をそのまま踏襲） */
.hero.hero--light h1{color:#12283f}
.hero.hero--light h1 .accent{color:var(--blue)}
.hero.hero--light .lead{color:#46535f}
.hero.hero--light .lead .hl{color:var(--blue);font-weight:700}

/* ボタン：CTAはサイト共通オレンジを踏襲、ゴーストのみ明背景向けに反転 */
.hero.hero--light .btn-ghost{border:1.5px solid #9fb6cc;color:#12283f;background:#fff}
.hero.hero--light .btn-ghost:hover{background:#eef5fb;border-color:var(--blue);color:var(--blue)}

/* 右側ビジュアル */
.hero--light .hero-visual{max-width:400px;margin-left:auto;width:100%}
.hero--light .hero-visual svg{width:100%;height:auto;display:block}
.hero--light .hv-caption{display:flex;align-items:center;justify-content:center;gap:13px;font-size:15.5px;font-weight:700;color:#12283f;letter-spacing:.03em;margin-top:14px;line-height:1.5;text-align:center}
.hero--light .hv-caption::before,.hero--light .hv-caption::after{content:"";width:3px;height:21px;background:linear-gradient(180deg,var(--blue) 55%,#ffd34f 55%);border-radius:2px;flex-shrink:0}
.hero--light .hv-caption::before{transform:rotate(-30deg)}
.hero--light .hv-caption::after{transform:rotate(30deg)}

/* レスポンシブ */
@media(max-width:880px){
  .hero.hero--light .hero-inner{grid-template-columns:1fr;gap:0}
  /* スマホ・タブレット縦ではイラスト非表示（MVを短くし本文を上へ） */
  .hero--light .hero-visual{display:none}
}
@media(max-width:640px){
  .hero.hero--light{padding:34px 0 22px}
  .hero--light .hv-caption{font-size:14px;gap:11px}
  .hero--light .hv-caption::before,.hero--light .hv-caption::after{height:18px}
}

/* ============================================================
   ソリューションページ（.sol-hero）用 ライトヒーロー追加定義
   対象: solutions(ドア=.hero) / realestate / shigyo / trouble /
         recruit / btob / medical  2026-06-10
   ============================================================ */
.sol-hero.hero--light{background:#f5f9fd;color:var(--ink);padding:44px 24px 22px}
.sol-hero.hero--light::before{top:-180px;right:-150px;width:440px;height:440px;background:#e2effa}
.sol-hero.hero--light::after{content:"";position:absolute;left:-110px;bottom:-170px;width:300px;height:300px;border-radius:50%;background:#eaf3fb}
.sol-hero.hero--light .sol-hero-inner{max-width:1100px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.sol-hero.hero--light .cat{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:700}
.sol-hero.hero--light .cat::before{content:"";display:inline-block;width:30px;height:2px;background:var(--blue)}
.sol-hero.hero--light h1{color:#12283f}
.sol-hero.hero--light h1 .i{color:var(--blue)}
.sol-hero.hero--light .lead{color:#46535f}
.sol-hero.hero--light .btn-ghost{border:1.5px solid #9fb6cc;color:#12283f;background:#fff}
.sol-hero.hero--light .btn-ghost:hover{background:#eef5fb;border-color:var(--blue);color:var(--blue)}
@media(max-width:880px){
  .sol-hero.hero--light .sol-hero-inner{grid-template-columns:1fr;gap:0}
}
@media(max-width:640px){
  .sol-hero.hero--light{padding:34px 24px 22px}
}

/* ============================================================
   コンパクト版（イラストなし・.aheroと同等の高さ） 2026-06-10
   対象: knowhow ドアページ等のテキストのみヒーロー
   ============================================================ */
.hero.hero--light.hero--compact{padding:30px 0 22px}
.hero.hero--light.hero--compact .hero-inner{display:block;max-width:1080px}
.hero.hero--light.hero--compact .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.12em}
.hero.hero--light.hero--compact .eyebrow::before{width:22px}
.hero.hero--light.hero--compact h1{font-size:36px;margin-bottom:10px}
.hero.hero--light.hero--compact .lead{font-size:15px;line-height:1.8;margin-bottom:0;max-width:none}
@media(max-width:640px){.hero.hero--light.hero--compact{padding:24px 0 22px}}

/* ============================================================
   追加対応 2026-06-10: commitment/works/faq/flow/company/contact
   ============================================================ */
.hero.hero--light{text-align:left}
/* works用 .cat（eyebrow相当）とテキスト・実績数値のライト対応 */
.hero.hero--light .cat{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.16em;margin-bottom:14px}
.hero.hero--light .cat::before{content:"";display:inline-block;width:30px;height:2px;background:var(--blue)}
.hero.hero--light .hero-copy>p{color:#46535f;margin:0 0 18px;max-width:none}
.hero.hero--light .stats{justify-content:flex-start;margin-top:24px}
.hero.hero--light .stat b{color:#12283f}
.hero.hero--light .stat b small{color:var(--blue)}
.hero.hero--light .stat span{color:var(--gray)}
/* contact（.ct-hero）のライト対応 */
.ct-hero.hero--light{background:#f5f9fd;color:var(--ink);padding:44px 0 22px}
.ct-hero.hero--light::after{background:none}
.ct-hero.hero--light::before{content:"";position:absolute;right:-150px;top:-180px;width:440px;height:440px;border-radius:50%;background:#e2effa}
.ct-hero.hero--light .ct-hero-inner{max-width:1100px;text-align:left;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.ct-hero.hero--light .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue)}
.ct-hero.hero--light .eyebrow::before{content:"";display:inline-block;width:30px;height:2px;background:var(--blue)}
.ct-hero.hero--light h1{color:#12283f}
.ct-hero.hero--light .ac{color:var(--blue)}
.ct-hero.hero--light .hero-copy>p{font-size:15.5px;line-height:1.9;color:#46535f;max-width:none;margin:0}
.ct-hero.hero--light .ct-assure{justify-content:flex-start}
.ct-hero.hero--light .ct-assure .a{background:#fff;border:1.5px solid #cfe3f5;color:#12283f}
@media(max-width:880px){
  .ct-hero.hero--light .ct-hero-inner{grid-template-columns:1fr;gap:0}
}

/* ============================================================
   MV下の余白圧縮 2026-06-10
   （ヒーロー下22px＋直後ブロック上22px＝計44px≒パンくず高）
   ============================================================ */
/* PC/SP共通で50pxに統一。#ai-menu等のID指定paddingにも勝たせるため!important */
.hero.hero--light+section,
.sol-hero.hero--light+section,
.ct-hero.hero--light+.ct-wrap,
.hero.hero--light+.wk-wrap{padding-top:50px !important}