:root {
  --ink: #2e2930;
  --muted: #746a70;
  --paper: #fbf8f8;
  --pink: #eab8c4;
  --pink-deep: #b66d7d;
  --branch: #5a4245;
  --night: #211b24;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Zen Old Mincho", serif;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  overflow-x: hidden;
}

#petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.96) 0 12%, transparent 30%),
    linear-gradient(#dce8ef 0%, #eff3f4 48%, #f8eeef 100%);
}

.sky {
  position: absolute;
  inset: -10%;
  z-index: -3;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.8), transparent 22%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.7), transparent 18%),
    radial-gradient(circle at 50% 58%, rgba(255,244,246,.75), transparent 26%);
  filter: blur(14px);
}

.branches { position:absolute; inset:0; z-index:-1; opacity:.9; }
.branch {
  position:absolute;
  display:block;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3c3032, #725256);
  transform-origin: left center;
  box-shadow: 0 0 0 5px rgba(255,255,255,.08);
}
.branch::before, .branch::after {
  content:"";
  position:absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 60% 50%, #f7dbe2 0 16%, transparent 17%),
    radial-gradient(circle at 25% 68%, #efc4cf 0 15%, transparent 16%),
    radial-gradient(circle at 72% 72%, #f8e4e8 0 16%, transparent 17%);
  filter: drop-shadow(0 4px 9px rgba(90,55,65,.08));
}
.branch-a { width: 62vw; top: 13%; left: -8%; transform: rotate(18deg); }
.branch-a::before { right: 8%; top: -52px; }
.branch-a::after { right: 34%; top: -68px; }
.branch-b { width: 48vw; top: 4%; right: -13%; transform: rotate(156deg); }
.branch-b::before { right: 12%; top: -48px; }
.branch-b::after { right: 47%; top: -72px; }
.branch-c { width: 45vw; bottom: 13%; left: -18%; transform: rotate(-24deg); opacity:.55; }

.hero-copy {
  text-align:center;
  padding: 2rem;
  transform: translateY(4vh);
}
.eyebrow {
  letter-spacing: .24em;
  text-transform: uppercase;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 1.8rem;
}
h1 {
  font-size: clamp(3.8rem, 12vw, 9rem);
  line-height: .9;
  font-weight: 500;
  margin: 0;
  letter-spacing: -.04em;
}
.subtitle {
  margin: 1.2rem 0 0;
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  letter-spacing: .24em;
}
.lead {
  margin: 4rem auto 0;
  color: var(--muted);
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
  letter-spacing: .08em;
}

.scroll-hint {
  position:absolute;
  bottom: 1.7rem;
  left:50%;
  transform:translateX(-50%);
  width: 26px;
  height: 46px;
  border:1px solid rgba(46,41,48,.35);
  border-radius: 999px;
}
.scroll-hint span {
  width:4px; height:4px; border-radius:50%; background:var(--ink);
  position:absolute; top:9px; left:10px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot { 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(19px)} }

main { position:relative; z-index:1; }
.section {
  min-height: 85vh;
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 9vw, 9rem);
  display:flex;
  align-items:center;
  gap: clamp(2rem, 8vw, 8rem);
}
.section-copy { max-width: 720px; }
.section-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--pink-deep);
  font-size:.78rem;
  margin-bottom:1.6rem;
}
.kicker { color:var(--pink-deep); letter-spacing:.2em; font-size:.9rem; }
h2 {
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height:1.16;
  font-weight:500;
  margin:.8rem 0 2rem;
}
.section-copy p:not(.kicker) {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height:2.1;
  color:#5e555a;
}

.intro { justify-content:center; }
.quote-section {
  background: #f2e4e7;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  position:relative;
}
.quote-mark { font-size: clamp(7rem, 22vw, 18rem); line-height:.7; color:rgba(182,109,125,.12); position:absolute; }
blockquote { margin:0; max-width:900px; position:relative; }
blockquote p { font-size:clamp(1.7rem,4vw,3.8rem); line-height:1.55; letter-spacing:.06em; }

.split { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.visual-panel {
  min-height: 60vh;
  position:relative;
  border-radius: 50% 50% 44% 56% / 48% 42% 58% 52%;
  background: linear-gradient(180deg,#e9eef0,#f5e8eb);
  overflow:hidden;
}
.sun-disc {
  width: 46%; aspect-ratio:1; border-radius:50%;
  position:absolute; left:27%; top:27%;
  background:radial-gradient(circle,#fffaf1 0 35%,#f3d8cd 70%,rgba(243,216,205,.1));
  box-shadow:0 0 70px rgba(255,235,224,.9);
}
.petal-ring {
  position:absolute; inset:11%; border-radius:50%; border:1px solid rgba(182,109,125,.25);
  transform:rotate(-12deg);
}
.petal-ring::before,.petal-ring::after {
  content:"";position:absolute;width:34px;height:48px;background:#edc1cc;border-radius:70% 35% 70% 35%;
}
.petal-ring::before{left:12%;top:22%;transform:rotate(28deg)}
.petal-ring::after{right:8%;bottom:22%;transform:rotate(-35deg)}

.dusk {
  min-height: 100vh;
  color:#fff;
  background:
    radial-gradient(circle at 70% 20%, rgba(190,104,128,.22), transparent 30%),
    linear-gradient(180deg,#4a3947,#211b24 70%);
}
.dusk .section-copy p:not(.kicker){ color:#d8cfd5; }
.dusk .section-number,.dusk .kicker{ color:#edb7c5; }
.text-link {
  display:inline-block;
  margin-top:2rem;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:.35rem;
}

footer {
  background:#161216;
  color:#eee5ea;
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:5rem 2rem;
}
footer > p:first-child { font-size:clamp(2.5rem,6vw,5rem); margin:0; }
.footer-sub { letter-spacing:.24em; color:#beabb5; }
.copyright { margin-top:5rem; font-family:ui-sans-serif,system-ui,sans-serif; font-size:.7rem; color:#736873; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 780px) {
  .split { grid-template-columns:1fr; }
  .visual-panel { min-height:48vh; }
  .section { min-height:auto; padding-top:7rem; padding-bottom:7rem; }
  .branch-a { width:90vw; }
  .branch-b { width:70vw; }
  .lead { margin-top:3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; }
  .scroll-hint span { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  #petals { display:none; }
}

/* ================================================================
   Shared navigation / template pages
================================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem clamp(1.2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, rgba(251,248,248,.82), rgba(251,248,248,.1));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-nav.is-scrolled {
  background: rgba(251,248,248,.9);
  box-shadow: 0 1px 0 rgba(46,41,48,.08);
}
.brand {
  position: relative;
  z-index: 2;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.75rem;
  line-height: 1;
}
.site-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .76rem;
  letter-spacing: .12em;
}
.site-menu a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: .5rem 0;
}
.site-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .22rem;
  width: 100%;
  height: 1px;
  background: var(--pink-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.site-menu a:hover::after,
.site-menu a:focus-visible::after,
.site-menu a.is-current::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 .72rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .65rem;
}

.menu-section { min-height: auto; justify-content: center; }
.menu-shell { width: min(1100px, 100%); }
.menu-intro { max-width: 720px; }
.menu-grid {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: rgba(46,41,48,.12);
  border: 1px solid rgba(46,41,48,.12);
}
.menu-card {
  min-height: 230px;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  background: rgba(251,248,248,.96);
  color: var(--ink);
  text-decoration: none;
  transition: background .4s ease, transform .4s ease;
}
.menu-card:hover { background: #f5e8eb; }
.menu-card-no,
.content-meta,
.policy-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--pink-deep);
  font-size: .72rem;
  letter-spacing: .08em;
}
.menu-card-title { margin-top: auto; font-size: clamp(1.45rem, 2.5vw, 2.2rem); }
.menu-card-copy { margin-top: .7rem; color: var(--muted); line-height: 1.8; font-size: .92rem; }

.template-section { min-height: auto; justify-content: center; }
.template-section.soft { background: #f5eeef; }
.content-list { margin-top: 3.5rem; border-top: 1px solid rgba(46,41,48,.15); }
.content-item {
  padding: 2.2rem 0 2.5rem;
  border-bottom: 1px solid rgba(46,41,48,.15);
}
.content-item h3 { margin: .4rem 0 1rem; font-size: clamp(1.35rem,2.3vw,2rem); font-weight: 500; }
.content-item p:not(.content-meta) { font-size: 1rem; line-height: 1.9; }
.dark-link { color: var(--ink); border-color: rgba(46,41,48,.35); }
.note-list { margin-top: 3.5rem; }
.note-row {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(46,41,48,.15);
}
.note-row:last-child { border-bottom: 1px solid rgba(46,41,48,.15); }
.note-row time { font: .76rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pink-deep); }
.note-row h3 { margin: 0 0 .65rem; font-size: 1.25rem; font-weight: 500; }
.note-row p { margin: 0; }
.end-links { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; margin-top:2.5rem; }
.footer-nav a { color:#bcaeb6; text-decoration:none; font: .72rem/1.5 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; }
.footer-nav a:hover { color:#fff; }

/* Inner pages */
.inner-page { background: #f9f5f6; }
.inner-nav { background: rgba(249,245,246,.82); }
.page-hero {
  min-height: 72svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding: 8rem 1.5rem 5rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.88), transparent 28%),
    radial-gradient(circle at 78% 28%, rgba(234,184,196,.3), transparent 24%),
    linear-gradient(180deg,#e7eef1,#f7ebee);
}
.page-hero::before,
.page-hero::after {
  content:"";
  position:absolute;
  width: 35vw;
  height: 18px;
  background: linear-gradient(90deg,#47383a,#725256);
  border-radius:999px;
  opacity:.55;
}
.page-hero::before { left:-11vw; top:18%; transform:rotate(18deg); }
.page-hero::after { right:-13vw; bottom:24%; transform:rotate(-18deg); }
.page-hero-copy { position:relative; z-index:1; max-width:900px; }
.page-symbol { font-size: clamp(4rem,10vw,8rem); color: rgba(182,109,125,.35); margin:0 0 1rem; line-height:.7; }
.page-title { font-size: clamp(2.7rem,7vw,6rem); line-height:1.1; margin:0; font-weight:500; }
.page-lead { margin:2rem auto 0; color:var(--muted); letter-spacing:.09em; line-height:2; }
.inner-main { position:relative; z-index:1; }
.prose-section,
.policy-section {
  width: min(860px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(5rem,10vw,9rem) 0;
}
.prose-section.soft {
  width: 100%;
  padding-left: max(1.5rem, calc((100% - 860px)/2));
  padding-right: max(1.5rem, calc((100% - 860px)/2));
  background:#f1e5e8;
}
.prose-section h2,
.policy-section h2 { font-size:clamp(2rem,5vw,4rem); margin:.7rem 0 2rem; font-weight:500; }
.prose-section > p:not(.kicker),
.policy-section > p { color:#5e555a; line-height:2.05; font-size:1.05rem; }
.support-actions { margin-top:2.5rem; }
.button {
  display:inline-block;
  padding: .95rem 1.3rem;
  border:1px solid rgba(46,41,48,.22);
  border-radius:999px;
  font: .78rem/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.08em;
}
.button-muted { color:var(--muted); background:rgba(255,255,255,.45); }
.faq-list { margin-top:3rem; border-top:1px solid rgba(46,41,48,.15); }
.faq-list details { border-bottom:1px solid rgba(46,41,48,.15); padding:1.5rem 0; }
.faq-list summary { cursor:pointer; font-size:1.05rem; }
.faq-list details p { color:var(--muted); line-height:1.9; padding-right:1rem; }
.page-ending {
  min-height: 60vh;
  padding: 7rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(180deg,#493845,#211b24);
  color:#fff;
}
.page-ending p { font-size:clamp(1.4rem,3vw,2.5rem); line-height:1.8; }
.compact-footer { min-height:34vh; }
.compact-footer > p:first-child { font-size:clamp(2rem,5vw,3.5rem); }

.privacy-hero { background: linear-gradient(180deg,#edf0f0,#f5e9ec); }
.policy { padding-top: 2rem; }
.template-notice {
  width:min(860px, calc(100% - 3rem));
  margin:4rem auto 2rem;
  padding:1.4rem 1.5rem;
  border:1px solid rgba(182,109,125,.28);
  background:rgba(255,255,255,.55);
}
.template-notice strong { color:var(--pink-deep); }
.template-notice p { margin:.55rem 0 0; color:var(--muted); line-height:1.8; font-size:.9rem; }
.policy-section { border-bottom:1px solid rgba(46,41,48,.12); }
.policy-section h2 { font-size:clamp(1.7rem,4vw,3rem); }
.policy-date { margin-top:2.5rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem !important; }

@media (max-width: 780px) {
  .site-nav { padding:.85rem 1rem; }
  .menu-toggle { display:block; position:relative; z-index:2; }
  .site-menu {
    position:absolute;
    top:0;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
    padding:5.2rem 1.3rem 1.5rem;
    background:rgba(251,248,248,.97);
    box-shadow:0 12px 35px rgba(46,41,48,.12);
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s ease, opacity .35s ease;
  }
  .site-menu.is-open { transform:none; opacity:1; pointer-events:auto; }
  .site-menu a { width:100%; padding:.85rem 0; font-size:.82rem; }
  .menu-grid { grid-template-columns:1fr; }
  .menu-card { min-height:190px; }
  .note-row { grid-template-columns:1fr; gap:.6rem; }
  .page-hero { min-height:62svh; }
}

/* DOKASEN Sakura Site v2.1.0 - navigation compatibility guard */
@media (min-width: 781px) {
  .site-nav {
    min-height: 68px;
  }
  .menu-toggle {
    display: none !important;
  }
  .site-menu {
    display: flex !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}