:root{
  --bg: #f5f1e8;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --border: rgba(30,25,15,0.09);
  --text: #2b2620;
  --text-muted: #766c5c;
  --text-dim: #9b917e;
  --gold: #b76e79;
  --gold-light: #96525f;
  --gold-dim: #e3bcc2;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background: var(--bg); color: var(--text); font-family:'Noto Sans JP', sans-serif; line-height:1.7; overflow-x:hidden; }
h1,h2,h3,.serif{ font-family:'Playfair Display', serif; letter-spacing:.02em; }
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
.orb{ position:fixed; border-radius:50%; filter:blur(90px); opacity:.28; pointer-events:none; z-index:0; animation:orb-drift 20s ease-in-out infinite alternate; }
.orb-1{ width:460px; height:460px; background:#dd9aa5; top:-140px; right:-100px; }
.orb-2{ width:340px; height:340px; background:#e3bcc2; bottom:8%; left:-120px; animation-delay:-7s; }
.orb-3{ width:220px; height:220px; background:#c48490; top:45%; right:8%; animation-delay:-13s; }
@keyframes orb-drift{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(30px,40px) scale(1.12);} }
header, .article-wrap, footer{ position:relative; z-index:2; }

header{ position:sticky; top:0; z-index:50; background:rgba(245,241,232,0.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.header-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 28px; }
.logo-wrap{ display:flex; flex-direction:column; gap:3px; cursor:pointer; user-select:none; }
.logo-row{ display:flex; align-items:baseline; gap:2px; line-height:1; }
.logo-of{ font-size:24px; font-weight:800; letter-spacing:-.3px; color:var(--text); font-family:'Playfair Display', serif; }
.logo-girls{ font-size:24px; font-weight:800; letter-spacing:-.3px; font-family:'Playfair Display', serif; background:linear-gradient(90deg,#b76e79 0%,#dd9aa5 40%,#b76e79 80%,#e3bcc2 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:logo-shimmer 3.5s ease-in-out infinite; }
@keyframes logo-shimmer{ 0%,100%{background-position:0% center;} 50%{background-position:100% center;} }
.logo-dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); margin-left:3px; margin-bottom:4px; flex-shrink:0; }
.logo-region{ font-family:'Noto Sans JP', sans-serif; font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--gold); border:1px solid var(--gold); border-radius:4px; padding:2px 6px; margin-left:7px; align-self:center; white-space:nowrap; }
.logo-sub{ display:flex; align-items:center; gap:6px; }
.logo-sub-line{ width:16px; height:1px; background:linear-gradient(90deg,transparent,rgba(183,110,121,0.6)); animation:sub-line-pulse 3s ease-in-out infinite; }
@keyframes sub-line-pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }
.logo-sub-text{ font-size:9.5px; font-weight:700; letter-spacing:2px; white-space:nowrap; background:linear-gradient(90deg,var(--text-dim) 0%,#b76e79 40%,#dd9aa5 60%,var(--text-dim) 100%); background-size:250% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sub-shimmer 4s ease-in-out infinite; }
@keyframes sub-shimmer{ 0%,100%{background-position:0% center;} 50%{background-position:100% center;} }
nav.main-nav{ display:flex; gap:34px; }
nav.main-nav a{ font-size:13.5px; color:var(--text-muted); letter-spacing:.04em; transition:color .2s; }
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--gold-light); }
.header-right{ display:flex; align-items:center; gap:10px; }
.burger, .lang-btn{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:linear-gradient(160deg,#fffdf7,#f1e9d4); border:1px solid var(--gold-dim); box-shadow:0 2px 10px rgba(183,110,121,0.14), inset 0 1px 0 rgba(255,255,255,0.7); transition:border-color .2s, box-shadow .2s, transform .15s; }
.burger:hover, .lang-btn:hover{ border-color:var(--gold-light); box-shadow:0 8px 20px rgba(183,110,121,0.26), inset 0 1px 0 rgba(255,255,255,0.7); }
.burger:active, .lang-btn:active{ transform:scale(.93); }
.burger span{ display:block; width:16px; height:1.5px; background:var(--gold-light); position:relative; }
.burger span::before, .burger span::after{ content:''; position:absolute; height:1.5px; background:var(--gold-light); left:0; transition:width .25s; }
.burger span::before{ top:-5px; width:16px; }
.burger span::after{ top:5px; width:10px; }
.burger:hover span::after{ width:16px; }
.lang-switch{ position:relative; }
.lang-btn{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gold-light); font-family:'Noto Sans JP', sans-serif; }
.lang-menu{ position:absolute; top:52px; right:0; width:130px; background:var(--bg-elevated); border:1px solid var(--gold-dim); border-radius:14px; padding:8px; display:none; flex-direction:column; gap:2px; box-shadow:0 20px 50px rgba(30,25,15,0.2); z-index:60; }
.lang-menu.open{ display:flex; }
.lang-menu button{ padding:10px 14px; border-radius:9px; font-size:13px; color:var(--text-muted); text-align:left; background:none; border:none; cursor:pointer; font-family:'Noto Sans JP', sans-serif; transition:background .15s, color .15s; }
.lang-menu button:hover{ background:rgba(183,110,121,0.08); color:var(--text); }
.lang-menu button.active{ color:var(--gold-light); font-weight:700; background:rgba(183,110,121,0.06); }

.ham-overlay{ position:fixed; inset:0; background:rgba(30,25,15,0.5); z-index:150; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.ham-overlay.open{ opacity:1; pointer-events:all; }
.ham-drawer{ position:fixed; top:0; right:0; width:min(310px,85vw); height:100dvh; background: radial-gradient(620px circle at 108% -10%, rgba(183,110,121,0.55), transparent 55%), radial-gradient(460px circle at -20% 108%, rgba(150,82,95,0.4), transparent 55%), linear-gradient(160deg, #fffdfb 0%, #fbe8e2 42%, #f1cfc5 78%, #e9bdb2 100%); z-index:151; overflow-y:auto; transform:translateX(100%); opacity:0; transition:transform .55s cubic-bezier(.22,1.12,.36,1), opacity .4s ease; box-shadow:-4px 0 0 rgba(183,110,121,0.55) inset, -24px 0 60px rgba(30,25,15,0.22); padding-bottom:30px; }
.ham-drawer.open{ transform:translateX(0); opacity:1; }
.ham-head{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:24px 22px 16px; border-bottom:1px solid rgba(183,110,121,0.18); }
.ham-eyebrow{ position:relative; font-size:11px; letter-spacing:.22em; color:var(--gold-light); font-weight:700; padding-bottom:9px; }
.ham-eyebrow::after{ content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:linear-gradient(90deg, var(--gold), var(--gold-dim)); }
.ham-close{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.2s; }
.ham-close:hover{ border-color:var(--gold-light); color:var(--gold-light); }
.ham-section-label{ padding:20px 22px 8px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); display:flex; align-items:center; gap:7px; }
.ham-section-label svg{ width:12px; height:12px; }
.ham-item{ display:flex; align-items:center; gap:14px; padding:13px 22px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); transition:background .15s; }
.ham-item:hover{ background:rgba(183,110,121,0.06); }
.ham-item.active .ham-item-title{ color:var(--gold-light); }
.ham-item-icon{ width:40px; height:40px; border-radius:12px; flex-shrink:0; color:var(--gold-light); background:linear-gradient(135deg, rgba(183,110,121,0.12), rgba(221,154,165,0.2)); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; }
.ham-item-icon svg{ width:18px; height:18px; }
.ham-item-text{ flex:1; min-width:0; }
.ham-item-title{ font-size:14px; font-weight:700; display:block; }
.ham-item-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; display:block; }
.ham-chevron{ width:13px; height:13px; flex-shrink:0; color:var(--text-dim); }
.ham-divider{ height:1px; background:var(--border); margin:10px 22px; }
.ham-item-quiet .ham-item-icon{ background:rgba(30,25,15,0.04); border-color:var(--border); color:var(--text-dim); }

/* ===== Article ===== */
.article-wrap{ max-width:760px; margin:0 auto; padding:50px 28px 20px; }
.article-hero-img{ display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; border-radius:18px; margin-bottom:36px; box-shadow:0 10px 34px rgba(30,25,15,0.14); }
.article-eyebrow{ font-size:12px; letter-spacing:.24em; color:var(--gold-light); font-weight:700; margin-bottom:14px; text-transform:uppercase; }
.article-hero h1{ font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:.01em; margin-bottom:18px; line-height:1.45; }
.article-lead{ color:var(--text-muted); font-size:15px; line-height:1.9; }
.article-body{ margin-top:34px; font-size:15.5px; line-height:2; }
.article-body h2{ font-size:21px; font-weight:600; margin:42px 0 16px; padding-top:16px; border-top:1px solid var(--border); }
.article-body h2:first-child{ border-top:none; margin-top:0; padding-top:0; }
.article-body p{ margin-bottom:18px; color:var(--text); }
.article-body ul{ margin:0 0 22px 1.3em; }
.article-body li{ margin-bottom:11px; }
.article-body strong{ color:var(--gold-light); }
.callout{ background:rgba(183,110,121,0.06); border:1px solid var(--gold-dim); border-radius:14px; padding:18px 22px; margin:26px 0; font-size:14px; }
.callout a{ color:var(--gold-light); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold-dim); }
.article-diagram{ margin:30px 0; padding:20px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.article-diagram svg{ display:block; width:100%; height:auto; }
.article-diagram figcaption{ margin-top:14px; font-size:12.5px; color:var(--text-muted); text-align:center; line-height:1.6; }
.article-wrap .cta-band{ margin:50px auto 10px; }

/* ===== Photo strip (creator faces as a visual break, shared with about.html/advertise.html) ===== */
.photo-strip{ max-width:680px; margin:44px auto 4px; text-align:center; }
.photo-strip-label{ font-size:10px; letter-spacing:.22em; font-weight:700; color:var(--gold-light); text-transform:uppercase; margin-bottom:16px; }
.photo-strip-imgs{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.photo-strip-imgs a{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--bg-elevated); box-shadow:0 3px 10px rgba(30,25,15,0.12); display:block; transition:transform .2s ease; }
.photo-strip-imgs a:hover{ transform:translateY(-3px); }
.photo-strip-imgs img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
@media (max-width:900px){
  .photo-strip-imgs a{ width:48px; height:48px; }
  .photo-strip-imgs{ gap:10px; }
}

/* ===== Mid-article CTA ===== */
.mid-cta{ max-width:520px; margin:18px auto 46px; text-align:center; }
.mid-cta p{ font-size:13.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.7; }
.btn-mid-cta{ display:inline-block; border:1px solid var(--gold); color:var(--gold-light); padding:11px 24px; border-radius:8px; font-size:13px; font-weight:700; transition:background .2s; }
.btn-mid-cta:hover{ background:rgba(183,110,121,0.08); }

.cta-band{ max-width:1180px; padding:40px; border-radius:22px; background:linear-gradient(120deg, #2b2620, #1e1a15); color:#f2ede2; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.cta-band h3{ font-size:20px; margin-bottom:8px; color:#f2ede2; }
.cta-band p{ color:#c9c0af; font-size:13.5px; max-width:420px; }
.btn-outline{ border:1px solid #e3bcc2; color:#dd9aa5; padding:13px 24px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap; }

footer{ border-top:1px solid var(--border); padding:40px 28px; text-align:center; color:var(--text-dim); font-size:12px; margin-top:20px; }
footer .f-links{ display:flex; justify-content:center; gap:22px; margin-bottom:16px; flex-wrap:wrap; }
footer .f-links a{ color:var(--text-muted); }
footer .f-links a:hover{ color:var(--gold-light); }

@media (max-width:900px){
  nav.main-nav{ display:none; }
  .header-inner{ padding:10px 18px; }
  .article-wrap{ padding:30px 20px 10px; }
  .article-hero-img{ border-radius:14px; margin-bottom:26px; }
  .article-body{ font-size:14.5px; }
  .cta-band{ flex-direction:column; text-align:center; padding:28px 24px; }
}