/* support-20261030.css — 2026-10-30 構成整理（D-225）。業務改善・AI支援（ai-support）の 5 段の構成の見た目。experience.css・hub-20261030.css の後に読む
   既存の ax- の部品（ax-section・ax-soft・ax-dark・ax-reveal・ax-button・ax-proof・ax-impact-stack・ax-team-photo）を組み合わせ、足りないものだけをここに書く（接頭辞 ax-sp-）。
   色は experience.css の変数（--ax-green・--ax-lime・--ax-soft・--ax-line・--ax-muted・--ax-ink）だけを使う */

/* 01 支援内容：依頼できること（ヒーローの右） */
.ax-sp-asks{background:var(--ax-soft);padding:34px 38px;box-shadow:12px 12px 0 #dde7d2}
.ax-site .ax-sp-asks-title{font:700 11px/1.7 var(--ax-number),var(--ax-font);letter-spacing:.13em;color:var(--ax-green);margin-bottom:8px}
.ax-sp-asks ol{list-style:none;margin:0;padding:0}
.ax-sp-asks li{display:grid;grid-template-columns:42px 1fr;gap:4px 12px;padding:20px 0;border-top:1px solid #becfb9}
.ax-sp-asks li:last-child{padding-bottom:4px}
.ax-sp-asks .ax-index{padding-top:5px}
.ax-site .ax-sp-asks h3{font-size:19px;line-height:1.5}
.ax-sp-asks p{font-size:13px;line-height:1.9;color:var(--ax-muted);margin-top:6px}

/* 01 の背景（#why-now）。2〜3 文に縮めた帯 */
.ax-sp-why{padding:58px 0;border-top:1px solid var(--ax-line);border-bottom:1px solid var(--ax-line);background:#fff}
.ax-sp-why-inner{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.ax-sp-why-inner>.ax-eyebrow{margin:6px 0 0!important}
.ax-site .ax-sp-why h2{font-size:clamp(22px,2.2vw,30px);line-height:1.6}
.ax-sp-why .ax-body{max-width:760px;margin-top:16px!important}

/* 01 の計算機：結果の要点を先に、入力の全項目は開閉の中 */
.ax-sp-glance{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ax-sp-glance .ax-impact-stack>.ax-eyebrow{line-height:1.8}
.ax-sp-glance-result{border:1px solid var(--ax-line);border-top:3px solid var(--ax-green);background:#fff;padding:32px 34px;display:flex;flex-direction:column}
.ax-sp-glance-result>.ax-eyebrow{font-size:10px}
.ax-sp-glance-result dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.ax-sp-glance-result dl>div{padding:16px 0;border-top:1px solid var(--ax-line)}
.ax-sp-glance-result dt{font-size:12px;font-weight:700}
.ax-sp-glance-result dt small{display:block;font-size:10px;font-weight:500;color:var(--ax-muted);margin-top:2px}
.ax-sp-glance-result dd{margin:6px 0 0;font-size:13px}
.ax-sp-glance-result dd strong{font:700 40px/1.15 var(--ax-number);color:var(--ax-green);letter-spacing:-.04em;margin-right:6px}
.ax-sp-glance-result .ax-sp-glance-diff dd strong{color:var(--ax-ink)}
.ax-sp-glance-result .ax-note{margin-top:14px!important}

.ax-sp-calc{margin:34px 0 0}
.ax-sp-calc>summary{list-style:none;width:max-content;max-width:100%;cursor:pointer}
.ax-sp-calc>summary::-webkit-details-marker{display:none}
.ax-sp-calc>summary .ax-sp-calc-close{display:none}
.ax-sp-calc[open]>summary{background:#fff;color:var(--ax-green)}
.ax-sp-calc[open]>summary .ax-sp-calc-open{display:none}
.ax-sp-calc[open]>summary .ax-sp-calc-close{display:inline}
.ax-sp-calc .ax-sp-calc-mark{transition:transform .2s}
.ax-sp-calc[open] .ax-sp-calc-mark{transform:rotate(45deg)}
.ax-sp-calc-body{margin-top:26px}
.ax-sp-calc-section>.ax-wrap>.ax-note{max-width:900px}

/* 01 の「何が変わるか」 */
.ax-sp-change .ax-value-chain h3{font-size:19px}

/* 02 取り組み：カード A・B・C */
.ax-sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.ax-sp-card{background:#fff;border-top:3px solid var(--ax-green);padding:30px 30px 28px;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.ax-sp-card:hover{box-shadow:0 14px 34px #123e3214;transform:translateY(-3px)}
.ax-sp-card-kicker{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:var(--ax-green);letter-spacing:.04em}
.ax-sp-card-kicker span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ax-green);color:#fff;font:700 12px var(--ax-number);flex:none}
.ax-site .ax-sp-card h3{font-size:21px;line-height:1.55;margin:18px 0 14px}
.ax-sp-card>p:not(.ax-sp-card-kicker){font-size:13px;line-height:2;color:var(--ax-muted)}
.ax-sp-card>p.ax-sp-card-who{font-size:12px;line-height:1.8;color:var(--ax-ink);background:var(--ax-soft);padding:9px 12px;margin-bottom:14px}
.ax-sp-card-who b{font-size:10px;color:var(--ax-green);margin-right:10px;letter-spacing:.06em}
.ax-sp-card>p.ax-sp-card-note{font-size:11px;line-height:1.9;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ax-line)}
.ax-sp-card>p.ax-sp-source,.ax-sp-source{font-size:11px;line-height:1.9;margin-top:10px}
.ax-sp-source a{margin-right:12px;color:var(--ax-green);white-space:nowrap}
.ax-sp-card>.ax-text-link{margin-top:auto;align-self:flex-start}
.ax-sp-card>p+.ax-text-link{margin-top:22px}
.ax-sp-card>.ax-sp-source+.ax-text-link{margin-top:22px}

/* 03 メンバー：入口の 3 人＋開発チーム */
.ax-sp-people{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ax-sp-person{background:var(--ax-soft);display:flex;flex-direction:column}
.ax-sp-person-photo{aspect-ratio:4/4.4;overflow:hidden;background:#dfe8d6}
.ax-sp-person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.ax-sp-person-body{padding:22px 24px 26px}
.ax-sp-person-title{font-size:11px;line-height:1.7;color:var(--ax-green);font-weight:700}
.ax-site .ax-sp-person h3{font-size:22px;margin:6px 0 10px}
.ax-sp-person-body>p:last-child{font-size:13px;line-height:1.9;color:var(--ax-muted)}
.ax-sp-team{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center;margin-top:44px;padding-top:44px;border-top:1px solid var(--ax-line)}
.ax-site .ax-sp-team h3{font-size:26px}
.ax-sp-team .ax-body{margin-top:12px!important}
.ax-sp-team .ax-actions{margin-top:26px}
.ax-sp-team .ax-team-photo figcaption{font-size:10px}

/* 04 実績：事例 A・B（課題／実施／変化） */
.ax-sp-case-list{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.ax-sp-case{background:#fff;padding:32px;display:flex;flex-direction:column;border-top:3px solid var(--ax-green)}
.ax-site .ax-sp-case h3{font-size:23px;margin-top:14px}
.ax-sp-case .ax-proof{margin-top:22px;padding:22px 24px}
.ax-sp-case .ax-proof b{font-size:64px}
.ax-sp-case .ax-proof>div{margin:4px 0 6px}
.ax-sp-case .ax-proof p{margin:6px 0 0}
.ax-sp-case-steps{margin:22px 0 0;display:grid;gap:0}
.ax-sp-case-steps>div{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--ax-line)}
.ax-sp-case-steps dt{font-size:11px;font-weight:700;color:var(--ax-green);padding-top:2px}
.ax-sp-case-steps dd{margin:0;font-size:13px;line-height:1.9}
.ax-sp-case>.ax-note{margin-top:16px!important}
.ax-sp-case>.ax-text-link{margin-top:auto;align-self:flex-start}
.ax-sp-case>dl+.ax-text-link,.ax-sp-case>.ax-note+.ax-text-link{margin-top:22px}
.ax-sp-cases-note{max-width:760px}

/* 05 進め方の要約 */
.ax-sp-process{padding-bottom:90px}
.ax-sp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ax-line)}
.ax-sp-steps li{position:relative;padding:26px 22px 26px 0}
.ax-sp-steps li:not(:last-child):after{content:'→';position:absolute;right:14px;top:50px;color:var(--ax-green);font-weight:700}
.ax-site .ax-sp-steps h3{font-size:20px;margin-top:12px}
.ax-sp-process-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;margin-top:26px}
.ax-sp-process-links p{font-size:12px;color:var(--ax-muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.ax-sp-process-links p a{color:var(--ax-green);font-weight:700}

@media(max-width:1100px){
 .ax-sp-asks{padding:28px}
 .ax-sp-glance{gap:26px}
 .ax-sp-glance-result{padding:26px}
 .ax-sp-glance-result dd strong{font-size:34px}
 .ax-sp-cards,.ax-sp-people{gap:18px}
 .ax-sp-card{padding:26px 22px}
 .ax-sp-case{padding:26px}
}
@media(max-width:800px){
 .ax-sp-asks{padding:24px 22px;box-shadow:8px 8px 0 #dde7d2}
 .ax-sp-why{padding:44px 0}
 .ax-sp-why-inner{grid-template-columns:1fr;gap:12px}
 .ax-sp-glance{grid-template-columns:1fr}
 .ax-sp-glance-result{padding:24px 22px}
 .ax-sp-glance-result dl{gap:0 18px}
 .ax-sp-glance-result dd strong{font-size:30px}
 .ax-sp-calc>summary{width:100%}
 .ax-sp-cards,.ax-sp-case-list{grid-template-columns:1fr}
 .ax-sp-people{grid-template-columns:1fr;gap:14px}
 .ax-sp-person{flex-direction:row;align-items:stretch}
 .ax-sp-person-photo{aspect-ratio:auto;width:118px;flex:none;min-height:150px}
 .ax-sp-person-body{padding:16px 18px}
 .ax-site .ax-sp-person h3{font-size:19px}
 .ax-sp-team{grid-template-columns:1fr;gap:26px;margin-top:32px;padding-top:32px}
 .ax-site .ax-sp-team h3{font-size:22px}
 .ax-sp-case{padding:24px 22px}
 .ax-sp-case .ax-proof b{font-size:56px}
 .ax-sp-steps{grid-template-columns:1fr 1fr}
 .ax-sp-steps li{padding:20px 14px 20px 0;border-bottom:1px solid var(--ax-line)}
 .ax-sp-steps li:after{display:none}
 .ax-site .ax-sp-steps h3{font-size:17px}
}
@media(max-width:420px){
 .ax-sp-glance-result dl{grid-template-columns:1fr}
 .ax-sp-person-photo{width:100px}
}