html{scroll-behavior:smooth}
/* アンカー位置は main.js がヘッダー高さを実測して制御する。
   下記は JS 無効時のフォールバック（固定ヘッダー 78px ぶん）。 */
.col-sec{scroll-margin-top:78px}
/* ===== 花魁コラム 一覧（page-column / template-columns）専用 ===== */

/* --- ヒーロー --- */
.ph,.hubcta{padding:0}
.ph{position:relative;min-height:50vh;display:flex;flex-direction:column;padding-top:112px;overflow:hidden}
.ph-bg{position:absolute;inset:0;background-size:cover;transform:scale(1.04);z-index:0}
.ph-scrim{position:absolute;inset:0;background:linear-gradient(to top,var(--void) 2%,rgba(20,10,32,.14) 44%,rgba(20,10,32,.5))}
.ph-body{position:relative;z-index:2;max-width:1120px;width:100%;margin:auto auto 0;padding:30px 40px 56px}
.ph .crumbs{position:relative;z-index:2;max-width:1120px;width:100%;margin:0 auto;padding:0 40px}
.ph .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:.76rem;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.ph .crumbs li{color:rgba(255,255,255,.8)}
.ph .crumbs li:not(:last-child)::after{content:"\203a";margin-left:8px;color:rgba(255,255,255,.55)}
.ph .crumbs a{color:rgba(255,255,255,.94)}
.ph .crumbs a:hover{color:#fff}
.ph-title{font-family:var(--min);font-weight:800;color:#fff;font-size:clamp(2rem,4.8vw,3.4rem);letter-spacing:.12em;margin:8px 0 14px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.ph-tag{color:#fff;font-family:var(--min);font-weight:500;font-size:clamp(1.02rem,1.9vw,1.3rem);letter-spacing:.05em;line-height:1.8;text-shadow:0 2px 16px rgba(0,0,0,.55)}
body .col-ph .eng{color:#FFD24A!important;display:block;margin-bottom:12px}

/* 見出し共通 */
body .col-sec .head .eng{color:#FF62A6!important}
.col-sec .head h2{color:#fff}

/* --- イントロ（HERO直下：光源を置かない＝上端への滲み出しを防止） --- */
.col-intro{position:relative;overflow:hidden;background:var(--void)}
.col-intro .mw{position:relative;z-index:1;max-width:820px}
.col-lead,.col-intro-body{color:var(--soft-2);font-size:.95rem;line-height:2.1;letter-spacing:.02em}
.col-intro-body p{margin:0 0 18px}
.col-intro-body p:last-child{margin-bottom:0}
.col-intro-body a{color:var(--pink);text-decoration:underline}

/* --- カテゴリ セクション --- */
.col-sec{position:relative;overflow:hidden}
.col-sec-0{background:var(--void-2)}
.col-sec-1{background:var(--void)}
.col-sec::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;filter:blur(110px);opacity:.38;z-index:0;pointer-events:none}
.col-sec-0::before{background:var(--magenta);bottom:-170px;left:-120px}
.col-sec-1::before{background:var(--cyan);bottom:-170px;right:-120px}
.col-sec .mw{position:relative;z-index:1}

.colcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:22px}
.colcard{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .4s,border-color .4s,box-shadow .4s}
.colcard:hover{transform:translateY(-5px);border-color:rgba(232,32,144,.45);box-shadow:0 18px 40px rgba(232,32,144,.16)}
.colcard-img{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.22)}
.colcard-img.is-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--panel,#3E1E68),var(--purple,#7A34C0))}
.colcard-ph{font-family:var(--min);color:rgba(255,255,255,.62);font-size:.9rem;letter-spacing:.14em}
.colcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.colcard:hover .colcard-img img{transform:scale(1.06)}
.colcard-b{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;flex:1}
.colcard-t{font-family:var(--min);color:#fff;font-size:1.05rem;line-height:1.55;letter-spacing:.03em}
.colcard-arw{flex:none;color:var(--pink);font-size:1rem;transition:transform .3s}
.colcard:hover .colcard-arw{transform:translateX(4px)}
.col-empty{position:relative;z-index:1;text-align:center;color:var(--soft-2);font-size:.95rem;letter-spacing:.04em;padding:20px 0}

/* --- CTA --- */
.hubcta{position:relative;text-align:center;background:#2A1150 url('../img/flower-shizuku.jpg') center/cover}
.hubcta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(106,44,176,.76) 0%,rgba(232,32,144,.6) 46%,rgba(47,182,230,.56) 100%)}
.hubcta .mw{position:relative;z-index:1;padding:88px 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:640px){
  .ph-body,.ph .crumbs{padding-left:24px;padding-right:24px}
  .colcard-grid{grid-template-columns:1fr}
  .hubcta .mw{padding:64px 24px}
}


/* コラム区分へのジャンプリンク（花魁コラム／太夫コラム） */
.col-jump{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 0}
.col-jump a{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  border:1px solid rgba(220,178,90,.55);
  color:#F1E6F8;text-decoration:none;
  font-size:.86rem;letter-spacing:.06em;
  background:rgba(255,255,255,.04);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.col-jump a::after{content:"↓";font-size:.8em;opacity:.75}
.col-jump a:hover{background:rgba(220,178,90,.16);border-color:#DCB25A;color:#fff}
@media(max-width:560px){
  .col-jump{gap:10px}
  .col-jump a{padding:10px 18px;font-size:.8rem}
}

/* --- コラム一覧末尾：立場表明への静かなリンク（光源は置かない） --- */
.col-stance{background:var(--void-2);padding:56px 0;text-align:center}
.col-stance p{margin:0}
.col-stance a{display:inline-block;color:var(--pink);font-size:.8rem;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid rgba(232,32,144,.4);padding-bottom:4px;transition:.3s}
.col-stance a:hover{color:#fff;border-color:#fff}