/* ==========================================================
   記事詳細ページ
   ========================================================== */

/* 読了プログレス */
.progress{position:fixed;left:0;top:0;height:2px;z-index:110;width:0;
  background:linear-gradient(90deg,#C4A570,#8A6B33);transition:width .1s linear}

/* パンくず */

/* 記事ヘッダー */
.ah{padding:28px 0 0;position:relative}
.ah-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ah h1{
  font-family:var(--mincho);font-weight:600;font-size:clamp(25px,3.1vw,40px);
  line-height:1.55;letter-spacing:.02em;margin:0 0 20px;max-width:24em;
  background:linear-gradient(104deg,#231A0D,#3C2C12 46%,#5E4720 82%,#6B5124);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.ah-lead{font-family:var(--serif-jp);font-size:14.5px;line-height:2.05;color:#5A4B39;margin:0 0 22px;max-width:44em}
.ah-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ah-info .who{display:flex;align-items:center;gap:11px}
.ah-info .who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ah-info .who b{display:block;font-family:var(--serif-jp);font-weight:600;font-size:12.5px;color:var(--ink-strong)}
.ah-info .who span{font-size:10.5px;color:var(--ink-mute)}
.ah-dates{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.ah-dates span{display:flex;align-items:center;gap:5px}
.ah-dates i{font-style:normal;font-size:9.5px;letter-spacing:.08em;color:#B0A48F}
.ah-dates .sep{width:1px;height:11px;background:var(--line);gap:0}
.ah-hero{margin:26px 0 0;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-m);aspect-ratio:16/9}
.ah-hero img{width:100%;height:100%;object-fit:cover}

/* 2カラム */
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding:46px 0 0;align-items:start}
.art-body{min-width:0}
.side{position:sticky;top:86px;display:flex;flex-direction:column;gap:22px}

/* 本文 */
.prose{font-size:14.5px;line-height:2.15;color:#463A2C;letter-spacing:.03em}
.prose > *{margin:0 0 26px}
.prose h2{
  font-family:var(--mincho);font-weight:600;font-size:22px;line-height:1.6;letter-spacing:.03em;
  margin:52px 0 22px;padding:0 0 12px;position:relative;color:var(--ink-strong);
  border-bottom:1px solid var(--line)
}
.prose h2::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:1px;background:var(--gold)}
.prose h3{
  font-family:var(--serif-jp);font-weight:600;font-size:16.5px;line-height:1.7;
  margin:40px 0 16px;padding-left:14px;border-left:3px solid var(--gold-soft);color:var(--ink-strong)
}
.prose strong{font-weight:600;color:var(--ink-strong);
  background:linear-gradient(transparent 62%,rgba(212,186,128,.34) 62%)}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(168,135,76,.4);transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--gold)}
.prose figure{margin:32px 0}
.prose .fig2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0}
.prose .fig2 img{border-radius:8px;width:100%;aspect-ratio:16/9;object-fit:cover}
.prose .fig2 figcaption{grid-column:1/-1;font-size:11px;color:var(--ink-mute);letter-spacing:.03em}
@media(max-width:560px){.prose .fig2{grid-template-columns:1fr}}
.prose figure img{border-radius:8px;width:100%}
.prose figcaption{font-size:11px;color:var(--ink-mute);margin-top:9px;letter-spacing:.03em}
.prose blockquote{
  margin:36px 0;padding:4px 0 4px 26px;border-left:2px solid var(--gold-soft);
  font-family:var(--mincho);font-size:17px;line-height:2.05;letter-spacing:.03em;color:#3A2E1E
}
.prose blockquote cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-size:11px;color:var(--ink-mute);letter-spacing:.05em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:9px}
.prose ul li::marker{color:var(--gold-soft)}

/* 目次 */
.toc{background:linear-gradient(180deg,#FDFBF6,#F9F4EA);border:1px solid var(--line);
  border-radius:9px;padding:22px 24px}
.toc-h{display:flex;align-items:center;gap:9px;font-family:var(--serif-jp);font-weight:600;
  font-size:13px;letter-spacing:.06em;color:var(--ink-strong);margin:0 0 14px}
.toc-h svg{color:var(--gold)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:2px}
.toc a{
  display:flex;gap:10px;font-size:12px;line-height:1.7;color:#6E6152;padding:7px 8px;
  border-radius:5px;transition:background .3s,color .3s
}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;
  color:var(--gold-soft);flex:none}
.toc a:hover{background:rgba(200,170,110,.1);color:var(--gold-deep)}
.toc a.on{background:rgba(200,170,110,.16);color:var(--ink-strong);font-weight:500}
.toc--inline{display:none;margin:0 0 34px}

/* サイドの人気記事 */
.rank{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0;box-shadow:none}
.rank-h{display:flex;align-items:center;gap:9px;font-family:var(--serif-jp);font-weight:600;
  font-size:13px;letter-spacing:.06em;color:var(--ink-strong);margin:0 0 14px}
.rank ol{list-style:none;margin:0;padding:0;counter-reset:rk}
.rank li{counter-increment:rk;border-top:1px solid var(--line-soft)}
.rank li:first-child{border-top:0}
.rank a{display:grid;grid-template-columns:26px 62px minmax(0,1fr);gap:11px;align-items:center;padding:13px 0}
.rank a::before{
  content:counter(rk);font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;color:var(--gold-soft);text-align:center;
  line-height:1
}
.rank li:nth-child(-n+3) a::before{color:var(--gold-deep);font-weight:600}
.rank figure{margin:0;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--cream-2)}
.rank figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rank a:hover figure img{transform:scale(1.08)}
.rank p{margin:0;font-family:var(--serif-jp);font-size:11.5px;line-height:1.65;color:var(--ink-strong);
  transition:color .3s}
.rank a:hover p{color:var(--gold-deep)}

/* サイド縦バナー */
.vbanner{
  position:relative;border-radius:9px;overflow:hidden;min-height:290px;display:flex;
  align-items:flex-end;box-shadow:0 10px 26px rgba(74,58,37,.2)
}
.vbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.4s var(--ease)}
.vbanner:hover img{transform:scale(1.05)}
.vbanner::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(50,38,22,0) 18%,rgba(50,38,22,.62) 58%,rgba(40,30,16,.9) 100%)}
.vbanner-in{position:relative;z-index:2;padding:22px 20px}
.vbanner .eyebrow{font-size:10px;letter-spacing:.16em;color:#E7D8B8;margin:0 0 8px}
.vbanner h3{font-family:var(--mincho);font-weight:500;font-size:17px;line-height:1.55;color:#fff;margin:0 0 12px}
.vbanner .go{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:#F0E3C6;
  border:1px solid rgba(232,219,192,.5);padding:8px 14px;border-radius:3px;transition:all .35s var(--ease)}
.vbanner:hover .go{background:rgba(255,255,255,.12);gap:12px}

/* 記事中インサート：あわせて読みたい */
.inread{
  margin:38px 0;padding:22px 24px 24px;border-radius:9px;
  background:linear-gradient(180deg,#FDFBF6,#F9F3E8);border:1px solid rgba(200,170,110,.34);
  position:relative
}
.inread-h{display:flex;align-items:center;gap:9px;font-family:var(--serif-jp);font-weight:600;
  font-size:12.5px;letter-spacing:.08em;color:var(--gold-deep);margin:0 0 16px}
.inread-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(200,170,110,.5),transparent)}
.inread-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inread-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;
  background:#fff;border:1px solid var(--line-soft);border-radius:7px;overflow:hidden;padding:9px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.inread-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.inread-card figure{margin:0;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--cream-2)}
.inread-card figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.inread-card:hover figure img{transform:scale(1.07)}
.inread-card b{font-family:var(--serif-jp);font-weight:500;font-size:12px;line-height:1.65;
  color:var(--ink-strong);display:block}
.inread-card span{font-size:10px;color:var(--ink-mute);margin-top:5px;display:block}

/* 記事中インサート：単体（読み進めた中盤に置く） */

/* 記事中の胡蝶蘭バナー（横） */
.inbanner{
  position:relative;display:block;margin:42px 0;border-radius:9px;overflow:hidden;min-height:170px;
  box-shadow:0 10px 28px rgba(74,58,37,.2)
}
.inbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  z-index:0;transition:transform 1.5s var(--ease)}
.inbanner:hover img{transform:scale(1.04)}
.inbanner::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(92deg,rgba(58,44,26,.95) 0%,rgba(74,57,33,.88) 36%,rgba(100,77,44,.45) 62%,transparent 92%)}
.inbanner-in{position:relative;z-index:2;padding:26px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.inbanner .eyebrow{font-size:10.5px;letter-spacing:.15em;color:#EEE1C6;margin:0 0 8px}
.inbanner .ttl{display:block;font-family:var(--mincho);font-weight:500;font-size:21px;line-height:1.5;color:#fff;margin:0 0 8px}
.inbanner p{margin:0;font-size:11.5px;color:#E2D3B4;line-height:1.8}
.inbanner .btn{flex:none;margin-left:auto}

/* 記事末 */
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:44px 0 0}
.art-tags a{font-size:11px;color:var(--gold-deep);background:#F7F1E4;border:1px solid rgba(200,170,110,.3);
  border-radius:99px;padding:6px 14px;transition:all .35s var(--ease)}
.art-tags a:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.share{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.share b{font-size:11px;letter-spacing:.1em;color:var(--ink-mute);font-weight:400}

.author{display:grid;grid-template-columns:78px minmax(0,1fr);gap:20px;align-items:start;
  margin-top:34px;padding:24px;border-radius:9px;background:linear-gradient(180deg,#FDFBF6,#FAF5EB);
  border:1px solid var(--line)}
.author img{width:78px;height:78px;border-radius:50%;object-fit:cover}
.author .nm{font-family:var(--serif-jp);font-weight:600;font-size:14px;color:var(--ink-strong);margin:0 0 4px}
.author .rl{font-size:10.5px;color:var(--gold-deep);margin:0 0 10px;letter-spacing:.05em}
.author p{margin:0;font-size:11.5px;line-height:1.9;color:var(--ink-mute)}

/* 前後の記事 */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.pn a{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;align-items:center;padding:14px;
  background:#fff;border:1px solid var(--line-soft);border-radius:8px;box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pn a:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.pn .r{direction:rtl}
.pn .r > *{direction:ltr}
.pn figure{margin:0;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--cream-2)}
.pn figure img{width:100%;height:100%;object-fit:cover}
.pn .lb{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;color:var(--gold-deep);margin-bottom:6px}
.pn .r .lb{justify-content:flex-end}
.pn .r .tx{text-align:right}
.pn b{font-family:var(--serif-jp);font-weight:500;font-size:12px;line-height:1.65;color:var(--ink-strong);display:block}

/* 続けて読む（横スクロール可） */
.keep{padding:70px 0 0}
.keep .cards{margin-top:4px}

/* 同カテゴリ一覧（リスト型で密度を上げる） */

/* モバイル追従CTA */

@media(max-width:1080px){
  .art{grid-template-columns:1fr;gap:0}
  .side{position:static;flex-direction:row;flex-wrap:wrap;margin-top:44px}
  .side > *{flex:1 1 300px}
  .toc--side{display:none}
  .toc--inline{display:block}
}
@media(max-width:720px){
  .ah-hero{border-radius:8px}
  .prose{font-size:14px;line-height:2.05}
  .prose h2{font-size:19px;margin-top:42px}
  .prose h3{font-size:15px}
  .inread-grid{grid-template-columns:1fr}
  /* 縦積みになると文字が花の明るい部分に重なるため、覆いを縦方向に切り替える */
  .inbanner::after{background:linear-gradient(180deg,rgba(52,40,22,.92) 0%,rgba(60,46,26,.86) 46%,rgba(48,36,20,.78) 100%)}
  .inbanner-in{padding:22px 20px;gap:16px}
  .inbanner .ttl{font-size:19px}
  .inbanner .btn{margin-left:0;width:100%;justify-content:center}
  /* 追従CTAでフッター末尾が隠れないよう下に逃げを作る */
  body:has(.sticky-cta){padding-bottom:70px}
  .pn{grid-template-columns:1fr}
  .side{flex-direction:column}
  body{padding-bottom:0}
}


/* サイドの「次に読みたい記事」 */
.side-next{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 17px 17px;box-shadow:var(--shadow-s);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s
}
.side-next:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--gold-soft)}
.side-next .lb{
  display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.1em;
  color:var(--gold-deep);margin-bottom:11px
}
.side-next figure{margin:0 0 11px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--cream-2)}
.side-next figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.side-next:hover figure img{transform:scale(1.06)}
.side-next b{
  display:block;font-family:var(--serif-jp);font-weight:600;font-size:13px;line-height:1.7;
  color:var(--ink-strong);margin-bottom:10px
}
.side-next .go{
  display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gold-deep);
  transition:gap .3s var(--ease)
}
.side-next:hover .go{gap:12px}