/*
Theme Name: Fabio Reference
Description: fabio（イタリアンシェフ ファビオのレシピ）用。workout-reference をもとに、イタリアンの配色にしたもの
Version: 3.1.0
Text Domain: fx-reference
*/

/* ===== tokens（ライト固定） =====
   workout（プロワク）: 濃紺/チャコール（ヘッダー・ヒーロー・フッター・ボタン）＋スチールグレー＋白〜薄グレー＋差し色オレンジ
   トークン名は fitness と共通（--sky=薄いグレー系 / --navy=濃紺 / --yellow=オレンジ）。
   コントラスト比は themes/DESIGN_NOTES.md を参照（本文はすべて AA 以上。オレンジ上の文字は濃紺） */
:root{
  --sky:#f6f0e6; --sky-2:#ebe0cd; --sky-3:#d5c4a6; --steel:#6b7a5e; --steel-light:#a9b49a;
  --navy:#1d3a2b; --navy-strong:#142a1f; --ink:#142a1f; --navy-2:#24483a;
  --yellow:#d9a441; --yellow-strong:#c08a2a; --on-yellow:#142a1f;
  --bg:#faf6ee; --surface:#fff; --surface-2:#f2ebdf; --zebra:#fbf8f2;
  --text:#2a2420; --text-strong:#1a1512; --muted:#5e5449;
  --line:#e6dccb; --line-strong:#cfc1a8; --ui-border:#8c8070; --shadow-edge:rgba(20,42,31,.16);
  --warn:#9a4505; --warn-bg:#fff6ec; --warn-line:#f5c58f;
  --ok:#0b6b3a; --ok-bg:#edf8f1; --ok-line:#a8dcbd;
  --info:#1d3a2b; --info-bg:#f6f0e6;
  --accent:#b83c06; --accent-strong:#8f2f05; --accent-soft:#f3f5f7; --accent-softer:#fff4ec; --accent-ring:rgba(217,164,65,.35); --accent-2:#1d3a2b;
  --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(1.6rem,.25vw + 1.52rem,1.7rem); --lh-body:1.9;
  --fs-h3:clamp(1.75rem,.5vw + 1.55rem,1.9rem); --fs-h2:clamp(2rem,1vw + 1.65rem,2.4rem);
  --fs-h1:clamp(2.4rem,2vw + 1.7rem,3.2rem); --fs-hero:clamp(2.6rem,3vw + 1.6rem,4rem);
  --radius-sm:0.4rem; --radius-md:0.6rem; --radius-lg:1rem; --radius-pill:99.9rem;
  --shadow-1:0 0.1rem 0.2rem rgba(20,42,31,.07);
  --shadow-2:0 0.1rem 0.2rem rgba(20,42,31,.06),0 0.4rem 1.2rem rgba(20,42,31,.1);
  --shadow-3:0 0.2rem 0.4rem rgba(20,42,31,.06),0 1.2rem 3.2rem rgba(20,42,31,.18);
  --slant:-14deg;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:200ms;
  --header-h:5.6rem; --w-page:120rem; --w-content:68rem; --w-side:30rem; --gutter:clamp(1.6rem,4vw,3.2rem);
  --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:751px){:root{--header-h:6.4rem}}

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.6rem);-webkit-text-size-adjust:100%;font-size:62.5%}
@media screen and (max-width:1300px) and (min-width:751px){html{font-size:0.75vw}}
@media screen and (max-width:750px){html{font-size:62.5%}}
html.is-locked{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:1.6rem;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:0.3rem}
img{max-width:100%;height:auto}
.ico{flex:none;vertical-align:-.2em}
:focus-visible{outline:0.2rem solid var(--accent);outline-offset:0.2rem;border-radius:0.4rem}
.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:1.2rem;top:-6rem;z-index:200;background:var(--ink);color:#fff;padding:1rem 1.6rem;border-radius:var(--radius-md);font-weight:700}
.skip-link:focus{top:1.2rem;text-decoration:none}
#top{position:absolute;top:0;left:0;width:0.1rem;height:0.1rem;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(217,164,65,.5) 72% 72.6%,transparent 72.6% 75%,rgba(255,255,255,.05) 75% 77%,transparent 77%),var(--navy-strong);box-shadow:0 0.1rem 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:1.6rem}
.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:1.9rem;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:1.1rem;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:0.2rem;margin-left:auto}
.gnav a{position:relative;color:#fff;padding:0.8rem 1.2rem;font-size:1.4rem;font-weight:700}
.gnav a::after{content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:0.4rem;height:0.3rem;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:4.4rem;height:4.4rem;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:-0.8rem}

/* search form */
.search-form{display:flex;align-items:center;gap:0.8rem;height:5.2rem;padding:0 0.6rem 0 1.8rem;background:var(--surface);border:0.1rem 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 0.3rem 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:1.6rem;outline:none;-webkit-appearance:none;appearance:none}
.search-form input::placeholder{color:var(--muted);opacity:1}
.search-form button{height:4rem;padding:0 2.2rem;border:0;border-radius:var(--radius-sm);background:var(--navy);color:var(--on-accent);font:inherit;font-size:1.5rem;font-weight:800;cursor:pointer;clip-path:polygon(0.8rem 0,100% 0,calc(100% - 0.8rem) 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:4rem;padding:0 1.2rem;flex:1;max-width:40rem;margin-left:1.2rem;background:var(--surface);border-color:transparent;box-shadow:none}
.search-form--header:focus-within{border-color:var(--yellow);box-shadow:0 0 0 0.3rem rgba(217,164,65,.5)}
.search-form--header input[type=search]{font-size:1.4rem}
.search-form__key{font:600 1.2rem/1 var(--font-mono);color:var(--muted);border:0.1rem solid var(--line-strong);border-radius:0.4rem;padding:0.3rem 0.6rem;background:var(--surface-2)}
.m-search{padding:1rem var(--gutter);background:var(--navy);border-bottom:0.2rem solid var(--yellow);position:sticky;top:var(--header-h);z-index:49}
.m-search .search-form{height:4.8rem}

/* drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(20,42,31,.6)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(86vw,36rem);display:flex;flex-direction:column;background:var(--surface);overflow-y:auto;box-shadow:var(--shadow-3);padding:0 0.8rem 2.4rem}
.drawer[hidden]{display:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;flex:none;height:var(--header-h);margin:0 -0.8rem;padding:0 0.8rem 0 2rem;font-size:1.6rem;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:0.8rem;margin:1.8rem 1.2rem 0.6rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.drawer__title::before{content:"";width:1.4rem;height:0.4rem;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:1.2rem;min-height:4.8rem;padding:0.6rem 1.2rem;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:0.3rem;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.to-top{position:fixed;right:1.6rem;bottom:calc(env(safe-area-inset-bottom) + 1.6rem);z-index:40;display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:var(--radius-md);background:var(--navy);color:#fff;border:0.2rem 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:42rem 64rem}
  @keyframes fx-progress{to{transform:scaleX(1)}}
  @keyframes fx-totop{to{opacity:1;pointer-events:auto;visibility:visible}}
}
@media (min-width:751px){.to-top{bottom:2.4rem;right:2.4rem}}

/* ===== layout ===== */
.wrap{max-width:var(--w-page);margin:0 auto;padding:2.8rem var(--gutter) 7.2rem;display:block}
.wrap--full{padding-top:4rem}
.main{min-width:0}
.sidebar{display:none;font-size:1.4rem}
@media (min-width:751px){
  .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:7.2rem;justify-content:center;padding-top:3.6rem}
  .sidebar{display:block}
  /* 記事・固定ページは白いカードに載せる（上辺に斜めの切り替えライン） */
  .single .wrap:not(.wrap--full),.page .wrap:not(.wrap--full){grid-template-columns:minmax(0,76rem) var(--w-side);gap:4.8rem}
  .single .main,.page .main{position:relative;background:var(--surface);border:0.1rem solid var(--line);border-radius:var(--radius-lg);padding:3.2rem 4rem 4rem;box-shadow:var(--shadow-1)}
  .single .main::before,.page .main::before{content:"";position:absolute;left:-0.1rem;right:-0.1rem;top:-0.1rem;height:0.4rem;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) + 2.4rem);max-height:calc(100vh - var(--header-h) - 4.8rem);overflow:auto;padding-right:0.6rem;scrollbar-width:thin}
.side-title{display:flex;align-items:center;gap:0.8rem;margin:0 0 0.8rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.side-title::before{content:"";width:1.2rem;height:0.4rem;background:var(--yellow);transform:skewX(var(--slant))}
.sidebar ul{list-style:none;margin:0 0 2.4rem;padding:0}
.sidebar li a{display:flex;justify-content:space-between;gap:0.8rem;padding:0.7rem 1rem;border-radius:var(--radius-sm);color:var(--text);font-size:1.4rem;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(0.2rem)}
.sidebar li a.is-current{background:var(--surface);color:var(--text-strong);font-weight:700;box-shadow:inset 0.3rem 0 0 var(--yellow)}
.sidebar .count{color:var(--muted);font-size:1.2rem}
.side-cats summary{cursor:pointer;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--muted);padding:0.6rem 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:1.3rem;color:var(--muted);margin:0 0 2rem}
.crumb a{color:var(--muted)}
.crumb span+span::before{content:"/";display:inline-block;margin:0 0.8rem;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:750px){.single .crumb span:last-child:not(:first-child){display:none}}

/* ===== 見出し（トップ・一覧用）：左に斜めのライン（濃紺＋オレンジ） ===== */
.sec-title{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.2rem;margin:0 0 2.2rem;padding-left:3.6rem;font-size:clamp(2.1rem,1.2vw + 1.6rem,2.8rem);line-height:1.35;font-weight:900;letter-spacing:.03em;color:var(--text-strong)}
.sec-title::before{content:"";position:absolute;left:0.4rem;top:.18em;width:1rem;height:1.1em;background:var(--navy);transform:skewX(var(--slant))}
.sec-title::after{content:"";position:absolute;left:1.8rem;top:.18em;width:0.6rem;height:1.1em;background:var(--yellow);transform:skewX(var(--slant))}
.sec-title small{order:2;font-size:1.2rem;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 1.4rem,transparent 1.4rem 4.8rem),linear-gradient(-62deg,transparent 0 22%,rgba(217,164,65,.55) 22% 23.5%,transparent 23.5%),linear-gradient(115deg,var(--navy-strong) 0%,var(--navy-2) 48%,#3d5e48 100%)}
.hero.has-photo .hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(20,42,31,.85))}
.hero__body{position:relative;z-index:1;isolation:isolate;margin-top:-6.4rem;padding:8.4rem var(--gutter) 9.6rem}
.hero__body::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-strong);clip-path:polygon(0 6.4rem,100% 0,100% 100%,0 100%)}
.hero__body::after{content:"";position:absolute;left:0;right:0;top:0;height:7.4rem;z-index:-1;background:var(--yellow);clip-path:polygon(0 6.4rem,100% 0,100% 0.6rem,0 7rem)}
.hero__text{max-width:60rem;margin:0 auto}
.hero__badge{display:inline-block;margin:0 0 1.4rem;padding:0.3rem 1.6rem;background:var(--yellow);color:var(--on-yellow);font-size:1.25rem;font-weight:800;letter-spacing:.06em;clip-path:polygon(0.8rem 0,100% 0,calc(100% - 0.8rem) 100%,0 100%)}
.hero h1{margin:0 0 1.4rem;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:0.8rem;font-size:clamp(1.4rem,.4vw + 1.25rem,1.7rem);font-weight:800;letter-spacing:.12em;color:var(--yellow)}
.hero__catch{display:block;font-size:clamp(3.4rem,3.6vw + 1.8rem,6.4rem);line-height:1.18;font-weight:900;font-style:italic;letter-spacing:.02em;color:#fff;font-feature-settings:"palt"}
.hero__lead{margin:0 0 2.2rem;color:var(--on-navy-muted);font-size:1.5rem;line-height:1.85}
.hero .search-form{max-width:56rem;height:5.6rem;border-color:transparent;box-shadow:0 0 0 0.1rem 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:1rem 1.2rem;list-style:none;margin:1.8rem 0 0;padding:0 0 0 0.6rem}
.btn-cta{display:inline-flex;align-items:center;min-height:4.4rem;padding:0 1.8rem;border-radius:0.2rem;background:var(--yellow);color:var(--on-yellow);font-size:1.45rem;font-weight:800;line-height:1.3;transform:skewX(var(--slant));box-shadow:0.4rem 0.4rem 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:0.6rem;transform:skewX(calc(var(--slant) * -1))}
.btn-cta:hover{background:#ff8340;text-decoration:none;transform:skewX(var(--slant)) translateX(0.3rem);box-shadow:0.1rem 0.4rem 0 var(--steel)}
.hero__chips{display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;margin:1.8rem 0 0;font-size:1.3rem}
.hero__chips>span{color:var(--on-navy-muted);font-weight:700}
.hero__chips a{padding:0.4rem 1.2rem;border-radius:0.2rem;background:rgba(255,255,255,.06);border:0.1rem 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(0.2rem)}
/* 斜めのスピードライン（インラインSVG・装飾のみ） */
.hero__speed{position:absolute;right:0;bottom:6rem;z-index:0;width:70%;height:42%;color:var(--yellow);opacity:.3;pointer-events:none}
/* 下端の斜めカット（オレンジの帯つき） */
.hero__cut{position:absolute;left:0;right:0;bottom:-0.1rem;z-index:2;display:block;width:100%;height:clamp(2.8rem,5vw,8rem);color:var(--bg);pointer-events:none}
@media (max-width:750px){
  .hero h1 br,.hero__catch br{display:none}
  .hero__catch{font-size:clamp(3rem,9vw,4rem)}
  /* スマホ用の縦長写真が無いときは横長写真を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:751px) and (max-width:750px){
  .hero__media{aspect-ratio:16/9;max-height:none}
  .hero__img{object-position:70% 40%}
}
@media (min-width:751px){
  .hero{display:grid}
  .hero__media,.hero__body{grid-area:1/1}
  .hero__media{aspect-ratio:auto;max-height:none;height:auto;min-height:clamp(54rem,46vw,74rem)}
  .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(20,42,31,.96) 0,rgba(20,42,31,.92) calc(50% + 4.8rem),rgba(20,42,31,0) calc(72% + 4.8rem))}
  .hero__body{align-self:center;width:100%;max-width:var(--w-page);margin:0 auto;padding:4rem var(--gutter) 11rem}
  .hero__body::before,.hero__body::after{display:none}
  .hero__text{max-width:56rem;margin:0}
  .hero__speed{left:calc(50% + 4rem);right:auto;top:0;bottom:auto;width:26%;height:100%;opacity:.55}
}

/* ===== 斜めの帯（トップのカテゴリ：濃紺） ===== */
.band{position:relative;isolation:isolate;margin:clamp(1.6rem,4vw,5.6rem) 0 0;padding:clamp(7.2rem,7vw,11.2rem) 0 clamp(7.2rem,7vw,11.2rem)}
.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:-1rem;z-index:-1;width:min(46%,46rem);height:15rem;background:repeating-linear-gradient(-62deg,var(--sky-3) 0 0.8rem,transparent 0.8rem 2.2rem);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 0.6rem,transparent 0.6rem 2rem);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:1.2rem;margin:0 0 4.8rem}
@media (min-width:751px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:751px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}}
.cat-grid a{position:relative;overflow:hidden;display:grid;grid-template-columns:4.4rem 1fr;grid-template-rows:auto auto;column-gap:1.2rem;align-items:center;padding:1.4rem 1.6rem 1.4rem 1.4rem;border:0.1rem solid var(--line);border-left:0.4rem solid var(--navy);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 2rem,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:2rem;height:2rem;background:linear-gradient(225deg,transparent 50%,var(--sky-3) 50%)}
.cat-grid a::after{content:"";position:absolute;right:-0.6rem;bottom:-0.6rem;width:7rem;height:3rem;background:repeating-linear-gradient(-62deg,var(--sky-2) 0 0.5rem,transparent 0.5rem 1.1rem);pointer-events:none;transition:background var(--dur) var(--ease)}
.cat-grid a:hover{border-left-color:var(--yellow);transform:translateX(0.3rem);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(217,164,65,.7) 0 0.5rem,transparent 0.5rem 1.1rem)}
.cat-ico{grid-row:span 2;display:grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:var(--radius-sm);background:var(--navy);color:#fff;clip-path:polygon(0.6rem 0,100% 0,calc(100% - 0.6rem) 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:1.5rem;line-height:1.35;color:var(--text-strong)}
.cat-grid small{position:relative;font-size:1.25rem;color:var(--muted)}
.cat-grid--compact{margin-top:2.4rem}

/* ===== シーン写真カード（4:3、角の斜めカット）5枚：PCは 2＋3 ===== */
.scenes-sec{margin:0.8rem 0 5.6rem}
.scenes{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:751px){
  .scenes{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.6rem}
  .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% - 3.2rem),calc(100% - 3.2rem) 100%,0 100%);background:var(--navy-2);color:#fff}
@media (min-width:751px){.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(-0.4rem)}
.scene__ph{position:absolute;inset:0;background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 1rem,transparent 1rem 3.2rem),linear-gradient(-62deg,transparent 0 64%,rgba(217,164,65,.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 1rem,transparent 1rem 3.2rem),linear-gradient(135deg,var(--navy-strong),#3d5e48)}
.scene--3 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 1rem,transparent 1rem 3.2rem),linear-gradient(135deg,#2b3a52,var(--navy))}
.scene--4 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.08) 0 1rem,transparent 1rem 3.2rem),linear-gradient(135deg,#7a4122,var(--navy-strong))}
.scene--5 .scene__ph{background:repeating-linear-gradient(-62deg,rgba(255,255,255,.06) 0 1rem,transparent 1rem 3.2rem),linear-gradient(135deg,var(--steel),var(--navy-strong))}
.scene::after{content:"";position:absolute;right:0;bottom:0;width:3.2rem;height:3.2rem;background:linear-gradient(135deg,transparent 0 30%,var(--yellow) 30% 42%,transparent 42%);pointer-events:none}
.scene__label{position:absolute;left:0;bottom:1.8rem;display:flex;flex-direction:column;max-width:calc(100% - 4.4rem);padding:0.8rem 2.8rem 0.9rem 1.6rem;background:var(--navy-strong);color:#fff;font-size:1.6rem;font-weight:800;line-height:1.35;clip-path:polygon(0 0,100% 0,calc(100% - 1.6rem) 100%,0 100%);box-shadow:inset 0.4rem 0 0 var(--yellow);transition:transform var(--dur) var(--ease)}
.scene:hover .scene__label{transform:translateX(0.4rem)}
.scene__label small{font-size:1.15rem;font-weight:700;letter-spacing:.06em;color:var(--yellow)}
.scenes>.google-auto-placed{grid-column:1/-1}

/* ===== lists ===== */
.groups{display:grid;gap:0.4rem 2.8rem}
@media (min-width:751px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.group{position:relative;overflow:hidden;margin:0 0 2.4rem;padding:1rem 2rem 0.6rem;background:var(--surface);border:0.1rem solid var(--line);border-radius:var(--radius-lg)}
.group::before{content:"";position:absolute;left:0;right:0;top:0;height:0.4rem;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:1.2rem;padding:0.6rem 0 1rem;margin-bottom:0.4rem;border-bottom:0.1rem solid var(--line-strong)}
.group__head h2,.group__head h3{display:flex;align-items:center;gap:1rem;margin:0;font-size:1.9rem;font-weight:900;color:var(--text-strong)}
.group__ico{color:var(--yellow-strong)}
.group__head .count{margin-right:auto;margin-left:0.4rem;font-size:1.2rem;font-weight:600;color:var(--muted);background:var(--surface-2);padding:0.2rem 1rem;border-radius:var(--radius-pill)}
.group__head a.all{font-size:1.3rem;font-weight:800;white-space:nowrap}
.ref-list{list-style:none;margin:0;padding:0}
.ref-list li+li{border-top:0.1rem solid var(--line)}
.ref-list a{position:relative;display:block;padding:1.4rem 2.8rem 1.4rem 1.2rem;margin:0 -1.2rem;border-radius:var(--radius-md);color:var(--text);transition:background var(--dur) var(--ease)}
.ref-list a::after{content:"›";position:absolute;right:1.2rem;top:50%;margin-top:-.7em;font-size:2.2rem;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(0.3rem);color:var(--yellow-strong)}
.ref-list .term{display:block;font-weight:700;font-size:1.6rem;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:0.3rem;color:var(--muted);font-size:1.35rem;line-height:1.65}
/* 一覧ページ（カテゴリ・検索）の一覧は白いカードに載せる */
.main>.ref-list{padding:0.4rem 1.8rem;background:var(--surface);border:0.1rem solid var(--line);border-radius:var(--radius-lg)}

/* ===== article（装飾は控えめ・白背景で可読性優先） ===== */
.entry__head{margin-bottom:0.8rem}
.entry__head a.cat{display:inline-flex;align-items:center;gap:0.6rem;margin-bottom:1.4rem;padding:0.4rem 1.6rem 0.4rem 1.2rem;background:var(--navy);color:#fff;font-size:1.3rem;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 0.8rem) 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 1.4rem;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:0.4rem 1.6rem;list-style:none;margin:0 0 2.2rem;padding:0;font-size:1.3rem;color:var(--muted)}
.entry__meta li{display:inline-flex;align-items:center;gap:0.5rem}
.lead{margin:0 0 1.6rem;padding:1.8rem 2rem;border:0.1rem solid var(--line);border-left:0.4rem solid var(--yellow);border-radius:var(--radius-md);background:var(--sky);color:var(--text);font-size:calc(var(--fs-body) + 0.05rem);line-height:1.8}
.lead::before{content:"ひとことで言うと";display:block;margin-bottom:0.4rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--text-strong)}
.entry__trust{display:flex;gap:0.8rem;align-items:flex-start;margin:0 0 2.6rem;font-size:1.3rem;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:0.3rem}

/* TOC */
.toc{font-size:1.45rem}
.toc--inline{margin:0 0 3.2rem;border:0.1rem 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:1.2rem;min-height:4.8rem;padding:0 1.6rem;cursor:pointer;list-style:none}
.toc--inline summary::-webkit-details-marker{display:none}
.toc--inline summary b{font-size:1.4rem;letter-spacing:.04em}
.toc__count{margin-left:auto;font-size:1.25rem;color:var(--muted)}
.toc--inline summary::after{content:"";width:0.8rem;height:0.8rem;border-right:0.2rem solid var(--muted);border-bottom:0.2rem solid var(--muted);transform:rotate(45deg) translateY(-0.2rem);transition:transform var(--dur) var(--ease)}
.toc--inline details[open] summary::after{transform:rotate(225deg)}
.entry__body .toc--inline ol{margin:0;padding:0.4rem 1.6rem 1.4rem;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:1rem 0;color:var(--text);border-top:0.1rem 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:1.35rem}
@media (min-width:751px){.toc--inline{display:none}}
.toc--side{margin:0 0 2.8rem}
.toc__title{display:flex;align-items:center;gap:0.8rem;margin:0 0 0.8rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.toc__title::before{content:"";width:1.2rem;height:0.4rem;background:var(--yellow);transform:skewX(var(--slant))}
.toc--side ol{list-style:none;margin:0;padding:0}
.toc--side a{display:block;padding:0.6rem 0 0.6rem 1.4rem;border-left:0.2rem solid var(--line);color:var(--muted);font-size:1.35rem;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:-0.2rem}
.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:0.2rem 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:-0.2rem;width:7.2rem;height:0.2rem;background:var(--yellow)}
.entry__body h3{margin:2em 0 .6em;padding-left:.6em;font-size:var(--fs-h3);line-height:1.55;border-left:0.4rem solid var(--navy)}
.entry__body h4{margin:1.6em 0 .4em;font-size:1.7rem}
.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:0.3rem}
.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(217,164,65,.28) 70%)}
.entry__body hr{border:0;border-top:0.1rem solid var(--line);margin:2.4em 0}
.entry__body code{background:var(--surface-2);border:0.1rem solid var(--line);border-radius:0.4rem;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:0.1rem 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/2.4rem 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,transparent) right/2.4rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--shadow-edge),transparent) left/1rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--shadow-edge),transparent) right/1rem 100% no-repeat scroll;background-color:var(--surface)}
.entry__body .tbl:focus-visible{outline-offset:0.2rem}
.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:0.1rem 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:0.1rem solid var(--line);border-right:0.1rem solid var(--line);min-width:5.5em}
.entry__body thead th{background:var(--navy);color:#fff;font-weight:700;white-space:nowrap;border-bottom:0.2rem 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:750px){
  .entry__body thead th:first-child,.entry__body tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:0.1rem 0 0 var(--line)}
  .entry__body thead th:first-child{background:var(--navy)}
}

/* boxes */
.entry__body blockquote{position:relative;margin:2em 0;padding:1.6rem 2rem 1.6rem 5.2rem;border-left:0.4rem 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:1.8rem;top:1.9rem;width:2rem;height:2rem;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:0.8rem 2.4rem 1.4rem;background:var(--surface);border:0.1rem solid var(--ok-line);border-top:0.3rem solid var(--ok);border-radius:var(--radius-md)}
.entry__body .opinion h2{display:flex;align-items:center;gap:.4em;margin:1.2rem 0 1rem;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:1.2rem;font-size:1.2rem;letter-spacing:.02em;color:var(--muted)}
.sources{margin-top:2.6em;padding:2rem 2.4rem;background:var(--surface-2);border-radius:var(--radius-md);font-size:1.4rem;line-height:1.75;color:var(--muted)}
.entry__body .sources h2{margin:0 0 0.8rem;padding:0;border:0;font-size:1.5rem;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:2.8rem 0 0;padding:1.4rem 1.6rem 0;border-top:0.1rem solid var(--line);font-size:1.25rem;line-height:1.75;color:var(--muted)}
.is-soon{color:var(--muted)}
.is-soon::after{content:"近日公開";margin-left:.6em;padding:0.1rem 0.8rem;border:0.1rem 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:0.6rem;font-size:1.3rem;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:751px){
  .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:1.2rem;border:0.1rem 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 0.8rem!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 4rem}
.intro .entry__body>h2:first-child{margin-top:.4em}
.intro--home{max-width:76rem;margin:0.8rem auto 5.6rem}
.list-title{margin-top:4rem}

/* related / pager / archive */
.related{margin-top:4.8rem}
.related h2,.list-title{position:relative;display:flex;align-items:center;gap:0.8rem;margin:0 0 0.8rem;padding:0 0 1rem 2.4rem;font-size:1.9rem;font-weight:900;color:var(--text-strong);border-bottom:0.2rem solid var(--line-strong)}
.related h2::before,.list-title::before{content:"";position:absolute;left:0.3rem;top:.28em;width:0.8rem;height:1em;background:linear-gradient(var(--navy) 0 60%,var(--yellow) 60%);transform:skewX(var(--slant))}
.pager{display:grid;gap:1.2rem;margin-top:4rem}
@media (min-width:751px){.pager{grid-template-columns:1fr 1fr}.pager .next{grid-column:2}}
.pager a{position:relative;display:block;min-height:7.2rem;padding:1.4rem 1.8rem;border:0.1rem 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:0.4rem solid var(--navy)}.pager .next{border-right:0.4rem solid var(--navy)}
.pager .prev:hover{transform:translateX(-0.3rem);border-left-color:var(--yellow)}.pager .next:hover{transform:translateX(0.3rem);border-right-color:var(--yellow)}
.pager small{display:block;margin-bottom:0.2rem;font-size:1.2rem;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:2.4rem}
.archive-head__chip{display:inline-flex;align-items:center;gap:0.6rem;margin-bottom:1.2rem;padding:0.4rem 1.8rem 0.4rem 1.2rem;background:var(--navy-strong);color:#fff;font-size:1.3rem;font-weight:700;clip-path:polygon(0 0,100% 0,calc(100% - 1rem) 100%,0 100%)}
.archive-head__chip .ico{color:var(--yellow)}
.archive-head h1{position:relative;margin:0 0 0.6rem;padding-bottom:1.2rem;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:8rem;height:0.6rem;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 1.6rem;color:var(--muted)}
.pagination{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:2.8rem}
.pagination a,.pagination span{display:inline-grid;place-items:center;min-width:4.4rem;height:4.4rem;padding:0 1.2rem;border:0.1rem solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:1.4rem}
.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 -0.3rem 0 var(--yellow)}

/* ===== フッター上のトレーナー枠（写真＋CTA） ===== */
.promo{padding:5.6rem var(--gutter) 2.4rem}
.promo__in{position:relative;max-width:var(--w-page);margin:0 auto;display:grid;gap:0;overflow:hidden;background:var(--surface);border:0.1rem 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% - 2.8rem),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 1rem,transparent 1rem 3.2rem),linear-gradient(-62deg,transparent 0 40%,rgba(217,164,65,.5) 40% 43%,transparent 43%),linear-gradient(135deg,var(--navy-strong),var(--steel))}
.promo__body{padding:2.2rem 2.2rem 2.6rem}
.promo__eyebrow{margin:0 0 0.4rem;font-size:1.2rem;font-weight:900;font-style:italic;letter-spacing:.22em;color:var(--steel)}
.promo__title{position:relative;margin:0 0 1rem;padding-left:2.2rem;font-size:clamp(2rem,1.2vw + 1.5rem,2.6rem);font-weight:900;line-height:1.4;color:var(--text-strong)}
.promo__title::before{content:"";position:absolute;left:0.3rem;top:.22em;width:0.8rem;height:1.05em;background:linear-gradient(var(--navy) 0 60%,var(--yellow) 60%);transform:skewX(var(--slant))}
.promo__text{margin:0 0 1.6rem;color:var(--text);font-size:1.5rem;line-height:1.85}
.promo__cta{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;list-style:none;margin:0;padding:0 0 0 0.6rem}
.promo__cta .btn-cta{box-shadow:0.4rem 0.4rem 0 var(--navy)}
.promo__cta li:first-child .btn-cta{background:var(--navy);color:#fff;box-shadow:0.4rem 0.4rem 0 var(--yellow)}
.promo__cta li:first-child .btn-cta:hover{background:var(--navy-2)}
@media (min-width:751px){
  .promo__in{grid-template-columns:minmax(0,30rem) 1fr;align-items:center}
  .promo__media{aspect-ratio:3/4;height:100%;max-height:40rem;clip-path:polygon(0 0,100% 0,calc(100% - 4.8rem) 100%,0 100%)}
  .promo__body{padding:2.8rem 3.6rem 3rem 2rem}
}
@media (min-width:751px){.single .promo__in,.page .promo__in{max-width:110.8rem}}

/* ===== footer（上に斜めの帯＋オレンジのライン、濃紺） ===== */
.footer-slant{display:block;width:100%;height:clamp(3.2rem,4.6vw,7rem);margin:2.4rem 0 -0.1rem;color:var(--navy-strong)}
.site-footer{margin-top:0;background:var(--navy-strong);color:var(--on-navy-muted);padding:3.2rem var(--gutter) 2.8rem;font-size:1.3rem;content-visibility:auto;contain-intrinsic-size:auto 42rem}
@media (max-width:750px){.site-footer{contain-intrinsic-size:auto 90rem}.site-footer li a{min-height:4.4rem}}
.site-footer__in{max-width:var(--w-page);margin:0 auto}
.site-footer__cols{display:grid;gap:2.8rem;margin-bottom:2.8rem}
@media (min-width:751px){.site-footer__cols{grid-template-columns:1.2fr 1.4fr .8fr;gap:4.8rem}}
.site-footer__name{margin:0 0 0.4rem;font-size:1.9rem;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 1.6rem;line-height:1.7}
.site-footer__title{display:flex;align-items:center;gap:0.8rem;margin:0 0 0.8rem;font-size:1.2rem;font-weight:800;letter-spacing:.1em;color:var(--yellow)}
.site-footer__title::before{content:"";width:1.2rem;height:0.4rem;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:2rem}
.site-footer li{margin:0 0 0.4rem;break-inside:avoid}
.site-footer li a{display:inline-flex;align-items:center;gap:0.8rem;min-height:3.2rem;color:#fff;transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.site-footer li a:hover{color:var(--yellow);transform:translateX(0.2rem)}
.site-footer__notes{padding-top:2rem;border-top:0.1rem solid rgba(255,255,255,.18)}
.site-footer__notes p{margin:0 0 0.6rem;max-width:78rem;line-height:1.75}

@media (forced-colors:active){.search-form:focus-within{outline:0.2rem 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:0.1rem 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 0.6rem;font-size:1.2rem;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:750px){
  .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:0.8rem}
  .tbl-wrap .tbl::-webkit-scrollbar-thumb{background:var(--navy);border-radius:0.4rem}
  .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 2rem}
.eyecatch::after{content:"";position:absolute;right:0;bottom:0;width:4rem;height:4rem;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:0.1rem solid var(--line)}
.post-bottom-image{margin:2.4em 0 0}
.ref-list .has-thumb a{display:flex;align-items:center;gap:1.4rem}
.ref-list__thumb{flex:0 0 9.6rem;width:9.6rem}
.ref-list__img{display:block;width:9.6rem;height:6.4rem;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2);border:0.1rem solid var(--line)}
.ref-list__text{flex:1;min-width:0;display:block}
@media (max-width:480px){.ref-list__thumb{flex-basis:7.2rem;width:7.2rem}.ref-list__img{width:7.2rem;height:5.6rem}}

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

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

/* sale banner (restored from old theme) */
.sale-banner{display:block;margin:0 0 1.6rem}
.sale-banner img{display:block;width:100%;height:auto;margin:0 auto}
.sale-banner--end{margin:2rem 0}
.band + .wrap .sale-banner,.wrap--full>.sale-banner{margin:2.4rem 0}
.sale-banner.sale-banner--top,.band + .wrap .sale-banner.sale-banner--top,.wrap--full>.sale-banner.sale-banner--top{display:block;max-width:76rem;margin:2.4rem auto 5.6rem}

.company-info{margin:2.8rem 0;padding:2rem;border:0.1rem 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:751px){.main .cat-grid--compact{grid-template-columns:repeat(auto-fill,minmax(20rem,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(2.8rem + 10rem)}
@media (max-width:750px){.site-footer{padding-bottom:calc(2.8rem + 8rem)}}
/* 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)}

/* ===== [guide 2026-10-07] 初心者ガイド（/guide/）と導線 ===== */
.hero__guide{margin:0 0 2.2rem}
.guide-cta{display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:5.2rem;max-width:100%;padding:1.2rem 2.6rem;border-radius:99.9rem;background:var(--yellow);color:#0a1a2f;font-size:1.65rem;font-weight:700;line-height:1.45;text-align:left;box-shadow:0 0.6rem 1.8rem rgba(10,37,64,.18);border:0.2rem solid var(--yellow-strong)}
.guide-cta:hover{background:var(--yellow-strong);color:#0a1a2f;text-decoration:none}
.guide-cta:focus-visible{outline:0.3rem solid var(--accent-strong);outline-offset:0.3rem}
.guide-cta .ico{flex:none}
@media (max-width:750px){.guide-cta{font-size:1.55rem;padding:1.2rem 1.8rem;width:100%}}
.gnav a.gnav__guide{color:var(--accent-strong);border:0.1rem solid var(--accent);border-radius:99.9rem;margin-right:0.4rem;font-weight:700}
.gnav a.gnav__guide:hover,.gnav a.gnav__guide[aria-current]{background:var(--accent-soft)}
.drawer__guide{display:flex;align-items:center;gap:1.2rem;min-height:5.6rem;margin:1.2rem 1.2rem 0.4rem;padding:1rem 1.4rem;border-radius:var(--radius-md);background:var(--accent-soft);border:0.1rem solid var(--accent);color:var(--accent-strong);font-weight:700}
.drawer__guide span{display:flex;flex-direction:column;line-height:1.4}
.drawer__guide small{font-weight:500;font-size:1.25rem;color:var(--text)}
.drawer__guide:hover{text-decoration:none}
.guide .guide-fig{margin:1.6em 0 2em;padding:0}
.guide .guide-fig img{display:block;width:100%;height:auto;border-radius:var(--radius-md);border:0.1rem solid var(--line)}
.guide .guide-fig figcaption{margin-top:.6em;color:var(--muted);font-size:.9em;line-height:1.6;text-align:center}
.guide .guide-summary{margin:1.6em 0 2.2em;padding:1em 1.2em .4em;border:0.1rem solid var(--accent);border-left-width:0.4rem;border-radius:var(--radius-md);background:var(--accent-softer)}
.guide .guide-summary__title{margin:0 0 .4em;color:var(--accent-strong);font-weight:700}
.guide .guide-summary ul{margin-bottom:.8em}
.guide ul.guide-check{list-style:none;padding-left:0}
.guide ul.guide-check li{position:relative;padding:.55em .8em .55em 2.6em;margin:0 0 .5em;border:0.1rem solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.guide .guide-check__box{position:absolute;left:.8em;top:.8em;width:1.1em;height:1.1em;border:0.2rem solid var(--accent);border-radius:0.4rem}
.guide p.qa{padding:.8em 1em;border-radius:var(--radius-md);background:var(--surface);border:0.1rem solid var(--line)}
.guide ul.guide-sources{font-size:.9em;word-break:break-all}
.guide ul.guide-sources a{word-break:break-all}
.guide .tbl-wrap{margin:0 0 1.8em}
.guide details{margin:0 0 1.6em;border:0.1rem solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:0 1em}
.guide details>summary{cursor:pointer;min-height:4.4rem;display:flex;align-items:center;font-weight:700;color:var(--accent-strong)}
.guide details[open]>summary{border-bottom:0.1rem solid var(--line);margin-bottom:1em}
.guide pre{white-space:pre-wrap;word-break:break-word}
.page .entry__body img{max-width:100%;height:auto}
/* グロナビの初心者ガイドボタン: ヘッダー背景に対して読める塗りボタンにする（2026-10-08） */
.gnav a.gnav__guide{background:#d9a441;color:#142a1f;border:.1rem solid #d9a441;border-radius:99.9rem;margin-right:.4rem;font-weight:700}
.gnav a.gnav__guide:hover,.gnav a.gnav__guide[aria-current]{background:#ff8a4a;border-color:#ff8a4a;color:#142a1f}

/* ===== マイプロテイン アフィリエイト枠（トップのファーストビュー。左: 白地にロゴ／右: ロゴカラー #003942 の地に白文字） ===== */
.mp-promo{position:relative;display:flex;align-items:stretch;max-width:60rem;margin:0 0 2rem;padding:0;overflow:hidden;background:#fff;color:#003942;border-radius:1rem;text-decoration:none;box-shadow:0 .4rem 1.6rem rgba(0,0,0,.28);transition:transform .15s ease,box-shadow .15s ease}
.mp-promo:hover{transform:translateY(-.2rem);box-shadow:0 .8rem 2rem rgba(0,0,0,.34)}
.mp-promo__logo{flex:0 0 auto;align-self:center;display:block;width:14rem;height:auto;margin:0 1.8rem;color:#003942}
.mp-promo__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:1.4rem 3.8rem 1.4rem 2rem;background:#003942;color:#fff}
.mp-promo__sale{display:block;font-size:1.6rem;font-weight:800;line-height:1.45;color:#fff}
.mp-promo__code{display:block;margin-top:.5rem;font-size:1.25rem;font-weight:700;line-height:1.6;color:#fff}
.mp-promo__code b{display:inline-block;margin-left:.4rem;padding:0 .8rem;border:.1rem dashed #fff;border-radius:.4rem;font-size:1.4rem;font-weight:800;letter-spacing:.06em;color:#fff}
.mp-promo__pr{position:absolute;top:.6rem;right:.8rem;padding:0 .5rem;border:.1rem solid rgba(255,255,255,.7);border-radius:.3rem;font-size:1rem;font-weight:700;line-height:1.5;color:#fff;opacity:.85}
@media (max-width:750px){.mp-promo{flex-direction:column;max-width:none;margin:0 0 1.8rem}.mp-promo__logo{align-self:flex-start;width:12rem;margin:1.2rem 1.4rem}.mp-promo__body{padding:1.2rem 1.4rem 1.4rem}.mp-promo__sale{font-size:1.5rem}.mp-promo__code{font-size:1.2rem}.mp-promo__pr{top:auto;bottom:.8rem}}

.mp-promo__sale span,.mp-promo__code span{display:inline-block}
/* 大きいバナー（カテゴリ・記事・トップ中段。コンテンツ幅いっぱい。差し替え前の画像バナーと同じくらいの大きさ） */
.sale-banner .mp-promo--lg{max-width:none;width:100%;margin:0;min-height:14rem;border-radius:1.2rem}
.mp-promo--lg .mp-promo__logo{width:18rem;margin:0 2.4rem}
.mp-promo--lg .mp-promo__body{padding:2rem 4.8rem 2rem 2.6rem}
.mp-promo--lg .mp-promo__sale{font-size:2.2rem;line-height:1.45}
.mp-promo--lg .mp-promo__code{margin-top:.9rem;font-size:1.4rem}
.mp-promo--lg .mp-promo__code b{margin-left:.2rem;font-size:1.7rem;padding:.1rem 1.2rem}
.mp-promo--lg .mp-promo__pr{top:1rem;right:1.2rem;font-size:1.2rem}
@media (max-width:750px){.sale-banner .mp-promo--lg{min-height:0}.mp-promo--lg .mp-promo__logo{width:15rem;margin:1.6rem 1.8rem}.mp-promo--lg .mp-promo__body{padding:1.6rem 1.8rem 2rem}.mp-promo--lg .mp-promo__sale{font-size:2rem}.mp-promo--lg .mp-promo__code{font-size:1.35rem}.mp-promo--lg .mp-promo__code b{font-size:1.6rem}.mp-promo--lg .mp-promo__pr{top:1.2rem;bottom:auto;color:#003942;border-color:rgba(0,57,66,.55)}}

/* ===== SP（〜750px）のヒーロー: 写真の上にバッジ・見出し・リードを重ね、斜めの区切りの下にバナー・検索を置く（ユーザー指定 2026-10-09） ===== */
@media (max-width:750px){
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
.hero__body,.hero__text{display:contents}
.hero__body::before,.hero__body::after{display:none}
.hero .hero__media{grid-column:1;grid-row:1/4;aspect-ratio:auto;width:100%;height:auto;min-height:78vw;max-height:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 6rem),0 100%)}
.hero .hero__media::before{content:"";position:absolute;inset:0;z-index:2;background:var(--yellow);clip-path:polygon(0 calc(100% - .6rem),100% calc(100% - 6.6rem),100% calc(100% - 6rem),0 100%);pointer-events:none}
.hero.has-photo .hero__media::after{content:"";position:absolute;inset:0;top:0;height:auto;background:linear-gradient(90deg,rgba(20,42,31,.9) 0,rgba(20,42,31,.72) 48%,rgba(20,42,31,.15) 82%,rgba(20,42,31,0) 100%)}
.hero.has-photo .hero__img{object-position:70% 40%}
.hero .hero__badge{grid-column:1;grid-row:1;justify-self:start;align-self:start;position:relative;z-index:1;margin:1.8rem var(--gutter) .9rem;padding:.2rem 1.1rem;font-size:1rem;letter-spacing:.02em}
.hero h1{grid-column:1;grid-row:2;position:relative;z-index:1;margin:0 var(--gutter) 1rem}
.hero .hero__eyebrow{font-size:clamp(1.2rem,3.2vw,1.5rem);margin-bottom:.4rem}
.hero .hero__catch{font-size:clamp(2.6rem,7.6vw,3.6rem);line-height:1.22}
.hero h1 br,.hero__catch br{display:inline}
.hero .hero__lead{grid-column:1;grid-row:3;align-self:start;position:relative;z-index:1;max-width:min(64%,36rem);margin:0 var(--gutter) 6.4rem;font-size:clamp(1.15rem,2.9vw,1.4rem);line-height:1.65}
.hero .mp-promo{margin:0 var(--gutter) 2rem;max-width:none}
.hero .hero__guide{margin:0 var(--gutter) 1.8rem}
.hero .search-form{margin:0 var(--gutter);max-width:none}
.hero .hero__cta{margin:1.8rem var(--gutter) 0}
.hero .hero__chips{margin:1.8rem var(--gutter) 9.6rem}
}

/* ===== 図解（figure.zukai）共通 v2：テーマの色の設定（--accent など）を読んで配色を合わせる ===== */
figure.zukai{
  --zk-bg:var(--surface,#fff);--zk-text:var(--text,#222);--zk-strong:var(--text-strong,var(--text,#111));--zk-muted:var(--muted,#666);
  --zk-line:var(--line,#e3e3e3);--zk-line2:var(--line-strong,#c8c8c8);--zk-accent:var(--accent,#1f56c9);--zk-accent2:var(--accent-2,var(--accent,#0e7490));
  --zk-soft:var(--accent-soft,color-mix(in srgb,var(--zk-accent) 10%,var(--zk-bg)));--zk-info:var(--info,var(--zk-accent));--zk-ok:var(--ok,#0b6b3a);--zk-warn:var(--warn,#9a4505);
  margin:1.6em 0 2.2em;padding:1.6rem;background:var(--zk-bg);border:1px solid var(--zk-line);border-radius:12px;color:var(--zk-text)}
figure.zukai svg{display:block;width:100%;height:auto;font-family:inherit;overflow:visible}
figure.zukai p{margin:0}
figure.zukai figcaption{margin-top:1rem;font-size:.86em;line-height:1.75;color:var(--zk-muted)}
.zukai__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.zukai__hint{display:none}
@media (max-width:640px){
  figure.zukai{padding:12px}
  .zukai__grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}
  figure.zukai .zukai__hint{display:block;margin:0 0 6px;font-size:.75em;color:var(--zk-muted);text-align:center}
  .zukai__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  figure.zukai .zukai__scroll svg{min-width:560px}
}
.zukai text{fill:var(--zk-text);paint-order:stroke;stroke:var(--zk-bg);stroke-width:4px;stroke-linejoin:round}
.zukai .z-s{font-size:13px}.zukai .z-xs{font-size:12px}.zukai .z-m{font-size:15px;font-weight:700}
.zukai .z-sb{font-size:14px;font-weight:700;fill:var(--zk-strong)}.zukai .z-t{font-size:15px;font-weight:700;fill:var(--zk-strong)}
.zukai .z-l{font-size:17px;font-weight:700;fill:var(--zk-strong)}
.zukai .z-xsw{font-size:12px;font-weight:700;fill:var(--zk-bg);stroke:none}
.zukai .z-blue{fill:var(--zk-info);font-weight:700}.zukai .z-blue2{fill:var(--zk-accent2);font-weight:700}
.zukai .z-tok{fill:var(--zk-ok);font-weight:700}.zukai .z-tng{fill:var(--zk-warn);font-weight:700}
/* 面 */
.zukai .z-plain{fill:var(--zk-bg)}
.zukai .z-band{fill:color-mix(in srgb,var(--zk-info) 10%,var(--zk-bg))}
.zukai .z-ground{fill:color-mix(in srgb,var(--zk-ok) 12%,var(--zk-bg))}
.zukai .z-road{fill:color-mix(in srgb,var(--zk-muted) 22%,var(--zk-bg))}
.zukai .z-lot{fill:color-mix(in srgb,var(--zk-accent2) 7%,var(--zk-bg));stroke:var(--zk-accent);stroke-width:2}
.zukai .z-lot2{fill:color-mix(in srgb,var(--zk-muted) 9%,var(--zk-bg));stroke:var(--zk-line2);stroke-width:1.5}
.zukai .z-foot{fill:var(--zk-soft);stroke:var(--zk-accent);stroke-width:2.2}
.zukai .z-foot2{fill:none;stroke:var(--zk-accent);stroke-width:2;stroke-dasharray:6 4}
.zukai .z-free{fill:color-mix(in srgb,var(--zk-ok) 8%,var(--zk-bg));stroke:var(--zk-ok);stroke-width:2;stroke-dasharray:5 4}
.zukai .z-over{fill:color-mix(in srgb,var(--zk-warn) 35%,var(--zk-bg));stroke:var(--zk-warn);stroke-width:1.5}
.zukai .z-ghost{fill:none;stroke:var(--zk-muted);stroke-width:1.5;stroke-dasharray:6 5}
.zukai .z-wall{fill:var(--zk-bg);stroke:var(--zk-accent);stroke-width:2.2}
.zukai .z-step{fill:var(--zk-bg);stroke:var(--zk-accent);stroke-width:1.8}
.zukai .z-step2{fill:var(--zk-soft);stroke:var(--zk-accent2);stroke-width:2.2}
.zukai .z-bar{fill:color-mix(in srgb,var(--zk-muted) 30%,var(--zk-bg))}
.zukai .z-bar2{fill:var(--zk-accent)}
.zukai .z-bar3{fill:var(--zk-accent2)}
.zukai .z-g1{fill:color-mix(in srgb,var(--zk-accent) 25%,var(--zk-bg))}.zukai .z-g2{fill:color-mix(in srgb,var(--zk-warn) 30%,var(--zk-bg))}
.zukai .z-g3{fill:color-mix(in srgb,var(--zk-info) 35%,var(--zk-bg))}.zukai .z-g4{fill:color-mix(in srgb,var(--zk-ok) 45%,var(--zk-bg))}
.zukai .z-g5{fill:color-mix(in srgb,var(--zk-muted) 25%,var(--zk-bg))}.zukai .z-g6{fill:color-mix(in srgb,var(--zk-accent2) 45%,var(--zk-bg))}
.zukai .z-car,.zukai .z-person{fill:var(--zk-accent2)}
.zukai .z-dot{fill:var(--zk-info)}.zukai .z-dot2{fill:var(--zk-accent2)}
/* 線 */
.zukai .z-limit{fill:none;stroke:var(--zk-info);stroke-width:3;stroke-linejoin:round}
.zukai .z-limit2{fill:none;stroke:var(--zk-accent2);stroke-width:3;stroke-dasharray:9 6}
.zukai .z-dim,.zukai .z-lead{fill:none;stroke:var(--zk-muted);stroke-width:1.2}
.zukai .z-bound{stroke:var(--zk-text);stroke-width:2}
.zukai .z-floor{stroke:var(--zk-line2);stroke-width:1.5;stroke-dasharray:4 4}
.zukai .z-center{stroke:var(--zk-text);stroke-width:1.5;stroke-dasharray:12 4 2 4}
.zukai .z-grid{stroke:var(--zk-line);stroke-width:1}
.zukai .z-axis{stroke:var(--zk-muted);stroke-width:1.5}
.zukai .z-flowline{fill:none;stroke:var(--zk-accent);stroke-width:2}
.zukai .z-flowhead{fill:var(--zk-accent)}
.zukai .z-arrow{fill:none;stroke:var(--zk-warn);stroke-width:2;stroke-dasharray:5 4}
.zukai .z-arrow2{fill:none;stroke:var(--zk-info);stroke-width:2.5;stroke-dasharray:7 5}
.zukai .z-line0{fill:none;stroke:var(--zk-muted);stroke-width:2;stroke-dasharray:6 5}
.zukai .z-line1{fill:none;stroke:var(--zk-info);stroke-width:3}
.zukai .z-line2{fill:none;stroke:var(--zk-warn);stroke-width:3}
.zukai .z-line3{fill:none;stroke:var(--zk-ok);stroke-width:2.5}
.zukai .z-up{fill:var(--zk-ok);stroke:var(--zk-ok)}.zukai .z-down{fill:var(--zk-warn);stroke:var(--zk-warn)}
.zukai .z-wick{stroke:var(--zk-text);stroke-width:1.5}
/* 歯・体の図用（実物に近い色） */
.zukai .z-tooth{fill:#fbfaf3;stroke:#8a8270;stroke-width:1.5}
.zukai .z-dentin{fill:#efe0b8;stroke:none}
.zukai .z-pulp{fill:#dd7373;stroke:none}
.zukai .z-decay{fill:#5a3a1c;stroke:none}
.zukai .z-gum{fill:#eaa3a8;stroke:#c97a80;stroke-width:1.2}
.zukai .z-bone{fill:#ddcca2;stroke:#b9a576;stroke-width:1.2}
.zukai .z-metal{fill:#b9bec6;stroke:#7c838e;stroke-width:1.5}
.zukai .z-skin{fill:#f2c9a5;stroke:#c99a74;stroke-width:1.5}
/* ===== /図解 ===== */
/* 店舗一覧（fitdb）へのリンク：サイドバー。見た目は .drawer__guide を流用 */
.sidebar .side-db{margin:0 0 2rem;font-size:1.4rem}
.sidebar .side-db small{font-size:1.2rem}


/* グロナビ・ドロワーの「店舗一覧」（fitdb）リンク（2026-10-26） */
.gnav a{white-space:nowrap}
.drawer__guide.drawer__store{margin-top:0;background:var(--surface)}
/* グロナビに「店舗一覧」を足した分、ヘッダーの検索窓を縮める（2026-10-26） */
.search-form--header{max-width:30rem}
/* グロナビの「店舗一覧」にアイコン、フッターの「店舗一覧」はボタン（2026-10-26） */
.gnav a.gnav__store{display:inline-flex;align-items:center;gap:.5rem}
.site-footer li a.site-footer__store{margin-top:.8rem;padding:.8rem 1.8rem;border-radius:99.9rem;background:#d9a441;color:#142a1f;font-weight:700;gap:.6rem}
.site-footer li a.site-footer__store:hover{background:#ff8a4a;color:#142a1f;text-decoration:none;transform:none}

/* ===== fabio（2026-10-27）: イタリアンの配色・写真 =====
   深緑（バジル）＋クリーム＋トマトの赤＋セモリナの金。見出しは明朝体。ヒーローは記事のアイキャッチを並べる */
:root{--font-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;--tomato:#c8412c;--basil:#2f6b45}
.site-title__name,.hero h1,.sec-title,.entry__title,.archive-head h1,.promo__title,.entry__body h2{font-family:var(--font-serif);font-weight:700;letter-spacing:.02em}
.hero__speed{display:none}
.site-header{background:linear-gradient(90deg,var(--basil) 0 33.3%,#f6f0e6 33.3% 66.6%,var(--tomato) 66.6%) bottom/100% 0.3rem no-repeat,var(--navy-strong)}
.hero__cut path:last-child,.footer-slant path:last-child{fill:var(--tomato)}
.hero__eyebrow{letter-spacing:.24em}
.hero.has-mosaic .hero__media{background:var(--navy-strong)}
.hero__mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:0.4rem}
.hero__tile{position:relative;overflow:hidden;background:var(--navy-2)}
.hero__tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
@media (min-width:1025px){
  .hero.has-mosaic .hero__mosaic{left:42%;grid-template-columns:repeat(2,1fr)}
  .hero.has-mosaic .hero__media::after{background:linear-gradient(100deg,rgba(20,42,31,1) 0,rgba(20,42,31,1) 42%,rgba(20,42,31,.55) 52%,rgba(20,42,31,0) 66%)}
}
.pr-note{display:inline-block;margin:0 0 1.2rem;padding:.2rem 1rem;border:0.1rem solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--muted);font-size:1.3rem;line-height:1.7}
.scene__label{font-family:var(--font-serif)}
.cat-ico{color:var(--yellow)}
.entry__body h2{border-left-color:var(--tomato)}