/* =========================================================
   ソリューション一覧（4つのソリューションをまとめるハブページ）
   写真つきの白いカードを2列。カード下部に番号＋英語名・名称・説明・対象タグ・リンク
========================================================= */
.sol-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sol-row{display:flex;flex-direction:column;overflow:hidden;border-radius:8px;background:#fff;text-decoration:none !important;transition:box-shadow .3s,transform .3s}
a.sol-row,a.sol-row:link,a.sol-row:visited{color:var(--ink)}
.sol-row:hover{box-shadow:0 10px 30px rgba(22,50,57,.10);transform:translateY(-2px)}
.sol-thumb{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.sol-body{display:flex;flex-direction:column;flex:1;padding:26px clamp(22px,3vw,32px) 30px}
.sol-en{font-size:13px;font-weight:700;letter-spacing:.08em;color:#17808a}
.sol-no{margin-right:12px}
.sol-name{margin-top:12px;font-size:clamp(21px,2.2vw,25px);font-weight:700;line-height:1.5;color:#1c2b33}
.sol-desc{margin-top:12px;font-size:14.5px;line-height:1.85;color:var(--sub)}
.sol-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.sol-tags span{padding:4px 12px;border-radius:999px;background:#e2f0f1;font-size:12.5px;font-weight:500;color:#1f5f66}
.sol-more{margin-top:auto;padding-top:22px;font-size:14px;font-weight:700;letter-spacing:.04em;color:#17808a}
.sol-more::after{content:">";display:inline-block;margin-left:10px;transform:scale(.6,1.2)}
@media(max-width:760px){.sol-list{grid-template-columns:1fr;gap:16px}}

/* =========================================================
   Feature ブロック（automation / visualization / marketing / modernize 共通）
   共通の変数・タイポグラフィ・レイアウト・page-hero・cta-band等は design-base.css 側
========================================================= */
.feat{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--hairline)}
.feat h3{font-size:20px;color:var(--navy)}
.feat p{font-size:16.5px;color:var(--sub)}
.feat ul{margin-top:12px}
.feat li{font-size:16px;color:var(--sub);padding:7px 0 7px 18px;position:relative}
.feat li::before{content:"";position:absolute;left:0;top:1.1em;width:8px;height:1px;background:var(--brand)}
.feat strong{color:var(--ink);font-weight:700}
@media(max-width:720px){.feat{grid-template-columns:1fr;gap:14px;padding:34px 0}}

/* =========================================================
   modernize 専用：課題一覧グリッド
========================================================= */
/* unique.css の ul{padding-left:2rem} で1枚目だけ右にずれるため、余白を打ち消す */
.mdn-issues{margin-top:48px;padding:0;gap:0;border:1px solid var(--hairline);display:grid;grid-template-columns:repeat(3,1fr)}
.mdn-issues li{background:#fff;padding:32px 26px;border-right:1px solid var(--hairline)}
.mdn-issues li:last-child{border-right:none}
.mdn-issues h4{font-size:17.5px;color:var(--ink)}
.mdn-issues p{font-size:15.5px;color:var(--sub);margin-top:12px;line-height:1.85}
@media(max-width:820px){
  .mdn-issues{grid-template-columns:1fr}
  .mdn-issues li{border-right:none;border-bottom:1px solid var(--hairline)}
  .mdn-issues li:last-child{border-bottom:none}
}

/* =========================================================
   modernize 専用：FROM/TO シフト図
========================================================= */
/* FROM→TO：PCは本文幅いっぱいに横並び（→）で比べて見せる。スマホは縦積み（↓） */
.mdn-shift{margin-top:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:24px}
.mdn-shift .box{border:1px solid var(--hairline);padding:30px}
.mdn-shift .box.to{border-color:var(--brand)}
.mdn-shift h4{font-size:14.5px;letter-spacing:.2em;color:#6b7580;font-weight:400;font-family:var(--sans)}  /* --faint だと白背景で薄く読みにくいため濃くした */
.mdn-shift .box.to h4{color:var(--navy)}
.mdn-shift p{font-family:var(--serif);font-size:17.5px;margin-top:12px;line-height:1.9;font-weight:500}
.mdn-shift .ar{display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:21.5px}
@media(max-width:760px){
  .mdn-shift{grid-template-columns:1fr;gap:10px}
  .mdn-shift .ar{transform:rotate(90deg)}
}

/* =========================================================
   modernize 専用：財務インパクトブロック
========================================================= */
.fin-block{margin-top:64px;background:none;border:1px solid var(--hairline);border-radius:0;padding:clamp(26px,4vw,40px)}
.fin-h{font-size:clamp(19.5px,2.6vw,25.5px);margin-bottom:32px}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fin-cell{background:none;padding:0 26px 0 0}
.fin-cell:last-child{padding:0 0 0 26px;border-left:1px solid var(--hairline)}
.fin-label{display:inline-block;font-size:12.5px;letter-spacing:.2em;color:var(--brand-text);background:none;border:1px solid var(--brand);border-radius:2px;padding:5px 16px;font-weight:500}
.fin-cell ul{margin-top:20px}
.fin-cell li{font-size:16px;color:var(--sub);line-height:1.85;padding:9px 0 9px 18px;position:relative;border-bottom:1px solid var(--hairline)}
.fin-cell li:last-child{border-bottom:none}
.fin-cell li::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:1px;background:var(--brand)}
.fin-cell li strong{font-weight:700;color:var(--ink)}
.fin-note{margin-top:24px;font-size:14px;color:var(--faint);line-height:1.9}
@media(max-width:820px){
  .fin-grid{grid-template-columns:1fr}
  .fin-cell,.fin-cell:last-child{padding:0;border-left:none}
}

/* ページヒーロー下のメイン写真（automation / visualization / marketing / modernize） */
.page-hero-image{margin:40px 0 0}
.page-hero-image img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:6px}
@media(max-width:720px){.page-hero-image{margin-top:28px}.page-hero-image img{aspect-ratio:4/3}}

/* ソリューション一覧：カードのサムネイル（各ソリューションページ冒頭と同じ写真） */
.sol-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:24px}

/* =========================================================
   ソリューション各ページ：タイトル帯＋ヒーロー（automation / visualization / marketing / modernize 共通）
========================================================= */
/* タイトル帯：色・形・文字サイズは共通（common.css）のまま。h1の開始位置は本文(.wrap)にそろえる */
body:not(.home) main .wrapper-h1 h1{max-width:var(--max);padding-left:var(--pad);padding-right:var(--pad)}

/* ヒーロー：左に文章・右に写真の2カラム */
.page-hero{padding:96px 0 104px}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:72px}
.page-hero .wrap > *{grid-column:1}
.page-hero .pnum{grid-row:2}
.page-hero h2{grid-row:3}
.page-hero .plead{grid-row:4}
.page-hero .ptargets{grid-row:5}
.page-hero .page-hero-image{grid-column:2;grid-row:1 / -1;align-self:center;margin:0}
.page-hero-image img{aspect-ratio:5/4;border-radius:16px}

/* ラベル：「SOLUTION 01 ── AUTOMATION」を1行に（AUTOMATIONはh2内のsmallなので、pnumの横へ配置） */
.page-hero .pnum{font-size:14.5px;letter-spacing:.18em;line-height:20px;margin:0}
.page-hero .pnum::after{content:"";display:inline-block;vertical-align:middle;width:24px;height:1px;background:var(--navy);margin-left:12px}
.page-hero h2{margin:20px 0 0;font-size:clamp(23.5px,3.2vw,34px);font-weight:500;color:#1c2b33;line-height:1.5}
.page-hero h2 small{margin:0 0 20px;font-size:14.5px !important;line-height:20px;letter-spacing:.18em;font-weight:500;white-space:nowrap}
/* 対応ブラウザでは SOLUTION 0X の線の右端に AUTOMATION を並べる（番号の幅がページごとに違うためアンカー配置） */
@supports (anchor-name:--a){
  .page-hero .wrap{position:relative}
  .page-hero .pnum{anchor-name:--sol-pnum;justify-self:start}
  .page-hero h2 small{position:absolute;position-anchor:--sol-pnum;left:calc(anchor(right) + 12px);top:anchor(top);margin:0}
}
@supports not (anchor-name:--a){
  .page-hero .pnum::after{display:none}
  .page-hero h2{margin-top:4px}
}
.page-hero .plead{margin-top:24px}

/* 対象タグ：淡色ピル */
.page-hero .ptargets{margin-top:32px}
.page-hero .ptargets span{border:none;border-radius:999px;background:#e5f1f8;color:var(--navy);font-size:14.5px;letter-spacing:.06em;font-weight:500;padding:6px 14px}

@media(max-width:820px){
  .page-hero{padding:48px 0 56px}
  .page-hero .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .page-hero .pnum{grid-row:1}
  .page-hero h2{grid-row:2}
  .page-hero .page-hero-image{grid-column:1;grid-row:3;margin-top:28px}
  .page-hero .plead{grid-row:4;margin-top:28px}
  .page-hero .ptargets{grid-row:5;margin-top:24px}
  .page-hero .pnum{font-size:13.5px;letter-spacing:.16em}
  .page-hero h2 small{font-size:13.5px !important;letter-spacing:.16em}
  .page-hero-image img{aspect-ratio:4/3;border-radius:14px}
}

/* セクション見出し：少しグレー寄りに */
.sec-title{color:#1c2b33}

/* ラベル：事例紹介・会社紹介・採用・技術ページと同じティールの小さい太字にそろえる */
.eyebrow{font-size:14.5px;font-weight:700;letter-spacing:.18em;line-height:20px;color:#17808a}
.eyebrow::before{background:#17808a}
@media(max-width:720px){.eyebrow{font-size:13.5px;letter-spacing:.16em}}

/* ソリューション一覧（写真なしのヒーロー）：1カラムで、ラベル＋大きな見出し＋リード文 */
.page-hero .wrap:not(:has(.page-hero-image)){display:block}

/* ブロックごとの背景色：技術・開発体制ページと同じく「白 → 薄い青緑のグラデーション → 白」の交互で区切る
   ヒーロー＝白、1つ目のブロック（Feature など）＝薄い青緑、2つ目以降（関連事例・visualization の Case B・modernize の Approach）＝白 */
.page-hero{background:#fff}
.page-hero + section{background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%)}
.page-hero + section ~ section{background:#fff}
/* 3つ目のブロック（visualization・modernize の関連事例）は再び薄い青緑にして、白が2つ続かないようにする */
.page-hero + section + section + section{background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%)}
/* 色で区切るので、ヒーロー下・ブロック間の線は不要 */
.page-hero{border-bottom:none}
.hairline-top{border-top:none}
main section{padding-top:clamp(72px,9vw,112px);padding-bottom:clamp(72px,9vw,112px)}

/* =========================================================
   ソリューション各ページ：改善案のデザイン（automation から適用）
========================================================= */
/* ヒーロー：見出しを2行の大きな太字に */
.page-hero{padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px)}
.page-hero:has(.page-hero-image) h2{font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.35;letter-spacing:.02em;word-break:auto-phrase}
.sec-title{font-size:clamp(24px,3vw,34px);line-height:1.5}
/* 対象タグ：先頭に「こんな方に」を付け、ティールの淡色ピルに */
.page-hero .ptargets{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.page-hero .ptargets::before{content:"こんな方に";margin-right:6px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:#1c2b33}
.page-hero .ptargets span{background:#e2f0f1;color:#1f5f66;font-size:13.5px;padding:5px 14px}

/* Feature：白いカードを3つ横並び（番号・見出し・説明・区切り線・箇条書き） */
div:has(> .feat){display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:feat}
.feat{display:block;padding:28px 26px 30px;border:none;border-radius:8px;background:#fff;counter-increment:feat}
.page-hero + section ~ section .feat{border:1px solid #e3eaee}
.feat::before{content:counter(feat,decimal-leading-zero);display:block;margin-bottom:14px;font-size:24px;font-weight:700;line-height:1;color:#17808a}
.feat h3{font-size:19px;line-height:1.5;color:#1c2b33}
.feat p{margin-top:14px;font-size:15px;line-height:1.85;color:var(--sub)}
.feat ul{margin:20px 0 0;padding:16px 0 0;border-top:1px solid #e3eaee}
.feat li{padding:5px 0 5px 22px;font-size:14.5px;font-weight:500;line-height:1.7;color:#1c2b33}
.feat li::before{top:1.05em;width:10px;height:2px;background:#17808a}
@media(max-width:860px){div:has(> .feat){grid-template-columns:1fr;gap:12px}}

/* 関連する導入事例：見出しの右に一覧リンク、下に横長の事例カードを2つ */
.sol-related-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.sol-related-head .sec-title{margin-bottom:0}
.sol-related-more{flex:none;font-size:14.5px;font-weight:700;letter-spacing:.04em;color:#17808a !important;text-decoration:none !important}
.sol-related-more::after{content:">";display:inline-block;margin-left:10px;transform:scale(.6,1.2)}
.rel-cases{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rel-case{display:flex;align-items:center;gap:20px;height:100%;padding:14px;border:1px solid #e3eaee;border-radius:8px;background:#fff;text-decoration:none !important;transition:border-color .3s,box-shadow .3s}
.rel-case:hover{border-color:#bfdfe2;box-shadow:0 6px 20px rgba(23,52,59,.07)}
.rel-case-thumb{flex:none;width:36%;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#f1f5f7}
.rel-case-thumb img{width:100%;height:100%;object-fit:cover}
.rel-case-body{display:flex;flex-direction:column;gap:4px}
.rel-case-badge{font-size:12px;font-weight:700;letter-spacing:.1em;color:#1c2b33}
.rel-case-cat{font-size:13px;font-weight:700;color:#17808a}
.rel-case-title{margin-top:2px;font-size:16.5px;font-weight:700;line-height:1.6;color:#1c2b33}
@media(max-width:860px){.rel-cases{grid-template-columns:1fr;gap:12px}}
@media(max-width:520px){.sol-related-head{flex-direction:column;align-items:flex-start}}

/* modernize：課題カード・FROM/TO も Feature と同じ白いカードの見た目にそろえる（h4 の灰色の帯は unique.css 由来なので外す） */
.mdn-issues{gap:16px;border:none}
.mdn-issues li,.mdn-issues li:last-child{padding:28px 26px 30px;border:none;border-radius:8px}
.mdn-issues h4,.mdn-shift h4{padding:0;background:none}
.mdn-shift .box{border-radius:8px;background:#fff}
@media(max-width:820px){.mdn-issues li,.mdn-issues li:last-child{border-bottom:none}}

/* ソリューション一覧のヒーロー：技術・事例紹介と同じ大きな見出し（後ろの .page-hero の余白指定より優先させるため末尾に置く） */
.page-hero:not(:has(.page-hero-image)){padding:clamp(56px,7vw,104px) 0 clamp(56px,6vw,80px)}
.page-hero:not(:has(.page-hero-image)) h2{margin-top:20px;font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.35;letter-spacing:.02em}
.page-hero:not(:has(.page-hero-image)) .plead{margin-top:28px;max-width:720px;font-size:16.5px;line-height:1.95}