/* 学校のAI教育・導入支援: responsive layout on fluid.css. Figma 15:124 is the visual reference. */

@media(min-width:1024px){.sc-hero .f-hero-copy{max-width:46vw}}
.sc-hero-lead{font:400 clamp(17px,.8rem + .6vw,23px)/1.6 "Noto Serif JP",serif;color:var(--navy)}
.sc-why-text{max-width:36em}

/* 帯の上に白い箱だけが浮いて見えていたので、縁を付けて見出しと頭をそろえる。 */
.sc-why-inner{align-items:start}
.sc-concerns{background:#fff;border:1px solid var(--border);border-radius:8px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.sc-concerns li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:center}
.sc-concerns li img{width:26px;height:26px}
.sc-concerns li span{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}

.sc-support-head{margin-bottom:clamp(28px,3.4vw,44px)}
.sc-support-note{margin-top:14px!important;max-width:46em;color:var(--muted);font-size:var(--fs-sm);font-family:"Noto Sans JP",sans-serif}
.sc-support-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
/* 行の高さは一番長いカードに合う。余った高さを中の行に配らせると、アイコンの段が間延びして
   カードごとに上端がずれる（説明文が3行のカードだけ上に見えていた）。上に詰める。 */
.sc-support-list li{display:grid;grid-template-columns:30px auto;align-items:center;gap:8px 10px;align-content:start}
.sc-support-icon{position:relative;width:30px;height:30px}
.sc-support-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sc-support-icon img.sc-glyph{inset:auto;object-fit:fill}
.sc-support-num{font:700 var(--fs-sm)/1.4 "Noto Sans JP",sans-serif;color:var(--terracotta)}
.sc-support-item{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sc-support-item h3{font:700 var(--fs-h3)/1.4 "Noto Serif JP",serif;color:var(--navy);min-height:2.8em;word-break:auto-phrase;overflow-wrap:anywhere}
/* ↑ 小見出しは文節で折り返す（「小さ／く試す」「見つけ／る」のように語の途中で切れていた）。 */
.sc-support-item p{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}

.sc-approach-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px 24px;margin-bottom:clamp(28px,3.2vw,40px)}
.sc-approach-head>.f-stack{max-width:46em}
.sc-pill{flex-shrink:0}
.sc-steps{display:flex}
.sc-steps li{position:relative;flex:1 1 0;aspect-ratio:185/104;display:flex;align-items:center;overflow:hidden}
.sc-step-arrow{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.sc-step-text{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px;padding-left:16%;padding-right:13%;color:var(--navy)}
.sc-step-label{flex:none;font:700 var(--fs-xs)/1.4 "Noto Sans JP",sans-serif;white-space:nowrap}
.sc-step-title{flex:none;font:700 var(--fs-sm)/1.4 "Noto Sans JP",sans-serif;white-space:nowrap}
.sc-step-desc{flex-basis:100%;font:400 var(--fs-xs)/1.5 "Noto Sans JP",sans-serif;opacity:.82}
.sc-step-last .sc-step-text{color:#fff}
.sc-approach-note{margin-top:clamp(20px,2.4vw,28px);max-width:46em}
.sc-approach-condition{margin-top:10px!important;max-width:46em;font:400 var(--fs-sm)/1.8 "Noto Sans JP",sans-serif;color:var(--muted)}

/* Shared FAQ accordion — used by school, business, lecture and tsukutto pages.
   Defined once here because school.css is loaded on every route (see site/index.html). */
.faq-wrap{display:flex;flex-direction:column;gap:20px}
.faq-head{gap:8px}
.faq-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:860px}
.faq-list details{border:1px solid var(--border);border-radius:6px;background:#fff}
.faq-list summary{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:52px;padding:15px 46px 15px 20px;list-style:none;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.faq-q{flex:none;font:700 var(--fs-xs)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.faq-q-text{flex:1;font:700 var(--fs-body)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.faq-icon{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:14px;height:14px}
.faq-icon:before,.faq-icon:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--navy)}
.faq-icon:after{transform:rotate(90deg);transition:transform .2s}
.faq-list details[open] .faq-icon:after{transform:rotate(0)}
.faq-a{display:flex;gap:10px;padding:0 20px 18px 20px}
.faq-a-prefix{flex:none;font:700 var(--fs-sm)/1.9 "Noto Sans JP",sans-serif;color:var(--terracotta)}
.faq-a p{margin:0;max-width:46em;font:400 var(--fs-sm)/1.9 "Noto Sans JP",sans-serif;color:var(--ink)}
@media(min-width:1024px){
 .faq-wrap{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,860px);align-items:start;gap:clamp(24px,3vw,40px)}
}
@media(prefers-reduced-motion:reduce){
 .faq-icon:after{transition:none}
}

@media(max-width:1023px){
 .sc-support-head{grid-template-columns:1fr;gap:16px}
 .sc-support-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .sc-approach-head{flex-direction:column;gap:16px}
 .sc-support-item h3{min-height:0}
 .sc-support-list{grid-template-columns:1fr}
 .sc-steps{display:flex;flex-direction:column;gap:8px}
 .sc-steps li{aspect-ratio:auto;background:#edf4f8;padding:12px 16px;border-radius:6px}
 .sc-steps li.sc-step-last{background:var(--navy)}
 .sc-step-arrow{display:none}
 .sc-step-text{padding-left:0;column-gap:10px}
 .sc-step-label{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:var(--navy);color:#fff;font:700 13px/1 "Noto Sans JP",sans-serif;white-space:nowrap}
 .sc-step-last .sc-step-label{background:#fff;color:var(--navy)}
}

/* 進め方の相談ボタンは、流れを見たあとに置く。 */
.sc-approach-cta{margin-top:clamp(24px,3vw,36px)}