:root {
  --bg: #FFF8FB; --surface: #FFFFFF; --pink-soft: #FFF0F6; --purple-soft: #F7F3FF; --gray-pink: #F8F4F6;
  --ink: #32262D; --text: #51444C; --muted: #7C6D76; --faint: #A09199;
  --pink: #FF5D9E; --berry: #D94C83; --coral: #FF8EAC; --lavender: #8C76E8; --deep-purple: #6753B5;
  --border: rgba(255,93,158,.15); --shadow: 0 14px 36px rgba(76,48,66,.08); --shadow-strong: 0 18px 46px rgba(217,76,131,.15);
  --radius: 22px; --chrome-offset: 106px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; line-height:1.75; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--berry); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid rgba(140,118,232,.38); outline-offset:3px; }
img { max-width:100%; height:auto; display:block; }
.container { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.skip-link { position:fixed; left:16px; top:8px; z-index:200; transform:translateY(-150%); background:var(--ink); color:white; padding:10px 14px; border-radius:10px; }
.skip-link:focus { transform:none; }
.site-chrome { position:sticky; top:0; z-index:70; }
.notice-bar { background:#fff; border-bottom:1px solid var(--border); font-size:13px; color:var(--muted); }
.notice-inner { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.notice-links { display:flex; gap:16px; white-space:nowrap; }
.main-nav { background:rgba(255,248,251,.96); border-bottom:1px solid var(--border); backdrop-filter:saturate(140%) blur(12px); }
.nav-inner { height:72px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; flex:0 0 auto; color:var(--ink); font-weight:800; letter-spacing:.01em; }
.brand img { width:132px; max-height:40px; object-fit:contain; }
.brand-text { font-size:22px; }
.nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; white-space:nowrap; }
.nav-links a { min-height:44px; display:flex; align-items:center; padding:0 14px; border-radius:999px; font-weight:650; }
.nav-links a.is-active { background:var(--pink-soft); color:var(--berry); }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:10px; }
.btn, .channel-trigger, .nav-mobile-action { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 20px; border:1px solid transparent; font-weight:750; white-space:nowrap; cursor:pointer; }
.btn { color:#fff; background:linear-gradient(135deg,#FF8EAC 0%,#FF5D9E 52%,#8C76E8 100%); box-shadow:0 10px 24px rgba(217,76,131,.18); }
.btn:hover { color:#fff; transform:translateY(-1px); }
.btn-secondary { color:var(--berry); background:#fff; border-color:var(--border); box-shadow:none; }
.btn-small { min-height:42px; padding:0 17px; }
.channel-trigger { background:#fff; color:var(--ink); border-color:var(--border); }
.nav-mobile-left, .nav-mobile-action { display:none; }
main { min-height:60vh; }
.section { padding:72px 0; }
.section-tight { padding:48px 0; }
.section-soft { background:var(--pink-soft); }
.section-purple { background:var(--purple-soft); }
.section-gray { background:var(--gray-pink); }
.eyebrow { color:var(--berry); font-weight:800; letter-spacing:.08em; font-size:13px; text-transform:uppercase; }
h1,h2,h3 { color:var(--ink); line-height:1.25; margin-top:0; }
h1 { font-size:clamp(38px,6vw,72px); letter-spacing:-.04em; margin-bottom:22px; }
h2 { font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em; margin-bottom:16px; }
h3 { font-size:20px; margin-bottom:10px; }
p { margin:0 0 16px; }
.lead { font-size:18px; color:var(--muted); max-width:780px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
.section-head p { max-width:680px; color:var(--muted); }
.text-link { color:var(--berry); font-weight:750; display:inline-flex; align-items:center; gap:6px; }
.text-link::after { content:'→'; }
.hero { padding:70px 0 58px; position:relative; overflow:hidden; }
.hero::before, .hero::after { content:""; position:absolute; border-radius:50%; filter:blur(4px); pointer-events:none; }
.hero::before { width:360px; height:360px; background:rgba(255,142,172,.16); right:-80px; top:-120px; }
.hero::after { width:300px; height:300px; background:rgba(140,118,232,.12); left:-100px; bottom:-130px; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .72fr .72fr; gap:26px; align-items:center; }
.hero-copy { padding:20px 0; }
.hero-copy .brand-kicker { font-weight:850; color:var(--berry); margin-bottom:8px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 18px; }
.phone-visual { min-height:520px; border-radius:38px; padding:16px; background:linear-gradient(180deg,#fff,#fff4f8); border:1px solid var(--border); box-shadow:var(--shadow-strong); position:relative; overflow:hidden; }
.phone-visual::before { content:""; display:block; width:42%; height:26px; background:var(--ink); opacity:.9; border-radius:0 0 16px 16px; margin:-16px auto 24px; }
.phone-screen { min-height:460px; border-radius:28px; background:linear-gradient(150deg,#FFF0F6,#F7F3FF 56%,#fff); padding:28px 22px; display:flex; flex-direction:column; justify-content:space-between; }
.phone-screen .mock-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.phone-screen .mock-dots { display:flex; gap:8px; }
.phone-screen .mock-dots i { width:10px; height:10px; border-radius:50%; background:var(--coral); }
.hero-side { display:grid; gap:18px; }
.info-card, .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.info-card { padding:28px; min-height:210px; display:flex; flex-direction:column; justify-content:space-between; }
.info-card:nth-child(2) { background:linear-gradient(145deg,#fff,#F7F3FF); }
.topic-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(145px,1fr); gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.topic-pill { min-width:145px; padding:18px; background:#fff; border:1px solid var(--border); border-radius:20px; }
.topic-pill strong { display:block; color:var(--ink); margin-bottom:6px; }
.topic-pill span { display:block; color:var(--muted); font-size:13px; min-height:44px; }
.magazine-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:18px; }
.story-card { padding:26px; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.story-card.featured { grid-row:1 / span 2; min-height:458px; background:linear-gradient(145deg,#FFF0F6,#fff 60%); }
.story-card:nth-child(2) { background:linear-gradient(145deg,#F7F3FF,#fff); }
.story-card:nth-child(3) { background:linear-gradient(145deg,#fff,#FFF0F6); }
.story-card:nth-child(4) { background:linear-gradient(145deg,#F8F4F6,#fff); }
.story-card:nth-child(5) { background:linear-gradient(145deg,#fff,#F7F3FF); }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.tag { font-size:12px; padding:5px 10px; border-radius:999px; background:var(--pink-soft); color:var(--berry); }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.card { padding:26px; }
.card p:last-child { margin-bottom:0; }
.circle-card { min-height:250px; display:flex; flex-direction:column; }
.circle-card .text-link { margin-top:auto; }
.timeline { border-left:2px solid rgba(217,76,131,.18); margin-left:10px; padding-left:28px; display:grid; gap:22px; }
.timeline-item { position:relative; padding:24px; background:#fff; border:1px solid var(--border); border-radius:20px; }
.timeline-item::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--pink); left:-35px; top:30px; box-shadow:0 0 0 6px var(--pink-soft); }
.topic-list { display:grid; gap:14px; }
.topic-row { background:#fff; border:1px solid var(--border); border-radius:20px; padding:24px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.diary-wrap, .app-wrap, .split-panel { display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; }
.abstract-visual { min-height:360px; border-radius:32px; background:linear-gradient(135deg,#FFF0F6,#F7F3FF 55%,#fff); border:1px solid var(--border); box-shadow:var(--shadow); padding:30px; display:flex; align-items:flex-end; }
.abstract-note { width:78%; background:rgba(255,255,255,.9); border:1px solid var(--border); border-radius:22px; padding:24px; }
.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px; }
.feature-item { background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; }
.advice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.advice-card { padding:24px; border-radius:22px; background:#fff; border:1px solid var(--border); }
.safety-panel { padding:32px; border-radius:28px; background:#fff; border:1px solid var(--border); }
.safety-panel ul, .bullet-list { margin:14px 0 0; padding-left:20px; }
.feedback-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feedback { padding:24px; background:#fff; border:1px solid var(--border); border-radius:20px; }
.faq-list { display:grid; gap:12px; }
details { background:#fff; border:1px solid var(--border); border-radius:18px; padding:0 20px; }
summary { cursor:pointer; list-style:none; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-weight:750; color:var(--ink); }
summary::-webkit-details-marker { display:none; }
summary::after { content:'＋'; color:var(--berry); font-size:22px; }
details[open] summary::after { content:'－'; }
details p { padding:0 0 18px; color:var(--muted); }
.page-hero { padding:62px 0 40px; background:linear-gradient(180deg,#FFF8FB,#fff); border-bottom:1px solid var(--border); }
.page-hero h1 { font-size:clamp(34px,5vw,58px); max-width:900px; }
.page-hero .lead { max-width:860px; }
.content-stack { display:grid; gap:22px; }
.content-block { padding:30px; border-radius:24px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
.content-block.soft { background:linear-gradient(145deg,#fff,#FFF0F6); }
.content-block.purple { background:linear-gradient(145deg,#fff,#F7F3FF); }
.content-block h2 { font-size:27px; }
.list-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.list-card { border:1px solid var(--border); background:#fff; border-radius:18px; padding:20px; }
.steps { counter-reset:step; display:grid; gap:14px; }
.step { position:relative; padding:20px 20px 20px 66px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.step::before { counter-increment:step; content:counter(step); position:absolute; left:20px; top:20px; width:30px; height:30px; border-radius:50%; background:var(--pink-soft); color:var(--berry); display:grid; place-items:center; font-weight:800; }
.callout { padding:26px; border-radius:22px; background:var(--purple-soft); border:1px solid rgba(140,118,232,.18); }
.inline-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.related-links { display:flex; flex-wrap:wrap; gap:10px; }
.related-links a { padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--border); font-weight:700; }
.service-note { padding:28px; border-radius:24px; background:linear-gradient(135deg,#FFF0F6,#F7F3FF); border:1px solid var(--border); }
.site-footer { background:#30242B; color:#FFEAF2; padding:62px 0 90px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:28px; }
.site-footer h2 { font-size:15px; color:#fff; margin-bottom:12px; }
.site-footer a { display:block; color:#FFEAF2; opacity:.88; margin:7px 0; }
.site-footer a:hover { opacity:1; color:#fff; }
.footer-brand p { color:#F5CCD9; max-width:330px; }
.footer-logo strong { font-size:22px; color:#fff; }
.footer-logo img { width:132px; margin-bottom:14px; object-fit:contain; }
.footer-bottom { margin-top:38px; padding-top:24px; border-top:1px solid rgba(255,234,242,.14); color:#E7BCCB; display:flex; justify-content:space-between; gap:24px; font-size:13px; }
.channel-overlay { position:fixed; inset:var(--chrome-offset) 0 0; background:rgba(50,38,45,.24); z-index:65; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; }
.channel-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.channel-desktop { background:#fff; border-top:1px solid var(--border); box-shadow:var(--shadow-strong); }
.channel-desktop-inner { padding:24px 0 30px; }
.panel-head, .sheet-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.panel-head button, .sheet-head button { border:1px solid var(--border); background:#fff; color:var(--ink); min-height:42px; padding:0 14px; border-radius:999px; cursor:pointer; }
.channel-groups { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.channel-groups h2 { font-size:15px; color:var(--muted); margin-bottom:12px; }
.channel-groups a { display:block; padding:12px; border-radius:14px; }
.channel-groups a:hover { background:var(--pink-soft); }
.channel-groups b, .channel-groups span { display:block; }
.channel-groups b { color:var(--ink); }
.channel-groups span { font-size:12px; color:var(--muted); margin-top:3px; }
.channel-mobile, .mobile-bottom-nav { display:none; }

@media (max-width: 980px) {
  .nav-links a { padding:0 10px; }
  .nav-actions .btn { display:none; }
  .hero-grid { grid-template-columns:1fr .8fr; }
  .hero-side { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
  .magazine-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .story-card.featured { grid-row:auto; grid-column:1 / -1; min-height:330px; }
  .grid-4, .advice-grid { grid-template-columns:repeat(2,1fr); }
  .feedback-grid, .list-cards { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid section:nth-child(4), .footer-grid section:nth-child(5) { margin-top:12px; }
}

@media (max-width: 780px) {
  :root { --chrome-offset: 98px; }
  .container { width:calc(100% - 32px); }
  .notice-inner { min-height:34px; font-size:12px; }
  .notice-links a:first-child { display:none; }
  .main-nav { background:rgba(255,248,251,.98); }
  .nav-inner { height:64px; gap:10px; justify-content:space-between; }
  .nav-mobile-left { display:block; flex:1; }
  .nav-mobile-left .channel-trigger { min-height:44px; padding:0 12px; font-size:13px; }
  .brand { justify-content:center; flex:1.15; }
  .brand-text { font-size:19px; }
  .brand img { width:110px; max-height:34px; }
  .nav-links, .nav-actions { display:none; }
  .nav-mobile-action { display:inline-flex; flex:1; justify-content:flex-end; color:var(--berry); padding:0 4px; min-height:44px; }
  .section { padding:54px 0; }
  .section-tight { padding:38px 0; }
  .hero { padding:44px 0 42px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { padding:0; }
  h1 { font-size:42px; }
  .phone-visual { min-height:430px; max-width:360px; width:100%; margin:0 auto; border-radius:32px; }
  .phone-screen { min-height:370px; }
  .hero-side { grid-column:auto; grid-template-columns:1fr; }
  .info-card { min-height:auto; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .magazine-grid, .grid-2, .grid-3, .grid-4, .advice-grid, .feedback-grid, .list-cards, .diary-wrap, .app-wrap, .split-panel { grid-template-columns:1fr; }
  .story-card.featured { grid-column:auto; min-height:300px; }
  .story-card { min-height:auto; }
  .topic-row { grid-template-columns:1fr; }
  .feature-list { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-bottom { flex-direction:column; }
  .site-footer { padding-bottom:124px; }
  .channel-overlay { inset:0; display:flex; align-items:flex-end; background:rgba(50,38,45,.34); }
  .channel-desktop { display:none; }
  .channel-mobile { display:block; width:100%; max-height:85vh; overflow:auto; overscroll-behavior:contain; background:#fff; border-radius:24px 24px 0 0; padding:10px 16px max(24px, env(safe-area-inset-bottom)); transform:translateY(102%); transition:transform .24s ease; }
  .channel-overlay.is-open .channel-mobile { transform:translateY(0); }
  .sheet-handle { width:44px; height:5px; background:#D8CDD2; border-radius:999px; margin:2px auto 10px; }
  .sheet-head { margin-bottom:8px; }
  .sheet-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sheet-links a { min-height:48px; display:flex; align-items:center; padding:0 14px; border-radius:14px; background:var(--bg); border:1px solid var(--border); font-weight:700; }
  .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.96); border-top:1px solid var(--border); padding:7px max(6px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); box-shadow:0 -10px 30px rgba(76,48,66,.08); }
  .mobile-bottom-nav a { min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:13px; font-size:12px; color:var(--muted); }
  .mobile-bottom-nav a span { font-size:18px; line-height:1; }
  .mobile-bottom-nav a.is-active { background:var(--pink-soft); color:var(--berry); font-weight:750; }
}

@media (max-width: 420px) {
  .container { width:calc(100% - 32px); }
  .sheet-links { grid-template-columns:1fr; }
  .topic-strip { grid-auto-columns:78%; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}