/* ===== 記事ページ（single.php）専用スタイル =====
   is_singular('post') で自動読込。theme.css の .doc-body 基本タイポはそのまま活用。 */

/* --- レイアウト土台（.doc は使わず .mw + 2カラム） --- */
.doc-wrap{padding:116px 0 56px;background-color:var(--void);background-image:
  radial-gradient(680px 680px at 88% 24%, rgba(232,32,144,.20), transparent 58%),
  radial-gradient(640px 640px at 6% 42%, rgba(30,200,222,.16), transparent 58%),
  radial-gradient(700px 700px at 92% 60%, rgba(245,133,42,.15), transparent 58%),
  radial-gradient(640px 640px at 8% 78%, rgba(122,52,192,.24), transparent 60%),
  radial-gradient(660px 660px at 90% 92%, rgba(232,20,80,.18), transparent 58%)}
.doc-wrap.has-hero{padding-top:52px}
/* 光源は上の background-image で“定期的に”表現（一番下だけでなく全体へ）。
   単一の疑似要素bloomは無効化。上部(HERO直下)は光源を置かず無着色を維持。 */
.doc-wrap::before{display:none!important}
.doc-wrap .mw{max-width:1120px}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;margin-top:20px}
.doc-main{min-width:0}

/* --- パンくず（HERO無し時：本文上に淡色で） --- */
.doc-wrap .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 18px;font-size:.76rem}
.doc-wrap .crumbs li{color:var(--soft-2)}
.doc-wrap .crumbs li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--mut)}
.doc-wrap .crumbs a{color:var(--pink)}
.doc-wrap .crumbs a:hover{color:#fff}

/* --- アイキャッチHERO（固定ページHERO風） --- */
.doc-hero{position:relative;min-height:52vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:104px;overflow:hidden}
.doc-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;transform:scale(1.04)}
.doc-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,var(--void) 3%,rgba(20,10,32,.34) 48%,rgba(20,10,32,.5) 100%)}
.doc-hero-in{position:relative;z-index:2;max-width:900px;width:100%;margin:0 auto;padding:0 40px 52px}
.doc-hero .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 14px;font-size:.76rem;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.doc-hero .crumbs li{color:rgba(255,255,255,.82)}
.doc-hero .crumbs li:not(:last-child)::after{content:"›";margin-left:8px;color:rgba(255,255,255,.55)}
.doc-hero .crumbs a{color:#fff}
.doc-hero .doc-date{color:#fff;opacity:.92;margin-bottom:6px}
.doc-hero-title{font-family:var(--min);font-weight:800;color:#fff;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.5;letter-spacing:.05em;text-shadow:0 4px 30px rgba(0,0,0,.5)}

/* --- 本文：section同士の余白を締める（移行コンテンツの inline margin / 見出しトップ余白に対応・強制） ---
   例: <section style="margin-top:2.4em"><h2>… の 2.4em＋h2の48pxトップ＋画像/段落の下余白が積算して広く空くのを解消 */
.doc-body section{margin:52px 0 0!important;padding-top:0!important;padding-bottom:0!important}
.doc-body section:first-child{margin-top:24px!important}
.doc-body section>*:first-child{margin-top:0!important}
.doc-body section>*:last-child{margin-bottom:0!important}
.doc-body>*:first-child{margin-top:0}
.doc-body img{margin:16px 0}

/* --- 関連記事 --- */
.doc-related{margin-top:44px;padding-top:30px;border-top:1px solid rgba(198,168,222,.18)}
.dr-head .eng{display:block;color:var(--pink);margin-bottom:8px}
.dr-head h2{font-family:var(--min);color:#fff;font-size:1.35rem;letter-spacing:.06em;margin-bottom:22px;padding:0;border:0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);transition:transform .35s,border-color .35s,box-shadow .35s}
.rel-card:hover{transform:translateY(-4px);border-color:rgba(255,98,166,.5);box-shadow:0 14px 30px rgba(232,32,144,.24)}
.rel-img{display:block;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(135deg,#3a1a4e,#7a2050)}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rel-card:hover .rel-img img{transform:scale(1.05)}
.rel-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,.5);font-family:var(--cor);font-style:italic;letter-spacing:.1em}
.rel-b{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.rel-date{font-family:var(--cor);font-style:italic;color:var(--pink);font-size:.8rem}
.rel-t{color:#fff;font-family:var(--min);font-size:.9rem;line-height:1.6;font-weight:600}

/* --- サイドバー（検索・アーカイブ・カテゴリー） --- */
.doc-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px;min-width:0}
.side-box{background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);border-radius:12px;padding:20px 20px 22px}
.side-h{font-family:var(--min);color:#fff;font-size:1rem;font-weight:600;letter-spacing:.06em;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid rgba(198,168,222,.16)}
.side-search{display:flex;gap:8px}
.side-search input{flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid rgba(198,168,222,.3);border-radius:30px;padding:10px 16px;color:#fff;font-family:var(--jp);font-size:.82rem}
.side-search input::placeholder{color:var(--mut)}
.side-search input:focus{outline:none;border-color:var(--pink)}
.side-search button{flex:none;width:42px;height:42px;border:none;border-radius:50%;background:var(--hot);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.side-search button:hover{filter:brightness(1.08)}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{margin:0;border-bottom:1px solid rgba(198,168,222,.1)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:block;padding:9px 4px;color:var(--soft-2);font-size:.84rem;transition:color .25s,padding .25s}
.side-list a:hover{color:var(--pink);padding-left:9px}
/* カテゴリー：名前＋件数を1行に、罫線はli下だけ */
.side-cat li{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--mut);font-size:.74rem}
.side-cat li a{flex:1;padding:9px 0;border:0}
.side-cat li a:hover{padding-left:6px}
.side-cat .children{flex-basis:100%;margin:0 0 6px 12px;padding:0}

/* --- CTA（トップ以外のCTAと共通の作り。flower-shizuku.jpg） --- */
.hubcta{position:relative;text-align:center;padding:0;background:#2A1150 url('../img/flower-shizuku.jpg') center/cover}
.hubcta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(106,44,176,.74) 0%,rgba(232,32,144,.6) 40%,rgba(47,182,230,.56) 68%,rgba(245,133,42,.66) 100%)}
.hubcta .mw{position:relative;z-index:1;padding:78px 40px}
.hubcta .eng{color:rgba(255,255,255,.9);display:block;margin-bottom:14px}
.hubcta h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.7;letter-spacing:.06em;margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hubcta p{color:rgba(255,255,255,.92);font-size:.82rem;margin-bottom:28px;letter-spacing:.04em}
.hubcta .book{background:#fff;color:#8A1E5A}
.hubcta .book:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.34)}

/* --- レスポンシブ --- */
@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:44px}
  .doc-side{position:static;top:auto}
  .rel-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .doc-wrap{padding:96px 0 68px}
  .doc-wrap.has-hero{padding-top:40px}
  .doc-hero{min-height:44vh;padding-top:88px}
  .doc-hero-in{padding:0 24px 40px}
  .hubcta .mw{padding:62px 24px}
}
@media(max-width:520px){
  .rel-grid{grid-template-columns:1fr}
}

/* --- 日付＋カテゴリチップ（HERO内・通常見出し内 共通） --- */
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}
.doc-meta .doc-date{margin:0}
.doc-cats{display:inline-flex;flex-wrap:wrap;gap:8px}
.doc-cats a{font-family:var(--jp);font-size:.68rem;letter-spacing:.06em;padding:5px 12px;border-radius:20px;background:rgba(232,32,144,.9);color:#fff;transition:background .25s,transform .25s}
.doc-cats a:hover{background:var(--magenta);transform:translateY(-1px)}
/* HERO上ではガラス調チップで写真に馴染ませる */
.doc-hero .doc-cats a{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.doc-hero .doc-cats a:hover{background:rgba(255,255,255,.32)}

/* --- サイドバー：スタッフブログ（ココブログ）への導線 --- */
.side-cocoblog{background:linear-gradient(150deg,rgba(122,52,192,.24),rgba(232,32,144,.16));border-color:rgba(255,98,166,.32)}
.side-note{color:var(--soft-2);font-size:.8rem;line-height:1.85;margin-bottom:14px}
.side-link{display:inline-flex;align-items:center;gap:5px;color:var(--pink);font-size:.82rem;letter-spacing:.03em;font-weight:600;line-height:1.6;transition:color .25s}
.side-link:hover{color:#fff}

/* --- 前後の記事（タイトル表示のカード） --- */
.doc-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(198,168,222,.18)}
.dn-link{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 20px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);transition:transform .3s,border-color .3s,box-shadow .3s}
.dn-link:hover{transform:translateY(-3px);border-color:rgba(255,98,166,.5);box-shadow:0 12px 28px rgba(232,32,144,.22)}
.dn-next{text-align:right}
.dn-dir{font-family:var(--cor);font-style:italic;color:var(--pink);font-size:.82rem}
.dn-title{color:#fff;font-family:var(--min);font-weight:600;font-size:.92rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dn-empty{display:block}
@media(max-width:560px){
  .doc-nav{grid-template-columns:1fr}
  .dn-next{text-align:left}
  .dn-empty{display:none}
}