:root {
  --bg: #F8F3E7;
  --card: #FCFAF4;
  --row: #EFE8D6;
  --ink: #3A2119;
  --green: #27432B;
  --brown: #5D372C;
  --blond: #F1E3BC;
  --orange: #EB672D;
  --sky: #CFE6F0;
  --pink: #EDCACD;

  --f-jp: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --f-en: "Josefin Sans", "游ゴシック", "Yu Gothic", YuGothic, sans-serif;
  --line: 1px solid var(--ink);

  --washi: url("washi.svg"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .46  0 0 0 0 .26  0 0 0 .2 -.06'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .34  0 0 0 0 .22  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 12px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background-color: #ECE6D4;
  font-family: var(--f-jp); font-size: 15px; line-height: 1.9; font-weight: 500;
  overflow-x: hidden; word-break: auto-phrase; line-break: strict; text-wrap: pretty;
}
body, .app {
  background-image: var(--washi);
  background-size: 720px 720px, 640px 640px, 220px 220px;
  background-blend-mode: normal, multiply, multiply;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1.1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--f-en); font-weight: 600; letter-spacing: .02em; }

.app { position: relative; max-width: 430px; margin: 0 auto; background-color: var(--bg); min-height: 100vh; overflow: hidden; }
@media (min-width: 500px) { .app { border-left: var(--line); border-right: var(--line); } }

/* header / menu */
.head { display: none; }
.head__brand { display: flex; align-items: center; gap: 10px; }
.head__ja { font-weight: 700; font-size: 1.35rem; color: var(--green); letter-spacing: .02em; }
.tag-pill { font-family: var(--f-en); font-weight: 600; font-size: .68rem; letter-spacing: .12em; border: var(--line); border-radius: 6px; padding: .355em .7em .145em; line-height: 1.5; }

.menu li { border-bottom: 1px dashed var(--ink); }
.menu i { position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: var(--line); border-radius: 50%; background: var(--blond) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2.5v10M3.5 8.5l4.5 4.5 4.5-4.5' fill='none' stroke='%233A2119' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/16px no-repeat; }

/* hero */
.hero { position: relative; padding: 44px 16px 0; }
.stamp { position: absolute; z-index: 3; right: 12px; top: 22px; width: 72px; height: 72px; }
.stamp__bg { fill: var(--blond); stroke: var(--ink); stroke-width: 1; }
.stamp__hole { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.stamp text { font-family: var(--f-en); font-weight: 600; font-size: 9px; fill: var(--ink); }
.stamp__spin { transform-origin: 50px 50px; }

.stage { position: relative; padding-top: 34px; }
.hero__logo { display: block; width: 88%; height: auto; margin: 0 auto; }
.vbox { margin: 0; padding: 0 .1em 0 .3em; font-weight: 700; letter-spacing: .08em; line-height: 1.5; color: var(--green); background: linear-gradient(transparent 52%, var(--blond) 52% 92%, transparent 92%); }
.stage .vbox { width: max-content; max-width: 100%; margin: 0 auto; font-size: 1.7rem; text-align: center; }
.stage .vbox--1 { margin-top: 26px; }
.stage .vbox--2 { margin-top: 4px; }
.hero__lead { text-align: center; font-weight: 700; font-size: 1.02rem; line-height: 2; margin: 12px 0 28px; }

/* card */
.card { position: relative; display: block; background: var(--card); border: var(--line); border-radius: 22px; box-shadow: 5px 5px 0 var(--green); padding: 28px 20px 22px; margin: 0 4px; }
.card__tab {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--bg); border: var(--line); border-radius: 999px; padding: .225em 1em .015em;
  font-family: var(--f-en); font-weight: 600; font-size: .85rem; letter-spacing: .1em; line-height: 1.7;
}
.card--event { background: var(--blond); color: var(--green); padding: 34px 18px 22px; text-align: center; }
.card--event .card__tab { color: var(--ink); }
.event div { padding: 6px 0 14px; }
.event div + div { border-top: 1px dashed rgba(39, 67, 43, .45); padding: 16px 0 0; }
.event dt { display: block; text-align: center; padding-left: .28em; font-size: .75rem; font-weight: 700; letter-spacing: .28em; color: var(--brown); margin-bottom: 4px; }
.event dd { font-weight: 700; font-size: 1.02rem; line-height: 1.7; }
.event .num { font-size: 2.7rem; line-height: 1.15; letter-spacing: .01em; color: var(--green); }
.event small { display: inline-block; width: 22px; height: 4px; margin: 0 .4rem; background: currentColor; font-size: 0; vertical-align: 13px; opacity: .85; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--orange); border: 1px solid var(--ink); }
.circle-arrow { width: 36px; height: 36px; border: var(--line); border-radius: 50%; background: var(--blond); display: grid; place-items: center; flex: none; }
.circle-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* spines */
.spines { height: 72px; overflow: hidden; margin-top: 8px; }
.spines__track { max-width: none; width: 200%; height: 100%; transform: translate3d(var(--shift, 0px), 0, 0); will-change: transform; }
.t-pink { fill: var(--pink); } .t-green { fill: var(--green); } .t-orange { fill: var(--orange); } .t-brown { fill: var(--brown); }

/* section */
.sect { padding: 36px 16px 20px; }
.sect__head { position: relative; margin: 0 -16px 22px; height: 30px; display: flex; align-items: center; }
.sect__head::before { content: ""; position: absolute; left: 0; right: 84px; top: 50%; border-top: 1px dashed var(--ink); }
.pill { position: relative; margin-left: 16px; display: inline-flex; align-items: center; gap: .5em; background: var(--bg); border: var(--line); border-radius: 999px; padding: .255em 1em .045em .85em; font-family: var(--f-en); font-weight: 600; font-size: .82rem; letter-spacing: .1em; line-height: 1.7; }
.sect__ill { position: absolute; right: 16px; top: 50%; width: 56px; height: 56px; margin-top: -28px; fill: var(--bg); stroke: var(--ink); stroke-width: 1.3px; stroke-linejoin: round; stroke-linecap: round; }
.sect__ill * { vector-effect: non-scaling-stroke; }
.sect__title { text-align: center; font-weight: 700; font-size: 1.7rem; line-height: 1.45; letter-spacing: .12em; margin: 26px 0 20px; text-wrap: balance; }

/* rule ticket / steps */
.ticket { position: relative; background: var(--blond); border: var(--line); border-radius: 18px; text-align: center; padding: 18px 12px 8px; margin: 0 4px 68px; box-shadow: 5px 5px 0 var(--green); }
.ticket__label { display: inline-block; font-family: var(--f-en); font-weight: 600; font-size: .78rem; letter-spacing: .22em; border: var(--line); border-radius: 999px; padding: .21em .9em 0; background: var(--card); }
.ticket p { font-weight: 700; font-size: 1.45rem; line-height: 1.55; margin: 10px 0 8px; }

.steps { display: grid; gap: 68px; }
.card--step { padding-top: 32px; }
.card--step h3 { text-wrap: balance; font-weight: 700; font-size: 1.2rem; line-height: 1.5; margin: 0 0 10px; letter-spacing: .04em; }
.card--step p { margin: 0; font-size: .93rem; }
.card--step strong { background: linear-gradient(transparent 64%, var(--blond) 64%); }
.card--step:not(.card--last)::after {
  content: ""; position: absolute; left: 50%; bottom: -35px; height: 21px; width: 0; margin-left: -1px;
  border-left: 2px dashed var(--ink);
}
.card--step:not(.card--last)::before {
  content: ""; position: absolute; left: 50%; bottom: -45px; margin-left: -7px; z-index: 1;
  border-top: 10px solid var(--green); border-left: 7px solid transparent; border-right: 7px solid transparent;
}

/* checks */
.card--rules { margin-bottom: 34px; padding-top: 30px; }
.card--ng { padding-top: 20px; padding-bottom: 20px; }
.checks { display: grid; gap: 8px; }
.checks li { position: relative; background: var(--row); border-radius: 8px; padding: 10px 12px 10px 40px; font-size: .9rem; line-height: 1.65; font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M3 9.5l4 4 8-9' fill='none' stroke='%233A2119' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }
.checks--ng li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4 4l10 10M14 4L4 14' fill='none' stroke='%233A2119' stroke-width='2.2' stroke-linecap='round'/></svg>"); }
.prose { margin: 0 4px 34px; text-align: center; }
.prose p { font-size: .95rem; text-wrap: balance; }
.close { text-align: center; font-weight: 700; font-size: 1.1rem; line-height: 1.8; margin: 0 8px 10px; background: var(--blond); border: var(--line); border-radius: 18px; padding: 16px 14px; box-shadow: 5px 5px 0 var(--green); }

/* Q&A */
.qa { display: grid; gap: 14px; }
.card--qa { padding: 0; margin: 0 4px; box-shadow: 4px 4px 0 var(--green); }
.card--qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 52px 14px 14px; font-weight: 700; font-size: .95rem; line-height: 1.55; position: relative; }
.card--qa summary::-webkit-details-marker { display: none; }
.card--qa summary::after, .card--qa summary::before { content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 2px; background: var(--ink); margin-top: -1px; transition: transform .2s; }
.card--qa summary::after { transform: rotate(90deg); }
.card--qa[open] summary::after { transform: rotate(0deg); }
.qa__q, .qa__a { flex: none; width: 28px; height: 28px; border: var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-jp); font-weight: 700; font-size: .85rem; line-height: 1; padding: 0; text-align: center; }
.qa__q { background: var(--blond); }
.qa__a { background: var(--pink); }
.card--qa p { margin: 0; padding: 14px 14px 16px; border-top: 1px dashed var(--ink); display: flex; gap: 12px; font-size: .92rem; font-weight: 500; line-height: 1.75; }
.card--qa p .qa__a { margin-top: 2px; }

/* info */
.card--info { padding: 8px 18px; margin-bottom: 30px; }
.info div { padding: 14px 0; }
.info div + div { border-top: 1px dashed var(--ink); }
.info dt { font-weight: 700; font-size: .75rem; letter-spacing: .2em; color: var(--green); margin-bottom: 2px; }
.info dd { font-weight: 700; font-size: .98rem; line-height: 1.6; }
.btn-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: var(--line); border-radius: 999px; background: var(--card); padding: 10px 10px 10px 26px; font-weight: 700; margin: 0 4px 24px; }

/* shelf / footer */
.shelf { margin-top: 36px; line-height: 0; }
.shelf svg { width: 100%; height: auto; display: block; }
.shelf .book rect { stroke: var(--ink); stroke-width: 1; }
.b-green { fill: var(--green); } .b-orange { fill: var(--orange); } .b-sky { fill: var(--sky); } .b-pink { fill: var(--pink); } .b-brown { fill: var(--brown); } .b-white { fill: var(--card); }
.b-line { stroke: rgba(255, 255, 255, .55); stroke-width: 1; fill: none; }
.foot { background: var(--green); color: #fff; padding: 40px 20px calc(36px + env(safe-area-inset-bottom)); text-align: center; }
.foot__copy { font-weight: 700; font-size: 1.4rem; line-height: 1.6; color: var(--blond); margin: 0 0 14px; letter-spacing: .08em; }
.foot__small { font-family: var(--f-en); font-weight: 600; font-size: .78rem; letter-spacing: .16em; margin: 0 0 22px; }
.foot__top { display: inline-block; border: 1px solid #fff; border-radius: 999px; padding: .5em 1.6em; font-weight: 700; font-size: .85rem; }

/* side panels (PC) */
.side-left, .side-right { display: none; }
.pcs { display: none; line-height: 0; }
.pcs svg { width: 100%; height: auto; display: block; overflow: visible; }
.sh-frame { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.sh-back { fill: var(--row); }
.sh-board { fill: var(--green); stroke: var(--ink); stroke-width: 1; }
.sh-card { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.pcs .it rect { stroke: var(--ink); stroke-width: 1; }
.bg-sky { fill: var(--sky); } .bg-white { fill: var(--card); } .bg-orange { fill: var(--orange); }
.bg-sky, .bg-white, .bg-orange { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.bg-line { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1200px) {
  :root { --side: calc((100vw - 430px) / 2); }
  html { scroll-padding-top: 24px; }
  body { background-color: var(--bg); }
  .app { border-left: var(--line); border-right: var(--line); }

  .side-left { position: fixed; z-index: 5; top: 0; left: 0; width: var(--side); height: 100vh; display: block; }
  .side-left .vbox { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; font-size: 1.8rem; white-space: nowrap; }
  .side-left .vbox--a { top: calc(50% - 150px); }
  .side-left .vbox--b { top: calc(50% - 98px); }
  .stage .vbox { display: none; }

  .head { position: fixed; z-index: 30; top: 0; right: 0; width: var(--side); display: flex; align-items: center; padding: 36px 40px 0; }
  .head__ja { font-size: 2.1rem; }
    .menu, .menu[hidden] { display: block; position: fixed; z-index: 20; top: 110px; right: 0; width: var(--side); padding: 8px 40px; }
  .menu a { display: grid; grid-template-columns: 11.5em 1fr; align-items: baseline; position: relative; padding: 15px 44px 15px 0; font-weight: 700; font-size: 1rem; line-height: 1.4; }
  .menu small { min-width: 0; font-family: var(--f-en); font-weight: 600; font-size: .68rem; letter-spacing: .14em; color: var(--green); }
  .menu i { right: 0; }
  .menu::after { content: "企画：花束ラボ"; display: block; margin-top: 26px; font-weight: 700; font-size: .8rem; letter-spacing: .12em; }

  .spines { margin-top: 24px; }
}
@media (min-width: 1200px) and (min-height: 800px) {
  .side-right { display: block; position: fixed; z-index: 5; top: 0; right: 0; width: var(--side); height: 100vh; pointer-events: none; }
  .pcs { display: block; position: absolute; bottom: 40px; }
  .pcs--l { left: 50%; transform: translateX(-50%); width: min(360px, calc(var(--side) - 80px)); }
  .pcs--r { left: 40px; width: min(360px, calc(var(--side) - 80px)); }
  .side-left .vbox--a { top: 70px; }
  .side-left .vbox--b { top: 122px; }
}

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .vbox--1 { animation-delay: .25s; } .vbox--2 { animation-delay: .38s; } .hero__lead { animation-delay: .5s; } .card--event { animation-delay: .62s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .stamp__spin { animation: spin 22s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  html.js .rv.is-in { opacity: 1; transform: none; }

  html.js .shelf .book { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
  html.js .shelf.is-in .book { transform: none; transition: transform .7s cubic-bezier(.2, .9, .25, 1.25); transition-delay: calc(var(--i, 0) * 70ms); }

  html.js .card--step:not(.card--last)::after { transform-origin: top; transform: scaleY(0); }
  html.js .card--step:not(.card--last)::before { opacity: 0; }
  html.js .card--step.is-in:not(.card--last)::after { transform: none; transition: transform .5s ease .6s; }
  html.js .card--step.is-in:not(.card--last)::before { opacity: 1; transition: opacity .3s ease 1s; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  html.js .pcs .it { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
  html.js .pcs.is-in .it { transform: none; transition: transform .6s cubic-bezier(.2, .9, .25, 1.2); transition-delay: calc(var(--i, 0) * 45ms); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .spines__track { transform: none !important; } }