.page--tint { background: var(--color-pale); }

.page--tint::before {
  content: ""; position: absolute; inset: var(--header-h) 0 auto 0; z-index: 1; height: 28px;
  background: var(--color-base); transform: scaleY(-1);
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat; mask: var(--wave-mask) center / 100% 100% no-repeat;
}

.site-header .logo { width: 150px; }

.head { display: grid; gap: var(--sp-1); }
.en-ttl {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-en); font-size: var(--fs-en); line-height: 1; letter-spacing: 0.02em; color: var(--color-ink);
}
.page--p1 .en-ttl { font-family: var(--font-en-p1); font-size: 4.2em; }
.page--p2 .en-ttl { font-family: var(--font-en-p2); font-size: 3.1em; }
.page--p3 .en-ttl { font-family: var(--font-en-p3); font-weight: 900; }
.page--p4 .en-ttl { font-family: var(--font-en-p4); font-size: 3em; }
.page--p5 .en-ttl { font-family: var(--font-en-p5); font-weight: 800; }
.page--p6 .en-ttl { font-family: var(--font-en-p6); font-size: 3.1em; }
.page--p7 .en-ttl { font-family: var(--font-en-p7); }
.page--p8 .en-ttl { font-family: var(--font-en-p8); font-size: 3.1em; color: var(--color-accent); }
.head__deco { width: auto; height: 1.4em; }   
.page--p2 .head__deco { height: 1.15em; }

.head__deco--big { position: absolute; right: -0.15em; top: -0.6em; height: 1.7em; }
.page--p6 .head__deco--big { top: -0.62em; height: 1.6em; }
.jp-sub { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-head-p3); font-weight: 500; font-size: var(--fs-ui); line-height: 1; letter-spacing: 0.12em; color: var(--color-main-2); }
.jp-sub::before { content: ""; width: 2.4em; height: 1px; background: currentColor; }
.hd { font-family: var(--font-head-p3); font-weight: 500; font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--color-main); }
.page--p2 .hd { font-size: 1.32em; }
.page--p4 .hd { font-size: 1.55em; }
.page--p5 .hd { font-size: 1.45em; }
.page--p6 .hd { font-size: 1.6em; }
.page--p7 .hd { font-size: 1.65em; }
.page--p8 .hd { font-size: 2em; }

.txt { display: grid; gap: var(--sp-p); }
.strong { font-weight: 700; color: var(--color-accent); }

.page--p1 .page__inner { gap: 1.5em; }
.p1__top { position: relative; display: grid; gap: 1.4em; }
.p1__staff { position: absolute; right: -12px; bottom: 0; height: calc(100% + 0.6em); width: auto; }
.p1__concept { font-family: var(--font-head-p1); font-size: 1.75em; line-height: 1.4; color: var(--color-accent); }

.page--p2 .page__inner { gap: 0.5em; }   
.p2__bubble {
  position: relative; display: grid; gap: var(--sp-1); padding: 0.6em 0.9em;
  background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: var(--radius-m);
}
.p2__bubble::after {
  content: ""; position: absolute; left: 2.2em; bottom: -10px; width: 16px; height: 16px;
  background: var(--color-paper); border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); rotate: 45deg;
}
.p2__quote { font-family: var(--font-head-p2); font-size: 1.12em; line-height: 1.5; color: var(--color-main); }
.p2__ask { font-weight: 700; }
.p2__punch { font-family: var(--font-head-p1); font-size: 1.85em; line-height: 1.1; color: var(--color-accent); }

.p3__photo { position: relative; margin: 0; }
.p3__photo-img { width: 100%; height: 22dvh; object-fit: cover; border-radius: var(--radius-m); }
@media (max-height: 600px) { .p3__photo-img { height: 17dvh; } }
.p3__road { position: absolute; left: 0; right: 0; bottom: -12px; height: 56px; overflow: hidden; pointer-events: none; }
.p3__truck { position: absolute; bottom: 0; width: 96px; height: auto; animation: p3-drive 10s linear infinite; }

@keyframes p3-drive { from { left: 100%; } to { left: -100px; } }

.page--p4 .page__inner { gap: 0.9em; }
.talk { display: grid; gap: 0.5em; margin-inline: calc(var(--gutter) * -1); }
.talk__track {
  display: flex; gap: 12px; padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.talk__track::-webkit-scrollbar { display: none; }
.talk__card {
  flex: 0 0 84%; scroll-snap-align: center; display: grid; gap: 0.45em; align-content: start; padding: 1.3em 1.4em;
  background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: var(--radius-m);
}
.talk__img { width: 100%; height: 9dvh; object-fit: contain; }
@media (max-height: 600px) { .talk__img { display: none; } .page--p8 .en-ttl { font-size: 2.1em; } .p8__fig { display: none; } }
.talk__who { font-family: var(--font-head-p4); font-weight: 700; color: var(--color-accent); }
.talk__say { padding: 0.35em 0.7em; font-weight: 700; line-height: 1.55; border-radius: var(--radius-m); }
.talk__say--me { justify-self: start; background: var(--color-pale); }
.talk__say--you { justify-self: end; color: var(--color-on-dark); background: var(--color-main); }
.talk__dots { display: flex; justify-content: center; gap: 8px; }
.talk__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); transition: background var(--dur-hover) ease; }
.talk__dot.is-cur { background: var(--color-accent); }

.map { position: relative; flex-shrink: 0; height: 54px; color: var(--color-accent); }
.map__line { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin {
  position: absolute; translate: -50% -50%; padding: 0.2em 0.6em; font-weight: 700; font-size: var(--fs-ui); line-height: 1.4;
  color: var(--color-ink); background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); white-space: nowrap;
}
.map__pin--1 { left: 12%; top: 57%; }
.map__pin--2 { left: 50%; top: 51%; }
.map__pin--3 { left: 86%; top: 49%; }
.p5__sayw { position: relative; align-self: flex-start; max-width: 88%; }
.p5__ring { --pf-ring: var(--color-accent); --pf-ring-2: var(--color-main); --pf-spread: 1.08; position: absolute; inset: 0; border-radius: var(--radius-m); }
.p5__say {
  position: relative; padding: 0.45em 0.9em; font-family: var(--font-head-p5); font-size: 1em; line-height: 1.45;
  color: var(--color-on-dark); background: var(--color-accent); border-radius: var(--radius-m);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags__item { padding: 0.3em 0.8em; font-weight: 700; font-size: var(--fs-ui); line-height: 1.4; color: var(--color-main); background: var(--color-paper); border: 2px solid var(--color-main); border-radius: var(--radius-s); }
.p6__last { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8em; padding-top: var(--sp-p); border-top: 1px solid var(--color-line); }
.stamp-mark {
  display: grid; place-items: center; width: 4.4em; aspect-ratio: 1; font-family: var(--font-head-p6); font-size: var(--fs-ui); line-height: 1.25; text-align: center;
  color: var(--color-accent); border: 3px double var(--color-accent); border-radius: 50%; rotate: -10deg;
}

.page--p7 .page__inner { gap: 0.9em; }
.tl__times { display: flex; justify-content: space-between; gap: 4px; padding: 0.3em 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.tl__t { padding: 0.15em 0.4em; font-family: var(--font-en-p7); font-size: 1.1em; line-height: 1.3; color: var(--color-main-2); border-radius: var(--radius-s); cursor: pointer; transition: background var(--dur-hover) ease, color var(--dur-hover) ease; }
.tl__t.is-cur { color: var(--color-on-dark); background: var(--color-main); }
.tl { margin-inline: calc(var(--gutter) * -1); }
.tl__track { display: flex; gap: 12px; padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tl__track::-webkit-scrollbar { display: none; }
.tl__card {
  flex: 0 0 86%; scroll-snap-align: center; display: grid; gap: 0.5em; align-content: start; min-height: 13em; padding: 1.6em 1.6em;
  background: var(--color-paper); border-radius: var(--radius-m); box-shadow: var(--shadow-soft);
}
.tl__card--end { border: 2px solid var(--color-accent); }
.tl__head { font-family: var(--font-head-p7); font-size: 1.15em; line-height: 1.4; color: var(--color-main); }
.tl__card--end .tl__head { color: var(--color-accent); }
.tl__txt { font-weight: var(--fw-body); line-height: 1.75; }

.page--p8 .page__inner { gap: 0.9em; }
.p8__q { font-family: var(--font-head-p8); font-weight: 600; line-height: 1.6; color: var(--color-ink); }
.p8__welcome { font-family: var(--font-head-p1); font-size: 1.7em; line-height: 1.2; color: var(--color-accent); }
.p8__fig { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; height: 14dvh; }
.p8__island { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.5; }
.p8__staff { position: relative; height: 100%; width: auto; }
.p8__btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0 1.4em;
  font-weight: 700; color: var(--color-on-dark); background: var(--color-accent); border-radius: var(--radius-pill); box-shadow: var(--shadow-soft);
}
.p8__ar { width: 1.1em; height: 1.1em; }
.p8__go { display: flex; justify-content: center; }

.page--deco { isolation: isolate; }
.page--deco::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--deco); opacity: 0.09; }

.page--tint.page--deco::after { filter: brightness(0) invert(1); opacity: 0.6; }
.page--p1 { --deco: url("assets/bg-frond-r.svg") right -80px bottom -70px / 280px no-repeat, url("assets/bg-hibiscus.svg") left -26px top 46% / 96px no-repeat; }
.page--p2 { --deco: url("assets/bg-monstera.svg") right -60px top 84px / 190px no-repeat, url("assets/bg-hibiscus.svg") left -34px top 52% / 104px no-repeat; }
.page--p3 { --deco: url("assets/bg-frond-d.svg") left -90px top 40px / 250px no-repeat, url("assets/bg-waves.svg") right -30px bottom 26px / 230px no-repeat; }
.page--p4 { --deco: url("assets/bg-frond-dr.svg") right -90px top 50px / 250px no-repeat, url("assets/bg-hibiscus.svg") left -30px bottom 50px / 110px no-repeat; }
.page--p5 { --deco: url("assets/bg-monstera.svg") left -70px bottom 30px / 200px no-repeat, url("assets/bg-frond-dr.svg") right -100px top 34% / 230px no-repeat; }
.page--p6 { --deco: url("assets/bg-frond-r.svg") right -90px bottom -50px / 270px no-repeat, url("assets/bg-hibiscus.svg") left -32px top 130px / 100px no-repeat; }
.page--p7 { --deco: url("assets/bg-monstera.svg") left -60px bottom 40px / 180px no-repeat, url("assets/bg-frond-dr.svg") right -100px top 46% / 230px no-repeat; }
.page--p8 { --deco: url("assets/bg-frond-d.svg") left -90px top 50px / 240px no-repeat, url("assets/bg-hibiscus.svg") right -26px top 42% / 110px no-repeat; }
.page--co { --deco: url("assets/bg-monstera.svg") left -60px top 64px / 170px no-repeat, url("assets/bg-frond-dr.svg") right -100px top 40% / 230px no-repeat; }
.page--req { --deco: url("assets/bg-frond-dr.svg") right -100px top 80px / 250px no-repeat, url("assets/bg-monstera.svg") left -70px top 55% / 190px no-repeat; }
.page--entry { --deco: url("assets/bg-frond-d.svg") left -90px top 70px / 240px no-repeat, url("assets/bg-hibiscus.svg") right -30px top 60% / 110px no-repeat; }

.tbl { display: grid; border-top: 1px solid var(--color-line); }
.tbl__row { display: grid; grid-template-columns: 7.2em 1fr; gap: 0.8em; padding: 0.75em 0; border-bottom: 1px solid var(--color-line); }
.tbl dt { font-weight: 700; color: var(--color-main); }
.tbl dd { font-weight: var(--fw-body); }
.ground--co { display: flex; align-items: flex-end; justify-content: flex-end; }
.co__truck { height: 70%; width: auto; }
.req__go { display: flex; justify-content: center; }

.page--p5 .page__inner { gap: 0.7em; }
.page--p6 .page__inner { gap: 0.75em; }
.page--p5 { --foot-h: 7dvh; }
.page--p6 { --foot-h: 7dvh; }
.page--p7 { --foot-h: 14dvh; }
.foot { flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-end; height: var(--foot-h); }
.foot__fig { height: 100%; width: auto; max-width: 48%; object-fit: contain; object-position: bottom; }
.foot__fig--in { margin-right: 6%; }   

.sun-spin { animation: sun-spin 24s linear infinite; }
@keyframes sun-spin { to { rotate: 360deg; } }
.p7__sun { height: 2em; }
.page--p7 .en-ttl { margin-bottom: 0.3em; }   

.page--p2 { --ground-h: 5dvh; }
.page--co { --ground-h: 9dvh; }
.ground { flex-shrink: 0; height: var(--ground-h); }
.ground__fig { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; translate: 0 calc(100% - var(--ground-h) - var(--pad-y)); }
@media (min-height: 700px) { .page--p2 { --ground-h: 10dvh; } }
@media (max-height: 600px) {
  .page--p5 .page__inner { gap: 0.55em; }
  .page--p6 .page__inner { gap: 0.7em; }
  .page--p8 .hd { font-size: 1.7em; }
  .page--p6 { --foot-h: 5.5dvh; }
  .page--p7 { --foot-h: 10dvh; }
  .page--p6 .hd { font-size: 1.45em; }
}
@media (min-height: 820px) and (max-width: 959px), (min-height: 1000px) {
  .page--p5 { --foot-h: 18dvh; }
  .page--p6 { --foot-h: 15dvh; }
  .page--p7 { --foot-h: 16dvh; }
  .p1__top { gap: 2.4em; }
  .page--p2 { --ground-h: 18dvh; }
  .page--co { --ground-h: 22dvh; }
  .talk__img { height: 14dvh; }
  .p3__photo-img { height: 28dvh; }
  .map { height: 12dvh; }
  .tl__card { min-height: 30dvh; }
  .p8__fig { height: 22dvh; }
}

@media (min-height: 820px) and (max-width: 959px), (min-height: 1000px) {
  .p1__top { min-height: 32dvh; align-content: end; }
}

@media (min-width: 960px) {
  
  .p1__top { gap: 2.4em; }
  .page--p1 .en-ttl { font-size: 5.2em; }
  .p1__concept { font-size: 2.2em; }
  .page--p2 { --ground-h: 16dvh; }
  .page--co { --ground-h: 18dvh; }
  .page--p5 { --foot-h: 17dvh; }
  .page--p6 { --foot-h: 14dvh; }
  .page--p7 { --foot-h: 16dvh; }
  .talk__img { height: 13dvh; }
  .rail { overflow: hidden; }
  .rail__deco { position: absolute; height: auto; pointer-events: none; }
  .rail__deco--sun { top: 8%; left: 12%; width: 120px; }
  .rail__deco--palm { bottom: 6%; right: 10%; width: 170px; }
  .rail__deco--birds { top: 10%; right: 14%; width: 110px; }
  .rail__deco--island { bottom: 4%; left: 50%; translate: -50% 0; width: min(88%, 380px); }
}

@media (min-width: 960px) and (min-height: 1000px) {
  .page--p6 { --foot-h: 20dvh; }
}