/* 早口言葉図鑑 共通の見た目。部品（枠・ボタン）は parts.css の .p-*（チャッピーの絵の9スライス）だけを使う。
   CSSの四角い線・角丸・グラデで枠を作らない（docs\部品表.md）。重なり順：ボタン類 > 文字 > オウム・飾り > 枠 > 背景 */
:root{--red:#e8141c;--yel:#ffd60a;--navy:#13235c;--ink:#14171f;--sub:#4a5270;--bg:#fff8e1;
  --f:"Hiragino Maru Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 背景＝チャッピーの黄色い柄（10/20殿「黄色いハッピーな感じ」）。つなぎ目なしのタイル */
body{margin:0;background:var(--bg) url(/img/bg_tile.webp?v=d63de6) 0 0/360px 360px repeat;color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.75}
a{color:inherit}
/* 目的別パネルの中の背景絵（6枚で約100KB）は、区画が近づいてから読む（app.js が .vis を付ける）＝トップのメイン絵を先に（6i） */
.pnls:not(.vis) [class*="p-panel_"]{background-image:none}
/* ボタンはどれも連打でスマホが拡大しないように（チェックリスト6b） */
button{touch-action:manipulation}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 文字のふち（text-shadow の重ねは使わない） */
.st-w{-webkit-text-stroke:5px #fff;paint-order:stroke fill}
.st-n{-webkit-text-stroke:7px var(--navy);paint-order:stroke fill}
.st-k{-webkit-text-stroke:6px #111;paint-order:stroke fill}
/* 重なり順 */
.deco{position:absolute;z-index:1;pointer-events:none}
.txt{position:relative;z-index:3}
.btn,button,a.btnlike,input,select{position:relative;z-index:5}

/* ===== ヘッダー（紺の帯）・メニュー ===== */
.hdr{background:var(--navy);color:#fff;position:relative;z-index:10;border-bottom:4px solid var(--yel)}
.hdr .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;text-decoration:none;white-space:nowrap}
.logo img{width:40px}
.gnav{margin-left:auto;display:flex;gap:4px;flex-wrap:nowrap}
.gnav a{text-decoration:none;font-weight:800;font-size:15px;padding:6px 12px;white-space:nowrap;border-bottom:3px solid transparent}
html{scroll-behavior:smooth}
#level,#purpose,#ranking{scroll-margin-top:10px}
.gnav a[aria-current]{border-bottom-color:var(--yel)}
.mbtn{display:none;margin-left:auto;background:none;border:0;padding:0;cursor:pointer;color:#fff;font:800 10px var(--f);text-align:center}
.mbtn img{width:44px;display:block}
@media (max-width:900px){.gnav{display:none}.mbtn{display:block}
  .gnav.open{display:flex;flex-direction:column;position:absolute;right:8px;top:62px;background:var(--navy);padding:8px 4px;border:3px solid var(--yel);border-radius:4px;z-index:30}
  .gnav.open a{font-size:16px;padding:10px 18px}}

/* ===== メイン絵 ===== */
.hero{background:url(/img/parts/hero_bg.webp?v=b7b3fb) center/cover var(--yel);position:relative;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;min-height:360px}
.hero h1{margin:0;font-size:clamp(48px,9vw,104px);line-height:1.05;font-weight:900;color:var(--red);letter-spacing:.02em}
.hero h1 .z{color:var(--yel)}
.hero .lead{margin:10px 0 0;font-size:clamp(17px,2.4vw,26px);font-weight:900;color:var(--navy)}
.hero .lead b{color:var(--red);font-size:1.25em;white-space:nowrap}
.hero .lead .nw{white-space:nowrap}
@media (max-width:640px){.hero .lead .br{display:block}}
.hero .bird{width:min(42vw,420px);position:relative;z-index:2}
@media (max-width:640px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:18px;padding-bottom:8px;text-align:center}
  .hero .bird{width:62vw;margin:-6px auto 0}}

.hero2{background:var(--red)}
.hero2 img{display:block;width:100%;height:auto;max-width:1600px;margin:0 auto}

/* ===== 帯（区画の背景） ===== */
.bnd-n{background:url(/img/parts/band_navy.webp?v=6d0923) center/cover var(--navy)}
/* 検索窓のまわりも全体と同じ背景（10/20殿「検索窓の近くの背景だけ違うからとういつして」） */
.bnd-y{background:none}
.sec{padding:10px 0}
main.wrap>.sec:first-child{padding-top:16px}

/* ===== 見出しラベル（帯の文字は帯の色の真ん中） ===== */
/* 見出しリボン＝チャッピーの絵をそのままの形で（引き伸ばさない）。文字は帯の部分（測った位置）に、文字数に合わせた大きさで重ねる
   10/20 殿「横にまっすぐ」で描き直し。赤：帯 x 27%〜91%・縦の中心 63%（1899x358）／紺：帯 x 28%〜94%・縦の中心 59%（1929x376）＝元絵を測った値 */
.lbl{--w:400px;--n:6;position:relative;display:block;width:var(--w);max-width:100%;aspect-ratio:1899/358;margin:0 0 6px;
  background:center/100% 100% no-repeat;font-weight:900;color:#fff;line-height:1.12;-webkit-text-stroke:5px #13235c;paint-order:stroke fill}
.lbl.p-lbl_red{background-image:url(/img/parts/lbl_red.webp?v=f0272e)}
.lbl.p-lbl_crown{background-image:url(/img/parts/lbl_crown.webp?v=98b154);aspect-ratio:1929/376}
.lbl span{position:absolute;left:27%;right:9%;top:63%;transform:translateY(-50%);text-align:center;z-index:3;
  font-size:min(26px,calc(var(--w) * .6 / var(--n)))}
.lbl.p-lbl_crown span{left:28%;right:6%;top:59%;font-size:min(26px,calc(var(--w) * .62 / var(--n)))}
@media (max-width:640px){.lbl{--w:330px}}
.lblrow{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.lblrow .lbl{margin:0;flex:none}
/* 説明文は箱に入れない（CSSの四角い枠は使わない決まり）。柄の上でも読めるよう白の細いふち */
.lblrow .lblnote{margin:0;font-size:14px;font-weight:800;line-height:1.6;color:var(--navy);-webkit-text-stroke:3px #fff;paint-order:stroke fill}
@media (max-width:640px){.lblrow{flex-direction:column;align-items:flex-start;gap:6px}.lblrow .lblnote{font-size:13px}}
.lbl .y{color:var(--yel)}

/* ===== カード ===== */
.card{position:relative;padding:4px 8px}

/* ===== 丸ボタン（読み上げ・タイム・録音・停止） ===== */
.rbtns{display:flex;gap:14px;justify-content:center}
.rbtn{background:none;border:0;padding:0;cursor:pointer;font:800 13px/1.3 var(--f);color:var(--ink);text-align:center;touch-action:manipulation}
.rbtn i{display:block;width:76px;height:76px;margin:0 auto 4px;background:center/contain no-repeat}
.rbtn.speak i{background-image:url(/img/parts/btn_speak.webp?v=5d9800)}.rbtn.speak:active i,.rbtn.speak.on i{background-image:url(/img/parts/btn_speak_on.webp?v=f2b383)}
.rbtn.timer i{background-image:url(/img/parts/btn_timer.webp?v=8bb648)}.rbtn.timer:active i,.rbtn.timer.on i{background-image:url(/img/parts/btn_timer_on.webp?v=973469)}
.rbtn.rec i{background-image:url(/img/parts/btn_rec.webp?v=c996dc)}.rbtn.rec:active i,.rbtn.rec.on i{background-image:url(/img/parts/btn_rec_on.webp?v=c24f0e)}
.rbtn.stop i{background-image:url(/img/parts/btn_stop.webp?v=17b461)}.rbtn.stop:active i,.rbtn.stop.on i{background-image:url(/img/parts/btn_stop_on.webp?v=8c236d)}
.rbtn span{white-space:nowrap}
@media (max-width:640px){.rbtns{gap:4px}.rbtn{font-size:12px}.rbtn i{width:58px;height:58px}}

/* ===== 難しさボタン ===== */
.lvs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lvb{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;text-decoration:none;color:#fff;font-weight:900;font-size:clamp(17px,1.9vw,22px);line-height:1.15;touch-action:manipulation}
.lvb .stars{display:flex;gap:1px;margin-bottom:2px}.lvb .stars img{width:15px}
.lvb .nm{white-space:nowrap}
@media (max-width:640px){.lvs{grid-template-columns:repeat(2,1fr)}.lvs .lvb:last-child{grid-column:1/-1}}

/* ===== 目的別パネル ===== */
.pnls{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pnl{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);text-align:center;min-height:200px}
.pnl .ttl{color:#fff;font-weight:900;font-size:17px;line-height:1.2;margin-top:-34px;min-height:34px;display:flex;align-items:center;white-space:nowrap}
.pnl img{width:110px;margin:6px 0 2px;position:relative;z-index:2}
.pnl .ds{font-size:13px;font-weight:700;line-height:1.45;position:relative;z-index:3}
@media (max-width:900px){.pnls{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.pnls{grid-template-columns:repeat(2,1fr)}}

/* ===== ランキング ===== */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rank li{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:8px}
.rank img.md{width:52px;height:60px;object-fit:contain;display:block}
.rank .tx{font-weight:900;font-size:17px;line-height:1.35}
.rank .stars img{width:16px}
@media (max-width:640px){.rank li{grid-template-columns:42px 1fr;gap:6px}.rank img.md{width:42px;height:50px;grid-row:1/3}
  .rank .tx{font-size:15px}.rank .stars{grid-column:2;line-height:1}.rank .stars img{width:13px}}

/* ===== タグ ===== */
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
@media (max-width:640px){.tags{display:grid;grid-template-columns:1fr 1fr}.tags .tg{justify-content:center}}
.tg{display:inline-flex;align-items:center;min-height:30px;text-decoration:none;font-weight:800;font-size:14px;white-space:nowrap;color:var(--navy);touch-action:manipulation}

/* ===== 検索 ===== */
.srch{display:flex;align-items:center;gap:8px}
.srch input{flex:1;min-width:0;border:0;background:transparent;font:700 16px var(--f);padding:4px 2px;outline:none}
/* ※ .p-* の部品に border:0 を書かない（border-image が消える） */
.srch .go{cursor:pointer;color:#fff;font:900 18px var(--f);white-space:nowrap;min-height:44px;padding:0;flex:none}
.srch .go.p-lv4{border-width:16px 26px 18px 26px}
/* 10/20殿「スマホ版で検索窓が縦長すぎ」＝枠とボタンを細く（90px→約60px） */
@media (max-width:640px){
  .srch.p-search{border-width:11px 13px 12px 13px}
  .srch .go{font-size:15px;min-height:0;height:34px}
  .srch .go.p-lv4{border-width:9px 15px 10px 15px}
}

/* ===== 練習パネル（読み上げ・タイム・録音） ===== */
/* デザイン案どおり：左＝文と読み／右＝難しさ・丸ボタン3つ・速さ・タイム（縦の仕切り線）／下＝ランダム等・注意書き */
.pr{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"L R" "F F" "N N";gap:4px 18px;align-items:center}
.pr .prL{grid-area:L;min-width:0}
.pr .prR{grid-area:R;border-left:3px solid #d9dce8;padding-left:16px;text-align:center}
.pr .prF{grid-area:F;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pr .note{grid-area:N;text-align:center}
.pr .tt{display:block;font-size:clamp(26px,3.6vw,44px);font-weight:900;line-height:1.3;overflow-wrap:anywhere;word-break:auto-phrase}
.it .t,.rank .tx,.pageh1{word-break:auto-phrase}
.pr .tk{display:block;color:var(--sub);font-weight:700;margin-top:4px;overflow-wrap:anywhere}
.pr .meta{margin:0 0 6px;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:4px}
.pr .stars img{width:20px}
.pr .rate{display:flex;gap:4px;justify-content:center;align-items:center;margin:6px 0 2px}
.pr .rate b{font-size:12px}
.pr .rate button{cursor:pointer;font:800 12px var(--f);color:var(--navy);background:none;min-height:28px}
.pr .tmline{margin:4px 0 0;font-size:14px;font-weight:900}
.pr .tm{font:900 20px/1 ui-monospace,Consolas,monospace;color:var(--navy);display:inline-block;min-width:3.6em}
.pr .best{display:block;font-size:13px;color:var(--red);min-height:1.3em}
.pr .prF .go{color:#fff;font:900 16px var(--f);min-height:48px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.pr audio{display:block;margin:6px auto 0;max-width:100%}
@media (max-width:760px){
  .pr{grid-template-columns:1fr;grid-template-areas:"L" "R" "F" "N";text-align:center}
  .pr .prR{border-left:0;border-top:3px solid #d9dce8;padding:8px 0 0;margin-top:6px}
}
.pr audio[hidden],[hidden]{display:none!important}
.note{font-size:12px;color:var(--sub);margin:8px 0 0}

/* ===== 一覧の行 ===== */
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:760px){.items{grid-template-columns:1fr}}
.it{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;padding:2px 4px}
.it .t{font-weight:900;font-size:18px;line-height:1.45;overflow-wrap:anywhere}
.it .t a{text-decoration:none}.it .t a:hover{text-decoration:underline}
.it .k{grid-column:1;font-size:13px;color:var(--sub);line-height:1.5;overflow-wrap:anywhere}
.it .m{grid-column:1;font-size:12px;font-weight:800;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.it .m img{width:13px}
.it .say{grid-column:2;grid-row:1/4;width:46px;height:46px;border:0;background:url(/img/parts/btn_speak.webp?v=5d9800) center/contain no-repeat;cursor:pointer;touch-action:manipulation}
.it .say:active{background-image:url(/img/parts/btn_speak_on.webp?v=f2b383)}.chipsw{display:grid;gap:8px;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chips b{font-size:13px;margin-right:4px;white-space:nowrap}
.chips button{cursor:pointer;font:800 13px var(--f);color:var(--navy);background:none;min-height:30px}
.cntline{font-weight:900;margin:6px 0 10px}
.cntline #cnt{color:var(--red);font-size:1.3em}

/* ===== 記事の本文 ===== */
.art{max-width:860px;margin:0 auto}
.art h2.lbl{margin-top:14px}
.art p{margin:0 0 10px}
.box{padding:6px 12px;margin:0 0 16px}
.box p:last-child{margin-bottom:0}
.faq dt{font-weight:900;margin-top:12px}.faq dt::before{content:"Q. ";color:var(--red)}
.faq dd{margin:4px 0 0}.faq dd::before{content:"A. ";font-weight:900;color:var(--navy)}
.crumb{font-size:13px;margin:10px 0}.crumb a{color:var(--navy)}
.src{font-size:12px;color:var(--sub)}
.pageh1{font-size:clamp(26px,4vw,40px);line-height:1.3;font-weight:900;margin:8px 0 6px}
.lead2{font-weight:700}

/* ===== 印刷用プリント（A4・高齢者/学校向け）＝印刷するときは一覧だけを大きな字で ===== */
.printbtn{display:flex;justify-content:center;margin:10px 0}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  .hdr,.ftr,.totop,.crumb,.lbl,.chipsw,.srch,.practice,#more,.say,.printbtn,.art>p,.pageh1+p,img{display:none!important}
  main>*:not(.items):not(.ptitle){display:none!important}
  .ptitle{display:block!important;font-size:20pt;font-weight:900;text-align:center;margin:0 0 6mm}
  .items{display:block!important}
  .it{display:block!important;border:0!important;border-bottom:1px dashed #999!important;padding:3mm 0!important;break-inside:avoid}
  .it[hidden]{display:block!important}
  .it .t{font-size:20pt}.it .k{font-size:12pt;color:#333}.it .m{display:none}
}
.ptitle{display:none}

/* ===== 運営者情報の表 ===== */
.info{width:100%;border-collapse:collapse;font-size:15px}
.info th,.info td{padding:10px 8px;vertical-align:top;border-bottom:2px dashed #d3d7e6;text-align:left;line-height:1.7}
.info tr:last-child th,.info tr:last-child td{border-bottom:0}
.info th{width:9em;white-space:nowrap;color:var(--navy);font-weight:900}
@media (max-width:640px){.info th,.info td{display:block;width:auto;border:0;padding:2px 4px}.info td{padding-bottom:10px;border-bottom:2px dashed #d3d7e6}.info th{padding-top:10px}}

/* ===== コラム ===== */
.colimg{display:block;width:100%;height:auto;margin:6px 0 12px;border-radius:6px}
.colgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:640px){.colgrid{grid-template-columns:1fr}}
.colcard{display:grid;gap:6px;text-decoration:none;color:var(--ink);padding:8px 10px}
.colcard .colimg{margin:0}
.colcard b{font-size:18px;line-height:1.4}
.colcard span{font-size:14px;color:var(--sub);line-height:1.6}

/* ===== お問い合わせフォーム（入力欄は紺の太い枠＝検索窓と同じ部品） ===== */
.cform{display:grid;gap:14px;padding:14px 16px}
.cform label{display:grid;gap:4px}
.cform label b{font-size:16px;color:var(--navy)}
.cform .fin{width:100%;font:700 16px var(--f);color:var(--ink);padding:2px 4px;outline:none;appearance:none;-webkit-appearance:none}
.cform select.fin{cursor:pointer;padding-right:24px}
.cform label:has(select){position:relative}
.cform label:has(select)::after{content:"▼";position:absolute;right:30px;bottom:24px;font-size:13px;color:var(--navy);pointer-events:none;z-index:6}
.cform .fin:focus{filter:drop-shadow(0 0 4px var(--yel))}
.cform textarea.fin{resize:vertical;min-height:150px}
.cform ::placeholder{color:#9aa0b5;font-weight:500}

/* ===== 共有ボタン ===== */
.shares{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:10px 0 6px}
.shl{font-size:13px;font-weight:900;color:var(--navy);margin-right:2px}
/* 10/20殿「共有ボタンいろつけて」＝各サービスの色の丸いボタン・紺のふち */
.sh{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:2.5px solid var(--navy);border-radius:999px;font:900 13px var(--f);color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;touch-action:manipulation;box-shadow:0 3px 0 var(--navy)}
.sh:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.sh-x{background:#000}.sh-line{background:#06c755}.sh-facebook{background:#1877f2}.sh-threads{background:#000}
.sh-native{background:#ff9f0a}.sh-copy{background:#e8141c}

/* ===== 検索の候補 ===== */
.srch{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:3px solid var(--navy);border-radius:12px;box-shadow:0 6px 0 rgba(19,35,92,.25);z-index:50;max-height:min(70vh,520px);overflow:auto}
.sugg a{display:flex;align-items:center;gap:8px;padding:9px 14px;text-decoration:none;color:var(--ink);font-weight:800;border-bottom:1px dashed #dde0ec}
.sugg a.on,.sugg a:hover{background:#fff4c2}
.sugg .sg-t{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.45}
.sugg .sg-l{flex:none;font-size:12px;color:#c0122a}
.sugg .sg-p{flex:none;font-size:11px;color:#fff;background:var(--navy);padding:1px 7px;border-radius:9px}
.sugg .sg-all{justify-content:center;color:var(--navy);background:#f3f5fb;border-bottom:0}
.sugg .sg-msg{margin:0;padding:12px 14px;color:var(--sub);font-weight:700}
.it.hit{outline:4px solid var(--yel);outline-offset:2px}

/* ===== フッター・トップへ ===== */
.ftr{background:var(--navy);border-top:4px solid var(--yel);color:#fff;padding:22px 0;margin-top:30px;font-size:14px}
.ftr a{color:#fff;margin-right:14px;white-space:nowrap}
/* 右下の「トップへ戻る」（10/20殿：PCでも出す）。少し下へ進んだら出る */
.totop{position:fixed;right:16px;bottom:18px;width:60px;height:60px;background:url(/img/parts/btn_top.webp?v=153170) center/contain no-repeat;border:0;z-index:40;display:none;cursor:pointer;touch-action:manipulation}
.totop.show{display:block}
@media (max-width:640px){.totop{width:52px;height:52px;right:12px;bottom:14px}}
/* 更新日（見出しのまとまりの下・右寄せの小さな字） */
.upd{margin:2px 0 8px;text-align:right;font-size:12px;font-weight:700;color:#5a6280}