/* shell.css — ヘッダー・告知バー・ドロワー・タブバー・フッター・.ts-card の骨（担当: shell）。
   モバイルファースト。768px〜 は PC を縮めた形、1200px〜 は PC のデザインどおり。詳細度はクラス 1〜2 個まで。 */

/* shell だけで使う値（tokens.css に無いもの。取り込み候補として報告に書く） */
:root{
  --ts-shell-overlay:rgba(34,34,34,.55);
  --ts-footer-rule:rgba(255,255,255,.2);
  --ts-footer-btn-border:rgba(255,255,255,.4);
  --ts-ink-hover:#3a3a3a;
  --ts-ig-gradient:radial-gradient(circle at 30% 110%,#FEDA75 0%,#FA7E1E 30%,#D62976 55%,#962FBF 80%,#4F5BD5 100%);
}

/* ================= 告知バー ================= */
.ts-promo{background:var(--ts-promo);color:var(--ts-white);font-size:10px;letter-spacing:.04em;text-align:center;padding:6px 12px;line-height:1.5}

/* ================= ヘッダー（モバイル: sticky） ================= */
.ts-header{position:sticky;top:0;z-index:40;background:var(--ts-bg);box-shadow:var(--ts-shadow-header)}
.ts-header__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px var(--ts-gutter)}
.ts-header__brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ts-ink)}
.ts-header__brand:hover{color:var(--ts-ink)}
.ts-header__logo{display:block;width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover}
.ts-header__name{font-size:14px;font-weight:900;letter-spacing:.02em;line-height:1.3;font-family:var(--ts-font-ja-display)}
.ts-header__name--1l{display:none}
.ts-gnav{display:none}
.ts-header__search-pill{display:none}
.ts-header__actions{display:flex;align-items:center;gap:8px;flex:none}
.ts-header__sns,.ts-header__cta{display:none}
.ts-header__search-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ts-white);border:1px solid var(--ts-line);color:var(--ts-ink)}
.ts-header__search-btn:hover{color:var(--ts-ink);border-color:var(--ts-green)}
.ts-header__search-btn svg{display:block}
.ts-header__menu-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;border-radius:50%;background:var(--ts-ink);border:0;padding:0}
.ts-header__menu-bar{display:block;width:18px;height:2px;background:var(--ts-white);border-radius:2px}

/* ================= 共通の小さなアイコン ================= */
.ts-ico-yt{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;flex:none;background:var(--ts-yt);border-radius:7px}
.ts-ico-yt__tri{width:0;height:0;border-left:9px solid var(--ts-white);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ts-ico-yt--sm{width:22px;height:16px;border-radius:5px;background:var(--ts-yt-bright)}
.ts-ico-yt--sm .ts-ico-yt__tri{border-left-width:7px;border-top-width:4px;border-bottom-width:4px}
.ts-ico-yt--tab{width:24px;height:17px;border-radius:6px}
.ts-ico-yt--tab .ts-ico-yt__tri{border-left-width:8px}
.ts-ico-yt--ft{width:24px;height:17px;border-radius:5px}
.ts-ico-yt--ft .ts-ico-yt__tri{border-left-width:7px;border-top-width:4px;border-bottom-width:4px}
.ts-ico-ig{position:relative;display:inline-flex;width:22px;height:22px;flex:none;border-radius:7px;background:var(--ts-ig-gradient)}
.ts-ico-ig__frame{position:absolute;inset:3px;border:1.5px solid var(--ts-white);border-radius:5px}
.ts-ico-ig__lens{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border:1.5px solid var(--ts-white);border-radius:50%}
.ts-ico-ig__dot{position:absolute;right:5px;top:5px;width:2.5px;height:2.5px;border-radius:50%;background:var(--ts-white)}
.ts-ico-ig--line{width:19px;height:19px;border:2px solid var(--ts-ink);border-radius:6px;background:none}
.ts-ico-ig--line .ts-ico-ig__lens{border:2px solid var(--ts-ink)}
.ts-ico-ig--line .ts-ico-ig__dot{right:1px;top:1px;width:3px;height:3px;background:var(--ts-ink)}
.ts-ico-x{display:block;fill:var(--ts-ink)}
.ts-ico-letter{display:inline-flex;align-items:center;justify-content:center;color:var(--ts-ink)}
.ts-ico-letter svg{display:block;width:22px;height:22px}
.ts-ico-letter--lg svg{width:34px;height:34px}

/* ================= タブバー（モバイル固定・5 タブ） ================= */
.ts-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;pointer-events:none}
.ts-tabbar__inner{width:100%;background:var(--ts-white);border-top:1px solid var(--ts-line);padding:4px 4px 8px;display:flex;gap:2px;pointer-events:auto;box-shadow:var(--ts-shadow-tabbar)}
.ts-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 2px;min-height:52px;border-radius:14px;color:var(--ts-ink)}
.ts-tab:hover{color:var(--ts-ink)}
.ts-tab:active{background:var(--ts-tap);transform:none}
.ts-tab[aria-current="page"]{color:var(--ts-green)}
.ts-tab[aria-current="page"] .ts-tab__label{color:var(--ts-green-text)}   /* M-6: 10px の文字だけ濃い緑（アイコンは緑のまま） */
.ts-tab__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.ts-tab__icon svg{display:block}
.ts-tab[aria-current="page"] .ts-tab__home{fill:var(--ts-green-pale)}
.ts-tab__new{display:flex;align-items:center;justify-content:center;width:34px;height:22px;border-radius:8px;background:var(--ts-green);color:var(--ts-white);font-family:var(--ts-font-num);font-style:italic;font-weight:900;font-size:11px;line-height:1}
.ts-tab__icon--request{border-radius:50%;background:var(--ts-yellow)}
.ts-tab__label{font-size:10px;font-weight:900;letter-spacing:.02em;line-height:1.2}

/* ================= ドロワー ================= */
.ts-drawer{position:fixed;inset:0;z-index:60;display:flex;justify-content:center}
.ts-drawer__overlay{position:absolute;inset:0;border:0;padding:0;background:var(--ts-shell-overlay);cursor:pointer;border-radius:0}
.ts-drawer__overlay:active{transform:none;filter:none}
.ts-drawer__panel{position:relative;width:100%;background:var(--ts-bg);overflow-y:auto;-webkit-overflow-scrolling:touch;outline:0}
.ts-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px}
.ts-drawer__brand{display:flex;align-items:center;gap:9px}
.ts-drawer__logo{display:block;width:38px;height:38px;border-radius:50%;object-fit:cover}
.ts-drawer__name{font-size:14px;font-weight:900;line-height:1.3;font-family:var(--ts-font-ja-display)}
.ts-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ts-ink);color:var(--ts-white);border:0;font-size:20px;line-height:1;padding:0}
.ts-drawer__body{padding:6px 14px 30px}
.ts-drawer__label{font-family:var(--ts-font-mono);font-size:10px;letter-spacing:.12em;color:var(--ts-muted);margin-bottom:12px;line-height:1.4}
.ts-drawer__list{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.ts-drawer__item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 4px;border-bottom:1px solid var(--ts-line);font-size:17px;font-weight:900;line-height:1.4;color:var(--ts-ink)}
.ts-drawer__item--child{padding-left:20px;font-size:15px;font-weight:700;color:var(--ts-ink-2)}
.ts-drawer__item--site{padding:15px 4px;font-size:15px;font-weight:700}
.ts-drawer__item[aria-current="page"],.ts-drawer__item:hover{color:var(--ts-green)}
.ts-drawer__arrow{color:var(--ts-green);flex:none}
.ts-drawer__cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;background:var(--ts-yellow);color:var(--ts-ink);border-radius:var(--ts-radius-pill);padding:18px;font-size:15px;font-weight:900;line-height:1.3}
.ts-drawer__cta:hover{color:var(--ts-ink);filter:brightness(1.05)}
.ts-drawer__cta .ts-ico-letter{flex:none}
body.ts-drawer-open{overflow:hidden}

/* ================= 検索フォーム（白地・2px #222 のピル・GET /?s=） ================= */
.ts-search-form{position:relative;display:flex;align-items:center;gap:10px;background:var(--ts-white);border:2px solid var(--ts-ink);border-radius:var(--ts-radius-pill);padding:14px 20px}
.ts-search-form__glyph{font-size:17px;line-height:1;color:var(--ts-muted);flex:none}
.ts-search-form__input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:14px;line-height:1.5;color:var(--ts-ink);outline:0;-webkit-appearance:none;appearance:none}
.ts-search-form__input::-webkit-search-decoration,.ts-search-form__input::-webkit-search-cancel-button{-webkit-appearance:none}
.ts-search-form__submit{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ts-search-form:focus-within{outline:3px solid var(--ts-green);outline-offset:3px}
.ts-search-form__input:focus-visible{outline:0}
.ts-drawer__search{margin-bottom:22px}

/* ================= フッター（モバイル） ================= */
.ts-footer{position:relative;background:var(--ts-footer-stripe);color:var(--ts-white);border-radius:40px 40px 0 0;margin-top:-16px;padding:34px var(--ts-gutter) calc(30px + var(--ts-tabbar-h))}
.ts-footer a{color:var(--ts-white)}
.ts-footer a:hover{color:var(--ts-green-pale)}
.ts-footer__name{font-size:16px;font-weight:900;color:var(--ts-white);letter-spacing:.03em;margin-bottom:10px;line-height:1.5}
.ts-footer__tagline{margin:0 0 22px;font-size:12px;line-height:1.95;color:var(--ts-footer-text)}
.ts-footer__operator,.ts-footer__btns,.ts-footer__follow{display:none}
.ts-footer__links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.ts-footer__col{display:grid;gap:14px;align-content:start}
.ts-footer__link{font-size:13px;font-weight:500;line-height:1.5}
.ts-footer__bottom{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ts-footer-rule);padding-top:18px;font-size:12px;line-height:1.5}
.ts-footer__policy{display:flex;flex-direction:column;gap:10px}
.ts-footer a.ts-footer__policy-link{color:var(--ts-footer-text);text-decoration:underline;text-underline-offset:2px}
.ts-footer a.ts-footer__policy-link:hover{color:var(--ts-green-pale)}
.ts-footer__copy{color:var(--ts-footer-micro);margin-top:6px}

/* ================= .ts-card の骨（見た目の細部は各テンプレートが .ts-card--<style> に当てる） ================= */
.ts-card{position:relative;margin:0}
.ts-card__link{display:block;color:inherit}
.ts-card__link:hover{color:inherit}
.ts-card__tape{display:none}
.ts-card__thumb{display:block;overflow:hidden;border-radius:var(--ts-radius-photo);background:var(--ts-line-pale)}
.ts-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ts-card__body{display:block}
.ts-card__cat{display:inline-block;background:var(--ts-green);color:var(--ts-white);border-radius:var(--ts-radius-pill);padding:5px 11px;font-size:10px;font-weight:900;line-height:1.2}
.ts-card__title{display:block;font-size:16px;font-weight:900;line-height:1.7;color:var(--ts-ink)}
.ts-card__meta{display:flex;align-items:center;gap:8px;font-family:var(--ts-font-mono);font-size:10px;color:var(--ts-muted);line-height:1.4}
.ts-card__rank{position:absolute;left:-6px;top:-10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:50%;background:var(--ts-yellow);color:var(--ts-ink);font-family:var(--ts-font-num);font-style:italic;font-weight:900;font-size:18px;line-height:1}
/* ポラロイド: 白地・1px #EDEAE0・角 6px・padding 11/11/18・影・傾き var(--ts-tilt)・上辺中央にマスキングテープ 70×20 opacity .85 */
.ts-card--polaroid{background:var(--ts-white);border:1px solid var(--ts-line-pale);border-radius:6px;padding:11px 11px 18px;box-shadow:var(--ts-shadow-card);transform:rotate(var(--ts-tilt,0deg))}
.ts-card--polaroid .ts-card__tape{display:block;position:absolute;left:50%;top:-10px;z-index:1;width:70px;height:20px;transform:translateX(-50%) rotate(-3deg);background:var(--ts-green-pale);opacity:.85;border-radius:2px}
.ts-card--polaroid .ts-card__thumb{height:180px;border-radius:4px}
.ts-card--polaroid .ts-card__body{margin-top:13px}
.ts-card--polaroid .ts-card__cat{margin-bottom:7px}
.ts-card--polaroid .ts-card__meta{margin-top:9px}
/* 横並び（一覧・検索） */
.ts-card--row .ts-card__link{display:flex;gap:12px;align-items:flex-start}
.ts-card--row .ts-card__thumb{flex:none;width:120px;height:80px}
.ts-card--row .ts-card__body{flex:1;min-width:0}
.ts-card--row .ts-card__title{font-size:15px;line-height:1.6}
/* 小（前後記事） */
.ts-card--thumb .ts-card__link{display:flex;gap:10px;align-items:center}
.ts-card--thumb .ts-card__thumb{flex:none;width:80px;height:56px}
.ts-card--thumb .ts-card__title{font-size:13px;line-height:1.5}
/* ランキング（番号つき） */
.ts-card--rank{padding-top:10px;padding-left:10px}

/* ================= 768px〜: PC を縮めた形 ================= */
@media (min-width:768px){
  .ts-promo{font-size:12px;letter-spacing:.06em;padding:8px 20px}
  .ts-header{position:relative;box-shadow:none}
  /* 768〜1199: 1 行目にロゴ・検索ピル・CTA、2 行目にナビ（横幅が足りないので折り返す） */
  .ts-header__bar{gap:16px;padding:12px 24px 10px;flex-wrap:wrap}
  .ts-header__brand{gap:12px}
  .ts-header__logo{width:42px;height:42px}
  .ts-header__name--2l{display:none}
  .ts-header__name--1l{display:block;font-size:16px;letter-spacing:.03em;white-space:nowrap}
  .ts-gnav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500;order:10;flex:1 0 100%}
  .ts-gnav__link{white-space:nowrap}
  .ts-gnav__link[aria-current="page"]{color:var(--ts-green)}
  .ts-header__search-pill{display:inline-flex;align-items:center;gap:9px;flex:none;background:var(--ts-white);border:1px solid var(--ts-line);border-radius:var(--ts-radius-pill);padding:11px 16px}
  .ts-header__search-pill:hover{border-color:var(--ts-green)}
  .ts-header__search-glyph{font-size:15px;line-height:1;color:var(--ts-muted)}
  .ts-header__search-text{font-size:13px;line-height:1;color:var(--ts-muted);white-space:nowrap}
  .ts-header__actions{gap:10px}
  .ts-header__cta{display:inline-flex;align-items:center;gap:8px;background:var(--ts-ink);color:var(--ts-white);border-radius:var(--ts-radius-pill);padding:10px 20px;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap}
  .ts-header__cta:hover{color:var(--ts-white);background:var(--ts-ink-hover)}
  .ts-header__search-btn,.ts-header__menu-btn{display:none}

  .ts-tabbar{display:none}

  .ts-drawer__panel{max-width:var(--ts-mobile-max);margin:0 auto}

  .ts-footer{border-radius:48% 52% 0 0 / 70px 50px 0 0;margin-top:0;padding:64px 0 40px}
  .ts-footer__inner{max-width:1160px;margin:0 auto;padding:0 40px}
  .ts-footer__top{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;flex-wrap:wrap;margin-bottom:48px}
  .ts-footer__about{flex:1 1 100%}
  .ts-footer__name{font-size:18px;letter-spacing:.04em;margin-bottom:16px}
  .ts-footer__tagline{margin:0 0 8px;font-size:13px;line-height:2;letter-spacing:.05em}
  .ts-footer__operator{display:block;font-family:var(--ts-font-mono);font-size:11px;line-height:1.5;color:var(--ts-footer-micro);margin-bottom:28px}
  .ts-footer__btns{display:flex;gap:14px;flex-wrap:wrap}
  .ts-footer__btn{display:inline-flex;align-items:center;gap:12px;border-radius:var(--ts-radius-pill);padding:14px 34px;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap}
  .ts-footer a.ts-footer__btn--dark{background:var(--ts-ink);color:var(--ts-white);border:1px solid var(--ts-footer-btn-border)}
  .ts-footer a.ts-footer__btn--dark:hover{background:var(--ts-ink-hover);color:var(--ts-white)}
  .ts-footer a.ts-footer__btn--yellow{background:var(--ts-yellow);color:var(--ts-ink);font-weight:900}
  .ts-footer a.ts-footer__btn--yellow:hover{color:var(--ts-ink);filter:brightness(1.05)}
  .ts-footer__links{display:flex;gap:48px;margin-bottom:0}
  .ts-footer__col{display:flex;flex-direction:column;gap:16px}
  .ts-footer__link{font-size:14px}
  .ts-footer__follow{display:flex;flex-direction:column;align-items:center;gap:12px}
  .ts-footer__follow-label{font-family:var(--ts-font-mono);font-size:10px;letter-spacing:.1em;line-height:1.4;color:var(--ts-footer-micro)}
  .ts-footer__sns{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--ts-white)}
  .ts-footer__bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-top:24px}
  .ts-footer__policy{flex-direction:row;flex-wrap:wrap;gap:28px}
  .ts-footer__copy{margin-top:0;letter-spacing:.05em;color:var(--ts-footer-text)}
}

/* ================= 1200px〜: PC のデザインどおり ================= */
@media (min-width:1200px){
  .ts-header__bar{gap:24px;padding:16px var(--ts-gutter-pc);flex-wrap:nowrap}
  .ts-header__name--1l{font-size:17px}
  .ts-gnav{gap:26px;font-size:15px;order:0;flex:0 1 auto}
  .ts-header__sns{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--ts-white);border:1px solid var(--ts-line);border-radius:50%}
  .ts-header__sns:hover{border-color:var(--ts-green)}

  .ts-footer{background:var(--ts-footer-stripe-pc);padding:96px 0 40px}
  .ts-footer__top{gap:64px;margin-bottom:56px;flex-wrap:nowrap}
  .ts-footer__about{flex:0 1 auto}
  .ts-footer__links{gap:72px}
}

/* 告知バー: モバイルのデザインで帯が無い画面（404・検索・記事一覧・非PRの記事詳細・お問い合わせ等）は 767px 以下で隠す。inc/05-menus.php tonsan_promo_mobile_off() が body class を付ける（2026-09-19） */
@media (max-width:767px){body.ts-promo-m-off .ts-promo{display:none}}

/* 広告が埋まらなかった枠はラベルごと隠す（2026-09-19 レビュー: 「スポンサーリンク」の文字だけ 271px 出ていた） */
.ts-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}
/* ホームインジケータのある端末で固定タブバーが重ならない（safe-area） */
.ts-tabbar{padding-bottom:env(safe-area-inset-bottom)}