/* 徳島県の方へ (/tokushima)。部品はできるだけ既存のものを使う:
   お知らせの行（news.css の .nw-list）、TOPの事例カード（home.css の .hm-case-*）、
   サービスのカード（shared.css の .pg-other-*）、FAQ（.faq-*）。ここには、このページだけの並べ方を書く。 */
.tks-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:4px}
.tks-head{margin-bottom:clamp(28px,3.4vw,44px)}
.tks-head .f-body{color:var(--muted);font-family:"Noto Sans JP",sans-serif;font-size:var(--fs-sm)}

/* 主役の「ご相談いただけること」。カードの下に、相談への入口をもう一度置く。 */
.tks-services-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* 県との取り組み。1件目は横長の大きなカード、残りは3枚のカード。どちらも共通のカード（.pg-other-card）なので、
   マウスオーバーの動きは interactions.css の型がそのまま効く（ここに :hover は書かない）。 */
.tks-feature{flex-direction:row;align-items:stretch;height:auto;margin-bottom:clamp(18px,2.2vw,28px)}
.tks-feature-photo{flex:0 0 52%;aspect-ratio:16/9}
.tks-feature-body{justify-content:center;gap:12px;padding:clamp(20px,3vw,44px)}
.tks-feature-title{font:400 clamp(20px,.9rem + .9vw,28px)/1.55 "Noto Serif JP",serif;color:var(--navy)}
.tks-feature-lead{font:400 var(--fs-sm)/1.9 "Noto Sans JP",sans-serif;color:var(--ink)}
.tks-work-name{font-size:var(--fs-body);line-height:1.7;text-wrap:pretty}
/* 見出しは文節で折り返す（「締結しま／した」のように語の途中で切れていた）。入りきらないときだけ途中でも折る。 */
.tks-feature-title,.tks-work-name{word-break:auto-phrase;overflow-wrap:anywhere}
.tks-work-list .pg-other-body{gap:10px}
/* 写真の無いお知らせは、そこに書いてある事実を札にする。 */
.tks-fact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:16px;background:var(--navy);color:#fff;text-align:center}
.tks-fact strong{font:700 clamp(26px,1rem + 1.6vw,38px)/1.2 "Noto Sans JP",sans-serif;letter-spacing:.04em}
.tks-fact span{font:400 var(--fs-xs)/1.6 "Noto Sans JP",sans-serif;opacity:.9}

.tks-cases-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.tks-case-grid{row-gap:clamp(28px,3.4vw,48px)}
.tks-media{margin-top:clamp(36px,4vw,56px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--border)}
.tks-media h3{font:700 var(--fs-sm)/1.6 "Noto Sans JP",sans-serif;color:var(--navy);margin-bottom:10px!important}
.tks-media li{display:grid;grid-template-columns:7em minmax(0,12em) minmax(0,1fr);gap:4px 20px;padding:8px 0;font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}
.tks-media time{color:var(--terracotta)}
/* コラムへのリンクは1行ずつ。メディア掲載の3列の表組みは使わない。 */
.tks-columns li{display:block}
.tks-columns .f-link{word-break:auto-phrase;overflow-wrap:anywhere}

/* カードごとに「誰向けか」の札を付ける。 */
.tks-for{font:700 var(--fs-xs)/1.6 "Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--terracotta)}

.tks-base-photo{aspect-ratio:4/3}
.tks-address{display:flex;flex-direction:column;gap:2px;font-style:normal;font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}
.tks-address strong{font-weight:700;color:var(--navy)}

@media(max-width:767px){
 .tks-media li{grid-template-columns:1fr;gap:0;padding:10px 0}
 .tks-service-list,.tks-work-list{grid-template-columns:1fr}
 .tks-feature{flex-direction:column}
 .tks-feature-photo{flex:none}
}
@media(min-width:768px) and (max-width:1023px){
 .tks-service-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tks-feature-photo{flex-basis:46%}
}