@font-face { font-family: "Zen Maru"; src: url("/hutari-post/assets/fonts/ZenMaruGothic-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Maru"; src: url("/hutari-post/assets/fonts/ZenMaruGothic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zen Maru"; src: url("/hutari-post/assets/fonts/ZenMaruGothic-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

:root {
  --cream: #fff9ed; --paper: #fffdf8; --ink: #35333a; --muted: #716d75;
  --line: #eadfcb; --pink: #f25482; --pink-deep: #d2416e; --pink-soft: #ffe2ea;
  --mint: #3cbeb7; --mint-deep: #1f8f88; --mint-soft: #ddf6f3;
  --lavender: #8d78d6; --lavender-deep: #6f5bb8; --lavender-soft: #eee8ff;
  --yellow: #f7c84b; --yellow-soft: #fff1bc; --blue-soft: #e1f7fd;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Zen Maru", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 500; line-height: 1.9; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 4px; border-radius: 8px; }

.site-shell { min-height: 100vh; overflow: hidden; }
.site-header { height: 76px; background: rgba(255,253,248,.94); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.header-inner, .footer-inner { max-width: var(--max); height: 100%; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
.brand > span:last-child { color: var(--pink); }
.brand b { color: var(--lavender); font-weight: 900; }
.brand-mark { width: 34px; height: 31px; flex: 0 0 auto; position: relative; display: inline-block; background: var(--pink); border-radius: 5px 5px 8px 8px; transform: rotate(-2deg); box-shadow: 0 3px 0 #dca2ad; }
.brand-mark::before { content: ""; position: absolute; width: 26px; height: 16px; left: 4px; top: -7px; background: var(--pink-soft); border: 2px solid var(--pink); border-radius: 50% 50% 4px 4px; }
.brand-mark::after { content: ""; position: absolute; width: 13px; height: 4px; left: 10px; top: 13px; border-radius: 9px; background: #fff; }
.brand-mark i { position: absolute; width: 4px; height: 14px; background: #c0b8c4; bottom: -12px; left: 15px; z-index: -1; }
.site-header nav, .site-footer nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 700; }
.site-header nav a { padding: 24px 0 20px; border-bottom: 3px solid transparent; }
.site-header nav a:hover, .site-header nav a.active { color: var(--pink-deep); border-color: var(--pink); }

.hero { max-width: var(--max); min-height: 570px; margin: auto; padding: 78px 40px 66px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 42px; position: relative; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; filter: blur(1px); }
.hero::before { width: 280px; height: 280px; background: var(--pink-soft); right: -140px; top: 30px; opacity: .55; }
.hero::after { width: 190px; height: 190px; background: var(--mint-soft); left: -130px; bottom: -30px; opacity: .6; }
.eyebrow, .section-kicker { margin: 0 0 15px; font-size: 12px; font-weight: 900; letter-spacing: .18em; color: var(--lavender-deep); }
.eyebrow span { color: var(--pink); font-size: 8px; vertical-align: 2px; padding-right: 8px; }
.hero h1 { margin: 0; font-size: clamp(38px, 5vw, 63px); line-height: 1.35; letter-spacing: .03em; font-weight: 900; }
.hero h1 span { position: relative; z-index: 0; }
.hero h1 span::after { content: ""; position: absolute; left: -4px; right: -6px; bottom: 5px; height: 17px; background: var(--pink-soft); border-radius: 50%; z-index: -1; transform: rotate(-1deg); }
.hero-lead { max-width: 580px; color: var(--muted); font-size: 16px; margin: 28px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { min-height: 50px; padding: 12px 24px; border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 900; line-height: 1.4; transition: transform .2s ease, box-shadow .2s ease; }
.button-primary { background: var(--pink); color: white; box-shadow: 0 4px 0 #dba1ad; }
.button-secondary { background: var(--paper); color: var(--pink-deep); border: 1.5px solid #f0bece; }
.button:hover { transform: translateY(-2px); }
.button-disabled { background: #ebe4d8; color: #8c867d; cursor: not-allowed; }

.mail-scene { width: 400px; height: 390px; justify-self: end; position: relative; }
.mail-card { position: absolute; width: 230px; height: 290px; left: 76px; top: 20px; background: var(--paper); border: 2px solid #ded5c7; border-radius: 15px; transform: rotate(6deg); box-shadow: 12px 15px 0 #eee4d6; overflow: hidden; }
.mail-card::before { content: ""; position: absolute; inset: 46px 24px 24px; background: repeating-linear-gradient(transparent 0 31px, #eee6d9 32px 33px); }
.mail-lines { position: absolute; left: 42px; top: 72px; right: 45px; display: grid; gap: 24px; z-index: 1; }
.mail-lines i { height: 6px; background: #bbb3bb; border-radius: 5px; opacity: .68; }
.mail-lines i:nth-child(2) { width: 75%; }
.mail-lines i:nth-child(3) { width: 88%; }
.mail-heart { position: absolute; right: 30px; bottom: 28px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); border-radius: 50%; font-size: 23px; transform: rotate(-6deg); }
.envelope { position: absolute; width: 260px; height: 170px; left: 32px; bottom: 22px; background: #fff6f8; border: 3px solid var(--pink); border-radius: 7px 7px 18px 18px; transform: rotate(-5deg); overflow: hidden; }
.envelope::before, .envelope::after { content: ""; position: absolute; width: 190px; height: 190px; border: 3px solid var(--pink); background: #fff9fa; transform: rotate(45deg); bottom: -111px; }
.envelope::before { left: -82px; }.envelope::after { right: -82px; }
.envelope i { position: absolute; width: 190px; height: 190px; background: #ffdce3; border: 3px solid var(--pink); transform: rotate(45deg); top: -132px; left: 32px; }
.envelope b { position: absolute; width: 48px; height: 48px; background: var(--pink); border-radius: 50%; left: 104px; top: 55px; z-index: 3; }
.envelope b::after { content: "♥"; color: white; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.scene-shadow { position: absolute; width: 285px; height: 28px; left: 40px; bottom: 0; background: #e7ddcf; border-radius: 50%; opacity: .65; }
.spark { position: absolute; font-weight: 900; z-index: 4; }.spark-one { color: var(--yellow); font-size: 25px; right: 20px; top: 28px; }.spark-two { color: var(--mint); font-size: 16px; left: 12px; top: 75px; }.spark-three { color: var(--lavender); font-size: 20px; right: 2px; bottom: 100px; }

.section { max-width: var(--max); margin: 0 auto; padding: 88px 28px; }
.section-heading h2, .delete-section h2, .contact-section h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); line-height: 1.45; font-weight: 900; letter-spacing: .03em; }
.section-heading > p:last-child { color: var(--muted); margin: 12px 0 0; }.centered { text-align: center; }
.quick-section { padding-top: 55px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.quick-card { min-height: 128px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; padding: 22px; display: flex; align-items: center; gap: 16px; box-shadow: 0 6px 0 rgba(222,213,199,.55); transition: transform .2s ease; }
.quick-card:hover { transform: translateY(-4px); }.quick-icon { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 20px; font-weight: 900; flex: 0 0 auto; }.quick-icon svg { width: 25px; height: 25px; }
.quick-card.pink .quick-icon { background: var(--pink-soft); color: var(--pink-deep); }.quick-card.mint .quick-icon { background: var(--mint-soft); color: var(--mint-deep); }.quick-card.lavender .quick-icon { background: var(--lavender-soft); color: var(--lavender-deep); }
.quick-card span:nth-child(2) { display: grid; gap: 2px; }.quick-card strong { font-size: 15px; }.quick-card small { color: var(--muted); font-size: 12px; }.quick-card .arrow { margin-left: auto; color: var(--pink); font-size: 20px; }

.guide-section { max-width: none; background: var(--paper); border-block: 1px solid var(--line); }
.guide-section > * { max-width: 860px; margin-inline: auto; }
.steps { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; counter-reset: guide; }
.steps li { text-align: center; position: relative; }.steps li:not(:last-child)::after { content: "·····"; position: absolute; right: -35px; top: 12px; color: #d8cbb6; letter-spacing: 3px; }
.steps li > span { width: 48px; height: 48px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: var(--lavender-soft); color: var(--lavender-deep); font-weight: 900; }
.steps strong { display: block; font-size: 16px; }.steps p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.caution-note { max-width: 760px; display: flex; gap: 12px; align-items: center; margin-top: 35px; padding: 14px 18px; border-radius: 14px; background: #fff8e4; color: #756129; font-size: 13px; }
.caution-note span { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--yellow); color: white; display: grid; place-items: center; font-weight: 900; }

.faq-section { max-width: 900px; }.faq-list { margin-top: 36px; border-top: 1px dashed #d6c9b5; }
.faq-list details { border-bottom: 1px dashed #d6c9b5; }.faq-list summary { min-height: 78px; padding: 20px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 15px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }.question-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); font-weight: 900; flex: 0 0 auto; }
.plus { width: 18px; height: 18px; margin-left: auto; position: relative; flex: 0 0 auto; }.plus::before, .plus::after { content: ""; position: absolute; background: var(--pink); border-radius: 3px; }.plus::before { width: 18px; height: 2px; top: 8px; }.plus::after { width: 2px; height: 18px; left: 8px; transition: transform .2s; }.faq-list details[open] .plus::after { transform: rotate(90deg); }
.answer { display: flex; gap: 16px; padding: 0 54px 25px 58px; color: var(--muted); font-size: 14px; }.answer > span { color: var(--mint-deep); font-weight: 900; }.answer p { margin: 0; }

.delete-section { display: grid; grid-template-columns: 1fr .9fr; gap: 60px; background: var(--lavender-soft); border-radius: 34px; padding: 58px; margin-bottom: 88px; }
.delete-copy > p:not(.section-kicker) { color: var(--muted); margin: 18px 0 0; }.compact-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }.compact-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }.compact-steps span { width: 28px; height: 28px; border-radius: 50%; background: white; color: var(--lavender-deep); display: grid; place-items: center; font-size: 12px; }
.delete-note { background: var(--paper); border: 1.5px solid #d4c9f2; border-radius: 22px; padding: 28px; box-shadow: 8px 9px 0 rgba(111,91,184,.12); }.delete-note > strong { font-size: 17px; }.delete-note ul { padding-left: 1.3em; margin: 15px 0; color: var(--muted); font-size: 13px; }.delete-note li { margin: 8px 0; }.delete-note li::marker { color: var(--lavender); }.delete-note a, .text-link { color: var(--lavender-deep); font-weight: 900; font-size: 13px; border-bottom: 1px solid #bcaee5; }

.contact-section { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 28px; padding: 38px 44px; margin-bottom: 100px; background: var(--mint-soft); border: 1.5px solid #bfe5e1; border-radius: 26px; }
.contact-section h2 { font-size: 27px; }.contact-section p:not(.section-kicker) { margin: 8px 0 0; color: var(--muted); font-size: 13px; max-width: 590px; }.contact-postmark { width: 72px; height: 72px; border: 2px dashed var(--mint); color: var(--mint-deep); border-radius: 50%; display: grid; place-items: center; font-size: 27px; font-weight: 900; transform: rotate(-8deg); }

.site-footer { background: var(--paper); border-top: 1px solid var(--line); }.footer-inner { min-height: 155px; flex-wrap: wrap; gap: 25px; }.site-footer p { color: #999188; font-size: 11px; }.site-footer nav { color: var(--muted); font-size: 12px; }

.privacy-hero { max-width: var(--max); margin: auto; padding: 90px 28px 78px; text-align: center; position: relative; }.privacy-hero::before { content: ""; position: absolute; width: 100px; height: 70px; border: 2px dashed var(--pink); border-radius: 50%; opacity: .25; left: 8%; top: 35px; transform: rotate(-18deg); }.privacy-hero h1 { margin: 0; font-size: clamp(37px, 5vw, 58px); line-height: 1.4; font-weight: 900; letter-spacing: .04em; }.privacy-hero > p:not(.eyebrow) { color: var(--muted); margin: 20px 0 16px; }.privacy-hero time { color: #928b8f; font-size: 12px; }
.privacy-layout { max-width: var(--max); margin: auto; padding: 0 28px 110px; display: grid; grid-template-columns: 230px 1fr; gap: 68px; align-items: start; }.toc { position: sticky; top: 30px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px 20px; box-shadow: 0 6px 0 rgba(222,213,199,.5); }.toc > p { margin: 0 0 12px; font-weight: 900; font-size: 13px; }.toc ol { list-style: none; padding: 0; margin: 0; }.toc a { padding: 7px 0; display: flex; gap: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }.toc a:hover { color: var(--pink-deep); }.toc span { color: var(--pink); font-weight: 900; }
.policy { min-width: 0; }.policy > section { position: relative; padding: 0 0 66px 58px; scroll-margin-top: 25px; }.policy > section:not(:first-child) { padding-top: 64px; border-top: 1px dashed #d7cbb7; }.policy-number { position: absolute; left: 0; top: 4px; color: var(--pink); font-size: 13px; font-weight: 900; letter-spacing: .1em; }.policy h2 { margin: 0 0 22px; font-size: 27px; line-height: 1.45; font-weight: 900; }.policy p { color: var(--muted); font-size: 14px; margin: 0 0 15px; }.data-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 25px 0; }.data-cards > div { background: var(--paper); border: 1px solid var(--line); border-radius: 17px; padding: 18px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }.data-cards span { width: 40px; height: 40px; grid-row: span 2; border-radius: 13px; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-deep); font-weight: 900; font-size: 13px; }.data-cards span svg { width: 21px; height: 21px; }.data-cards > div:nth-child(2) span { background: var(--mint-soft); color: var(--mint-deep); }.data-cards > div:nth-child(3) span { background: var(--blue-soft); color: #2e93b8; }.data-cards > div:nth-child(4) span { background: var(--lavender-soft); color: var(--lavender-deep); }.data-cards strong { font-size: 13px; }.data-cards p { margin: 1px 0 0; font-size: 11px; line-height: 1.6; }
.check-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }.check-list li { padding-left: 31px; color: var(--muted); font-size: 14px; position: relative; }.check-list li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-deep); font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.privacy-callout { margin: 25px 0; padding: 20px 22px; display: flex; gap: 15px; align-items: flex-start; border-radius: 18px; background: var(--mint-soft); border: 1px solid #bfe5e1; }.privacy-callout > span { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: white; color: var(--mint-deep); font-size: 12px; font-weight: 900; }.privacy-callout > span svg { width: 20px; height: 20px; }.privacy-callout p { margin: 0; font-size: 13px; }.privacy-callout strong { display: block; color: var(--ink); }.privacy-callout.warm { background: #fff8e4; border-color: #f2dca0; }.privacy-callout.warm > span { color: #a97f14; }
.operator-info { margin: 28px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; font-size: 12px; }.operator-info div { display: grid; grid-template-columns: 120px 1fr; }.operator-info div + div { border-top: 1px dashed var(--line); }.operator-info dt, .operator-info dd { margin: 0; padding: 12px 15px; }.operator-info dt { background: #faf4e9; font-weight: 900; }.operator-info dd { color: var(--muted); }

@media (max-width: 800px) {
  .site-header { height: auto; }.header-inner { padding: 15px 20px 0; flex-direction: column; gap: 6px; }.site-header nav { width: 100%; justify-content: center; gap: 22px; font-size: 12px; }.site-header nav a { padding: 10px 0 11px; }
  .hero { min-height: auto; padding: 55px 25px 65px; grid-template-columns: 1fr; text-align: center; }.hero-lead { margin-inline: auto; }.hero-actions { justify-content: center; }.mail-scene { justify-self: center; transform: scale(.83); margin-block: -20px -35px; }
  .quick-grid, .steps { grid-template-columns: 1fr; }.quick-card { min-height: 105px; }.steps { gap: 26px; }.steps li { display: flex; text-align: left; gap: 16px; }.steps li > span { margin: 0; flex: 0 0 auto; }.steps li:not(:last-child)::after { display: none; }
  .delete-section { margin-inline: 18px; grid-template-columns: 1fr; gap: 30px; padding: 38px 28px; }.contact-section { margin-inline: 18px; grid-template-columns: 62px 1fr; padding: 28px; }.contact-postmark { width: 60px; height: 60px; }.contact-section .button { grid-column: 1 / -1; }
  .privacy-layout { grid-template-columns: 1fr; gap: 30px; }.toc { position: relative; top: auto; }.toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }.policy > section { padding-left: 45px; }.data-cards { grid-template-columns: 1fr; }
  .footer-inner { padding-block: 35px; justify-content: center; flex-direction: column; }.site-footer nav { gap: 20px; }
}

@media (max-width: 480px) {
  .brand { font-size: 15px; }.brand-mark { transform: scale(.9); }.hero { padding-inline: 20px; }.hero h1 { font-size: 37px; }.hero-actions { display: grid; }.mail-scene { width: 370px; transform: scale(.72); margin-inline: -40px; }
  .section { padding: 65px 20px; }.quick-section { padding-top: 30px; }.answer { padding-inline: 5px 10px; }.faq-list summary { padding-inline: 0; font-size: 13px; }.delete-section, .contact-section { margin-inline: 14px; }.toc ol { grid-template-columns: 1fr; }.privacy-layout { padding-inline: 18px; }.policy > section { padding-left: 0; padding-top: 46px; }.policy > section:not(:first-child) { padding-top: 100px; }.policy-number { top: 2px; }.policy > section:not(:first-child) .policy-number { top: 60px; }.operator-info div { grid-template-columns: 1fr; }.operator-info dd { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
@media print { .site-header, .site-footer, .toc { display: none; }.privacy-layout { display: block; }.policy > section { break-inside: avoid; }.privacy-hero { padding-top: 20px; } }