@font-face { font-family: "rycsmin";  src: url("/assets/fonts/rycsmin.woff2?v=20260924q") format("woff2");    font-display: swap; }
@font-face { font-family: "Alumni";   src: url("/assets/fonts/alumni.woff2?v=20260924q") format("woff2");     font-display: swap; }
@font-face { font-family: "LINESeed"; src: url("/assets/fonts/lineseed-b.woff2?v=20260924q") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "NotoJP";   src: url("/assets/fonts/noto-r.woff2?v=20260924q") format("woff2");     font-weight: 400; font-display: swap; }
@font-face { font-family: "NotoJP";   src: url("/assets/fonts/noto-b.woff2?v=20260924q") format("woff2");     font-weight: 700; font-display: swap; }

:root {
  --navy:      #031221;
  --navy-deep: #010a14;
  --navy-sec:  #071c30;
  --cream:     #faf3e9;
  --paper:     #f2ebda;
  --sand:      #f8dfb3;
  --red:       #bd2219;
  --red-sec:   #9e2b20;
  --green-sec: #3c6255;
  --ink:       #0a2233;

  --col: 440px;
  --pad: 30px;

  --f-ja:   "NotoJP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-mincho: "rycsmin", "Noto Serif JP", "Yu Mincho", serif;
  --f-en:   "Alumni", "Arial Narrow", sans-serif;
  --f-pill: "LINESeed", var(--f-ja);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--f-ja);
  font-size: 16px;
  line-height: 1.9;
}

img { display: block; max-width: 100%; height: auto; }
p, ul, dl, dd, h1, h2 { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

.col {
  position: relative;
  width: min(var(--col), 100%);
  margin-inline: auto;
  overflow-x: clip;
}

.stage-bg { display: none; }
@media (min-width: 900px) {
  body { background: #5d6a73; }
  .stage-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .stage-bg__item {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.2s ease, transform 2.4s cubic-bezier(.215, .61, .355, 1);
  }
  .stage-bg__item.is-active { opacity: 1; }
  .stage-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 243, 233, .3);
  }
  .stage-bg__item[data-bg-item="1"] { background-image: url("/assets/img/bg-hero.webp"); background-position: center; }
  .stage-bg__item[data-bg-item="2"] { background-image: url("/assets/img/bg-stay.webp"); background-position: 15% center; }
  .stage-bg__item[data-bg-item="3"] { background-image: url("/assets/img/bg-bike.webp"); background-position: center; }
  .stage-bg__item[data-bg-item="4"] { background-image: url("/assets/img/bg-coffee.webp"); background-position: 0% center; }
  .stage-bg__item[data-bg-item="5"] { background-image: url("/assets/img/bg-access.webp"); background-position: 80% center; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stage-bg__item { transform: scale(1.06); }
  .stage-bg__item.is-active { transform: scale(1); }
}

.side, .qr { display: none; }
@media (min-width: 1000px) {
  .side {
    position: fixed;
    top: 50%;
    left: calc(25% - var(--col) / 4);
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 240px;
    padding: 32px 24px 28px;
    background: rgba(3, 18, 33, .88);
    border: 1px solid rgba(248, 223, 179, .35);
    outline: 1px solid rgba(248, 223, 179, .35);
    outline-offset: -7px;
    color: var(--sand);
    text-align: center;
  }
  .side__logo { display: block; width: 150px; }
  .side__logo:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
  .side__nav {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .side__nav li + li { border-top: 1px solid rgba(248, 223, 179, .2); }
  .side__nav a {
    display: block;
    padding: 10px 0;
    color: var(--cream);
    font-family: var(--f-en);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .2s;
  }
  .side__nav a span {
    display: block;
    margin-top: 4px;
    color: var(--sand);
    font-family: var(--f-ja);
    font-size: 11px;
    letter-spacing: .2em;
  }
  .side__nav a:hover { color: var(--sand); }
  .side__nav a:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
  .side__place { font-size: 12px; line-height: 1.8; }

  .qr {
    position: fixed;
    top: 50%;
    left: calc(75% + var(--col) / 4);
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 26px 18px;
    background: rgba(3, 18, 33, .88);
    border: 1px solid rgba(248, 223, 179, .35);
    color: #fff;
    text-align: center;
  }
  .qr__label { font-family: var(--f-mincho); font-size: 18px; line-height: 1.2; }
  .qr__line  { display: block; width: 30px; height: 1px; background: #e5e5e5; }
  .qr img    { width: 110px; height: 110px; }
  .qr__note  { font-size: 12px; line-height: 1.3; }
}

.hero {
  position: relative;
  background: var(--navy);
}


.hero__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #a0b8c5 0%, var(--paper) 30%, rgba(255,255,255,0) 36%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(3, 18, 33, .6);
  mix-blend-mode: multiply;
  opacity: 0;
}

.hero__top {
  position: relative;
  z-index: 1;
  aspect-ratio: 440 / 736;
}
.hero__logo {
  position: absolute;
  z-index: 1;
  top: 8.56%;
  left: 50%;
  width: 63.64%;
  transform: translateX(-50%) rotate(-.31deg);
}
.stamp {
  position: absolute;
  z-index: 2;
  top: 22.5%;
  right: 9%;
  width: 25%;
  aspect-ratio: 1;
  transform: rotate(-12deg);
}
.stamp__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--red);
  color: var(--sand);
  box-shadow: 0 0 0 2px var(--sand), 0 3px 10px rgba(3, 18, 33, .45);
  outline: 1.5px dashed rgba(248, 223, 179, .75);
  outline-offset: -7px;
  line-height: 1;
  text-align: center;
}
.stamp__en {
  font-family: var(--f-en);
  font-size: min(15px, 3.4vw);
  letter-spacing: 1px;
}
.stamp__big {
  margin: 2px 0 3px;
  font-family: var(--f-en);
  font-size: min(34px, 7.8vw);
  letter-spacing: 1px;
}
.stamp__ja {
  font-size: min(11px, 2.6vw);
  font-weight: 700;
  letter-spacing: .12em;
  margin-right: -.12em;
}
@media (prefers-reduced-motion: no-preference) {
  .stamp__face { animation: stamp-press .55s cubic-bezier(.5, 0, .75, 0) 4.4s both; }
  .stamp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--red);
    opacity: 0;
    animation: stamp-ring .6s ease-out 4.72s forwards;
    pointer-events: none;
  }
}
@keyframes stamp-press {
  0%   { opacity: 0; transform: scale(2.6) rotate(10deg); }
  55%  { opacity: 1; transform: scale(.9) rotate(0); animation-timing-function: ease-out; }
  75%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stamp-ring {
  from { opacity: .7; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.45); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero__catch,
.hero__lead { text-shadow: 0 1px 12px rgba(3, 18, 33, .55); }

.hero__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 80px var(--pad) 30px;
  min-height: 667px;
  position: relative;
  z-index: 1;
  background: rgba(3, 18, 33, .6);
  color: #fff;
}
.hero__catch {
  font-family: var(--f-mincho);
  font-size: min(28px, 6.8vw);
  line-height: 40px;
  letter-spacing: 1.4px;
}
.hero__catch span,
.hero__lead span,
.sec__text span { display: block; }
.hero__lead {
  font-size: 14px;
  line-height: 25px;
}

.pills {
  display: flex;
  justify-content: center;
  gap: min(30px, 4vw);
  margin: 10px calc(var(--pad) * -1) 0;
}
.pills a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(110px, 27vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-family: var(--f-pill);
  font-weight: 700;
  font-size: min(16px, 3.9vw);
  line-height: 1.3;
  text-align: center;
  transition: transform .2s;
}
.pills a:hover { transform: translateY(-3px); }
.pills a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pills img { width: auto; height: min(25px, 6vw); }
.pills li:last-child img { height: min(35px, 8vw); }


.hero__stage { display: contents; }

.js .hero {
  height: 250vh;
  height: 250svh;
}
.js .hero__stage {
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.js .hero__bg {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
}
.js .hero__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.js .hero__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  justify-content: center;
  padding: 30px var(--pad);
  background: none;
}

.js .hero__bg::before { opacity: 1; transition: opacity .7s ease; }
.js .hero__bg::after  { opacity: 0; transition: opacity 1.2s ease .1s; }
.js .hero__logo       { transition: opacity .7s ease, transform .7s ease; }
.js .stamp            { transition: opacity .7s ease; }
.js .hero__catch,
.js .hero__lead,
.js .pills {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, transform .9s cubic-bezier(.215, .61, .355, 1), visibility 0s linear .9s;
}

.js .hero.is-switched .hero__bg::before { opacity: 0; }
.js .hero.is-switched .hero__bg::after  { opacity: 1; }
.js .hero.is-switched .hero__logo {
  opacity: 0;
  transform: translateX(-50%) translateY(-12px) rotate(-.31deg);
}
.js .hero.is-switched .stamp { opacity: 0; }
.js .hero.is-switched .hero__catch,
.js .hero.is-switched .hero__lead,
.js .hero.is-switched .pills {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .6s, .6s, 0s;
}
.js .hero.is-switched .hero__lead { transition-delay: .9s, .9s, 0s; }
.js .hero.is-switched .pills      { transition-delay: 1.2s, 1.2s, 0s; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__bg img { transition: transform 2.4s cubic-bezier(.215, .61, .355, 1); }
  .js .hero.is-switched .hero__bg img { transform: scale(1.12); }
  .js .hero__catch,
  .js .hero__lead,
  .js .pills { transform: translateY(16px); }
}

.to-access {
  position: sticky;
  bottom: 7px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  width: fit-content;
  margin: -117px calc((100% - min(var(--col), 100%)) / 2 + 9px) 0 auto;
  padding: 4px;
  color: #fff;
  text-decoration: none;
  transition: color .3s ease, opacity .2s ease;
}
.to-access span {
  writing-mode: vertical-rl;
  font-family: var(--f-mincho);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}
.to-access svg { display: block; flex: none; }
.to-access:hover { opacity: .75; }
.to-access:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.to-access.is-on-light { color: var(--navy); }

.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 80px var(--pad) 30px;
  color: #fff;
}
.sec--cream { gap: 20px; padding-bottom: 80px; background: var(--paper); color: var(--navy); }
.sec--red   { background: var(--red-sec); }
.sec--green { background: var(--green-sec); }
.sec--navy  { background: var(--navy-sec); border-top: 1px solid rgba(248, 223, 179, .18); }

.sec__mark { width: 100px; height: auto; }

.ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-weight: 400;
  text-align: center;
}
.ttl__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 50px;
}
.ttl__rule {
  flex: none;
  width: 30px;
  height: 10px;
  border-block: 1.818px solid currentColor;
}
.ttl__en {
  font-family: var(--f-en);
  font-size: min(48px, 10.9vw);
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}
.ttl--wide .ttl__en { font-size: min(48px, calc((100vw - 120px) / 6.71)); }
.ttl__ja {
  font-size: 18px;
  font-weight: 700;
  line-height: 34.2px;
  letter-spacing: .42em;
  margin-right: -.42em;
}
.ttl__stars {
  margin-top: -30px;
  font-size: 18px;
  line-height: 34.2px;
  letter-spacing: .5em;
  margin-right: -.5em;
}
.sec--cream .ttl__stars { margin-top: -20px; color: var(--red); }

.sec__text {
  color: var(--ink);
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}

.feat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.feat li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: min(22px, 5.2vw);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 2px;
}
.feat__ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.feat__ic svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sec--cream .feat__ic { color: var(--red); }

.sec__tree {
  position: absolute;
  right: -40px;
  bottom: 19px;
  width: 213px;
  height: auto;
}

.pic img { width: 100%; }
.pic--band img { height: auto; aspect-ratio: 440 / 248; object-fit: cover; }
.pic--tall img { aspect-ratio: 440 / 383; object-fit: cover; }
.pic--map { background: #f3ead8; }

.steps { background: var(--paper); }
.js .steps .sec--cream { padding-bottom: 40px; }
.js .steps__pin {
  position: sticky;
  top: 0;
  z-index: 1;
}
.js .steps__road { height: 150vh; height: 150svh; }
.js .steps__frame {
  position: relative;
  height: calc(min(var(--col), 100vw) * 383 / 440);
  overflow: hidden;
}
.js .steps__frame .pic {
  position: absolute;
  inset: 0;
  transition: transform .8s cubic-bezier(.77, 0, .175, 1);
}
.js .steps__frame .pic img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.js .steps__frame .pic { transform: translateX(100%); }
.js .steps[data-step="1"] .pic:nth-child(1),
.js .steps[data-step="2"] .pic:nth-child(2) { transform: none; }
.js .steps[data-step="2"] .pic:nth-child(1) { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .js .steps__frame .pic,
  .js .steps[data-step="2"] .pic:nth-child(1) { transform: none; opacity: 0; transition: opacity .6s ease; }
  .js .steps[data-step="1"] .pic:nth-child(1),
  .js .steps[data-step="2"] .pic:nth-child(2) { opacity: 1; }
}

.addr { width: 100%; }
.addr__main {
  font-size: min(28px, 7vw);
  font-weight: 700;
  line-height: 50.4px;
  letter-spacing: 2px;
}
.addr__road {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border: 1.818px solid var(--sand);
  color: var(--sand);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  letter-spacing: 1.6px;
}

.notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px dashed rgba(248, 223, 179, .7);
  color: var(--sand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}
.notice__tag {
  flex: none;
  padding: 3px 9px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
}

.signs { width: 100%; }
.signs div {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid rgba(248, 223, 179, .2);
}
.signs div:last-child { border-bottom: 1px solid rgba(248, 223, 179, .2); }
.signs dt {
  flex: none;
  width: 100px;
  padding: 10px;
  background: var(--cream);
  color: var(--red);
  font-size: 14px;
  line-height: 26.6px;
  letter-spacing: 1.4px;
  text-align: center;
}
.signs dd {
  flex: 1;
  font-size: 16px;
  line-height: 30.4px;
}

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px var(--pad) 10px;
  background: var(--navy-deep);
  text-align: center;
}
.foot__logo img { width: 220px; }
.foot__addr { font-size: 16px; line-height: 30.4px; }
.foot__addr span { display: inline-block; }
.foot__owner {
  margin-top: -10px;
  color: var(--sand);
  font-size: 14px;
  line-height: 26.6px;
}
.foot__nav { margin-top: -10px; }
.foot__nav a {
  display: inline-block;
  color: var(--sand);
  font-size: 14px;
  line-height: 40px;
  text-underline-offset: 3px;
}
.foot__nav a:hover { color: #fff; }
.foot__copy {
  padding-block: 20px 10px;
  color: rgba(250, 243, 233, .7);
  font-size: 12px;
  line-height: 22.8px;
}

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 100vh;
  padding: 80px var(--pad);
  background: var(--paper);
  color: var(--navy);
  text-align: center;
}
.notfound__logo img { width: 280px; }
.notfound__code { font-family: var(--f-en); font-size: 96px; line-height: 1; color: var(--red); }
.notfound__catch { font-family: var(--f-mincho); font-size: 24px; }
.notfound__back a {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.notfound__back a:hover { background: var(--navy); color: var(--cream); }

.op { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .op {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--cream);
    animation: op-hide .8s cubic-bezier(.215, .61, .355, 1) 3.9s forwards;
  }
  .op__circle,
  .op__logo {
    grid-area: 1 / 1;
    opacity: 0;
    transform: scale(0);
  }
  .op__circle {
    width: min(58vmin, 320px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--navy);
    animation:
      op-grow 2.4s cubic-bezier(.65, 0, .35, 1) .5s forwards,
      op-fill 1s cubic-bezier(.87, 0, .13, 1) 3.1s forwards;
  }
  .op__logo {
    width: min(40vmin, 220px);
    height: auto;
    animation:
      op-grow 2.4s cubic-bezier(.65, 0, .35, 1) .52s forwards,
      op-logo-out .5s ease-in 3.1s forwards;
  }

  html { overflow: hidden; animation: op-unlock 0s 4.2s forwards; }
}

@keyframes op-grow {
  from { opacity: 0; transform: scale(0); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes op-fill {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 1; transform: scale(9); }
}
@keyframes op-logo-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.08); }
}
@keyframes op-hide {
  to { opacity: 0; visibility: hidden; }
}
@keyframes op-unlock {
  to { overflow: visible; }
}

@media (max-width: 899px) {
  .band--3 > .col,
  .band--4 > .col,
  .js .steps__pin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }
  .band--3 .sec,
  .band--4 .sec,
  .js .steps .sec--cream { flex: none; padding-top: 44px; padding-bottom: 24px; }

  .band--3 .pic--tall,
  .band--4 .pic--tall,
  .js .steps__frame {
    position: relative;
    flex: 1 1 0;
    min-height: 160px;
    height: auto;
    overflow: hidden;
  }
  .band--3 .pic--tall img,
  .band--4 .pic--tall img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}
@media (max-width: 899px) and (max-height: 720px) {
  .band--3 .sec,
  .band--4 .sec,
  .js .steps .sec--cream { padding-top: 28px; padding-bottom: 16px; }
  .band--3 .pic--tall,
  .band--4 .pic--tall,
  .js .steps__frame { min-height: 140px; }
}