/* HERO：背景・花びら・コンテンツ・表示アニメーション・固定配置 */

.hero {
 position: relative;
 isolation: isolate;
 width: 100%;
 height: 100vh;
 height: 100svh;
 overflow: hidden;
 background: var(--color-white);
 min-height: 650px;
 --sequence-pause: .12s;
 --title-duration: .32s;
 --title-second-start: 0s;
 --title-accent-start: var(--title-second-start);
 --description-start: calc(var(--title-accent-start) + var(--title-duration) + var(--sequence-pause));
 --description-length: 1.1s;
 --features-start: calc(var(--description-start) + var(--description-length) + var(--sequence-pause));
 --booking-start: calc(var(--features-start) + 1.05s + var(--sequence-pause));
 --same-day-start: calc(var(--booking-start) + .65s + var(--sequence-pause));
}

.hero__scene {
 width: 100%;
 max-width: var(--content-width-1920);
 height: 100%;
 margin-inline: auto;
 position: absolute;
 inset: 0;
}

.hero__background, .hero__background img, .hero__petals {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.hero__background img {
 display: block;
 object-fit: cover;
 object-position: center center;
}

.hero__petals {
 overflow: hidden;
 pointer-events: none;
}

.hero__petal {
 position: absolute;
 top: -50px;
 left: var(--petal-left);
 width: var(--petal-size);
 height: var(--petal-size);
 opacity: 0;
 animation: hero-petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
}

.hero__petal img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
 animation: hero-petal-flutter var(--flutter-duration) ease-in-out var(--flutter-delay) infinite;
}

.hero__petal, .hero__petal img {
 animation-play-state: paused;
}

.hero.is-animating .hero__petal, .hero.is-animating .hero__petal img {
 animation-play-state: running;
}

html.has-header-menu .hero__petal, html.has-header-menu .hero__petal img {
 animation-play-state: paused;
}

@keyframes hero-petal-fall {
 0% {
  transform: translate3d(0, 0, 0);
  opacity: 0;
 }

 10% {
  opacity: var(--petal-opacity);
 }

 75% {
  opacity: var(--petal-opacity);
 }

 92%, 100% {
  transform: translate3d(var(--petal-drift), var(--petal-travel, 110vh), 0);
  opacity: 0;
 }
}

@keyframes hero-petal-flutter {
 0%, 100% {
  transform: translate3d(-4px, 0, 0) rotate(-12deg) rotateY(-15deg);
 }

 25% {
  transform: translate3d(5px, 0, 0) rotate(8deg) rotateY(10deg);
 }

 40% {
  transform: translate3d(2px, 0, 0) rotate(-5deg) rotateY(-8deg);
 }

 55% {
  transform: translate3d(22px, -9px, 0) rotate(42deg) rotateY(48deg);
 }

 68% {
  transform: translate3d(-12px, -3px, 0) rotate(-30deg) rotateY(-35deg);
 }

 85% {
  transform: translate3d(5px, 0, 0) rotate(10deg) rotateY(12deg);
 }
}

@media (min-width: 768px) {
 .hero__scene {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 clamp(60px, 8vw, 150px), #000 calc(100% - clamp(60px, 8vw, 150px)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 clamp(60px, 8vw, 150px), #000 calc(100% - clamp(60px, 8vw, 150px)), transparent);
 }
}

@media (max-width: 767px) {
 .hero__petal:nth-child(n + 3) {
  display: none;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero__petals {
  display: none;
 }

 .hero__petal, .hero__petal img {
  animation: none;
 }
}

.hero__content {
 position: relative;
 z-index: 2;
 isolation: isolate;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: min(100%, var(--content-width-1200));
 min-height: 100%;
 margin-inline: auto;
 padding: 85px 24px 65px;
 color: var(--color-text);
 text-align: center;
 word-break: normal;
}

.hero__title {
 margin: 0;
 font-size: var(--font-size-60);
 font-weight: var(--font-weight-bold);
 line-height: 1.35;
 letter-spacing: .08em;
 -webkit-text-stroke: 3px var(--color-white);
 paint-order: stroke fill;
 text-shadow: 0 1px 2px var(--color-white);
}

.hero__title-line {
 display: inline-block;
}

.hero__title-line:first-child {
 display: block;
}

.hero__title-accent {
 color: var(--color-accent-pink-dark);
}

.hero__description {
 letter-spacing: .06em;
 margin-top: clamp(22.5px, 3.125vh, 37.5px);
 font-size: var(--font-size-30);
 font-weight: 400;
 line-height: 1.6;
}

.hero__features {
 letter-spacing: .06em;
 display: grid;
 grid-template-columns: repeat(3, max-content);
 justify-content: center;
 width: min(100%, var(--content-width-980));
 gap: 24px;
 margin: clamp(30px, 5vh, 52.5px) 0 0;
 padding: 0;
 list-style: none;
 color: var(--color-brand-gold);
 font-size: var(--font-size-18);
 font-weight: var(--font-weight-bold);
 line-height: 1.5;
}

.hero__features li {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 15px;
}

.hero__feature-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 64px;
 width: 64px;
 height: 64px;
 border: 1px solid var(--color-brand-gold);
 border-radius: 50%;
 background: var(--color-header-surface);
}

.hero__feature-icon img {
 display: block;
 width: 38px;
 height: 38px;
 object-fit: contain;
}

.hero__actions {
 margin-top: clamp(56px, calc(34.6664px + 2.777776vw), 88px);
}

.hero__reservation {
 letter-spacing: .06em;
 width: fit-content;
 min-height: 70px;
 max-width: 100%;
 border-radius: 37.5px;
 margin-inline: auto;
 padding: 17.5px 32.5px;
 gap: 15px;
 color: var(--color-reservation-ink);
 font-size: var(--font-size-30);
 text-decoration: none;
}

.hero__reservation img {
 width: 30px;
 height: 30px;
 flex-shrink: 0;
 filter: brightness(0) saturate(100%) invert(67%) sepia(24%) saturate(1950%) hue-rotate(326deg) brightness(96%) contrast(86%);
}

.hero__arrow {
 font-size: 1.2em;
 line-height: 1;
}

.hero__reservation:focus-visible {
 outline: 2px solid var(--color-focus);
 outline-offset: 5px;
}

.hero__same-day {
 -webkit-text-stroke: 2.5px var(--color-white);
 paint-order: stroke fill;
 letter-spacing: .06em;
 margin-top: 25px;
 color: var(--color-text);
 font-size: var(--font-size-21);
 font-weight: var(--font-weight-bold);
 line-height: 1.7;
 text-shadow: 0 1px 2px var(--color-white);
}

@media (max-width: 767px) {
 .hero {
  height: auto;
  min-height: 100svh;
 }

 .hero__content {
  min-height: 100svh;
  padding: 90px 14px 125px;
 }

 .hero__title {
  font-size: var(--font-size-54);
  line-height: 1.4;
  -webkit-text-stroke-width: 2px;
 }

 .hero__title-line {
  display: block;
 }

 .hero__description {
  margin-top: 20px;
  font-size: var(--font-size-24);
  line-height: 1.55;
 }

 .hero__description-rest > span {
  display: block;
 }

 .hero__features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 25px;
  font-size: var(--font-size-16);
 }

 .hero__features li {
  flex-direction: column;
  justify-content: flex-start;
  gap: 9px;
 }

 .hero__feature-icon {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
 }

 .hero__feature-icon img {
  width: 30px;
  height: 30px;
 }

 .hero__actions {
  margin-top: clamp(32px, calc(14.818792px + 5.369128vw), 56px);
 }

 .hero__reservation {
  min-height: 67.5px;
  padding: 16.25px clamp(14px, calc(-64.55px + 24.55vw), 27.5px);
  font-size: var(--font-size-21);
  gap: clamp(8px, calc(-18.18px + 8.18vw), 12.5px);
 }

 .hero__same-day {
  margin-top: 17px;
  font-size: var(--font-size-16);
 }

 .hero__same-day > span {
  display: block;
 }
}

.hero__description-first, .hero__description-rest {
 display: block;
}

.hero__description-first {
 white-space: nowrap;
}

.hero__feature-text {
 -webkit-text-stroke: 2px var(--color-white);
 paint-order: stroke fill;
 text-shadow: 0 1px 2px var(--color-white);
}

.hero__feature-text--family {
 text-align: left;
}

.hero.is-content-ready .hero__title-line {
 animation: hero-content-reveal var(--title-duration) ease both;
}

.hero.is-content-ready .hero__title-line:nth-child(2) {
 animation-delay: var(--title-second-start);
}

.hero.is-content-ready .hero__title-line:nth-child(3) {
 animation-delay: var(--title-accent-start);
}

.hero.is-content-ready .hero__description-first {
 animation: hero-wipe-right .7s ease both var(--description-start);
}

.hero.is-content-ready .hero__description-rest {
 animation: hero-wipe-right .7s ease both calc(var(--description-start) + .4s);
}

.hero.is-content-ready .hero__features li {
 animation: hero-feature-pop .5s ease-out both var(--features-start);
}

.hero.is-content-ready .hero__features li:nth-child(2) {
 animation-delay: calc(var(--features-start) + .34s);
}

.hero.is-content-ready .hero__features li:nth-child(3) {
 animation-delay: calc(var(--features-start) + .68s);
}

.hero.is-content-ready .hero__reservation {
 animation: hero-button-dissolve .65s ease both var(--booking-start);
}

.hero.is-content-ready .hero__same-day {
 animation: hero-wipe-right .65s ease both var(--same-day-start);
}

.hero.is-content-ready .hero__reservation:focus-visible {
 animation: none;
}

@keyframes hero-content-reveal {
 from {
  opacity: 0;
  transform: translateY(10px);
 }

 to {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes hero-wipe-right {
 from {
  clip-path: inset(-6px 100% -6px -6px);
  opacity: 0;
 }

 to {
  clip-path: inset(-6px -6px -6px -6px);
  opacity: 1;
 }
}

@keyframes hero-button-dissolve {
 from {
  opacity: 0;
 }

 to {
  opacity: 1;
 }
}

@keyframes hero-feature-pop {
 from {
  opacity: 0;
  transform: translateY(10px) scale(.94);
 }

 to {
  opacity: 1;
  transform: translateY(0) scale(1);
 }
}

@media (min-width: 768px) {
 .hero {
  min-height: 740px;
 }
}

@media (max-width: 767px) {
 .hero {
  --title-second-start: calc(var(--title-duration) + var(--sequence-pause));
  --title-accent-start: calc(var(--title-second-start) + var(--title-duration) + var(--sequence-pause));
  --description-length: 1.25s;
 }

 .hero.is-content-ready .hero__description-rest, .hero.is-content-ready .hero__same-day {
  animation: none;
 }

 .hero.is-content-ready .hero__description-rest > span {
  animation: hero-wipe-right .65s ease both calc(var(--description-start) + .4s);
 }

 .hero.is-content-ready .hero__description-rest > span:nth-child(2) {
  animation-delay: calc(var(--description-start) + .8s);
 }

 .hero.is-content-ready .hero__same-day > span {
  animation: hero-wipe-right .65s ease both var(--same-day-start);
 }

 .hero.is-content-ready .hero__same-day > span:nth-child(2) {
  animation-delay: calc(var(--same-day-start) + .45s);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero.is-content-ready .hero__content, .hero.is-content-ready .hero__content * {
  animation: none;
 }
}

@media (min-width: 1200px) {
 .hero__content {
  --hero-content-offset: clamp(300px, calc(133.33333px + 13.88889vw), 400px);
  width: min(calc(100% - var(--hero-content-offset) - var(--hero-content-offset)), var(--content-width-1200));
  transform: translateX(calc(-1 * var(--hero-content-offset)));
 }

 .hero__title {
  white-space: nowrap;
  font-size: var(--font-size-60);
 }

 .hero__features {
  gap: clamp(12px, calc(-8px + 1.66667vw), 24px);
  font-size: var(--font-size-18);
 }

 .hero__features li {
  min-width: 0;
  gap: clamp(8px, calc(-3.66667px + .97222vw), 15px);
 }

 .hero__feature-text {
  white-space: nowrap;
 }

 .hero__feature-icon {
  --feature-size: clamp(44px, calc(10.66667px + 2.77778vw), 64px);
  flex-basis: var(--feature-size);
  width: var(--feature-size);
  height: var(--feature-size);
 }

 .hero__feature-icon img {
  width: 60%;
  height: 60%;
 }
}

body:has(.home-main) {
 overflow-x: clip;
}

.home-main {
 position: relative;
 isolation: isolate;
}

.home-main--en .hero__title {
 font-size: clamp(34px, 3.25vw, 56px);
 line-height: 1.2;
 letter-spacing: .03em;
}

.home-main--en .hero__title-line {
 display: block;
}

.home-main--en .hero__description-first {
 white-space: normal;
}

.home-main--en .hero__features {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 width: min(100%, 760px);
}

.home-main--en .hero__features li {
 min-width: 0;
}

.home-main--en .hero__feature-text {
 text-align: center;
}

@media (min-width: 1200px) {
 .home-main--en .hero__content {
  --hero-content-offset: clamp(240px, 20vw, 360px);
  width: min(calc(100% - var(--hero-content-offset) - var(--hero-content-offset)), 760px);
 }

 .home-main--en .hero__title {
  white-space: normal;
 }
}

@media (max-width: 767px) {
 .home-main--en .hero__title {
  font-size: clamp(32px, 10vw, 46px);
 }

 .home-main--en .hero__description {
  font-size: clamp(18px, 5.6vw, 24px);
 }

 .home-main--en .hero__features {
  font-size: clamp(11px, 3.45vw, 15px);
 }

 .home-main--en .hero__reservation {
  font-size: clamp(17px, 5vw, 21px);
 }
}

.home-main > .hero {
 position: relative;
 z-index: 0;
}

/* PCのみ背景を固定。高さと固定位置を同じビューポート単位で計算し、スクロール時の跳ねを防ぐ。 */
@media (min-width: 768px) {
 .home-main > .hero {
  position: sticky;
  top: min(0px, calc(100vh - 740px));
  top: min(0px, calc(100svh - 740px));
 }
}

@media (prefers-reduced-motion: reduce) {
 .home-main > .hero {
  position: relative;
  top: auto;
 }
}