@charset "UTF-8";
/* ===========================================================
   5分でわかる 地域共育ラボ ── 共通スタイル（v6）
   白ベース＋青系の3色。トップは薄く、詳細は別ページへ逃がす。
   =========================================================== */
:root{
  --brand:#1F7AB8; --brand-d:#14587F; --brand-l:#EAF4FB;
  --paper:#FFFFFF; --ink:#1E2A32; --mute:#5E7180; --line:#DCE6ED;
  --accent:#E1734B;
  --serif:"Yu Mincho","Hiragino Mincho ProN",serif;
  --goth:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--goth);line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
img{max-width:100%}
a{color:var(--brand-d)}

/* 校正メモ */
.rev{margin:16px 0;border-left:3px solid var(--accent);background:#FDF4F0;font-size:13.5px;line-height:1.85}
.rev summary{cursor:pointer;padding:9px 14px;font-weight:800;color:#A8482A;letter-spacing:.04em}
.rev .rvin{padding:2px 14px 14px}
.rev p{margin:0 0 8px}
body.clean .rev{display:none}
#tg{position:fixed;right:18px;bottom:18px;z-index:99;background:var(--brand-d);color:#fff;border:0;
    font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.06em;padding:12px 18px;border-radius:4px;cursor:pointer;
    box-shadow:0 4px 14px rgba(20,88,127,.28)}

/* 写真ダミー */
.phwrap{position:relative}
.dummybadge{position:absolute;right:12px;bottom:12px;z-index:5;background:rgba(30,42,50,.72);color:#fff;
    font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:3px}
/* 写真待ちの枠 */
.phempty{display:flex;align-items:center;justify-content:center;background:var(--brand-l);
    border:1.5px dashed #B9CFDF;aspect-ratio:4/3}
.phempty span{font-size:12.5px;line-height:1.9;color:#7E97A8;text-align:center;font-weight:700;letter-spacing:.04em}
/* 幅いっぱいの帯写真 */
.band{margin:0;line-height:0}
.band img{width:100%;height:clamp(180px,26vw,300px);object-fit:cover;display:block}

/* ヘッダー */
.hd{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto;padding:34px 28px 26px;gap:16px}
.hd .lg{font-weight:800;font-size:17px;letter-spacing:.12em;color:var(--brand-d);text-decoration:none}
.hd .lg small{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--brand);font-weight:800;margin-bottom:2px}
.hd .kick{font-size:11.5px;letter-spacing:.16em;color:var(--mute);font-weight:700;text-align:right}

/* セクション */
section{padding:74px 0 68px}
section+section{border-top:1px solid var(--line)}
section.tint{background:var(--brand-l);border-top:0}
.num{font-size:11.5px;letter-spacing:.34em;color:var(--brand);font-weight:800;margin:0 0 8px}
h2{font-size:clamp(23px,3.2vw,31px);letter-spacing:.1em;margin:0 0 10px;color:var(--brand-d);font-weight:800;line-height:1.6}
.sub{font-size:14px;color:var(--mute);margin:0 0 36px;letter-spacing:.04em}
p.body{max-width:37em;font-size:15.5px;margin:0 0 15px}
.note{font-size:13px;color:var(--mute);max-width:44em}
/* 文中のリンクは途中で折らない。折れると次の行が「と、」で始まって読みにくい */
.note a{white-space:nowrap}
h3{color:var(--brand-d)}

/* 「詳しく見る」 */
.more{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0;font-weight:800;font-size:14px;
  letter-spacing:.08em;color:var(--brand-d);text-decoration:none;border-bottom:2px solid var(--brand);padding-bottom:5px}
.more::after{content:"→";color:var(--brand)}
.more:hover{color:var(--brand)}
.back{display:inline-block;margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mute);text-decoration:none}
.back::before{content:"← "}



/* 事例 */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0 0}
.case .phwrap{aspect-ratio:4/3;overflow:hidden}
.case .phwrap img{width:100%;height:100%;object-fit:cover;display:block}
.case h3{margin:12px 0 5px;font-size:15.5px;letter-spacing:.04em}
.case p{margin:0;font-size:13.5px;color:var(--mute)}
@media(max-width:760px){.cases{grid-template-columns:1fr}}

/* 年表 */
.tl{list-style:none;margin:0;padding:0;max-width:44em}
.tl li{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.tl time{color:var(--brand);font-weight:800;flex:none;width:8em;letter-spacing:.04em;font-size:14px}
.tl li.empty span{color:#9AAEBC;font-size:13.5px}

/* フォーム */
.form{max-width:34em}
.form label{display:block;font-weight:800;font-size:13px;margin:18px 0 6px;letter-spacing:.06em}
.form label i{font-style:normal;color:var(--accent);font-size:11px;margin-left:6px}
.form input,.form select,.form textarea{width:100%;border:1.5px solid #C3D4E0;background:#fff;padding:11px 12px;font-size:15px;font-family:inherit}
.form textarea{min-height:110px}
/* 送信ボタン直上の個人情報の一文 */
.ppnote{margin:24px 0 0;padding:13px 16px;background:var(--brand-l);border-left:3px solid var(--brand);
  font-size:13px;line-height:1.85;color:var(--brand-d)}
.ppnote a{font-weight:700;white-space:nowrap}
.form .ppnote+button{margin-top:18px}
.form button{margin-top:22px;background:var(--brand);color:#fff;border:0;font-weight:800;font-size:15px;letter-spacing:.18em;padding:14px 44px;cursor:pointer}
.form button:hover{background:var(--brand-d)}
.form button:disabled{background:#9AAEBC;cursor:default}
.form [aria-invalid="true"]{border-color:var(--accent);background:#FDF6F3}
.fmsg{margin:14px 0 0;font-size:14px;font-weight:700;min-height:1.2em}
.fmsg.ng{color:#C25835}
.fdone{margin:0;padding:22px 24px;background:var(--brand-l);border-left:3px solid var(--brand);
  font-size:15px;line-height:1.95;font-weight:700;color:var(--brand-d)}
.info{margin:40px 0 0;font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:22px}
.info b{color:var(--ink)}
footer{background:var(--brand-d);color:#CFE1EC;font-size:13px;padding:30px 0;letter-spacing:.04em}
footer a{color:#CFE1EC}

/* 詳細ページの見出し帯 */
.phead{background:var(--brand-l);padding:44px 0 40px;margin:0 0 0}
.phead h1{margin:6px 0 8px;font-size:clamp(25px,3.6vw,34px);letter-spacing:.1em;color:var(--brand-d);line-height:1.55}
.phead p{margin:0;font-size:14.5px;color:var(--mute);max-width:40em}

/* ── 図の共通 ── */
.figbox{margin:30px 0 8px}
.figttl{font-weight:800;font-size:13.5px;letter-spacing:.16em;color:var(--brand);margin:0 0 16px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin:24px 0 0;max-width:58em}
.legend dl{margin:0;font-size:14px}
.legend dt{font-weight:800;color:var(--brand-d);margin:0 0 3px;letter-spacing:.06em}
.legend dd{margin:0;color:var(--mute)}
@media(max-width:720px){.legend{grid-template-columns:1fr}}

/* ── 共育の仕組み（HTML製・スマホでは縦に積む。横スクロールさせない） ── */
/* 成果は「子ども」の先ではなく、ラボから下へ生やす（2026-08-14 吉田様の指示）
   列そろえが要るので flex ではなく grid で組む */
.dg{display:grid;grid-template-columns:1.15fr 38px 1.15fr 88px 1.15fr;
    grid-template-rows:auto 40px auto;align-items:stretch}
.dg .stack{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:12px;justify-content:center}
.dg .cell{display:flex;flex-direction:column;justify-content:center}
.dg .a1{grid-column:2;grid-row:1}
.dg .c-hub{grid-column:3;grid-row:1}
.dg .a2{grid-column:4;grid-row:1}
.dg .c-kid{grid-column:5;grid-row:1}
.dg .a3{grid-column:3;grid-row:2}       /* ラボの真下 */
.dg .c-out{grid-column:3 / 6;grid-row:3}
.dg .ar{display:flex;align-items:center;justify-content:center;color:#8FA8B8;font-size:24px;line-height:1}
.dg .ar::before{content:"→"}   /* → 横並びのとき */
.dg .ar.both,.dg .ar.down{flex-direction:column;gap:2px;color:var(--brand)}
.dg .ar.both::before{content:"⇄"}
.dg .ar.down::before{content:"↓"}
.dg .ar em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--brand);line-height:1.4;text-align:center}
.dbox{border:2px solid var(--brand);background:#fff;padding:13px 15px;height:100%}
.dbox b{display:block;font-size:16.5px;color:var(--brand-d);letter-spacing:.06em;margin:0 0 5px}
.dbox span{display:block;font-size:13px;color:var(--mute);line-height:1.75}
.dbox.hub{background:var(--brand);border-color:var(--brand)}
.dbox.hub b{color:#fff;font-size:18px}
.dbox.hub span{color:#DBEAF5}
.dbox.kid{border-color:var(--accent)}
.dbox.kid b{color:#C25835}
.dbox.out{background:var(--brand-l);border-color:#B9CFDF}
@media(max-width:820px){
  /* 縦に積むと「子ども→成果」に戻ってしまうので、左に縦レールを引いて
     ラボから直接 成果へ落とす。子どもは右にインデントした枝にする。 */
  .dg{grid-template-columns:34px 1fr;
      grid-template-rows:auto 30px auto 44px auto 30px auto}
  .dg .stack{grid-column:1 / 3;grid-row:1}
  .dg .a1   {grid-column:1 / 3;grid-row:2}
  .dg .c-hub{grid-column:1 / 3;grid-row:3}
  .dg .a2   {grid-column:2;grid-row:4;flex-direction:row;gap:8px}
  .dg .c-kid{grid-column:2;grid-row:5}
  .dg .a3   {grid-column:1;grid-row:4 / 7;position:relative}  /* ラボ直下 → 成果 の縦レール */
  .dg .c-out{grid-column:1 / 3;grid-row:7}
  .dg .ar{min-height:30px}
  .dg .ar::before{content:"↓"}  /* ↓ 縦積みのとき。transformで回すと外形ごと回って箱に重なる */
  .dg .ar.both::before{content:"⇅"}
  /* 縦レール本体（矢印グリフではなく線で描く）
     ⚠️セレクタは .ar.down まで書く。PC側の .dg .ar.down::before が
     詳細度で勝ち、content だけ上書きされずに線の頭へ「↓」が重なる */
  .dg .ar.down::before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:15px;width:2px;background:var(--brand)}
  .dg .ar.down::after{content:"↓";position:absolute;left:50%;margin-left:-.5em;bottom:-7px;color:var(--brand);font-size:20px;line-height:1}
  .dg .ar.down em{display:none}
  /* ⛔ここに「レールから子どもへの横線」を足さないこと。
     レールを突き抜けて十字に見える（2026-08-14に一度入れて撤去）。
     ラボと子どもは ⇅ でつながっているので、線は要らない。 */
  .dbox{height:auto}
}
/* 還元ループ＝右端(成果)から下へ、左へ、左端(企業/地域/行政)へ戻るU字 */
.dgwrap{position:relative}
.loop{height:30px;margin:0 6px;border:2px dashed var(--accent);border-top:0;border-radius:0 0 10px 10px;position:relative}
.loop::before{content:"▲";position:absolute;left:-9px;top:-15px;font-size:15px;line-height:1;color:var(--accent)}
.loop::after{content:"成果とともに還っていく";position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;background:var(--paper);padding:0 12px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#C25835}
section.tint .loop::after{background:var(--brand-l)}
.giveback{margin:22px 0 0;border:1.5px dashed var(--accent);background:#FDF6F3;padding:13px 17px;font-size:13.5px;line-height:1.8}
.giveback b{display:block;color:#C25835;font-size:13px;letter-spacing:.1em;margin:0 0 4px}

/* ── 運営のかたち（HTML製のツリー） ── */
.orgtop{background:var(--brand-d);color:#fff;text-align:center;padding:16px 20px}
.orgtop b{font-size:17px;letter-spacing:.08em}
.orgtop span{display:block;font-size:12px;color:#A8C8DE;margin-top:3px}
.orgcap{text-align:center;font-size:13px;color:var(--mute);margin:0;padding:18px 0 0}
/* 会社の帯 → 縦線 → 横棒 → 各Labへ の階層線 */
.orgstem{height:20px;position:relative}
.orgstem::after{content:"";position:absolute;left:calc(50% - 1px);top:0;height:100%;width:2px;background:#8FA8B8}
.orgrail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;height:22px;position:relative}
.orgrail::before{content:"";position:absolute;top:0;height:2px;background:#8FA8B8;left:12.5%;right:12.5%}
.orgrail i{position:relative}
.orgrail i::after{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:#8FA8B8}
@media(max-width:920px){.orgrail{display:none}.orgstem{height:16px}}
.labgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.labcard{border:2px solid var(--brand);background:#fff;padding:18px 18px 16px;display:flex;flex-direction:column}
.labcard .en{font-size:12px;letter-spacing:.18em;color:var(--brand);font-weight:800;margin:0 0 4px}
.labcard h3{margin:0 0 9px;font-size:17px;letter-spacing:.05em}
.labcard .cp{margin:0 0 14px;font-size:13.5px;line-height:1.8}
.labcard ul{list-style:none;margin:0 0 16px;padding:14px 0 0;border-top:1px solid var(--line);font-size:13.5px}
.labcard li{margin:0 0 7px;padding-left:15px;position:relative}
.labcard li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1.5px;background:var(--brand)}
.labcard li small{display:block;color:var(--mute);font-size:12.5px}
.labcard li ul{border:0;margin:7px 0 0;padding:0}
.labcard li li::before{background:#B9CFDF}
.labcard .go{margin-top:auto;font-size:13px;font-weight:800;color:var(--brand-d);text-decoration:none;border-bottom:1.5px solid var(--brand);padding-bottom:4px;align-self:flex-start}
.labcard .go::after{content:" →"}
.labcard .go:hover{color:var(--brand)}
@media(max-width:920px){.labgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.labgrid{grid-template-columns:1fr}}

/* ── 安全への備え ── */
.safety{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0 0;
    border:1px solid var(--line);background:#fff}
.safety dl{margin:0;padding:32px 18px 30px;text-align:center;
    border-right:1px solid var(--line)}
.safety dl:last-child{border-right:0}
.safety .si{display:block;width:58px;height:58px;margin:0 auto 18px;
    fill:none;stroke:var(--brand);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.safety dt{font-weight:800;font-size:14.5px;letter-spacing:.05em;color:var(--brand-d);margin:0 0 10px}
.safety dd{margin:0;font-size:13px;color:var(--mute);line-height:1.85}
@media(max-width:820px){
  .safety{grid-template-columns:repeat(2,1fr)}
  .safety dl:nth-child(2n){border-right:0}
  .safety dl:nth-child(2n+1){border-right:1px solid var(--line)}
  .safety dl:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:440px){
  .safety{grid-template-columns:1fr}
  .safety dl{border-right:0;border-bottom:1px solid var(--line);padding:26px 18px 24px}
  .safety dl:last-child{border-bottom:0}
  .safety .si{width:50px;height:50px;margin-bottom:14px}
}

/* ── 動画リンク ── */
.ytbox{margin:30px 0 0;padding:22px 26px 20px;border:1px solid var(--line);background:#fff}
.ytbox b{display:block;font-size:13px;letter-spacing:.14em;color:var(--brand);margin:0 0 10px}
.ytlist{list-style:none;margin:0;padding:0}
.ytlist li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;
    align-items:baseline;gap:12px;flex-wrap:wrap}
.ytlist li:last-child{border-bottom:0}
.ytlist a{font-weight:700;color:var(--brand-d);text-decoration:none;border-bottom:1.5px solid var(--brand);padding-bottom:2px}
.ytlist a::before{content:"▶ ";color:var(--accent);font-size:12px}
.ytlist a:hover{color:var(--brand)}
.ytlist small{color:var(--mute);font-size:12.5px}
.ytnote{margin:12px 0 0;font-size:12.5px;color:var(--mute)}

/* ── 今回の更新（冒頭の一覧） ── */
.donebox{border:1px solid var(--line);background:#fff;padding:20px 26px 18px;margin:0 0 14px}
.donett{margin:0 0 12px;font-weight:800;font-size:14.5px;letter-spacing:.08em;color:var(--brand-d)}
.donelist{margin:0;padding:0;list-style:none;font-size:14px;color:var(--mute)}
.donelist li{padding:6px 0 6px 22px;position:relative;line-height:1.8}
.donelist li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--brand);font-weight:800}
body.clean .donebox{display:none}

/* ── ご確認いただきたいこと（冒頭の一覧） ── */
.askbox{border:2px solid var(--accent);background:#FDF6F3;padding:22px 26px 20px;margin:0 0 8px}
.asktt{margin:0 0 14px;font-weight:800;font-size:15px;letter-spacing:.08em;color:#C25835}
.asklist{margin:0;padding-left:1.3em;font-size:14.5px}
.asklist li{margin:0 0 10px;line-height:1.75}
.asklist a{color:var(--brand-d);font-weight:700}
.asklist small{display:block;font-size:12.5px;color:var(--mute);font-weight:400;margin-top:2px}
.asknote{margin:16px 0 0;font-size:12.5px;color:var(--mute);line-height:1.8}
body.clean .askbox{display:none}
.askgate{margin:-6px 0 14px;font-size:13px;line-height:1.85;color:#A8482A;font-weight:700}