/* =========================================================
   こどもたちへ（/sos/、2026-10-28）
   ページの組みは 22art.jp を参考にした研修ページ・講座ページと同じ（training.css ＋ sos-course.css）。
   ここには、このページだけの部品を書く。クラスは sk- で始まる。
   ① ノートと雲：いただいた画像（sk-note.webp）に文字を重ねる。位置は画像（1920×1080）に対する％
   ② ロケットと6枚のカード：いただいた画像（sk-rocket.webp、1920×1080）のカードの中に文字を重ねる
   ③ 立体の島と4つの枠：いただいた画像（sk-iso.webp、1920×840）の枠の中に文字を重ねる
   文字の大きさは cqw（画像の幅に対する％）。
   スマホでも図を崩さない（2026-10-30）：画面が狭いときは図を幅960pxのまま置き、横にスクロールして見る（下の .sk-swipe）。
   ※下の @container (max-width:899px) の組み替えは、いまは使われない（図の幅が 960px より狭くならないため）
   ========================================================= */

/* ---------- ① ノート（いただいた画像） ---------- */
.sk-sec-map > .trk-wrap:before{display:none}
.sk-map{position:relative;container-type:inline-size;container-name:skmap;margin-inline:calc(-1 * clamp(18px,4vw,48px))}
.sk-map-fig{position:relative}
.sk-map-img{display:block;width:100%;height:auto;box-shadow:0 1px 0 #e3e1da}
.sk-map-title{position:absolute;left:0;right:0;top:8.2%;text-align:center;font-family:"Yusei Magic","Klee One",sans-serif;font-weight:400;font-size:5.2cqw;line-height:1.2;letter-spacing:.02em;color:#151515}
.sk-map-mark{position:absolute;transform:translate(-50%,-50%) rotate(-1deg);font-family:"Klee One",sans-serif;font-weight:600;font-size:1.65cqw;letter-spacing:.08em;white-space:nowrap;color:#151515}
.sk-map-mark.is-m1{left:19.5%;top:54.7%}
.sk-map-mark.is-m2{left:46.1%;top:31.8%}
.sk-map-mark.is-m3{left:76.5%;top:50.1%}
.sk-map-cloud{position:absolute;width:21.4%;text-align:center}
.sk-map-cloud.is-c1{left:9.9%;top:57.6%}
.sk-map-cloud.is-c2{left:35.9%;top:34.6%}
.sk-map-cloud.is-c3{left:66.9%;top:53.2%}
.sk-map-cloud .sk-mark{display:none}
.sk-map-cloud h3{font-family:"Yusei Magic","Klee One",sans-serif;font-weight:400;font-size:1.5cqw;line-height:1.4;letter-spacing:.01em}
.sk-map-cloud p{margin-top:.45em!important;font-family:"Klee One",sans-serif;font-weight:600;font-size:1.12cqw;line-height:1.62}
.sk-map-foot{position:absolute;left:3.6%;top:88%;font-family:"Yusei Magic","Klee One",sans-serif;font-weight:400;font-size:1.75cqw;transform:rotate(-2deg);color:#151515}
.sk-mark{
  display:inline-block;font-family:"Klee One",sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;padding:3px 14px 2px;
  border-radius:3px 12px 4px 10px;transform:rotate(-1.5deg)
}
.sk-mark.is-yellow{background:#f6dc7d}
.sk-mark.is-mint{background:#93ddc8}
.sk-mark.is-pink{background:#f0adbe}
/* 画像が狭いとき：雲の中は「きもち 01」だけ。文は画像の下にカードで並べる */
@container skmap (max-width:899px){
  .sk-map-mark{font-size:2.7cqw;letter-spacing:.02em}
  .sk-map-cloud{position:static;width:auto;text-align:left;background:#fbfbf7;border:2px solid #151515;border-radius:22px;padding:18px 20px;margin:14px 16px 0}
  .sk-map-cloud .sk-mark{display:inline-block}
  .sk-map-cloud h3{margin-top:10px!important;font-size:18px}
  .sk-map-cloud p{font-size:14px;line-height:1.85}
  .sk-map-foot{position:static;margin:18px 16px 0!important;transform:none;font-size:18px;text-align:center}
}

/* ---------- 冒頭：すぐ相談したい人へ・もくじ ---------- */
.sk-quick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(26px,3vw,36px);padding:16px 22px;border:2px solid var(--e-ink);background:#fff8d6;color:var(--e-ink);text-decoration:none;font-size:14px}
.sk-quick strong{font-size:17px;font-weight:800}
.sk-quick:hover{background:#ffe54a}
.sk-quick .sc-arrow{position:static;margin:0}
.sk-toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.sk-toc a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--e-line);border-radius:99px;font-size:13.5px;font-weight:600;color:var(--e-ink);text-decoration:none;background:#fff}
.sk-toc a span{font-size:11.5px;font-weight:800;color:var(--e-blue)}
.sk-toc-h{margin-top:24px!important;font-size:13px;font-weight:800;letter-spacing:.06em}
.sk-toc-h + .sk-toc{margin-top:10px}
.sk-toc a:hover{border-color:var(--e-ink)}
.sk-lead{font-size:15.5px;line-height:2;margin:-12px 0 clamp(22px,3vw,34px)!important;max-width:820px}

/* ---------- 体と心のサイン ---------- */
.sk-signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.sk-sign{background:#f3f3f1;border-top:8px solid var(--c);padding:clamp(20px,2.4vw,28px)}
.sk-sign-h{font-weight:800;font-size:18px;margin-bottom:12px!important}
.sk-sign ul{display:flex;flex-wrap:wrap;gap:8px}
.sk-sign li{background:#fff;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:600;line-height:1.5}
.sk-sign-note{margin-top:20px!important;font-family:var(--e-serif);font-weight:700;font-size:clamp(16px,1.7vw,20px);line-height:1.8}

/* ---------- 伝えるときのことば ---------- */
.sk-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,40px) clamp(14px,2vw,24px)}
.sk-words li{position:relative;background:#fff;border:2px solid #151515;border-radius:20px;padding:20px 22px;box-shadow:6px 6px 0 var(--c)}
.sk-words li:after{content:"";position:absolute;left:28px;bottom:-13px;width:20px;height:20px;background:#fff;border-right:2px solid #151515;border-bottom:2px solid #151515;transform:rotate(45deg) skew(8deg,8deg)}
.sk-words p{font-family:"Klee One",sans-serif;font-weight:600;font-size:clamp(16px,1.5vw,18px);line-height:1.7}
.sk-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(34px,4vw,48px)}
.sk-tip{border-top:2px solid var(--e-ink);padding-top:14px}
.sk-tip h3{font-weight:800;font-size:16px}
.sk-tip p{margin-top:6px!important;font-size:14px;line-height:1.85;color:#333}

/* ---------- SOSと相談の比較 ---------- */
.sk-def{font-family:var(--e-serif);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.6}
.sk-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(26px,3vw,40px)}
.sk-cmp-col{border:1px solid var(--e-ink);padding:clamp(20px,2.6vw,32px)}
.sk-cmp-col.is-sos{background:var(--e-ink);color:#fff}
.sk-cmp-h{font-family:var(--e-latin);font-weight:600;font-size:clamp(24px,2.4vw,32px);margin-bottom:14px!important}
.sk-cmp dl > div{display:grid;grid-template-columns:6em minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid currentColor}
.sk-cmp dt{font-size:13px;opacity:.7}
.sk-cmp dd{font-size:15px;font-weight:600;line-height:1.7}
.sk-cmp-note{margin-top:22px!important;font-family:var(--e-serif);font-weight:700;font-size:clamp(17px,1.8vw,22px)}

/* ---------- ② ロケット（いただいた画像） ---------- */
.sk-rocket{position:relative;container-type:inline-size;container-name:skrocket;margin-inline:calc(-1 * clamp(18px,4vw,48px))}
.sk-rocket-fig{position:relative}
.sk-rocket-img{display:block;width:100%;height:auto}
.sk-rocket-title{position:absolute;left:0;right:0;top:8.4%;text-align:center;font-weight:800;font-size:3cqw;line-height:1.2;letter-spacing:.02em;color:#111}
.sk-rocket-sub{position:absolute;left:0;right:0;top:16.8%;text-align:center;font-size:1.4cqw;line-height:1.5;color:#222}
.sk-rocket-side{position:absolute;top:24.6%;transform:translate(-50%,-50%);font-weight:800;font-size:1.3cqw;letter-spacing:.06em;padding:.3em 1.1em;border-radius:99px;background:#fff;white-space:nowrap}
.sk-rocket-side.is-out{left:25.3%;color:#1aa0d8;box-shadow:inset 0 0 0 2px #5fd6fb}
.sk-rocket-side.is-in{left:74.5%;color:#e98a0c;box-shadow:inset 0 0 0 2px #ff9408}
.sk-step{position:absolute;width:27.4%;height:13.7%;display:flex;flex-direction:column;justify-content:center}
.sk-step.is-s1,.sk-step.is-s3,.sk-step.is-s5{text-align:right}
.sk-step.is-s1{left:8.85%;top:29.2%}
.sk-step.is-s2{left:63.75%;top:29.2%}
.sk-step.is-s3{left:6.5%;top:50.1%}
.sk-step.is-s4{left:66.04%;top:50.1%}
.sk-step.is-s5{left:8.85%;top:70.9%}
.sk-step.is-s6{left:63.75%;top:70.9%}
.sk-step-no,.sk-step-side,.sk-rocket-note{display:none}
.sk-step h3{font-weight:800;font-size:1.3cqw;line-height:1.4}
.sk-step p{margin-top:.3em!important;font-size:1.08cqw;line-height:1.6;color:#222}
@container skrocket (max-width:899px){
  .sk-rocket-title{font-size:4.6cqw;top:9%}
  .sk-rocket-sub{display:none}
  .sk-rocket-side{font-size:2.6cqw;padding:.2em .8em}
  .sk-step{position:static;width:auto;height:auto;text-align:left!important;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;background:#fff;border:1px solid #e3e3df;border-radius:18px;padding:16px 18px;margin:12px 16px 0}
  .sk-step-no{display:flex;grid-row:span 3;align-self:start;width:46px;height:46px;border-radius:10px;align-items:center;justify-content:center;font-family:var(--e-latin);font-weight:700;font-size:17px;background:var(--n)}
  .sk-step-side{display:block;font-size:12px;font-weight:700;color:#e98a0c}
  .sk-step.is-s1 .sk-step-side,.sk-step.is-s3 .sk-step-side,.sk-step.is-s5 .sk-step-side{color:#1aa0d8}
  .sk-step h3{font-size:17px}
  .sk-step p{font-size:14px;line-height:1.8;margin-top:2px!important}
  .sk-rocket-note{display:block;margin:18px 16px 0!important;font-family:var(--e-serif);font-weight:700;font-size:17px;line-height:1.7}
}
.sk-step.is-s1{--n:#5fd6fb}.sk-step.is-s2{--n:#00c98d}.sk-step.is-s3{--n:#ffde0a}.sk-step.is-s4{--n:#ff9408}.sk-step.is-s5{--n:#ff4fcf}.sk-step.is-s6{--n:#5fd6fb}

/* ---------- ③ 立体の島（いただいた画像） ---------- */
.sk-sec-iso > .trk-wrap:before{display:none}
.sk-iso-h{font-family:"Noto Sans JP",sans-serif;font-weight:800;color:#1f73c4;font-size:clamp(20px,2.2vw,30px);padding-bottom:12px;border-bottom:2px solid #1f73c4;letter-spacing:.02em}
.sk-iso-h span{font-family:var(--e-latin);margin-right:.3em}
.sk-iso{position:relative;container-type:inline-size;container-name:skiso;margin-top:clamp(12px,2vw,24px)}
.sk-iso-img{display:block;width:100%;height:auto}
.sk-frame{position:absolute;width:14.6%;height:19.4%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.sk-frame.is-tl{left:13%;top:7.7%}
.sk-frame.is-tr{left:73.3%;top:4.6%}
.sk-frame.is-bl{left:8.75%;top:60.7%}
.sk-frame.is-br{left:72.5%;top:74.6%}
.sk-frame span{font-family:var(--e-latin);font-weight:600;font-size:1.05cqw;color:#c9603f;letter-spacing:.04em}
.sk-frame h3{font-weight:800;font-size:1.75cqw;line-height:1.3;color:#1d2a3a}
.sk-frame p{margin-top:.35em!important;font-size:1.08cqw;font-weight:600;line-height:1.5;color:#c9603f}
@container skiso (max-width:899px){
  .sk-frame span{font-size:3.6cqw}
  .sk-frame h3,.sk-frame p{display:none}
}
.sk-places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(20px,3vw,36px)}
.sk-places li{border-top:2px solid #1d2a3a;padding-top:14px}
.sk-places-no{font-family:var(--e-latin);font-weight:600;font-size:13px;color:#c9603f}
.sk-places h3{margin-top:4px!important;font-weight:800;font-size:19px;line-height:1.4}
.sk-places h3 small{display:block;font-size:13px;font-weight:700;color:#c9603f;margin-top:2px}
.sk-places p{margin-top:8px!important;font-size:14px;line-height:1.85;color:#333}
.sk-places-more{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--e-blue)}

/* ---------- 友だちから相談されたら ---------- */
.sk-friend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);counter-reset:none}
.sk-friend li{position:relative;background:#fff;border:1px solid var(--e-ink);border-radius:16px;padding:22px 20px 20px;border-top:8px solid var(--c)}
.sk-friend li:not(:last-child):after{content:"→";position:absolute;right:calc(-1 * clamp(12px,1.6vw,20px) + 1px);top:50%;transform:translate(50%,-50%);font-weight:800;font-size:16px;background:#fff;line-height:1;z-index:1}
.sk-friend span{font-family:var(--e-latin);font-weight:600;font-size:12.5px;letter-spacing:.06em;color:#b06a00}
.sk-friend h3{margin-top:6px!important;font-weight:800;font-size:17px;line-height:1.45}
.sk-friend p{margin-top:8px!important;font-size:14px;line-height:1.85;color:#333}
.sk-friend-note{margin-top:22px!important;background:#fff8d6;border-left:6px solid #ffb03d;padding:16px 20px;font-weight:700;font-size:15px;line-height:1.85}

/* ---------- みんなのギモン（Q＝ハナ・ソウタ、A＝ろぼっと） ---------- */
.sk-faq{border-top:1px solid var(--e-ink)}
.sk-faq > div{padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--e-line)}
.sk-faq dt,.sk-faq dd{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center}
.sk-faq dd{margin-top:12px;align-items:start}
.sk-faq .mg-av{width:56px;height:56px}
.sk-faq-q{font-weight:800;font-size:clamp(16px,1.6vw,19px);line-height:1.6}
.sk-faq-a{position:relative;background:#fff8d6;border:2px solid #111;border-radius:16px;padding:12px 16px;font-size:15px;line-height:1.9;color:#222}
.sk-faq-q b,.sk-faq-a b{font-family:var(--e-latin);font-weight:700;margin-right:.45em;color:var(--e-blue)}
.sk-faq-a b{color:#e98a0c}

/* ---------- 文言 ---------- */
.sk-statement{margin-top:clamp(28px,3.6vw,48px)!important;border:2px solid var(--e-ink);padding:clamp(20px,3vw,36px);font-family:var(--e-serif);font-weight:700;font-size:clamp(18px,2vw,26px);line-height:1.7;text-align:center}
.sk-voices{margin-top:clamp(28px,3vw,40px)!important}

/* ---------- 相談先 ---------- */
.sk-call-group{display:flex;align-items:baseline;gap:14px;margin:clamp(30px,4vw,48px) 0 16px!important;padding-bottom:10px;border-bottom:2px solid var(--e-ink);font-weight:800;font-size:clamp(18px,1.9vw,22px)}
.sk-call-group span{font-family:var(--e-latin);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--e-blue)}
.sk-lead + .sk-call-group{margin-top:0!important}
.sk-calls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.sk-call{border:1px solid var(--e-ink);padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;background:#fff}
.sk-call-name{font-weight:800;font-size:16px;line-height:1.5}
.sk-call-tel{margin:6px 0 8px!important;font-family:var(--e-latin);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:.01em;line-height:1.2}
.sk-call-tel a{color:var(--e-blue);text-decoration:none}
.sk-call-tel span{display:inline-block;font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:600;margin-left:4px;color:var(--e-ink)}
.sk-call-where{margin:4px 0 8px!important;font-size:14px;font-weight:700;color:var(--e-blue);line-height:1.6}
.sk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px!important}
.sk-tags span{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--e-blue-l);color:var(--e-blue)}
.sk-call-txt{font-size:13.5px;line-height:1.85;color:#333}
.sk-call.is-hint{background:var(--e-gray);border-color:var(--e-gray);justify-content:center}
.sk-nw{white-space:nowrap}
@media (min-width:1101px){.sk-calls.is-chat{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sk-call-link{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:700;color:var(--e-blue)}
.sk-call-link span{margin-left:4px}
.sk-call-urgent{margin-top:clamp(24px,3vw,36px)!important;background:var(--e-gray);padding:16px 20px;font-weight:700;font-size:15px}
.sk-sec-call .sc-note a{color:var(--e-blue)}

/* ---------- スマホ・タブレット ---------- */
@media (max-width:1000px){
  .sk-calls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-places,.sk-friend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-friend li:not(:last-child):after{display:none}
  .sk-words,.sk-signs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sk-cmp,.sk-calls,.sk-places,.sk-friend,.sk-words,.sk-signs,.sk-tips{grid-template-columns:1fr}
  .sk-map,.sk-iso,.sk-rocket{margin-inline:-18px}
  .sk-quick{display:flex}
}

/* スマホでも図を崩さない：横にスクロールして見る（2026-10-30） */
.sk-swipe{position:relative}
.sk-swipe.is-bleed{margin-inline:calc(-1 * clamp(18px,4vw,48px))}
.sk-swipe .sk-map,.sk-swipe .sk-rocket{margin-inline:0!important}
.sk-swipe-hint{display:none}
@media (max-width:1000px){
  .sk-swipe{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .sk-swipe .sk-map,.sk-swipe .sk-rocket,.sk-swipe .sk-iso{width:960px;max-width:none}
  .sk-swipe-hint{display:block;margin-top:10px!important;text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em;color:#777}
}
@media (max-width:640px){
  .sk-swipe.is-bleed{margin-inline:-18px}
}
/* 「こんな気持ち、ない？」：スマホでは、雲の中は「きもち 0X」と見出しだけ（文は重なるので出さない。2026-10-30） */
@media (max-width:1000px){
  /* 見出しを、雲の中の「きもち 0X」の下の空きのまん中に置く（2026-10-30 改。前は下に寄っていた） */
  .sk-map-cloud{width:20%;transform:translateY(-50%)}
  .sk-map-cloud.is-c1{left:9.5%;top:66%}
  .sk-map-cloud.is-c2{left:36.1%;top:43%}
  .sk-map-cloud.is-c3{left:66.5%;top:62%}
  .sk-map-cloud h3{font-size:1.85cqw;line-height:1.5;margin:0!important}
  .sk-map-cloud p{display:none}
}

/* 学校・地域で取り組むために（研修・担当者・事業のページへ。2026-10-30） */
.sk-links-lead{font-size:15px;line-height:2;max-width:820px;margin:-12px 0 clamp(8px,1.4vw,14px)!important}
.sk-more-sub{margin-top:10px!important}

/* ページ内リンクで見出しが上の帯に隠れないように */
.sk section[id]{scroll-margin-top:90px}

/* =========================================================
   まんが（2026-10-28）。登場人物とせりふは inc/sos-kids-manga.php
   ・コマ（.mg-p）は container-type:size。人物の大きさ・位置はコマの高さ（cqh）と幅（cqw）から計算する
   ========================================================= */
/* 見出し：日本語を大きく、英語を小さく（このページだけ） */
.sk .sc-big-ja{font-weight:800;font-size:clamp(28px,4.4vw,54px);line-height:1.25;letter-spacing:.02em}
.sk .sc-big-en{font-family:var(--e-latin);font-weight:600;font-size:14px;line-height:1.4;letter-spacing:.08em;color:var(--e-blue)}

.mg-ep > .trk-wrap:before{display:none}
.mg-ep + .sc-sec{padding-top:clamp(28px,3.4vw,44px)}
.mg-ep + .sc-sec > .trk-wrap:before{display:none}
.mg-cover-sec > .trk-wrap:before{display:none}

/* 話の見出し */
.mg-ep-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;align-items:center;max-width:860px;margin:0 auto clamp(18px,2.4vw,26px)}
.mg-ep-no{grid-row:span 2;display:flex;align-items:center;justify-content:center;gap:2px;width:clamp(72px,8vw,96px);aspect-ratio:1;border-radius:50%;background:#111;color:#fff;font-family:var(--e-latin);font-weight:700;font-size:clamp(32px,3.6vw,44px);line-height:1}
.mg-ep-no small{font-family:"Noto Sans JP",sans-serif;font-size:.36em;font-weight:800}
.mg-ep-title{font-family:"Yusei Magic","Klee One",sans-serif;font-weight:400;font-size:clamp(24px,3.4vw,42px);line-height:1.3}
.mg-ep-lead{font-size:clamp(14px,1.4vw,16px);font-weight:600;color:#555}

/* ページとコマ（2026-10-29 改）
   段（.mg-row）ごとに横の割合（--cols）と縦横比（--rar）を決め、大きい「見せゴマ」と小さいコマを組み合わせる。
   コマの線は .mg-f（黒）＋ .mg-pin（中身、3px 内側）。斜めのコマは両方を同じ形で切る（clip-path）。
   ふきだし・効果の文字・はみ出す人物（.mg-out）はコマの線の外にも出られる。 */
.mg-strip{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:10px;background:#fff;padding:14px;border:1px solid #cfcfcf;box-shadow:0 2px 0 #e6e6e6}
.mg-strip.is-cover{padding:0;border:0;box-shadow:none}
/* まんがの読み順：右のコマから左へ（grid を右から並べる）。コマの中の文字は左から右 */
.mg-row{display:grid;grid-template-columns:var(--cols);gap:8px;aspect-ratio:var(--rar);--sl:28px;direction:rtl}
.mg-row > *{direction:ltr}
.mg-stack{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-width:0;min-height:0}
.mg-p{position:relative;container-type:size;min-width:0;min-height:0}
.mg-f,.mg-pin{position:absolute;clip-path:var(--clip,none)}
.mg-f{inset:0;background:#111}
.mg-pin{inset:3px;overflow:hidden;background:#fff}
/* 斜めの2コマ：右（1コマ目）の左の線と、左（2コマ目）の右の線を平行に切る */
.mg-row.is-slant > .mg-p:nth-child(1){margin-left:calc(-1 * var(--sl));--clip:polygon(var(--sl) 0,100% 0,100% 100%,0 100%)}
.mg-row.is-slant > .mg-p:nth-child(2){--clip:polygon(0 0,100% 0,calc(100% - var(--sl)) 100%,0 100%)}
.mg-p.is-tone .mg-pin{background:radial-gradient(circle,#d3d7de 1.1px,transparent 1.6px) 0 0/9px 9px,#fff}
.mg-p.is-gloom .mg-pin{background:repeating-linear-gradient(90deg,rgba(52,64,96,.15) 0 1.5px,transparent 1.5px 9px),linear-gradient(180deg,#b9c2d3 0,#e7ebf2 55%,#fff 100%)}
.mg-p.is-flash .mg-pin{background:radial-gradient(circle at 50% 55%,#fff 0,#fff 20%,rgba(255,255,255,0) 62%),repeating-conic-gradient(from 0deg at 50% 55%,#fff 0deg 3deg,#e2e2e2 3deg 5deg)}
.mg-p.is-warm .mg-pin{background:radial-gradient(circle at 70% 30%,#fff8db 0,#ffeacf 45%,#ffd9d9 100%)}
.mg-p.is-sky .mg-pin{background:radial-gradient(circle at 30% 40%,#fff 0,#e6f4ff 55%,#cde8ff 100%)}
.mg-p.is-night .mg-pin{background:radial-gradient(circle at 20% 22%,#fff 0 1.2px,transparent 1.8px) 0 0/46px 38px,radial-gradient(circle at 70% 60%,#dfe6ff 0 1px,transparent 1.6px) 0 0/31px 29px,linear-gradient(180deg,#1d2b55 0,#2f4170 60%,#4b5c8c 100%)}
.mg-p.is-night .mg-fx{color:#fff;text-shadow:none}
/* 断ち切り：人物がコマの上の線からはみ出す（下と左右はコマの中で切る） */
.mg-out{position:absolute;left:3px;right:3px;bottom:3px;top:-40cqh;overflow:hidden;z-index:3;pointer-events:none}
.mg-out img.mg-c{margin-top:40cqh}
.mg-row.is-slant > .mg-p:nth-child(2) .mg-out{clip-path:polygon(0 0,100% 0,100% 40%,calc(100% - var(--sl)) 100%,0 100%)}

/* つなぎのコマ */
.mg-bridge{padding-top:clamp(24px,3vw,40px)}
.mg-bridge > .trk-wrap:before{display:none}
.mg-bridge + .sc-sec{padding-top:clamp(28px,3.4vw,44px)}
.mg-bridge-label{max-width:860px;margin:0 auto 10px!important;display:flex;align-items:center;gap:12px;font-family:"Yusei Magic","Klee One",sans-serif;font-size:18px}
.mg-bridge-label:after{content:"";flex:1;border-top:2px dashed #bbb}
/* つなぎ：顔アイコンとセリフ（ろぼっと＝左、ハナ・ソウタ＝右） */
.mg-after{margin-top:clamp(18px,2.4vw,28px)}
.mg-talk{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mg-talk-l{display:flex;align-items:flex-end;gap:10px}
.mg-talk-l.is-r{flex-direction:row-reverse}
.mg-talk-l .mg-av{width:56px;height:56px}
.mg-talk-b{position:relative;max-width:min(560px,78%);background:#fff;border:2px solid #111;border-radius:18px;padding:10px 16px;font-weight:700;font-size:15px;line-height:1.75}
.mg-talk-l.is-l .mg-talk-b{border-bottom-left-radius:4px;background:#fff8d6}
.mg-talk-l.is-r .mg-talk-b{border-bottom-right-radius:4px}
.mg-talk-l.is-think .mg-talk-b{border-style:dashed;color:#555;font-weight:600;background:#f6f7fb}
.mg-talk-name{display:block;font-size:11.5px;font-weight:800;color:#888;letter-spacing:.06em;margin-bottom:2px}
.mg-talk-l.is-r .mg-talk-name{text-align:right}

/* 人物 */
.sk img.mg-c{position:absolute;z-index:1;max-width:none;width:auto;height:calc(var(--k) * 100cqh);left:calc(var(--cx) * 1cqw - var(--ax) * var(--k) * var(--ar) * 100cqh);top:calc(var(--cy) * 1cqh - var(--ay) * var(--k) * 100cqh);pointer-events:none;user-select:none}
.sk img.mg-c.is-flip{transform:scaleX(-1)}

/* ナレーション・効果の文字 */
.mg-n{position:absolute;left:0;top:0;z-index:3;background:#111;color:#fff;font-weight:700;font-size:calc(13px * var(--ns,1));padding:.38em .92em;letter-spacing:.04em;margin:0!important}
.mg-fx{position:absolute;z-index:4;font-family:"Yusei Magic","Klee One",sans-serif;color:#111;line-height:1;white-space:nowrap;transform:rotate(var(--r));
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff}
.mg-fx.is-s{font-size:calc(clamp(16px,4.4cqw,26px) * var(--fz,1))}
.mg-fx.is-m{font-size:calc(clamp(20px,5.6cqw,36px) * var(--fz,1))}
.mg-fx.is-l{font-size:calc(clamp(26px,7.4cqw,54px) * var(--fz,1))}
/* 太いゴシックの効果の文字（ドキッ・うーん…など。2026-10-30） */
.mg-fx.is-bold{font-family:"Noto Sans JP",sans-serif;font-weight:900;letter-spacing:.02em}
.mg-p.is-flash .mg-fx{color:#e8453c}
.mg-p.is-gloom .mg-fx{color:#3d4a6b}

/* ふきだし */
.mg-b{position:absolute;z-index:5;margin:0!important;width:calc(var(--bw) * 1%);background:#fff;border:2.5px solid #111;border-radius:1.6em;padding:.7em 1.05em;font-weight:700;font-size:clamp(12.5px,3.3cqw,16px);line-height:1.6;text-align:center;color:#111}
.mg-b.is-shout{background:#fff6a3;border-width:3px;border-radius:.5em;font-size:clamp(14px,3.9cqw,19px);transform:rotate(-1.5deg)}
.mg-b.is-think{border-radius:50%;padding:1.1em 1.5em;font-weight:600;color:#333}
.mg-b[class*=" t-"]:after{content:"";position:absolute;width:15px;height:15px;background:inherit;border:2.5px solid #111;border-top:0;border-left:0}
.mg-b.t-b:after{left:50%;bottom:-9px;transform:translateX(-50%) rotate(45deg)}
.mg-b.t-bl:after{left:20%;bottom:-9px;transform:rotate(45deg)}
.mg-b.t-br:after{right:20%;bottom:-9px;transform:rotate(45deg)}
.mg-b.t-t:after{left:50%;top:-9px;transform:translateX(-50%) rotate(225deg)}
.mg-b.t-tl:after{left:20%;top:-9px;transform:rotate(225deg)}
.mg-b.t-tr:after{right:20%;top:-9px;transform:rotate(225deg)}
.mg-b.t-l:after{left:-9px;top:50%;transform:translateY(-50%) rotate(135deg)}
.mg-b.t-r:after{right:-9px;top:50%;transform:translateY(-50%) rotate(-45deg)}
/* 心の声：しっぽは小さな丸 */
.mg-b.is-think:after,.mg-b.is-think:before{content:"";position:absolute;border:2.5px solid #111!important;border-radius:50%;background:#fff;transform:none!important}
.mg-b.is-think:after{width:15px;height:15px}
.mg-b.is-think:before{width:9px;height:9px}
.mg-b.is-think.t-r:after{right:-17px;top:56%}.mg-b.is-think.t-r:before{right:-30px;top:68%}
.mg-b.is-think.t-l:after{left:-17px;top:56%}.mg-b.is-think.t-l:before{left:-30px;top:68%}
.mg-b.is-think.t-br:after{right:18%;bottom:-17px}.mg-b.is-think.t-br:before{right:14%;bottom:-30px}
.mg-b.is-think.t-bl:after{left:18%;bottom:-17px}.mg-b.is-think.t-bl:before{left:14%;bottom:-30px}
.mg-b.is-think.t-b:after{left:48%;bottom:-17px}.mg-b.is-think.t-b:before{left:53%;bottom:-30px}
.mg-b.is-think.t-t:after{left:48%;top:-17px}.mg-b.is-think.t-t:before{left:43%;top:-30px}
.mg-b.is-think.t-tl:after{left:18%;top:-17px}.mg-b.is-think.t-tl:before{left:14%;top:-30px}
.mg-b.is-think.t-tr:after{right:18%;top:-17px}.mg-b.is-think.t-tr:before{right:14%;top:-30px}
/* ふたりの共通の心の声（メインではないので小さめ。しっぽの丸は左右に2つずつ。2026-10-30） */
.mg-b.is-think.t-lr,.mg-b.is-think.t-lru{background:#fffbe3;font-size:clamp(10.5px,2.5cqw,13px);padding:.55em 1.1em;font-weight:600}
.mg-b.is-think.t-lr:after,.mg-b.is-think.t-lr:before{width:11px;height:11px;bottom:-15px;background:#fffbe3}
.mg-b.is-think.t-lr:after{left:16%;box-shadow:-9px 13px 0 -4.5px #fffbe3,-9px 13px 0 -2px #111}
.mg-b.is-think.t-lr:before{right:16%;box-shadow:9px 13px 0 -4.5px #fffbe3,9px 13px 0 -2px #111}
/* 下に置くとき（しっぽの丸は上の2人へ） */
.mg-b.is-think.t-lru:after,.mg-b.is-think.t-lru:before{width:11px;height:11px;top:-15px;background:#fffbe3}
.mg-b.is-think.t-lru:after{left:16%;box-shadow:-9px -13px 0 -4.5px #fffbe3,-9px -13px 0 -2px #111}
.mg-b.is-think.t-lru:before{right:16%;box-shadow:9px -13px 0 -4.5px #fffbe3,9px -13px 0 -2px #111}
.mg-p > .is-monly{display:none}
.sk .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 顔アイコン */
.mg-av{display:block;flex:none;position:relative;width:72px;height:72px;border-radius:50%;border:2.5px solid #111;background:#fff;overflow:hidden;container-type:size}
.mg-av.is-hana{background:#ffe3d8}
.mg-av.is-sota{background:#dce9ff}
.mg-av.is-robot{background:#fff}

/* 登場人物 */
.mg-cast-h{max-width:860px;margin:clamp(22px,3vw,34px) auto 12px!important;font-family:"Yusei Magic","Klee One",sans-serif;font-size:clamp(20px,2.2vw,26px)}
.mg-cast{max-width:860px;margin:0 auto!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mg-cast li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2px solid #111;border-radius:16px;padding:16px}
.mg-cast-name{font-weight:800;font-size:18px;line-height:1.3}
.mg-cast-name small{display:block;font-size:12px;font-weight:700;color:#777;margin-top:2px}
.mg-cast li p:last-child{margin-top:6px!important;font-size:13.5px;line-height:1.75;color:#333}

/* ろぼっとのメモ */
.mg-memo{display:flex;align-items:center;gap:16px;max-width:860px;margin:clamp(22px,3vw,32px) auto 0!important}
.mg-memo .mg-av{width:76px;height:76px}
.mg-memo-b{position:relative;flex:1;background:#fff8d6;border:2px solid #111;border-radius:16px;padding:14px 18px;font-weight:700;font-size:clamp(15px,1.5vw,17px);line-height:1.75}
.mg-memo-b:before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;background:#fff8d6;border:2px solid #111;border-top:0;border-right:0;transform:translateY(-50%) rotate(45deg)}
.mg-memo-k{display:block;font-size:12px;font-weight:800;color:#e98a0c;letter-spacing:.08em}
.mg-memo-link{display:inline-block;margin-top:8px;padding:6px 16px 6px 14px;border:2px solid #111;border-radius:999px;background:#fff;color:#111;font-size:14px;text-decoration:none;line-height:1.5}
.mg-memo-link:after{content:" ↓"}
.mg-memo-link:hover{background:#111;color:#fff}
.mg-memo-b .mg-memo-link{display:table}

/* おうちの人・先生へ */
.sk-adult-head{margin-top:clamp(40px,5vw,72px);background:#f3f3f1;padding-bottom:clamp(30px,4vw,48px)}
.sk-adult-head > .trk-wrap:before{display:none}
.sk-adult-title{font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.3}
.sk-adult-lead{margin-top:12px!important;font-size:15px;line-height:2;max-width:760px}

@media (max-width:1000px){
  .mg-cast{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mg-strip{padding:8px;gap:8px;margin-inline:-6px}
  /* スマホ：段の中のコマを1列に並べる（keep の段だけは横並びのまま） */
  .mg-row:not(.is-keep){grid-template-columns:1fr;aspect-ratio:auto;gap:8px}
  .mg-row:not(.is-keep) .mg-p{aspect-ratio:var(--arm)}
  .mg-row:not(.is-keep) .mg-stack{grid-template-rows:auto auto}
  .mg-row:not(.is-keep).is-slant > .mg-p{margin-left:0;--clip:none}
  .mg-row:not(.is-keep).is-slant > .mg-p .mg-out{clip-path:none}
  .mg-talk-l .mg-av{width:44px;height:44px}
  .mg-talk-b{font-size:14px;padding:8px 13px}
  .mg-row.is-keep{aspect-ratio:var(--rarm);--sl:16px}
  .mg-row.is-keep .mg-b{font-size:11px}
  /* ふきだしは少し広げる（コマの右はしからはみ出さない幅まで） */
  .mg-b{width:min(calc(var(--bw) * 1.3%), calc(98% - var(--bl) * 1%));font-size:12px;padding:.55em .8em;line-height:1.55}
  .mg-b.is-think{border-radius:1.4em;padding:.6em .85em}
  .mg-b.is-shout{font-size:13.5px}
  .mg-n{font-size:calc(11.5px * min(var(--ns,1), 1.5));padding:.26em .78em}
  /* スマホでは、札はいつもコマの左上の角に（大きな札が人物にかからないように） */
  .mg-row:not(.is-keep) .mg-n{left:0!important;top:0!important}
  /* はみ出す人物（.mg-out）は、1列に並べると上のコマの絵に重なるので、コマの中におさめる（2026-10-30） */
  .mg-row:not(.is-keep) .mg-out{top:3px}
  .mg-row:not(.is-keep) .mg-out img.mg-c{margin-top:0}
  /* スマホだけの位置（bm / fm）があるふきだし・効果の文字は、スマホ用のほうを出す */
  .mg-row:not(.is-keep) .mg-p > .is-donly{display:none}
  .mg-row:not(.is-keep) .mg-p > .is-monly{display:block}
  .mg-memo .mg-av{width:60px;height:60px}
  .sk-faq dt,.sk-faq dd{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .sk-faq .mg-av{width:44px;height:44px}
}