/* 読み物・案内ページ（ガイド・FAQ・資料室・お知らせ・クーポン・質問）を携帯機ドットにそろえる上書き。
   各ページの元の <style> の「後ろ」で読み込む（元の色の変数を P3 の色に置き換え、角・枠・文字をドットに寄せる）。
   p3.css と一緒に使う。<body class="p3 p3g">。 */
:root{
  --teal-50:#e9f4d6; --teal-100:#cfe8a8; --teal-400:#2e8a28; --teal-600:#173404; --teal-900:#173404;
  --gold:#e8b828; --gold-d:#7a5410; --gold-50:#fff4c8;
  --amber-50:#fff4c8; --amber-700:#6b4a00;
  --red-50:#fde4dc; --red-600:#c03820; --coral-50:#fff4c8; --coral-600:#6b4a00;
  --ink:#283018; --muted:#6a7258; --line:#d8d0a8; --card:#fffbe6; --bg:#24420e;
}
body.p3g{padding-bottom:36px}
.p3g *{border-radius:0!important}
.p3g h1,.p3g h2,.p3g h3,.p3g .tag,.p3g .n,.p3g .cta,.p3g button{font-weight:400}

/* 上の帯：クリームの細い窓と「もどる」 */
.p3g header{position:sticky; top:0; z-index:20; background:var(--p3-cream); color:var(--p3-ink); padding:9px 14px;
  box-shadow:inset 0 -3px 0 var(--p3-green),inset 0 -5px 0 var(--p3-gold),inset 0 -6px 0 var(--p3-green)}
.p3g header .wrap{padding:0}
.p3g .back{color:var(--p3-ink); font-size:14px; gap:6px}
.p3g .back svg{width:16px; height:16px; color:var(--p3-red); stroke-width:3}

/* 表題：深緑の窓に金の札 */
.p3g .hero{background:var(--p3-green); color:var(--p3-cream); width:calc(100% - 28px); max-width:492px; margin:14px auto 0; padding:16px 16px 15px;
  box-shadow:inset 0 0 0 3px var(--p3-green2),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green2)}
.p3g .hero .wrap{padding:0}
.p3g .hero .tag{display:inline-block; background:var(--p3-gold); color:#3a2c07; font-size:12px; line-height:1; letter-spacing:.04em; padding:6px 9px 5px; box-shadow:inset 0 0 0 2px var(--p3-green2)}
.p3g .hero h1{font-size:20px; line-height:1.45; margin-top:9px; color:var(--p3-cream); text-wrap:balance}
.p3g .hero p,.p3g .hero .read{font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0; color:#dcebc8; font-size:13px; line-height:1.75; margin-top:7px}
.p3g .hero .read{color:var(--p3-gold); font-family:var(--p3-font); -webkit-font-smoothing:none; font-size:12px}

/* 節の見出し：地の上に白抜きの文字、番号は金の札 */
.p3g .sec{margin-top:20px}
.p3g .sec h2{color:var(--p3-cream); font-size:16px; line-height:1.4; text-shadow:2px 2px 0 var(--p3-green2); margin-bottom:9px; gap:9px}
.p3g .sec h2 .n{width:26px; height:26px; background:var(--p3-gold); color:#3a2c07; text-shadow:none; font-family:var(--p3-font); font-size:13px;
  box-shadow:inset 0 0 0 2px var(--p3-green2)}
.p3g .sec h2 .n .p3-ic{width:15px; height:15px}

/* 本文の窓 */
.p3g .qa{background:var(--p3-cream); border:0; box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3g .qa .a{font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0}
.p3g .card,.p3g .how,.p3g .intro{background:var(--p3-cream); border:0; padding:16px 16px 15px; font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3g .card b,.p3g .how b{color:var(--p3-green); font-weight:700}
.p3g .card h2,.p3g .how h2,.p3g .card h3{font-family:var(--p3-font); -webkit-font-smoothing:none; color:var(--p3-green)}

/* ヒント・まとめ・注意 */
.p3g .tip,.p3g .note,.p3g .gift{background:#fff4c8; color:#5a4008; box-shadow:inset 0 0 0 2px var(--p3-gold3); font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0}
.p3g .band,.p3g .formula,.p3g .ex,.p3g .flow .s{background:#e9f4d6; color:var(--p3-green); box-shadow:inset 0 0 0 2px #9cc878}
.p3g .band.red,.p3g .warn{background:#fde4dc; color:#8a2410; box-shadow:inset 0 0 0 2px #e08870}
.p3g .formula{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400}
.p3g .hint{display:inline-block; font-family:var(--p3-font); -webkit-font-smoothing:none; font-size:11px; line-height:1; padding:4px 6px 3px; margin-right:6px; vertical-align:1px;
  background:var(--p3-gold); color:#3a2c07; box-shadow:inset 0 0 0 2px var(--p3-gold3)}
.p3g .hint.warn{background:var(--p3-red); color:#fff; box-shadow:inset 0 0 0 2px var(--p3-red2)}

/* 流れの矢印（三角） */
.p3g .flow .arw,.p3g .arw:empty{font-size:0; width:0; height:0; flex:none; align-self:center; border-left:7px solid var(--p3-leaf2); border-top:6px solid transparent; border-bottom:6px solid transparent}
.p3g .flow .s .ic,.p3g .step .ic{display:flex; justify-content:center; align-items:center}
.p3g .step .ic{background:#e9f4d6; box-shadow:inset 0 0 0 2px #9cc878}

/* 丸数字・番号 */
.p3g .num,.p3g .no,.p3g .qm{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; background:var(--p3-gold); color:#3a2c07; box-shadow:inset 0 0 0 2px var(--p3-gold3)}

/* 行動ボタン：Aボタン */
.p3g .cta{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--p3-red); color:#fff; font-family:var(--p3-font); -webkit-font-smoothing:none; font-size:15px; letter-spacing:.02em;
  padding:14px 12px 13px; text-shadow:1px 1px 0 var(--p3-red2); box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 -6px 0 #a8341e}
.p3g .cta::before{content:"A"; display:inline-grid; place-items:center; width:20px; height:20px; flex:none; background:var(--p3-cream); color:var(--p3-red); font-family:var(--p3-num); font-size:9px; text-shadow:none}
.p3g .cta:active{transform:translateY(2px)}
.p3g .cta{flex-wrap:wrap}
.p3g .cta small{flex-basis:100%; font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0; font-size:11.5px; color:#ffe4d8; text-shadow:none}
.p3g .cta.alt{background:var(--p3-cream); color:var(--p3-ink); border:0; text-shadow:none; box-shadow:inset 0 0 0 2px var(--p3-green),inset 0 -4px 0 #d8d0a8}
.p3g .cta.alt::before{display:none}
.p3g .cta.soon{background:#c8c8b0; color:#f4f4e4; text-shadow:none; box-shadow:inset 0 0 0 3px #888870}
.p3g .cta.soon::before{color:#888870}
.p3g .cta.soon small{color:#f4f4e4}
/* ページ内のリンクボタン（p3.css の a{color:inherit} より強く） */
.p3g .contact a,.p3g a.clink,.p3g a.open{color:#fff; background:var(--p3-leaf2); font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400; text-shadow:1px 1px 0 #134a10;
  box-shadow:inset 0 0 0 3px #134a10,inset 0 -5px 0 #1e6a1c}
.p3g .contact a{background:var(--p3-red); text-shadow:1px 1px 0 var(--p3-red2); box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 -5px 0 #a8341e}
.p3g .card.tokuten a.clink{background:var(--p3-gold2); color:#3a2c07; text-shadow:none; box-shadow:inset 0 0 0 3px #6b4a00,inset 0 -5px 0 #b88a10}
/* コピーなどの小ボタン：Bボタン */
.p3g .copybtn{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400; background:var(--p3-cream); color:var(--p3-ink); box-shadow:inset 0 0 0 2px var(--p3-green),inset 0 -3px 0 #d8d0a8}
.p3g .copybtn.done{background:var(--p3-gold); color:#3a2c07}
.p3g .tmpl{background:#173404; color:#fffbe6; box-shadow:inset 0 0 0 2px var(--p3-gold3)}

/* チップ・タブ */
.p3g .chip,.p3g .tab{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important}

/* 地の上に直接出る文字 */
.p3g .loading,.p3g .empty,.p3g .foot{color:#dcebc8!important; font-family:var(--p3-font)}
.p3g .notice{background:#fff4c8; color:#5a4008; border:0; box-shadow:inset 0 0 0 3px var(--p3-gold3); font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0}

/* 入力欄 */
.p3g input,.p3g textarea,.p3g select{border-radius:0; font-family:var(--p3-read)}

/* 線のアイコン */
.p3g .p3-ic{width:16px; height:16px}

/* ===== 表題のドット絵（data-px） ===== */
.p3g .hero{position:relative}
.p3g .hero.has-deco .wrap{padding-right:64px}
.p3g .hero .deco{position:absolute; right:14px; bottom:12px; line-height:0}

/* ===== お知らせ（ゆうびんばこ） ===== */
.p3g .tabs{gap:6px}
.p3g .tabs .tab{background:var(--p3-cream); color:var(--p3-ink); border:0; padding:9px 6px 8px; box-shadow:inset 0 0 0 2px var(--p3-green),inset 0 -4px 0 #d8d0a8; cursor:pointer}
.p3g .tabs .tab.on{background:var(--p3-gold); color:#3a2c07; box-shadow:inset 0 0 0 2px var(--p3-gold3),inset 0 -4px 0 #c89820}
.p3g .card.tokuten{background:linear-gradient(180deg,#fff4c8 0%,#f8e090 100%); border:0; box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 6px var(--p3-gold2),inset 0 0 0 7px var(--p3-green)}
.p3g .badge{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; font-size:11px; padding:4px 8px 3px}
.p3g .b-news{background:#e9f4d6; color:var(--p3-green); box-shadow:inset 0 0 0 2px #9cc878}
.p3g .b-toku{background:var(--p3-gold); color:#3a2c07; box-shadow:inset 0 0 0 2px var(--p3-gold3)}
.p3g .ti{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; color:var(--p3-green)}
.p3g .ddl{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; background:#fde4dc; color:#8a2410; border:0; box-shadow:inset 0 0 0 2px #e08870}

/* ===== 資料室（本の札）・FAQガイド ===== */
.p3g .item,.p3g details.q{background:var(--p3-cream); border:0; box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3g .item{padding:16px 16px 15px}
.p3g .ds,.p3g details.q .a,.p3g .bd{font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0}
.p3g .badge.t-販促{background:var(--p3-gold); color:#3a2c07; box-shadow:inset 0 0 0 2px var(--p3-gold3)}
.p3g .cat h2{color:var(--p3-cream); text-shadow:2px 2px 0 var(--p3-green2)}
.p3g .cat h2 .bar{width:10px; height:10px; background:var(--p3-gold); box-shadow:0 0 0 2px var(--p3-green2)}
.p3g details.q[open]{box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold2),inset 0 0 0 6px var(--p3-green)}
.p3g details.q summary{font-family:var(--p3-font)}
.p3g details.q summary .arw{width:0; height:0; border-top:7px solid var(--p3-red); border-left:6px solid transparent; border-right:6px solid transparent}
.p3g .q .chev{color:var(--p3-red)}
.p3g .ask{background:var(--p3-green); color:var(--p3-cream); box-shadow:inset 0 0 0 3px var(--p3-green2),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green2)}
.p3g .ask b{color:var(--p3-gold)}

/* ===== クーポン（宝箱とクーポン札） ===== */
.p3g .ticket{background:linear-gradient(180deg,#fff4c8 0%,#f8e090 100%); border:0; padding:0 18px 20px; overflow:hidden;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 6px var(--p3-gold2),inset 0 0 0 7px var(--p3-green)}
.p3g .ticket .chest{position:relative; margin:7px -11px 12px; height:118px; display:grid; place-items:center; overflow:hidden}
.p3g .ticket .chest .p3-rays{position:absolute; inset:0}
.p3g .ticket .chest .px{position:relative; line-height:0}
.p3g .ticket .lbl{font-family:var(--p3-font); font-weight:400; color:var(--p3-green)}
.p3g .ticket .code{font-family:var(--p3-font); font-weight:400; color:var(--p3-green); background:var(--p3-cream); padding:10px 8px 8px; box-shadow:inset 0 0 0 2px var(--p3-green); letter-spacing:3px}
.p3g .ticket .used{font-family:var(--p3-font); font-weight:400; background:#888870}
.p3g button.copybtn#copyBtn{background:var(--p3-gold2); color:#3a2c07; font-size:15px; padding:14px 12px 13px; box-shadow:inset 0 0 0 3px #6b4a00,inset 0 -6px 0 #b88a10}
.p3g button.copybtn#copyBtn.done{background:var(--p3-leaf); color:#fff; box-shadow:inset 0 0 0 3px #134a10,inset 0 -6px 0 #2e8a28}

/* ===== 質問する（相談所の受付） ===== */
.p3g .desk{position:relative; margin-top:14px; height:150px; overflow:hidden; background:#c8a070;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3g .desk .wall{position:absolute; left:6px; right:6px; top:6px; height:86px; background:#e8d8b0; box-shadow:inset 0 -4px 0 #c8b088;
  background-image:linear-gradient(90deg,rgba(120,90,40,.12) 2px,transparent 2px); background-size:24px 100%}
.p3g .desk .sign{position:absolute; left:50%; top:14px; transform:translateX(-50%); background:var(--p3-green); color:var(--p3-gold); font-size:13px; letter-spacing:.2em; padding:5px 12px 4px 14px; box-shadow:inset 0 0 0 2px var(--p3-gold3); white-space:nowrap}
.p3g .desk .clerk{position:absolute; left:50%; top:46px; transform:translateX(-50%); line-height:0}
.p3g .desk .counter{position:absolute; left:6px; right:6px; bottom:6px; height:52px; background:#8a5a2a; box-shadow:inset 0 5px 0 #b07a40,inset 0 -4px 0 #5a3a18}
.p3g .desk .bell{position:absolute; right:36px; bottom:56px; line-height:0}
.p3g #form label{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400; color:var(--p3-green); font-size:13px}
.p3g #form select,.p3g #form textarea{background:#fff; border:0; box-shadow:inset 0 0 0 2px var(--p3-green); font-size:16px}
.p3g .sendbtn{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--p3-red); color:#fff; font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; font-size:16px;
  padding:14px 12px 13px; text-shadow:1px 1px 0 var(--p3-red2); box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 -6px 0 #a8341e}
.p3g .sendbtn::before{content:"A"; display:inline-grid; place-items:center; width:20px; height:20px; background:var(--p3-cream); color:var(--p3-red); font-family:var(--p3-num); font-size:9px; text-shadow:none}
.p3g .done{background:var(--p3-cream); border:0; box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3g .done .ic{display:inline-grid; place-items:center; width:46px; height:46px; background:var(--p3-leaf); color:#fff; box-shadow:inset 0 0 0 3px #134a10}
.p3g .done .ic .p3-ic{width:26px; height:26px}
.p3g .done h2{font-family:var(--p3-font); font-weight:400}
.p3g .done p{font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0}
.p3g .loginbtn{font-family:var(--p3-font); -webkit-font-smoothing:none; font-weight:400!important; box-shadow:inset 0 0 0 3px #04883a,inset 0 -5px 0 #05a648}