@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

:root {
  --hana-red: #f12727;
  --hana-blue: #1786df;
  --hana-yellow: #ffc64e;
  --hana-paper: #fff8e8;
  --hana-ink: #3a271a;
  --hana-muted: #76685d;
  --hana-line: #dfd0b5;
}

body { background: var(--hana-paper); color: var(--hana-ink); font-family: "Zen Maru Gothic", var(--shell-font); }
::selection { background: var(--hana-yellow); }
.hanamaru-nav { border-bottom: 1px solid rgba(58, 39, 26, 0.13); background: rgba(255, 248, 232, 0.84); backdrop-filter: blur(8px); }
.hanamaru-nav .product-brand-mark { border-radius: 50%; background: var(--hana-red); }
.hanamaru-nav .product-brand strong { color: var(--hana-red); }
.hanamaru-nav .nav-cta { border-radius: 999px; }
.hanamaru-shell { width: min(1180px, calc(100% - 2 * clamp(20px, 5vw, 72px))); margin: 0 auto; }
.small-note, .section-caption { margin: 0; color: var(--hana-red); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }

.hanamaru-hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(340px, 0.85fr) minmax(480px, 1.15fr); gap: clamp(30px, 6vw, 100px); align-items: center; overflow: hidden; padding: 118px clamp(20px, 6vw, 92px) 70px; }
.hanamaru-hero::before, .hanamaru-hero::after { position: absolute; border: 4px solid var(--hana-red); border-radius: 48% 52% 46% 54%; content: ""; opacity: 0.18; }
.hanamaru-hero::before { top: 15%; left: -90px; width: 180px; height: 180px; }
.hanamaru-hero::after { right: -70px; bottom: 7%; width: 150px; height: 150px; border-color: var(--hana-blue); }
.hanamaru-hero-copy { position: relative; z-index: 2; max-width: 610px; }
.hanamaru-hero h1 { margin: 23px 0 0; font-size: clamp(2.7rem, 5vw, 5.6rem); font-weight: 700; letter-spacing: -0.075em; line-height: 1.12; }
.hanamaru-hero h1 span { position: relative; display: inline-block; color: var(--hana-red); }
.hanamaru-hero h1 span::after { position: absolute; right: 0; bottom: -12px; left: 3%; height: 8px; border-radius: 50%; background: var(--hana-yellow); content: ""; transform: rotate(-1deg); }
.hanamaru-lead { max-width: 590px; margin: 42px 0 0; color: var(--hana-muted); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 2.1; }
.hanamaru-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 36px; margin-top: 32px; padding: 0 22px; border: 2px solid var(--hana-ink); border-radius: 999px; background: var(--hana-ink); color: #fff; font-size: 0.83rem; font-weight: 700; box-shadow: 5px 5px 0 var(--hana-yellow); transition: transform 180ms ease, box-shadow 180ms ease; }
.hanamaru-button:hover { box-shadow: 2px 2px 0 var(--hana-yellow); transform: translate(3px, 3px); }

.hanamaru-hero-art { position: relative; min-height: min(78vh, 760px); }
.hanamaru-hero-art::before { position: absolute; top: 2%; right: 5%; bottom: 5%; left: 8%; border-radius: 47% 53% 43% 57% / 55% 43% 57% 45%; background: var(--hana-yellow); content: ""; transform: rotate(-3deg); }
.hanamaru-phone { position: absolute; z-index: 3; top: 4%; left: 29%; overflow: hidden; width: min(47%, 330px); margin: 0; padding: 8px; border: 2px solid var(--hana-ink); border-radius: 37px; background: #f5f5f5; box-shadow: 10px 13px 0 rgba(58, 39, 26, 0.15); transform: rotate(2deg); }
.hanamaru-phone img { border-radius: 28px; }
.hanamaru-icon { position: absolute; z-index: 5; right: 5%; bottom: 5%; width: min(25%, 165px); border: 7px solid var(--hana-paper); border-radius: 25%; box-shadow: 6px 7px 0 rgba(58, 39, 26, 0.18); transform: rotate(7deg); }
.doodle { position: absolute; z-index: 6; color: var(--hana-red); font-weight: 700; transform: rotate(-8deg); }
.doodle-one { top: 18%; left: 1%; padding: 12px 15px; border: 3px solid currentColor; border-radius: 50%; }
.doodle-two { right: 7%; top: 16%; color: var(--hana-blue); font-size: 3.8rem; }

.hanamaru-about, .hanamaru-routine, .hanamaru-history, .hanamaru-download { padding: clamp(90px, 11vw, 160px) 0; }
.hanamaru-about { border-top: 1px solid var(--hana-line); border-bottom: 1px solid var(--hana-line); background: #fffdf7; }
.about-layout { display: grid; grid-template-columns: 0.35fr 1fr; gap: clamp(40px, 8vw, 120px); }
.about-layout h2, .routine-heading h2, .history-copy h2, .hanamaru-download h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3.7rem); letter-spacing: -0.05em; line-height: 1.35; }
.about-layout > div > p { max-width: 740px; margin: 34px 0 0; color: var(--hana-muted); line-height: 2.2; }

.routine-heading { display: grid; grid-template-columns: 0.35fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.routine-steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 52px); margin-top: clamp(65px, 8vw, 105px); }
.routine-step { display: grid; grid-template-columns: 1fr minmax(170px, 0.72fr); gap: clamp(22px, 3vw, 44px); align-items: center; min-height: 560px; overflow: hidden; padding: clamp(26px, 4vw, 52px); border: 2px solid var(--hana-ink); border-radius: 34px 48px 32px 45px; background: #fff; box-shadow: 8px 9px 0 var(--hana-line); }
.routine-step figure { align-self: end; margin: 0 0 -120px; padding: 6px; border: 2px solid var(--hana-ink); border-radius: 28px; background: #eee; transform: rotate(2deg); }
.routine-step figure img { border-radius: 21px; }
.routine-step span { color: var(--hana-red); font-size: 0.78rem; font-weight: 700; }
.routine-step h3 { margin: 12px 0 0; font-size: clamp(1.35rem, 2vw, 2.1rem); line-height: 1.45; }
.routine-step p { margin: 22px 0 0; color: var(--hana-muted); line-height: 1.9; }
.step-stamp { grid-template-columns: minmax(170px, 0.72fr) 1fr; background: #eaf6ff; transform: translateY(52px); }
.step-stamp figure { transform: rotate(-2deg); }
.step-stamp span { color: var(--hana-blue); }

.hanamaru-history { margin-top: 45px; background: var(--hana-blue); color: #fff; }
.history-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(55px, 10vw, 145px); align-items: center; }
.history-copy .section-caption { color: #cfeeff; }
.history-copy > p:not(.section-caption) { margin: 30px 0 0; color: #e1f3ff; line-height: 2; }
.history-copy ul { margin: 34px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); list-style: none; }
.history-copy li { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); font-size: 0.88rem; }
.history-screens { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; }
.history-screens figure { margin: 0; }
.history-screens figure:nth-child(2) { margin-top: 65px; }
.history-screens img { padding: 7px; border: 2px solid #0e5389; border-radius: 31px; background: #fff; box-shadow: 9px 11px 0 rgba(5, 61, 104, 0.35); }
.history-screens figcaption { margin-top: 14px; font-size: 0.8rem; text-align: center; }

.hanamaru-info { padding: 58px 0; border-bottom: 1px solid var(--hana-line); background: #fffdf7; }
.info-inner { display: grid; grid-template-columns: 0.35fr 1fr; gap: clamp(40px, 8vw, 120px); }
.info-inner > p { margin: 0; color: var(--hana-red); font-size: 0.78rem; font-weight: 700; }
.info-inner h2 { margin: 0; font-size: clamp(1.2rem, 1.9vw, 1.95rem); line-height: 1.6; }
.info-inner a { display: inline-block; margin-top: 24px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 0.82rem; font-weight: 700; }

.download-layout { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(32px, 6vw, 88px); align-items: center; }
.download-layout > img { width: clamp(120px, 14vw, 190px); border: 7px solid #fff; border-radius: 25%; box-shadow: 7px 8px 0 var(--hana-line); transform: rotate(-3deg); }
.hanamaru-download h2 { margin-top: 11px; font-size: clamp(1.8rem, 3vw, 3.2rem); }
.hanamaru-download .hanamaru-button { margin: 0; }
.hanamaru-footer { background: var(--hana-ink); font-family: "Zen Maru Gothic", var(--shell-font); }

@media (max-width: 960px) {
  .hanamaru-hero { grid-template-columns: 0.82fr 1.18fr; }
  .hanamaru-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); }
  .routine-step { grid-template-columns: 1fr; }
  .routine-step figure { width: min(70%, 260px); justify-self: center; }
  .step-stamp figure { order: 2; }
  .download-layout { grid-template-columns: auto 1fr; }
  .hanamaru-download .hanamaru-button { grid-column: 2; justify-self: start; }
}

@media (max-width: 720px) {
  .hanamaru-hero { display: block; min-height: auto; padding-top: 112px; }
  .hanamaru-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .hanamaru-hero-art { min-height: 590px; margin-top: 50px; }
  .hanamaru-phone { left: 27%; width: min(54%, 310px); }
  .about-layout, .routine-heading, .routine-steps, .history-layout, .info-inner, .download-layout { grid-template-columns: 1fr; }
  .routine-steps { gap: 38px; }
  .step-stamp { transform: none; }
  .history-screens { margin-top: 10px; }
  .hanamaru-download .hanamaru-button { grid-column: 1; }
  .download-layout > img { width: 120px; }
}

@media (max-width: 460px) {
  .hanamaru-hero-art { min-height: 510px; }
  .hanamaru-phone { left: 22%; width: 62%; }
  .doodle-one { top: 11%; }
  .history-screens { gap: 12px; }
  .history-screens figure:nth-child(2) { margin-top: 35px; }
}