:root{--accent:#ffd400;--cream:#fff8dc;--yellow-soft:#ffe45c;--black:#1f1f1f;--line-soft:#ececec}
body{background:#FAF7F2}
/* 背景の装飾：ロゴを薄く斜めに敷き詰める（ページの地の部分だけに見える） */
body::before{content:"";position:fixed;inset:-60%;z-index:-1;pointer-events:none;background:url("../images/cocogram_pattern.webp") 0 0/280px auto repeat;opacity:.05;transform:rotate(-30deg)}
a{color:var(--black)}
.hero{background:var(--accent) url("../images/cocogram_japan_map.webp") center/cover no-repeat;padding:88px 0 80px;border-bottom:1px solid #e0bc00}
.hero h1 span{display:inline-block}
/* ブランド名（ロゴ＋「小中学生向けプログラミング教室／ココグラム」）。バッジにせず、文字で大きく見せる */
.hero .hero-brand{display:flex;justify-content:center;margin:0 0 36px}
.hero .hero-sub{margin-left:auto!important;margin-right:auto!important;text-align:center}
.hero .hero-brand .hb-logo{--h:180px;display:flex;flex-direction:column;align-items:center;margin-top:14px}
/* ロゴのキャラクターは SVG（白い目・黄色いアンテナの玉。5〜13秒おきにまばたき。アンテナから薄い電波）。文字の部分は元のロゴ画像の下側だけを見せる */
.hb-logo .hb-chara{display:block;height:calc(var(--h)*124/280);width:auto;overflow:visible}
.hb-logo .hb-ink{fill:#030001}
.hb-logo .hb-white{fill:#F3FAFD}
/* 顔の白が水色の背景から浮かないよう、白をわずかに水色寄りにし、ロゴ全体にごく薄い白い光彩をつける */
.hero .hero-brand .hb-logo{filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.hb-logo .hb-ball{fill:#FFD400;stroke:#030001;stroke-width:12}
.hb-logo .hb-waves path{fill:none;stroke:#FFD400;stroke-width:11;stroke-linecap:round;opacity:0;animation:hb-wave 3.2s ease-in-out infinite}
.hb-logo .hb-waves .w2{animation-delay:.4s}
@keyframes hb-wave{0%{opacity:0}18%{opacity:.8}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hb-logo .hb-waves{display:none}}
.hb-logo .hb-eye{transform-box:fill-box;transform-origin:center;transition:transform .08s ease-in-out}
.hb-logo.blink .hb-eye{transform:scaleY(.1)}
.hb-logo .hb-words{display:block;height:calc(var(--h)*156/280);overflow:hidden}
.hb-logo .hb-words img{display:block;height:var(--h);width:auto;margin-top:calc(var(--h)*-124/280)}
.hero .hero-brand .hb-text{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;padding:0;border-radius:0;background:none;line-height:1.25}
/* 大見出し（h1）にしても見た目が変わらないよう、ヒーローの h1 用の指定を打ち消す */
.hero .hero-brand h1.hb-text{margin:0!important;font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px!important;font-weight:700;letter-spacing:normal!important;text-shadow:none!important}
.hero .hb-sub{font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--black)}
.hero .hb-name{margin-top:2px;font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;font-size:36px;font-weight:700;letter-spacing:.08em;color:#1f1f1f;text-shadow:none}
.hero .hero-sub > span{display:inline-block}
.hero .hero-sub em.hl{font-style:normal}
.hero .hero-sub{display:block;max-width:none;margin:0;padding:0;border-radius:0;background:none;color:var(--black);font-family:"Zen Maru Gothic",sans-serif;font-size:20px;font-weight:700;line-height:1.7;letter-spacing:.02em;
 text-shadow:0 0 0 #fff,1.5px 0 0 #fff,-1.5px 0 0 #fff,0 1.5px 0 #fff,0 -1.5px 0 #fff,1.5px 1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff}
@media (max-width:760px){
 .hero h1{font-size:min(6.6vw,30px)!important}
 .hero .hero-brand{margin-bottom:24px}
 .hero .hero-brand .hb-logo{--h:112px;margin-top:10px}
 .hero .hero-brand .hb-text{text-align:center}
 .hero .hb-sub{font-size:14px;letter-spacing:.02em}
 .hero .hb-name{font-size:28px}
 .hero .hero-sub{margin:0 auto;text-align:center;font-size:16px}
}
.hero h1{font-size:clamp(26px,3.6vw,36px);font-weight:700;margin:0 0 14px;color:var(--black);letter-spacing:.02em;
 text-shadow:0 0 0 #fff,2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,0 0 12px rgba(255,255,255,.9)}
.hero p{display:inline-block;margin:0;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--black);font-weight:500}
@media (max-width:760px){.hero{padding:64px 0 56px;text-align:center}}
.section-title{font-size:24px;font-weight:700;margin:64px 0 20px;padding-left:14px;border-left:6px solid var(--accent);line-height:1.3}
.section-title small{display:block;font-size:13px;font-weight:700;letter-spacing:.2em;color:#b89a00;margin-bottom:2px}
.mapbox{background:#5BC0F8;border:3px solid #1f1f1f;border-radius:16px;padding:20px 16px 18px;box-shadow:6px 6px 0 #1f1f1f}
.jmap{display:block;width:100%;height:auto;margin:0 auto}

.jmap a.pin{cursor:pointer;outline:none}
.jmap .map-title text{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;fill:#1f1f1f;paint-order:stroke;stroke:#FAF7F2;stroke-linejoin:round}
.jmap .mt-sub{font-size:30px;letter-spacing:.12em;stroke-width:7px}
.jmap .mt-main{font-size:42px;letter-spacing:.06em;stroke-width:8px}
.jmap .mt-rule{stroke:#FFD400;stroke-width:6;stroke-linecap:round}
.jmap .mt-route{fill:none;stroke:#FAF7F2;stroke-width:2;stroke-dasharray:1.5 6;stroke-linecap:round;opacity:.9}
.jmap .mt-node{fill:#FAF7F2}
.jmap .leader{fill:none;stroke:#1f1f1f;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.jmap .root{fill:#1f1f1f;stroke:#fff;stroke-width:1.2}
.jmap .leaders{pointer-events:none}
.jmap .sp-only{display:none}
@media (max-width:640px){.jmap .pc-only{display:none} .jmap .sp-only{display:inline}}.jmap a.pin:focus{--pin-head:#FFE680}
.mapbox{position:relative}
.pin-preview{position:absolute;z-index:5;transform:translate(-50%,-100%);min-width:180px;max-width:280px;padding:10px 14px;border-radius:10px;background:var(--black);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none;opacity:0;transition:opacity .15s}
.pin-preview.on{opacity:1}
.pin-preview strong{display:block;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;line-height:1.4}
.pin-preview span{display:block;font-size:13px;line-height:1.5;opacity:.85;margin-top:2px}
.pin-preview::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--black);border-bottom:0}
.legend .lg-pin{width:15px;height:24px;vertical-align:-6px;margin-right:6px}
.hd-cta{background:#FFD400;color:#1f1f1f;border:2px solid #1f1f1f;box-shadow:3px 3px 0 #1f1f1f}

.jmap .inset{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:1.5;stroke-dasharray:5 4}
.jmap .kframe-main{fill:none;stroke:#1f1f1f;stroke-width:2;stroke-dasharray:4 3}
.jmap .kline{fill:none;stroke:#1f1f1f;stroke-width:2;stroke-dasharray:4 3}
.jmap .kframe-bg{fill:#8FD6FF}
.jmap .kframe-shadow{fill:#1f1f1f}
.jmap .kframe{fill:none;stroke:#1f1f1f;stroke-width:3}
.legend{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;font-size:13px;font-weight:700;color:#1f1f1f;margin:14px auto 0;padding:8px 16px;width:fit-content;max-width:100%;background:#fff;border:2px solid #1f1f1f;border-radius:999px;box-shadow:3px 3px 0 #1f1f1f}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.legend .l1{background:#FFD400;border:2px solid #1f1f1f}.legend .l2{background:var(--black);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc}
.table-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05)}
table.list{width:100%;border-collapse:collapse}
table.list td,table.list th{border-bottom:1px solid var(--line-soft);padding:14px 18px;text-align:left;vertical-align:top}
table.list td.name{border-right:1px solid var(--line-soft)}
table.list tr:last-child td{border-bottom:none}
table.list tr.area th{background:linear-gradient(90deg,#1f1f1f,#3b3b3b);color:#fff;font-size:16px;letter-spacing:.05em;scroll-margin-top:100px;border-bottom:none}
table.list tr.area th::before{content:"";display:inline-block;width:10px;height:10px;background:var(--accent);border-radius:2px;margin-right:10px;vertical-align:1px}
table.list tr.area th span{font-weight:400;font-size:13px;margin-left:10px;color:var(--accent)}
table.list td.name{width:34%;font-weight:700;white-space:nowrap}
table.list td.name a{text-decoration:none;color:inherit}
table.list tr.link{cursor:pointer}
table.list tr.link td{transition:background .15s}
table.list tr.link td.addr::after{content:"›";float:right;margin-left:12px;font-size:18px;line-height:1.2;color:#c4c4c4;transition:color .15s}

table.list td.addr{color:var(--sub);font-size:16px}

table.list tr,table.list td.name{scroll-margin-top:100px}
#list{scroll-margin-top:100px}
html{scroll-behavior:smooth}
footer.site{border-top:4px solid var(--accent)}
/* NEWS：タイトルを主役に、日付とタグは小さく控えめに。本文は折りたたみ */
.news .section-title{margin-top:48px}
.news-list{display:flex;flex-direction:column;gap:10px}
.news-item{background:#FFFCF7;border:1px solid #E2DACB;border-radius:12px;overflow:hidden}
.news-item summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 52px 14px 18px;position:relative}
.news-item summary::-webkit-details-marker{display:none}

.news-item summary:focus-visible{outline:3px solid #1E4D8C;outline-offset:-3px}
.news-item summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid var(--black);border-bottom:2.5px solid var(--black);transform:rotate(45deg);transition:transform .2s}
.news-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--sub);line-height:1.4}
.news-meta time{margin-right:4px;font-variant-numeric:tabular-nums}
.ntag{display:inline-block;padding:0 8px;border:1px solid #D8D0C0;border-radius:999px;font-size:13px;line-height:1.6;color:var(--sub)}
.news-ttl{font-size:16px;font-weight:700;line-height:1.6;color:var(--black)}
.nb{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.6;vertical-align:2px}
.nb-new{background:var(--accent);color:var(--black)}
.nb-imp{background:#FBE3E1;color:#B3261E}
.news-body{margin:0 18px;padding:14px 0 16px;border-top:1px dashed #D8D0C0;font-size:16px;line-height:1.85;word-break:break-word}
.news-body a{color:#1E4D8C;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
 .news .section-title{margin-top:36px}
 .news-list{gap:8px}
 .news-item summary{padding:10px 40px 10px 14px;gap:2px}
 .news-item summary::after{right:16px}
 .news-body{margin:0 14px;padding:12px 0 14px}
}
@media (max-width:640px){
 table.list td.name,table.list td.addr{display:block;width:100%;border:none}
 table.list tr:not(.area){display:block;border-bottom:1px solid var(--line-soft)}
 table.list td.name{padding-bottom:0;white-space:normal}
 .legend{border-radius:12px}
}

/* FAQページの配色：バターイエロー × ペールスカイ（黒の線と影は教室マップと共通） */
:root{--butter:#FFF4C7;--butter-dot:#F3D66E;--sky:#7FD0EA;--sky-soft:#E3F4FA}
.faq-hero{background:var(--butter) radial-gradient(var(--butter-dot) 1.6px,transparent 1.8px) 0 0/22px 22px;padding:44px 0;border-bottom:1px solid #EBD27A}
.faq-hero .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.faq-hero .en{display:inline-block;margin:0 0 10px;padding:2px 12px;border:2px solid var(--black);border-radius:6px;background:#FFFCF7;font-size:14px;font-weight:700;letter-spacing:.2em}
.faq-hero h1{margin:0 0 12px;font-size:clamp(28px,4.4vw,44px);color:var(--black);letter-spacing:.02em;text-shadow:none}
.faq-hero .lead{margin:0;font-size:16px;color:var(--ink)}
.faq-hero svg{flex:none;width:300px;height:auto;display:block}
@media (max-width:640px){
 .faq-hero{padding:32px 0}
 .faq-hero .wrap{gap:12px}
 .faq-hero svg{width:128px}
}
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding:0;list-style:none}
.faq-nav a{display:inline-block;padding:8px 16px;border:2px solid var(--black);border-radius:999px;background:#FFFCF7;color:var(--black);font-size:14px;font-weight:700;text-decoration:none;transition:background .15s}.faq-nav a:focus-visible{background:var(--accent)}
.faq-nav a span{margin-left:6px;font-weight:500;color:var(--sub)}
.faq-cat{scroll-margin-top:100px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#FFFCF7;border:2px solid var(--black);border-radius:12px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:16px 56px 16px 18px;position:relative;font-size:17px;font-weight:700;line-height:1.6;transition:background .15s}
.faq-item summary::-webkit-details-marker{display:none}

.faq-item[open] summary{background:var(--butter)}
.faq-item summary:focus-visible{outline:3px solid #1E4D8C;outline-offset:-3px}
.faq-item summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:3px solid var(--black);border-bottom:3px solid var(--black);transform:rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq-item .qa{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-family:"Zen Maru Gothic",sans-serif;font-size:16px;font-weight:700;line-height:1}
.faq-item .q{background:var(--accent);color:var(--black);border:2px solid var(--black)}
.faq-item .a{background:var(--sky);color:var(--black);border:2px solid var(--black)}
.faq-item .ans{display:flex;align-items:flex-start;gap:12px;margin:0 18px;padding:16px 0 18px;border-top:1px dashed #cfc7b8;font-size:16px;line-height:1.85}
.faq-item .ans p{margin:2px 0 0;word-break:break-word}
.faq-item .ans a{color:#1E4D8C;text-decoration:underline;text-underline-offset:3px}
.faq-cta{margin:56px 0 0;padding:28px 24px;border:3px solid var(--black);border-radius:16px;background:var(--sky-soft);box-shadow:6px 6px 0 var(--black);text-align:center}
.faq-cta p{margin:0 0 14px;font-size:17px;font-weight:700}
.faq-cta a{display:inline-block;padding:12px 28px;border-radius:999px;background:#FFD400;color:#1f1f1f;border:2px solid #1f1f1f;box-shadow:3px 3px 0 #1f1f1f;font-size:17px;font-weight:700;text-decoration:none;transition:background .15s}.faq-cta a:focus-visible{background:#FF9F1C}
.back-wrap{margin:40px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.back{display:inline-block;padding:12px 28px;border-radius:999px;background:var(--dark);color:#fff;text-decoration:none;font-weight:700;font-size:16px;transition:background .15s}

@media (max-width:640px){
 .faq-item summary{font-size:16px;padding:14px 48px 14px 14px}
 .faq-item summary::after{right:16px}
 .faq-item .ans{margin:0 14px}
}

/* ココグラムとは */
.section-title{text-wrap:balance}
.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.ab-card{background:#FFFCF7;border:2px solid var(--black);border-radius:16px;padding:24px 22px;text-align:center}
.ab-card svg{width:112px;height:112px;display:block;margin:0 auto 12px}
.ab-card h3{margin:0 0 10px;font-size:20px}
.ab-card p{margin:0;text-align:left;font-size:16px;line-height:1.85}
.ab-ico .ln,.ab-card .ln{stroke:var(--ico-ln,#1f1f1f);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.ab-card .nofill{fill:none}
.ab-card .f1{fill:var(--ico-a,#FFD400)} .ab-card .f2{fill:var(--ico-b,#7FD0EA)} .ab-card .f3{fill:var(--ico-c,#FAF7F2)}
.ab-cur{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}
.ab-cur p{margin:0 0 14px;font-size:16px;line-height:1.9}
.ab-cur ul{margin:0 0 14px;padding:0;list-style:none}
.ab-cur li{position:relative;padding-left:22px;margin:6px 0;font-weight:700;font-size:16px}
.ab-cur li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.ab-venn{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.ab-venn circle{stroke:var(--ico-ln,#1f1f1f);stroke-width:3}
.ab-venn .v1{fill:var(--venn-a,rgba(255,212,0,.85))} .ab-venn .v2{fill:var(--venn-b,rgba(127,208,234,.8))} .ab-venn .v3{fill:var(--venn-c,rgba(255,159,28,.6))}
.ab-venn .vc{fill:#FFFCF7}
.ab-venn text{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:20px;fill:var(--ico-ln,#1f1f1f);text-anchor:middle;dominant-baseline:central}
.ab-venn .vct{font-size:15px;letter-spacing:.05em}
.ab-table-wrap{margin:32px 0 0;padding:2px;overflow-x:auto}
table.ab-table{width:100%;border-collapse:separate;border-spacing:0;background:#FFFCF7;border:2px solid var(--black);border-radius:16px;overflow:hidden}
table.ab-table caption{caption-side:top;text-align:left;font-weight:700;font-size:16px;margin:0 0 10px}
table.ab-table th,table.ab-table td{padding:14px 18px;text-align:left;font-size:16px;border-bottom:1px solid #E2DACB}
table.ab-table thead th{background:var(--black);color:#FAF7F2;font-size:14px;letter-spacing:.05em;border-bottom:none}
table.ab-table tbody th{width:32%;white-space:nowrap;background:#FFF8DC}
table.ab-table tbody tr:last-child th,table.ab-table tbody tr:last-child td{border-bottom:none}
@media (max-width:760px){
 .ab-cards{grid-template-columns:1fr;gap:12px}
 .ab-card{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;align-items:center;text-align:left;padding:16px}
 .ab-card svg{width:72px;height:72px;margin:0;grid-row:span 2}
 .ab-card h3{margin:0;font-size:18px}
 .ab-card p{grid-column:1 / -1;margin-top:6px}
 .ab-cur{grid-template-columns:1fr;gap:20px}
 .ab-venn{max-width:300px}
 table.ab-table tbody th{white-space:normal}
 table.ab-table th,table.ab-table td{padding:12px 14px}
}

/* 教材について */
.section-title{text-wrap:balance}
.mt-notice{margin:28px 0 0;padding:20px 24px;border-radius:16px;background:var(--cream);border:2px solid var(--black)}
.mt-notice p{margin:0 0 8px;font-size:16px;line-height:1.85}
.mt-notice strong{font-weight:700;color:#B3261E}
.mt-notice a{display:inline-block;margin-top:6px;padding:9px 20px;border-radius:999px;border:2px solid var(--black);background:#FFFCF7;color:var(--black);font-weight:700;text-decoration:none;transition:background .15s}.mt-notice a:focus-visible{background:#FFD400}
.mt-cap{margin:32px 0 10px;font-weight:700;font-size:16px}
.mt-cmp{margin:0;overflow-x:auto;padding:2px}
table.mt-table .mt-th-img{display:block;width:100%;max-width:240px;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin:2px 0 10px;background:#FFFFFF}
table.mt-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;background:#FFFCF7;border:2px solid var(--black);border-radius:16px;overflow:hidden}
table.mt-table th,table.mt-table td{padding:12px 16px;text-align:left;vertical-align:top;font-size:16px;line-height:1.7;border-bottom:1px solid #E2DACB}
table.mt-table td+td{border-left:1px solid #E2DACB}
table.mt-table thead th{background:var(--black);color:#FAF7F2;font-size:14px;letter-spacing:.04em;border-bottom:none}
table.mt-table tbody th{width:22%;background:#FFF8DC;white-space:nowrap}
table.mt-table tbody tr:last-child th,table.mt-table tbody tr:last-child td{border-bottom:none}
.mt-accs{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.mt-acc{background:#FFFCF7;border:2px solid var(--black);border-radius:16px;overflow:hidden}
.mt-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 60px 18px 20px;position:relative;transition:background .15s}
.mt-acc summary::-webkit-details-marker{display:none}

.mt-acc summary:focus-visible{outline:3px solid #1E4D8C;outline-offset:-3px}
.mt-acc summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:3px solid var(--black);border-bottom:3px solid var(--black);transform:rotate(45deg);transition:transform .2s}
.mt-acc[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.mt-tag{flex:none;padding:4px 12px;border-radius:6px;background:#FFD400;border:2px solid var(--black);font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px}
.mt-sum{display:flex;flex-direction:column;gap:2px}
.mt-name{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:21px;line-height:1.4}
.mt-logo{display:block;width:100%;max-width:360px;height:auto;margin:18px 0 0}
.ab-card h3{text-wrap:balance}
.mt-sub{font-size:14px;color:var(--sub)}
.mt-in{padding:4px 24px 24px;border-top:1px dashed #D8D0C0}
.mt-in p{font-size:16px;line-height:1.9;margin:14px 0 0}
.mt-h{margin:28px 0 8px;font-size:18px;font-family:"Zen Maru Gothic",sans-serif}
.mt-cycle{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mt-cycle li{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:#FFFFFF;border:1px solid #E2DACB}
.mt-cycle .mt-cy-img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#FFFFFF;border-radius:8px;border:1px solid #E2DACB;margin-bottom:8px}
.mt-cycle .mt-n{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:22px;color:#FF9F1C;line-height:1}
.mt-cycle b{font-size:16px}
.mt-cycle span:last-child{font-size:15px;line-height:1.75}
.mt-list{margin:8px 0 0;padding:0;list-style:none}
.mt-list li{position:relative;padding-left:22px;margin:6px 0;font-size:16px;line-height:1.8}
.mt-list li::before{content:"";position:absolute;left:4px;top:.65em;width:8px;height:8px;border-radius:50%;background:#FF9F1C}
.mt-fig{margin:0}
.mt-fig img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #E2DACB;background:#FFFFFF}
.mt-fig figcaption{margin-top:6px;font-size:14px;color:var(--sub);line-height:1.6}
.mt-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
.mt-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.mt-grid4 img{aspect-ratio:3/2;object-fit:cover}
.mt-grid4 figcaption{text-align:center;font-weight:700;color:var(--black);font-size:15px}
.mt-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;margin-top:28px}
.mt-feat.rev > .mt-fig{order:2}
.mt-feat .mt-h{margin-top:0}
.mt-feat p{margin-top:0}
.mt-link{margin-top:28px!important;padding:16px 18px;border-radius:12px;background:#FFFFFF;border:1px solid #E2DACB;font-weight:700}
.mt-link a{font-weight:500;color:#1E4D8C;word-break:break-all;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
 .mt-notice{padding:16px}
 table.mt-table{min-width:0}
 table.mt-table thead{display:none}
 table.mt-table tbody,table.mt-table tr,table.mt-table th,table.mt-table td{display:block;width:auto}
 table.mt-table tbody th{width:auto!important;white-space:normal;padding:10px 14px}
 table.mt-table td{padding:8px 14px 10px;border-left:none!important}
 table.mt-table td::before{content:attr(data-k);display:block;font-size:13px;font-weight:700;color:var(--sub)}
 .mt-acc summary{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 48px 14px 16px}
 .mt-acc summary::after{right:18px}
 .mt-name{font-size:18px}
 .mt-logo{max-width:280px}
 .mt-in{padding:4px 16px 20px}
 .mt-cycle{grid-template-columns:1fr}
 .mt-row{grid-template-columns:1fr}
 .mt-grid4{grid-template-columns:1fr 1fr}
 .mt-feat,.mt-feat.rev{grid-template-columns:1fr;gap:12px}
 .mt-feat.rev > .mt-fig{order:0}
}


/* ===== パステル改訂案 ===== */
:root{--accent:#FFF07A;--cream:#FFF9CF;--black:#1F3D7A;--line-soft:#D6EBF5;--ink:#2B3445;--sub:#5E6B7E;
 --red:#1F3D7A;--red-dark:#17305F;--red-soft:#EAF6FB;--dark:#1F3D7A;--surface:#FFFFFF;--line-c:#D6EBF5;--ft-bg:#EAF6FB;
 --butter:#FFF9CF;--sky:#8ECFEA;--sky-soft:#EAF6FB}
/* 横のはみ出しは clip で隠す（hidden だと body がスクロール領域になり、ヘッダーの固定表示が効かなくなる） */
body{background:#FFFFFF;color:#2B3445;overflow-x:clip}
/* 背景の装飾：A案と同じロゴの連続を、薄い水色で敷く（ロゴ画像を型にして水色で塗る） */
body::before{background:url("../images/cocogram_pattern_sky.webp") 0 0/280px auto repeat;opacity:.11}
a{color:#1F3D7A}
h1,h2,h3{color:#1F3D7A}

/* ヘッダー */
header.site{background:#FFFFFF;border-bottom:none;box-shadow:0 3px 0 #EAF6FB}
.hd-cta,.hd-login,.gnav a,.gnav .dummy,.back,.faq-nav a,.ft-form,.faq-cta a{font-family:"Zen Maru Gothic",sans-serif}
.hd-cta{background:#FFF07A!important;color:#1F3D7A!important;border:none!important;box-shadow:none!important}

.hd-login{background:#E3F4EC;border-color:#E3F4EC;color:#2E6B57}

.hd-menu{color:#1F3D7A}
.gnav ul{border:none;border-radius:24px;box-shadow:0 14px 36px rgba(31,61,122,.16);padding:10px 0}
.gnav li+li{border-top:1px dashed #D6EBF5}
.gnav a,.gnav .dummy{color:#1F3D7A}
.gnav .dummy{color:#8A97AA}.gnav a:focus-visible{background:#EAF6FB}
.gnav a[aria-current="page"]{box-shadow:inset 5px 0 0 #8ECFEA}

/* ヒーロー：空色の面に白い丸を浮かべ、下端は弧で白につなぐ */
.hero,.faq-hero{position:relative;background:#8ECFEA!important;border-bottom:none!important;overflow:hidden}
.hero{padding:80px 0 104px!important;text-align:center}
.hero::before,.faq-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at 10% 28%,rgba(255,255,255,.38) 0 56px,transparent 57px),
  radial-gradient(circle at 7% 72%,#FFD84A 0 13px,transparent 14px),
  radial-gradient(circle at 81% 46%,#FFD84A 0 8px,transparent 9px),
  radial-gradient(circle at 93% 70%,rgba(255,216,74,.75) 0 20px,transparent 21px),
  radial-gradient(circle at 88% 22%,rgba(255,255,255,.32) 0 92px,transparent 93px),
  radial-gradient(circle at 74% 78%,rgba(255,255,255,.28) 0 34px,transparent 35px),
  radial-gradient(circle at 24% 86%,rgba(255,255,255,.22) 0 22px,transparent 23px)}
.hero::after,.faq-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:56px;background:#FFFFFF;border-radius:50% 50% 0 0/100% 100% 0 0}
.hero .wrap,.faq-hero .wrap{position:relative;z-index:1}
.hero h1{color:#1F3D7A!important;text-shadow:none!important;letter-spacing:.12em}
@media (max-width:760px){.hero h1{letter-spacing:.02em}}
.hero p{background:#FFFFFF;color:#1F3D7A}
.hero p .num{display:inline-block;min-width:1.9em;margin:0 .2em;padding:0 .35em;border-radius:999px;background:#FFD84A;font-weight:700}
.hero .hero-brand{justify-content:center}
.hero .hb-sub{display:inline-block;padding:4px 18px;border-radius:999px;background:#F3FAFD;color:#1F3D7A;box-shadow:0 0 0 3px #FFD84A}
/* サブコピー：キーワードに黄色のマーカー、下に黄色の短い線でメリハリ */
.hero .hero-sub{font-size:20px!important}
.hero .hero-sub em.hl{padding:0 2px;background:linear-gradient(transparent 60%,#FFD84A 60% 92%,transparent 92%)}
.hero .hero-sub::after{content:"";display:block;width:56px;height:5px;margin:18px auto 0;border-radius:999px;background:#FFD84A}
@media (max-width:760px){.hero .hero-sub{font-size:16px!important} .hero .hero-sub::after{width:44px;margin-top:14px}}
.hero .hb-name{color:#1f1f1f;text-shadow:none;text-decoration:underline;text-decoration-color:#FFD84A;text-decoration-thickness:5px;text-underline-offset:8px;text-decoration-skip-ink:none}
.hero h1{margin:0 0 20px!important}
.hero .hero-sub{margin:0 auto;color:#1F3D7A;text-align:center;text-shadow:none;letter-spacing:.08em}
@media (max-width:760px){.hero .hero-sub{letter-spacing:.02em}}
@media (max-width:640px){.hero::before{background:radial-gradient(circle at 96% 8%,rgba(255,255,255,.35) 0 70px,transparent 71px),
  radial-gradient(circle at 4% 30%,rgba(255,255,255,.3) 0 34px,transparent 35px),
  radial-gradient(circle at 94% 47%,#FFD84A 0 9px,transparent 10px),
  radial-gradient(circle at 6% 92%,#FFD84A 0 12px,transparent 13px),
  radial-gradient(circle at 92% 95%,rgba(255,216,74,.75) 0 16px,transparent 17px)}}

/* セクション見出し：短い見出しは紺の丸に1文字ずつ、長い見出しは丸い点＋紺の文字 */
.section-title{border-left:none!important;padding-left:0!important;margin:88px 0 32px!important;color:#1F3D7A}
.section-title small{display:none}
.section-title.circles{text-align:center;line-height:1}
.ttl-c{display:inline-flex}
.ttl-c span{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#1F3D7A;color:#FFFFFF;font-size:24px;letter-spacing:0}
.ttl-c span+span{margin-left:-6px}
.section-title.plain{font-size:22px;display:flex;align-items:center;gap:12px;margin:56px 0 20px!important}
.section-title.plain::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:#8ECFEA;box-shadow:0 0 0 5px #EAF6FB}
@media (max-width:640px){.ttl-c span{width:42px;height:42px;font-size:20px} .ttl-c span+span{margin-left:-5px} .section-title{margin:64px 0 24px!important}}

/* 地図：淡い水色の海に白い陸、教室のある県はレモン色。黒い太線と影はなくす */
.mapbox{background:#BFE3F4;border:none;border-radius:32px;box-shadow:none}
.jmap .land{filter:drop-shadow(0 3px 0 rgba(31,61,122,.14))}
.jmap .pref{fill:#FFFFFF!important;stroke:#8FC2DA!important;stroke-width:1.2!important}
.jmap .pref.on path{fill:#FFD84A!important;stroke:#FFFFFF!important;stroke-width:1.2!important}

.jmap .inset{fill:rgba(255,255,255,.5);stroke:#6DB3D6}
.jmap .kframe{stroke:#1F3D7A;stroke-width:2.5}
.jmap .kframe-shadow{display:none}
.jmap .kframe-bg{fill:#BFE3F4}
.jmap .kframe-main,.jmap .kline{stroke:#1F3D7A}
.jmap .leader{stroke:#1F3D7A;stroke-width:1.4}
.jmap .root{fill:#1F3D7A}
.jmap .map-title text{fill:#1F3D7A!important;stroke:#FFFFFF!important}
.jmap .mt-rule{stroke:#FFF07A!important}
.jmap .mt-route{stroke:#8ECFEA!important;opacity:1}
.jmap .mt-node{fill:#8ECFEA!important}
.legend{background:#FFFFFF;border:none;box-shadow:none;color:#1F3D7A}
.legend .l1{background:#FFD84A;border:1px solid #E0B800}

/* ココグラムとは */
.ab-card,.ab-venn,table.ab-table{--ico-ln:#1F3D7A;--ico-a:#FFD84A;--ico-b:#A9DCF0;--ico-c:#FFFFFF;--venn-a:rgba(255,216,74,.85);--venn-b:rgba(142,207,234,.85);--venn-c:rgba(255,184,168,.75)}
.ab-card{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px}
.ab-card h3{color:#1F3D7A}
.ab-cur li::before{background:#8ECFEA}
table.ab-table{border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px;background:#FFFFFF}
table.ab-table thead th{background:#8ECFEA;color:#1F3D7A}
table.ab-table tbody th{background:#EAF6FB;color:#1F3D7A}
table.ab-table th,table.ab-table td{border-bottom-color:#D6EBF5}
/* 授業の流れ */
.fl-step,.tc-bubble,.fl-code,.fl-end{--ico-ln:#1F3D7A;--fl-b1:#FFD84A;--fl-b2:#A9DCF0;--fl-b3:#FFB8A8;--fl-bg:#EAF6FB;--fl-line:#8ECFEA;--fl-no-bg:#1F3D7A;--fl-no-fg:#FFFFFF}
.fl-step{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px}
.fl-no{border:none;border-radius:999px;padding:4px 14px}
.fl-head h3,.tc-name{color:#1F3D7A}
.fl-fig{border:none;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 2px #EAF6FB}
.tc-photo{border:none;border-radius:24px;box-shadow:0 0 0 2px #EAF6FB}
.tc-bubble{background:#EAF6FB;border:none;border-radius:24px;color:#1F3D7A}
.tc-bubble::before{border:none}
/* 教材について */
.mt-notice{background:#FFF9CF;border:none;border-radius:24px}
.mt-notice strong{color:#C2412D}
.mt-notice a{border:none;background:#FFFFFF;color:#1F3D7A}.mt-notice a:focus-visible{background:#FFD84A}
table.mt-table{border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px;background:#FFFFFF}
table.mt-table thead th{background:#8ECFEA;color:#1F3D7A}
table.mt-table .mt-th-img{border-radius:12px}
.mt-cap{color:#1F3D7A}
table.mt-table tbody th{background:#EAF6FB;color:#1F3D7A}
table.mt-table th,table.mt-table td,table.mt-table td+td{border-color:#D6EBF5}
.mt-acc{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px}.mt-acc[open] summary{background:#F5FBFE}
.mt-acc summary::after{border-color:#1F3D7A}
.mt-tag{background:#FFD84A;border:none;border-radius:999px;color:#1F3D7A}
.mt-name,.mt-h,.mt-cycle b{color:#1F3D7A}
.mt-in{border-top-color:#D6EBF5}
.mt-cycle li{background:#EAF6FB;border:none;border-radius:20px}
.mt-cycle .mt-n{color:#4E93B8}
.mt-cycle .mt-cy-img{border:none;border-radius:12px}
.mt-list li::before{background:#8ECFEA}
.mt-fig img{border:none;border-radius:12px}
.mt-link{background:#EAF6FB;border:none;border-radius:20px;color:#1F3D7A}
/* NEWS */
.news .section-title{margin:56px 0 24px!important}
@media (max-width:640px){.news .section-title{margin:40px 0 20px!important}}
.news-item{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:20px}

.news-item summary::after{border-color:#1F3D7A}
.news-ttl{color:#1F3D7A}
.ntag{border:none;background:#EAF6FB;color:#4E93B8}
.nb-new{background:#FFD84A;color:#1F3D7A}
.nb-imp{background:#FFE4DE;color:#C2412D}
.news-body{border-top-color:#D6EBF5}
/* 教室一覧 */
.table-card{border:none;border-radius:28px;box-shadow:0 0 0 2px #EAF6FB}
table.list tr.area th{background:#EAF6FB!important;color:#1F3D7A}
table.list tr.area th::before{background:#8ECFEA;border-radius:50%}
table.list tr.area th span{color:#4E93B8}



/* 教室ページ */
.card{border:none;border-radius:28px;box-shadow:0 0 0 2px #EAF6FB}
.head{border-top:none}
.area-tag{background:#FFF07A;color:#1F3D7A}
.meta{border-top:1px dashed #D6EBF5}
.meta dt{color:#4E93B8}
.catch{background:#EAF6FB;border:none;box-shadow:none;border-radius:40px;color:#1F3D7A}
.catch::before,.catch::after{color:rgba(142,207,234,.9)}
.head-vis{border-radius:12px}
@media (max-width:640px){.mainvis{border-radius:12px} .catch.on-vis{box-shadow:0 0 0 6px #FFFFFF}}
.lp{border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:28px}
.lp .num{background:#8ECFEA;color:#1F3D7A;border-radius:999px}
.lp img{border-radius:12px}
table.t thead th{background:#8ECFEA;color:#1F3D7A}
table.t thead th+th{border-left-color:rgba(255,255,255,.6)}
table.t th.course{background:#EAF6FB}
table.fee{border-color:#D6EBF5;box-shadow:none;border-radius:24px}
table.fee tr:first-child th{border-top-left-radius:24px} table.fee tr:first-child td{border-top-right-radius:24px}
table.fee tr:last-child th{border-bottom-left-radius:24px} table.fee tr:last-child td{border-bottom-right-radius:24px}
table.fee th{background:#EAF6FB}
.tip i{background:#8ECFEA}
.cur{border:none;background:#EAF6FB;box-shadow:none;color:#1F3D7A}
.cur::before{background:#8ECFEA}a.cur-link:focus-visible{background:#FFF9CF;border-color:transparent}
.back{background:#1F3D7A}

.pending{border-color:#D6EBF5;border-radius:24px}
.rules{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px}
.rules h3{color:#1F3D7A}
.rules li::before{background:#8ECFEA}
.sched summary{border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px;background:#FFFFFF}

.sched[open] summary{border-radius:24px 24px 0 0;background:#EAF6FB}
.sched .card{border-radius:0 0 24px 24px}
.sched-days,.sched-tg{color:#1F3D7A}

/* FAQ */
.faq-hero{padding:56px 0 88px!important}
.faq-hero .en{background:#FFFFFF;border:none;color:#1F3D7A;border-radius:999px;padding:2px 16px}
.faq-hero h1,.faq-hero .lead{color:#1F3D7A}
.faq-nav a{border:none;background:#EAF6FB;color:#1F3D7A}.faq-nav a:focus-visible{background:#FFF07A}
.faq-item{background:#FFFFFF;border:none;box-shadow:0 0 0 2px #EAF6FB;border-radius:24px}.faq-item[open] summary{background:#F5FBFE}
.faq-item summary::after{border-color:#1F3D7A}
.faq-item .q{background:#1F3D7A;color:#FFFFFF;border:none}
.faq-item .a{background:#FFF07A;color:#1F3D7A;border:none}
.faq-item .ans{border-top:1px dashed #D6EBF5}
.faq-cta{background:#EAF6FB;border:none;box-shadow:none;border-radius:40px}
.faq-cta a{background:#FFF07A;color:#1F3D7A;border:none;box-shadow:none;font-family:"Zen Maru Gothic",sans-serif}.faq-cta a:focus-visible{background:#FFE94D}

/* フッター：淡い水色、上端は弧 */
footer.site{position:relative;overflow-x:clip;margin-top:120px;background:#EAF6FB;color:#1F3D7A;border-top:none!important}
footer.site::before{content:"";position:absolute;left:-10%;right:-10%;top:-46px;height:48px;background:#EAF6FB;border-radius:50% 50% 0 0/100% 100% 0 0}
footer.site a{color:#1F3D7A}
.ft-h{border-bottom-color:#D6EBF5;opacity:1;color:#4E93B8}
footer.site a.ft-form{background:#1F3D7A;color:#FFFFFF;border-radius:999px}
.ft-copy{border-top-color:#D6EBF5}

@media (hover:hover){
.hd-cta:hover{background:var(--cta-hover,var(--red-dark))}
.hd-login:hover{background:#CDEBD7;border-color:#6DB985}
.hd-menu:hover{background:rgba(0,0,0,.05)}
.gnav a:hover{background:#F1ECE3}
footer.site a.ft-form:hover{opacity:.85}
footer.site a:not(.ft-tel):not(.ft-form):hover{text-decoration-color:currentColor}
.jmap .pref.on:hover path{fill:#FF9F1C}
.jmap a.pin:hover{--pin-head:#FFE680}
.hd-cta:hover{background:#FF9F1C}
table.list tr.link:hover td.addr::after{color:var(--black)}
table.list tr:not(.area):hover td{background:var(--cream)}
.news-item summary:hover{background:var(--cream)}
.faq-nav a:hover{background:var(--accent)}
.faq-item summary:hover{background:var(--butter)}
.faq-cta a:hover{background:#FF9F1C}
.back:hover{background:var(--red)}
.mt-notice a:hover{background:#FFD400}
.mt-acc summary:hover{background:var(--cream)}
.hd-cta:hover{background:#FFE94D!important}
.hd-login:hover{background:#D2EEE1;border-color:#D2EEE1}
.gnav a:hover{background:#EAF6FB}
.jmap .pref.on:hover path{fill:#FFC93C!important}
.mt-notice a:hover{background:#FFD84A}
.mt-acc summary:hover{background:#F5FBFE}
.news-item summary:hover{background:#F5FBFE}
table.list tr:not(.area):hover td{background:#FFF9CF}
table.list tr.link:hover td.addr::after{color:#1F3D7A}
a.cur-link:hover{background:#FFF9CF;border-color:transparent}
.back:hover{background:#2C5299}
.sched summary:hover{background:#F5FBFE}
.faq-nav a:hover{background:#FFF07A}
.faq-item summary:hover{background:#F5FBFE}
.faq-cta a:hover{background:#FFE94D}
}