@charset "utf-8";

/*----------------------------------------
common
----------------------------------------*/
:root {
  --fs-xl:clamp(36px,11.6667cqw,70px);
  --fs-l:clamp(28px,7cqw,42px);
  --fs-m:clamp(18px,4.2cqw,25.2px);
  --fs-ms:clamp(16px,3.7333cqw,22.4px);
  --fs-s:clamp(14px,3.2667cqw,19.6px);
  --fs-xs:clamp(12px,2.8cqw,16.8px);
  --fs-cap:clamp(8px,1.8667cqw,11.2px);
}

@media screen and (max-width:395px) {
  :root { --fs-xl:36px; }
}


/*----------------------------------------
frame / layout
----------------------------------------*/
.frame {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:100;
}

.frame:before {
  content:"";
  position:absolute;
  inset:0;
  border:12px solid #004a28;
}

.main {
  width:min(600px,100%);
  margin:0 auto;
  min-height:100vh;
  background:#fff;
  position:relative;
  z-index:2;
  container-type:inline-size;
}

.side {
  position:fixed;
  top:0;
  bottom:0;
  z-index:1;
}

.side-left { left:0; right:calc(50% + 300px); }
.side-right { left:calc(50% + 300px); right:0; }

.side > img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.side p { position:absolute; z-index:1; }
.side-left p {
  width:22.4cqw;
  left:50%;
  top:46dvh;
  transform: translateX(-50%);
}
.side-right p {
  width:21cqw;
  left:50%;
  top:20dvh;
  transform: translateX(-50%);
}

.obi-tx {
  --cut:2cqw;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1.6667cqw 1em;
  background:#003113;
  color:#fff;
  font-size:var(--fs-m);
  clip-path:polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
  font-weight:bold;
  line-height:1;
}

.p-ttl { text-align:center; font-size:var(--fs-ms); }
.p-ttl span { display:block; text-align:center; font-size:var(--fs-xl); line-height:1.3; }
.p-ttl span span { font-size:var(--fs-l); }

.bold { font-weight: bold; }

.movie { position:relative; cursor:pointer; }
.movie video { display:block; width:100%; }
.movie .btn { position:absolute; width:9%; aspect-ratio:1; }

@media screen and (max-width:1480px) {
  .main { width:40%; }
  .side { width:30%; }
  .side-left { right:auto; }
  .side-right { left:auto; }
}

@media screen and (max-width:820px) {
  .side { display:none; }
  .main { width:100%; max-width:820px; }
  .frame:before { border-width:6px; }
}


/*----------------------------------------
mv
----------------------------------------*/
#mv { position:relative; }

#mv h1 {
  position:absolute;
  top:31.5%;
  left:50%;
  transform:translateX(-50%);
  width:57.5%;
  opacity:0;
  transition:all ease .6s;
}

#mv .v-copy {
  position:absolute;
  top:65%;
  left:50%;
  transform:translate(-50%,0);
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
  gap:1.3333cqw;
  color:#e9c273;
  width:14cqw;
  opacity:0;
}


/*----------------------------------------
top
----------------------------------------*/
#top {
  background:#dbe2e8;
  position:relative;
  z-index:-1;
  margin-top:-13.75cqw;
  padding-top:32.5cqw;
}

#top .item {
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:68.3%;
  opacity:0;
  transition:all ease .6s;
}

#top .catch {
  text-align:center;
  font-weight:bold;
  line-height:1.2;
  font-size:var(--fs-xl);
  color:#ddd3c3;
  position:absolute;
  bottom:6.3333cqw;
  left:0;
  right:0;
  width:100%;
}

#top .catch span.mono {
  display:block;
  font-size:var(--fs-ms);
  margin-bottom:1.6667cqw;
}
#top .catch span.ls-min { letter-spacing:-5cqw; }

/*----------------------------------------
mv + top
----------------------------------------*/
#mv,
#top { position:relative; }

.intro-movie {
  position:absolute;
  inset:0;
  z-index:10;
  width:100%;
  height:100dvh;
  object-fit:cover;
  opacity:1;
  visibility:visible;
  transition:opacity .6s ease,visibility .6s ease;
}

.intro-movie.is-finished {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#mv > img {
  opacity:0;
  height:100dvh;
  transition:all ease .6s;
}

#mv.is-movie-finished > img { opacity:1; height:100%; }
#mv.is-movie-finished h1 { opacity:1; transition-delay:.5s; }
#mv.is-movie-finished .v-copy { opacity:1; }

#top .intro-movie { height:100%; }
#top.is-movie-finished .item { opacity:1; transition-delay:.8s; }


/*----------------------------------------
secret
----------------------------------------*/
#secret {
  background:#ddd3c3;
  padding:8.3333cqw 0 0;
}

#secret .sc-img { margin-top:1.6667cqw; }
#secret .lead { margin:3.3333cqw auto 0; width:80%; }
#secret .big { font-size:var(--fs-m); margin-top:6.6667cqw; }

#secret .icon-tx {
  display:flex;
  justify-content:center;
}

#secret .icon-tx img { width:11%; }

#secret .icon-tx p {
  line-height:1.4;
  margin-left:2%;
}

#secret .icon-tx p span {
  font-weight:900;
  font-size:var(--fs-m);
  font-family: 'Noto Serif JP', serif;
}

#secret .day-img {
  width:72%;
  margin:3.3333cqw auto 0;
}

#secret .movie.day2 { margin-top:7.5cqw; }

#secret .movie.day .btn,
#secret .movie.day2 .btn {
  left:2.5cqw;
  top:2.5cqw;
}

#secret .movie.day2 video { background:#fff; }

#secret .movie.day .cap {
  position:absolute;
  top:4%;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:var(--fs-cap);
  text-indent:-1em;
  padding-left:1em;
  width:100%;
  text-align:center;
}

#secret .movie.day .obi {
  position:absolute;
  bottom:-3%;
  left:50%;
  width:85%;
  transform:translateX(-50%);
}

#secret .what {
  text-align:center;
  margin-top:6.6667cqw;
  font-size:var(--fs-l);
  line-height:1.4;
}

#secret .voice {
  width:65%;
  margin:5cqw auto;
}

#secret .voice li {
  background:#003113;
  border-radius:999px;
  padding:.8333cqw 0;
  position:relative;
}

#secret .voice li:first-child { margin-bottom:10cqw; }

#secret .voice li p {
  font-size:var(--fs-xs);
  text-align:center;
  color:#ddd3c3;
  font-weight:bold;
}

#secret .voice li .hum {
  width:30%;
  position:absolute;
  top:0;
  left:-18%;
}

#secret .voice li .hum02 {
  width:30%;
  top:-1.6667cqw;
  left:auto;
  right:-20%;
}

#secret .lst-tx {
  margin-top:8.3333cqw;
  font-size:var(--fs-xl);
  text-align:center;
  line-height:1.3;
}

#secret .lst-tx span {
  display:block;
  font-size:var(--fs-m);
  text-align:center;
  margin-bottom:1.6667cqw;
}

@media screen and (max-width:600px) {
  #secret .movie.day .cap { bottom:17%; }
}


/*----------------------------------------
p01
----------------------------------------*/
#p01 { padding:8.3333cqw 0; }

#p01 .p01-map {
  width:85%;
  margin:0 auto 3.3333cqw;
}

#p01 .p01-img {
  position:relative;
  margin-bottom:8.3333cqw;
}

#p01 .p01-img p {
  position:absolute;
  width:85%;
  top:3.3333cqw;
  left:50%;
  transform:translateX(-50%);
  font-size:var(--fs-s);
  text-shadow:
  0 0 4px rgba(255,255,255,.9),
  0 0 8px rgba(255,255,255,.7);
}

#p01 .p01-gallery {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:.8333cqw;
  width:85%;
  margin:0 auto;
}

#p01 .p01-gallery img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 上段 2 : 1 : 2 */
#p01 .p01-gallery_item01 { grid-column:1 / 5; grid-row:1; }
#p01 .p01-gallery_item02 { grid-column:5 / 7; grid-row:1; }
#p01 .p01-gallery_item03 { grid-column:7 / 11; grid-row:1; }

/* 下段 1 : 2 : 2 */
.p01-gallery_item04 { grid-column:1 / 3; grid-row:2; }
.p01-gallery_item05 { grid-column:3 / 7; grid-row:2; }
.p01-gallery_item06 { grid-column:7 / 11; grid-row:2; }


/*----------------------------------------
p02
----------------------------------------*/
#p02 {
  background:#ddd3c3;
  padding:5cqw 0 0;
}

#p02 h2 span span { margin-top:1.6667cqw; }

#p02 .p02-img { margin:5cqw 0; }

#p02 .tx {
  margin:0 auto;
  width:85%;
  font-size:var(--fs-s);
}

#p02 .bg-wht {
  background:#fff;
  padding-bottom:8.3333cqw;
}

#p02 .movie { margin:8.3333cqw 0 3.3333cqw; }

#p02 .movie .btn {
  left:2.5cqw;
  bottom:2.5cqw;
}

#p02 .flow {
  display:flex;
  width:85%;
  margin:3.3333cqw auto 0;
  gap:1.6667cqw;
}

#p02 .flow li { flex-grow:1; }
#p02 .flow li p { text-align:center; font-size:var(--fs-s); }
#p02 .flow li span { font-size:var(--fs-m); }


/*----------------------------------------
lastcont
----------------------------------------*/
#lastcont {
  background:#004a28;
  padding:16.6667cqw 0 0;
}

#lastcont h2 {
  width:83.3333cqw;
  margin:0 auto;
}

#lastcont .item-area {
  position:relative;
  margin-top:-10%;
}

#lastcont .item-area .item {
  width:70cqw;
}

#lastcont .item-area .logo {
  width:40.8333cqw;
  position:absolute;
  top:70%;
  left:47%;
  transform:translateY(-50%);
}


/*----------------------------------------
footer
----------------------------------------*/
#footer { margin-bottom:8.3333cqw; }

#footer .warning-img {
  display:flex;
  flex-direction:column;
  width:42cqw;
  margin:0 auto;
}

#footer .warning img:first-child {
  width:43%;
  margin:0 auto -1.6667cqw;
}

#footer .warning p {
  text-align:center;
  font-size:var(--fs-s);
  margin-top:1.6667cqw;
}

#footer .bnr {
  width:85%;
  margin:5% auto;
}

#footer .logo {
  width:12.8333cqw;
  margin:0 auto;
}