/* 喵喵日本語 サイト・外観B「喵喵ノート」
   参考: aiueo.cc（クリーム地・黒の縁取り＋ずらした影・丸ゴシック・「今日の◯◯」の枠）。メニューを分類で増やさない（分類は4つ・Mori 2026-10-24）
   ライト固定・見出しは粉圓（Huninn・太さ1つなので太字にしない）・日本語は Zen Maru Gothic・行間1.9・節の余白 PC112／SP72 */
:root{
  color-scheme:light;
  --bg:#FFF8EC; --dot:#F0E3CB; --paper:#FFFFFF;
  --ink:#1F2430; --muted:#585D69; --soft:#EADFCB;
  --sky:#3FAEDB; --sky-soft:#DDF1FA; --sky-ink:#0F6A93;
  --lemon:#FFD75E; --lemon-soft:#FFF2C2; --coral:#FF6B57;
  --linegreen:#06C755;
  --zh:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --round:"Huninn","Zen Maru Gothic","PingFang TC","Microsoft JhengHei",sans-serif;
  --r:18px; --sh:4px 4px 0 var(--ink); --sec:112px; --gut:max(20px,env(safe-area-inset-left,0px));
  --app-ink:var(--ink); --app-muted:var(--muted); --app-accent:var(--sky-ink); --app-tint:var(--sky-soft); --app-card:var(--paper);
  --app-border:2.5px solid var(--ink); --app-border-img:2.5px solid var(--ink); --app-divider:2px dashed #B9DDEE;
  --app-shadow:var(--sh); --app-shadow-lg:6px 6px 0 var(--ink); --app-radius:18px; --app-radius-sm:14px;
  --app-hl:var(--lemon); --app-hl-soft:var(--lemon-soft); --app-num-font:var(--round); --app-num-weight:400;
}
@media (max-width:900px){ :root{ --sec:72px; } }
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--zh);font-size:18px;line-height:1.9;-webkit-text-size-adjust:100%;
  background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:24px 24px}
@media (max-width:900px){ body{font-size:17px;padding-bottom:76px} }
img,video{max-width:100%;height:auto;display:block}
a{color:var(--sky-ink);text-underline-offset:3px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--round);font-weight:400;font-synthesis:none;line-height:1.4;text-wrap:balance;margin:0;letter-spacing:.02em}
h1 .ja,h2 .ja,h3 .ja{font-weight:700}
p{margin:0}
.ja{font-family:var(--jp);font-weight:500}
.nw{white-space:nowrap}
td .nw,th .nw{white-space:normal}
ruby rt{font-size:.55em;color:var(--muted);font-weight:500}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gut);padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:820px}
.preview-bar{background:var(--ink);color:#fff;text-align:center;font-size:14px;font-weight:700;padding:6px 12px}

/* ボタン：黒の縁取り＋ずらした影。押すと影の分だけ沈む */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;text-decoration:none;border-radius:14px;
  padding:12px 26px;min-height:48px;font-size:17px;line-height:1.3;border:2px solid var(--ink);box-shadow:var(--sh);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-line{background:var(--linegreen);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.btn-sky{background:var(--sky-soft);color:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-sm{min-height:40px;padding:7px 16px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.btn-lg{min-height:60px;padding:15px 32px;font-size:19px}

/* ヘッダー */
.site-header{background:var(--bg);position:sticky;top:0;z-index:20;border-bottom:2px solid var(--ink)}
.header-in{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--round);font-size:24px;line-height:1.2}
.logo img{border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.logo small{display:block;font-family:var(--zh);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;padding:6px 14px;border-radius:999px;border:2px solid transparent}
.nav a:hover{border-color:var(--ink);background:var(--paper)}
.nav a[aria-current]{background:var(--lemon);border-color:var(--ink)}
.nav a,.header-cta,.logo{white-space:nowrap}
/* 320px で英語のロゴの小さい説明文が 40px はみ出していた（2026-10-27）＝狭い画面だけ折り返す */
@media (max-width:400px){ .logo > span{min-width:0} .logo small{white-space:normal} }
/* 901〜1180px は1段に入りきらず、メニューと LINE ボタンが折り返して崩れた（2026-10-26 Mori）＝メニューを2段目に下ろす */
@media (min-width:901px) and (max-width:1180px){
  .header-in{flex-wrap:wrap;gap:6px 16px;padding-block:10px 0}
  .lang-switch{margin-left:auto}
  .nav{order:3;width:100%;margin:0;padding:0 0 10px}
}
@media (max-width:900px){
  .header-in{flex-wrap:wrap;gap:0 12px;min-height:60px;padding-block:8px 0}
  .header-cta{display:none}
  .nav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:14px;padding:4px 12px}
  .logo{font-size:21px}
  .logo img{width:38px;height:38px}
}

/* ヒーロー */
.hero{padding-block:64px 96px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero-in > *{min-width:0}
.eyebrow{display:inline-block;font-size:14px;font-weight:800;background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  padding:4px 16px;margin-bottom:22px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.hero h1{font-size:60px;line-height:1.3}
.mk{background:linear-gradient(transparent 58%,var(--lemon) 58%,var(--lemon) 92%,transparent 92%);padding:0 6px}
.hero-lead{margin-top:22px;font-size:19px}
.hero-facts{list-style:none;padding:0;margin:28px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.hero-facts li{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px 16px;display:grid;line-height:1.35;box-shadow:3px 3px 0 var(--ink)}
.hero-facts li:nth-child(2){background:var(--lemon-soft)}
.hero-facts b{font-family:var(--round);font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}
.hero-facts span{font-size:13px;color:var(--muted);font-weight:700}
.hero-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

/* 写真の舞台：水色の円の上に上半身。円の下半分の線だけ写真の上に重ねる */
.stage{--d:430px;margin:0;position:relative;justify-self:center;width:var(--d)}
/* 青丸と黒縁は .stage に描き、写真だけを .stage-photo で丸く切る（.stage-photo の中に描くと overflow で縁の右端が切れた・2026-10-26 Mori） */
.stage-photo{position:relative;z-index:1;width:var(--d);height:calc(var(--d) * 1.3);border-radius:0 0 calc(var(--d) / 2) calc(var(--d) / 2);overflow:hidden}
.stage::before,.stage::after{content:"";position:absolute;left:0;bottom:0;width:var(--d);height:var(--d);border-radius:50%;pointer-events:none}
.stage::before{background:var(--sky);border:3px solid var(--ink);z-index:0}
.stage::after{border:3px solid;border-color:transparent transparent var(--ink) var(--ink);transform:rotate(-45deg);z-index:2}
.stage-mori{position:absolute;top:calc(var(--d) * .03);left:50%;transform:translateX(-50%);width:calc(var(--d) * .9);max-width:none;z-index:1}
.bubble{position:absolute;top:1%;right:-4%;z-index:3;background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;
  padding:10px 18px;font-family:var(--round);font-size:20px;line-height:1.45;box-shadow:var(--sh);transform:rotate(4deg)}
.bubble::after{content:"";position:absolute;left:22px;bottom:-11px;width:18px;height:18px;background:var(--paper);
  border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.stage-cat{position:absolute;right:-6%;bottom:-3%;width:calc(var(--d) * .34);z-index:3}
.stage-name{position:absolute;left:-4%;bottom:8%;z-index:3;background:var(--lemon);border:2.5px solid var(--ink);border-radius:14px;
  padding:8px 16px;box-shadow:var(--sh);display:grid;line-height:1.35;transform:rotate(-3deg)}
.stage-name b{font-family:var(--round);font-weight:400;font-size:22px}
.stage-name span{font-size:13px;font-weight:700}
@media (max-width:900px){
  .hero{padding-block:36px 64px}
  .hero-in{grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:38px}
  .hero-lead{font-size:17px}
  .hero-facts b{font-size:21px}
  .hero-cta .btn{flex:1 1 100%}
  .stage{--d:min(300px,72vw)}
  .bubble{font-size:16px;padding:8px 14px;right:-10%}
  .stage-name{left:-10%}
  .stage-name b{font-size:18px}
  .stage-name span{font-size:12px}
}

/* 節 */
.sec{padding-block:var(--sec)}
.sec-paper{background:var(--paper);border-block:2px solid var(--ink)}
.sec-h,.label{display:flex;align-items:center;gap:12px}
.sec-h{font-size:40px;margin-bottom:20px}
.label{font-size:26px;margin-bottom:18px}
.sec-h::before,.label::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}
.sec-lead{color:var(--muted);max-width:44em;margin-bottom:28px}
.more{margin-top:28px;font-weight:800}
.more a{text-decoration:none}
@media (max-width:900px){ .sec-h{font-size:28px} .label{font-size:22px} }

/* 今日的一句＋最新文章（参考サイトの「今日の文法／今日の会話」の枠） */
.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.today-grid > *{min-width:0}
.phrase-card{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--sky);padding:28px 28px 24px;display:grid;gap:4px}
.phrase-ja{font-size:34px;line-height:1.8}
.phrase-ja .ja{font-weight:900}
.phrase-ro{color:var(--muted);font-size:15px;letter-spacing:.04em}
.phrase-zh{font-size:21px;font-weight:800;margin-top:4px}
.phrase-more{margin-top:14px;padding-top:14px;border-top:2px dashed var(--soft);font-size:15px;font-weight:700;text-decoration:none;line-height:1.7}
.note{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:8px;padding:28px 26px 20px;box-shadow:var(--sh);transform:rotate(.8deg)}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink)}
.note ul{list-style:none;margin:0;padding:0;display:grid}
.note li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 0;border-bottom:2px dashed var(--soft)}
.note li:first-child{padding-top:0}
.note time{font-size:13px;font-weight:800;color:var(--sky-ink);font-variant-numeric:tabular-nums}
.note li a{flex:1 1 100%;font-weight:800;color:var(--ink);text-decoration:none;line-height:1.6}
.note li a:hover{text-decoration:underline}
.note-more{display:inline-block;margin-top:14px;font-weight:800;text-decoration:none}
@media (max-width:900px){ .today-grid{grid-template-columns:1fr;gap:52px} .phrase-card{padding:22px 20px} .phrase-ja{font-size:27px} .note{transform:none;padding:26px 20px 18px} }

/* 特点：テープで留めたカード（参考サイトのキャラ紹介のカード） */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.feature{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:10px;padding:14px 14px 24px;box-shadow:var(--sh);display:grid;gap:10px;align-content:start}
.feature:nth-child(1){transform:rotate(-1.2deg)} .feature:nth-child(2){transform:rotate(.8deg)} .feature:nth-child(3){transform:rotate(-.6deg)}
.feature::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(255,215,94,.8);border:1.5px solid rgba(31,36,48,.25);transform:rotate(-3deg)}
.feature-pic{border:2px solid var(--ink);border-radius:6px;display:grid;place-items:center;padding:14px 0;background:var(--sky-soft)}
.feature:nth-child(2) .feature-pic{background:var(--lemon-soft)}
.feature:nth-child(3) .feature-pic{background:#FFE4DF}
.feature-pic img{width:132px}
.feature h3{font-size:23px;padding:4px 8px 0}
.feature p{color:var(--muted);font-size:16px;line-height:1.85;padding:0 8px}

/* 上課的老師 */
.teacher{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:center}
.teacher > *{min-width:0}
.teacher-photo{width:100%;filter:drop-shadow(6px 6px 0 var(--ink))}
.kicker{display:inline-block;font-weight:800;font-size:14px;background:var(--sky-soft);border:2px solid var(--ink);border-radius:999px;padding:2px 14px;margin-bottom:14px}
.teacher-text .sec-h::before{display:none}
.teacher-text p + p{margin-top:12px}
.books{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.books li{background:var(--bg);border:2px solid var(--ink);border-radius:10px;padding:4px 12px;font-weight:700;font-size:15px}

/* 內容・流程・價格 */
.topic-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.topic-grid li{position:relative;overflow:hidden;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:16px 18px 16px 26px;font-size:16px;line-height:1.7;color:var(--muted)}
.topic-grid li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--sky);border-right:2px solid var(--ink)}
.topic-grid li:nth-child(3n+2)::before{background:var(--lemon)}
.topic-grid li:nth-child(3n)::before{background:var(--coral)}
.topic-grid b{display:block;font-family:var(--round);font-weight:400;font-size:21px;color:var(--ink);margin-bottom:2px}
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{position:relative;background:var(--bg);border:2.5px solid var(--ink);border-radius:var(--r);padding:40px 24px 24px;box-shadow:var(--sh);display:grid;gap:8px;align-content:start}
.steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-42px;width:40px;border-top:3px dashed var(--ink)}
.steps .n{position:absolute;top:-28px;left:22px;width:54px;height:54px;border-radius:50%;background:var(--lemon);border:2.5px solid var(--ink);
  font-family:var(--round);font-size:28px;display:grid;place-items:center;line-height:1}
.steps h3{font-size:21px}
.steps p{color:var(--muted);font-size:16px;line-height:1.8}
.price-cards{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:32px;margin:32px 0}
.price-card{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);padding:26px 26px 22px;box-shadow:var(--sh)}
.pc-hl{background:var(--lemon-soft)}
.pc-tag{position:absolute;top:-16px;right:18px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;border-radius:999px;padding:3px 14px;transform:rotate(3deg)}
.pc-name{font-weight:800;color:var(--muted)}
.pc-price{font-family:var(--round);font-size:46px;line-height:1.4;font-variant-numeric:tabular-nums}
.pc-note{font-size:15px;color:var(--muted);line-height:1.7}
/* 10堂：分開買の値段を取り消し線で並べる（2026-10-27 Mori） */
.pc-was{font-weight:700;color:var(--muted);font-size:16px;margin-top:2px}
.pc-was s{text-decoration-thickness:2px}
.pc-save{display:inline-block;vertical-align:middle;font-family:var(--zh);font-size:15px;font-weight:800;line-height:1.5;color:var(--ink);background:var(--coral);border:2px solid var(--ink);border-radius:999px;padding:1px 12px;transform:rotate(-3deg);white-space:nowrap}
.price-was{display:block;font-size:.9em;color:var(--muted);font-weight:700}
.price-was s{text-decoration-thickness:2px}
@media (max-width:900px){
  .feature-grid,.topic-grid{grid-template-columns:1fr;gap:28px}
  .feature{transform:none!important}
  .teacher{grid-template-columns:1fr;gap:32px}
  .teacher-photo{max-width:300px;margin-inline:auto}
  .steps{grid-template-columns:1fr;gap:48px;margin-top:52px}
  .steps li:not(:last-child)::after{top:auto;bottom:-48px;right:auto;left:48px;width:0;height:44px;border-top:0;border-left:3px dashed var(--ink)}
  .price-cards{grid-template-columns:1fr;gap:32px}
  .pc-price{font-size:38px}
}

/* 記事カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:28px}
.card{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.card img{aspect-ratio:1200/630;object-fit:cover;width:100%;border-bottom:2.5px solid var(--ink)}
.card-body{display:grid;gap:8px;padding:16px 18px 20px;align-content:start}
.card-t{font-weight:800;font-size:18px;line-height:1.55}
.card-d{font-size:14px;color:var(--muted);line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr;gap:22px} }
/* 2026-10-26 Mori「スマホ版の時、筆記の表示記事は3つにして」＝首頁の喵喵筆記だけ。一覧ページは全部出す */
@media (max-width:640px){ .cards-home > :nth-child(n+4){display:none} }
.cat-pill{justify-self:start;display:inline-block;font-size:12px;font-weight:800;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);
  border-radius:999px;padding:1px 11px;text-decoration:none;letter-spacing:.04em;line-height:1.8}
.cat-pronunciation{background:var(--sky-soft)}.cat-grammar{background:#FFE2C4}.cat-conversation{background:#D6F2E1}.cat-study{background:#E8DFFA}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.cat-chips a{background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:5px 18px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px}
.cat-chips a[aria-current],.cat-chips a:hover{background:var(--lemon)}

/* FAQ */
.faq{display:grid;gap:14px}
.faq-item{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:0 22px}
.faq-item[open]{box-shadow:var(--sh)}
.faq-item summary{cursor:pointer;font-weight:800;padding:18px 40px 18px 0;list-style:none;position:relative;line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:16px;width:28px;height:28px;border-radius:50%;background:var(--lemon);
  border:2px solid var(--ink);display:grid;place-items:center;font-size:18px;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-a{padding-bottom:20px;color:var(--muted);font-size:16px;line-height:1.85}

/* CTA 帯 */
.cta-band{margin-block:var(--sec);background:var(--lemon-soft);border:2.5px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);
  padding:36px 40px;display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.cta-photo{position:relative;width:176px;height:176px;border-radius:50%;background:var(--sky);border:2.5px solid var(--ink);overflow:hidden}
.cta-photo img{position:absolute;width:210px;max-width:none;left:50%;margin-left:-105px;top:10px}
.cta-h{font-family:var(--round);font-size:29px;line-height:1.5;margin-bottom:6px}
.cta-text > p:not(.cta-h){color:var(--muted);font-size:16px;line-height:1.8}
.cta-text .btn{margin-top:20px}
@media (max-width:900px){
  .cta-band{grid-template-columns:1fr;padding:28px 22px;gap:16px;box-shadow:5px 5px 0 var(--ink)}
  .cta-photo{width:120px;height:120px}
  .cta-photo img{width:150px;margin-left:-75px;top:6px}
  .cta-h{font-size:23px}
  .cta-band .btn{width:100%}
}

/* ページ・記事 */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding-top:28px}
.crumbs a{color:var(--muted)}
.page-wrap,.list-wrap{padding-bottom:20px}
.page-head,.list-head{padding-block:28px 40px;max-width:820px}
.page-head h1,.list-head h1{font-size:46px}
.page-head .lead,.list-head p{margin-top:14px;color:var(--muted);font-size:19px}
.page-head-photo{max-width:none;display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:center}
.page-photo{width:260px;filter:drop-shadow(5px 5px 0 var(--ink))}
@media (max-width:900px){
  .page-head h1,.list-head h1{font-size:31px}
  .page-head .lead,.list-head p{font-size:17px}
  .page-head-photo{grid-template-columns:1fr;gap:20px}
  .page-photo{width:200px;order:-1}
}
.article-wrap{max-width:860px}
.article-head{padding-block:24px 36px;display:grid;gap:16px}
.article-head h1{font-size:40px;line-height:1.45}
.article-head .lead{font-size:19px;line-height:1.9}
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.byline img{border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
@media (max-width:900px){ .article-head h1{font-size:29px} .article-head .lead{font-size:17px} }
.toc{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:20px 26px;margin-bottom:48px}
.toc-h{font-family:var(--round);font-size:18px;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.4em;display:grid;gap:2px}
.toc a{text-decoration:none;font-weight:700;font-size:16px}
.prose{max-width:760px}
.prose-page{max-width:820px}
.prose > * + *{margin-top:1.25em}
.prose h2{font-size:31px;margin-top:2.6em;padding-top:.2em;scroll-margin-top:90px;display:flex;gap:12px;align-items:baseline}
.prose h2::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);transform:translateY(-3px)}
.prose h3{font-size:23px;margin-top:2em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:.35em}
.prose strong{background:linear-gradient(transparent 62%,var(--lemon) 62%)}
.prose blockquote{margin-left:0;margin-right:0;border:2px solid var(--ink);background:var(--paper);padding:14px 20px;border-radius:12px}
.prose .ja{font-size:1.04em}
@media (max-width:900px){ .prose h2{font-size:25px} .prose h3{font-size:21px} .table table{font-size:15px} .table th,.table td{padding:9px 10px} }
.table{overflow-x:auto;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
.table table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.7}
.table table.wide{min-width:640px}
.table table.wide td{white-space:nowrap}
.table th,.table td{padding:11px 14px;border-bottom:1.5px solid var(--soft);text-align:left;vertical-align:top}
.table th{background:var(--lemon-soft);font-size:14px;font-weight:800;border-bottom:2px solid var(--ink)}
.table tr:last-child td{border-bottom:0}
/* 売るページの表の1列目（單堂・10 堂・プラン）を縦に1文字ずつ折らない（2026-10-27） */
.prose-page .table th:first-child,.prose-page .table td:first-child{white-space:nowrap}
.point{background:var(--lemon-soft);border:2.5px solid var(--ink);border-radius:var(--r);padding:20px 24px;box-shadow:var(--sh)}
.point-h{font-family:var(--round);font-size:20px;margin-bottom:6px}
.point-h::before{content:"✓ ";color:#1F9A61}
.point > * + *{margin-top:.6em}
.quiz{background:var(--paper);border:2.5px dashed var(--ink);border-radius:var(--r);padding:22px 24px}
.quiz-h{font-family:var(--round);font-size:20px;color:var(--sky-ink);margin-bottom:8px}
.quiz ol{margin:0;padding-left:1.4em;display:grid;gap:14px}
.quiz details{margin-top:4px}
.quiz summary{cursor:pointer;color:var(--sky-ink);font-weight:800;font-size:15px}
.quiz .a{background:var(--sky-soft);border-radius:10px;padding:10px 14px;margin-top:6px;font-size:16px}
.video{margin-inline:0}
.video video{width:100%;max-width:360px;border-radius:var(--r);border:2.5px solid var(--ink);box-shadow:var(--sh);background:#000;aspect-ratio:9/16}
.video figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.related{padding-block:var(--sec) 0}
.related h2{font-size:28px;margin-bottom:4px}
.empty{padding:40px 0;color:var(--muted)}
.list-wrap .cards{margin-top:28px}
.nf{text-align:center;padding-block:var(--sec);display:grid;justify-items:center;gap:16px}

/* フッター */
.site-footer{background:var(--paper);border-top:2.5px solid var(--ink);margin-top:var(--sec);padding-block:60px 28px}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:12px}
.footer-links{display:grid;gap:6px;align-content:start}
.footer-links .fh{font-family:var(--round);font-size:17px;margin-bottom:4px}
.footer-links a{color:var(--ink);text-decoration:none;font-size:15px}
.footer-links a:hover{text-decoration:underline}
.copy{color:var(--muted);font-size:13px;margin-top:40px}
@media (max-width:900px){ .footer-in{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} }

/* スマホ下の固定バー */
.sticky-cta{display:none}
@media (max-width:900px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;background:var(--bg);border-top:2px solid var(--ink);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .sc-price{font-size:12px;color:var(--muted);line-height:1.3;font-weight:700;display:grid}
  .sc-price b{font-family:var(--round);font-weight:400;font-size:19px;color:var(--ink)}
  .sticky-cta .btn{flex:1;min-height:50px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}
}
/* 言語の切り替え（中文／EN／日本語・2026-10-25） */
.lang-switch{display:flex;gap:2px;border:2px solid var(--ink);border-radius:999px;padding:2px;background:var(--paper);flex:none}
.lang-switch a{font-size:13px;font-weight:800;color:var(--ink);text-decoration:none;padding:3px 10px;border-radius:999px;line-height:1.5;white-space:nowrap}
.lang-switch a[aria-current]{background:var(--ink);color:#fff}
.lang-switch a:not([aria-current]):hover{background:var(--lemon-soft)}
@media (max-width:900px){ .lang-switch{margin-left:auto} .lang-switch a{padding:2px 8px;font-size:12px} }
.today-one{grid-template-columns:minmax(0,640px)}
/* 日本語のページ：本文は日本の字形、見出しは Zen Maru Gothic（粉圓には日本の新字体が無い字がある） */
html[lang="ja"] body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP","Meiryo",sans-serif}
html[lang="ja"]{--round:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{font-weight:700}
html[lang="ja"] .hero h1{font-size:48px;line-height:1.4}
@media (max-width:900px){ html[lang="ja"] .hero h1{font-size:clamp(26px,7.6vw,32px)} }
/* 英語のページ：欧文の書体と、少し詰めた行間 */
html[lang="en"] body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,var(--zh);line-height:1.75}
html[lang="en"] .hero h1{font-size:50px;line-height:1.25}
html[lang="en"] .prose .ja{font-size:1.06em}
@media (max-width:900px){ html[lang="en"] .hero h1{font-size:34px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} .btn:hover,.card:hover{transform:none} }