/* =====================================================================
   ズボ連 下層ページ共通デザイン（2026-08-26 Phase 1b）

   トップ以外のページを、トップLPと同じ世界観に揃える。

   ★大原則：記事本文（.post_content）には一切手を入れない。
     既存933記事の見た目を変えないため。このファイル内で .post_content を
     セレクタに含めてはいけない。

   ★このファイルの前半（共通パーツ）は zbr-front.css から自動生成している。
     生成: icons/_tools/gen_site_css.py  → 直接編集しないこと。
     ヘッダー・フッター・タブバーの見た目を変えるときは zbr-front.css を直す。
   ===================================================================== */

/* --- 差し込んだ自前パーツにだけ効かせるリセット（サイト全体には効かせない） --- */
.zbr-shell, .zbr-shell *{box-sizing:border-box;margin:0;padding:0}
.zbr-shell a{text-decoration:none}
.zbr-shell img{max-width:100%;height:auto}
/* ★SWELLは body_class を <body> ではなく #body_wrap に出力する。
   body直下に差し込む共通パーツは #body_wrap の外に出るため、
   .zbr-site ではなく .zbr-shell でスコープすること（2026-08-26 実測）。 */

/* ここから自動生成ブロック ------------------------------------------- */
:root{
  --paper:#fffaf2;--paper2:#fef2e4;--paper3:#fbe8d6;
  --ink:#5b4636;--ink2:#8a7460;--ink3:#b7a48f;--outline:#593823;   /* 2026-08-26 原画実測値に合わせて #6b4a38 から変更 */
  --coral:#f25257;--coral-d:#d83b45;--coral-l:#ffe0df;
  --pink:#f9b8cd;--pink-d:#ee6d92;--pink-l:#ffeaf1;
  --orange:#f5a623;--orange-l:#ffe6bd;--yellow:#ffd23b;--yellow-l:#fff3c9;
  --sky:#bfe0ef;--mint:#bfe6d4;
  --disp:"Zen Maru Gothic",sans-serif;--body:"M PLUS Rounded 1c",sans-serif;--latin:"Fredoka",sans-serif;
  --sh:drop-shadow(2px 5px 3px rgba(91,70,54,.22));--card-sh:0 8px 0 -3px var(--paper3),0 12px 26px -10px rgba(91,70,54,.28);
}

.zbr-shell .mhead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  padding:14px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--coral-l)}.zbr-shell .mhead .mlogo{font-family:var(--latin);font-weight:700;font-size:22px;color:var(--coral);display:flex;align-items:center;gap:8px}.zbr-shell .mhead .mlogo .f{width:34px;height:34px;border-radius:11px;overflow:hidden;border:2px solid var(--coral-l);background:#fff}.zbr-shell .mhead .mlogo .f img{width:106%;margin-top:2px}.zbr-shell .mhead .login{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--coral);border:2px solid var(--coral);border-radius:20px;padding:6px 16px}.zbr-shell .bigbtn{display:block;width:100%;font-family:var(--disp);font-weight:900;font-size:20px;color:#fff;background:var(--coral);
  border:none;border-radius:18px;padding:18px;box-shadow:0 6px 0 var(--coral-d);text-decoration:none;text-align:center;margin-bottom:12px}.zbr-shell .ghostbtn{display:block;width:100%;font-family:var(--disp);font-weight:900;font-size:17px;color:var(--coral);background:#fff;
  border:2.5px solid var(--pink);border-radius:18px;padding:15px;box-shadow:0 5px 0 var(--pink);text-decoration:none;text-align:center}

.zbr-shell .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:2px solid var(--coral-l);display:flex;padding:8px 6px 14px;box-shadow:0 -6px 20px -8px rgba(91,70,54,.25)}.zbr-shell .tab{flex:1;text-align:center;text-decoration:none;color:var(--ink3);font-family:var(--disp);font-weight:700;font-size:11px;padding:4px 0}.zbr-shell .tab .ti{font-size:24px;display:block;line-height:1;margin-bottom:3px}.zbr-shell .tab.on{color:var(--coral)}.zbr-shell .tab.center{position:relative}.zbr-shell .tab.center .ti{width:52px;height:52px;margin:-22px auto 3px;background:var(--coral);border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 14px -3px rgba(242,82,87,.6);border:3px solid #fff;font-size:26px;color:#fff}.zbr-shell .tabbar-space{height:88px}.zbr-shell .mfoot{background:var(--outline);color:#fff;padding:26px 20px 30px;text-align:center}.zbr-shell .mfoot .cp{font-size:12px;color:#d8c6b4;line-height:1.8}

.zbr-shell .zi{display:inline-block;width:1em;height:1em;vertical-align:-.14em}


.zbr-shell .zi{display:inline-block;width:1em;height:1em;vertical-align:-.14em}

@media (min-width:768px){
  
  .zbr-shell .mhero,
  .zbr-shell .msec,
  .zbr-shell .mfoot{padding-left:max(24px,calc((100% - 1040px)/2));
                    padding-right:max(24px,calc((100% - 1040px)/2))}
  .zbr-shell .mhead{padding-left:max(24px,calc((100% - 1040px)/2));
                    padding-right:max(24px,calc((100% - 1040px)/2))}}




.zbr-shell .tabbar{position:fixed}


.zbr-shell .mhead .mlogo{font-size:24px}
.zbr-shell .mhead .mlogo .f{width:38px;height:38px}
.zbr-shell .mhead .login{font-size:16px;padding:7px 18px}
.zbr-shell .bigbtn{font-size:22px;padding:20px}
.zbr-shell .ghostbtn{font-size:19px}


.zbr-shell .tab{font-size:12.5px}
.zbr-shell .tab .ti{font-size:28px;margin-bottom:4px}
.zbr-shell .tab.center .ti{width:58px;height:58px;font-size:32px;margin:-24px auto 4px}
.zbr-shell .tabbar-space{height:96px}


.zbr-shell .mfoot .cp{font-size:13.5px}
/* ここまで自動生成ブロック ------------------------------------------- */

/* --- SWELL標準のヘッダー／フッターを隠す ---------------------------
   display:none で消すだけにして、DOMは残す。
   子テーマで header.php を丸ごと差し替えるとSWELLのJSが前提にしている
   要素が欠けて壊れうるため。 */
.zbr-site #header,
.zbr-site #fix_header,
.zbr-site #footer,
.zbr-site #before_footer_widget,
.zbr-site .p-fixBtnWrap{display:none !important}

/* --- ページ全体 --- */
body{background:var(--paper)}
.zbr-site{background:var(--paper);font-family:var(--body);color:var(--ink)}
.zbr-site #content{padding-top:0}

/* --- パンくず --- */
.zbr-site #breadcrumb{background:transparent;border:none;font-size:13px;padding:12px 4px 0}
.zbr-site #breadcrumb a{color:var(--ink3)}
.zbr-site #breadcrumb .c-breadcrumbList__item{color:var(--ink3)}

/* --- 本文のカード --- */
.zbr-site .l-mainContent__inner{
  background:#fff;border-radius:22px;
  box-shadow:0 8px 0 -3px var(--paper3),0 12px 26px -10px rgba(91,70,54,.28);
  padding:26px 20px 36px;margin-top:14px}

/* --- ページタイトル：肉球＋黄色のアンダーバー ---
   SWELLの実マークアップは
     <h1 class="c-pageTitle" data-style="b_bottom"><span class="c-pageTitle__inner">…</span></h1>
   ★当初は __inner に線形グラデでマーカーを引こうとしたが、__inner の display:block を
     !important でも安定して覆せなかった（2026-08-26 実測）。
     テーマ側と競らずに済む「ブロック要素の下に引くバー」方式に変更している。
     トップLPの見出し（.msec-h h2 .u）と同じ見え方になる。 */
.zbr-site h1.c-pageTitle{
  font-family:var(--disp);font-weight:900;font-size:27px;line-height:1.6;
  color:var(--ink);border:none !important;padding:0 0 0 1.4em;
  /* ★肉球は ::before ではなく背景画像で置く。
     __inner が block のため ::before だと肉球だけ上の行に浮いてしまう。
     背景＋padding-left なら __inner の display に左右されず、
     複数行になっても字下げがそろう。 */
  background:url("icons/zbr-icon-paw-coral.svg") left .3em / 1em 1em no-repeat}
/* b_bottom の下線は h1 ではなく __inner に付いている */
.zbr-site .c-pageTitle__inner{border:none !important;box-shadow:none !important;background:none !important;padding-bottom:0 !important}
.zbr-site h1.c-pageTitle::after{
  content:"";display:block;width:78px;height:9px;border-radius:5px;
  background:var(--yellow);margin:14px 0 0}

@media (min-width:768px){
  .zbr-site h1.c-pageTitle{font-size:34px}
  .zbr-site .l-mainContent__inner{padding:34px 34px 44px;border-radius:26px}
}