:root {
  --bg: #FBF8F1;
  --fg: #2B2321;
  --muted: #5E5450;
  --line: #E4DDD3;
  --surface: #F4EFE6;
  --link: #B02A20;
  --band: #2B2321;
  --on-band: #FBF8F1;
  --on-band-muted: #CFC6BF;
  --band-line: #51463F;
  --ear: #D63A2F;
  --site-paper: #FFFDF8;
  --site-ink: #26221F;
  --site-sub: #5F5A55;
  --site-line: #DCD6CE;
  --site-photo: #EFEAE3;
  --site-off: #E6E2DD;
  --site-off-ink: #5F5A55;
  --umedo: #3D4A5C;
  --kotori: #7D4A4E;
  --city: #4A6340;
  --city-link: #2F5280;
  --gold: #D4A12A;
  --hit: #1A8FA8;
  --hit-text: #0B6B80;
  --sans: system-ui, sans-serif;
  --serif: serif;

  --s05: 0.25rem;
  --s10: 0.5rem;
  --s20: 1rem;
  --s30: 1.5rem;
  --s50: 2.5rem;
  --s80: 4rem;
  --flow: 2rem;
  --group: var(--s50);

  --t-base: 1rem;
  --t-small: 0.875rem;
  --t-sub: 1.125rem;
  --t-title: 1.375rem;
  --t-large: 1.5rem;
  --t-section: clamp(var(--t-title), 1rem + 1.2vw, 1.75rem);
  --t-name: clamp(2.5rem, 9vw, 4rem);
  --lh-text: 1.7;
  --lh-tight: 1.4;

  --r-small: 0.625rem;
  --r-medium: 1rem;

  --measure: 40ic;
  --gutter: clamp(var(--s20), 5vw, var(--s80));
  --shot: 15rem;
  --ear-w: min(11vw, 3.5rem);
  --dot: 0.4em;
  --edge: 2.75rem;
  --rule: 1px;
  --mark: 2px;
  --torn: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--s10) 100%;
  color-scheme: light dark;
}

html:lang(ja) {
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181312;
    --fg: #F3EEE6;
    --muted: #B9AFA9;
    --line: #332A28;
    --surface: #211A19;
    --link: #F07A6E;
    --ear: #E5574B;
    --hit: #7AD2E0;
    --hit-text: #7AD2E0;
  }
}
:root:lang(en) { --measure: 36rem; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--lh-text);
  word-break: auto-phrase;
}
a { color: var(--fg); text-decoration-color: var(--muted); text-underline-offset: 0.25em; }
a:hover { text-decoration: none; }
a:focus-visible { outline: var(--mark) solid var(--link); outline-offset: var(--mark); }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); }
img { max-inline-size: 100%; }

main {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  max-inline-size: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s30) var(--gutter) var(--s50);
}
main > * { margin-block: 0; }

.head { display: flex; justify-content: space-between; align-items: center; gap: var(--s20); margin-block-end: var(--s50); }
.name { display: flex; align-items: center; gap: var(--s10); margin: 0; font-weight: 700; line-height: var(--lh-tight); }
.name a { display: inherit; align-items: inherit; gap: inherit; color: inherit; text-decoration: none; }
.name img { flex: none; inline-size: var(--s30); block-size: var(--s30); border-radius: var(--s05); }
.lang { font-size: var(--t-small); line-height: var(--lh-tight); }
.title { font-size: var(--t-large); }

.doc > :not(.foot) { max-inline-size: var(--measure); }
.doc > p { margin-block-start: var(--flow); }
.doc h2 { margin-block-start: var(--s50); padding-block-start: var(--s50); border-block-start: var(--rule) solid var(--line); font-size: var(--t-sub); }
.doc h2 + p { margin-block-start: var(--flow); }
.doc > .meta { margin-block-start: var(--s50); color: var(--muted); font-size: var(--t-small); }
.doc ul, .doc ol { margin: var(--flow) 0 0; padding-inline-start: var(--s30); }
.doc dl { margin: 0; }
.doc dt { margin-block-start: var(--group); font-weight: 700; line-height: var(--lh-tight); }
.doc dd { margin: var(--s10) 0 0; }
.doc .fields { margin-block-start: var(--group); }
.doc .fields dt { margin-block-start: var(--s30); color: var(--muted); font-size: var(--t-small); font-weight: 400; }
.doc .fields dd { margin-block-start: var(--s05); }
.doc p, .doc dd { word-break: normal; }
.doc code { overflow-wrap: anywhere; }
.doc .license { margin-block-start: var(--flow); font-size: var(--t-small); overflow-wrap: anywhere; }
.doc .license p { margin: var(--s10) 0 0; text-wrap: wrap; }
.doc p, .doc dd, .doc li { text-wrap: pretty; }
.doc .title, .doc h2, .doc dt { text-wrap: balance; }

.foot {
  display: flex; flex-wrap: wrap; gap: var(--s10) var(--s20);
  margin-block-start: auto; padding-block-start: var(--s80);
  color: var(--muted); font-size: var(--t-small); line-height: var(--lh-tight);
}
.foot a { color: var(--muted); text-decoration-color: currentColor; white-space: nowrap; }
.foot .copy { flex-basis: 100%; }

:where(.lp p, .lp dd, .lp li, .lp td) { word-break: normal; line-break: strict; text-wrap: pretty; }
.lp h2, .lp h3, .tagline, .lead, .last p, .facts dt, .faq summary { text-wrap: balance; }
.seg { display: inline-block; }

.hero { position: relative; background: var(--band); color: var(--on-band); }
.hero-in {
  max-inline-size: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s80) var(--gutter) var(--s30);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s50) var(--s80);
}
.hero h1 { font-size: var(--t-name); min-block-size: calc(var(--lh-tight) * 1em); min-block-size: 1lh; }
.hero-name { display: block; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.hero-text { flex: 999 1 min(100%, 30rem); min-inline-size: 0; }
.hero-face {
  --tilt: -6deg;
  flex: none; margin-inline: auto; inline-size: clamp(10rem, 24vw, 18.75rem); block-size: auto;
  border-radius: 22%; box-shadow: 0 0 0 var(--mark) var(--on-band-muted);
  transform: rotate(var(--tilt)); transform-origin: 50% 100%;
}
.ear { position: absolute; inset-block-start: 0; inline-size: var(--ear-w); block-size: var(--s80); fill: var(--ear); }
.ear.l { inset-inline-start: 0; }
.ear.r { inset-inline-end: 0; transform: scaleX(-1); }
.edge { display: block; inline-size: 100%; block-size: var(--edge); margin-block-start: -1px; fill: var(--band); }
.hero .lang { position: absolute; inset-block-start: var(--s20); inset-inline-end: calc(var(--ear-w) + var(--s10)); color: var(--on-band-muted); text-decoration-color: currentColor; }
.hero .lang:focus-visible { outline-color: var(--on-band); }
.tagline { margin: var(--s20) 0 0; font-size: var(--t-title); font-weight: 700; line-height: var(--lh-tight); }
.lead { margin: var(--s10) 0 0; max-inline-size: var(--measure); color: var(--on-band-muted); }
.store {
  display: inline-block; margin-block-start: var(--flow); padding: var(--s10) var(--s30);
  border-radius: 999px; background: var(--on-band); color: var(--band);
  font-weight: 700; text-decoration: none;
}
.store:hover { text-decoration: underline currentColor; }
.store:focus-visible { outline: var(--mark) solid var(--on-band); }
.lp main, .lp .hero-in { max-inline-size: calc(var(--measure) + var(--s50) + var(--shot) + 2 * var(--gutter)); }
.lp main { padding-block-start: var(--s30); }

.sec + .sec { margin-block-start: var(--s80); }
.lp .sec { padding-block: var(--s80); }
.lp .sec + .sec { margin-block-start: 0; }
.lp .sec:first-of-type { padding-block-start: var(--s30); }
.sec h2 { font-size: var(--t-section); }
.sec > p, .sec > ul, .sec > ol:not(.steps), .sec > dl:not(.facts), .sec > table { max-inline-size: var(--measure); }
.sec > p { margin: var(--flow) 0 0; }
@media (min-width: 64rem) {
  .lp main .sec:not(.last) { display: grid; grid-template-columns: var(--shot) minmax(0, var(--measure)); column-gap: var(--s50); align-items: start; }
  .lp main .sec:not(.last) > h2 { grid-column: 1; grid-row: 1 / span 20; }
  .lp main .sec:not(.last) > :not(h2) { grid-column: 2; }
  .lp main .sec:not(.last) > h2 + * { margin-block-start: 0; }
  .lp main .sec > .pair:has(> .targets) { display: contents; }
  .lp main .sec > .pair > :first-child { grid-column: 2; }
  .lp main .sec > .pair > .targets { grid-column: 2; grid-row: auto; margin-block-start: var(--group); grid-template-columns: repeat(2, 1fr); }
  .lp main .sec > .pair > .targets > .target:last-child { grid-column: 1 / -1; }
  .lp main .sec > .steps { grid-template-columns: repeat(2, 1fr); }
}
.sec .note { color: var(--muted); font-size: var(--t-small); }
.sec > .more { margin-block-start: var(--group); }

.pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--group) var(--s50); margin-block-start: var(--flow); }
.pair > :first-child { flex: 9999 1 min(100%, 20rem); max-inline-size: var(--measure); }
.pair > figure { flex: 1 1 var(--shot); max-inline-size: var(--shot); margin: 0; }
.pair > .targets { flex-basis: 100%; max-inline-size: none; }
.shot { display: block; inline-size: 100%; block-size: auto; border: var(--rule) solid var(--line); border-radius: var(--r-medium); }

.targets { display: grid; grid-template-columns: minmax(0, 20rem); gap: var(--s30); }
.pair:has(> .targets) { container-type: inline-size; }
@container (min-width: 50rem) { .targets { grid-template-columns: repeat(3, 1fr); } }
.target { display: flex; flex-direction: column; }
.target .site { flex: 1; }
.targets p { margin: 0; }
.site {
  padding: 0 var(--s20) var(--s30); border: var(--rule) solid var(--site-line); border-block-end: 0;
  background: var(--site-paper); color: var(--site-ink); font-size: var(--t-small); line-height: var(--lh-tight);
  -webkit-mask: var(--torn); mask: var(--torn);
}
.site .logo { margin-inline: calc(var(--s20) * -1); padding: var(--s10) var(--s20); font-weight: 700; }
.site small { color: var(--site-sub); font-size: 0.75rem; }
.shop .logo { border-block-end: var(--rule) solid var(--site-line); }
.umedo .logo { color: var(--umedo); font-family: var(--serif); letter-spacing: 0.08em; }
.kotori .logo { color: var(--kotori); text-align: center; letter-spacing: 0.15em; }
.item { display: flex; gap: var(--s20); align-items: flex-start; margin-block-start: var(--s20); }
.thumb { flex: none; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--s05); }
.thumb .bg { fill: var(--site-photo); }
.thumb .body { fill: var(--site-paper); }
.thumb .line { fill: none; }
.umedo .thumb .ink { fill: var(--umedo); }
.kotori .thumb .ink { fill: var(--kotori); }
.umedo .thumb .line { stroke: var(--umedo); }
.kotori .thumb .line { stroke: var(--kotori); }
.item p + p { margin-block-start: var(--s10); }
.item .name { font-weight: 700; }
.item .price { font-size: var(--t-base); }
.buy { display: inline-block; padding: var(--s05) var(--s20); border-radius: var(--s05); color: var(--site-paper); font-weight: 700; }
.umedo .buy { background: var(--umedo); }
.kotori .buy { background: var(--kotori); }
.buy.off { background: var(--site-off); color: var(--site-off-ink); }
.city .logo { background: var(--city); color: var(--site-paper); }
.city .head { margin-block: var(--s10); padding-block-end: var(--s05); border-block-end: var(--mark) solid var(--city); font-weight: 700; }
.news { margin: 0; padding: var(--s05) var(--s10); list-style: none; }
.news li { display: flex; gap: var(--s10); }
.news li + li { margin-block-start: var(--s05); border-block-start: var(--rule) dotted var(--site-line); padding-block-start: var(--s05); }
.news .date { flex: none; min-inline-size: 3.25em; color: var(--site-sub); }
.news .link { color: var(--city-link); text-decoration: underline; text-underline-offset: 0.2em; }
.target .site { position: relative; overflow: hidden; }
.banner {
  position: absolute; inset-inline: var(--s10); inset-block-start: var(--s10); display: none; gap: var(--s10); align-items: center;
  padding: var(--s10) var(--s20); border-radius: var(--r-medium); background: var(--site-paper); box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  transform: translateY(calc(-100% - var(--s20))); visibility: hidden;
}
.banner img { flex: none; inline-size: 1.75rem; block-size: 1.75rem; }
.banner b { display: block; color: var(--site-sub); font-size: 0.75rem; font-weight: 400; }
.targets .watch { display: inline-block; padding: var(--s05) var(--s10); border: var(--mark) solid var(--ear); border-radius: var(--s05); }
.targets .news.watch { display: block; }
.when { display: flex; gap: var(--s10); align-items: center; margin-block-start: var(--s05); font-size: var(--t-small); line-height: var(--lh-tight); }
.when::before { content: ""; flex: none; inline-size: var(--dot); block-size: var(--dot); border-radius: 50%; background: var(--fg); }

.wish { margin: 0; padding: 0; list-style: none; }
.pair > :first-child > p + .wish { margin-block-start: var(--flow); }
.wish li { position: relative; padding-inline-start: var(--s30); }
.wish li + li { margin-block-start: var(--s10); }
.wish li::before {
  content: ""; position: absolute; inset-inline-start: var(--dot); inset-block-start: calc((var(--lh-text) * 1em - var(--dot)) / 2);
  inline-size: var(--dot); block-size: var(--dot); border-radius: 50%; background: var(--fg);
}

.sec:has(> .steps) { container-type: inline-size; }
.steps { display: grid; gap: var(--group) var(--s30); margin: var(--flow) 0 0; padding: 0; list-style: none; counter-reset: step; }
@container (min-width: 30rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s10); counter-increment: step; }
.steps h3 { display: flex; align-items: baseline; gap: var(--s10); font-size: var(--t-sub); }
.steps h3::before { content: counter(step); flex: none; inline-size: 1.75em; block-size: 1.75em; border-radius: 50%; background: var(--gold); color: var(--band); font-size: var(--t-small); line-height: 1.75em; text-align: center; }
.steps p { margin: 0; }
.steps figure { margin: 0; max-inline-size: var(--shot); }
.choices { margin-block-start: var(--group); }
.choices h3 { font-size: var(--t-sub); }

.facts { margin: var(--flow) 0 0; max-inline-size: var(--measure); }
.facts > div + div { margin-block-start: var(--flow); }

.facts dt { font-size: var(--t-sub); font-weight: 700; line-height: var(--lh-tight); }
.facts dd { margin: var(--s10) 0 0; }

.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--flow) var(--s30); margin: var(--flow) 0 0; font-size: var(--t-small); line-height: var(--lh-tight); }
.kinds dt { font-weight: 700; }
.kinds dd { margin: var(--s10) 0 0; color: var(--muted); line-height: var(--lh-text); }

.faq { margin: var(--flow) 0 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--s50); }
.faq { container-type: inline-size; }
.faq-col { flex: 1 1 min(100%, 24rem); max-inline-size: var(--measure); border-block-start: var(--rule) solid var(--line); }
@container (width < 50.5rem) { .faq-col + .faq-col { border-block-start: 0; } }
.faq details { border-block-end: var(--rule) solid var(--line); }
.faq summary {
  display: flex; gap: var(--s10); align-items: baseline; padding-block: var(--s20);
  font-size: var(--t-sub); font-weight: 700; line-height: var(--lh-tight); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; color: var(--muted); font-weight: 700; }
.faq details[open] > summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: var(--mark) solid var(--fg); outline-offset: var(--s05); }
.faq details > p { margin: 0; padding-block-end: var(--s20); }
.faq details > p + p { margin-block-start: calc(var(--flow) - var(--s20)); }
.faq details > p + ul { margin: calc(var(--s10) - var(--s20)) 0 0; padding-block-end: var(--s20); padding-inline-start: var(--s30); }
.faq details li + li { margin-block-start: var(--s10); }
.faq details > .shot { max-inline-size: var(--shot); margin-block-end: var(--s20); }
.sec > .faq + .note { margin-block-start: var(--flow); }
.sec > .note + .note { margin-block-start: var(--s05); }

.last .store { margin-block-start: var(--flow); background: var(--fg); color: var(--bg); }
.last .store:focus-visible { outline-color: var(--fg); }
.store.soon, .last .store.soon { border: var(--mark) solid currentColor; background: none; }
.store.soon { color: var(--on-band); }
.last .store.soon { color: var(--fg); }
.store.soon:hover { text-decoration: none; }

@keyframes nod {
  0%, 100% { transform: rotate(var(--tilt)); }
  14% { transform: rotate(5deg); }
  34% { transform: rotate(-13deg); }
  52% { transform: rotate(1deg); }
  70% { transform: rotate(-8deg); }
}
@keyframes nod-again {
  0%, 100% { transform: rotate(var(--tilt)); }
  14% { transform: rotate(5deg); }
  34% { transform: rotate(-13deg); }
  52% { transform: rotate(1deg); }
  70% { transform: rotate(-8deg); }
}
@keyframes pop {
  40% { scale: 1.08; }
}
@keyframes drop {
  0%, 100% { visibility: visible; }
  17%, 83% { transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-face { animation: nod 1.6s ease-in-out 1.5s; }
  .hero-face.again { animation: nod-again 1.6s ease-in-out; }
  .banner { display: flex; }
  .target.hit .banner { animation: drop 2.3s ease-in-out; }
  .target.hit .watch { animation: pop 0.5s ease-out; }
  .target.hit .now { animation: fade 0.6s ease-out; }
  .when { transition: color 0.4s; }
  .when::before { transition: background-color 0.4s; }
}

.target:not(.hit) .now, .target.hit .was { display: none; }
.target:not(.hit) .news .now + li { margin-block-start: 0; border-block-start: 0; padding-block-start: 0; }
.target.hit .news .now { font-weight: 700; }
.target.hit .when { color: var(--hit-text); font-weight: 700; }
.target.hit .when::before { background: var(--hit); }
.target.hit .buy.off { background: var(--kotori); color: var(--site-paper); }

.end { --fg: var(--on-band); --muted: var(--on-band-muted); --line: var(--band-line); --link: var(--on-band); color: var(--fg); }
.end .edge { margin-block: 0 -1px; scale: 1 -1; }
.end-in {
  padding: var(--s30) max(var(--gutter), (100% - var(--measure) - var(--s50) - var(--shot)) / 2) var(--s50);
  background: var(--band);
}
.end .last { padding: 0; }
.end .last p { margin: 0; }
.end .foot { padding-block-start: var(--s50); }