/*
Theme Name: Workout Reference
Description: ライト固定のリファレンス型テーマ（アイキャッチ・トップ写真対応）
Version: 3.1.0
Text Domain: fx-reference
*/

/* ===== tokens（ライト固定） =====
   workout（プロワク）: 濃紺/チャコール（ヘッダー・ヒーロー・フッター・ボタン）＋スチールグレー＋白〜薄グレー＋差し色オレンジ
   トークン名は fitness と共通（--sky=薄いグレー系 / --navy=濃紺 / --yellow=オレンジ）。
   コントラスト比は themes/DESIGN_NOTES.md を参照（本文はすべて AA 以上。オレンジ上の文字は濃紺） */
:root{
  --sky:#f3f5f7; --sky-2:#e3e8ee; --sky-3:#c5ced9; --steel:#5b6b80; --steel-light:#9aa7b8;
  --navy:#141c2b; --navy-strong:#0e1624; --ink:#0e1624; --navy-2:#1d2840;
  --yellow:#ff6a1a; --yellow-strong:#e85a0c; --on-yellow:#0e1624;
  --bg:#f3f5f7; --surface:#fff; --surface-2:#eceff3; --zebra:#f7f8fa;
  --text:#1a2230; --text-strong:#0e1624; --muted:#4b5666;
  --line:#dde2e8; --line-strong:#c2cad4; --ui-border:#7d8796; --shadow-edge:rgba(14,22,36,.16);
  --warn:#9a4505; --warn-bg:#fff6ec; --warn-line:#f5c58f;
  --ok:#0b6b3a; --ok-bg:#edf8f1; --ok-line:#a8dcbd;
  --info:#141c2b; --info-bg:#f3f5f7;
  --accent:#b83c06; --accent-strong:#8f2f05; --accent-soft:#f3f5f7; --accent-softer:#fff4ec; --accent-ring:rgba(255,106,26,.35); --accent-2:#141c2b;
  --code-bg:#0f172a; --code-text:#e6edf7; --on-accent:#fff; --on-navy-muted:#c3ccd8;
  --font-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"BIZ UDGothic",monospace;
  --fs-body:clamp(16px,.25vw + 15.2px,17px); --lh-body:1.9;
  --fs-h3:clamp(17.5px,.5vw + 15.5px,19px); --fs-h2:clamp(20px,1vw + 16.5px,24px);
  --fs-h1:clamp(24px,2vw + 17px,32px); --fs-hero:clamp(26px,3vw + 16px,40px);
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(14,22,36,.07);
  --shadow-2:0 1px 2px rgba(14,22,36,.06),0 4px 12px rgba(14,22,36,.1);
  --shadow-3:0 2px 4px rgba(14,22,36,.06),0 12px 32px rgba(14,22,36,.18);
  --slant:-14deg;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:200ms;
  --header-h:56px; --w-page:1200px; --w-content:680px; --w-side:300px; --gutter:clamp(16px,4vw,32px);
  --ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11h-9l-5 4v-4H4z'/%3E%3C/svg%3E");
  --ico-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v5M12 18v.5'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (min-width:1024px){:root{--header-h:64px}}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
html.is-locked{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto}
.ico{flex:none;vertical-align:-.2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.site-header :focus-visible,.site-footer :focus-visible,.drawer__head :focus-visible,.hero :focus-visible,.band--dark :focus-visible{outline-color:var(--yellow)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--radius-md);font-weight:700}
.skip-link:focus{top:12px;text-decoration:none}
#top{position:absolute;top:0;left:0;width:1px;height:1px;outline:0}

/* ===== header（濃紺＋斜めのスピードライン） ===== */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);color:#fff;background:linear-gradient(115deg,transparent 0 64%,rgba(255,255,255,.05) 64% 70%,transparent 70% 72%,rgba(255,106,26,.5) 72% 72.6%,transparent 72.6% 75%,rgba(255,255,255,.05) 75% 77%,transparent 77%),var(--navy-strong);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.site-header__in{max-width:var(--w-page);height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:16px}
.site-title{display:flex;flex-direction:column;justify-content:center;color:#fff;line-height:1.25;min-width:0}
.site-title:hover{text-decoration:none}
.site-title__name{font-weight:900;font-size:19px;letter-spacing:.06em;white-space:nowrap;font-style:italic}
.site-title__name::before{content:"";display:inline-block;width:.38em;height:.85em;margin-right:.2em;background:var(--yellow);vertical-align:-.06em;transform:skewX(var(--slant))}
.site-title__name::after{content:"";display:inline-block;width:.2em;height:.85em;margin-left:.3em;background:var(--steel-light);vertical-align:-.06em;transform:skewX(var(--slant));opacity:.6}
.site-title small{font-size:11px;font-weight:400;color:var(--on-navy-muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.gnav{display:none;gap:2px;margin-left:auto}
.gnav a{position:relative;color:#fff;padding:8px 12px;font-size:14px;font-weight:700}
.gnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--yellow);transform:skewX(var(--slant)) scaleX(0);transform-origin:0 50%;transition:transform var(--dur) var(--ease)}
.gnav a:hover{text-decoration:none}
.gnav a:hover::after{transform:skewX(var(--slant)) scaleX(1)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radius-md);background:transparent;color:inherit;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.site-header .icon-btn{color:#fff}
.search-toggle{margin-left:auto}
.nav-toggle{margin-right:-8px}

/* search form */
.search-form{display:flex;align-items:center;gap:8px;height:52px;padding:0 6px 0 18px;background:var(--surface);border:1px solid var(--ui-border);border-radius:var(--radius-md);box-shadow:var(--shadow-1);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.search-form:focus-within{border-color:var(--yellow-strong);box-shadow:0 0 0 3px var(--accent-ring)}
.search-form__ico{color:var(--muted)}
.search-form input[type=search]{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.search-form input::placeholder{color:var(--muted);opacity:1}
.search-form button{height:40px;padding:0 22px;border:0;border-radius:var(--radius-sm);background:var(--navy);color:var(--on-accent);font:inherit;font-size:15px;font-weight:800;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background var(--dur) var(--ease)}
.search-form button:hover{background:var(--yellow);color:var(--on-yellow)}
.search-form--header{display:none;height:40px;padding:0 12px;flex:1;max-width:400px;margin-left:12px;background:var(--surface);border-color:transparent;box-shadow:none}
.search-form--header:focus-within{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,106,26,.5)}
.search-form--header input[type=search]{font-size:14px}
.search-form__key{font:600 12px/1 var(--font-mono);color:var(--muted);border:1px solid var(--line-strong);border-radius:4px;padding:3px 6px;background:var(--surface-2)}
.m-search{padding:10px var(--gutter);background:var(--navy);border-bottom:2px solid var(--yellow);position:sticky;top:var(--header-h);z-index:49}
.m-search .search-form{height:48px}

/* drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(14,22,36,.6)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(86vw,360px);display:flex;flex-direction:column;background:var(--surface);overflow-y:auto;box-shadow:var(--shadow-3);padding:0 8px 24px}
.drawer[hidden]{display:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;flex:none;height:var(--header-h);margin:0 -8px;padding:0 8px 0 20px;font-size:16px;color:#fff;background:linear-gradient(115deg,transparent 0 70%,var(--yellow) 70% 72%,transparent 72% 75%,rgba(255,255,255,.12) 75% 76%,transparent 76%),var(--navy-strong)}
.drawer__head .icon-btn{color:#fff}
.drawer__title{display:flex;align-items:center;gap:8px;margin:18px 12px 6px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.drawer__title::before{content:"";width:14px;height:4px;background:var(--yellow);transform:skewX(var(--slant))}
.drawer__list{list-style:none;margin:0;padding:0}
.drawer__list a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:var(--radius-md);color:var(--text);font-weight:600}
.drawer__list a span{flex:1}
.drawer__list a small{color:var(--muted);font-weight:400}
.drawer__list a:hover{background:var(--sky);text-decoration:none}
.drawer__list .ico{color:var(--navy)}

/* reading progress / back to top（ページトップは #top 専用div＋theme.js で最上部へ） */
.single .site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.to-top{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 88px);z-index:40;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);background:var(--navy);color:#fff;border:2px solid #fff;box-shadow:var(--shadow-2)}
.to-top:hover{background:var(--yellow);color:var(--on-yellow);text-decoration:none}
@supports (animation-timeline:scroll()){
  .single .site-header::after{animation:fx-progress linear both;animation-timeline:scroll(root)}
  .to-top{opacity:0;pointer-events:none;visibility:hidden;animation:fx-totop linear both;animation-timeline:scroll(root);animation-range:420px 640px}
  @keyframes fx-progress{to{transform:scaleX(1)}}
  @keyframes fx-totop{to{opacity:1;pointer-events:auto;visibility:visible}}
}
@media (min-width:1024px){.to-top{bottom:24px;right:24px}}

/* ===== layout ===== */
.wrap{max-width:var(--w-page);margin:0 auto;padding:28px var(--gutter) 72px;display:block}
.wrap--full{padding-top:40px}
.main{min-width:0}
.sidebar{display:none;font-size:14px}
@media (min-width:1024px){
  .gnav,.search-form--header{display:flex}
  .icon-btn,.m-search,.scrim,.drawer{display:none!important}
  .wrap:not(.wrap--full){display:grid;grid-template-columns:minmax(0,var(--w-content)) var(--w-side);gap:72px;justify-content:center;padding-top:36px}
  .sidebar{display:block}
  /* 記事・固定ページは白いカードに載せる（上辺に斜めの切り替えライン） */
  .single .wrap:not(.wrap--full),.page .wrap:not(.wrap--full){grid-template-columns:minmax(0,760px) var(--w-side);gap:48px}
  .single .main,.page .main{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 40px 40px;box-shadow:var(--shadow-1)}
  .single .main::before,.page .main::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(115deg,var(--navy) 0 76%,var(--yellow) 76% 84%,var(--navy) 84%)}
}
.sidebar .box{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100vh - var(--header-h) - 48px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.side-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.side-title::before{content:"";width:12px;height:4px;background:var(--yellow);transform:skewX(var(--slant))}
.sidebar ul{list-style:none;margin:0 0 24px;padding:0}
.sidebar li a{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text);font-size:14px;line-height:1.5;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sidebar li a:hover{background:var(--surface);text-decoration:none;transform:translateX(2px)}
.sidebar li a.is-current{background:var(--surface);color:var(--text-strong);font-weight:700;box-shadow:inset 3px 0 0 var(--yellow)}
.sidebar .count{color:var(--muted);font-size:12px}
.side-cats summary{cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted);padding:6px 0;list-style:none}
.side-cats summary::-webkit-details-marker{display:none}
.side-cats summary::after{content:" ▾"}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin:0 0 20px}
.crumb a{color:var(--muted)}
.crumb span+span::before{content:"/";display:inline-block;margin:0 8px;color:var(--steel-light);font-weight:700}
.crumb span:last-child:not(:first-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
@media (max-width:599px){.single .crumb span:last-child:not(:first-child){display:none}}

/* ===== 見出し（トップ・一覧用）：左に斜めのライン（濃紺＋オレンジ） ===== */
.sec-title{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;margin:0 0 22px;padding-left:36px;font-size:clamp(21px,1.2vw + 16px,28px);line-height:1.35;font-weight:900;letter-spacing:.03em;color:var(--text-strong)}
.sec-title::before{content:"";position:absolute;left:4px;top:.18em;width:10px;height:1.1em;background:var(--navy);transform:skewX(var(--slant))}
.sec-title::after{content:"";position:absolute;left:18px;top:.18em;width:6px;height:1.1em;background:var(--yellow);transform:skewX(var(--slant))}
.sec-title small{order:2;font-size:12px;font-weight:900;font-style:italic;letter-spacing:.22em;color:var(--steel)}

/* ===== hero（ファーストビュー：濃紺＋写真＋斜めカット） ===== */
.hero{position:relative;isolation:isolate;background:var(--navy-strong);color:#fff;overflow:hidden}
.hero__media{position:relative;overflow:hidden;aspect-ratio:3/4;max-height:78svh;background:linear-gradient(115deg,var(--navy-strong) 0%,var(--navy-2) 50%,var(--steel) 100%)}
.hero__media picture{display:contents}
.hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero__ph{position:absolute;inset:0;background:repeating-linear-gradient(-62deg,rgba(255,255,255,.05) 0 14px,transparent 14px 48px),linear-gradient(-62deg,transparent 0 22%,rgba(255,106,26,.55) 22% 23.5%,transparent 23.5%),linear-gradient(115deg,var(--navy-strong) 0%,var(--navy-2) 48%,#3a4a63 100%)}
.hero.has-photo .hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(14,22,36,.85))}
.hero__body{position:relative;z-index:1;isolation:isolate;margin-top:-64px;padding:84px var(--gutter) 96px}
.hero__body::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-strong);clip-path:polygon(0 64px,100% 0,100% 100%,0 100%)}
.hero__body::after{content:"";position:absolute;left:0;right:0;top:0;height:74px;z-index:-1;background:var(--yellow);clip-path:polygon(0 64px,100% 0,100% 6px,0 70px)}
.hero__text{max-width:600px;margin:0 auto}
.hero__badge{display:inline-block;margin:0 0 14px;padding:3px 16px;background:var(--yellow);color:var(--on-yellow);font-size:12.5px;font-weight:800;letter-spacing:.06em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.hero h1{margin:0 0 14px;font-size:var(--fs-hero);line-height:1.35;letter-spacing:.01em;color:#fff;text-wrap:balance;word-break:auto-phrase}
.hero__eyebrow{display:block;margin-bottom:8px;font-size:clamp(14px,.4vw + 12.5px,17px);font-weight:800;letter-spacing:.12em;color:var(--yellow)}
.hero__catch{display:block;font-size:clamp(34px,3.6vw + 18px,64px);line-height:1.18;font-weight:900;font-style:italic;letter-spacing:.02em;color:#fff;font-feature-settings:"palt"}
.hero__lead{margin:0 0 22px;color:var(--on-navy-muted);font-size:15px;line-height:1.85}
.hero .search-form{max-width:560px;height:56px;border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.2),var(--shadow-3)}
.hero .search-form button{background:var(--yellow);color:var(--on-yellow)}
.hero .search-form button:hover{background:var(--yellow-strong)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:18px 0 0;padding:0 0 0 6px}
.btn-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:2px;background:var(--yellow);color:var(--on-yellow);font-size:14.5px;font-weight:800;line-height:1.3;transform:skewX(var(--slant));box-shadow:4px 4px 0 var(--steel);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn-cta>span{display:inline-flex;align-items:center;gap:6px;transform:skewX(calc(var(--slant) * -1))}
.btn-cta:hover{background:#ff8340;text-decoration:none;transform:skewX(var(--slant)) translateX(3px);box-shadow:1px 4px 0 var(--steel)}
.hero__chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 0;font-size:13px}
.hero__chips>span{color:var(--on-navy-muted);font-weight:700}
.hero__chips a{padding:4px 12px;border-radius:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:600;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.hero__chips a:hover{border-color:var(--yellow);color:#fff;text-decoration:none;transform:translateX(2px)}
/* 斜めのスピードライン（インラインSVG・装飾のみ） */
.hero__speed{position:absolute;right:0;bottom:60px;z-index:0;width:70%;height:42%;color:var(--yellow);opacity:.3;pointer-events:none}
/* 下端の斜めカット（オレンジの帯つき） */
.hero__cut{position:absolute;left:0;right:0;bottom:-1px;z-index:2;display:block;width:100%;height:clamp(28px,5vw,80px);color:var(--bg);pointer-events:none}
@media (max-width:599px){
  .hero h1 br,.hero__catch br{display:none}
  .hero__catch{font-size:clamp(30px,9vw,40px)}
  /* スマホ用の縦長写真が無いときは横長写真を4:3で、写真が無いときは16:9のグラデーション */
  .hero.has-photo:not(.has-sp) .hero__media{aspect-ratio:4/3}
  .hero.has-photo:not(.has-sp) .hero__img{object-position:70% 40%}
  .hero.no-photo .hero__media{aspect-ratio:16/9}
}
@media (min-width:600px) and (max-width:1023px){
  .hero__media{aspect-ratio:16/9;max-height:none}
  .hero__img{object-position:70% 40%}
}
@media (min-width:1024px){
  .hero{display:grid}
  .hero__media,.hero__body{grid-area:1/1}
  .hero__media{aspect-ratio:auto;max-height:none;height:auto;min-height:clamp(540px,46vw,740px)}
  .hero__img{object-position:right center}
  /* 文字が載る左側は濃紺を92%以上重ねる（下が白でも本文AAを確保）。テキスト右端≒50%+40px */
  .hero.has-photo .hero__media::after{top:0;height:auto;background:linear-gradient(100deg,rgba(14,22,36,.96) 0,rgba(14,22,36,.92) calc(50% + 48px),rgba(14,22,36,0) calc(72% + 48px))}
  .hero__body{align-self:center;width:100%;max-width:var(--w-page);margin:0 auto;padding:40px var(--gutter) 110px}
  .hero__body::before,.hero__body::after{display:none}
  .hero__text{max-width:560px;margin:0}
  .hero__speed{left:calc(50% + 40px);right:auto;top:0;bottom:auto;width:26%;height:100%;opacity:.55}
}

/* ===== 斜めの帯（トップのカテゴリ：濃紺） ===== */
.band{position:relative;isolation:isolate;margin:clamp(16px,4vw,56px) 0 0;padding:clamp(72px,7vw,112px) 0 clamp(72px,7vw,112px)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sky-2);transform:skewY(-3deg)}
.band::after{content:"";position:absolute;right:0;top:-10px;z-index:-1;width:min(46%,460px);height:150px;background:repeating-linear-gradient(-62deg,var(--sky-3) 0 8px,transparent 8px 22px);opacity:.55;transform:skewY(-3deg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.band--dark::before{background:linear-gradient(-62deg,transparent 0 18%,rgba(255,255,255,.04) 18% 30%,transparent 30%),var(--navy)}
.band--dark::after{background:repeating-linear-gradient(-62deg,var(--yellow) 0 6px,transparent 6px 20px);opacity:.5}
.band--dark .sec-title{color:#fff}
.band--dark .sec-title::before{background:#fff}
.band--dark .sec-title small{color:var(--steel-light)}
.band__in{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.band .cat-grid{margin-bottom:0}

/* ===== category cards（角の斜めカット＋斜めストライプ） ===== */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 48px}
@media (min-width:600px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.cat-grid a{position:relative;overflow:hidden;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px 14px 14px;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cat-grid a::before{content:"";position:absolute;top:0;right:0;width:20px;height:20px;background:linear-gradient(225deg,transparent 50%,var(--sky-3) 50%)}
.cat-grid a::after{content:"";position:absolute;right:-6px;bottom:-6px;width:70px;height:30px;background:repeating-linear-gradient(-62deg,var(--sky-2) 0 5px,transparent 5px 11px);pointer-events:none;transition:background var(--dur) var(--ease)}
.cat-grid a:hover{border-left-color:var(--yellow);transform:translateX(3px);text-decoration:none}
.cat-grid a:hover::before{background:linear-gradient(225deg,transparent 50%,var(--yellow) 50%)}
.cat-grid a:hover::after{background:repeating-linear-gradient(-62deg,rgba(255,106,26,.7) 0 5px,transparent 5px 11px)}
.cat-ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--navy);color:#fff;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cat-grid a:hover .cat-ico{background:var(--yellow);color:var(--on-yellow)}
.cat-grid b{position:relative;font-size:15px;line-height:1.35;color:var(--text-strong)}
.cat-grid small{position:relative;font-size:12.5px;color:var(--muted)}
.cat-grid--compact{margin-top:24px}

/* ===== シーン写真カード（4:3、角の斜めカット）5枚：PCは 2＋3 ===== */
.scenes-sec{margin:8px 0 56px}
.scenes{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
  .scenes{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .scene{grid-column:span 2}
  .scene--1,.scene--2{grid-column:span 3}
}
.scene{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius-sm);clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%);background:var(--navy-2);color:#fff}
@media (min-width:600px){.scene{aspect-ratio:4/3}.scene--1,.scene--2{aspect-ratio:16/9}}
.scene__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.scene:hover{text-decoration:none}
.scene:hover .scene__img{transform:scale(1.04) translateX(-4px)}
.scene__ph{position:absolute;inset:0;background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 10px,transparent 10px 32px),linear-gradient(-62deg,transparent 0 64%,rgba(255,106,26,.45) 64% 66%,transparent 66%),linear-gradient(135deg,var(--navy-2),var(--steel))}
.scene--2 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 10px,transparent 10px 32px),linear-gradient(135deg,var(--navy-strong),#3a4a63)}
.scene--3 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 10px,transparent 10px 32px),linear-gradient(135deg,#2b3a52,var(--navy))}
.scene--4 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.08) 0 10px,transparent 10px 32px),linear-gradient(135deg,#7a4122,var(--navy-strong))}
.scene--5 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 10px,transparent 10px 32px),linear-gradient(135deg,var(--steel),var(--navy-strong))}
.scene::after{content:"";position:absolute;right:0;bottom:0;width:32px;height:32px;background:linear-gradient(135deg,transparent 0 30%,var(--yellow) 30% 42%,transparent 42%);pointer-events:none}
.scene__label{position:absolute;left:0;bottom:18px;display:flex;flex-direction:column;max-width:calc(100% - 44px);padding:8px 28px 9px 16px;background:var(--navy-strong);color:#fff;font-size:16px;font-weight:800;line-height:1.35;clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);box-shadow:inset 4px 0 0 var(--yellow);transition:transform var(--dur) var(--ease)}
.scene:hover .scene__label{transform:translateX(4px)}
.scene__label small{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--yellow)}
.scenes>.google-auto-placed{grid-column:1/-1}

/* ===== lists ===== */
.groups{display:grid;gap:4px 28px}
@media (min-width:1024px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.group{position:relative;overflow:hidden;margin:0 0 24px;padding:10px 20px 6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.group::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(115deg,var(--navy) 0 72%,var(--yellow) 72% 80%,var(--navy) 80%)}
.group__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--line-strong)}
.group__head h2,.group__head h3{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;font-weight:900;color:var(--text-strong)}
.group__ico{color:var(--yellow-strong)}
.group__head .count{margin-right:auto;margin-left:4px;font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 10px;border-radius:var(--radius-pill)}
.group__head a.all{font-size:13px;font-weight:800;white-space:nowrap}
.ref-list{list-style:none;margin:0;padding:0}
.ref-list li+li{border-top:1px solid var(--line)}
.ref-list a{position:relative;display:block;padding:14px 28px 14px 12px;margin:0 -12px;border-radius:var(--radius-md);color:var(--text);transition:background var(--dur) var(--ease)}
.ref-list a::after{content:"›";position:absolute;right:12px;top:50%;margin-top:-.7em;font-size:22px;line-height:1;color:var(--line-strong);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.ref-list a:hover{background:var(--accent-softer);text-decoration:none}
.ref-list a:hover::after{transform:translateX(3px);color:var(--yellow-strong)}
.ref-list .term{display:block;font-weight:700;font-size:16px;line-height:1.55;color:var(--text-strong)}
.ref-list a:hover .term{color:var(--accent-strong)}
.ref-list .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;color:var(--muted);font-size:13.5px;line-height:1.65}
/* 一覧ページ（カテゴリ・検索）の一覧は白いカードに載せる */
.main>.ref-list{padding:4px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}

/* ===== article（装飾は控えめ・白背景で可読性優先） ===== */
.entry__head{margin-bottom:8px}
.entry__head a.cat{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:4px 16px 4px 12px;background:var(--navy);color:#fff;font-size:13px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.entry__head a.cat .ico{color:var(--yellow)}
.entry__head a.cat:hover{text-decoration:none;background:var(--navy-2)}
.entry__title{margin:0 0 14px;font-size:var(--fs-h1);line-height:1.45;letter-spacing:.02em;font-weight:900;color:var(--text-strong);text-wrap:balance;word-break:auto-phrase;font-feature-settings:"palt"}
.entry__sub{display:block;margin-top:.35em;font-size:.58em;font-weight:600;line-height:1.6;color:var(--muted);letter-spacing:.02em;font-feature-settings:normal}
.entry__meta{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0 0 22px;padding:0;font-size:13px;color:var(--muted)}
.entry__meta li{display:inline-flex;align-items:center;gap:5px}
.lead{margin:0 0 16px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:var(--radius-md);background:var(--sky);color:var(--text);font-size:calc(var(--fs-body) + .5px);line-height:1.8}
.lead::before{content:"ひとことで言うと";display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--text-strong)}
.entry__trust{display:flex;gap:8px;align-items:flex-start;margin:0 0 26px;font-size:13px;line-height:1.7;color:var(--muted)}
.entry__trust .ico{margin-top:.35em;color:var(--ok)}
.entry__trust a{text-decoration:underline;text-underline-offset:3px}

/* TOC */
.toc{font-size:14.5px}
.toc--inline{margin:0 0 32px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}
.toc--inline summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;cursor:pointer;list-style:none}
.toc--inline summary::-webkit-details-marker{display:none}
.toc--inline summary b{font-size:14px;letter-spacing:.04em}
.toc__count{margin-left:auto;font-size:12.5px;color:var(--muted)}
.toc--inline summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease)}
.toc--inline details[open] summary::after{transform:rotate(225deg)}
.entry__body .toc--inline ol{margin:0;padding:4px 16px 14px;list-style:none;counter-reset:toc}
.entry__body .toc--inline li{margin:0}
.entry__body .toc--inline li.l2{counter-increment:toc}
.entry__body .toc--inline li a{display:block;padding:10px 0;color:var(--text);border-top:1px solid var(--line);text-decoration:none}
.toc--inline li.l2>a::before{content:counter(toc) ". ";color:var(--muted);font-variant-numeric:tabular-nums}
.entry__body .toc--inline li.l3{margin-left:1.4em;font-size:13.5px}
@media (min-width:1024px){.toc--inline{display:none}}
.toc--side{margin:0 0 28px}
.toc__title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.toc__title::before{content:"";width:12px;height:4px;background:var(--yellow);transform:skewX(var(--slant))}
.toc--side ol{list-style:none;margin:0;padding:0}
.toc--side a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--line);color:var(--muted);font-size:13.5px;line-height:1.5;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.toc--side a:hover{color:var(--text);text-decoration:none}
.toc--side a:focus-visible{outline-offset:-2px}
.toc--side a[aria-current=true]{color:var(--text-strong);border-left-color:var(--yellow);font-weight:700}

/* body typography */
.entry__body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:.03em;line-break:strict;overflow-wrap:anywhere;text-autospace:normal;text-spacing-trim:trim-start}
.entry__body::after{content:"";display:block;clear:both}
.entry__body p{margin:0 0 1.4em;text-wrap:pretty}
.entry__body h2,.entry__body h3,.entry__body h4{color:var(--text-strong);text-wrap:balance;word-break:auto-phrase;font-feature-settings:"palt";letter-spacing:.02em}
/* h2：左に斜めのライン（濃紺＋オレンジ）と下線 */
.entry__body h2{position:relative;margin:2.6em 0 .9em;padding:0 0 .45em 1em;font-size:var(--fs-h2);line-height:1.5;font-weight:900;border-bottom:2px solid var(--line)}
.entry__body h2::before{content:"";position:absolute;left:.12em;top:.22em;bottom:.67em;width:.34em;background:linear-gradient(var(--navy) 0 62%,var(--yellow) 62%);transform:skewX(var(--slant))}
.entry__body h2::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--yellow)}
.entry__body h3{margin:2em 0 .6em;padding-left:.6em;font-size:var(--fs-h3);line-height:1.55;border-left:4px solid var(--navy)}
.entry__body h4{margin:1.6em 0 .4em;font-size:17px}
.entry__body ul,.entry__body ol{margin:0 0 1.4em;padding-left:1.5em}
.entry__body li{margin:.3em 0}
.entry__body li::marker{color:var(--yellow-strong)}
.entry__body a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:3px}
.entry__body a:hover{text-decoration-color:var(--accent)}
.entry__body strong,.entry__body b{color:var(--text-strong)}
.entry__body strong{background:linear-gradient(transparent 70%,rgba(255,106,26,.28) 70%)}
.entry__body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.entry__body code{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:.1em .4em;font-size:.88em;font-family:var(--font-mono);letter-spacing:0}
.entry__body pre{margin:0 0 1.6em;padding:1em 1.2em;overflow:auto;background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-md);font-size:.88em;line-height:1.7;tab-size:2;letter-spacing:0}
.entry__body pre code{background:none;border:0;padding:0;color:inherit}

/* tables（the_content フィルターで .tbl に包む。包まれない表も崩れない） */
.entry__body .tbl{overflow-x:auto;margin:0 0 1.8em;border:1px solid var(--line);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  background:linear-gradient(to right,var(--surface) 30%,transparent) left/24px 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,transparent) right/24px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--shadow-edge),transparent) left/10px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--shadow-edge),transparent) right/10px 100% no-repeat scroll;background-color:var(--surface)}
.entry__body .tbl:focus-visible{outline-offset:2px}
.entry__body table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:.94em;line-height:1.65;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.entry__body>table,.entry__body :not(.tbl)>table{display:block;overflow-x:auto;max-width:100%;margin:0 0 1.8em;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.entry__body th,.entry__body td{padding:.7em 1em;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:5.5em}
.entry__body thead th{background:var(--navy);color:#fff;font-weight:700;white-space:nowrap;border-bottom:2px solid var(--yellow)}
.entry__body tbody th{background:var(--sky);color:var(--text-strong)}
.entry__body tbody tr:nth-child(even) td{background:var(--zebra)}
.entry__body tbody tr:hover td{background:var(--accent-softer)}
.entry__body tbody td:first-child{font-weight:500;color:var(--text-strong)}
.entry__body tr>:last-child{border-right:0}
.entry__body tbody tr:last-child td{border-bottom:0}
.entry__body .tbl table,.entry__body .tbl{border-radius:var(--radius-md)}
@media (max-width:599px){
  .entry__body thead th:first-child,.entry__body tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
  .entry__body thead th:first-child{background:var(--navy)}
}

/* boxes */
.entry__body blockquote{position:relative;margin:2em 0;padding:16px 20px 16px 52px;border-left:4px solid var(--warn);border-radius:var(--radius-md);background:var(--warn-bg);color:var(--text);font-size:.94em;line-height:1.75}
.entry__body blockquote::before{content:"";position:absolute;left:18px;top:19px;width:20px;height:20px;background:var(--warn);-webkit-mask:var(--ico-warn) center/contain no-repeat;mask:var(--ico-warn) center/contain no-repeat}
.entry__body blockquote p:last-child{margin:0}
.opinion{position:relative;margin:2.6em 0;padding:8px 24px 14px;background:var(--surface);border:1px solid var(--ok-line);border-top:3px solid var(--ok);border-radius:var(--radius-md)}
.entry__body .opinion h2{display:flex;align-items:center;gap:.4em;margin:12px 0 10px;padding:0;border:0;color:var(--ok);font-size:var(--fs-h3)}
.entry__body .opinion h2::before{position:static;width:1.1em;height:1.1em;border-radius:0;transform:none;background:currentColor;-webkit-mask:var(--ico-chat) center/contain no-repeat;mask:var(--ico-chat) center/contain no-repeat}
.entry__body .opinion h2::after,.entry__body .sources h2::after{display:none}
.opinion p:last-child{margin-bottom:0}
.opinion::after{content:"一つの考え方であり、結果を保証するものではありません。";display:block;margin-top:12px;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.sources{margin-top:2.6em;padding:20px 24px;background:var(--surface-2);border-radius:var(--radius-md);font-size:14px;line-height:1.75;color:var(--muted)}
.entry__body .sources h2{margin:0 0 8px;padding:0;border:0;font-size:15px;color:var(--text-strong)}
.entry__body .sources h2::before{display:none}
.sources ul{margin:0;padding-left:1.3em}
.sources li{margin:.3em 0}
.sources a[target=_blank]::after{content:"↗";content:"↗" / "（新しいタブで開きます）";margin-left:.25em;font-size:.85em}
.disclaimer{margin:28px 0 0;padding:14px 16px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.75;color:var(--muted)}
.is-soon{color:var(--muted)}
.is-soon::after{content:"近日公開";margin-left:.6em;padding:1px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:.72em;letter-spacing:.02em;white-space:nowrap}

/* ===== 旧テーマ（stinger）時代の記事HTMLを崩さない汎用スタイル =====
   画像・動画・広告・アフィリエイトのバナーの幅はみ出し防止、回り込みの解除、キャプション */
.entry__body img,.entry__body video,.entry__body iframe,.entry__body embed,.entry__body object{max-width:100%}
.entry__body img{height:auto;vertical-align:middle}
.entry__body iframe{border:0}
.entry__body iframe[src*="youtube"],.entry__body iframe[src*="youtu.be"],.entry__body iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16/9}
.entry__body figure{margin:0 0 1.6em;max-width:100%}
.entry__body figcaption,.entry__body .wp-caption-text,.entry__body .wp-element-caption{margin-top:6px;font-size:13px;line-height:1.6;color:var(--muted);text-align:center}
.entry__body .wp-caption{max-width:100%!important;width:auto!important;margin:0 0 1.6em}
.entry__body div,.entry__body p,.entry__body span,.entry__body center,.entry__body section{max-width:100%}
.entry__body .tbl,.entry__body .tbl-wrap{max-width:100%}
.entry__body .aligncenter,.entry__body img.aligncenter,.entry__body center{display:block;margin-left:auto;margin-right:auto;text-align:center}
.entry__body .alignleft,.entry__body .alignright{display:block;margin:0 auto 1.2em}
@media (min-width:600px){
  .entry__body .alignleft{float:left;max-width:50%;margin:.3em 1.4em 1em 0}
  .entry__body .alignright{float:right;max-width:50%;margin:.3em 0 1em 1.4em}
}
.entry__body a img{border:0}
.entry__body a:has(> img){text-decoration:none}
.entry__body ins.adsbygoogle,.entry__body .adsbygoogle{display:block;max-width:100%;overflow:hidden;margin-left:auto;margin-right:auto}
.entry__body ins.adsbygoogle[style*="inline-block"]{display:inline-block!important}
.entry__body dl{margin:0 0 1.4em}
.entry__body dt{font-weight:700;color:var(--text-strong)}
.entry__body dd{margin:0 0 .8em 1em}
.entry__body [style*="width:"],.entry__body [width]{max-width:100%}
.entry__body table[width],.entry__body table[style*="width"]{width:100%!important}
.entry__body font{font-size:inherit}
/* もしも・カエレバ等のアフィリエイト商品枠 */
.entry__body .kaerebalink-box,.entry__body .booklink-box,.entry__body .easyLink-box,.entry__body .tomarebalink-box,.entry__body [class*="moshimo"]{max-width:100%;overflow:hidden;margin:0 0 1.6em;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.entry__body .kaerebalink-image,.entry__body .booklink-image{float:none!important;margin:0 auto 8px!important;text-align:center}
.entry__body .kaerebalink-info,.entry__body .booklink-info{overflow:hidden;line-height:1.6}

/* intro blocks (category / home) */
.intro{margin:0 0 40px}
.intro .entry__body>h2:first-child{margin-top:.4em}
.intro--home{max-width:760px;margin:8px auto 56px}
.list-title{margin-top:40px}

/* related / pager / archive */
.related{margin-top:48px}
.related h2,.list-title{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 0 10px 24px;font-size:19px;font-weight:900;color:var(--text-strong);border-bottom:2px solid var(--line-strong)}
.related h2::before,.list-title::before{content:"";position:absolute;left:3px;top:.28em;width:8px;height:1em;background:linear-gradient(var(--navy) 0 60%,var(--yellow) 60%);transform:skewX(var(--slant))}
.pager{display:grid;gap:12px;margin-top:40px}
@media (min-width:600px){.pager{grid-template-columns:1fr 1fr}.pager .next{grid-column:2}}
.pager a{position:relative;display:block;min-height:72px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--text-strong);font-weight:600;line-height:1.55;box-shadow:var(--shadow-1);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pager a:hover{border-color:var(--navy);text-decoration:none}
.pager .prev{border-left:4px solid var(--navy)}.pager .next{border-right:4px solid var(--navy)}
.pager .prev:hover{transform:translateX(-3px);border-left-color:var(--yellow)}.pager .next:hover{transform:translateX(3px);border-right-color:var(--yellow)}
.pager small{display:block;margin-bottom:2px;font-size:12px;font-weight:400;color:var(--muted)}
.pager span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager .next{text-align:right}
.archive-head{margin-bottom:24px}
.archive-head__chip{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:4px 18px 4px 12px;background:var(--navy-strong);color:#fff;font-size:13px;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.archive-head__chip .ico{color:var(--yellow)}
.archive-head h1{position:relative;margin:0 0 6px;padding-bottom:12px;font-size:var(--fs-h1);line-height:1.4;font-weight:900;color:var(--text-strong)}
.archive-head h1::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:6px;background:linear-gradient(90deg,var(--navy) 0 58%,transparent 58% 66%,var(--yellow) 66%);transform:skewX(-35deg);transform-origin:0 100%}
.archive-head p{margin:0 0 16px;color:var(--muted)}
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.pagination a,.pagination span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:14px}
.pagination a:hover{border-color:var(--navy);text-decoration:none}
.pagination .current{background:var(--navy);border-color:var(--navy);color:var(--on-accent);box-shadow:inset 0 -3px 0 var(--yellow)}

/* ===== フッター上のトレーナー枠（写真＋CTA） ===== */
.promo{padding:56px var(--gutter) 24px}
.promo__in{position:relative;max-width:var(--w-page);margin:0 auto;display:grid;gap:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
.promo__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-2);clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),0 100%)}
.promo__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.promo__ph{position:absolute;inset:0;background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 10px,transparent 10px 32px),linear-gradient(-62deg,transparent 0 40%,rgba(255,106,26,.5) 40% 43%,transparent 43%),linear-gradient(135deg,var(--navy-strong),var(--steel))}
.promo__body{padding:22px 22px 26px}
.promo__eyebrow{margin:0 0 4px;font-size:12px;font-weight:900;font-style:italic;letter-spacing:.22em;color:var(--steel)}
.promo__title{position:relative;margin:0 0 10px;padding-left:22px;font-size:clamp(20px,1.2vw + 15px,26px);font-weight:900;line-height:1.4;color:var(--text-strong)}
.promo__title::before{content:"";position:absolute;left:3px;top:.22em;width:8px;height:1.05em;background:linear-gradient(var(--navy) 0 60%,var(--yellow) 60%);transform:skewX(var(--slant))}
.promo__text{margin:0 0 16px;color:var(--text);font-size:15px;line-height:1.85}
.promo__cta{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:0;padding:0 0 0 6px}
.promo__cta .btn-cta{box-shadow:4px 4px 0 var(--navy)}
.promo__cta li:first-child .btn-cta{background:var(--navy);color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.promo__cta li:first-child .btn-cta:hover{background:var(--navy-2)}
@media (min-width:768px){
  .promo__in{grid-template-columns:minmax(0,300px) 1fr;align-items:center}
  .promo__media{aspect-ratio:3/4;height:100%;max-height:400px;clip-path:polygon(0 0,100% 0,calc(100% - 48px) 100%,0 100%)}
  .promo__body{padding:28px 36px 30px 20px}
}
@media (min-width:1024px){.single .promo__in,.page .promo__in{max-width:1108px}}

/* ===== footer（上に斜めの帯＋オレンジのライン、濃紺） ===== */
.footer-slant{display:block;width:100%;height:clamp(32px,4.6vw,70px);margin:24px 0 -1px;color:var(--navy-strong)}
.site-footer{margin-top:0;background:var(--navy-strong);color:var(--on-navy-muted);padding:32px var(--gutter) 28px;font-size:13px;content-visibility:auto;contain-intrinsic-size:auto 420px}
@media (max-width:1023px){.site-footer{contain-intrinsic-size:auto 900px}.site-footer li a{min-height:44px}}
.site-footer__in{max-width:var(--w-page);margin:0 auto}
.site-footer__cols{display:grid;gap:28px;margin-bottom:28px}
@media (min-width:1024px){.site-footer__cols{grid-template-columns:1.2fr 1.4fr .8fr;gap:48px}}
.site-footer__name{margin:0 0 4px;font-size:19px;font-weight:900;font-style:italic;letter-spacing:.06em;color:#fff}
.site-footer__name::before{content:"";display:inline-block;width:.38em;height:.85em;margin-right:.3em;background:var(--yellow);vertical-align:-.06em;transform:skewX(var(--slant))}
.site-footer__tag{margin:0 0 16px;line-height:1.7}
.site-footer__title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--yellow)}
.site-footer__title::before{content:"";width:12px;height:4px;background:var(--yellow);transform:skewX(var(--slant))}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer__cats ul{columns:2;column-gap:20px}
.site-footer li{margin:0 0 4px;break-inside:avoid}
.site-footer li a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:#fff;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.site-footer li a:hover{color:var(--yellow);transform:translateX(2px)}
.site-footer__notes{padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.site-footer__notes p{margin:0 0 6px;max-width:780px;line-height:1.75}

@media (forced-colors:active){.search-form:focus-within{outline:2px solid CanvasText}}

.google-auto-placed{margin:2em 0;clear:both}
.cat-grid>.google-auto-placed,.groups>.google-auto-placed,.pager>.google-auto-placed,.wrap>.google-auto-placed{grid-column:1/-1}
.entry__body .google-auto-placed{max-width:100%;overflow:hidden}

/* ===== motion / print ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .single .site-header::after{display:none}
  .to-top{opacity:1!important;pointer-events:auto!important;visibility:visible!important}
  .cat-grid a:hover,.pager a:hover,.pager .prev:hover,.pager .next:hover,.hero__chips a:hover,.sidebar li a:hover,.site-footer li a:hover,.scene:hover .scene__label{transform:none}
  .btn-cta:hover{transform:skewX(var(--slant))}
  .scene:hover .scene__img{transform:none}
  .gnav a::after{transition:none}
}
@media print{
  .site-header,.m-search,.scrim,.drawer,.sidebar,.toc,.pager,.related,.to-top,.hero__chips,.hero__cta,.hero__media,.hero__cut,.hero__speed,.footer-slant,.promo,.scenes-sec,ins.adsbygoogle,.google-auto-placed,.site-footer__cols{display:none!important}
  :root{--text:#000;--text-strong:#000;--muted:#444;--bg:#fff;--surface:#fff;--surface-2:#f4f4f4;--sky:#fff;--line:#ccc;--line-strong:#999;--accent:#000;--navy:#000;--ok:#000;--warn:#000}
  .hero,.band--dark::before{background:#fff!important;color:#000}
  .hero h1,.hero__catch,.hero__lead,.band--dark .sec-title{color:#000}
  .search-form,.skip-link,.crumb{display:none!important}
  .site-footer{background:#fff;color:#000}
  .single .main,.page .main{border:0;padding:0;box-shadow:none}
  .entry__body thead th{background:#eee;color:#000}
  .entry__body pre{background:#f6f6f6!important;color:#000!important;border:1px solid #ccc;white-space:pre-wrap}
  .wrap{display:block!important;max-width:none;padding:0}
  body{font-size:10.5pt;line-height:1.7;color:#000;background:#fff}
  .entry__body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444;word-break:break-all}
  .entry__body h2,.entry__body h3{break-after:avoid}
  .entry__body table,.opinion,blockquote{break-inside:avoid}
  .entry__body .tbl{overflow:visible;background:none}
  .entry__body table{display:table;overflow:visible;background:none}
}

/* ===== 表：先頭列を広げる・スマホで列幅を広げ、横スクロールが分かるようにする ===== */
.entry__body th:first-child,.entry__body td:first-child{min-width:8.5em}
.intro .entry__body td:first-child,.intro .entry__body th:first-child{min-width:10.5em}
.tbl-wrap{margin:0 0 1.8em}
.tbl-wrap .tbl{margin:0}
.tbl-hint{display:none;margin:0 0 6px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.04em;color:var(--accent-strong);text-align:right}
.tbl-wrap.is-scrollable .tbl-hint{display:block}
@media (max-width:599px){
  .entry__body th,.entry__body td{min-width:11em;padding:.75em 1em}
  .entry__body th:first-child,.entry__body td:first-child{min-width:8.5em}
  .tbl-wrap .tbl{scrollbar-width:auto;scrollbar-color:var(--navy) var(--surface-2)}
  .tbl-wrap .tbl::-webkit-scrollbar{height:8px}
  .tbl-wrap .tbl::-webkit-scrollbar-thumb{background:var(--navy);border-radius:4px}
  .tbl-wrap .tbl::-webkit-scrollbar-track{background:var(--surface-2)}
}
@media print{.tbl-hint{display:none!important}}

/* ===== アイキャッチ・記事下画像（config の eyecatch / bottom_image が有効なサイトのみ出力される） ===== */
.eyecatch{position:relative;margin:0 0 20px}
.eyecatch::after{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px;background:linear-gradient(135deg,transparent 50%,var(--yellow) 50%);border-bottom-right-radius:var(--radius-lg);pointer-events:none}
.eyecatch__img,.post-bottom-image__img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--line)}
.post-bottom-image{margin:2.4em 0 0}
.ref-list .has-thumb a{display:flex;align-items:center;gap:14px}
.ref-list__thumb{flex:0 0 96px;width:96px}
.ref-list__img{display:block;width:96px;height:64px;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.ref-list__text{flex:1;min-width:0;display:block}
@media (max-width:480px){.ref-list__thumb{flex-basis:72px;width:72px}.ref-list__img{width:72px;height:56px}}

/* mobile: show the full tagline under the logo (wrap instead of ellipsis) */
@media (max-width:1023px){.site-title__name{font-size:17px}.site-title small{font-size:10.5px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;max-width:60vw}}

/* totop-sp-bottom-right */
@media (max-width:1023px){.to-top{right:16px!important;left:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 16px)!important}}

/* sale banner (restored from old theme) */
.sale-banner{display:block;margin:0 0 16px}
.sale-banner img{display:block;width:100%;height:auto;margin:0 auto}
.sale-banner--end{margin:20px 0}
.band + .wrap .sale-banner,.wrap--full>.sale-banner{margin:24px 0}
.sale-banner.sale-banner--top,.band + .wrap .sale-banner.sale-banner--top,.wrap--full>.sale-banner.sale-banner--top{display:block;max-width:760px;margin:24px auto 56px}

.company-info{margin:28px 0;padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2)}
.company-info h2{margin-top:0}
.company-info__img img{max-width:100%;height:auto;border-radius:var(--radius)}
.company-info__map iframe{width:100%;max-width:100%}
.company-info__note{font-size:.875rem;color:var(--muted)}

/* ===== 表示チェック修正（2026-10-06） ===== */
/* 404・検索0件のカテゴリカード：サイドバー付きの狭いメイン列で4列にせず、カード幅で列数を決める（細かい折り返しを防ぐ） */
@media (min-width:600px){.main .cat-grid--compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.cat-grid--compact b{word-break:keep-all;overflow-wrap:anywhere}
/* 一覧：アイキャッチが無い記事の代わりの枠（サムネ付きの行と左揃えをそろえる） */
.ref-list__img--none{display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* 画面下のアンカー広告にフッターの末尾（免責文・著作権表示）が隠れないよう、ページ最下部に余白を足す */
.site-footer{padding-bottom:calc(28px + 100px)}
@media (max-width:767px){.site-footer{padding-bottom:calc(28px + 80px)}}
/* ks-news（トップのニュース欄）: サイトの配色に合わせる */
.ks-news{background:var(--surface);border-color:var(--line-strong)}.ks-news__title{color:var(--text-strong)}.ks-news__item{border-top-color:var(--line)}