/* V5: only the two middle sections. The approved A layout stays intact. */
/* A brief pause between the moving bread gallery and the name story. */
.hello {
  --hello-entrance: 1;
  min-height: 580px;
  padding: 58px 24px 72px;
}
.hello .hello-copy { width: min(100%, 660px); }
.hello h2 { margin: 21px 0 23px; line-height: 1.65; }
.hello .body-copy { font-size: 15px; line-height: 2.1; letter-spacing: .055em; }
.hello .hello-cat { width: 65px; height: 52px; margin-top: 25px; }
.hello .hello-bread.left {
  width: 27%; left: -7%; top: 47%;
  transform: translate3d(calc((1 - var(--hello-entrance)) * -72px), calc((1 - var(--hello-entrance)) * 28px), 0) rotate(calc(-24deg - (1 - var(--hello-entrance)) * 14deg));
}
.hello .hello-bread.right {
  width: 22%; right: -7%; top: 19%; bottom: auto;
  transform: translate3d(calc((1 - var(--hello-entrance)) * 62px), calc((1 - var(--hello-entrance)) * -22px), 0) rotate(calc(16deg + (1 - var(--hello-entrance)) * 12deg));
}
.hello .vertical-note { right: 21%; top: 34%; font-size: 10px; }
.hello .hello-small-note { left: 11%; bottom: 13%; font-size: 8px; }

/* Cream -> forest green -> butter. No additional palette or ornament. */
.anzu-name-story {
  position: relative; isolation: isolate; overflow: hidden;
  margin: -18px 0 0; padding: 76px 0 78px;
  border-radius: 50% 50% 0 0 / 18px 18px 0 0;
  color: var(--cream); background: var(--green); line-height: 1.8;
}
.anzu-name-story .anzu-name-inner { width: min(1180px, 86%); margin-inline: auto; }
.anzu-name-story .anzu-name-layout {
  display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto;
  grid-template-areas: 'mark heading' 'mark copy';
  column-gap: 10%; row-gap: 22px; align-items: center;
}
.anzu-name-story .anzu-name-heading { grid-area: heading; align-self: end; }
.anzu-name-story .anzu-name-label {
  display: flex; align-items: center; gap: 12px; color: var(--yellow);
  font-size: 11px; letter-spacing: .16em; font-weight: 700;
}
.anzu-name-story .anzu-name-rule { height: 1px; width: 28px; background: currentColor; }
.anzu-name-story h2 { font-size: clamp(42px, 4.7vw, 68px); letter-spacing: .08em; line-height: 1.45; margin: 18px 0 0; }
.anzu-name-story .anzu-name-mark {
  grid-area: mark; position: relative; align-self: center;
  min-width: 0; width: 100%; height: 490px; color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
.anzu-name-story .anzu-name-illustration {
  display: block; width: 100%; max-width: 465px; height: 100%;
  overflow: visible; transform: rotate(-9deg);
}
.anzu-name-story .anzu-name-note {
  position: absolute; writing-mode: vertical-rl; font-size: 11px;
  letter-spacing: .2em; top: 9%; right: 0; opacity: .85;
}
.anzu-name-story .anzu-name-footnote {
  position: absolute; left: 13%; bottom: 4%; font-size: 10px;
  letter-spacing: .1em; transform: rotate(-5deg);
}
.anzu-name-story .anzu-name-replay {
  position: absolute; right: 0; bottom: 0; display: inline-flex;
  align-items: center; gap: 8px; min-height: 44px; padding: 8px 0 8px 8px;
  color: var(--yellow); background: transparent; font-size: 10px; letter-spacing: .06em;
}
.anzu-name-story .anzu-name-replay[hidden] { display: none; }
.anzu-name-story .anzu-name-replay svg { width: 16px; height: 16px; }
.anzu-name-story .anzu-name-replay span { border-bottom: 1px solid transparent; }
.anzu-name-story .anzu-name-replay:hover span { border-bottom-color: currentColor; }
.anzu-name-story .anzu-name-copy { grid-area: copy; align-self: start; }
.anzu-name-story .anzu-name-copy h3 {
  font-size: 21px; line-height: 1.8; letter-spacing: .05em; margin: 0 0 14px;
}
.anzu-name-story .anzu-name-description { font-size: 14px; line-height: 2.15; letter-spacing: .06em; margin: 0; }
.anzu-name-story .anzu-name-link {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 45px; min-height: 44px; padding: 9px 0; margin-top: 22px;
  font-size: 12px; font-weight: 700; border-bottom: 1px solid rgba(var(--paper-rgb), .55);
}
.anzu-name-story .anzu-name-link svg { width: 23px; height: 23px; transition: transform .25s var(--ease); }
.anzu-name-story .anzu-name-link:hover svg { transform: translateX(5px); }
.anzu-name-story .anzu-name-source { font-size: 10px; line-height: 1.8; margin-top: 16px; color: var(--yellow); }
.anzu-name-story :is(a,button):focus-visible { outline-color: var(--yellow); }
/* Native SVG remains fully visible without JavaScript. Motion is progressive enhancement. */
.anzu-name-story.motion-ready [data-name-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anzu-name-story.motion-ready.is-drawn .anzu-name-stem { animation: anzu-line-draw 1.15s cubic-bezier(.4,0,.2,1) both; }
.anzu-name-story.motion-ready.is-drawn .anzu-name-kernel { animation: anzu-line-draw .52s ease-out both; animation-delay: var(--draw-delay); }
.anzu-name-story.motion-ready.is-drawn .anzu-name-awns { animation: anzu-line-draw .42s ease-out 1.4s both; }
@keyframes anzu-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (min-width:1600px) {
  .hello { padding-block: 96px 105px; min-height: 650px; }
  .anzu-name-story { padding-block: 90px 96px; }
  .anzu-name-story .anzu-name-mark { height: 540px; }
}
@media (max-width:1050px) and (min-width:761px) {
  .hello { min-height: 570px; }
  .hello h2 { font-size: 39px; }
  .hello .vertical-note { display: none; }
  .anzu-name-story .anzu-name-inner { width: 88%; }
  .anzu-name-story .anzu-name-layout { column-gap: 6%; }
  .anzu-name-story .anzu-name-mark { height: 450px; }
  .anzu-name-story .anzu-name-copy h3 { font-size: 18px; }
  .anzu-name-story .anzu-name-description { font-size: 13px; letter-spacing: .015em; }
  .anzu-name-story .anzu-name-note { font-size: 9px; right: -4%; }
  .anzu-name-story .anzu-name-footnote { font-size: 8px; left: 5%; }
}
@media (max-width:760px) {
  .hello { min-height: 530px; padding: 68px 26px 80px; }
  .hello .hello-copy { width: 100%; }
  .hello .eyebrow { font-size: 8px; }
  .hello h2 { font-size: clamp(26px, 7.7vw, 40px); line-height: 1.7; letter-spacing: .035em; margin: 20px 0 23px; }
  .hello .body-copy { font-size: 14px; line-height: 2.1; letter-spacing: .015em; }
  .hello .hello-cat { width: 56px; height: 47px; margin-top: 24px; }
  .hello .hello-bread.left { width: 43%; left: -17%; top: 71%; }
  .hello .hello-bread.right { width: 37%; right: -24%; top: 14%; }
  .hello .vertical-note { display: none; }
  .hello .hello-small-note { left: 11%; bottom: 7%; font-size: 6px; }
  .anzu-name-story { padding: 48px 0 59px; margin-top: -12px; border-radius: 50% 50% 0 0 / 12px 12px 0 0; }
  .anzu-name-story .anzu-name-inner { width: calc(100% - 48px); max-width: 520px; }
  .anzu-name-story .anzu-name-layout { grid-template-columns: 1fr; grid-template-areas: 'heading' 'mark' 'copy'; row-gap: 0; }
  .anzu-name-story .anzu-name-heading { text-align: center; }
  .anzu-name-story .anzu-name-label { justify-content: center; font-size: 9px; letter-spacing: .1em; }
  .anzu-name-story .anzu-name-rule { width: 21px; }
  .anzu-name-story h2 { font-size: 40px; letter-spacing: .07em; line-height: 1.42; margin: 15px 0 0; }
  .anzu-name-story .anzu-name-mark { height: 248px; max-width: 355px; margin: 5px auto 19px; }
  .anzu-name-story .anzu-name-illustration { width: 255px; height: 100%; }
  .anzu-name-story .anzu-name-note { font-size: 9px; right: 3%; top: 14%; letter-spacing: .14em; }
  .anzu-name-story .anzu-name-footnote { display: none; }
  .anzu-name-story .anzu-name-replay { right: 4%; bottom: -12px; min-height: 44px; font-size: 10px; }
  .anzu-name-story .anzu-name-copy { text-align: center; }
  .anzu-name-story .anzu-name-copy h3 { font-size: 18px; margin: 0 0 11px; line-height: 1.7; letter-spacing: .02em; }
  .anzu-name-story .anzu-name-description { font-size: 14px; line-height: 2; letter-spacing: .02em; }
  .anzu-name-story .anzu-name-link { font-size: 12px; margin-top: 15px; gap: 47px; }
  .anzu-name-story .anzu-name-source { font-size: 10px; margin: 15px auto 0; letter-spacing: 0; }
}
@media (max-width:360px) {
  .hello { padding-inline: 19px; min-height: 530px; }
  .hello h2 { font-size: 26px; }
  .hello .body-copy { font-size: 13px; }
  .anzu-name-story .anzu-name-inner { width: calc(100% - 38px); }
  .anzu-name-story h2 { font-size: 36px; }
  .anzu-name-story .anzu-name-mark { height: 232px; }
  .anzu-name-story .anzu-name-note { right: 0; }
  .anzu-name-story .anzu-name-copy h3 { font-size: 17px; }
  .anzu-name-story .anzu-name-description { font-size: 13px; }
  .anzu-name-story .anzu-name-source { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hello { --hello-entrance: 1 !important; }
  .anzu-name-story [data-name-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
  .anzu-name-story .anzu-name-replay { display: none; }
}
@media print {
  .hello { --hello-entrance: 1 !important; }
  .anzu-name-story [data-name-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
  .anzu-name-story .anzu-name-replay { display: none; }
}

/* 2026-09-18 ヒーロー修正: 縦の短い端末で「ふわっ。もっちり。にっこり。」の丸が
   見出し「いつもの毎日に。」の句点へ被る問題。見出しは top:116px の固定px、丸は
   top:28% の hero 高さ基準で基準が割れており、hero が min-height:670px に張り付くと
   丸が 188px までせり上がって2行目(177-224px)と交差する。下限を与えて見出しの下へ逃がす。
   縦に余裕のある端末では 28% が上回るため従来と同じ見え方を保つ。 */
@media (max-width: 700px) {
  .hero-stamp { top: max(28%, 254px); }
}