/*
Theme Name: IjakuYaro
Theme URI: https://ijakuyaro.com
Author: RIGADEL Inc.
Description: 胃弱野郎公式テーマ。店舗(3Dスキャン・胃弱スコア)+記事のグルメポータル。
Version: 1.0
Requires PHP: 7.4
Text Domain: ijakuyaro
*/

:root{
  --red:#C7362F; --red-dark:#9E2A24; --brown:#221C16; --brown-2:#4A3E33;
  --orange:#B8912E; --yellow:#D9B44A; --cream:#F6F0E3; --cream-2:#FBF7EC;
  --line:#D9CDB4; --muted:#8A7B65; --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Zen Kaku Gothic New',"Hiragino Sans","Yu Gothic",sans-serif;color:var(--brown);background:var(--cream);line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

header{background:var(--cream);border-bottom:2px solid var(--brown);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:26px;font-weight:800;color:var(--red);letter-spacing:1px;line-height:1.1}
.logo small{display:block;font-size:10px;font-weight:700;color:var(--brown);letter-spacing:4px}
.nav-right{display:flex;align-items:center;gap:8px}
.gnav a{font-size:14px;font-weight:700;margin-left:22px;color:var(--brown)}
.gnav a:hover,.gnav a.on{color:var(--red)}
.header-search{position:relative}
.search-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid var(--line);border-radius:10px;background:var(--white);color:var(--brown);cursor:pointer;flex:none}
.search-toggle:hover,.search-toggle.is-open{color:var(--red);border-color:var(--red)}
.search-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 40px));background:var(--white);border:2px solid var(--brown);border-radius:14px;padding:12px;box-shadow:0 10px 28px rgba(80,35,20,.18);z-index:30}
.search-panel-form{display:flex;gap:8px}
.search-panel-form input[type="search"]{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:14px;color:var(--brown);background:var(--cream-2)}
.search-panel-form .btn{height:44px;line-height:44px;padding:0 18px;flex:none}

.hero{background:var(--brown);color:var(--cream);padding:56px 0 48px}
.hero h1{font-size:clamp(26px,4.2vw,40px);font-weight:800;line-height:1.4;color:var(--cream)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{margin-top:14px;max-width:600px;font-size:14px;color:#E8D9C8}
.searchbar{margin-top:26px;background:var(--white);border-radius:14px;padding:12px;display:flex;flex-wrap:wrap;gap:10px}
.searchbar select,.searchbar input{flex:1;min-width:160px;height:48px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:14px;color:var(--brown);background:var(--cream-2)}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:14px;border:none;border-radius:10px;padding:0 30px;height:48px;line-height:48px;cursor:pointer;text-align:center}
.btn:hover{background:var(--red-dark)}
.btn-sub{background:var(--orange)}
.btn-sub:hover{background:#E5721E}

section{padding:48px 0}
h2{font-size:22px;font-weight:800;color:var(--brown)}
h2 small{display:block;font-size:11px;color:var(--red);letter-spacing:3px;font-weight:800;margin-bottom:4px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.more{font-size:13px;font-weight:800;color:var(--red)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{background:var(--white);border:2px solid var(--brown);border-radius:14px;padding:18px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.tile:hover{background:var(--cream-2)}
.tile span{color:var(--red)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:block}
.card:hover{box-shadow:0 8px 22px rgba(80,35,20,.15)}
.thumb{aspect-ratio:16/9;background:var(--cream-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;position:relative}
.badge3d{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:3px 9px}
.rank{position:absolute;top:10px;right:10px;background:var(--yellow);color:var(--brown);font-size:12px;font-weight:800;border-radius:999px;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.card-body{padding:14px 16px 16px}
.card h3{font-size:15px;font-weight:800;color:var(--brown)}
.meta{font-size:12px;color:var(--muted);margin:2px 0 8px}
.scoreline{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.scoreline .num{font-size:22px;font-weight:800;color:var(--red)}
.scoreline .lbl{font-size:10px;color:var(--muted);line-height:1.3}
.axes{display:flex;flex-wrap:wrap;gap:5px}
.ax{font-size:11px;background:var(--cream);border-radius:6px;padding:2px 8px;color:var(--brown-2)}
.ax b{color:var(--red)}

.crumbs{font-size:12px;color:var(--muted);padding:16px 0}
.crumbs a{color:var(--red);font-weight:700}

.search-group{margin-top:32px}
.search-group h3{font-size:16px;font-weight:800;color:var(--red);letter-spacing:1px}

.listing{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;padding:10px 0 56px}
.filters{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px;position:sticky;top:80px}
.filters h4{font-size:13px;font-weight:800;color:var(--red);margin:14px 0 8px;letter-spacing:1px}
.filters h4:first-child{margin-top:0}
.filters label{display:block;font-size:13px;margin-bottom:6px;color:var(--brown-2)}
.sortbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px}
.sortbar select{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--white);color:var(--brown)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:28px}
.pager a{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--white)}
.pager a.on{background:var(--red);color:#fff;border-color:var(--red)}

.store-head{background:var(--white);border-bottom:1px solid var(--line);padding:26px 0}
.store-head .inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end}
.store-head h1{font-size:26px;font-weight:800;color:var(--brown)}
.store-head .cat{font-size:13px;color:var(--muted);margin-top:4px}
.bigscore{background:var(--brown);color:var(--cream);border-radius:14px;padding:12px 22px;text-align:center}
.bigscore b{display:block;font-size:30px;color:var(--yellow);line-height:1.2}
.bigscore span{font-size:11px}
.detail{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;padding:34px 0;align-items:start}
model-viewer{width:100%;height:380px;background:var(--white);border-radius:16px;border:1px solid var(--line)}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.photos div{height:70px;background:var(--cream-2);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.panel h3{font-size:15px;font-weight:800;color:var(--red);margin-bottom:14px;letter-spacing:1px}
.bar-row{display:grid;grid-template-columns:86px 1fr 30px;gap:10px;align-items:center;margin-bottom:10px;font-size:13px}
.bar{height:12px;background:var(--cream);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:999px}
.bar i.hi{background:#3E8E5A}
.bar i.lo{background:var(--red)}
.bar-row b{text-align:right;color:var(--brown)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--cream);border-radius:10px;padding:10px 16px;text-align:center}
.chip b{display:block;font-size:18px;color:var(--brown)}
.chip span{font-size:11px;color:var(--muted)}
.memo{font-size:14px;color:var(--brown-2);background:var(--cream-2);border-left:4px solid var(--yellow);padding:12px 14px}
.info-table{width:100%;border-collapse:collapse;font-size:13px}
.info-table th{width:110px;text-align:left;color:var(--muted);font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.info-table td{padding:9px 8px;border-bottom:1px solid var(--line)}
/* 実測データ表ブロック(本文内に置いても本文h3のスタイルに負けないよう指定) */
.measure-panel{margin:28px 0}
.entry-body .measure-panel h3,.measure-panel h3{display:block;font-family:inherit;font-size:15px;font-weight:800;color:var(--red);letter-spacing:1px;margin:0 0 14px;padding:0;border:0}
.entry-body .measure-panel h3::before{content:none}
.measure-panel .table-scroll{overflow-x:auto}
.measure-panel .info-table{min-width:420px}
.measure-panel .info-table thead th{width:auto;white-space:nowrap;color:var(--brown);background:var(--cream-2)}
.entry-body .measure-panel .note,.measure-panel .note{margin:10px 0 0}
/* 編集画面だけに出る入力欄(| 区切りの元データ)。フロントには出ない */
.ijk-measure-input{margin-bottom:12px}
.ijk-measure-input textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:var(--brown-2);background:var(--cream-2);border:1px dashed var(--line);border-radius:8px;padding:10px 12px}
.yt{height:220px;background:var(--brown);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--cream);font-size:13px}

footer{background:var(--brown);color:var(--cream);padding:34px 0;margin-top:20px}
footer p{font-size:12px;color:#D9C6B2}
.disclaimer{background:rgba(255,255,255,.08);border-radius:10px;padding:12px 16px;margin-bottom:14px}

@media(max-width:860px){
  .listing{grid-template-columns:1fr}
  .filters{position:static}
  .detail{grid-template-columns:1fr}
  .gnav{display:none}
  .search-panel{right:-8px}
}

/* WP additions */
.entry{max-width:760px;padding-top:20px;padding-bottom:56px}
.entry h1{font-size:28px;font-weight:800;color:var(--brown);line-height:1.4}
.entry .meta{font-size:13px;color:var(--muted);margin:6px 0 10px}
.entry-body{font-size:15px}
.entry-body p{margin:0 0 1.2em}
.entry-body img{max-width:100%;height:auto;border-radius:12px}
.entry-body a{color:var(--red);font-weight:700}
.pager .nav-links{display:flex;gap:8px}
.pager .page-numbers{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--white)}
.pager .page-numbers.current{background:var(--red);color:#fff;border-color:var(--red)}
.filters label a{color:var(--brown-2)}
.filters label a:hover{color:var(--red)}
.thumb img{width:100%;height:100%;object-fit:cover}


/* 実食レビューパネル */
.rev-row{display:flex;gap:12px;align-items:flex-start;background:var(--cream-2);border-radius:12px;padding:12px;margin-bottom:10px}
.rev-badge{flex:0 0 auto;width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.rev-body{flex:1}
.rev-type{display:block;font-size:11px;color:var(--muted)}
.rev-stars{font-size:19px;color:var(--red);letter-spacing:2px}
.rev-comment{font-size:13px;color:var(--brown-2);margin-top:4px}


/* 和風タイポグラフィ(歌舞伎・千社札コンセプト) */
.logo,h1,h2,.store-head h1,.hero h1,.card h3{font-family:'Dela Gothic One',"Yu Mincho",serif;font-weight:400;letter-spacing:0.02em}
.logo{letter-spacing:3px}
.logo small{font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:2px;font-size:9px}
.hero h1 em{border-bottom:4px solid var(--red)}

/* 記事本文の見出し(歌舞伎の定式幕=黒・柿色・萌黄をあしらった強め見出し) */
.entry-body h2{position:relative;overflow:hidden;font-size:20px;color:var(--cream);background:var(--brown);padding:14px 22px 14px 32px;margin:2.4em 0 1em;border-radius:6px;box-shadow:5px 5px 0 var(--red);letter-spacing:.03em}
.entry-body h2:first-child{margin-top:0}
.entry-body h2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(180deg,var(--brown) 0 10px,var(--orange) 10px 20px,#3E6B4F 20px 30px)}
.entry-body h3{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:800;color:var(--brown);margin:1.8em 0 .7em;padding-bottom:5px;border-bottom:3px solid var(--orange)}
.entry-body h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
@media(max-width:600px){.entry-body h2{font-size:17px;padding:12px 16px 12px 26px;box-shadow:4px 4px 0 var(--red)}.entry-body h3{font-size:15px}}

/* 対話吹き出し(オモコロ風) */
.serif{display:flex;gap:12px;margin:20px 0;align-items:flex-start}
.serif-r{flex-direction:row-reverse}
.serif-avatar{flex:0 0 auto;text-align:center;width:64px}
.serif-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:2px solid var(--brown);object-fit:cover;font-family:'Dela Gothic One',"Yu Mincho",serif;font-weight:400;font-weight:800;color:#fff;font-size:16px;margin:0 auto;overflow:hidden}
img.serif-icon{display:block;padding:0}
.serif-name{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.serif-bubble{position:relative;background:var(--white);border:2px solid var(--brown);border-radius:14px;padding:12px 16px;font-size:15px;line-height:1.8;max-width:75%}
.serif-bubble::before{content:"";position:absolute;top:22px;left:-9px;width:14px;height:14px;background:var(--white);border-left:2px solid var(--brown);border-bottom:2px solid var(--brown);transform:rotate(45deg)}
.serif-r .serif-bubble{background:var(--cream-2)}
.serif-r .serif-bubble::before{left:auto;right:-9px;background:var(--cream-2);border-left:none;border-bottom:none;border-right:2px solid var(--brown);border-top:2px solid var(--brown)}
.serif-dark .serif-bubble{background:var(--brown);color:var(--cream)}
.serif-dark .serif-bubble::before{background:var(--brown)}
.serif-bubble p:last-child{margin-bottom:0}
@media(max-width:600px){.serif-bubble{max-width:100%;font-size:14px}.serif-avatar{width:48px}.serif-icon{width:44px;height:44px;font-size:12px}}

/* 編集部の吹き出し(キャラのセリフと区別するため角丸アイコン+破線バブル) */
.serif-editor .serif-icon{border-radius:10px}
.serif-editor .serif-bubble{background:var(--cream-2);border-style:dashed}
.serif-editor .serif-bubble::before{background:var(--cream-2)}

/* ---------- 3人ジャッジパネル(2026-07-12) ---------- */
.judge-panel{background:var(--washi,#F6F0E3);border:1px solid #E2D8C3;border-radius:16px;padding:20px;margin:18px 0}
.judge-title{font-family:'Dela Gothic One',"Yu Mincho",serif;font-weight:400;font-size:18px;color:#221C16;margin:0 0 14px;border-left:5px solid #C7362F;padding-left:10px}
.judge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.judge-card{background:#fff;border:1px solid #E2D8C3;border-top:4px solid var(--jc,#B8912E);border-radius:12px;padding:14px;display:flex;flex-direction:column}
.judge-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.judge-icon{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;border:2px solid var(--jc,#B8912E)}
.judge-name{font-family:'Dela Gothic One',"Yu Mincho",serif;font-weight:400;font-size:17px;color:#221C16;display:block}
.judge-type{font-size:11px;color:#9A7B63}
.judge-stars{font-size:22px;color:#C7362F;letter-spacing:2px;margin:2px 0 6px}
.judge-comment{font-size:13px;line-height:1.7;color:#221C16;margin:0;background:var(--washi,#F6F0E3);border-radius:10px;padding:8px 10px}
.judge-panel .note{margin:12px 0 0}
@media(max-width:720px){.judge-row{grid-template-columns:1fr}}

/* 一覧カードの3人ミニ表示 */
.card-judges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.card-judges .cj{font-size:11px;border:1px solid var(--jc,#B8912E);color:#221C16;border-radius:999px;padding:2px 8px}
.card-judges .cj b{color:var(--jc,#B8912E)}

/* ---------- 対話折りたたみ(2026-07-12) ---------- */
.talk-wrap{position:relative;margin:14px 0}
.talk-collapsed .talk-body{max-height:440px;overflow:hidden}
.talk-fade{display:none}
.talk-collapsed .talk-fade{display:block;position:absolute;left:0;right:0;bottom:44px;height:90px;background:linear-gradient(to bottom,rgba(246,240,227,0),#F6F0E3)}
.talk-more-wrap{text-align:center;margin:8px 0 0}
.talk-more{font-family:'Zen Kaku Gothic New',sans-serif;font-size:14px;font-weight:700;color:#C7362F;background:#fff;border:2px solid #C7362F;border-radius:999px;padding:10px 28px;cursor:pointer}
.talk-more:hover{background:#C7362F;color:#fff}

/* 記事ビルダー(2026-07-12) */
.art-h{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:15px;color:#221C16;border-left:4px solid #B8912E;padding-left:10px;margin:18px 0 10px}
.art-points{padding-left:22px}
.art-points li{margin-bottom:6px}

/* ---------- SNSシェアボタン ---------- */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:28px 0 4px;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:14px;position:relative}
.share-ttl{font-size:13px;font-weight:800;color:var(--brown)}
.share-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
/* 各社マークは公式カラーのまま、白地に置く。ロゴを別の図形で囲ったり色を変えたりしない */
/* ボーダーは使わず、淡い下地でクリック対象と分かるようにする */
.share-btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:none;border-radius:12px;background:var(--cream-2);cursor:pointer;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
/* ホバーで下地がそのブランド色に薄く色づく(ロゴ自体の色は変えない) */
.share-btn:hover{transform:translateY(-2px);background:color-mix(in srgb,currentColor 14%,var(--white));box-shadow:0 5px 14px rgba(80,35,20,.16)}
.share-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* 46pxの下地に対し28px。ロゴ周囲の余白(アイソレーション)は確保したまま最大化 */
.share-btn svg{width:28px;height:28px}
.share-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.share-x{color:#000}
.share-hatena{color:#00A4DE}
.share-line{color:#06C755}
.share-facebook{color:#0866FF}
/* 以下2つは各社のマークではなく自前のUIアイコンなので、サイトのカラーを使う */
.share-copy{background:var(--muted);color:#fff}
.share-more{background:var(--red);color:#fff}
.share-copy:hover{background:var(--brown-2)}
.share-more:hover{background:var(--red-dark)}
/* 線画アイコンは面で描くロゴより細く見えるので少し小さめに揃える */
.share-copy svg,.share-more svg{width:24px;height:24px}
.share-toast{font-size:12px;font-weight:700;color:var(--red);opacity:0;transition:opacity .2s ease}
.share-toast.is-on{opacity:1}
@media(max-width:600px){.share{gap:8px 10px;padding:14px}.share-ttl{width:100%}}

/* ---------- ページトップに戻るボタン ---------- */
.to-top{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border:2px solid var(--brown);border-radius:50%;background:var(--red);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(80,35,20,.24);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background .12s ease}
.to-top.is-visible{opacity:1;transform:translateY(0)}
.to-top:hover{background:var(--red-dark)}
.to-top:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.to-top svg{width:24px;height:24px}
.to-top-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:600px){.to-top{right:14px;bottom:14px;width:46px;height:46px}.to-top svg{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- 関連記事 ---------- */
.related{padding:36px 0 48px;border-top:1px solid var(--line);margin-top:36px}
.card-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.card-cat{font-size:11px;font-weight:800;color:var(--red);background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;line-height:1.6}

/* ---------- 記事本文の画像+キャプション ---------- */
/* ブロックエディタ=figure/figcaption、旧エディタ=.wp-caption/.wp-caption-text の両方に対応 */
.entry-body figure,
.entry-body .wp-caption{margin:2.2em 0;max-width:100%}
.entry-body figure img,
.entry-body .wp-caption img{display:block;margin:0 auto}

/* キャプションが付いているときは画像ごと中央寄せ(画像幅にぴったり収める) */
.entry-body figure:has(figcaption),
.entry-body .wp-caption{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:center}

.entry-body figcaption,
.entry-body .wp-caption-text{margin:.75em auto 0;max-width:36em;font-size:13px;line-height:1.75;letter-spacing:.01em;color:var(--muted);text-align:center}
/* 本文と地続きに見えないよう、キャプションの上に細い区切りを置く */
.entry-body figcaption::before,
.entry-body .wp-caption-text::before{content:"";display:block;width:28px;height:2px;margin:0 auto .6em;background:var(--line)}

/* 見出しが回り込み画像に食い込まないようにする */
.entry-body h2,.entry-body h3{clear:both}

/* WordPress標準の配置クラス */
.entry-body .aligncenter{margin-left:auto;margin-right:auto}
.entry-body .alignleft{float:left;margin:.4em 1.6em 1.4em 0}
.entry-body .alignright{float:right;margin:.4em 0 1.4em 1.6em}
.entry-body .alignleft figcaption,
.entry-body .alignright figcaption{max-width:100%}
.entry-body .alignfull,.entry-body .alignwide{margin-left:auto;margin-right:auto}

@media(max-width:600px){
  .entry-body figure,.entry-body .wp-caption{margin:1.8em auto}
  /* スマホでは回り込みを解除して全幅に */
  .entry-body .alignleft,.entry-body .alignright{float:none;margin:1.8em auto}
  .entry-body figcaption,.entry-body .wp-caption-text{font-size:12px}
}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.card-tag{font-size:11px;font-weight:700;color:var(--muted);line-height:1.6}
.card-tag:hover{color:var(--red)}

/* ---------- YouTube直リンクカード ---------- */
.badge-yt{position:absolute;top:10px;left:10px;z-index:1;background:#FF0000;color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:3px 9px;letter-spacing:.02em}
.card-yt .thumb::after{content:"";position:absolute;inset:0;background:rgba(34,28,22,.18);transition:background .15s ease}
.card-yt:hover .thumb::after{background:rgba(34,28,22,.04)}

/* ---------- カテゴリ絞り込み ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--brown);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 15px;line-height:1.4}
.cat-chip:hover{border-color:var(--red);color:var(--red)}
.cat-chip span{font-size:11px;font-weight:700;color:var(--muted)}
.cat-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.cat-chip.on span{color:rgba(255,255,255,.75)}
@media(max-width:600px){
  /* スマホは横スクロールで一列に収める */
  .cat-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
  .cat-filter::-webkit-scrollbar{display:none}
  .cat-chip{flex:none}
}

/* ---------- 記事の目次 ---------- */
.toc{background:var(--cream-2);border:2px solid var(--brown);border-radius:14px;padding:16px 20px;margin:0 0 2.4em}
.toc-head{font-family:'Dela Gothic One',"Yu Mincho",serif;font-size:15px;color:var(--brown);letter-spacing:.06em;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.toc-head::-webkit-details-marker{display:none}
.toc-head::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.toc-head::after{content:"閉じる";margin-left:auto;font-family:inherit;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:0}
.toc:not([open]) .toc-head::after{content:"開く"}
.toc-list{margin:14px 0 0;padding-left:1.4em;font-size:14px}
.toc-list li{margin:.45em 0;line-height:1.6}
.toc-list a{color:var(--brown);font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
.toc-list a:hover{color:var(--red);border-bottom-color:var(--red)}
.toc-sub{margin:.4em 0 .6em;padding-left:1.3em;font-size:13px;list-style:disc}
.toc-sub a{font-weight:400;color:var(--brown-2)}
/* 追従ヘッダーに見出しが隠れないようにする */
.entry-body h2,.entry-body h3{scroll-margin-top:84px}

/* ---------- シェアボタンのツールチップ ---------- */
.share-btn{position:relative}
/* マウス操作の環境だけ。タッチ端末ではタップ後に出っぱなしになるので出さない */
@media(hover:hover){
  .share-btn::after{
    content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(4px);white-space:nowrap;
    background:var(--brown);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:5px 11px;border-radius:8px;box-shadow:0 4px 12px rgba(80,35,20,.2);
    opacity:0;visibility:hidden;pointer-events:none;z-index:5;
    transition:opacity .14s ease,transform .14s ease,visibility .14s
  }
  .share-btn::before{
    content:"";position:absolute;bottom:calc(100% + 5px);left:50%;
    transform:translateX(-50%) translateY(4px);
    border:5px solid transparent;border-top-color:var(--brown);
    opacity:0;visibility:hidden;pointer-events:none;z-index:5;
    transition:opacity .14s ease,transform .14s ease,visibility .14s
  }
  .share-btn:hover::after,.share-btn:hover::before,
  .share-btn:focus-visible::after,.share-btn:focus-visible::before{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)
  }
  /* 左右端のボタンは吹き出しが枠からはみ出すので寄せる */
  .share-list li:first-child .share-btn::after{left:0;transform:translateX(0) translateY(4px)}
  .share-list li:first-child .share-btn:hover::after,
  .share-list li:first-child .share-btn:focus-visible::after{transform:translateX(0) translateY(0)}
  .share-list li:last-child .share-btn::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
  .share-list li:last-child .share-btn:hover::after,
  .share-list li:last-child .share-btn:focus-visible::after{transform:translateX(0) translateY(0)}
}