/* ============================================================
   ページごとのトンマナ切り替えの土台（2026-09-24〜）
   ・事業内容ページ（切り絵）以外のページで、site.css の後に読む
   ・body に th と th-◯◯ を付ける。色と書体は theme-◯◯.css の変数で決める
   ・ヘッダー／メニュー／フッターは「形は共通、色だけページに合わせる」（中村氏 2026-09-24）
   ・モチーフの画像は、トップと同じ「白いフチの切り抜きシール＋濃紺の細い線」で見せる

   各テーマで決める変数
     --c-bg 地  --c-ink 文字  --c-muted 補助の文字  --c-line 罫線
     --c-acc 差し色（ボタン・メニュー）  --c-acc-ink 差し色の上の文字
     --c-hd ヘッダーの地（少し透ける色）  --c-ft フッターの地  --c-ft-ink フッターの文字
     --c-logo ロゴの見せ方（filter）  --c-ft-logo フッターのロゴの見せ方
     --f-jp 本文の書体  --f-head 見出しの書体  --f-en 英字ラベルの書体
     --r-btn ボタンの角丸
   ============================================================ */
body.th{
  --pl-navy:#0F1A2E;
  --paper:var(--c-bg);--ink:var(--c-ink);--muted:var(--c-muted);--line:var(--c-line);
  --jp:var(--f-jp);--en:var(--f-en);
  background:var(--c-bg);color:var(--c-ink);font-family:var(--f-jp)}
.th h1,.th h2,.th h3{font-family:var(--f-head,var(--f-jp))}

/* ---- 切り絵の飾りを止める ---- */
.th .deco{display:none!important}
.th .pg-hero::before,.th .pg-hero::after{display:none}
body.th.deco-page::before,body.th.deco-page::after{display:none}
.th .msg::before,.th .msg::after,.th .msg-body::before,.th .msg-body::after,.th .msg-photo-wrap::after{display:none}
.th .ft,.th .cta,.th .band{-webkit-mask:none;mask:none}
.th .ft::after,.th .cta::after,.th .band::before,.th .band::after{display:none}
.th .menu::before,.th .menu::after{display:none}
.th .card,.th .tbl,.th .mock,.th .pg-nav a{box-shadow:none}

/* ---- モチーフ：トップと同じ切り抜きシール ---- */
.th .pg-visual,.th .sup-hero-img img{
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
         drop-shadow(1.5px 0 0 var(--pl-navy)) drop-shadow(-1.5px 0 0 var(--pl-navy)) drop-shadow(0 1.5px 0 var(--pl-navy)) drop-shadow(0 -1.5px 0 var(--pl-navy))}

/* ---- ヘッダー ---- */
.th .hd{background:var(--c-hd);color:var(--c-ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.th .hd-logo img{filter:var(--c-logo,none)}
.th .hd-nav a::after{height:2px;border-radius:0;background:var(--c-acc);bottom:2px}
.th .hd-menu{background:var(--c-acc);color:var(--c-acc-ink);border-radius:var(--r-btn,999px)}
.th .hd-menu i::before,.th .hd-menu i::after{background:var(--c-acc-ink);height:2px}

/* ---- 全画面メニュー ---- */
.th .menu{background:var(--c-menu,var(--c-acc));color:var(--c-menu-ink,var(--c-acc-ink))}
.th .menu li a{border-bottom-color:color-mix(in srgb,currentColor 22%,transparent);font-family:var(--f-head,var(--f-jp))}
.th .menu li a:hover{color:inherit;opacity:.7}
.th .menu li.sub a::before{background:currentColor}
.th .menu li.sub a small,.th .menu .menu-foot{color:inherit;opacity:.7}

/* ---- フッター ---- */
.th .ft{background:var(--c-ft);color:var(--c-ft-ink);padding-top:64px}
.th .ft-logo img{filter:var(--c-ft-logo,none)}
.th .ft-copy{color:inherit;opacity:.65;border-top-color:color-mix(in srgb,currentColor 22%,transparent)}
@media(min-width:900px){.th .ft{padding-top:80px}}

/* ---- ボタン・小物 ---- */
.th .btn{background:var(--c-acc);color:var(--c-acc-ink);border-radius:var(--r-btn,999px)}
.th .btn:hover{transform:translateY(-2px)}
.th .btn .arw{background:var(--c-acc-ink);color:var(--c-acc)}
.th .btn.ghost{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.th .btn.ghost .arw{background:var(--c-ink);color:var(--c-bg)}
.th .pg-hero .crumb{color:var(--c-muted)}
.th .pg-hero .crumb a:hover{color:var(--c-ink);text-decoration:underline}
.th .req{background:var(--c-acc);color:var(--c-acc-ink)}
.th .f-checks input,.th .f-agree input{accent-color:var(--c-acc)}
.th .form input:focus,.th .form textarea:focus{border-color:var(--c-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-acc) 25%,transparent)}
.th :focus-visible{outline-color:var(--c-acc)}