/* built from src/site.src.css by wp_build.py */

:root {
  --k: 1; --kt: 1;
  --cream: #FFF8EA; --cream2: #FFF0D2; --paper: #FFFFFF; --sand: #F6E7C8;
  --ink: #3A2C25; --ink2: #6E5D52; --ink3: #9A8A7E; --line: #EADCC2;
  --blue: #00A0E9; --blue-d: #0074B3; --blue-l: #E3F4FC; --yellow: #FFF100; --yellow-s: #FFE94A;
  --soroban: #F07A28; --soroban-d: #B9520E; --soroban-l: #FFEBDA;
  --shodo: #2F9C6A; --shodo-d: #1D7049; --shodo-l: #E2F4EA;
  --art: #E9578A; --art-d: #B83063; --art-l: #FDE6EE;
  --line-g: #06C755;
  --r: 22px; --r-s: 14px; --shadow: 0 10px 30px rgba(90, 60, 30, .10); --shadow-s: 0 4px 14px rgba(90, 60, 30, .08);
  --maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
@media (max-width: 680px) { :root { --k: .64; --kt: .9; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: calc(16px*var(--kt)); line-height: 1.9; letter-spacing: .02em; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
svg[class^="ic-"], svg[class*=" ic-"] { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
img { height: auto; }
a { color: var(--blue-d); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
h1, h2, h3, h4 { font-family: var(--maru); font-weight: 700; line-height: 1.45; letter-spacing: .03em; margin: 0 0 .6em; color: var(--ink); }
p { margin: 0 0 1.1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1160px, 100% - 2 * calc(32px*var(--k))); margin-inline: auto; }
@media (max-width: 680px) { .wrap { width: calc(100% - 32px); } }
.wrap-n { width: min(860px, 100% - 2 * calc(32px*var(--k))); margin-inline: auto; }
@media (max-width: 680px) { .wrap-n { width: calc(100% - 32px); } }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mark { background: linear-gradient(transparent 58%, var(--yellow-s) 58%); padding: 0 .1em; }
.c-soroban { color: var(--soroban-d); } .c-shodo { color: var(--shodo-d); } .c-art { color: var(--art-d); } .c-blue { color: var(--blue-d); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: max(46px, calc(54px*var(--k))); padding: calc(12px*var(--k)) calc(28px*var(--k)); border-radius: 999px; border: 0; cursor: pointer; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.3; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; text-align: center; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-main { background: var(--blue-d); color: #fff; box-shadow: 0 6px 0 #005787; }
.btn-main:hover { color: #fff; background: #0080C4; }
.btn-main:active { transform: translateY(3px); box-shadow: 0 3px 0 #005787; }
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 0 #D9C800; }
.btn-yellow:hover { color: var(--ink); background: #FFF64D; }
.btn-line { background: var(--line-g); color: #fff; box-shadow: 0 6px 0 #04913E; }
.btn-line:hover { color: #fff; background: #08d65d; }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: var(--shadow-s); }
.btn-ghost:hover { color: var(--blue-d); border-color: var(--blue); }
.btn-s { min-height: max(40px, calc(40px*var(--k))); padding: calc(8px*var(--k)) calc(18px*var(--k)); font-size: calc(15px*var(--kt)); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(14px*var(--k)) calc(16px*var(--k)); align-items: center; }
.center .btn-row, .btn-row.center { justify-content: center; }
.more { display: inline-flex; align-items: center; gap: .35em; font-family: var(--maru); font-weight: 700; text-decoration: none; }
.more svg { width: 1em; height: 1em; transition: transform .15s; }
.more:hover svg { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: calc(4px*var(--k)) calc(14px*var(--k)); border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: calc(14px*var(--kt)); font-weight: 500; line-height: 1.5; color: var(--ink2); }
.chip svg { width: 1.05em; height: 1.05em; }
.chips { display: flex; flex-wrap: wrap; gap: calc(8px*var(--k)); margin: 0; padding: 0; list-style: none; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: max(11px,calc(12px*var(--kt))); font-weight: 700; line-height: 1.7; letter-spacing: .05em; vertical-align: middle; white-space: nowrap; }
.b-blue { background: var(--blue-d); color: #fff; } .b-soroban { background: var(--soroban); color: #fff; } .b-shodo { background: var(--shodo); color: #fff; } .b-art { background: var(--art); color: #fff; } .b-piano { background: #8a6fc9; color: #fff; }
.b-new { background: var(--yellow); color: var(--ink); }
.b-open { background: var(--blue-l); color: var(--blue-d); }
.b-few { background: #FFF1C2; color: #8A5A00; }
.b-full, .b-partial { background: #FCE3E1; color: #A3352A; }
.b-closed, .b-paused { background: #ECE6E0; color: #6E5D52; }
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255, 248, 234, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .2s; }
.site-head.scrolled { box-shadow: 0 4px 20px rgba(90, 60, 30, .10); }
.head-in { display: flex; align-items: center; gap: calc(20px*var(--k)); height: calc(84px*var(--k)); }
.brand { display: flex; align-items: center; gap: calc(12px*var(--k)); text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: calc(54px*var(--k)); height: calc(54px*var(--k)); }
.brand b { display: block; font-family: var(--maru); font-weight: 900; font-size: calc(23px*var(--kt)); letter-spacing: .06em; line-height: 1.2; }
.brand small { display: block; font-size: max(11px,calc(11.5px*var(--kt))); color: var(--ink2); letter-spacing: .04em; line-height: 1.4; }
.gnav { display: flex; align-items: center; gap: calc(2px*var(--k)); margin-left: auto; }
.gnav > a, .gnav .item > a { display: flex; align-items: center; gap: 4px; padding: calc(10px*var(--k)) calc(13px*var(--k)); border-radius: 12px; color: var(--ink); text-decoration: none; font-family: var(--maru); font-weight: 700; font-size: calc(15.5px*var(--kt)); white-space: nowrap; }
.gnav > a:hover, .gnav .item > a:hover, .gnav .item:hover > a { background: #fff; color: var(--blue-d); }
.gnav a.on { color: var(--blue-d); }
.gnav .caret { width: 14px; height: 14px; opacity: .6; }
.gnav .item { position: relative; }
.gnav .drop { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); padding-top: 10px; opacity: 0; visibility: hidden; transition: .18s; }
.gnav .item:hover .drop, .gnav .item:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.gnav .drop .box { background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(90, 60, 30, .16); padding: 10px; min-width: 300px; display: grid; gap: 2px; }
.gnav .drop a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.gnav .drop a:hover, .gnav .drop a.on { background: var(--cream); }
.gnav .drop b { display: block; font-family: var(--maru); font-size: 15px; }
.gnav .drop span { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.head-cta { display: flex; align-items: center; gap: calc(10px*var(--k)); flex: none; }
.head-tel { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--ink); line-height: 1.2; }
.head-tel b { font-family: var(--maru); font-size: calc(19px*var(--kt)); letter-spacing: .04em; display: flex; align-items: center; gap: 4px; }
.head-tel b svg { width: 18px; height: 18px; color: var(--blue-d); }
.head-tel small { font-size: max(11px,calc(11px*var(--kt))); color: var(--ink2); }
.head-cta .btn { min-height: calc(46px*var(--k)); padding: calc(8px*var(--k)) calc(20px*var(--k)); font-size: calc(15.5px*var(--kt)); }
.menu-btn { display: none; width: auto; min-width: 56px; padding: 0 10px; height: 48px; border-radius: 14px; border: 0; background: var(--blue-d); color: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; line-height: 1; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn span { white-space: nowrap; letter-spacing: 0; }
.head-in.wrap { width: min(1480px, 100% - 2 * calc(32px*var(--k))); }
@media (max-width: 1599px) { .head-tel { display: none; } }
@media (max-width: 1399px) { .head-cta .btn-line { display: none; } }
@media (max-width: 1120px) {
  .gnav, .head-cta .btn-line { display: none; }
  .menu-btn { display: inline-flex; }
  .head-cta { margin-left: auto; }
}
@media (max-width: 680px) {
  .head-in { height: 60px; gap: 10px; }
  .brand img { width: 40px; height: 40px; }
  .brand b { font-size: 19px; }
  .brand small { font-size: 10px; }
  .head-cta .btn { min-height: 40px; padding: 6px 14px; font-size: 14px; box-shadow: 0 4px 0 #D9C800; }
  .menu-btn { width: auto; min-width: 48px; height: 44px; padding: 0 8px; border-radius: 12px; }
}
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; overflow: hidden; transition: visibility 0s linear .3s; }   
.drawer.open { visibility: visible; transition: none; }
.drawer .shade { position: absolute; inset: 0; background: rgba(40, 25, 15, .45); opacity: 0; transition: opacity .25s; }   
.drawer:not(.open) { pointer-events: none; }   
.drawer.open .shade { opacity: 1; }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--cream); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .28s ease; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.drawer.open .panel { transform: none; }
.drawer .close { align-self: flex-end; width: 44px; height: 44px; border-radius: 12px; border: 0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drawer .close svg { width: 22px; height: 22px; }
.drawer .grp { background: #fff; border-radius: 16px; padding: 6px 14px; }
.drawer .grp > a, .drawer .grp > span { display: block; padding: 10px 0; font-family: var(--maru); font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; }
.drawer .grp ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.drawer .grp li a { display: block; padding: 7px 0; font-size: 14px; color: var(--ink2); text-decoration: none; border-top: 1px dashed var(--line); }
.drawer .cta { display: grid; gap: 10px; }
.drawer .cta .btn { width: 100%; }
.drawer .tel { text-align: center; font-size: 13px; color: var(--ink2); }
.drawer .tel a { display: block; font-family: var(--maru); font-weight: 700; font-size: 24px; color: var(--ink); text-decoration: none; }
body.noscroll { overflow: hidden; }
body .mfm-floating-menu { transition: opacity .2s, visibility .2s; }
body.noscroll .mfm-floating-menu { opacity: 0; visibility: hidden; pointer-events: none; }
.sec { padding: calc(96px*var(--k)) 0; position: relative; }
.sec-s { padding: calc(64px*var(--k)) 0; }
.sec.alt { background: var(--cream2); }
.sec.white { background: #fff; }
.sec.blue { background: var(--blue-l); }
.sec-head { text-align: center; margin: 0 auto calc(48px*var(--k)); max-width: 760px; }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .14em; color: var(--blue-d); margin-bottom: calc(10px*var(--k)); }
.sec-head .eyebrow::before, .sec-head .eyebrow::after { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--yellow-s); }
.sec-head h2 { font-size: max(17px, calc(36px*var(--k))); margin-bottom: calc(14px*var(--k)); }
.sec-head p { color: var(--ink2); margin: 0; }
.sec-head.left { text-align: left; margin-left: 0; }
.sec-head.left .eyebrow::after { display: none; }
@media (max-width: 680px) { .sec-head h2 { font-size: 25px; } }
.wave-top, .wave-bot { display: block; width: 100%; height: calc(40px*var(--k)); }
.lead { font-size: calc(18px*var(--kt)); color: var(--ink2); }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.hero { position: relative; padding: calc(56px*var(--k)) 0 calc(96px*var(--k)); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF9C4 0, #FFF4A3 45%, rgba(255, 244, 163, 0) 70%); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: calc(40px*var(--k)); align-items: center; }
.hero .eyebrow { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: calc(18px*var(--k)); }
.hero h1 { font-family: var(--maru); font-weight: 900; font-size: max(17px, calc(76px*var(--k))); line-height: 1.22; letter-spacing: .06em; margin: 0 0 calc(22px*var(--k)); }
.hero h1 span { display: inline-block; position: relative; }
.hero h1 span::after { content: ""; position: absolute; left: 4%; right: 10%; bottom: 6%; height: 18%; border-radius: 10px; z-index: -1; opacity: .9; }
.hero h1 .s1::after { background: var(--soroban-l); } .hero h1 .s2::after { background: var(--shodo-l); } .hero h1 .s3::after { background: var(--art-l); }
.hero h1 .s1 { color: var(--soroban-d); } .hero h1 .s2 { color: var(--shodo-d); } .hero h1 .s3 { color: var(--art-d); }
.hero .lead { font-size: calc(19px*var(--kt)); line-height: 1.95; margin-bottom: calc(30px*var(--k)); color: var(--ink); }
.hero .facts { display: flex; flex-wrap: wrap; gap: calc(8px*var(--k)) calc(18px*var(--k)); margin: calc(26px*var(--k)) 0 0; padding: 0; list-style: none; color: var(--ink2); font-size: calc(14.5px*var(--kt)); }
.hero .facts li { display: flex; align-items: center; gap: 6px; }
.hero .facts svg { width: 18px; height: 18px; color: var(--blue-d); }
.hero-art { position: relative; aspect-ratio: 1 / .96; }
.hero-art .ph { position: absolute; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.hero-art .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art .p1 { left: 18%; top: 4%; width: 64%; aspect-ratio: 1; border-radius: 50%; border: 10px solid #fff; }
.hero-art .p2 { left: 0; bottom: 6%; width: 32%; aspect-ratio: 634 / 900; border-radius: 10px; transform: rotate(-6deg); border: 8px solid #fff; }
.hero-art .p3 { right: 0; bottom: 12%; width: 40%; aspect-ratio: 4 / 3; border-radius: 16px; transform: rotate(4deg); border: 8px solid #fff; }
.hero-art .p3 svg { display: block; width: 100%; height: auto; }
.hero-art .wk { position: absolute; left: 33%; bottom: -3%; width: 30%; filter: drop-shadow(0 8px 14px rgba(90, 60, 30, .18)); }
.hero-art .tag { position: absolute; padding: 6px 14px; border-radius: 999px; font-family: var(--maru); font-weight: 900; font-size: calc(17px*var(--kt)); color: #fff; box-shadow: var(--shadow-s); }
.hero-art .t1 { right: 6%; bottom: 46%; background: var(--art); }
.hero-art .t2 { left: 3%; bottom: 52%; background: var(--shodo); }
.hero-art .t3 { right: 14%; top: 6%; background: var(--soroban); }
.hero-art .bubble { position: absolute; right: -2%; top: 34%; }
.hero-art { margin-bottom: calc(30px*var(--k)); }
.hero-art .wk-name { position: absolute; left: 48%; bottom: -8%; transform: translateX(-50%); background: rgba(255, 255, 255, .92); border: 1.5px solid var(--line); border-radius: 999px; padding: 2px 12px 3px; text-align: center; font-family: var(--maru); font-weight: 900; font-size: max(11px,calc(13px*var(--kt))); line-height: 1.25; white-space: nowrap; box-shadow: var(--shadow-s); color: var(--ink); }
.hero-art .wk-name small { display: block; font-size: max(11px,calc(9px*var(--kt))); font-weight: 700; color: var(--ink2); letter-spacing: .03em; }
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { max-width: 520px; margin: 10px auto 0; width: 100%; }
  .hero h1 { font-size: 58px; }
}
@media (max-width: 680px) {
  .hero { padding: 26px 0 56px; }
  .hero h1 { font-size: 44px; }
  .hero .lead { font-size: 15px; }
  .hero .btn-row .btn { flex: 1 1 100%; }
}
.float { animation: float 5s ease-in-out infinite; }
.float.d2 { animation-delay: -1.6s; } .float.d3 { animation-delay: -3.2s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }
.hero-b { background: linear-gradient(180deg, #DFF1FA 0%, #CFE9F5 100%); padding: calc(40px*var(--k)) 0 calc(72px*var(--k)); }
.hero-b::before { background: radial-gradient(circle at 42% 42%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .35) 42%, rgba(255, 255, 255, 0) 70%); }
.hero-b .hero-copy { position: relative; }
.hero-b h1.subj { display: grid; gap: calc(6px*var(--k)); font-size: max(17px, calc(60px*var(--k))); line-height: 1.15; letter-spacing: .04em; margin: 0 0 calc(18px*var(--k)); }
.hero-b h1.subj span { display: flex; align-items: center; gap: .2em; text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 0 10px #fff, 0 4px 14px rgba(255, 255, 255, .9); }
.hero-b h1.subj span::after { display: none; }
.hero-b h1.subj i { font-style: normal; font-size: .72em; line-height: 1; text-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)); }
.hero-b h1 .s1 { color: var(--soroban); } .hero-b h1 .s2 { color: var(--shodo-d); } .hero-b h1 .s3 { color: var(--art); }
.hero-b .lead { font-size: calc(18px*var(--kt)); }
.hero-b .chip { background: rgba(255, 255, 255, .92); }
.hero-b .hero-art .wk-name { bottom: -6%; }
.hero-b .hero-copy .hero-art-m { display: none; }   
.hero-b .hero-row { display: contents; }   
.hero-b .hero-in > .hero-art .ts { right: 12%; top: 5%; background: var(--soroban); }
.hero-b .hero-in > .hero-art .tk { left: 2%; bottom: 53%; background: var(--shodo); }
.hero-b .hero-in > .hero-art .ta { right: 4%; bottom: 40%; background: var(--art); }
@media (max-width: 960px) {
  .hero-b .wk-m { display: none; }
  .hero-b .hero-art { display: block; position: absolute; right: 28px; top: 48px; width: 240px; height: 240px; aspect-ratio: auto; margin: 0; max-width: none; z-index: 1; }
  .hero-b .hero-copy .hero-art-m { display: none; }
  .hero-b .hero-in > .hero-art .tag { font-size: 12px; padding: 3px 10px; }
  .hero-b .hero-art .p1 { left: 24%; top: 0; width: 74%; border-width: 5px; }
  .hero-b .hero-art .p2 { left: 0; bottom: 18%; width: 34%; border-width: 4px; border-radius: 7px; }
  .hero-b .hero-art .p3 { right: 0; bottom: 8%; width: 44%; border-width: 4px; border-radius: 9px; }
  .hero-b .hero-art .wk { left: 28%; bottom: -5%; width: 42%; }
  .hero-b .hero-art .wk-name { left: 50%; bottom: -17%; font-size: 12px; padding: 1px 9px 2px; white-space: nowrap; }
  .hero-b .hero-art .wk-name small { font-size: 8.5px; }
  .hero-b h1.subj { font-size: 44px; padding-right: 280px; margin-top: 8px; margin-bottom: 44px; }
}
@media (max-width: 680px) {
  .hero-b { padding: 20px 0 44px; }
  .hero-b .hero-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 0; padding-left: 23px; margin: 12px 0 46px; }   
  .hero-b h1.subj { font-size: 36px; gap: 6px; padding: 0; margin: 0; width: auto; max-width: none; flex: none; position: relative; top: 12px; z-index: 2; }
  .hero-b h1.subj .s2 { font-size: 30px; letter-spacing: 0; }
  .hero-b h1.subj i { font-size: .62em; }
  .hero-b .hero-in > .hero-art { display: none; }
  .hero-b .hero-copy .hero-art-m { display: block; position: relative; right: auto; top: auto; width: 178px; height: 186px; margin: 0; flex: none; max-width: none; }
  .hero-b .hero-art-m .p1 { left: 18%; top: 3%; width: 64%; border-width: 4px; }
  .hero-b .hero-art-m .p2 { left: 0; bottom: 7%; width: 32%; border-width: 3px; transform: rotate(-6deg); }
  .hero-b .hero-art-m .p3 { right: 0; bottom: 13%; width: 40%; border-width: 3px; transform: rotate(4deg); }
  .hero-b .hero-art-m .wk { left: 34%; bottom: -3%; width: 31%; }
  .hero-b .hero-art-m .tag { position: absolute; padding: 2px 8px 3px; border-radius: 999px; font-family: var(--maru); font-weight: 900; font-size: 10.5px; line-height: 1.2; color: #fff; box-shadow: var(--shadow-s); white-space: nowrap; z-index: 2; }
  .hero-b .hero-art-m .ts { right: 8%; top: 2%; background: var(--soroban); }
  .hero-b .hero-art-m .tk { left: -2%; bottom: 1%; background: var(--shodo); }   
  .hero-b .hero-art-m .ta { right: -3%; bottom: 39%; background: var(--art); }   
  .hero-b .hero-art-m .wk-name { font-size: 10.5px; bottom: -14%; left: 50%; }
  .hero-b .lead { font-size: 15px; }
}
.col-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px*var(--k)); }
.col-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 20px; padding: calc(18px*var(--k)) calc(20px*var(--k)) calc(16px*var(--k)); box-shadow: var(--shadow-s); color: var(--ink); text-decoration: none; transition: transform .2s; border-top: 5px solid var(--blue); }
.col-card:hover { transform: translateY(-3px); }
.col-card.tone-soroban { border-top-color: var(--soroban); } .col-card.tone-shodo { border-top-color: var(--shodo); } .col-card.tone-art { border-top-color: var(--art); }
.col-card .cc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.col-card time { font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink3); }
.col-card b { font-family: var(--maru); font-size: calc(17px*var(--kt)); line-height: 1.5; }
.col-card .cc-lead { font-size: calc(14px*var(--kt)); color: var(--ink2); line-height: 1.7; }
.col-card .cc-more { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: calc(13.5px*var(--kt)); font-weight: 700; color: var(--blue-d); }
.col-card .cc-more svg { width: 14px; height: 14px; }
.col-all { text-align: right; margin: calc(12px*var(--k)) 0 0; font-weight: 700; } .col-all a { color: var(--blue-d); text-decoration: none; }
@media (max-width: 900px) { .col-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .col-cards { grid-template-columns: 1fr; } }
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: calc(18px*var(--k)); align-items: start; background: #fff; border-radius: 22px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); margin-top: calc(32px*var(--k)); }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; }
.author-box .ab-role { margin: 0; font-size: max(11px,calc(12.5px*var(--kt))); font-weight: 700; color: var(--blue-d); }
.author-box .ab-name { margin: 2px 0 6px; font-family: var(--maru); font-weight: 700; font-size: calc(19px*var(--kt)); }
.author-box .ab-name small { display: block; font-family: var(--sans); font-weight: 500; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); }
.author-box .ab-text { margin: 0 0 8px; font-size: calc(14px*var(--kt)); line-height: 1.8; color: var(--ink2); }
.author-box .ab-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(13.5px*var(--kt)); align-items: center; }
.author-box .ab-links a { color: var(--blue-d); font-weight: 700; text-decoration: none; }
.author-box .ab-date { color: var(--ink3); margin-left: auto; }
@media (max-width: 600px) { .author-box { grid-template-columns: 72px 1fr; } .author-box img { width: 72px; height: 72px; } }
.article { font-size: calc(16px*var(--kt)); line-height: 2; }
.article > p { margin: 0 0 1.2em; }
.article h2 { font-size: max(17px, calc(24px*var(--k))); margin: 2.2em 0 .8em; padding: 0 0 .4em; border-bottom: 3px solid var(--yellow-s); }
.article h3 { font-size: max(17px, calc(19px*var(--k))); margin: 1.8em 0 .6em; padding-left: 12px; border-left: 6px solid var(--blue); }
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.4em; } .article li { margin: .3em 0; }
.article .answer-first { background: #FFF6CF; border-radius: 18px; padding: calc(16px*var(--k)) calc(20px*var(--k)); margin: 0 0 1.6em; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.8; }
.article .answer-first small { display: block; font-family: var(--sans); font-weight: 500; font-size: calc(13.5px*var(--kt)); color: var(--ink2); margin-top: 4px; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-s); font-size: calc(14.5px*var(--kt)); }
.article th, .article td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article th { background: var(--cream); font-weight: 700; white-space: nowrap; }
.article tr:last-child td, .article tr:last-child th { border-bottom: 0; }
.article figure { margin: 0 0 1.4em; } .article figure img { width: 100%; height: auto; border-radius: 16px; display: block; } .article figcaption { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); text-align: center; margin-top: 6px; }
.article .toc { background: #fff; border-radius: 18px; padding: calc(14px*var(--k)) calc(20px*var(--k)); box-shadow: var(--shadow-s); margin: 0 0 1.8em; font-size: calc(14.5px*var(--kt)); }
.article .toc b { display: block; font-family: var(--maru); margin-bottom: 4px; }
.article .toc ol { margin: 0; padding-left: 1.3em; } .article .toc a { color: var(--blue-d); text-decoration: none; }
.article .faq { margin-bottom: 10px; }
.article .kodomo-note { background: var(--blue-l); border-radius: 18px; padding: calc(16px*var(--k)) calc(20px*var(--k)); margin: 0 0 1.6em; }
.article .kodomo-note b { font-family: var(--maru); display: block; margin-bottom: 4px; color: var(--blue-d); }
@media (max-width: 680px) { .article { font-size: 15.5px; line-height: 1.95; } .article h2 { font-size: 21px; } .article h3 { font-size: 17.5px; } .article th, .article td { padding: 8px 8px; font-size: 13.5px; } }
.dl-list { display: grid; gap: 12px; }
.dl-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-s); }
.dl-k { flex: none; display: flex; align-items: baseline; justify-content: center; width: 78px; height: 78px; padding-top: 14px; border-radius: 18px; background: var(--soroban); color: #fff; font-family: var(--maru); font-weight: 900; }
.dl-k b { font-size: 40px; line-height: 1; }
.dl-k span { font-size: 16px; margin-left: 2px; }
.dl-k.pre { flex-direction: column; align-items: center; justify-content: center; padding-top: 0; } .dl-k.pre i { font-style: normal; font-size: 12px; letter-spacing: .06em; opacity: .9; } .dl-k.pre b { font-size: 36px; }
.dl-card.tone-blue .dl-k { background: var(--blue-d); } .dl-card.tone-shodo .dl-k { background: var(--shodo); }
.dl-tx { flex: 1; min-width: 0; }
.dl-tx b { display: block; font-family: var(--maru); font-size: calc(18px*var(--kt)); }
.dl-tx small { display: block; margin-top: 2px; font-size: calc(13.5px*var(--kt)); line-height: 1.55; color: var(--ink2); }
.dl-tx .dl-meta { color: var(--ink3); }
.dl-btn { flex: none; }
.dl-wait { display: inline-block; padding: 8px 14px; border: 1.5px dashed var(--line); border-radius: 999px; font-size: 13px; color: var(--ink3); }
@media (max-width: 520px) { .dl-card { flex-wrap: wrap; } .dl-btn { width: 100%; justify-content: center; } }
.tbl-wrap { overflow-x: auto; }
.tbl-wrap table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-s); font-size: calc(14.5px*var(--kt)); }
.tbl-wrap th, .tbl-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl-wrap th { background: var(--cream); font-weight: 700; white-space: nowrap; }
.tbl-wrap tr:last-child td, .tbl-wrap tr:last-child th { border-bottom: 0; }
.tbl-wrap td small { color: var(--ink3); font-size: max(11px,calc(13px*var(--kt))); }   
.wrap-n > .note-box { margin-top: 16px; }
.wrap-n > details.faq { margin-bottom: 10px; }
.pr-how { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.pr-samples { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-samples img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-s); display: block; }
.pr-samples figcaption { grid-column: 1 / -1; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); text-align: center; }
@media (max-width: 760px) { .pr-how { grid-template-columns: 1fr; } .pr-samples { max-width: 420px; margin: 0 auto; } }
.pr-samples.k3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 22px auto 0; }
@media (max-width: 760px) { .pr-samples.k3 { grid-template-columns: repeat(3, 1fr); max-width: none; } }
#nagare h3 { margin: 26px 0 12px; font-size: max(17px, calc(20px*var(--k))); color: var(--soroban-d); }
.worries { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(18px*var(--k)); max-width: 1040px; margin: 0 auto; }
.worry { background: #fff; border-radius: 24px; padding: calc(22px*var(--k)) calc(20px*var(--k)) calc(20px*var(--k)); box-shadow: var(--shadow-s); position: relative; text-align: center; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.6; }
.worry::after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top-color: #fff; border-bottom: 0; }
.worry .ic { width: calc(56px*var(--k)); height: calc(56px*var(--k)); margin: 0 auto calc(10px*var(--k)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cream2); }
.worry .ic svg { width: calc(30px*var(--k)); height: calc(30px*var(--k)); color: var(--ink2); }
.answer { margin: calc(44px*var(--k)) auto 0; max-width: 820px; display: flex; align-items: center; gap: calc(24px*var(--k)); background: var(--blue-d); color: #fff; border-radius: 28px; padding: calc(26px*var(--k)) calc(34px*var(--k)); box-shadow: var(--shadow); }
.answer { position: relative; z-index: 1; }   
.answer img { width: calc(110px*var(--k)); flex: none; margin: calc(-40px*var(--k)) 0 calc(-26px*var(--k)); }
.answer p { margin: 0; font-family: var(--maru); font-weight: 700; font-size: calc(21px*var(--kt)); line-height: 1.7; }
.answer p small { display: block; font-family: var(--sans); font-weight: 400; font-size: calc(15px*var(--kt)); opacity: .92; margin-top: 6px; }
@media (max-width: 860px) { .worries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .worry { font-size: 14px; padding: 16px 12px 14px; border-radius: 18px; }
  .answer { flex-direction: column; text-align: center; padding: 20px 18px; gap: 6px; }
  .answer img { margin: -50px 0 0; width: 86px; }
  .answer p { font-size: 16px; }
}
.courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26px*var(--k)); }
.course { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .2s; }
.course:hover { transform: translateY(-4px); }
.course .top { position: relative; height: calc(210px*var(--k)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.course.soroban .top { background: var(--soroban-l); } .course.shodo .top { background: var(--shodo-l); } .course.art .top { background: var(--art-l); }
.course .top img.cover { width: 100%; height: 100%; object-fit: cover; }
.course .top .c-ic { position: absolute; left: calc(14px*var(--k)); top: calc(14px*var(--k)); width: calc(54px*var(--k)); height: calc(54px*var(--k)); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: max(17px, calc(28px*var(--k))); line-height: 1; box-shadow: var(--shadow-s); z-index: 1; }
.sec-head h2.h-subj { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; }
.sec-head h2.h-subj span { display: inline-flex; align-items: center; gap: .14em; white-space: nowrap; }
.sec-head h2.h-subj i { font-style: normal; font-size: .8em; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12)); }
.sec-head h2.h-subj .s1 { color: var(--soroban-d); } .sec-head h2.h-subj .s2 { color: var(--shodo-d); } .sec-head h2.h-subj .s3 { color: var(--art-d); }
.course .top svg { width: 72%; height: auto; }
.course .top .shodo-works { display: flex; gap: 10px; height: 82%; }
.course .top .shodo-works img { height: 100%; width: auto; border-radius: 4px; box-shadow: var(--shadow-s); background: #fff; }
.course .top .shodo-works img:nth-child(1) { transform: rotate(-4deg); } .course .top .shodo-works img:nth-child(3) { transform: rotate(4deg); }
.course .body { padding: calc(24px*var(--k)) calc(26px*var(--k)) calc(28px*var(--k)); display: flex; flex-direction: column; flex: 1; }
.course h3 { font-size: max(17px, calc(25px*var(--k))); display: flex; align-items: center; gap: 10px; margin-bottom: calc(6px*var(--k)); }
.course .catch { font-family: var(--maru); font-weight: 700; font-size: calc(16.5px*var(--kt)); margin-bottom: calc(10px*var(--k)); }
.course.soroban .catch { color: var(--soroban-d); } .course.shodo .catch { color: var(--shodo-d); } .course.art .catch { color: var(--art-d); }
.course p { color: var(--ink2); font-size: calc(15px*var(--kt)); }
.course dl { display: grid; grid-template-columns: auto 1fr; gap: calc(6px*var(--k)) calc(14px*var(--k)); margin: calc(4px*var(--k)) 0 calc(20px*var(--k)); font-size: calc(14.5px*var(--kt)); }
.course dt { font-weight: 700; color: var(--ink2); white-space: nowrap; }
.course dd { margin: 0; }
.course .acts { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.course .acts .btn { flex: 1 1 auto; min-height: calc(46px*var(--k)); font-size: calc(15px*var(--kt)); padding: calc(8px*var(--k)) calc(16px*var(--k)); }
.course.soroban .btn-c { background: var(--soroban-d); color: #fff; box-shadow: 0 5px 0 #8A3C08; }
.course.shodo .btn-c { background: var(--shodo-d); color: #fff; box-shadow: 0 5px 0 #124A30; }
.course.art .btn-c { background: var(--art-d); color: #fff; box-shadow: 0 5px 0 #8A1F47; }
@media (max-width: 960px) { .courses { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .course .top { height: 180px; } }
.roots { display: grid; grid-template-columns: 1fr 1.05fr; gap: calc(50px*var(--k)); align-items: center; }
.roots .tree { position: relative; }
.roots .tree svg { width: 100%; height: auto; display: block; }
.roots .col h3 { font-size: max(17px, calc(22px*var(--k))); display: flex; align-items: center; gap: 10px; }
.roots .col h3 .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.power { background: #fff; border-radius: 22px; padding: calc(22px*var(--k)) calc(26px*var(--k)); box-shadow: var(--shadow-s); margin-bottom: calc(18px*var(--k)); }
.power ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.power li { padding: 4px 14px; border-radius: 999px; background: var(--cream); font-weight: 700; font-size: calc(14.5px*var(--kt)); }
.power p { margin: 0; color: var(--ink2); font-size: calc(15px*var(--kt)); }
.quote { font-family: var(--maru); font-weight: 700; font-size: calc(18px*var(--kt)); line-height: 1.9; padding: calc(18px*var(--k)) 0 0 calc(24px*var(--k)); border-left: 4px solid var(--yellow-s); color: var(--ink); }
.quote cite { display: block; font-style: normal; font-family: var(--sans); font-weight: 400; font-size: calc(13.5px*var(--kt)); color: var(--ink2); margin-top: 6px; }
@media (max-width: 900px) { .roots { grid-template-columns: 1fr; } .roots .tree { max-width: 460px; margin: 0 auto; } }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26px*var(--k)); counter-reset: rs; }
.reason { background: #fff; border-radius: 26px; padding: 0 0 calc(26px*var(--k)); box-shadow: var(--shadow-s); overflow: hidden; display: flex; flex-direction: column; }
.reason .pic { height: calc(190px*var(--k)); overflow: hidden; position: relative; background: var(--cream2); display: flex; align-items: center; justify-content: center; }
.reason .pic img { width: 100%; height: 100%; object-fit: cover; }
.reason .pic img.contain { object-fit: contain; width: 62%; height: 86%; }
.reason .num { position: absolute; left: 18px; top: 14px; font-family: var(--maru); font-weight: 900; font-size: 15px; background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 2px 14px; }
.reason h3 { font-size: max(17px, calc(21px*var(--k))); padding: calc(22px*var(--k)) calc(26px*var(--k)) 0; margin-bottom: calc(8px*var(--k)); }
.reason p { padding: 0 calc(26px*var(--k)); margin: 0; color: var(--ink2); font-size: calc(15px*var(--kt)); }
@media (max-width: 960px) { .reasons { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.lesson { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(40px*var(--k)); align-items: center; }
.clock { background: #fff; border-radius: 28px; padding: calc(30px*var(--k)); box-shadow: var(--shadow); }
.clock h3 { font-size: max(17px, calc(20px*var(--k))); margin-bottom: calc(18px*var(--k)); display: flex; align-items: center; gap: 8px; }
.clock h3 svg { color: var(--blue-d); }
.tl { position: relative; height: 92px; margin: 10px 6px 4px; }
.tl .bar { position: absolute; left: 0; right: 0; top: 40px; height: 14px; border-radius: 99px; background: var(--cream2); }
.tl .slot { position: absolute; top: 34px; height: 26px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.tl .slot.a { background: var(--soroban); } .tl .slot.b { background: var(--shodo); } .tl .slot.c { background: var(--blue); }
.tl .tick { position: absolute; top: 66px; font-size: 12px; color: var(--ink2); transform: translateX(-50%); white-space: nowrap; }
.tl .who { position: absolute; top: 0; font-size: 12px; color: var(--ink2); transform: translateX(-50%); white-space: nowrap; }
.clock .note { font-size: calc(13.5px*var(--kt)); color: var(--ink2); margin: 10px 0 0; }
.points { display: grid; gap: calc(14px*var(--k)); margin: 0; padding: 0; list-style: none; }
.points li { display: flex; gap: calc(16px*var(--k)); align-items: flex-start; background: #fff; border-radius: 20px; padding: calc(18px*var(--k)) calc(20px*var(--k)); box-shadow: var(--shadow-s); }
.points .ic { width: calc(48px*var(--k)); height: calc(48px*var(--k)); border-radius: 14px; background: var(--blue-l); color: var(--blue-d); display: flex; align-items: center; justify-content: center; flex: none; }
.points .ic svg { width: calc(26px*var(--k)); height: calc(26px*var(--k)); }
.points b { display: block; font-family: var(--maru); font-size: calc(17.5px*var(--kt)); margin-bottom: 2px; }
.points span { display: block; color: var(--ink2); font-size: calc(14.5px*var(--kt)); line-height: 1.75; }
@media (max-width: 900px) { .lesson { grid-template-columns: 1fr; } }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22px*var(--k)); }
.voice { background: #fff; border-radius: 26px; padding: calc(28px*var(--k)) calc(26px*var(--k)) calc(24px*var(--k)); box-shadow: var(--shadow-s); position: relative; display: flex; flex-direction: column; }
.voice::before { content: "“"; position: absolute; top: -6px; left: 18px; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--yellow-s); }
.voice p { position: relative; font-size: calc(15.5px*var(--kt)); line-height: 1.95; margin-bottom: calc(14px*var(--k)); }
.voice .who { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); }
.voice-note { font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink3); text-align: center; margin-top: calc(16px*var(--k)); }
@media (max-width: 960px) { .voices { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } }
.find-box { background: #fff; border-radius: 32px; box-shadow: var(--shadow); padding: calc(36px*var(--k)); display: grid; grid-template-columns: 1fr 1.05fr; gap: calc(36px*var(--k)); align-items: center; }
.find-box h2 { font-size: max(17px, calc(30px*var(--k))); }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: calc(10px*var(--k)); margin: calc(18px*var(--k)) 0 0; padding: 0; list-style: none; }
.areas a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(14px*var(--k)) calc(18px*var(--k)); border-radius: 16px; background: var(--cream); text-decoration: none; color: var(--ink); font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); transition: .15s; }
.areas a small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); display: block; }
.areas a svg { width: 18px; height: 18px; color: var(--blue-d); flex: none; }
.areas a:hover { background: var(--blue-l); }
.mapart svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .find-box { grid-template-columns: 1fr; padding: 24px 18px; } }
.fees { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(24px*var(--k)); align-items: stretch; }
.fee-card { background: #fff; border-radius: 26px; padding: calc(26px*var(--k)) calc(28px*var(--k)); box-shadow: var(--shadow-s); }
.fee-card h3 { font-size: max(17px, calc(20px*var(--k))); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fee-table { width: 100%; border-collapse: collapse; font-size: calc(15.5px*var(--kt)); }
.fee-table th, .fee-table td { padding: calc(12px*var(--k)) 6px; border-bottom: 1.5px dashed var(--line); text-align: left; vertical-align: middle; }
.fee-table th { font-weight: 500; color: var(--ink2); }
.fee-table td { text-align: right; font-family: var(--maru); font-weight: 700; font-size: calc(19px*var(--kt)); white-space: nowrap; }
.fee-table td small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); margin-left: 3px; }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: 0; }
.fee-note { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); margin: calc(10px*var(--k)) 0 0; }
@media (max-width: 860px) { .fees { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26px*var(--k)); counter-reset: st; margin: 0; padding: 0; list-style: none; }
.steps > li { background: #fff; border-radius: 26px; padding: calc(30px*var(--k)) calc(26px*var(--k)) calc(26px*var(--k)); box-shadow: var(--shadow-s); position: relative; }
.steps > li::before { counter-increment: st; content: "STEP " counter(st); display: inline-block; font-family: var(--maru); font-weight: 900; font-size: 13px; letter-spacing: .1em; background: var(--blue-d); color: #fff; border-radius: 999px; padding: 3px 14px; margin-bottom: calc(12px*var(--k)); }
.steps > li:not(:last-child)::after { content: ""; position: absolute; right: -20px; top: 50%; width: 14px; height: 14px; border-top: 4px solid var(--blue); border-right: 4px solid var(--blue); transform: translateY(-50%) rotate(45deg); }
.steps h3 { font-size: max(17px, calc(20px*var(--k))); margin-bottom: calc(6px*var(--k)); }
.steps p { margin: 0; color: var(--ink2); font-size: calc(15px*var(--kt)); }
.steps .ic { position: absolute; right: calc(22px*var(--k)); top: calc(22px*var(--k)); width: calc(46px*var(--k)); height: calc(46px*var(--k)); color: var(--blue); opacity: .9; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps > li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%) rotate(135deg); }
}
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22px*var(--k)); margin: 0; padding: 0; list-style: none; }
.news-card { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-s); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); height: 100%; transition: transform .2s; }
.news-card:hover { transform: translateY(-3px); color: var(--ink); }
.news-card .th { aspect-ratio: 16 / 10; background: var(--cream2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.news-card .th img { width: 100%; height: 100%; object-fit: cover; }
.news-card .th img.noimg { width: 34%; height: auto; object-fit: contain; opacity: .9; }
.news-card .tx { padding: calc(16px*var(--k)) calc(20px*var(--k)) calc(20px*var(--k)); }
.news-card time { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); }
.news-card h3 { font-size: max(16.5px, calc(16.5px*var(--k))); line-height: 1.6; margin: 4px 0 0; }
@media (max-width: 900px) { .news-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-list { grid-template-columns: 1fr; } .news-card { flex-direction: row; } .news-card .th { width: 120px; flex: none; aspect-ratio: 1; } .news-card .tx { padding: 12px 14px; } .news-card h3 { font-size: 14.5px; } }
.world { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22px*var(--k)); }
.wcard { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.wcard:hover { color: var(--ink); }
.wcard .pic { aspect-ratio: 16 / 9; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.wcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.wcard .pic img.contain { object-fit: contain; width: auto; height: 82%; }
.wcard .tx { padding: calc(18px*var(--k)) calc(22px*var(--k)) calc(22px*var(--k)); }
.wcard h3 { font-size: max(17px, calc(18px*var(--k))); margin-bottom: 6px; }
.wcard p { margin: 0; color: var(--ink2); font-size: calc(14.5px*var(--kt)); }
@media (max-width: 900px) { .world { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.cta-band { background: var(--blue-d); color: #fff; border-radius: 36px; padding: calc(48px*var(--k)) calc(52px*var(--k)); display: grid; grid-template-columns: auto 1fr; gap: calc(36px*var(--k)); align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.cta-band::before { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.cta-band::after { content: ""; position: absolute; right: 120px; bottom: -120px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 241, 0, .14); }
.cta-band img.wk { width: calc(170px*var(--k)); position: relative; z-index: 1; }
.cta-band .tx { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: max(17px, calc(34px*var(--k))); margin-bottom: calc(10px*var(--k)); }
.cta-band p { margin-bottom: calc(22px*var(--k)); opacity: .95; }
.cta-band .tel { display: inline-flex; flex-direction: column; color: #fff; text-decoration: none; line-height: 1.25; padding-left: 8px; }
.cta-band .tel b { font-family: var(--maru); font-size: calc(26px*var(--kt)); letter-spacing: .04em; }
.cta-band .tel small { font-size: max(11px,calc(12.5px*var(--kt))); opacity: .9; }
@media (max-width: 760px) {
  .cta-band { grid-template-columns: 1fr; text-align: center; padding: 30px 20px; border-radius: 26px; gap: 6px; }
  .cta-band img.wk { width: 110px; margin: 0 auto; }
  .cta-band h2 { font-size: 22px; }
  .cta-band .btn-row { justify-content: center; }
  .cta-band .btn-row .btn { flex: 1 1 100%; }
  .cta-band .tel { padding: 6px 0 0; width: 100%; }
}
.site-foot { background: #1E3A5F; color: #E6EEF7; padding: calc(64px*var(--k)) 0 calc(30px*var(--k)); margin-top: 90px; }
.site-foot a { color: #E6EEF7; text-decoration: none; }
.site-foot a:hover { color: var(--yellow); }
.foot-top { display: grid; grid-template-columns: 1.15fr 2fr; gap: calc(48px*var(--k)); }
.foot-brand .brand { color: #fff; margin-bottom: calc(16px*var(--k)); }
.foot-brand .brand small { color: #C9D8EA; }
.foot-brand p { font-size: calc(14px*var(--kt)); line-height: 1.85; margin: 0 0 10px; color: #C9D8EA; }
.foot-brand .tel b { font-family: var(--maru); font-size: calc(24px*var(--kt)); color: #fff; display: block; letter-spacing: .04em; }
.foot-sns { display: flex; gap: 10px; margin-top: calc(14px*var(--k)); }
.foot-sns a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; }
.foot-sns a:hover { background: rgba(255, 255, 255, .2); }
.foot-sns svg { width: 22px; height: 22px; fill: currentColor; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28px*var(--k)); }
.foot-cols h4 { color: #fff; font-size: calc(15.5px*var(--kt)); margin-bottom: calc(10px*var(--k)); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(5px*var(--k)); font-size: calc(14px*var(--kt)); }
.foot-bottom { margin-top: calc(44px*var(--k)); padding-top: calc(22px*var(--k)); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: max(11px,calc(12.5px*var(--kt))); color: #B4C6DC; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > div:last-child { grid-column: 1 / -1; } }
.foot-top:has(.foot-cols.n4) { grid-template-columns: 1fr 2.6fr; }
.foot-cols.n4 { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(28px*var(--k)) calc(24px*var(--k)); }
@media (max-width: 900px) { .foot-top:has(.foot-cols.n4) { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .foot-cols.n4 { grid-template-columns: 1fr 1fr; justify-content: stretch; } .foot-cols.n4 > div:last-child { grid-column: auto; } }
.crumbs { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: calc(14px*var(--k)); }
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: var(--blue-d); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.page-hero { padding: calc(40px*var(--k)) 0 calc(46px*var(--k)); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -230px; border-radius: 50%; background: radial-gradient(circle, #FFF6B3 0, rgba(255, 246, 179, 0) 70%); }
.page-hero .wrap, .page-hero .wrap-n { position: relative; }
.page-hero.has-wk .wrap, .page-hero.has-wk .wrap-n { padding-right: calc(190px*var(--k)); }
.page-hero .eyebrow { font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .12em; color: var(--blue-d); margin-bottom: calc(6px*var(--k)); }
.page-hero h1 { font-size: max(17px, calc(42px*var(--k))); margin: 0; }
.page-hero .lead { margin: calc(14px*var(--k)) 0 0; max-width: 760px; }
.page-hero img.wk { position: absolute; right: 0; bottom: calc(-46px*var(--k)); width: calc(160px*var(--k)); }
.page-hero.soroban { background: linear-gradient(180deg, var(--soroban-l), var(--cream)); }
.page-hero.shodo { background: linear-gradient(180deg, var(--shodo-l), var(--cream)); }
.page-hero.art { background: linear-gradient(180deg, var(--art-l), var(--cream)); }
.page-hero.blue { background: linear-gradient(180deg, var(--blue-l), var(--cream)); }
@media (max-width: 680px) {
  .page-hero { padding: 22px 0 26px; }
  .page-hero h1 { font-size: 26px; }
  .page-hero.has-wk .wrap, .page-hero.has-wk .wrap-n { padding-right: 84px; }
  .page-hero img.wk { width: 80px; bottom: -30px; }
}
.subnav { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .6); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { padding: calc(12px*var(--k)) calc(16px*var(--k)); white-space: nowrap; text-decoration: none; color: var(--ink2); font-family: var(--maru); font-weight: 700; font-size: calc(14.5px*var(--kt)); border-bottom: 3px solid transparent; }
.subnav a.on, .subnav a:hover { color: var(--blue-d); border-bottom-color: var(--blue); }
.page-body { padding: calc(44px*var(--k)) 0 calc(90px*var(--k)); }
.prose { font-size: calc(16px*var(--kt)); line-height: 1.95; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: max(17px, calc(27px*var(--k))); margin: 2em 0 .8em; padding: 0 0 .45em; border-bottom: 3px solid var(--yellow-s); }
.prose h3 { font-size: max(17px, calc(21px*var(--k))); margin: 1.8em 0 .7em; padding-left: 14px; border-left: 6px solid var(--blue); }
.prose h4 { font-size: max(17px, calc(18px*var(--k))); margin: 1.6em 0 .6em; }
.prose img { border-radius: 12px; }
.prose a img { transition: opacity .15s; }
.prose a:hover img { opacity: .88; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .3em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-s); }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; width: auto !important; }
.prose th { background: var(--cream2); font-weight: 700; }
.prose iframe { border-radius: 14px; border: 0; display: block; }
.prose iframe[src*="google.com/maps"], .prose iframe[data-src*="google.com/maps"] { width: 100%; height: 340px; }
.prose iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .alignright { float: right; margin: 0 0 1em 1.5em; }
.prose .alignleft { float: left; margin: 0 1.5em 1em 0; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 680px) { .prose .alignright, .prose .alignleft { float: none; margin: 0 auto 1em; display: block; } .prose table { font-size: 14px; } }
.prose .wp-block-button__link { background: var(--blue-d); border-radius: 999px; font-family: var(--maru); font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding: 16px 22px; background: #fff; border-radius: 16px; border-left: 6px solid var(--yellow-s); }
.prose hr { border: 0; border-top: 2px dashed var(--line); margin: 2.4em 0; }
.prose .area-box { display: flex; flex-wrap: wrap; gap: 10px; margin: 1em 0; }
.prose .area-button a { display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.prose .link-img { margin: 1em 0; }
.prose figure { margin: 1.2em 0; }
.prose .wp-block-columns { gap: 20px; }
.box { background: #fff; border-radius: 22px; padding: calc(24px*var(--k)) calc(28px*var(--k)); box-shadow: var(--shadow-s); }
.note-box { background: #FFF6CF; border-radius: 16px; padding: calc(14px*var(--k)) calc(20px*var(--k)); font-size: calc(14.5px*var(--kt)); }
.wpcf7 { max-width: 820px; margin: 1.5em auto; }
.wpcf7 form { background: #fff; border-radius: 26px; padding: calc(26px*var(--k)) calc(30px*var(--k)); box-shadow: var(--shadow); }
.wpcf7 table, .prose .wpcf7 table { width: 100%; box-shadow: none; border-radius: 0; background: transparent; margin: 0; }
.wpcf7 th, .wpcf7 td, .prose .wpcf7 th, .prose .wpcf7 td { display: block; width: 100% !important; padding: 0; border: 0; background: transparent; }
.wpcf7 tr { display: block; padding: calc(14px*var(--k)) 0; border-bottom: 1.5px dashed var(--line); }
.wpcf7 th { font-weight: 700; font-size: calc(15px*var(--kt)); margin-bottom: 6px; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=date], .wpcf7 input[type=number], .wpcf7 input[type=url], .wpcf7 select, .wpcf7 textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--cream); color: var(--ink); }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.wpcf7 textarea { min-height: 110px; height: 120px; }
.wpcf7 .wpcf7-radio, .wpcf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-radio .wpcf7-list-item, .wpcf7 .wpcf7-checkbox .wpcf7-list-item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--cream); cursor: pointer; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.wpcf7 .wpcf7-radio .wpcf7-list-item:has(input:checked), .wpcf7 .wpcf7-checkbox .wpcf7-list-item:has(input:checked) { border-color: var(--blue); background: var(--blue-l); color: var(--blue-d); font-weight: 700; }
.wpcf7 .wpcf7-list-item input[type=radio], .wpcf7 .wpcf7-list-item input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.wpcf7 .wpcf7-list-item:has(label) { padding: 0; border: 0; background: none; min-height: 0; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--cream); cursor: pointer; font-size: 15px; }
.wpcf7 .wpcf7-list-item label:has(input:checked) { border-color: var(--blue); background: var(--blue-l); color: var(--blue-d); font-weight: 700; }
.wpcf7 .wpcf7-list-item input { accent-color: var(--blue-d); }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label { border: 0; background: transparent; padding: 0; }
.wpcf7 input[type=submit], .wpcf7 .wpcf7-submit { display: block; width: 100%; max-width: 420px; margin: 18px auto 0; min-height: 58px; border: 0; border-radius: 999px; background: var(--blue-d); color: #fff; font-family: var(--maru); font-weight: 700; font-size: 18px; cursor: pointer; box-shadow: 0 6px 0 #005787; }
.wpcf7 input[type=submit]:hover { background: #0080C4; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; }
.wpcf7 form .wpcf7-response-output { border-radius: 12px; margin: 16px 0 0; padding: 10px 14px; }
.wpcf7 p { margin: 12px 0; font-size: calc(14.5px*var(--kt)); }
@media (max-width: 680px) { .wpcf7 form { padding: 16px 16px; border-radius: 20px; } }
.finder-bar { background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; }
.f-search { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 2px solid var(--line); border-radius: 16px; padding: 0 14px; min-height: 54px; }
.f-search:focus-within { border-color: var(--blue); background: #fff; }
.f-search svg { width: 22px; height: 22px; color: var(--ink3); flex: none; }
.f-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 12px 0; color: var(--ink); outline: none; }
.f-near { width: 100%; min-height: 50px; font-size: 16px; }
.f-row { display: grid; gap: 8px; }
.f-lab { font-family: var(--maru); font-weight: 700; font-size: 13px; color: var(--ink2); letter-spacing: .08em; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { border: 2px solid var(--line); background: var(--cream); color: var(--ink); border-radius: 999px; min-height: 44px; padding: 6px 18px; cursor: pointer; font-family: var(--maru); font-weight: 700; font-size: 16px; line-height: 1.3; -webkit-tap-highlight-color: transparent; }
.seg button[aria-pressed=true] { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.seg.subj button[data-v=soroban][aria-pressed=true] { background: var(--soroban-d); border-color: var(--soroban-d); }
.seg.subj button[data-v=shodo][aria-pressed=true] { background: var(--shodo-d); border-color: var(--shodo-d); }
.seg.subj button[data-v=art][aria-pressed=true] { background: var(--art-d); border-color: var(--art-d); }
.seg.days button { min-width: 48px; padding-inline: 10px; }
.f-more summary { cursor: pointer; font-family: var(--maru); font-weight: 700; font-size: 14px; color: var(--blue-d); min-height: 36px; display: flex; align-items: center; }
.f-more .seg { margin-top: 8px; }
@media (min-width: 900px) {
  .finder-bar { grid-template-columns: 1fr auto; padding: 22px 26px; gap: 14px 18px; align-items: center; }
  .f-near { width: auto; }
  .f-row, .f-more { grid-column: 1 / -1; grid-template-columns: 6em 1fr; align-items: center; }
  .f-row { display: grid; }
}
.finder-count { margin: 20px 4px 4px; font-size: 15px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.finder-count b { font-family: var(--maru); font-size: 26px; color: var(--ink); }
.f-reset { margin-left: auto; border: 0; background: none; color: var(--blue-d); text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 40px; }
.fg { margin-top: 22px; }
.fg h3 { font-size: max(17px, calc(21px*var(--k))); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fg h3 svg { width: 22px; height: 22px; color: var(--blue-d); }
.v-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.v-list.one { grid-template-columns: minmax(0, 640px); }
@media (max-width: 760px) { .v-list { grid-template-columns: 1fr; gap: 14px; } }
.venue { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 8px; }
.v-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v-hd h4 { font-size: 20px; margin: 0; }
.v-city { font-size: 13px; color: var(--ink2); }
.v-hd .dist { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--blue-d); background: var(--blue-l); border-radius: 999px; padding: 2px 10px; }
.v-line { display: flex; gap: 8px; margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.6; }
.v-line svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--ink3); }
.v-subs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.v-sub a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 54px; border-radius: 14px; background: var(--cream); color: var(--ink); text-decoration: none; border: 2px solid transparent; transition: .15s; }
.v-sub a:hover { border-color: var(--line); background: #fff; }
.v-sub.soroban a { background: var(--soroban-l); } .v-sub.shodo a { background: var(--shodo-l); } .v-sub.art a { background: var(--art-l); }
.v-sub .badge { flex: none; min-width: 6.4em; text-align: center; font-size: 12.5px; padding: 3px 8px; }
.v-when { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.v-when b { font-family: var(--maru); font-size: 17px; }
.v-when small { font-size: 12.5px; color: var(--ink2); }
.v-sub svg.go { width: 18px; height: 18px; margin-left: auto; color: var(--ink3); flex: none; }
.v-sub .badge.b-full, .v-sub .badge.b-closed, .v-sub .badge.b-paused, .v-sub .badge.b-partial, .v-sub .badge.b-few, .v-sub .badge.b-open { min-width: 0; }
.v-sub.dim a { opacity: .45; }
.v-acts { display: grid; gap: 8px; margin-top: 6px; }
.v-acts .btn { width: 100%; min-height: 50px; font-size: 16px; }
.btn-art { background: var(--art-d); color: #fff; box-shadow: 0 5px 0 #8A1F47; }
.btn-art:hover { color: #fff; background: #C94477; }
.v-or { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 2px 0 0; font-size: 14px; }
.v-or a { color: var(--ink2); padding: 6px 0; }
.finder-empty { background: #fff; border-radius: 22px; padding: 26px 20px; text-align: center; color: var(--ink2); margin-top: 18px; }
.finder-empty img { width: 80px; }
.venue[hidden], .fg[hidden] { display: none; }
.also { margin-top: 44px; background: #FFF9D6; border-radius: 28px; padding: calc(24px*var(--k)) calc(26px*var(--k)); }
.also h2 { font-size: max(17px, calc(22px*var(--k))); display: flex; align-items: center; gap: 8px; }
.also h2 svg { width: 24px; height: 24px; color: #E0A800; }
.also p { color: var(--ink2); font-size: calc(15px*var(--kt)); }
@media (max-width: 680px) { .also { padding: 18px 14px; } }
.kh { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(30px*var(--k)); align-items: start; }
@media (max-width: 960px) { .kh { grid-template-columns: 1fr; } }
.kinfo { background: #fff; border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.kinfo dl { margin: 0; display: grid; grid-template-columns: 9em 1fr; }
.kinfo dt, .kinfo dd { padding: calc(16px*var(--k)) calc(22px*var(--k)); border-bottom: 1.5px dashed var(--line); margin: 0; }
.kinfo dt { font-weight: 700; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; font-size: calc(15px*var(--kt)); }
.kinfo dt svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--blue-d); }
.kinfo dd { white-space: pre-line; }
.kinfo dl > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 560px) { .kinfo dl { grid-template-columns: 1fr; } .kinfo dt { border-bottom: 0; padding-bottom: 0; } .kinfo dd { padding-top: 4px; } }
.kdays { display: flex; gap: 6px; flex-wrap: wrap; }
.kdays span { min-width: 40px; height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--maru); font-weight: 900; background: var(--blue-d); color: #fff; }
.kside { display: grid; gap: calc(18px*var(--k)); }
.kmap iframe { width: 100%; height: 300px; border: 0; border-radius: 22px; display: block; box-shadow: var(--shadow-s); background: #eee; }
.kteacher { background: #fff; border-radius: 22px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); display: flex; gap: 16px; align-items: flex-start; }
.kteacher .av { width: 64px; height: 64px; border-radius: 50%; background: var(--cream2); flex: none; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.kteacher .av { align-items: center; } .kteacher .av svg { width: 32px; height: 32px; color: var(--ink2); }
.kteacher b { font-family: var(--maru); font-size: calc(18px*var(--kt)); display: block; }
.kteacher p { margin: 4px 0 0; font-size: calc(14.5px*var(--kt)); color: var(--ink2); }
.knotice { background: #FFF6CF; border-radius: 18px; padding: calc(14px*var(--k)) calc(18px*var(--k)); margin-bottom: calc(18px*var(--k)); font-weight: 500; white-space: pre-line; }
.knotice.full { background: #FCE3E1; }
.kcta { background: var(--blue-l); border-radius: 24px; padding: calc(22px*var(--k)) calc(24px*var(--k)); }
.kcta h3 { font-size: max(17px, calc(19px*var(--k))); margin-bottom: calc(6px*var(--k)); }
.kcta p { font-size: calc(14.5px*var(--kt)); color: var(--ink2); margin-bottom: calc(12px*var(--k)); }
.kcta .btn { width: 100%; }
.kcta .btn + .btn { margin-top: 10px; }
.kextra { margin-top: calc(30px*var(--k)); }
.faq-group { margin-bottom: calc(40px*var(--k)); }
.faq-group h2 { font-size: max(17px, calc(24px*var(--k))); display: flex; align-items: center; gap: 10px; }
.faq { background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); margin-bottom: calc(12px*var(--k)); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: calc(18px*var(--k)) 56px calc(18px*var(--k)) calc(22px*var(--k)); position: relative; font-family: var(--maru); font-weight: 700; font-size: calc(16.5px*var(--kt)); display: flex; gap: 12px; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-d); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 1px; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 3px solid var(--ink3); border-bottom: 3px solid var(--ink3); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .a { padding: 0 calc(22px*var(--k)) calc(20px*var(--k)) 64px; color: var(--ink); font-size: calc(15.5px*var(--kt)); }
.faq .a p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .faq .a { padding-left: 22px; } }
.vgrid { columns: 2 340px; column-gap: calc(20px*var(--k)); }
.vgrid .voice { break-inside: avoid; margin-bottom: calc(20px*var(--k)); }
.vqa dt { font-weight: 700; color: var(--art-d); font-size: calc(14px*var(--kt)); margin-top: 10px; }
.vqa dd { margin: 2px 0 0; font-size: calc(15px*var(--kt)); }
.post-head time { color: var(--ink2); font-size: calc(14px*var(--kt)); }
.post-lead { font-family: var(--maru); font-weight: 700; font-size: calc(18px*var(--kt)); line-height: 1.85; background: #fff; border-radius: 20px; padding: calc(18px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); margin-bottom: calc(24px*var(--k)); }
.post-eye { margin: 0 0 calc(24px*var(--k)); }
.post-eye img { border-radius: 20px; display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin: 0 auto; }   
.finder-note { font-size: 13px; color: var(--ink2); margin: -4px 0 16px; line-height: 1.7; }   
.kinfo dd .knote { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 4px; line-height: 1.6; }
.news-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }   
.news-photos.one { grid-template-columns: 1fr; }
.news-photos figure { margin: 0; }
.news-photos img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 560px) { .news-photos { grid-template-columns: 1fr; } }
.post-flyer { display: block; margin: 8px 0 18px; }
.post-flyer > a { display: block; }
.post-flyer > a img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin: 0 auto; border-radius: 14px; box-shadow: var(--shadow-s); }
.post-flyer .lcard { margin: 12px auto 0; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: calc(40px*var(--k)); flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-s); }
.pager .current { background: var(--blue-d); color: #fff; }
.post-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: calc(40px*var(--k)); flex-wrap: wrap; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(30px*var(--k)); align-items: center; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.ph-round { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.ph-round img { display: block; width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12px*var(--k)); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
@media (max-width: 680px) { .gallery { grid-template-columns: 1fr 1fr; } }
.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.icon-list li { display: flex; gap: 10px; align-items: flex-start; }
.icon-list svg { width: 22px; height: 22px; flex: none; color: var(--shodo); margin-top: 4px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(18px*var(--k)); }
.mini-card { background: #fff; border-radius: 20px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); }
.mini-card h3 { font-size: max(17px, calc(18px*var(--k))); display: flex; align-items: center; gap: 8px; }
.mini-card p { margin: 0; font-size: calc(14.5px*var(--kt)); color: var(--ink2); }
.mini-card .ic { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--blue-l); color: var(--blue-d); flex: none; }
.mini-card .ic svg { width: 24px; height: 24px; }
.test-ribbon { position: fixed; left: 0; bottom: 0; z-index: 90; background: #C0392B; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-top-right-radius: 10px; letter-spacing: .05em; pointer-events: none; }
.err404 { text-align: center; padding: calc(60px*var(--k)) 0 calc(100px*var(--k)); }
.err404 img { width: 160px; }
.search-form { display: flex; gap: 8px; max-width: 520px; margin: 18px auto; }
.search-form input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--line); }
@media (max-width: 680px) { br.pc { display: none; } }
@media (min-width: 681px) { br.sp { display: none; } }
.find-box .eyebrow { margin: 0; }
.wk-say { display: flex; align-items: flex-end; gap: calc(12px*var(--k)); max-width: 680px; margin: calc(34px*var(--k)) auto 0; }
.wk-say > img { width: calc(96px*var(--k)); flex: none; }
.wk-say .bub { position: relative; background: #fff; border: 2.5px solid #42251F; border-radius: 24px; padding: calc(14px*var(--k)) calc(20px*var(--k)); font-family: var(--maru); font-weight: 700; font-size: calc(16.5px*var(--kt)); line-height: 1.7; margin-bottom: calc(34px*var(--k)); box-shadow: 0 6px 0 rgba(66, 37, 31, .08); }
.wk-say .bub::before, .wk-say .bub::after { content: ""; position: absolute; left: -16px; bottom: 16px; border: 9px solid transparent; border-right: 16px solid #42251F; border-left: 0; }
.wk-say .bub::after { left: -12px; border-right-color: #fff; }
.wk-say .bub small { display: block; font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); margin-top: 2px; }
.wk-say.r { flex-direction: row-reverse; }
.wk-say.r .bub::before { left: auto; right: -16px; border-right: 0; border-left: 16px solid #42251F; }
.wk-say.r .bub::after { left: auto; right: -12px; border-right: 0; border-left: 16px solid #fff; }
.wk-say.left { margin-left: 0; }
@media (max-width: 680px) { .wk-say > img { width: 70px; } .wk-say .bub { font-size: 14px; padding: 10px 14px; margin-bottom: 22px; } }
.site-foot { position: relative; }
.foot-peek { position: absolute; right: 7%; top: -92px; width: 118px; height: 92px; overflow: hidden; pointer-events: none; }
.foot-peek img { width: 118px; display: block; }
.foot-peek-say { position: absolute; right: calc(7% + 128px); top: -64px; background: #fff; color: var(--ink); border: 2.5px solid #1E3A5F; border-radius: 18px; padding: 6px 14px; font-family: var(--maru); font-weight: 700; font-size: 14px; white-space: nowrap; }
.foot-peek-say::after { content: ""; position: absolute; right: -12px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 12px solid #1E3A5F; border-right: 0; }
@media (max-width: 680px) { .foot-peek { width: 84px; height: 66px; top: -66px; right: 16px; } .foot-peek img { width: 84px; } .foot-peek-say { right: 108px; top: -50px; font-size: 12px; padding: 4px 10px; } }
.wk-band { display: grid; grid-template-columns: auto 1fr auto; gap: calc(30px*var(--k)); align-items: center; background: #fff; border-radius: 32px; padding: calc(30px*var(--k)) calc(40px*var(--k)); box-shadow: var(--shadow-s); }
.wk-band .wk-pics { display: flex; align-items: flex-end; gap: 4px; }
.wk-band .wk-pics img { width: calc(92px*var(--k)); }
.wk-band .wk-pics img:nth-child(2) { width: calc(120px*var(--k)); }
.wk-band h2 { font-size: max(17px, calc(26px*var(--k))); margin-bottom: calc(6px*var(--k)); }
.wk-band p { margin: 0; color: var(--ink2); font-size: calc(15px*var(--kt)); }
.wk-band q { display: block; font-family: var(--maru); font-weight: 700; color: var(--blue-d); font-size: calc(17px*var(--kt)); margin-top: 8px; quotes: "「" "」"; }
@media (max-width: 860px) { .wk-band { grid-template-columns: 1fr; text-align: center; padding: 24px 18px; } .wk-band .wk-pics { justify-content: center; } }
.page-hero .wk-say-mini { position: absolute; right: calc(150px*var(--k)); bottom: calc(40px*var(--k)); }
.design-body > .sec-s:first-child { padding-top: calc(34px*var(--k)); }
.fact-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12px*var(--k)); }
.fact-chips li { background: #fff; border-radius: 18px; padding: calc(14px*var(--k)) calc(16px*var(--k)); display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-s); font-family: var(--maru); font-weight: 700; font-size: calc(16px*var(--kt)); line-height: 1.45; }
.fact-chips li svg { width: 30px; height: 30px; color: var(--blue-d); background: var(--blue-l); border-radius: 10px; padding: 5px; flex: none; }
.fact-chips small { display: block; font-family: var(--sans); font-weight: 500; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); }
@media (max-width: 900px) { .fact-chips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fact-chips li { padding: 10px 12px; font-size: 14px; } }
.grow { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24px*var(--k)); }
.grow-col { background: #fff; border-radius: 26px; padding: calc(22px*var(--k)) calc(24px*var(--k)); box-shadow: var(--shadow-s); }
.grow-col h3 { font-size: max(17px, calc(21px*var(--k))); display: inline-block; padding: 2px 16px; border-radius: 999px; color: #fff; margin-bottom: calc(14px*var(--k)); }
.grow-col.see h3 { background: var(--art-d); } .grow-col.unseen h3 { background: #6B4528; }
.gcard { display: flex; gap: 14px; align-items: flex-start; padding: calc(12px*var(--k)) 0; border-top: 1.5px dashed var(--line); }
.gcard:first-of-type { border-top: 0; padding-top: 0; }
.gcard .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--cream2); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink2); }
.gcard .ic svg { width: 26px; height: 26px; }
.gcard b { display: block; font-family: var(--maru); font-size: calc(17px*var(--kt)); margin-bottom: 2px; }
.gcard p { margin: 0; font-size: calc(14.5px*var(--kt)); color: var(--ink2); line-height: 1.8; }
@media (max-width: 860px) { .grow { grid-template-columns: 1fr; } }
.works { display: flex; gap: 12px; justify-content: center; }
.works img { width: 31%; border-radius: 6px; box-shadow: var(--shadow); background: #fff; }
.works img:nth-child(1) { transform: rotate(-3deg); } .works img:nth-child(3) { transform: rotate(3deg); }
.art-collage { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.art-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; box-shadow: var(--shadow-s); }
.art-collage .a1 { grid-row: span 2; aspect-ratio: 4 / 3.6; }
.art-collage .a2 { grid-row: span 2; aspect-ratio: 3 / 4.6; }
.art-collage .a3, .art-collage .a4 { aspect-ratio: 4 / 3; }
@media (max-width: 680px) { .art-collage { grid-template-columns: 1fr 1fr; } .art-collage .a1 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; } .art-collage .a2 { grid-row: span 2; aspect-ratio: auto; } }
.flow5 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(12px*var(--k)); counter-reset: f5; }
.flow5 li { background: var(--art-l); border-radius: 20px; padding: calc(18px*var(--k)) calc(16px*var(--k)); position: relative; }
.flow5 li::before { counter-increment: f5; content: counter(f5); display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--art-d); color: #fff; align-items: center; justify-content: center; font-family: var(--maru); font-weight: 900; margin-bottom: 8px; }
.flow5 b { display: block; font-family: var(--maru); font-size: calc(16px*var(--kt)); line-height: 1.5; }
.flow5 span { display: block; font-size: calc(13.5px*var(--kt)); color: var(--ink2); margin-top: 4px; line-height: 1.6; }
@media (max-width: 900px) { .flow5 { grid-template-columns: 1fr; } .flow5 li { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; padding: 14px 16px; } .flow5 li::before { grid-row: span 2; margin: 0; } }
.curri { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px*var(--k)); }
.curri > div { background: #fff; border-radius: 22px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); }
.curri h3 { font-size: max(17px, calc(20px*var(--k))); display: flex; align-items: baseline; gap: 8px; }
.curri h3 small { font-size: 13px; color: var(--ink2); font-family: var(--sans); font-weight: 500; }
.curri ul { margin: 0; padding-left: 1.2em; font-size: calc(14.5px*var(--kt)); line-height: 1.8; }
@media (max-width: 860px) { .curri { grid-template-columns: 1fr; } }
.check-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-cards li { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-s); font-family: var(--maru); font-weight: 700; font-size: calc(16px*var(--kt)); }
.check-cards svg { color: var(--art-d); width: 22px; height: 22px; }
@media (max-width: 680px) { .check-cards { grid-template-columns: 1fr; } }
.art-rooms .mini-card h3 { flex-wrap: wrap; }
.flow4 { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(16px*var(--k)); }
.flow4 > li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; background: #fff; border-radius: 24px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); }
.flow4 .no { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-d); color: #fff; font-family: var(--maru); font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.flow4 h3 { font-size: max(17px, calc(20px*var(--k))); margin: 8px 0 8px; }
.flow4 p { font-size: calc(15px*var(--kt)); margin-bottom: .7em; }
@media (max-width: 560px) { .flow4 > li { grid-template-columns: 1fr; gap: 6px; } .flow4 .no { width: 38px; height: 38px; font-size: 17px; } }
.history { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 4px solid var(--yellow-s); display: grid; gap: calc(14px*var(--k)); }
.history li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; position: relative; padding-left: 18px; }
.history li::before { content: ""; position: absolute; left: -15px; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); }
.history b { font-family: var(--maru); font-size: calc(20px*var(--kt)); color: var(--blue-d); }
.history span { font-size: calc(15px*var(--kt)); line-height: 1.8; }
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: calc(26px*var(--k)); }
.faq-nav a { padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); text-decoration: none; font-family: var(--maru); font-weight: 700; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.faq-group h2 svg { color: var(--blue-d); }
.vh { font-size: max(17px, calc(23px*var(--k))); display: flex; align-items: center; gap: 10px; margin: calc(40px*var(--k)) 0 calc(18px*var(--k)); }
.vh:first-of-type { margin-top: 0; }
.card-grid .mini-card h3 { flex-wrap: wrap; }
.finder-sec { padding-top: calc(26px*var(--k)); }
.trial-guide { display: grid; gap: 14px; margin-bottom: 26px; }
.tg-prefill { background: var(--blue-l); border-radius: 18px; padding: 14px 18px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.tg-prefill svg { color: var(--blue-d); width: 22px; height: 22px; }
.tg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tg-cards > div { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-s); font-size: calc(14.5px*var(--kt)); }
.tg-cards b { display: flex; align-items: center; gap: 6px; font-family: var(--maru); font-size: calc(16px*var(--kt)); margin-bottom: 4px; }
.tg-cards b svg { color: var(--blue-d); }
@media (max-width: 760px) { .tg-cards { grid-template-columns: 1fr; } }
body:has(.mfm-floating-menu) { padding-bottom: 0 !important; }
body:has(.mfm-floating-menu) .site-foot { padding-bottom: 120px; }
body .mfm-floating-menu .mfm-float-trial { background: var(--yellow) !important; color: var(--ink) !important; box-shadow: 0 5px 0 #D9C800, 0 8px 18px rgba(0, 0, 0, .15) !important; font-family: var(--maru); }
body .mfm-floating-menu .mfm-float-line { font-family: var(--maru); box-shadow: 0 5px 0 #04913E, 0 8px 18px rgba(0, 0, 0, .15) !important; }
body .mfm-floating-menu .mfm-float-badge { background: var(--blue-d) !important; color: #fff !important; }
body .mfm-floating-menu .mfm-float-badge::after { border-color: var(--blue-d) transparent transparent transparent !important; }
@media (max-width: 768px) { body .mfm-floating-menu .mfm-float-btn { min-height: 50px; font-size: 15px !important; } body .mfm-floating-menu .mfm-float-trial-text { font-size: 15px !important; } }
@media (max-width: 768px) { body:has(.mfm-floating-menu) .gt_switcher_wrapper { bottom: 84px !important; } }
.prose .lcard, .lcard { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 12px 0; padding: 14px 16px; min-height: 72px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.prose .lcard:hover, .lcard:hover { transform: translateY(-2px); border-color: var(--line); color: var(--ink); }
.prose .lc-center .lcard, .lc-center .lcard { margin-left: auto; margin-right: auto; }   
.lcard .lc-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--blue-l); color: var(--blue-d); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.lcard .lc-ic svg { width: 26px; height: 26px; }
.prose .lcard .lc-ic img, .lcard .lc-ic img { width: 44px; height: auto; border-radius: 0; margin-top: 8px; }
.lcard .lc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.lcard .lc-tx b { font-family: var(--maru); font-size: 17px; }
.lcard .lc-tx small { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.lcard .lc-go { width: 34px; height: 34px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; flex: none; }
.lcard .lc-go svg { width: 18px; height: 18px; color: var(--blue-d); }
.lcard.tone-soroban .lc-ic { background: var(--soroban-l); } .lcard.tone-shodo .lc-ic { background: var(--shodo-l); } .lcard.tone-art .lc-ic { background: var(--art-l); }
.lcard.tone-cta { background: var(--yellow); box-shadow: 0 5px 0 #D9C800; }
.lcard.tone-cta .lc-ic { background: #fff; }
.lcard.tone-cta .lc-go { background: #fff; }
.prose p > .lcard + br { display: none; }
.ui-block { display: block; margin: 18px 0; }
.ui-block img { border-radius: 0; }
.ways { background: #fff; border-radius: 26px; padding: 20px; box-shadow: var(--shadow-s); text-align: center; }
.ways-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.prose .ways-head img { width: 64px; }
.ways-head > span { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.ways-head small { font-family: var(--maru); font-weight: 700; color: var(--blue-d); font-size: 15px; }
.ways-head b { font-family: var(--maru); font-size: 24px; }
.ways-subj { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.ways-subj .badge { font-size: 13px; padding: 4px 12px; }
.ways-subj .badge small { font-size: 11px; }
.ways-lead { display: block; font-family: var(--maru); font-weight: 700; margin-bottom: 10px; }
.ways-lead small { display: block; font-size: max(11px,calc(13px*var(--kt))); font-weight: 500; color: var(--ink2); margin-top: calc(2px*var(--k)); }
.td-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(14px*var(--k)); align-items: center; background: #fff; border-radius: 26px; padding: calc(22px*var(--k)) calc(24px*var(--k)); box-shadow: var(--shadow-s); text-align: center; }
.td-head img { width: 100%; max-width: 170px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; display: block; margin: 0 auto 8px; }
.td-head b { display: block; font-family: var(--maru); font-size: calc(17px*var(--kt)); }
.td-head small { display: block; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); }
.td-x { display: grid; justify-items: center; gap: 4px; }
.td-x small { font-size: max(11px,calc(12.5px*var(--kt))); color: var(--blue-d); font-weight: 700; }
.td-x b { font-family: var(--maru); font-weight: 900; font-size: calc(22px*var(--kt)); line-height: 1.3; }
.td-x span { font-family: var(--maru); font-weight: 900; font-size: calc(30px*var(--kt)); color: var(--blue); line-height: 1; }
.taidan { display: grid; gap: calc(14px*var(--k)); }
.td { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; background: #fff; border-radius: 20px; padding: calc(16px*var(--k)) calc(18px*var(--k)); box-shadow: var(--shadow-s); }
.td > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.td .who { font-family: var(--maru); font-weight: 700; font-size: calc(13.5px*var(--kt)); margin: 0 0 4px; }
.td.m .who { color: var(--blue-d); } .td.g .who { color: var(--shodo-d); }
.td.g { background: #F3FAF5; }
.td p { margin: 0 0 .7em; font-size: calc(15px*var(--kt)); line-height: 1.9; }
.td p:last-child { margin-bottom: 0; }
.td h4 { font-family: var(--maru); font-size: calc(15.5px*var(--kt)); margin: .6em 0 .3em; color: var(--ink); }
.td h4::before { content: "「"; } .td h4::after { content: "」"; }
.td .td-pic { width: 100%; max-width: 360px; height: auto; border-radius: 12px; margin-top: 8px; display: block; }
.prof-card { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: calc(20px*var(--k)); align-items: center; background: #fff; border-radius: 24px; padding: calc(20px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); margin-top: calc(22px*var(--k)); }
.prof-card img { width: 100%; height: auto; border-radius: 16px; display: block; }
.prof-card h3 { font-size: calc(17.5px*var(--kt)); margin: 2px 0 8px; }
.prof-card p { margin: 0; font-size: calc(14.5px*var(--kt)); color: var(--ink2); line-height: 1.85; }
.prof-card .eyebrow { margin: 0; }
@media (max-width: 720px) {
  .td-head { grid-template-columns: 1fr 1fr; }
  .td-head .td-x { grid-column: 1 / -1; order: -1; }
  .td-x span { display: none; }
  .td { grid-template-columns: 44px 1fr; gap: 10px; }
  .td > img { width: 44px; height: 44px; }
  .prof-card { grid-template-columns: 1fr; }
}
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ways .way { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; background: var(--blue-l); color: var(--ink); text-decoration: none; line-height: 1.45; min-height: 44px; }
.ways .way svg { width: 32px; height: 32px; color: var(--blue-d); }
.ways .way b { font-family: var(--maru); font-size: 16px; }
.ways .way small { font-size: 12.5px; color: var(--ink2); }
.ways .way.line { background: #E3F8EC; }
.ways .way.line svg { color: var(--line-g); fill: var(--line-g); }
@media (max-width: 560px) { .ways-grid { grid-template-columns: 1fr; } .ways .way { flex-direction: row; text-align: left; padding: 12px 14px; gap: 12px; } .ways .way b { display: block; } .ways .way small br { display: none; } .ways .way > b, .ways .way > small { flex: none; } .ways .way { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; } .ways .way svg { grid-row: span 2; } }
.perks { background: linear-gradient(180deg, #FFF9D6, #fff); border: 3px solid var(--yellow-s); border-radius: 26px; padding: 20px; text-align: center; }
.perks-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.perks-head small { background: var(--blue-d); color: #fff; border-radius: 999px; padding: 2px 16px; font-weight: 700; font-size: 13px; }
.perks-head b { font-family: var(--maru); font-size: 24px; margin-top: 6px; }
.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.perk { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 18px; padding: 14px 10px; box-shadow: var(--shadow-s); line-height: 1.45; }
.perk .pk-no { font-family: var(--maru); font-weight: 900; color: #C0392B; font-size: 14px; }
.perk .pk-when { font-size: 12.5px; font-weight: 700; color: var(--ink2); margin: 2px 0 8px; }
.prose .perk img { width: 64px; margin-bottom: 6px; }
.perk .pk-ic { width: 64px; height: 76px; display: flex; align-items: center; justify-content: center; color: var(--shodo-d); }
.perk .pk-ic svg { width: 46px; height: 46px; }
.perk b { font-family: var(--maru); font-size: 15px; }
.perks-note { display: block; font-size: 12px; color: var(--ink3); margin-top: 10px; }
@media (max-width: 560px) { .perks-grid { grid-template-columns: 1fr; } .perk { display: grid; grid-template-columns: 64px 1fr; text-align: left; column-gap: 12px; align-items: center; } .perk img, .perk .pk-ic { grid-row: span 3; grid-column: 1; margin: 0; } .perk .pk-no, .perk .pk-when, .perk b { grid-column: 2; } .perk .pk-when { margin: 0; } }
.wk-intro { background: #FFF6E4; border-radius: 28px; padding: 22px; }
.wk-intro-head { display: flex; flex-direction: column; text-align: center; margin-bottom: 16px; }
.wk-intro-head small { font-family: var(--maru); font-weight: 700; color: var(--blue-d); }
.wk-intro-head b { font-family: var(--maru); font-size: 24px; line-height: 1.5; }
.wk-intro-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: center; }
.prose .wk-intro .wk-photo { width: 100%; border-radius: 18px; }
.wk-intro-tx { display: block; font-size: 15px; line-height: 1.9; }
.wk-msg { display: block; text-align: center; background: #fff; border-radius: 22px; padding: 16px; margin: 18px 0; font-family: var(--maru); font-weight: 900; font-size: 21px; color: #B9520E; box-shadow: var(--shadow-s); }
.wk-msg small { display: block; font-size: 13px; color: var(--ink2); font-weight: 700; }
.wk-use { display: flex; gap: 14px; align-items: center; background: var(--yellow); border-radius: 22px; padding: 16px 18px; }
.prose .wk-use img { width: 90px; flex: none; }
.wk-use b { display: block; font-family: var(--maru); font-size: 17px; margin-bottom: 6px; }
.wk-use-li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.7; margin-top: 4px; }
.wk-use-li svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: #C0392B; }
.wk-book { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14.5px; line-height: 1.8; }
.wk-book > svg { width: 32px; height: 32px; color: var(--blue-d); flex: none; }
.wk-book b { display: block; font-family: var(--maru); font-size: 17px; }
@media (max-width: 680px) { .wk-intro-body { grid-template-columns: 1fr; } .wk-use { flex-direction: column; text-align: left; align-items: flex-start; } .prose .wk-use img { width: 70px; } }
.kokoro { position: relative; background: linear-gradient(135deg, var(--blue-l), #FFF9D6); border-radius: 26px; padding: 26px 120px 26px 26px; overflow: hidden; }
.kokoro small { display: block; font-family: var(--maru); font-weight: 700; color: var(--blue-d); font-size: 15px; }
.kokoro b { display: block; font-family: var(--maru); font-weight: 900; font-size: 28px; line-height: 1.45; }
.prose .kokoro img { position: absolute; right: 16px; bottom: -10px; width: 100px; }
@media (max-width: 560px) { .kokoro { padding: 20px 96px 20px 18px; } .kokoro b { font-size: 21px; } .prose .kokoro img { width: 80px; } }
@media (max-width: 560px) {
  .prose table tr:has(> :nth-child(2):last-child) { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .prose table tr:has(> :nth-child(2):last-child) > th, .prose table tr:has(> :nth-child(2):last-child) > td { display: block; width: auto !important; padding: 2px 0; border: 0; background: transparent; }
  .prose table tr:has(> :nth-child(2):last-child) > :first-child { font-weight: 700; color: var(--ink2); font-size: 13px; }
}
.gtranslate_wrapper, .gt_switcher_wrapper, #gt_float_wrapper, .gt_float_switcher { display: none !important; }
@media (max-width: 680px) { html { zoom: .75; } }
.brand small { white-space: nowrap; }
.cal { max-width: 640px; margin: 0 auto; }
.cal-next { display: flex; flex-direction: column; align-items: center; background: var(--blue-d); color: #fff; border-radius: 22px; padding: 14px 18px; margin-bottom: 16px; text-align: center; box-shadow: var(--shadow-s); }
.cal-next span { font-size: 13px; opacity: .9; }
.cal-next b { font-family: var(--maru); font-size: 24px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-nav b { font-family: var(--maru); font-size: 24px; }
.cal-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--blue-d); }
.cal-btn svg { width: 22px; height: 22px; }
[data-prev] svg { transform: rotate(90deg); } [data-next-m] svg { transform: rotate(-90deg); }
.cal-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.cal-chips::-webkit-scrollbar { display: none; }
.cal-chips button { flex: none; min-width: 52px; min-height: 40px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-family: var(--maru); font-weight: 700; cursor: pointer; color: var(--ink); }
.cal-chips button[aria-pressed=true] { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); margin: 4px 0 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.lg-off { border: 3px solid #D9342B; } .lg-hol { background: #E9E2D6; border-radius: 6px !important; } .lg-today { background: var(--yellow); box-shadow: inset 0 0 0 2px #D9C800; }
.cal-month { background: #fff; border-radius: 24px; padding: 16px; box-shadow: var(--shadow-s); }
.cal-month h3 { text-align: center; font-size: 16px; color: var(--ink2); margin: 0 0 8px; }
.cal-month h3 b { font-size: 26px; color: var(--ink); margin-left: 6px; }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-grid th { font-size: 13px; color: var(--ink2); padding: 4px 0; font-weight: 700; }
.cal-grid th.sun, .cal-grid td.sun .n { color: #D9342B; } .cal-grid th.sat, .cal-grid td.sat .n { color: var(--blue-d); }
.cal-grid td { text-align: center; vertical-align: top; height: 58px; border-radius: 12px; padding: 4px 0 2px; background: var(--cream); position: relative; }
.cal-grid td.empty { background: transparent; }
.cal-grid td.hol { background: #EFE8DC; }
.cal-grid .n { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--maru); font-weight: 700; font-size: 17px; }
.cal-grid td.off .n { box-shadow: inset 0 0 0 3px #D9342B; }
.cal-grid td.today { background: var(--yellow); }
.cal-grid .hn { display: block; font-size: 9px; line-height: 1.2; color: var(--ink2); padding: 0 1px; word-break: keep-all; overflow-wrap: anywhere; }
.cal-list { margin: 12px 4px 0; font-size: 14px; line-height: 1.8; }
.cal-list b { display: block; color: #D9342B; font-size: 13px; }
.cal-note { font-size: 13px; color: var(--ink2); margin-top: 14px; }
.cal.show-all .cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cal.show-all { max-width: none; }
.cal.show-all .cal-nav, .cal.show-all .cal-chips { display: none; }
.cal.show-all .cal-grid td { height: 40px; } .cal.show-all .cal-grid .n { width: 28px; height: 28px; font-size: 14px; } .cal.show-all .cal-grid .hn { display: none; }
@media print { .cal-month { break-inside: avoid; } }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; grid-auto-flow: dense; }
.photo-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.photo-grid .wide { grid-column: span 2; }
@media (max-width: 680px) { .photo-grid { grid-template-columns: 1fr 1fr; } }
.photo-cap { font-size: 13px; color: var(--ink2); text-align: center; margin-top: 8px; }
.tcomments { columns: 2 340px; column-gap: 16px; }
.tcomment { break-inside: avoid; background: #fff; border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow-s); margin-bottom: 14px; font-size: calc(15px*var(--kt)); line-height: 1.9; }
.tcomment mark { background: linear-gradient(transparent 55%, #FFE94A 55%); color: inherit; padding: 0 1px; }
.tcomment .who { display: block; text-align: right; font-size: 12.5px; color: var(--ink2); margin-top: 6px; }
.theme-box { background: var(--blue-l); border-radius: 18px; padding: 14px 18px; margin: 0 0 16px; }
.theme-box small { display: block; font-family: var(--maru); font-weight: 700; color: var(--blue-d); letter-spacing: .08em; }
.theme-box b { display: block; font-family: var(--maru); font-size: 17px; line-height: 1.6; }
.brain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.brain > div { background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--shadow-s); text-align: center; }
.brain b { display: block; font-family: var(--maru); font-size: 18px; }
.brain small { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 6px; }
.brain p { margin: 0; font-size: 14.5px; line-height: 1.75; text-align: left; }
.brain .plus { background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; font-family: var(--maru); font-weight: 900; font-size: 28px; color: var(--soroban-d); padding: 0; }
@media (max-width: 680px) { .brain { grid-template-columns: 1fr; } .brain .plus { padding: 0; } }
.num-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: nl; }
.num-list > li { background: #fff; border-radius: 20px; padding: 16px 18px 16px 62px; box-shadow: var(--shadow-s); position: relative; }
.num-list > li::before { counter-increment: nl; content: counter(nl); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-d); color: #fff; font-family: var(--maru); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.num-list.soroban > li::before { background: var(--soroban-d); } .num-list.shodo > li::before { background: var(--shodo-d); } .num-list.art > li::before { background: var(--art-d); } .num-list.root > li::before { background: #6B4528; }
.num-list b { display: block; font-family: var(--maru); font-size: 18px; margin-bottom: 4px; }
.num-list p { margin: 0; font-size: calc(15px*var(--kt)); line-height: 1.85; color: var(--ink2); }
.big-quote { font-family: var(--maru); font-weight: 700; font-size: 20px; line-height: 1.9; text-align: center; background: #fff; border-radius: 26px; padding: 26px 22px; box-shadow: var(--shadow-s); }
.rinen-card { position: relative; background: linear-gradient(135deg, #fff, #FFF9D6); border-radius: 30px; padding: 34px 30px 34px; box-shadow: var(--shadow); text-align: center; overflow: hidden; }
.rinen-card .rinen-label { display: inline-block; background: var(--blue-d); color: #fff; border-radius: 999px; padding: 3px 18px; font-family: var(--maru); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.rinen-card p { font-family: var(--maru); font-weight: 700; font-size: calc(21px*var(--kt)); line-height: 2; margin: 0 0 8px; }
.prose .rinen-card img, .rinen-card img { position: absolute; right: 14px; bottom: -14px; width: 84px; }
@media (max-width: 680px) { .rinen-card { padding: 26px 18px 70px; } .rinen-card p { font-size: 17px; } }
.credo { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.credo li { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: var(--shadow-s); }
.credo .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }
.credo .ic svg { width: 26px; height: 26px; }
.credo p { margin: 0; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.6; }
.co-table { margin: 0; display: grid; grid-template-columns: 9em 1fr; background: #fff; border-radius: 24px; box-shadow: var(--shadow-s); overflow: hidden; }
.co-table dt, .co-table dd { margin: 0; padding: 14px 20px; border-bottom: 1.5px dashed var(--line); }
.co-table dt { font-weight: 700; color: var(--ink2); background: var(--cream); }
.co-table > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 560px) { .co-table { grid-template-columns: 1fr; } .co-table dt { border-bottom: 0; padding-bottom: 4px; } .co-table dd { padding-top: 4px; } }
.biz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.biz > div { background: #fff; border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow-s); }
.biz h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.biz p { margin: 0; font-size: calc(15px*var(--kt)); }
@media (max-width: 680px) { .biz { grid-template-columns: 1fr; } }
.history .era { display: block; font-family: var(--maru); font-weight: 900; color: var(--ink2); margin: 10px 0 0 -8px; padding-left: 0; }
.history li.era-row { display: block; padding-left: 0; }
.history li.era-row::before { display: none; }
.maps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.maps figure { margin: 0; background: #fff; border-radius: 22px; padding: 12px; box-shadow: var(--shadow-s); }
.maps iframe { width: 100%; height: 240px; border: 0; border-radius: 14px; display: block; }
.maps figcaption { font-size: 14px; padding: 10px 6px 2px; }
.maps figcaption b { display: block; font-family: var(--maru); }
@media (max-width: 680px) { .maps { grid-template-columns: 1fr; } }
.prof { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg, var(--blue-l), #fff); border-radius: 30px; padding: 26px; box-shadow: var(--shadow-s); }
.prof img { width: 100%; border-radius: 24px; display: block; }
.prof .tag { font-family: var(--maru); font-weight: 700; color: var(--blue-d); font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.prof h2 { font-size: max(17px, calc(30px*var(--k))); margin-bottom: 4px; }
.prof h2 small { font-size: 15px; color: var(--ink2); margin-left: 8px; }
.prof ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--ink2); line-height: 1.8; }
@media (max-width: 760px) { .prof { grid-template-columns: 1fr; text-align: center; } .prof img { max-width: 220px; margin: 0 auto; } }
.topics details { background: #fff; border-radius: 20px; box-shadow: var(--shadow-s); margin-bottom: 12px; }
.topics summary { cursor: pointer; padding: 16px 20px; font-family: var(--maru); font-weight: 700; font-size: 17px; list-style: none; display: flex; align-items: center; gap: 10px; }
.topics summary::-webkit-details-marker { display: none; }
.topics summary svg { color: var(--blue-d); }
.topics summary::after { content: "＋"; margin-left: auto; color: var(--ink3); }
.topics details[open] summary::after { content: "－"; }
.topics ol { margin: 0; padding: 0 20px 16px 2.6em; }
.topics li { margin-bottom: 10px; }
.topics li b { display: block; font-family: var(--maru); }
.topics li span { display: block; font-size: 14px; color: var(--ink2); line-height: 1.8; }
.books { display: grid; gap: 18px; }
.book { display: grid; grid-template-columns: 130px 1fr; gap: 18px; background: #fff; border-radius: 24px; padding: 18px; box-shadow: var(--shadow-s); align-items: start; }
.book img { width: 100%; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); display: block; }
.book h3 { font-size: 18px; margin-bottom: 4px; }
.book .pub { font-size: 13px; color: var(--ink2); margin-bottom: 8px; }
.book details summary { cursor: pointer; color: var(--blue-d); font-weight: 700; font-size: 14px; }
.book details p, .book details ul { font-size: 14px; line-height: 1.85; }
@media (max-width: 560px) { .book { grid-template-columns: 90px 1fr; gap: 12px; } }
.p1 { --pc: var(--blue); --pl: var(--blue-l); --pd: var(--blue-d); }
.p2 { --pc: var(--shodo); --pl: var(--shodo-l); --pd: var(--shodo-d); }
.p3 { --pc: var(--soroban); --pl: var(--soroban-l); --pd: var(--soroban-d); }
.photo-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid.c2 { grid-template-columns: 1fr 1fr; }
.photo-grid.works img { aspect-ratio: 3 / 4; object-fit: contain; background: #fff; padding: 6px; box-shadow: var(--shadow-s); }   
@media (max-width: 680px) { .photo-grid.c3 { grid-template-columns: 1fr 1fr; } }
.k-why { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16px*var(--k)); max-width: 900px; margin: 0 auto calc(44px*var(--k)); }
.k-stat { display: flex; gap: calc(16px*var(--k)); align-items: center; background: linear-gradient(135deg, var(--blue-l), #fff); border-radius: 24px; padding: calc(22px*var(--k)) calc(24px*var(--k)); }
.k-stat .ic { width: calc(60px*var(--k)); height: calc(60px*var(--k)); border-radius: 18px; background: #fff; color: var(--blue-d); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-s); }
.k-stat .ic svg { width: calc(32px*var(--k)); height: calc(32px*var(--k)); }
.k-stat p { margin: 0; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.6; }
.k-stat b { color: var(--blue-d); font-size: 1.3em; }
@media (max-width: 680px) { .k-why { grid-template-columns: 1fr; } }
.k-sub { text-align: center; font-size: max(17px, calc(22px*var(--k))); margin: 0 0 calc(20px*var(--k)); color: var(--blue-d); }
.card-grid.k-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid.k-3 { grid-template-columns: 1fr; } }
.k-3 .mini-card { background: var(--cream); box-shadow: none; }
.k-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px*var(--k)); }
.k-plan { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 26px; padding: calc(22px*var(--k)) calc(22px*var(--k)) calc(20px*var(--k)); box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); border-top: 6px solid var(--pc); transition: transform .2s; }
.k-plan:hover { transform: translateY(-3px); color: var(--ink); }
.k-tag { display: flex; align-items: center; gap: 8px; font-family: var(--maru); font-weight: 700; font-size: calc(15px*var(--kt)); color: var(--pd); }
.k-tag i { font-style: normal; background: var(--pl); border-radius: 999px; padding: 0 10px; font-size: max(11px,calc(12px*var(--kt))); }
.k-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--pl); color: var(--pd); display: flex; align-items: center; justify-content: center; flex: none; }
.k-ic svg { width: 22px; height: 22px; }
.k-plan > b { font-family: var(--maru); font-size: calc(20px*var(--kt)); line-height: 1.45; }
.k-plan .k-tx { font-size: calc(14px*var(--kt)); color: var(--ink2); line-height: 1.7; flex: 1; }
.k-yen { font-family: var(--maru); font-weight: 900; font-size: calc(22px*var(--kt)); color: var(--pd); line-height: 1.4; }
.k-yen small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); margin-left: 4px; }
.k-more { display: flex; align-items: center; gap: 4px; font-size: max(11px,calc(13px*var(--kt))); font-weight: 700; color: var(--pd); }
@media (max-width: 900px) { .k-plans { grid-template-columns: 1fr; } .k-plan > b br { display: none; } }
.k-free { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: calc(26px*var(--k)) auto 0; max-width: 860px; background: #fff; border: 2.5px dashed var(--blue); border-radius: 24px; padding: calc(18px*var(--k)) calc(24px*var(--k)); }
.k-free p { margin: 0; font-family: var(--maru); font-weight: 700; font-size: calc(19px*var(--kt)); line-height: 1.5; }
.k-free small { display: block; font-size: max(11px,calc(13px*var(--kt))); color: var(--blue-d); }
@media (max-width: 680px) { .k-free { flex-direction: column; text-align: center; } }
.k-phead { display: flex; gap: calc(18px*var(--k)); align-items: center; margin-bottom: calc(20px*var(--k)); }
.k-no { flex: none; width: calc(84px*var(--k)); height: calc(84px*var(--k)); min-width: 64px; min-height: 64px; border-radius: 22px; background: var(--pc); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(12px*var(--kt))); line-height: 1.2; letter-spacing: .06em; }
.k-no b { font-size: max(17px, calc(36px*var(--k))); line-height: 1; }
.k-kind { margin: 0 0 2px; font-family: var(--maru); font-weight: 700; color: var(--pd); font-size: calc(14px*var(--kt)); }
.k-phead h2 { font-size: max(17px, calc(30px*var(--k))); margin: 0; }
.k-lead { font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.7; background: var(--pl); border-radius: 18px; padding: calc(14px*var(--k)) calc(20px*var(--k)); margin-bottom: calc(8px*var(--k)); }
.k-lead small { display: block; font-family: var(--sans); font-weight: 400; font-size: calc(14.5px*var(--kt)); color: var(--ink2); margin-top: 4px; }
.k-h3 { font-size: max(17px, calc(20px*var(--k))); display: flex; align-items: center; gap: 10px; margin: calc(34px*var(--k)) 0 calc(14px*var(--k)); }
.k-h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--blue)); flex: none; }
.k-worries { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12px*var(--k)); }
.k-worries > div { background: var(--pl); border-radius: 20px; padding: calc(16px*var(--k)) calc(12px*var(--k)); text-align: center; font-family: var(--maru); font-weight: 700; font-size: calc(15px*var(--kt)); line-height: 1.55; }
.k-worries .ic { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--pd); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.k-worries .ic svg { width: 24px; height: 24px; }
@media (max-width: 680px) { .k-worries { grid-template-columns: 1fr 1fr; } }
.k-meet { display: grid; grid-template-columns: 220px 1fr; gap: calc(22px*var(--k)); align-items: center; margin-top: calc(34px*var(--k)); }
.k-meet img { width: 100%; border-radius: 18px; display: block; }
@media (max-width: 680px) { .k-meet { grid-template-columns: 1fr; } .k-meet img { max-width: 240px; } }
.k-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-who li { position: relative; background: #fff; border-radius: 18px; padding: 12px 16px 12px 46px; box-shadow: var(--shadow-s); font-size: calc(15px*var(--kt)); line-height: 1.7; }
.sec.white .k-who li { background: var(--cream); box-shadow: none; }
.k-who li svg { position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; color: var(--pd, var(--blue-d)); }
.k-list svg { color: var(--pd, var(--blue-d)); }
.k-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(12px*var(--k)); }
.k-flow > li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; background: #fff; border-radius: 20px; padding: calc(16px*var(--k)) calc(18px*var(--k)); box-shadow: var(--shadow-s); }
.sec.white .k-flow > li { background: var(--cream); box-shadow: none; }
.k-flow .min { align-self: start; text-align: center; background: var(--pl); color: var(--pd); border-radius: 14px; padding: 8px 0; font-family: var(--maru); font-weight: 900; font-size: calc(22px*var(--kt)); line-height: 1.1; }
.sec.white .k-flow .min { background: #fff; }
.k-flow .min small { display: block; font-size: max(11px,calc(11px*var(--kt))); font-weight: 700; }
.k-flow b { display: block; font-family: var(--maru); font-size: calc(17px*var(--kt)); margin-bottom: 4px; }
.k-flow ul { margin: 0; padding-left: 1.1em; font-size: calc(14.5px*var(--kt)); color: var(--ink2); line-height: 1.75; }
.k-price { display: grid; grid-template-columns: auto 1fr; gap: calc(10px*var(--k)) calc(28px*var(--k)); align-items: center; background: var(--pl); border-radius: 24px; padding: calc(22px*var(--k)) calc(26px*var(--k)); margin-top: calc(24px*var(--k)); }
.k-price .yen { margin: 0; font-family: var(--maru); font-weight: 900; font-size: max(17px, calc(34px*var(--k))); color: var(--pd); line-height: 1.25; }
.k-price .yen small { display: block; font-size: max(11px,calc(13px*var(--kt))); font-weight: 700; color: var(--ink2); }
.k-price dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: calc(14.5px*var(--kt)); line-height: 1.7; }
.k-price dt { font-weight: 700; color: var(--pd); }
.k-price dd { margin: 0; }
@media (max-width: 680px) { .k-price { grid-template-columns: 1fr; } }
.k-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14px*var(--k)); }
.k-compare > div { background: #fff; border-radius: 22px; padding: calc(18px*var(--k)) calc(20px*var(--k)); box-shadow: var(--shadow-s); }
.k-compare h4 { font-size: calc(17px*var(--kt)); margin: 0 0 10px; text-align: center; padding-bottom: 10px; border-bottom: 2px dashed var(--line); line-height: 1.5; }
.k-compare h4 small { display: block; font-size: max(11px,calc(12px*var(--kt))); color: var(--blue-d); }
.k-compare dl, .k-visa dl { margin: 0; }
.k-compare dt, .k-visa dt { font-size: max(11px,calc(12px*var(--kt))); font-weight: 700; color: var(--ink3); letter-spacing: .06em; }
.k-compare dd, .k-visa dd { margin: 0 0 10px; font-size: calc(14.5px*var(--kt)); line-height: 1.65; }
.k-compare dd:last-child, .k-visa dd:last-child { margin-bottom: 0; }
.k-compare .me { background: var(--blue-l); box-shadow: 0 0 0 3px var(--blue); }
.k-compare .me h4 { color: var(--blue-d); border-bottom-color: #B8DFF2; }
@media (max-width: 900px) { .k-compare { grid-template-columns: 1fr; } .k-compare .me { order: -1; } }
.k-note { font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); margin: 10px 0 0; }
.k-box { background: #fff; border-radius: 26px; padding: calc(22px*var(--k)) calc(22px*var(--k)); margin-top: calc(16px*var(--k)); box-shadow: var(--shadow-s); }
.k-box h4 { font-size: calc(17px*var(--kt)); margin: 0 0 14px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; color: var(--pd, var(--blue-d)); }
.k-box h4 svg { margin-top: 3px; }
.k-box .points li { background: var(--cream); box-shadow: none; }
.k-box .points .ic, .wrap-n.p3 > .points .ic { background: var(--pl, var(--blue-l)); color: var(--pd, var(--blue-d)); }
.wrap-n.p3 > .points li { background: var(--cream); box-shadow: none; }
.k-visa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k-visa > div { background: var(--cream); border-radius: 18px; padding: 14px 16px; }
.k-visa h5 { font-family: var(--maru); font-size: calc(17px*var(--kt)); margin: 0 0 8px; text-align: center; color: var(--pd); }
.k-visa .mk { display: inline-flex; width: 1.5em; height: 1.5em; border-radius: 50%; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: max(11px,calc(12px*var(--kt))); margin-right: 6px; vertical-align: .05em; }
.mk.no { background: #F9DADA; color: #C03A3A; } .mk.ok { background: var(--shodo-l); color: var(--shodo-d); } .mk.mid { background: #FFF1C2; color: #9A6A00; }
@media (max-width: 680px) { .k-visa { grid-template-columns: 1fr; } }
.k-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px*var(--k)); align-items: stretch; margin-top: 18px; }
.k-tier { background: var(--cream); border-radius: 24px; padding: calc(22px*var(--k)) calc(20px*var(--k)) calc(18px*var(--k)); position: relative; display: flex; flex-direction: column; }
.k-tier.rec { background: var(--soroban-l); box-shadow: 0 0 0 3px var(--soroban); }
.k-tier .rec-b { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--soroban); color: #fff; font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(13px*var(--kt))); border-radius: 999px; padding: 1px 16px; }
.k-tier h4 { font-size: calc(19px*var(--kt)); text-align: center; margin: 0; }
.k-tier .yen { text-align: center; font-family: var(--maru); font-weight: 900; font-size: max(17px, calc(30px*var(--k))); color: var(--soroban-d); margin: 4px 0 0; line-height: 1.3; }
.k-tier .yen small { font-size: max(11px,calc(12px*var(--kt))); font-weight: 700; color: var(--ink2); margin: 0 3px; }
.k-tier ul { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; font-size: calc(14px*var(--kt)); line-height: 1.6; }
.k-tier li { display: flex; gap: 6px; align-items: flex-start; }
.k-tier li svg { color: var(--shodo); margin-top: 3px; }
.k-tier li.off { color: var(--ink3); } .k-tier li.off svg { color: var(--ink3); }
.k-tier .k-add { margin: auto 0 0; padding-top: 10px; font-size: max(11px,calc(12.5px*var(--kt))); line-height: 1.7; color: var(--ink2); border-top: 1.5px dashed var(--line); }
@media (max-width: 900px) { .k-tiers { grid-template-columns: 1fr; gap: 24px; } }
.k-notes { margin: 18px 0 0; padding-left: 1.2em; font-size: calc(13.5px*var(--kt)); color: var(--ink2); line-height: 1.8; }
.k-themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px*var(--k)); counter-reset: kt; }
.k-themes li { background: #fff; border-radius: 24px; padding: calc(22px*var(--k)) calc(22px*var(--k)); box-shadow: var(--shadow-s); position: relative; }
.k-themes li::before { counter-increment: kt; content: counter(kt); position: absolute; right: 20px; top: 14px; font-family: var(--maru); font-weight: 900; font-size: max(17px, calc(34px*var(--k))); color: var(--blue-l); line-height: 1; }
.k-themes .ic { width: 50px; height: 50px; border-radius: 16px; background: var(--blue-l); color: var(--blue-d); display: flex; align-items: center; justify-content: center; }
.k-themes .ic svg { width: 26px; height: 26px; }
.k-themes b { display: block; font-family: var(--maru); font-size: calc(18px*var(--kt)); line-height: 1.5; margin: 12px 0 6px; }
.k-themes p { margin: 0; font-size: calc(14.5px*var(--kt)); color: var(--ink2); }
@media (max-width: 900px) { .k-themes { grid-template-columns: 1fr; } }
.card-grid.k-3 .mini-card h3 { flex-wrap: nowrap; align-items: center; }
.hn-facts { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.hn-facts li span { display: block; }
.hn-top img, .hn-two .photo-grid img { aspect-ratio: 4 / 3; }
.hn-two { align-items: start; }
.hn-two .photo-grid { grid-template-columns: 1fr 1fr; }
.hn-h3 { font-size: max(17px, calc(21px*var(--k))); margin: calc(26px*var(--k)) 0 calc(10px*var(--k)); color: var(--soroban-d); }
.hn-h4 { font-size: max(17px, calc(18px*var(--k))); margin: calc(20px*var(--k)) 0 8px; color: var(--soroban-d); }
.hn-h4:first-child { margin-top: 0; }
.hn-class { background: #fff; border-radius: 30px; padding: calc(30px*var(--k)) calc(30px*var(--k)); box-shadow: var(--shadow-s); margin-bottom: calc(26px*var(--k)); }
.hn-class-hd { text-align: center; margin-bottom: calc(22px*var(--k)); }
.hn-class-hd .badge { font-size: calc(14px*var(--kt)); padding: 3px 16px; }
.hn-class-hd h3 { font-size: max(17px, calc(24px*var(--k))); margin: 10px 0 0; }
.hn-class-hd .badge.b-soroban { background: var(--soroban-l); color: var(--soroban-d); }
.hn-powers { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12px*var(--k)); }
.hn-powers > div { background: var(--soroban-l); border-radius: 20px; padding: calc(16px*var(--k)) calc(16px*var(--k)); }
.hn-powers .ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--soroban-d); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.hn-powers .ic svg { width: 22px; height: 22px; }
.hn-powers b { display: block; font-family: var(--maru); font-size: calc(17px*var(--kt)); color: var(--soroban-d); }
.hn-powers p { margin: 4px 0 0; font-size: calc(14px*var(--kt)); line-height: 1.7; color: var(--ink2); }
@media (max-width: 900px) { .hn-powers { grid-template-columns: 1fr 1fr; } }
.hn-points li { background: var(--cream); box-shadow: none; }
.hn-points .ic { background: var(--soroban-l); color: var(--soroban-d); }
.hn-wish { text-align: center; max-width: 860px; margin: 0 auto 10px; }
.eyebrow-s { font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .14em; color: var(--soroban-d); margin: 0 0 6px; }
.hn-wish p:last-child { margin: 0; }
.hn-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(18px*var(--k)); }
.hn-ev > li { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22px*var(--k)); align-items: start; background: var(--cream); border-radius: 26px; padding: calc(22px*var(--k)) calc(24px*var(--k)); }
.hn-ev .when { display: inline-block; background: var(--soroban); color: #fff; font-family: var(--maru); font-weight: 900; font-size: calc(14px*var(--kt)); letter-spacing: .06em; border-radius: 999px; padding: 1px 14px; }
.hn-ev h3 { font-size: max(17px, calc(20px*var(--k))); margin: 8px 0 8px; }
.hn-ev p { font-size: calc(15px*var(--kt)); margin-bottom: .8em; }
.hn-ev p:last-child { margin-bottom: 0; }
.hn-ev .ph { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hn-ev .ph img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.hn-ev .ph figure { margin: 0; }
.hn-ev .ph figure img { height: auto; }
.hn-ev .ph figure.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.hn-ev .ph figcaption { font-size: max(11px,calc(12.5px*var(--kt))); line-height: 1.6; color: var(--ink2); margin-top: 4px; }
@media (max-width: 760px) { .hn-ev > li { grid-template-columns: 1fr; } }
.hn-map > div { display: grid; gap: 12px; align-content: start; }
.hn-map .lcard { margin: 0; }
.ui-block.hn-open { display: block; position: relative; border-radius: 22px; overflow: hidden; margin: 16px 0; box-shadow: var(--shadow-s); }
.ui-block.hn-open img { width: 100%; display: block; }
.hn-open-tx { display: block; background: var(--soroban); color: #fff; text-align: center; padding: 14px 16px 16px; font-family: var(--maru); line-height: 1.5; }
.hn-open-tx small { display: block; font-size: calc(14px*var(--kt)); font-weight: 700; opacity: .9; }
.hn-open-tx b { display: block; font-size: max(17px, calc(26px*var(--k))); font-weight: 900; letter-spacing: .06em; }
.hn-open-tx span { display: block; font-size: calc(14px*var(--kt)); font-weight: 700; }
.ui-block.hn-detail { display: grid; gap: 12px; margin: 16px 0; }
.hn-detail-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hn-detail-ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; }
.hn-detail-box { display: block; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-s); font-size: calc(14.5px*var(--kt)); line-height: 1.75; }
.hn-detail-box .hd { display: block; font-family: var(--maru); font-size: calc(16px*var(--kt)); color: var(--soroban-d); margin-bottom: 4px; }
.hn-detail-box .hd small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); }
.hn-detail-box .btn { margin-top: 8px; }
.hn-prog { display: grid; gap: 4px; }
.hn-prog > span { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: calc(13.5px*var(--kt)); border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.hn-prog i { font-style: normal; font-weight: 700; color: var(--soroban-d); white-space: nowrap; }
.hn-addr { display: flex; gap: 10px; align-items: flex-start; background: var(--soroban-l); border-radius: 18px; padding: 14px 18px; text-decoration: none; color: var(--ink); font-size: calc(13.5px*var(--kt)); line-height: 1.7; }
.hn-addr svg { width: 22px; height: 22px; color: var(--soroban-d); flex: none; margin-top: 2px; }
.hn-addr b { display: block; font-family: var(--maru); color: var(--soroban-d); }
.rc-cta { margin-top: calc(22px*var(--k)); }
.rc-greet { align-items: center; }
.rc-sign { text-align: right; font-family: var(--maru); font-weight: 700; }
.rc-swipe { display: none; }
.rc-story { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16px*var(--k)); align-items: start; }
.rc-ch { background: var(--art-l); border-radius: 26px; padding: calc(20px*var(--k)) calc(18px*var(--k)); }
.rc-ch h3 { font-size: max(17px, calc(18px*var(--k))); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rc-ch h3 span { width: 34px; height: 34px; border-radius: 50%; background: var(--art); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex: none; }
.rc-say { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.rc-say i { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--art-d); overflow: hidden; box-shadow: var(--shadow-s); }
.rc-say i svg { width: 20px; height: 20px; }
.rc-say i img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.rc-say > span { position: relative; background: #fff; border-radius: 4px 16px 16px 16px; padding: 8px 12px; font-size: calc(14px*var(--kt)); line-height: 1.7; box-shadow: var(--shadow-s); }
.rc-say.boss > span { background: #FFFBE0; }
.rc-say.kid i { color: var(--soroban-d); }
.rc-say.kid > span { font-family: var(--maru); font-weight: 900; font-size: calc(16px*var(--kt)); color: var(--soroban-d); }
.rc-nar { margin: 4px 0 10px; text-align: center; font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(13px*var(--kt))); color: var(--art-d); }
.rc-who { margin: 2px 0 0; text-align: right; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); }
@media (max-width: 900px) {
  .rc-swipe { display: inline; }
  .rc-story { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 14px; margin: 0 -16px; -webkit-overflow-scrolling: touch; }
  .rc-ch { scroll-snap-align: center; }
}
.rc-work { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18px*var(--k)); }
.rc-h3 { font-size: max(17px, calc(19px*var(--k))); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-h3 svg { color: var(--art-d); }
.rc-h3 small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(12px*var(--kt))); color: var(--ink2); }
.rc-donut-wrap { display: flex; align-items: center; gap: calc(22px*var(--k)); flex-wrap: wrap; justify-content: center; }
.rc-donut { position: relative; width: 190px; height: 190px; border-radius: 50%; flex: none; background: conic-gradient(var(--blue-d) 0 56.3%, var(--blue) 56.3% 84.5%, #8FD3F2 84.5% 98.6%, #D3EEFB 98.6% 100%); display: flex; align-items: center; justify-content: center; }
.rc-donut::before { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: #fff; }
.rc-donut span { position: relative; text-align: center; font-family: var(--maru); font-weight: 700; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.rc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: calc(15px*var(--kt)); }
.rc-legend li { display: flex; align-items: center; gap: 8px; }
.rc-legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.rc-legend b { font-family: var(--maru); font-size: calc(19px*var(--kt)); color: var(--blue-d); margin-left: 6px; }
.rc-note { margin: 16px 0 0; font-size: calc(14px*var(--kt)); color: var(--ink2); }
.rc-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rc-time li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 10px 0 10px 18px; border-left: 3px solid var(--art-l); position: relative; }
.rc-time li::before { content: ""; position: absolute; left: -8px; top: 17px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--art); }
.rc-time li.main::before { background: var(--art); }
.rc-time b { font-family: var(--maru); font-size: calc(17px*var(--kt)); color: var(--art-d); }
.rc-time span small { display: block; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); }
.rc-other b { margin-right: 8px; font-family: var(--maru); }
.rc-other svg { color: var(--art-d); }
@media (max-width: 900px) { .rc-work { grid-template-columns: 1fr; } }
.flow4 h3 .rc-t { display: inline-block; margin-left: 8px; font-family: var(--sans); font-weight: 500; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); background: var(--cream); border-radius: 999px; padding: 0 10px; }
.flow4 .icon-list svg { color: var(--art-d); }
.sec.white .flow4 > li { background: var(--cream); box-shadow: none; }
.flow4 > li.rc-goal { background: var(--art-l); }
.flow4 > li.rc-goal .no { background: var(--art); }
.flow4 > li.rc-goal .no svg { width: 22px; height: 22px; }
.rc-charm { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px*var(--k)); }
.rc-charm p { font-size: calc(15px*var(--kt)); }
.rc-charm p:last-child { margin-bottom: 0; }
.rc-bars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.rc-bars li { display: grid; grid-template-columns: 64px 1fr 44px; gap: 8px; align-items: center; font-size: calc(14px*var(--kt)); }
.rc-bars i { height: 14px; border-radius: 999px; background: var(--cream2); overflow: hidden; }
.rc-bars i b { display: block; height: 100%; border-radius: 999px; background: var(--art); }
.rc-bars em { font-style: normal; font-family: var(--maru); font-weight: 900; color: var(--art-d); }
.rc-stat { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 18px; background: var(--art-l); border-radius: 18px; }
.rc-stat b { font-family: var(--maru); font-weight: 900; font-size: max(17px, calc(54px*var(--k))); line-height: 1; color: var(--art-d); letter-spacing: -.01em; }
.rc-stat b small { font-size: .42em; margin-left: 2px; letter-spacing: 0; }
.rc-stat span { flex: 1 1 160px; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); line-height: 1.5; }
@media (max-width: 900px) { .rc-charm { grid-template-columns: 1fr; } }
.rc-study { align-items: start; }
.rc-hist { list-style: none; margin: 0; padding: 0; border-top: 1.5px dashed var(--line); }
.rc-hist li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--line); font-size: calc(15px*var(--kt)); }
.rc-hist b { font-family: var(--maru); color: var(--art-d); }
.rc-study .lcard { margin-top: 16px; }
.rc-lunch { margin-bottom: calc(26px*var(--k)); }
.rc-lunch h3 { margin-bottom: 10px; }
.rc-lunch h3 .badge { font-size: calc(15px*var(--kt)); padding: 3px 16px; }
.rc-lunch .photo-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 680px) { .rc-lunch .photo-grid { grid-template-columns: 1fr 1fr; } }
.rc-final { position: relative; text-align: center; background: var(--art-l); box-shadow: none; padding-top: calc(30px*var(--k)); }
.rc-final h2 { font-size: max(17px, calc(26px*var(--k))); }
.rc-final-wk { width: 92px; margin: -6px auto 4px; display: block; }
.rc-final .eyebrow-s { color: var(--art-d); }
.rc-lunch .photo-grid img.pano { grid-column: span 2; aspect-ratio: 5 / 2; }
@media (max-width: 680px) { .rc-greet .ph-round { max-width: 260px; margin: 0 auto; } }
.entry-ways .way b em { font-style: normal; display: inline-block; background: var(--yellow); color: var(--ink); border-radius: 999px; font-size: 12px; padding: 0 8px; margin-right: 6px; vertical-align: 2px; }
.entry-ways .way small { line-height: 1.6; }
@media (max-width: 560px) { .ways.entry-ways .way small br { display: inline; } }
.edu-cert { display: grid; grid-template-columns: 220px 1fr; gap: calc(24px*var(--k)); align-items: center; background: #fff; border-radius: 26px; padding: calc(22px*var(--k)) calc(24px*var(--k)); box-shadow: var(--shadow-s); margin: 16px 0; }
.edu-thumb { position: relative; display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 20px rgba(60, 40, 20, .16); outline: 1px solid var(--line); }
.edu-thumb img { display: block; width: 100%; height: auto; margin: 0 !important; border-radius: 0 !important; }
.edu-zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow-s); }
.edu-zoom svg { width: 14px; height: 14px; }
.edu-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.edu-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); color: var(--blue-d); }
.edu-tag img { width: 40px; height: auto; margin: 0 !important; }
.edu-h { display: block; font-family: var(--maru); font-size: calc(20px*var(--kt)); line-height: 1.55; }
.edu-dl { display: grid; gap: 6px; width: 100%; }
.edu-dl > span { display: grid; grid-template-columns: 4.5em 1fr; gap: 8px; font-size: calc(14.5px*var(--kt)); line-height: 1.65; padding-bottom: 6px; border-bottom: 1.5px dashed var(--line); }
.edu-dl i { font-style: normal; font-weight: 700; color: var(--ink2); }
.edu-note { display: block; font-size: max(11px,calc(13px*var(--kt))); line-height: 1.7; color: var(--ink2); }
.edu-body .btn svg { width: 18px; height: 18px; }
@media (max-width: 680px) { .edu-cert { grid-template-columns: 1fr; } .edu-thumb { max-width: 240px; margin: 0 auto; } }
.ui-block.edu-logo { display: block; max-width: 300px; margin: 12px auto; }
.ui-block.edu-logo img { width: 100%; display: block; }
.hero-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: calc(14px*var(--k)) 0 0; padding: 0; list-style: none; }
.hero-areas .lab { font-size: max(11px,calc(13px*var(--kt))); font-weight: 700; color: var(--ink2); margin-right: 2px; }
.hero-areas a { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); box-shadow: var(--shadow-s); text-decoration: none; color: var(--ink); font-family: var(--maru); font-weight: 700; font-size: calc(14.5px*var(--kt)); }
.hero-areas a svg { width: 14px; height: 14px; color: var(--blue-d); }
.hero-areas a:hover { border-color: var(--blue); color: var(--blue-d); }
@media (max-width: 680px) { .hero-areas { gap: 6px; } .hero-areas .lab { flex-basis: 100%; margin: 0 0 -2px; } .hero-areas a { padding: 0 9px 0 11px; font-size: calc(14px*var(--kt)); } .hero-areas a svg { width: 12px; height: 12px; } }
.v-one { display: none; }
[data-sub="soroban"] .v-both, [data-sub="shodo"] .v-both { display: none; }
[data-sub="soroban"] a.v-one[data-sub="soroban"], [data-sub="shodo"] a.v-one[data-sub="shodo"] { display: inline-flex; }
[data-sub="soroban"] p.v-one[data-sub="soroban"], [data-sub="shodo"] p.v-one[data-sub="shodo"] { display: flex; }
.v-or.v-one a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-d); font-weight: 700; }
.v-or.v-one svg { width: 16px; height: 16px; }
.seg button small { font-family: var(--sans); font-weight: 500; font-size: 12px; opacity: .8; margin-left: 4px; }
.tg-list { list-style: none; margin: 0; padding: 12px 16px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); display: grid; gap: 6px; font-size: calc(14px*var(--kt)); line-height: 1.7; }
.tg-list li { display: flex; gap: 8px; align-items: flex-start; }
.tg-list svg { color: var(--blue-d); width: 20px; height: 20px; flex: none; margin-top: 3px; }
.tg-list b { font-family: var(--maru); }
.tg-after { margin-top: 28px; padding-top: 18px; border-top: 1.5px dashed var(--line); }
.tg-after-h { font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); margin: 0 0 10px; }
.prose .tg-after .lcard { margin: 6px 0 14px; }
.f-mapwrap { margin: 16px 0 4px; }
.f-maphd { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.f-maphd b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--maru); font-size: calc(18px*var(--kt)); }
.f-maphd b svg { width: 20px; height: 20px; color: var(--blue-d); }
.f-maphint { font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); }
.f-map-toggle { margin-left: auto; min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink2); font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(13px*var(--kt))); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.f-mapwrap.closed .f-map, .f-mapwrap.closed .f-legend { display: none; }
.f-map .ks-two { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 500; background: rgba(58, 44, 37, .78); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.f-map { height: 380px; border-radius: 18px; overflow: hidden; background: #E9EEF2; box-shadow: var(--shadow-s); position: relative; z-index: 0; }
@media (max-width: 680px) { .f-map { height: 440px; } }
.f-map-err { padding: 20px; text-align: center; color: var(--ink2); }
.f-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 2px 0; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); }
.f-legend span { display: inline-flex; align-items: center; gap: 5px; }
.f-legend .note { margin-left: auto; }
.f-legend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.f-legend i.soroban, .ks-pin-soroban i { background: var(--soroban); }
.f-legend i.shodo, .ks-pin-shodo i { background: var(--shodo); }
.f-legend i.art, .ks-pin-art i { background: var(--art); }
.f-legend i.multi, .ks-pin-multi i { background: var(--blue-d); }
.ks-pin { background: none; border: 0; }
.ks-pin i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 10px 12px; line-height: 1.5; }
.ks-pop { font-size: 13.5px; }
.ks-pop b { display: block; font-family: var(--maru); font-size: 15px; margin-bottom: 2px; }
.ks-pop small { display: block; color: var(--ink2); margin-bottom: 6px; }
.ks-pop a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); padding: 5px 0; border-top: 1px dashed var(--line); }
.ks-pop .badge { font-size: 11px; }
.cc-poster { position: relative; background: linear-gradient(135deg, var(--shodo-l), #fff 70%); border-radius: 30px; padding: calc(30px*var(--k)) calc(32px*var(--k)); box-shadow: var(--shadow-s); text-align: center; overflow: hidden; }
.cc-poster::before { content: ""; position: absolute; inset: 10px; border: 2px dashed #BFE3CF; border-radius: 24px; pointer-events: none; }
.cc-no { position: relative; display: inline-block; background: var(--shodo); color: #fff; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); border-radius: 999px; padding: 3px 16px; margin: 0 0 12px; }
.cc-poster h2 { position: relative; font-size: max(17px, calc(38px*var(--k))); letter-spacing: .06em; color: var(--shodo-d); margin: 0 0 16px; }
.cc-poster h2 span { display: block; font-size: calc(16px*var(--kt)); letter-spacing: .14em; color: var(--ink2); margin-top: 4px; }
.cc-poster dl { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; max-width: 360px; margin: 0 auto; text-align: left; font-size: calc(15.5px*var(--kt)); }
.cc-poster dt { font-family: var(--maru); font-weight: 700; color: var(--shodo-d); }
.cc-poster dt::after { content: "："; }
.cc-poster dd { margin: 0; }
.cc-result { position: relative; margin: calc(20px*var(--k)) 0 0; }
.cc-next { position: relative; max-width: 420px; margin: calc(14px*var(--k)) auto 0; background: #fff; border: 1.5px dashed #BFE3CF; border-radius: 14px; padding: 8px 14px; font-size: calc(14px*var(--kt)); color: var(--ink2); }
.sec-head h2 small { display: block; font-size: .5em; font-weight: 700; color: var(--ink2); margin-top: 6px; letter-spacing: .04em; }
.kadai-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(14px*var(--k)); }
.kadai-grid li { background: #fff; border-radius: 18px; padding: calc(16px*var(--k)) calc(10px*var(--k)) calc(14px*var(--k)); box-shadow: var(--shadow-s); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kadai-grade { font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(13px*var(--kt))); background: var(--shodo-l); color: var(--shodo-d); border-radius: 999px; padding: 1px 12px; }
.kadai { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; min-height: 150px; padding: 14px 10px; background: #FFFEFA; outline: 1px solid var(--line); font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: .12em; color: #1a1a1a; }
.kadai-grid a { display: inline-flex; align-items: center; gap: 3px; font-size: max(11px,calc(13px*var(--kt))); font-weight: 700; text-decoration: none; color: var(--shodo-d); }
.kadai-grid a svg { transform: rotate(-90deg); width: 16px; height: 16px; }
@media (max-width: 900px) { .kadai-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .kadai-grid { grid-template-columns: repeat(2, 1fr); } .kadai { font-size: 34px; min-height: 130px; } }
.cc-rules svg { color: var(--shodo); }
.cc-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14px*var(--k)); }
.cc-awards li { background: #fff; border-radius: 22px; padding: calc(20px*var(--k)) calc(18px*var(--k)); box-shadow: var(--shadow-s); text-align: center; }
.cc-awards li.top { background: linear-gradient(180deg, #FFF6CF, #fff); box-shadow: 0 0 0 3px var(--yellow-s); }
.cc-awards .ic { width: 50px; height: 50px; border-radius: 50%; background: var(--shodo-l); color: var(--shodo-d); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.cc-awards .ic svg { width: 26px; height: 26px; }
.cc-awards li.top .ic { background: var(--yellow); color: #8a6a00; }
.cc-awards b { display: block; font-family: var(--maru); font-size: calc(20px*var(--kt)); margin-bottom: 4px; }
.cc-awards li > span:last-child { font-size: calc(14px*var(--kt)); color: var(--ink2); line-height: 1.7; }
@media (max-width: 680px) { .cc-awards { grid-template-columns: 1fr; } }
.cc-special { margin-top: calc(16px*var(--k)); background: var(--shodo-l); border-radius: 20px; padding: calc(16px*var(--k)) calc(20px*var(--k)); }
.cc-special-h { margin: 0 0 8px; font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); color: var(--shodo-d); }
.cc-special-h small { font-family: var(--sans); font-weight: 400; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); margin-left: 6px; }
.cc-special .chip { background: #fff; }
.cc-n { font-family: var(--sans); font-weight: 500; font-size: calc(14px*var(--kt)); color: var(--ink2); margin-left: 10px; }
.cc-paper { display: block; background: #FFFEFA; outline: 1px solid var(--line); border-radius: 4px; aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 0 3px 10px rgba(60, 40, 20, .08); }
.cc-paper img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 !important; }
.cc-paper.none { display: flex; align-items: center; justify-content: center; color: var(--ink3); font-size: 13px; }
.cc-grand { display: grid; grid-template-columns: 260px 1fr; gap: calc(26px*var(--k)); align-items: center; background: linear-gradient(135deg, #FFF6CF, #fff 70%); border-radius: 30px; padding: calc(26px*var(--k)) calc(28px*var(--k)); box-shadow: 0 0 0 3px var(--yellow-s); }
.cc-paper.grand { aspect-ratio: 3 / 4; }
.cc-grand-tx { display: flex; flex-direction: column; gap: 8px; }
.cc-grand-tx b { font-family: var(--maru); font-size: max(17px, calc(30px*var(--k))); line-height: 1.3; }
.cc-grand-tx > span:last-child { font-size: calc(15.5px*var(--kt)); color: var(--ink2); }
.cc-grand-tx .badge { align-self: flex-start; font-size: calc(14px*var(--kt)); padding: 3px 14px; }
@media (max-width: 680px) { .cc-grand { grid-template-columns: 1fr; text-align: center; } .cc-paper.grand { max-width: 220px; margin: 0 auto; } .cc-grand-tx { align-items: center; } .cc-grand-tx .badge { align-self: center; } }
.cc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: calc(18px*var(--k)); }
.cc-photos figure { margin: 0; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow-s); }
.cc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.cc-photos figcaption { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); text-align: center; padding: 6px 0 2px; }
.cc-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: calc(14px*var(--k)) calc(12px*var(--k)); margin-bottom: calc(26px*var(--k)); }
.cc-works.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .cc-works.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .cc-works, .cc-works.six { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; } }
@media (max-width: 420px) { .cc-works, .cc-works.six { grid-template-columns: repeat(2, 1fr); } }
.cc-work { margin: 0; text-align: center; }
.cc-work figcaption { margin-top: 6px; line-height: 1.4; }
.cc-work figcaption b { display: block; font-family: var(--maru); font-size: calc(14.5px*var(--kt)); }
.cc-work figcaption small { display: block; font-size: max(11px,calc(11.5px*var(--kt))); color: var(--ink2); }
.cc-sp-h { display: flex; align-items: center; gap: 10px; font-size: max(17px, calc(20px*var(--k))); margin: calc(10px*var(--k)) 0 calc(14px*var(--k)); }
.cc-sp-h small { font-family: var(--sans); font-weight: 500; font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); }
.cc-list { background: #fff; border-radius: 20px; box-shadow: var(--shadow-s); overflow: hidden; }
.cc-list summary { cursor: pointer; padding: calc(16px*var(--k)) calc(22px*var(--k)); font-family: var(--maru); font-weight: 700; font-size: calc(16.5px*var(--kt)); list-style: none; display: flex; align-items: center; gap: 8px; }
.cc-list summary::before { content: "＋"; color: var(--shodo-d); font-weight: 900; }
.cc-list[open] summary::before { content: "－"; }
.cc-list summary::-webkit-details-marker { display: none; }
.cc-list .prose { padding: 0 calc(14px*var(--k)) calc(16px*var(--k)); overflow-x: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: calc(13.5px*var(--kt)); }
.cc-table th, .cc-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.cc-table th { background: var(--shodo-l); color: var(--shodo-d); font-weight: 700; }
.design-body > :not(section):not(.wp-block-html):not(div.sec):not(div.sec-s) { width: min(860px, 100% - 32px); margin-inline: auto; }
.design-body > :not(section):not(.wp-block-html):last-child { margin-bottom: 60px; }
.wp-block-buttons.ks-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 999px; font-family: var(--maru); font-weight: 700; font-size: calc(16.5px*var(--kt)); text-decoration: none; background: var(--blue-d); color: #fff; box-shadow: 0 5px 0 #005485; }
.wp-block-button.ks-btn-line .wp-block-button__link { background: var(--line-g); box-shadow: 0 5px 0 #04913E; }
.wp-block-button.is-style-outline .wp-block-button__link { background: #fff; color: var(--blue-d); border: 2px solid var(--blue-d); box-shadow: none; }
.wp-block-button .wp-block-button__link:hover { color: #fff; transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--blue-d); }
@media (max-width: 680px) { .wp-block-buttons.ks-buttons > .wp-block-button { flex: 1 1 100%; } .wp-block-buttons.ks-buttons .wp-block-button__link { width: 100%; } }
.wp-block-columns.ks-cards { gap: 16px; margin: 1.4em 0; }
.wp-block-columns.ks-cards > .wp-block-column { background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow-s); }
.wp-block-columns.ks-cards h3 { border: 0; padding: 0; margin: 0 0 .4em; font-size: max(17px, calc(18px*var(--k))); }
.wp-block-columns.ks-cards p { font-size: calc(15px*var(--kt)); color: var(--ink2); margin: 0; }
.wp-block-media-text.ks-media { gap: 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-s); margin: 1.4em 0; }
.wp-block-media-text.ks-media img { border-radius: 0; }
.wp-block-media-text.ks-media .wp-block-media-text__content { padding: 22px 26px; }
.wp-block-media-text.ks-media h3 { border: 0; padding: 0; margin-top: 0; }
.wp-block-group.ks-note { margin: 1.4em 0; padding: 16px 20px; border-radius: 16px; }
.wp-block-group.ks-note > :last-child { margin-bottom: 0; }
.wp-block-details.faq { margin: 0 0 12px; }
.wp-block-details.faq > summary { list-style: none; }
.wp-block-details.faq > :not(summary) { padding: 0 calc(22px*var(--k)) 4px 64px; font-size: calc(15.5px*var(--kt)); }
.wp-block-details.faq > :last-child { padding-bottom: 18px; margin-bottom: 0; }
@media (max-width: 560px) { .wp-block-details.faq > :not(summary) { padding-left: 22px; } }
.wp-block-table.ks-fee table { max-width: 560px; }
.wp-block-table.ks-fee td:last-child { text-align: right; font-family: var(--maru); font-weight: 700; white-space: nowrap; }
.wp-block-gallery.ks-gallery img { border-radius: 14px; }
.wp-block-group.ks-sec-head { text-align: center; margin: 2em 0 1.2em; }
.ks-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .14em; color: var(--blue-d); }
.prose .ks-sec-head h2 { border: 0; padding: 0; margin-top: 0; }
.has-ks-blue-color { color: var(--blue-d); } .has-ks-soroban-color { color: var(--soroban); } .has-ks-shodo-color { color: var(--shodo); } .has-ks-art-color { color: var(--art); } .has-ks-ink-color { color: var(--ink); }
.has-ks-yellow-background-color { background: var(--yellow); } .has-ks-cream-background-color { background: var(--cream); } .has-ks-white-background-color { background: #fff; } .has-ks-blue-background-color { background: var(--blue-d); }
.prose .wp-block-table.ks-fee tr, .design-body .wp-block-table.ks-fee tr { display: table-row !important; }
.prose .wp-block-table.ks-fee td, .design-body .wp-block-table.ks-fee td { display: table-cell !important; width: auto !important; }
.at-lead { display: grid; grid-template-columns: 200px 1fr; gap: calc(18px*var(--k)) calc(26px*var(--k)); background: #fff; border-radius: 28px; padding: calc(24px*var(--k)) calc(26px*var(--k)); box-shadow: var(--shadow-s); margin-bottom: calc(22px*var(--k)); }
.at-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; display: block; }
.at-role { margin: 0 0 2px; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); color: var(--art-d); }
.at-lead h3, .at-card h3 { font-size: max(17px, calc(24px*var(--k))); margin: 0 0 6px; }
.at-lead h3 small, .at-card h3 small { display: block; font-family: var(--sans); font-weight: 500; font-size: max(11px,calc(12px*var(--kt))); letter-spacing: .1em; color: var(--ink3); }
.at-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.at-tags .chip { background: var(--art-l); border-color: transparent; color: var(--art-d); font-weight: 700; }
.at-career { font-size: calc(13.5px*var(--kt)); color: var(--ink2); margin: 0 0 10px; }
.at-works { display: flex; gap: 8px; }
.at-works img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; display: block; }
.at-lead .at-qa { grid-column: 1 / -1; }
.at-qa { margin: 0; background: var(--art-l); border-radius: 18px; padding: calc(14px*var(--k)) calc(18px*var(--k)); font-size: calc(14.5px*var(--kt)); line-height: 1.85; }
.at-qa dt { font-family: var(--maru); font-weight: 700; color: var(--art-d); margin-top: 10px; }
.at-qa dt:first-child { margin-top: 0; }
.at-qa dd { margin: 2px 0 0; }
.at-qa dd p { margin: 0 0 .6em; }
.at-qa dd p:last-child { margin-bottom: 0; }
.at-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px*var(--k)); }
.at-card { background: #fff; border-radius: 24px; padding: calc(18px*var(--k)) calc(18px*var(--k)); box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 12px; }
.at-hd { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.at-hd img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; display: block; }
.at-hd .badge { background: var(--blue-d); color: #fff; margin-bottom: 4px; }
.at-hd h3 { font-size: max(17px, calc(19px*var(--k))); }
.at-hd p { margin: 0; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--ink2); line-height: 1.6; }
.at-card.okazaki .at-qa { background: #FDE6EE; } .at-card.hamamatsu .at-qa { background: #F6EBCB; } .at-card.toyohashi .at-qa { background: #DCEBF2; }
@media (max-width: 960px) { .at-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .at-lead { grid-template-columns: 1fr; } .at-photo { max-width: 200px; margin: 0 auto; } .at-body { text-align: center; } .at-tags, .at-works { justify-content: center; } }
.lang-en, .lang-vi {
}
.lang-en, .lang-vi { --maru: "Be Vietnam Pro", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --sans: "Be Vietnam Pro", "Noto Sans JP", "Hiragino Sans", sans-serif; }
.lang-en h1, .lang-en h2, .lang-en h3, .lang-en .btn, .lang-en .badge, .lang-en .chip { letter-spacing: .01em; }
.lang-en .hero-b h1.subj { letter-spacing: .005em; }
.lang-en, .lang-vi { letter-spacing: 0; line-height: 1.75; overflow-wrap: break-word; }
.lang-en h1, .lang-en h2, .lang-en h3, .lang-vi h1, .lang-vi h2, .lang-vi h3 { letter-spacing: 0; line-height: 1.3; }
.lang-en .sec-head .eyebrow, .lang-vi .sec-head .eyebrow { letter-spacing: .06em; }
.lang-en .gnav > a, .lang-en .gnav .item > a, .lang-vi .gnav > a, .lang-vi .gnav .item > a { font-size: calc(14.5px*var(--kt)); padding-inline: calc(10px*var(--k)); }
.lang-vi .gnav > a, .lang-vi .gnav .item > a { font-size: calc(14px*var(--kt)); }
.lang-en .brand small, .lang-vi .brand small { letter-spacing: 0; }
.lang-en .hero h1, .lang-vi .hero h1 { letter-spacing: 0; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; font-size: 13px; font-weight: 700; line-height: 1; }
.lang-switch a, .lang-switch span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 30px; padding: 0 9px; border-radius: 999px; text-decoration: none; color: var(--ink2); font-family: var(--sans); }
.lang-switch a:hover { background: var(--blue-l); color: var(--blue-d); }
.lang-switch .on { background: var(--blue-d); color: #fff; }
.head-lang { display: none; }
@media (min-width: 1280px) { .head-lang { display: inline-flex; } }
.drawer-lang { display: flex; justify-content: center; width: fit-content; margin: 2px auto 0; font-size: 14px; }
.drawer-lang a, .drawer-lang span { min-height: 38px; min-width: 64px; }
.foot-lang { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.foot-lang a { color: #DCE7F3; } .foot-lang a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.foot-lang .on { background: #fff; color: #1E3A5F; }
.wpcf7 .tr { display: inline-block; margin-left: .5em; font-size: .86em; font-weight: 500; color: var(--blue-d); font-family: var(--sans); }
.wpcf7 .wpcf7-list-item-label + .tr, .wpcf7 .wpcf7-list-item .tr { margin-left: .3em; }
.mfm-floating-menu .tr { display: none; }
.finder-lang-note, .news-lang-note { font-size: 13px; color: var(--ink2); background: #fff; border: 1.5px dashed var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0 14px; }
.news-lang-note { text-align: center; }
.lang-en p br.pc, .lang-vi p br.pc, .lang-en li br.pc, .lang-vi li br.pc { display: none; }
@media (max-width: 1799px) { .lang-en .head-tel, .lang-vi .head-tel { display: none; } }
@media (max-width: 1599px) { .lang-vi .head-cta .btn-line { display: none; } }
@media (max-width: 1365px) { .lang-vi .gnav > a, .lang-vi .gnav .item > a { font-size: 13.5px; padding-inline: 8px; } }
.courses.yt-courses { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin: 0 auto; }
.yt-top { gap: calc(18px*var(--k)); }
.yt-top .yt-play { width: calc(120px*var(--k)); flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.yt-top .yt-play svg { width: 100%; height: auto; }
.yt-top img.yt-wk { height: 84%; width: auto; }
.yt-list { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 6px; }
.yt-list li { display: flex; gap: 8px; align-items: flex-start; font-size: calc(15px*var(--kt)); line-height: 1.6; }
.yt-list li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--shodo); }
.course.soroban .yt-list li svg { color: var(--soroban); }
.yt-note { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); margin: 0 0 8px; }
.yt-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; counter-reset: yt; }
.yt-steps li { position: relative; background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); padding: 16px 18px 16px 64px; counter-increment: yt; }
.yt-steps li::before { content: counter(yt); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--maru); font-weight: 900; display: grid; place-items: center; }
.yt-steps b { display: block; font-family: var(--maru); font-size: calc(17px*var(--kt)); margin-bottom: 2px; }
.yt-steps span { font-size: calc(15px*var(--kt)); color: var(--ink2); }
@media (max-width: 680px) { .courses.yt-courses { grid-template-columns: 1fr; } }
.area-text { font-size: calc(16px*var(--kt)); line-height: 2; margin: 0; }
.area-facts { list-style: none; margin: 0 auto calc(30px*var(--k)); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 980px; }
.area-facts li { background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); padding: 14px 12px; text-align: center; }
.area-facts b { display: block; font-family: var(--maru); font-weight: 900; font-size: calc(26px*var(--kt)); line-height: 1.3; color: var(--blue-d); }
.area-facts span { font-size: max(11px,calc(13px*var(--kt))); color: var(--ink2); }
@media (max-width: 680px) { .area-facts { grid-template-columns: repeat(2, 1fr); } }
.finder.only .f-reset { display: none !important; }
.area-schools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.area-schools li { background: #fff; border-radius: 16px; box-shadow: var(--shadow-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.area-schools .sc { display: flex; align-items: center; gap: 6px; font-family: var(--maru); font-weight: 700; font-size: calc(16px*var(--kt)); }
.area-schools .sc svg { width: 18px; height: 18px; color: var(--blue-d); flex: none; }
.area-schools .to { display: flex; flex-wrap: wrap; gap: 6px; }
.area-schools .to a { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--cream); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: calc(14px*var(--kt)); }
.area-schools .to a small { font-weight: 500; color: var(--ink2); }
@media (max-width: 680px) { .area-schools { grid-template-columns: 1fr; } }
.area-links { margin: 18px 0 0; display: grid; gap: 10px; }
.area-links-t { font-family: var(--maru); font-weight: 700; margin: 0; }
.area-links .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.area-links .row a, .area-links .row .on { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: calc(14px*var(--kt)); }
.area-links .row .on { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.ks-soroban { --bh: 32px; --beam: 8px; --wood: #6B4226; --wood-d: #4A2C18; background: #fff; border-radius: 24px; padding: 20px 18px 22px; box-shadow: 0 10px 0 rgba(0,0,0,.08); max-width: 560px; margin: 0 auto; color: var(--ink); }
.ks-soroban .sb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ks-soroban .sb-value { display: flex; align-items: baseline; gap: 10px; }
.ks-soroban .sb-value small { font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); color: var(--ink2); }
.ks-soroban .sb-value b { font-family: var(--maru); font-weight: 900; font-size: 44px; line-height: 1; color: var(--soroban-d); font-variant-numeric: tabular-nums; min-width: 2ch; }
.ks-soroban .sb-reset { flex: none; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--cream2); color: var(--ink); font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); cursor: pointer; box-shadow: 0 4px 0 var(--sand); }
.ks-soroban .sb-reset:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sand); }
.sb-frame { position: relative; display: flex; justify-content: center; padding: 12px 10px 30px; background: #FBF1DF; border: 10px solid var(--wood); border-radius: 16px; box-shadow: inset 0 0 0 2px var(--wood-d); }
.sb-beam { position: absolute; left: 0; right: 0; top: calc(12px + 2 * var(--bh)); height: var(--beam); background: var(--wood); z-index: 1; }
.sb-rod { position: relative; flex: 1 1 0; max-width: 76px; min-width: 0; height: calc(7 * var(--bh) + var(--beam)); }
.sb-rod::before { content: ""; position: absolute; left: 50%; top: 0; height: 100%; width: 4px; margin-left: -2px; background: var(--wood-d); border-radius: 2px; }
.sb-rod.unit::after { content: ""; position: absolute; left: 50%; top: calc(2 * var(--bh) + var(--beam) / 2); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; z-index: 3; }
.sb-bead { position: absolute; left: 3px; right: 3px; height: calc(var(--bh) - 2px); padding: 0; border: 0; cursor: pointer; z-index: 2; background: linear-gradient(180deg, #E2C29B 0%, #C49363 55%, #A9774A 100%); clip-path: polygon(0 50%, 20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%); transition: top .16s ease-out, background .16s; -webkit-tap-highlight-color: transparent; }
.sb-bead:hover { filter: brightness(1.06); }
.sb-bead:focus-visible { outline: none; background: linear-gradient(180deg, #BFE8FF 0%, var(--blue) 60%, var(--blue-d) 100%); }
.sb-bead.on { background: linear-gradient(180deg, #FFB06E 0%, var(--soroban) 55%, var(--soroban-d) 100%); }
.sb-bead.up { top: 0; }
.sb-bead.up.on { top: var(--bh); }
.sb-bead.lo { top: calc(2 * var(--bh) + var(--beam) + var(--slot, 1) * var(--bh) + 1px); }
.sb-place { position: absolute; left: 0; right: 0; top: calc(100% + 6px); text-align: center; font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(13px*var(--kt))); color: var(--wood); line-height: 1.2; }
.ks-soroban .sb-hint { margin: 10px 0 0; text-align: center; font-size: calc(14px*var(--kt)); color: var(--ink2); }
.sb-quiz { margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--line); text-align: center; }
.sb-levels { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--cream); }
.sb-levels button { border: 0; border-radius: 999px; padding: 8px 16px; background: transparent; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); color: var(--ink2); cursor: pointer; }
.sb-levels button.on { background: var(--soroban); color: #fff; }
.sb-q { margin: 12px 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font-family: var(--maru); font-weight: 700; }
.sb-q b { font-size: 40px; line-height: 1.1; color: var(--blue-d); font-variant-numeric: tabular-nums; }
.sb-msg { display: none; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; font-family: var(--maru); font-weight: 900; font-size: calc(20px*var(--kt)); color: var(--shodo-d); }
.sb-msg.show { display: flex; animation: sbPop .35s ease-out; }
.sb-msg img { width: 46px; height: auto; }
.sb-msg span { text-align: left; line-height: 1.35; }
.sb-msg span small { display: block; margin-top: 2px; font-size: calc(15px*var(--kt)); font-weight: 700; color: var(--ink2); }
.sb-msg.streak span { color: var(--soroban-d); }   
.sb-msg.mile span { color: var(--blue-d); font-size: 1.12em; }   
.sb-next { margin-top: 12px; border: 0; border-radius: 999px; padding: 12px 26px; background: var(--blue-d); color: #fff; font-family: var(--maru); font-weight: 700; font-size: calc(15px*var(--kt)); cursor: pointer; box-shadow: 0 5px 0 #005787; }
.sb-quiz.done .sb-next { background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 #D9C800; }
.sb-next:active { transform: translateY(2px); }
@keyframes sbPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 680px) { .ks-soroban { --bh: 40px; } .ks-soroban .sb-value b { font-size: 50px; } .sb-q b { font-size: 46px; } .sb-bead { left: 2px; right: 2px; } }
@media (max-width: 420px) { .ks-soroban { padding: 16px 12px 18px; } .ks-soroban .sb-reset { padding: 9px 12px; } .sb-frame { border-width: 8px; padding-inline: 4px; } }
@media (prefers-reduced-motion: reduce) { .sb-bead { transition: none; } .sb-msg.show { animation: none; } }
.sec.sb-sec { background: var(--soroban-d); }
.sb-sec .sec-head h2, .sb-sec .sec-head p { color: #fff; }
.sb-sec .sec-head .eyebrow { color: #FFE2C6; }
.sb-sec .sb-after { text-align: center; margin: calc(28px*var(--k)) 0 0; }
.article .ks-soroban { box-shadow: 0 0 0 2px var(--line); margin: 20px auto 8px; }
.sb-promo { display: flex; align-items: center; gap: calc(24px*var(--k)); margin: calc(48px*var(--k)) 0 8px; padding: calc(28px*var(--k)) calc(32px*var(--k)); background: var(--soroban-d); border-radius: 28px; color: #fff; }
.sb-promo img { flex: none; width: calc(120px*var(--k)); height: auto; }
.prose .sb-promo h2, .sb-promo h2 { color: #fff; margin: 0 0 8px; font-size: max(17px, calc(28px*var(--k))); border: 0; padding: 0; }
.prose .sb-promo h2::before, .prose .sb-promo h2::after { display: none; }
.sb-promo p { margin: 0 0 16px; color: #fff; }
.sb-promo .sb-promo-eb { margin: 0 0 4px; font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .12em; color: #FFE2C6; }
.prose .sb-promo a.btn { color: var(--ink); text-decoration: none; }
@media (max-width: 680px) { .sb-promo { flex-direction: column; text-align: center; padding: 28px 22px; } .sb-promo img { width: 110px; } }
.play-mini-wrap { text-align: center; margin: calc(18px*var(--k)) 0 0; }
.play-mini { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 16px 6px 6px; background: #fff; border: 2px solid var(--soroban-l); border-radius: 999px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-s); text-align: left; line-height: 1.35; transition: transform .15s, border-color .15s; }
.play-mini:hover { transform: translateY(-2px); border-color: var(--soroban); color: var(--ink); }
.play-mini img { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: var(--soroban-l); }
.play-mini b { display: block; font-family: var(--maru); font-weight: 700; font-size: calc(15px*var(--kt)); }
.play-mini small { display: block; font-size: max(11px,calc(12.5px*var(--kt))); color: var(--soroban-d); }
.play-mini .go { display: inline-flex; color: var(--soroban); }
.play-mini .go svg { width: 18px; height: 18px; }
.ks-training { max-width: 880px; margin: 0 auto; }
.ks-training [hidden] { display: none !important; }
body:has(.ks-training) .mfm-floating-menu { display: none !important; }   
body:has(.ks-training) .site-foot { padding-bottom: 40px; }
.tr-gate-hero { display: flex; align-items: center; gap: calc(22px*var(--k)); padding: calc(28px*var(--k)) calc(30px*var(--k)); background: var(--soroban-d); color: #fff; border-radius: 28px; }
.tr-gate-hero img { width: calc(120px*var(--k)); height: auto; flex: none; }
.tr-gate-hero h2 { color: #fff; font-size: max(17px, calc(32px*var(--k))); margin: 0 0 8px; }
.tr-gate-hero p { margin: 0; }
.tr-eb { font-family: var(--maru); font-weight: 700; font-size: calc(14px*var(--kt)); letter-spacing: .12em; color: #FFE2C6; margin-bottom: 4px !important; }
.tr-feat { list-style: none; padding: 0; margin: calc(22px*var(--k)) 0; display: grid; gap: 12px; }
.tr-feat li { background: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: var(--shadow-s); }
.tr-feat b { display: block; font-family: var(--maru); font-size: calc(18px*var(--kt)); color: var(--soroban-d); }
.tr-feat span { color: var(--ink2); font-size: calc(15px*var(--kt)); }
.tr-unlock { background: #fff; border: 3px solid var(--soroban); border-radius: 22px; padding: 20px 22px; }
.tr-unlock label { font-family: var(--maru); font-weight: 700; font-size: calc(17px*var(--kt)); }
.tr-unlock-row { display: flex; gap: 10px; margin-top: 8px; }
.tr-unlock input { flex: 1; min-width: 0; font-size: 22px; letter-spacing: .12em; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; text-transform: uppercase; font-family: var(--maru); }
.tr-unlock-msg { margin: 8px 0 0; color: #b32d2e; font-weight: 700; min-height: 1.5em; }
.tr-howto { margin-top: calc(24px*var(--k)); }
.tr-howto h3 { font-size: calc(20px*var(--kt)); margin-bottom: 6px; }
@media (max-width: 680px) { .tr-gate-hero { flex-direction: column; text-align: center; padding: 28px 22px; } }
body.tr-on .site-head, body.tr-on .page-hero, body.tr-on .subnav, body.tr-on .site-foot { display: none !important; }
body.tr-on .design-body > .sec-s:first-child { padding: 0 0 56px; }
body.tr-on .wrap-n { width: min(880px, 100% - 24px); }
.tr-app { --mc: #B9520E; --mc2: #7E3606; font-family: var(--sans); line-height: 1.6; padding-bottom: env(safe-area-inset-bottom); }
.tr-app button { font-family: inherit; }
.tr-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 66px; margin: 0 -12px 6px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: rgba(255, 248, 234, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tr-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-family: var(--maru); font-weight: 900; font-size: 21px; }
.tr-brand:hover { color: var(--ink); }
.tr-brand img { width: 40px; height: auto; }
.tr-title { flex: 1; min-width: 0; margin: 0; font-size: 22px; text-align: center; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-back { flex: none; border: 0; background: var(--mc); color: #fff; border-radius: 999px; padding: 9px 18px 9px 13px; font-family: var(--maru); font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 var(--mc2); cursor: pointer; }
.tr-back span { font-size: 22px; line-height: 1; }
.tr-back:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mc2); }
.mc-ink .tr-back, .mc-ink .tr-pad .k-ok, .mc-ink .tr-stage .no, .mc-ink .tr-stage em, .mc-ink .tr-res, .mc-ink .tr-sumchips li, .mc-ink .tr-rtabs button.on { color: var(--ink); }
.tr-gear { flex: none; margin-left: auto; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #fff; box-shadow: var(--shadow-s); font-size: 26px; line-height: 1; color: var(--ink2); cursor: pointer; }
.tr-view { min-height: 60vh; }
.tr-app .tr-link { border: 0; background: none; color: var(--ink2); text-decoration: underline; cursor: pointer; font-size: 15px; padding: 6px; }
.tr-hero { position: relative; display: flex; align-items: flex-end; gap: 8px; min-height: 220px; margin-top: 6px; padding: 24px 0 0 24px; background: var(--soroban-d); color: #fff; border-radius: 30px; overflow: hidden; }
.tr-hero::before { content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.tr-hero::after { content: ""; position: absolute; left: -40px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.tr-hero-txt { position: relative; z-index: 1; flex: 1; min-width: 0; padding-bottom: 24px; }
.tr-hello { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-family: var(--maru); font-weight: 700; font-size: 17px; color: #FFE2C6; }
.tr-hero h2 { margin: 0 0 14px; color: #fff; font-size: 29px; line-height: 1.35; word-break: auto-phrase; text-wrap: balance; }
.tr-hero .tr-welcome { margin-bottom: 4px; } .tr-hero .tr-welcome .tr-name { color: #FFE45C; }   
.tr-hero-sub { margin: 0 0 14px; font-family: var(--maru); font-size: 17px; font-weight: 700; line-height: 1.4; color: #FFE2C6; }
.tr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tr-chips li { background: rgba(255, 255, 255, .17); border-radius: 999px; padding: 4px 12px; font-family: var(--maru); font-weight: 700; font-size: 15px; }
.tr-chips b { font-size: 21px; color: var(--yellow-s); }
.tr-hero-wk { position: relative; z-index: 1; flex: none; width: 150px; height: auto; margin: 0 6px -12px 0; }
.tr-ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: #fff; line-height: 1; }
.tr-first { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 14px 16px; border: 0; border-radius: 22px; background: var(--yellow-s); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 5px 0 #D9C800; }
.tr-first-e { font-size: 36px; line-height: 1; }
.tr-first b { display: block; font-family: var(--maru); font-size: 18px; }
.tr-first small { display: block; font-size: 14px; color: var(--ink2); }
.tr-go-arrow { margin-left: auto; font-size: 34px; font-weight: 900; line-height: 1; }
.tr-mission { margin: 16px 0 0; padding: 16px 16px 12px; background: #fff; border-radius: 26px; box-shadow: var(--shadow-s); border: 4px solid var(--yellow-s); }
.tr-mission h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 21px; }
.tr-mission h3 b { font-size: 17px; background: var(--cream2); border-radius: 999px; padding: 2px 12px; }
.tr-mission ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-mission li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 16px; background: var(--cream); cursor: pointer; text-align: left; font-family: var(--maru); font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.4; }
.tr-mission .ck { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 4px solid var(--c); color: #fff; font-size: 18px; }
.tr-mission li.ok .ck { background: var(--c); }
.tr-mission li.ok .mt { text-decoration: line-through; color: var(--ink3); }
.tr-mission .mp { margin-left: auto; flex: none; font-size: 14px; color: var(--ink2); }
.tr-mission.done { border-color: #F2C94C; background: #FFFBEA; }
.tr-mdone { margin: 10px 0 2px; text-align: center; font-family: var(--maru); font-weight: 900; font-size: 18px; color: #A07000; }
.tr-cont { display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 0; padding: 12px 14px 12px 18px; border: 0; border-radius: 22px; background: var(--c); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 5px 0 rgba(0, 0, 0, .22); }
.tr-cont-l { flex: none; font-family: var(--maru); font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .24); border-radius: 999px; padding: 2px 10px; }
.tr-cont b { flex: 1; font-family: var(--maru); font-size: 19px; }
.tr-cont-p { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--c); font-size: 18px; }
.tr-grp { margin-top: 28px; }
.tr-grp h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 23px; }
.tr-grp h3 small { font-size: 14px; color: var(--ink3); font-weight: 700; }
.tr-tiles-m { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .tr-tiles-m { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759px) { .tr-tiles-m > .tr-tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 150px; } }   
.tr-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 176px; padding: 16px 16px 14px; border-radius: 26px; background: var(--c); color: #fff; text-decoration: none; box-shadow: 0 7px 0 var(--c2); overflow: hidden; transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.tr-tile:hover { color: #fff; transform: translateY(-2px); }
.tr-tile:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--c2); }
.tr-tile::after { content: ""; position: absolute; right: -34px; bottom: -44px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.tr-tile.ink, .tr-tile.ink:hover { color: var(--ink); }
.tr-tile > span { position: relative; z-index: 1; }
.tr-tile-art { display: flex; align-items: center; gap: 4px; height: 66px; margin-bottom: 8px; }
.tr-tile-t { font-family: var(--maru); font-weight: 900; font-size: 22px; line-height: 1.25; }
.tr-tile-s { margin-top: 3px; font-size: 14px; font-weight: 700; line-height: 1.4; opacity: .9; }
.tr-tile-m { margin-top: auto; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, .2); font-family: var(--maru); font-weight: 700; font-size: 14px; position: relative; top: 8px; }
.tr-tile.ink .tr-tile-m { background: rgba(255, 255, 255, .55); }
.tr-reco { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-style: normal; font-family: var(--maru); font-weight: 900; font-size: 13px; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.tr-tile .a-txt { font-size: 46px; line-height: 1; letter-spacing: -4px; }
.tr-tile .a-eq { display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .2); font-family: var(--maru); font-weight: 900; font-size: 30px; line-height: 1.1; }
.tr-tile .a-eq i { display: inline-block; width: 24px; height: 30px; margin: 0 3px; border: 3px solid currentColor; border-radius: 6px; }
.tr-tile .a-eq u { text-decoration: none; padding: 0 4px; border-radius: 6px; background: var(--yellow-s); color: var(--ink); }
.tr-tile .a-sb { width: auto; height: 62px; }
.tr-tile .a-hand { align-self: flex-end; margin-left: -10px; font-size: 32px; }
.tr-tile .a-grid { display: grid; grid-template-columns: repeat(3, 22px); grid-auto-rows: 20px; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .28); }
.tr-tile .a-grid b, .tr-tile .a-grid i { display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(255, 255, 255, .22); font-family: var(--maru); font-size: 14px; font-weight: 900; font-style: normal; }
.tr-tile .a-grid i { background: #fff; }
.tr-tile .a-card { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 52px; margin-top: 10px; border-radius: 10px; background: #fff; color: var(--c); box-shadow: 6px -6px 0 rgba(255, 255, 255, .45), 12px -12px 0 rgba(255, 255, 255, .25); font-family: var(--maru); font-weight: 900; font-size: 28px; }
.tr-tile .a-card.big b { font-size: 40px; }
.tr-home-foot { text-align: center; margin: 28px 0 0; }
.tr-staff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 16px; background: #FFF3C4; color: var(--ink); font-family: var(--maru); font-weight: 700; font-size: 14px; line-height: 1.5; }   
.tr-acct { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; margin: 14px 0 0; font-size: 13.5px; color: var(--ink3); text-align: center; }   
.tr-app .tr-acct .tr-link { font-size: 13.5px; color: var(--ink2); }
.tr-intro { margin: 8px 0 16px; padding: 14px 18px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); font-size: 16px; line-height: 1.8; color: var(--ink2); }   
.tr-box { margin-top: 16px; padding: 16px 18px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-s); }
.tr-box h3 { margin: 0 0 10px; font-size: 20px; }
.tr-box h3 small { margin-left: 6px; font-size: 14px; color: var(--ink3); }
.tr-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding-top: 6px; }
@media (min-width: 760px) { .tr-stages { grid-template-columns: repeat(3, 1fr); } }
.tr-stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 134px; padding: 14px 14px 12px; border: 3px solid transparent; border-radius: 22px; background: #fff; cursor: pointer; text-align: left; color: var(--ink); box-shadow: 0 5px 0 var(--line); transition: transform .1s; }
.tr-stage:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.tr-stage .no { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mc); color: #fff; font-family: var(--maru); font-weight: 900; font-size: 18px; }
.tr-stage .nm b { display: block; font-family: var(--maru); font-size: 19px; line-height: 1.3; }
.tr-stage .nm small { display: block; font-size: 13px; font-weight: 700; color: var(--ink3); }
.tr-stage .sr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: auto; }
.tr-stage .sr small { font-size: 13px; font-weight: 700; color: var(--ink2); }
.tr-stage.next { border-color: var(--mc); }
.tr-stage.full { background: #FFFBEA; }
.tr-stage em { position: absolute; top: -12px; right: 10px; padding: 2px 10px; border-radius: 999px; background: var(--mc); color: #fff; font-style: normal; font-family: var(--maru); font-weight: 900; font-size: 12.5px; }
.tr-st { white-space: nowrap; }
.tr-st i { font-style: normal; font-size: 23px; color: #E5DCCB; }
.tr-st i.on { color: #F5B800; text-shadow: 0 1px 0 #B58400; }
.tr-rule { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink2); }
.tr-rule.sm { font-size: 12.5px; font-weight: 500; color: var(--ink3); }
.tr-play { max-width: 640px; margin: 4px auto 0; }
.tr-pinfo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--maru); font-weight: 700; font-size: 17px; }
.tr-pinfo b { flex: 1; text-align: center; font-size: 17px; }
.tr-pinfo b small { font-size: 13px; color: var(--ink3); }
.tr-pn, .tr-clock { flex: none; min-width: 84px; font-variant-numeric: tabular-nums; }
.tr-clock { text-align: right; }
.tr-clock::before { content: "⏱ "; }
.tr-pbar { height: 10px; margin: 8px 0 12px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.tr-pbar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mc); transition: width .25s; }
.tr-qcard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 236px; padding: 18px 12px; background: #fff; border-radius: 28px; box-shadow: inset 0 0 0 4px var(--line); text-align: center; transition: box-shadow .15s, background .15s; }
.tr-qcard.ok { background: #F0FAF4; box-shadow: inset 0 0 0 5px #3FBF7F; }
.tr-qcard.ng { background: #FFF3F0; box-shadow: inset 0 0 0 5px #E5533D; }
.tr-q { width: 100%; }
.tr-fb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.tr-fb:empty { display: none; }
.tr-fb .m-ok { font-family: var(--maru); font-size: 180px; line-height: 1; color: rgba(63, 191, 127, .35); animation: trPop .22s ease-out; }
.tr-fb .m-ng { font-family: var(--maru); font-size: 130px; line-height: 1; color: rgba(229, 83, 61, .25); }
.tr-fb span { position: absolute; bottom: 12px; padding: 6px 18px; border-radius: 999px; background: #E5533D; color: #fff; font-family: var(--maru); font-weight: 700; font-size: 19px; }
.tr-fb span b { font-size: 25px; }
@keyframes trPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.q-count { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 58px; color: var(--mc); animation: trPop .3s ease-out; }
.mc-ink .q-count { color: #A07000; }
.q-eq { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 66px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.q-eq.sm { margin-top: 6px; font-size: 52px; }
.tr-slot { display: inline-block; min-width: 1.25em; padding: 0 .1em; border-bottom: 6px solid var(--mc); color: var(--mc2); text-align: center; }
.tr-slot.empty { height: 1.05em; vertical-align: -.12em; border: 5px dashed var(--mc); border-radius: 12px; animation: trBlink 1.2s infinite; }
.mc-ink .tr-slot { color: #8A6500; }
@keyframes trBlink { 50% { border-color: rgba(0, 0, 0, .08); } }
.q-ask { margin: 8px 0 0; font-family: var(--maru); font-weight: 700; font-size: 20px; color: var(--ink2); }
.q-ask b { font-size: 25px; color: var(--mc2); }
.q-num { margin: 4px 0 0; font-family: var(--maru); font-weight: 900; font-size: 68px; line-height: 1.1; color: var(--mc2); font-variant-numeric: tabular-nums; }
.q-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; font-size: 56px; line-height: 1.1; }
.q-items i { font-style: normal; }
.q-tf { display: inline-grid; grid-template-columns: repeat(5, 48px); grid-auto-rows: 48px; gap: 4px; padding: 6px; border-radius: 12px; background: var(--sand); }
.q-tf i { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; font-style: normal; font-size: 30px; }
.q-tf i.on:empty { background: var(--mc); }
.q-tf + .q-eq { margin-top: 12px; }
.q-tf2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.q-tf2 .q-tf { grid-template-columns: repeat(5, 38px); grid-auto-rows: 38px; }
.q-tf2 .q-tf i { font-size: 24px; }
.q-d5 { display: inline-flex; gap: 8px; margin-bottom: 12px; }
.q-d5 i { width: 42px; height: 42px; border: 5px solid var(--mc); border-radius: 50%; }
.q-d5 i.on { background: var(--mc); }
.q-digits { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 66px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.q-digits span { display: inline-block; padding: 0 .06em; }
.q-digits .hl { border-radius: 12px; background: var(--yellow-s); color: var(--mc2); box-shadow: inset 0 0 0 4px var(--mc); }
.q-kanji { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 42px; line-height: 1.35; color: var(--ink); word-break: break-all; }
.tr-ansbox { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 0; }
.tr-ansbox span { font-family: var(--maru); font-weight: 700; font-size: 18px; color: var(--ink2); }
.tr-abox { min-width: 210px; min-height: 66px; padding: 4px 16px; border: 4px solid var(--mc); border-radius: 18px; background: #fff; color: var(--ink); font-family: var(--maru); font-weight: 900; font-size: 44px; line-height: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.tr-abox.empty::after { content: "？"; color: var(--line); }
.tr-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 470px; margin: 14px auto 0; }
.tr-pad button { height: 74px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line); color: var(--ink); font-family: var(--maru); font-weight: 900; font-size: 36px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.tr-pad button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.tr-pad button.hit { animation: trHit .14s ease-out; }
@keyframes trHit { from { transform: translateY(4px); } to { transform: none; } }
.tr-pad .k-del { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 26px; color: var(--ink2); }
.tr-pad .k-del small { font-size: 12px; }
.tr-pad .k-ok { background: var(--mc); color: #fff; font-size: 22px; box-shadow: 0 5px 0 var(--mc2); }
.tr-pad .k-ok:active { box-shadow: 0 1px 0 var(--mc2); }
.tr-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.tr-choices.n4 { grid-template-columns: repeat(2, 1fr); }
.tr-choices button { min-height: 88px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--line), inset 0 0 0 3px var(--line); color: var(--ink); font-family: var(--maru); font-weight: 900; font-size: 46px; cursor: pointer; touch-action: manipulation; }
.tr-choices.long button { font-size: 24px; }
.tr-choices button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line), inset 0 0 0 3px var(--line); }
.tr-choices button.right { background: #3FBF7F; color: #fff; box-shadow: 0 6px 0 #2B8F5C; }
.tr-choices button.wrong { background: #E5533D; color: #fff; box-shadow: 0 6px 0 #B23A28; }
.tr-quitp { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 14px 0 0; }
.tr-miss-n { font-family: var(--maru); font-weight: 700; color: #C0392B; }
.tr-app .tr-sbs { max-width: 430px; margin: 0 auto; padding: 0; background: transparent; box-shadow: none; pointer-events: none; }
.tr-app .tr-sbs.real .sb-bead.on { background: linear-gradient(180deg, #E2C29B 0%, #C49363 55%, #A9774A 100%); }
.tr-app .ks-soroban.tr-oki { max-width: 470px; margin: 12px auto 0; box-shadow: var(--shadow-s); }
.tr-oki .sb-value { visibility: hidden; }
.tr-sbbtns { margin: 12px 0 0; text-align: center; }
.tr-res { position: relative; margin-top: 10px; padding: 24px 20px 22px; border-radius: 30px; background: var(--mc); color: #fff; text-align: center; overflow: hidden; }
.tr-res img { display: block; width: 120px; height: auto; margin: 0 auto 2px; }
.tr-res-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.tr-res-stars i { font-style: normal; font-size: 66px; line-height: 1; color: rgba(255, 255, 255, .25); }
.tr-res-stars i.on { color: #FFE94A; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); animation: trStar .55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); }
.mc-ink .tr-res-stars i { color: rgba(0, 0, 0, .12); }
.mc-ink .tr-res-stars i.on { color: #fff; }
@keyframes trStar { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.tr-res-t { margin: 0 0 12px; font-family: var(--maru); font-weight: 900; font-size: 30px; }
.tr-res-d { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.tr-res-d div { min-width: 112px; padding: 8px 16px; border-radius: 16px; background: rgba(255, 255, 255, .18); }
.tr-res-d dt { font-size: 13px; font-weight: 700; opacity: .88; }
.tr-res-d dd { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 23px; }
.tr-newrec { display: inline-block; margin: 14px 0 0; padding: 6px 18px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--maru); font-weight: 900; font-size: 20px; animation: trPop .4s ease-out; }
.tr-view > .tr-newrec { display: block; width: fit-content; margin: 12px auto 0; }
.tr-res-h { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.tr-miss { margin-top: 14px; padding: 12px 16px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-s); }
.tr-miss p { margin: 0 0 6px; font-family: var(--maru); font-weight: 700; color: #C0392B; }
.tr-miss ul { margin: 0; padding-left: 1.2em; font-size: 16px; }
.tr-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 18px 0 0; }
.tr-btns .btn { min-width: 170px; }
.tr-masu-wrap { position: relative; margin: 10px 0 0; }
.tr-app .tr-masu { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; padding: 2px; border-radius: 12px; background: var(--sand); font-family: var(--maru); font-weight: 900; font-variant-numeric: tabular-nums; }
.tr-app .tr-masu th, .tr-app .tr-masu td { height: 44px; padding: 0; border: 0; border-radius: 6px; text-align: center; font-size: 22px; }
.tr-app .tr-masu.n5 th, .tr-app .tr-masu.n5 td { height: 66px; font-size: 32px; }
.tr-app .tr-masu th { background: var(--mc); color: #fff; }
.tr-app .tr-masu th.op { background: var(--ink); }
.tr-app .tr-masu th.on { background: var(--yellow-s); color: var(--ink); }
.tr-app .tr-masu td { background: #fff; color: var(--ink); }
.tr-app .tr-masu td.ok { background: #F4FAFC; color: var(--mc2); }
.tr-app .tr-masu td.cur { background: #FFF6B3; box-shadow: inset 0 0 0 3px var(--mc); }
.tr-app .tr-masu td.ng { background: #FFD9D2; animation: trShake .35s; }
@keyframes trShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.tr-masu-cd { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 248, 234, .86); color: var(--mc); font-family: var(--maru); font-weight: 900; font-size: 120px; }
.tr-masu-cd.show { display: flex; }
.tr-masu-play .tr-pad { margin-top: 10px; }
.tr-masu-play .tr-pad button { height: 62px; }
.tr-set { display: grid; gap: 14px; padding: 16px 18px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-s); }
.tr-pick-t { margin: 0 0 6px; font-family: var(--maru); font-weight: 700; font-size: 15px; color: var(--ink2); }
.tr-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.tr-tiles.n2 { grid-template-columns: repeat(2, 1fr); }
.tr-tiles.n4 { grid-template-columns: repeat(4, 1fr); }
.tr-tiles.n6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 680px) { .tr-tiles.n6 { grid-template-columns: repeat(3, 1fr); } }
.tr-tiles button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 4px; border: 2px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); cursor: pointer; font-family: var(--maru); transition: transform .12s, border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; }
.tr-tiles button:active { transform: scale(.97); }
.tr-tiles button b { font-size: 31px; line-height: 1.1; font-weight: 900; color: var(--blue-d); font-variant-numeric: tabular-nums; }
.tr-tiles button b.ico { color: var(--mc2); }
.tr-tiles button span { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink2); }
.tr-tiles button small { display: block; font-size: 12px; font-weight: 500; color: var(--ink3); }
.tr-tiles button.on { border-color: var(--mc); background: #FFF7EC; box-shadow: inset 0 0 0 2px var(--mc); }
.tr-tiles button.on span { color: var(--mc2); }
.tr-tiles button:disabled { opacity: .35; cursor: not-allowed; }
.tr-tiles .dots { display: inline-grid; grid-template-columns: repeat(5, 9px); gap: 4px; justify-content: center; }
.tr-tiles .dots.n3 { grid-template-columns: repeat(3, 9px); }
.tr-tiles .dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--mc); }
.tr-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.tr-check input { width: 22px; height: 22px; }
.tr-check small { display: block; width: 100%; margin-left: 30px; font-size: 12.5px; color: var(--ink3); }
.tr-summary { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--mc); color: #fff; font-family: var(--maru); font-weight: 700; text-align: center; line-height: 1.5; }
.tr-bestline { margin: 10px 0 0; text-align: center; font-size: 15px; color: var(--ink2); }
.tr-go { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.tr-go .btn { min-width: 230px; min-height: 64px; font-size: 22px; }
.tr-mute { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #FFF6D6; box-shadow: inset 0 0 0 2px #F2C94C; font-size: 14px; line-height: 1.7; color: var(--ink); }
.tr-mute b { display: block; margin-bottom: 2px; font-family: var(--maru); font-size: 15px; }
.tr-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; margin: 8px 0 0; padding: 18px; border-radius: 28px; background: #1F2A44; color: #fff; text-align: center; }
.tr-screen.sm { min-height: 170px; }
.tr-screen.ok { background: var(--shodo-d); }
.tr-screen.ng { background: #7A2A20; }
.tr-big { min-height: 1em; font-family: var(--maru); font-weight: 900; font-size: 150px; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-big.d3 { font-size: 120px; }
.tr-big.count, .tr-big.ask { color: var(--yellow-s); }
.tr-big.ask { font-size: 96px; }
.tr-screen.sm .tr-big { font-size: 86px; }
.tr-sub { margin-top: 12px; min-height: 1.4em; font-size: 16px; color: #C9D3E6; }
.tr-screen.ok .tr-sub, .tr-screen.ng .tr-sub { color: #fff; font-family: var(--maru); font-weight: 700; font-size: 20px; }
.tr-result { margin-top: 14px; text-align: center; }
.tr-mark { margin: 0 0 8px; font-family: var(--maru); font-weight: 900; font-size: 22px; }
.tr-mark.ok { color: var(--shodo-d); }
.tr-mark.ng { color: #b32d2e; }
.tr-sum { margin: 0 auto; border-collapse: collapse; font-family: var(--maru); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.tr-sum td { padding: 2px 8px; text-align: right; border: 0; background: none; }
.tr-sum tr.tot td { border-top: 3px solid var(--ink); }
.tr-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 14px auto 0; padding: 12px 16px; border-radius: 16px; background: #E6F6EC; text-align: left; }
.tr-suggest.down { background: #FFF0E2; }
.tr-suggest p { margin: 0; font-family: var(--maru); font-weight: 700; }
.tr-suggest small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink2); }
.tr-suggest .tr-try { flex: none; background: var(--shodo); color: #fff; box-shadow: 0 4px 0 var(--shodo-d); }
.tr-suggest.down .tr-try { background: var(--soroban); box-shadow: 0 4px 0 var(--soroban-d); }
@media (max-width: 680px) { .tr-suggest { flex-direction: column; text-align: center; } }
.tr-k-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 8px; font-family: var(--maru); font-weight: 700; }
.tr-k-top b { flex: 1; text-align: center; }
.tr-k-no { min-width: 70px; }
.tr-k-time { min-width: 70px; text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; }
.tr-k-time.warn { color: #c0392b; }
.tr-k-card { position: relative; display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 22px 16px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 4px var(--line); }
.tr-k-q { position: absolute; left: 14px; top: 10px; font-family: var(--maru); font-weight: 700; color: var(--ink3); }
.tr-mi { border-collapse: collapse; font-family: var(--maru); font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-mi td { padding: 0 6px; text-align: right; border: 0; background: none; font-size: 20px; line-height: 1.45; }
.tr-mi.big td { font-size: 30px; }
.tr-eq { margin: 0; font-family: var(--maru); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 20px; }
.tr-eq.big { font-size: 42px; }
.tr-k-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink3); }
.tr-k-score { margin-top: 10px; padding: 22px 18px; border-radius: 28px; text-align: center; background: #1F2A44; color: #fff; }
.tr-k-score.pass { background: var(--shodo-d); }
.tr-k-score img { display: block; width: 100px; height: auto; margin: 0 auto 6px; }
.tr-k-score p { margin: 0; }
.tr-k-score b { display: block; margin: 6px 0; font-family: var(--maru); font-size: 66px; line-height: 1.1; }
.tr-k-score b small { margin-left: 4px; font-size: 18px; }
.tr-k-verdict { font-family: var(--maru); font-weight: 700; font-size: 19px; }
.tr-k-list { width: 100%; margin-top: 16px; border-collapse: collapse; overflow: hidden; border-radius: 14px; background: #fff; font-size: 15px; }
.tr-k-list th, .tr-k-list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.tr-k-list tr.ng td:last-child { color: #c0392b; font-weight: 700; }
.tr-k-list tr.ok td:last-child { color: var(--shodo-d); font-weight: 700; }
.tr-app .v-soroban .ks-soroban { box-shadow: var(--shadow-s); }
.tr-sumchips { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; }
.tr-sumchips li { padding: 12px 14px; border-radius: 20px; background: var(--mc); color: #fff; font-family: var(--maru); font-weight: 700; }
.tr-sumchips small { display: block; font-size: 13px; opacity: .88; }
.tr-sumchips b { margin-right: 2px; font-size: 32px; }
.tr-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tr-cal-h b { font-family: var(--maru); font-size: 21px; }
.tr-cal-h button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; }
.tr-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tr-cal > span { text-align: center; }
.tr-cal .w { font-size: 13px; font-weight: 700; color: var(--ink3); }
.tr-cal .su { color: #D2392F; }
.tr-cal .sa { color: #1E6FD9; }
.tr-cal .d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; border-radius: 12px; background: var(--cream); font-size: 13px; }
.tr-cal .d i { font-style: normal; font-weight: 700; line-height: 1; color: var(--ink3); }
.tr-cal .d b { font-size: 17px; line-height: 1; color: #fff; }
.tr-cal .d.on { background: var(--soroban); }
.tr-cal .d.on i { color: #FFE2C6; }
.tr-cal .d.mc { background: #F5B800; }
.tr-cal .d.today { box-shadow: inset 0 0 0 3px var(--blue-d); }
.tr-cal-s { margin: 10px 0 0; font-size: 13.5px; color: var(--ink2); }
.tr-bars { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 4px; height: 150px; padding-top: 18px; }
.tr-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.tr-bars i { position: relative; display: block; width: 100%; max-width: 28px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--soroban); }
.tr-bars em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink2); }
.tr-bars small { margin-top: 3px; font-size: 11px; color: var(--ink3); }
.tr-prog { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.tr-prog li { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 2px 12px; }
.tr-prog b { font-family: var(--maru); font-size: 16px; }
.tr-prog .pg { height: 12px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.tr-prog .pg i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.tr-prog small { grid-column: 2; font-size: 13px; color: var(--ink2); }
.tr-kk { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 540px; }
.tr-kk span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px; font-family: var(--maru); font-weight: 700; font-size: 14px; }
.tr-kk .h0, .tr-kk .hh { background: var(--ink); color: #fff; }
.tr-app .c.l0 { background: var(--cream); color: var(--ink3); }
.tr-app .c.l1 { background: #FFE9A8; color: var(--ink); }
.tr-app .c.l2 { background: #FFC46B; color: var(--ink); }
.tr-app .c.l3 { background: #3FBF7F; color: #fff; }
.tr-kk-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.tr-kk-l .c { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.tr-badges { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 0; padding: 0; }
.tr-badges li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: var(--cream); text-align: center; opacity: .55; }
.tr-badges li.got { background: #FFF6D6; box-shadow: inset 0 0 0 2px #F2C94C; opacity: 1; }
.tr-badges b { font-size: 30px; line-height: 1.1; color: var(--ink3); }
.tr-badges span { font-size: 12px; line-height: 1.35; color: var(--ink2); }
.tr-rec-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink3); }
.tr-rank-me { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; font-family: var(--maru); font-weight: 700; font-size: 18px; }
.tr-rank-me small { color: var(--ink3); }
.tr-rank-me .tr-link { margin-left: auto; }
.tr-rtabs { display: flex; gap: 6px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.tr-rtabs::-webkit-scrollbar { display: none; }
.tr-rtabs button { flex: none; padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink2); font-family: var(--maru); font-weight: 700; font-size: 15px; cursor: pointer; }
.tr-rtabs button.on { background: var(--mc); color: #fff; box-shadow: none; }
.tr-seg { display: inline-flex; margin: 10px 0 0; padding: 4px; border-radius: 999px; background: var(--sand); }
.tr-seg button { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font-family: var(--maru); font-weight: 700; font-size: 14px; cursor: pointer; }
.tr-seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
.tr-rlist { margin-top: 12px; }
.tr-rlist ol { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.tr-rlist li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-s); }
.tr-rlist li.top { background: #FFFBEA; }
.tr-rlist li.me { box-shadow: inset 0 0 0 3px var(--soroban); }
.tr-rlist .rk { width: 38px; text-align: center; font-family: var(--maru); font-weight: 900; font-size: 22px; }
.tr-rlist .tr-ava { width: 42px; height: 42px; font-size: 26px; background: var(--cream2); }
.tr-rlist .nm { flex: 1; min-width: 0; font-family: var(--maru); font-weight: 700; font-size: 17px; line-height: 1.3; }
.tr-rlist .nm small { display: block; font-size: 12px; color: var(--ink3); }
.tr-rlist .nm em { padding: 1px 8px; border-radius: 999px; background: var(--soroban); color: #fff; font-style: normal; font-size: 12px; }
.tr-rlist b { font-family: var(--maru); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-loading { padding: 24px 0; text-align: center; color: var(--ink3); }
.tr-rank-mine { margin: 12px 0 0; text-align: center; font-family: var(--maru); font-weight: 700; }
.tr-rank-note { margin: 12px 0 0; font-size: 13px; color: var(--ink3); }
.tr-join { padding: 24px 20px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-s); text-align: center; }
.tr-join img { width: 120px; height: auto; }
.tr-join h2 { margin: 8px 0; font-size: 26px; }
.tr-form { max-width: 470px; margin: 14px auto 0; text-align: left; }
.tr-form .tr-pick-t { margin-top: 14px; }
.tr-nick { display: grid; gap: 8px; }
.tr-nick-prev { display: flex; align-items: center; gap: 8px; font-family: var(--maru); font-weight: 900; font-size: 24px; }
.tr-nick-prev .tr-ava { width: 50px; height: 50px; font-size: 30px; background: var(--cream2); }
.tr-nick-sel { display: flex; gap: 8px; }
.tr-nick-sel select, .tr-app .tr-grade { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--maru); font-weight: 700; font-size: 18px; }
.tr-app .tr-grade { width: 100%; max-width: 320px; }
.tr-nick-r { flex: none; width: 54px; border: 0; border-radius: 14px; background: var(--cream2); font-size: 24px; cursor: pointer; }
.tr-sw { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 700; line-height: 1.5; cursor: pointer; }
.tr-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tr-sw span { position: relative; flex: none; width: 58px; height: 34px; border-radius: 999px; background: var(--line); transition: background .15s; }
.tr-sw span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .15s; }
.tr-sw input:checked + span { background: #3FBF7F; }
.tr-sw input:checked + span::after { transform: translateX(24px); }
.tr-sw input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.tr-sw input:disabled + span { opacity: .4; }
.tr-install ol { margin: 6px 0; padding-left: 1.3em; line-height: 1.8; }
.tr-box .btn-row { margin: 10px 0 0; }
.tr-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100002; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--maru); font-weight: 700; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transform: translate(-50%, 40px); opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; }
.tr-toast.show { transform: translate(-50%, 0); opacity: 1; }
.tr-confetti { position: fixed; inset: 0; z-index: 100001; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 420px) {
  .tr-hero h2 { font-size: 26px; }
  .tr-hero-wk { width: 128px; }
  .tr-tile { min-height: 168px; padding: 14px 14px 12px; }
  .tr-tile-t { font-size: 20px; }
}
@media (max-height: 780px) {
  .tr-app .tr-top { min-height: 56px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .tr-pbar { height: 8px; margin: 6px 0 8px; }
  .tr-qcard { min-height: 196px; padding: 12px 10px; }
  .tr-app .tr-sbs { --bh: 30px; }
  .tr-app .tr-sbs .sb-frame { padding-bottom: 24px; }
  .tr-app .ks-soroban.tr-oki { --bh: 34px; margin-top: 8px; padding: 12px 12px 14px; }
  .tr-oki .sb-top { margin-bottom: 8px; }
  .tr-sbbtns { margin-top: 8px; }
  .tr-ansbox { margin-top: 8px; }
  .tr-abox { min-height: 56px; line-height: 46px; font-size: 38px; }
  .tr-pad { gap: 8px; margin-top: 10px; }
  .tr-pad button { height: 62px; }
  .tr-masu-wrap { margin-top: 6px; }
  .tr-masu-play .tr-pad { margin-top: 8px; }
  .tr-masu-play .tr-pad button { height: 54px; }
  .tr-app .tr-masu th, .tr-app .tr-masu td { height: 38px; font-size: 20px; }
  .tr-app .tr-masu.n5 th, .tr-app .tr-masu.n5 td { height: 56px; font-size: 30px; }
  .tr-screen { min-height: 230px; }
  .tr-big { font-size: 130px; }
  .tr-big.d3 { font-size: 108px; }
  .tr-k-top { margin: 4px 0 6px; }
  .tr-k-card { min-height: 160px; padding: 14px 12px; }
  .tr-mi.big td { font-size: 27px; line-height: 1.3; }
  .tr-eq.big { font-size: 38px; }
}
@media (max-height: 640px) {
  .tr-qcard { min-height: 150px; padding: 10px 8px; }
  .q-eq { font-size: 58px; }
  .tr-app .tr-sbs { --bh: 25px; }
  .tr-app .ks-soroban.tr-oki { --bh: 30px; }
  .tr-abox { min-height: 50px; line-height: 40px; font-size: 34px; }
  .tr-pad { gap: 6px; margin-top: 8px; }
  .tr-pad button { height: 54px; font-size: 32px; }
  .tr-masu-play .tr-pad button { height: 48px; }
  .tr-app .tr-masu th, .tr-app .tr-masu td { height: 32px; font-size: 18px; }
  .tr-app .tr-masu.n5 th, .tr-app .tr-masu.n5 td { height: 48px; font-size: 26px; }
  .tr-screen { min-height: 170px; }
  .tr-big { font-size: 110px; }
  .tr-big.d3 { font-size: 92px; }
  .tr-k-card { min-height: 130px; padding: 10px; }
  .tr-mi.big td { font-size: 24px; line-height: 1.22; }
}
@media (max-height: 520px) {   
  .tr-app .tr-top { min-height: 48px; }
  .tr-qcard { min-height: 120px; }
  .tr-app .tr-sbs { --bh: 20px; }
  .tr-app .tr-sbs .sb-frame { padding-bottom: 20px; }
  .tr-pad button { height: 46px; font-size: 28px; }
  .tr-masu-play .tr-pad button { height: 42px; }
  .tr-app .tr-masu th, .tr-app .tr-masu td { height: 26px; font-size: 16px; }
  .tr-app .tr-masu.n5 th, .tr-app .tr-masu.n5 td { height: 44px; font-size: 24px; }
  .tr-k-card { min-height: 110px; padding: 8px; }
  .tr-mi.big td { font-size: 21px; line-height: 1.12; }
}
@media (prefers-reduced-motion: reduce) { .tr-res-stars i.on, .tr-fb .m-ok, .q-count, .tr-newrec, .tr-slot.empty, .tr-app .tr-masu td.ng { animation: none; } }
.tr-print-root { display: none; }
@media print {
  body.tr-printing > *:not(.tr-print-root) { display: none !important; }
  body.tr-printing { background: #fff !important; padding: 0 !important; }
  body.tr-printing .tr-print-root { display: block; color: #000; font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif; }
  html { zoom: 1 !important; }
  @page { size: A4; margin: 12mm; }
  .pr-page { page-break-after: always; break-after: page; }
  .pr-page:last-child { page-break-after: auto; break-after: auto; }
  .pr-page header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 4px; margin-bottom: 6mm; font-size: 12pt; }
  .pr-page header span { font-size: 16pt; font-weight: 700; }
  .pr-name { font-size: 11pt; margin: 0 0 6mm; }
  .pr-grid { display: grid; gap: 4mm; }
  .pr-grid.mi { grid-template-columns: repeat(5, 1fr); }
  .pr-grid.eq { grid-template-columns: repeat(3, 1fr); row-gap: 7mm; }
  .pr-q { border: 1px solid #000; padding: 2mm 2mm 0; break-inside: avoid; }
  .pr-n { font-size: 9pt; }
  .pr-q .tr-mi { width: 100%; border-collapse: collapse; }
  .pr-q .tr-mi td { font-size: 12pt; line-height: 1.5; padding: 0 1mm; text-align: right; border: 0; }
  .pr-q .tr-eq { font-size: 13pt; margin: 2mm 0; }
  .pr-a { border-top: 1.5px solid #000; min-height: 9mm; text-align: right; font-size: 13pt; font-weight: 700; padding: 1mm; }
  .pr-grid.eq .pr-q { border: 0; border-bottom: 1px dotted #000; display: flex; align-items: center; gap: 2mm; padding: 0 0 1mm; }
  .pr-grid.eq .pr-a { border: 0; flex: 1; min-height: 0; }
  .pr-masus { display: grid; gap: 8mm; }
  .pr-masus.n5 { grid-template-columns: 1fr 1fr; }
  .tr-masu.pr { width: 100%; table-layout: fixed; border-collapse: collapse; }
  .tr-masu.pr th, .tr-masu.pr td { height: 14.5mm; border: 1px solid #000; text-align: center; font-size: 16pt; font-weight: 700; padding: 0; }
  .tr-masu.pr th { background: #eee; }
  .pr-masus.n5 .tr-masu.pr th, .pr-masus.n5 .tr-masu.pr td { height: 13mm; font-size: 15pt; }
  .pr-time { margin-top: 6mm; font-size: 12pt; text-align: right; }
  .pr-kuku { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(13, auto); grid-auto-flow: column; gap: 2mm 6mm; font-size: 13pt; }
  .pr-kuku div { padding: 2mm 0; border-bottom: 1px dotted #000; white-space: nowrap; }
  .pr-kuku b { display: inline-block; min-width: 10mm; text-align: center; }
}
.ks-kakikata { --kk-ink: #2B2420; --kk-red: #E5533D; --kk-ghost: #E6DDCD; --kk-now: #FFCFA6; --kk-grid: #E2B98E; --kk-hand: "Klee One", "Hiragino Mincho ProN", serif; }
.kk-loading { padding: 80px 0; text-align: center; color: var(--ink3); font-family: var(--maru); font-weight: 700; }
.kk-hero { background: var(--shodo-d); }
.kk-hero .tr-hello { color: #CFF3DF; }
.kk-hero .tr-hero-sub { color: #CFF3DF; }
.kk-gchg { margin-left: 6px; padding: 2px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font-family: var(--maru); font-weight: 700; font-size: 14px; cursor: pointer; }
.kk-ichiji { display: flex; align-items: center; gap: 16px; width: 100%; margin: 14px 0 0; padding: 14px 18px; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 5px 0 var(--line), inset 0 0 0 4px #F5B800; color: var(--ink); text-align: left; cursor: pointer; }
.kk-ichiji-l { flex: none; font-family: var(--maru); font-weight: 900; font-size: 16px; line-height: 1.3; color: #A07000; }
.kk-ichiji-c { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 16px; background: #FFFBEA; box-shadow: inset 0 0 0 2px #F2E3B0; font-family: var(--kk-hand); font-weight: 600; font-size: 70px; line-height: 1; }
.kk-ichiji-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kk-ichiji-t b { font-family: var(--maru); font-size: 20px; }
.kk-ichiji-t small { font-size: 15px; color: var(--ink2); }
.kk-ichiji-t em { font-style: normal; font-family: var(--maru); font-weight: 900; font-size: 17px; color: var(--shodo-d); }
.tr-tile .a-ch { width: 66px; height: 66px; padding: 2px; border-radius: 12px; background: rgba(255,255,255,.18); }
.tr-tile .a-ch path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tr-tile .a-ch path.hl { stroke: var(--yellow-s); }
.tr-tile .kk-ae { font-family: var(--kk-hand); }
.tr-tile .kk-ae small { font-family: var(--maru); font-size: 22px; margin-left: 4px; }
.kk-foot { margin: 22px 0 0; font-size: 12.5px; color: var(--ink3); text-align: center; }
.kk-note { margin: -6px 0 14px; padding: 10px 14px; border-radius: 14px; background: #FFF6D6; box-shadow: inset 0 0 0 2px #F2C94C; font-size: 14px; }
.kk-grade { padding: 22px 18px 26px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-s); text-align: center; }
.kk-grade img { width: 120px; height: auto; }
.kk-grade h2 { margin: 6px 0; font-size: 30px; }
.kk-grade p { margin: 0 0 16px; color: var(--ink2); }
.kk-gbtns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kk-gbtns button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 0; border-radius: 18px; background: var(--shodo); color: #fff; box-shadow: 0 5px 0 var(--shodo-d); cursor: pointer; font-family: var(--maru); }
.kk-gbtns button:first-child { grid-column: 1 / -1; background: #F5B800; color: var(--ink); box-shadow: 0 5px 0 #C28F00; }
.kk-gbtns b { font-size: 26px; }
.kk-gbtns small { font-size: 13px; opacity: .9; }
.kk-gbtns.sm { grid-template-columns: repeat(4, 1fr); }
.kk-gbtns.sm button, .kk-gbtns.sm button:first-child { grid-column: auto; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line); }
.kk-gbtns.sm button.on { background: var(--shodo); color: #fff; box-shadow: 0 4px 0 var(--shodo-d); }
.kk-gbtns.sm b { font-size: 20px; }
.kk-tabs { margin-bottom: 4px; }
.kk-count { margin: 8px 0 10px; font-family: var(--maru); font-weight: 700; color: var(--ink2); }
.kk-count b { font-size: 22px; color: var(--shodo-d); }
.kk-chars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.kk-chars.kana { grid-template-columns: repeat(5, 1fr); }
.kk-chars button { aspect-ratio: 1; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); font-family: var(--kk-hand); font-weight: 600; font-size: 30px; line-height: 1; cursor: pointer; }
.kk-chars.kana button { font-size: 34px; }
@media (min-width: 760px) { .kk-chars { grid-template-columns: repeat(10, 1fr); } }
.kk-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
.kk-big { flex: none; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-s); font-family: var(--kk-hand); font-weight: 600; font-size: 78px; line-height: 1; }
.kk-info { display: grid; gap: 2px; }
.kk-info b { font-family: var(--maru); font-size: 24px; }
.kk-info small { font-size: 15px; color: var(--ink2); }
.kk-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 18px; background: var(--sand); }
.kk-seg button { padding: 12px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--ink2); font-family: var(--maru); font-weight: 900; font-size: 17px; cursor: pointer; }
.kk-seg button.on { background: #fff; color: var(--shodo-d); box-shadow: 0 3px 0 rgba(0,0,0,.08); }
.kk-wrap { max-width: 460px; margin: 0 auto; }
.kk-board { position: relative; width: 100%; aspect-ratio: 1; margin: 12px auto 0; border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); }
.kk-board.shake { animation: kkShake .32s; }
@keyframes kkShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kk-svg { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; cursor: crosshair; }
.kk-grid rect { fill: none; stroke: var(--kk-grid); stroke-width: 1; }
.kk-grid line { stroke: var(--kk-grid); stroke-width: .6; stroke-dasharray: 2 2; }
.kk-ghost path, .kk-done path, .kk-fx path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kk-ghost path { stroke: var(--kk-ghost); stroke-width: 7.5; }
.kk-ghost.free path { stroke: #F4EFE6; }
.kk-ghost.watch path { stroke: #F1EBE0; }
.kk-ghost path.now { stroke: var(--kk-now); }
.kk-done path, .kk-fx path { stroke: var(--kk-ink); stroke-width: 6; }
.kk-fx path.demo { stroke: var(--kk-red); opacity: .85; }
.kk-nums text { font: 700 7px "Zen Maru Gothic", sans-serif; fill: var(--kk-red); }
.kk-hint .pulse { fill: var(--kk-red); transform-box: fill-box; transform-origin: center; animation: kkPulse 1.2s ease-in-out infinite; }
.kk-hint text { font: 900 6.5px "Zen Maru Gothic", sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.kk-hint .arrow { fill: var(--kk-red); opacity: .8; }
@keyframes kkPulse { 50% { transform: scale(1.25); } }
.kk-ink { fill: none; stroke: var(--kk-ink); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.kk-ink.ng { stroke: var(--kk-red); opacity: 0; transition: opacity .45s; }
.kk-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; background: rgba(255,255,255,.72); pointer-events: none; animation: trPop .3s ease-out; }
.kk-maru { font-family: var(--maru); font-size: 150px; line-height: 1; color: rgba(229,83,61,.85); }
.kk-over .tr-st i { font-size: 40px; }
.kk-over p { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 20px; color: var(--ink); }
.kk-msg { min-height: 1.6em; margin: 10px 0 0; text-align: center; font-family: var(--maru); font-weight: 700; font-size: 17px; color: var(--ink2); }
.kk-msg.ng { color: var(--kk-red); }
.kk-msg.ok { color: var(--shodo-d); }
.kk-qcard { min-height: 300px; }
.kk-qbox { display: flex; justify-content: center; }
.kk-q { width: 230px; height: 230px; }
.kk-qs path { fill: none; stroke: #CDC3B3; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.kk-qs path.ink { stroke: var(--kk-ink); }
.kk-qs path.hl { stroke: var(--kk-red); stroke-width: 7; }
.kk-endmark { fill: none; stroke: #1E6FD9; stroke-width: 2; stroke-dasharray: 3 2; }
.kk-qchar { font-family: var(--kk-hand); font-weight: 600; font-size: 150px; line-height: 1.1; }
.kk-word { font-family: var(--kk-hand); font-weight: 600; font-size: 80px; line-height: 1.2; letter-spacing: .04em; }
.kk-word b { color: var(--mc2); text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 10px; }
.v-junq .tr-choices button, .v-thh .tr-choices button { font-size: 30px; }
.v-yomi .tr-choices button { font-size: 26px; }
@media (max-width: 420px) { .kk-chars { grid-template-columns: repeat(6, 1fr); } .kk-q { width: 210px; height: 210px; } }
.kk-gate-hero { background: var(--shodo-d); }
.kk-gate-hero .tr-eb { color: #CFF3DF; }
.ks-kakikata .tr-unlock { border-color: var(--shodo); }
.ks-kakikata .tr-feat b { color: var(--shodo-d); }
.play-mini-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.play-mini, .mem-link { flex: 0 1 310px; min-width: 0; }
.play-mini span:not(.go), .mem-link span:not(.go) { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pm-tag { display: inline-block; margin-bottom: 2px; padding: 1px 9px; border-radius: 999px; background: var(--yellow-s); color: var(--ink); font-style: normal; font-family: var(--maru); font-weight: 700; font-size: max(11px,calc(11.5px*var(--kt))); line-height: 1.5; }
.mem-link { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; color: #fff; text-decoration: none; box-shadow: var(--shadow-s); transition: transform .15s, filter .15s; text-align: left; line-height: 1.35; }
.mem-link.so { background: var(--soroban-d); }
.mem-link.ka { background: var(--shodo-d); }
.mem-link:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.mem-link img { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: #fff; }
.mem-link .pm-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.mem-link b { font-family: var(--maru); font-weight: 700; font-size: calc(15px*var(--kt)); }
.mem-link .go { flex: none; display: inline-flex; color: var(--yellow-s); }
.mem-link .go svg { width: 18px; height: 18px; }
.drawer-mem { display: grid; gap: 8px; }   
.drawer-mem .mem-link { flex: none; width: 100%; }