/* ゆびたんタッチ サイト共通のデザイン（ゆびたん本体の site.css と同じ作り）（すべてのページで読み込みます）
   ・タイトルの書体を変えたいときは、下の --title の先頭の書体名を書き換えます。
   ・あわせて、1行目の @import の family=… も同じ書体名に直してください。 */
@import url("https://fonts.googleapis.com/css2?family=Yuji+Syuku&text=%E3%82%86%E3%81%B3%E3%81%9F%E3%82%93%E3%82%BF%E3%83%83%E3%83%81&display=swap");
:root{
  --title:"Yuji Syuku","Yuji Boku","UD デジタル 教科書体 NK-B","UD Digi Kyokasho NK-B","HGS教科書体","Klee","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --bg:#F8F7F4;            /* 明るい生成り */
  --line:#D9D0BF;          /* 淡い和紙色の罫線 */
  --ai:#192746;            /* 藍 */
  --shu:#C8432B;           /* 朱 */
  --gold:#B8923A;          /* 金茶 */
}
body{background:var(--bg)}

/* ---- ヘッダー：藍色に、青海波（せいがいは）の地模様 ---- */
.mast{background:#192746 url(seigaiha.png) repeat;background-size:40px 20px;color:#F6EFE0;border-bottom:3px solid var(--gold);box-shadow:0 3px 0 var(--shu)}
.mast-in{max-width:var(--wrap,900px);margin:0 auto;padding:16px 16px 14px;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.mast a.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mast .logo{display:block;width:52px;height:52px;border-radius:12px;margin:0;align-self:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.mast h1,.mast .brand-t{margin:0;font-family:var(--title);font-weight:400;font-size:clamp(38px,7.5vw,52px);line-height:1.1;letter-spacing:.12em;color:#F6EFE0;-webkit-text-stroke:.9px currentColor;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 14px rgba(0,0,0,.35);text-decoration:none;padding:2px 0}
.mast p,.mast .brand-s{margin:0;font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","MS PMincho",serif;font-size:14px;letter-spacing:.16em;color:#E2D8C0;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.mast .ver{color:#BFB79F}

/* ---- ページの先頭へ戻るボタン ---- */
#toTop{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border:0;border-radius:50%;background:var(--ai);color:#F6EFE0;box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 2px var(--gold) inset;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover,#toTop:focus-visible{background:var(--shu);outline:none}
#toTop svg{display:block}
@media (prefers-reduced-motion:reduce){#toTop{transition:none}}

.copy{flex-basis:100%;text-align:center;font-size:12px;opacity:.85;margin-top:2px;line-height:1.6}