@charset "UTF-8";

:root{
  --base: #7a6a4c;
  --deep: #640000;
  --point: linear-gradient(135deg, #c44331 0%, #d87448 100%);
  --point2: linear-gradient(135deg, #d87448 0%, #e28f67 100%);
  --light: #c34231;
  --blue: #252b67;
  --deep: #110a0d;
  --ink: #111;
  --ink2: #fff;
}
*{
  box-sizing: border-box;
}
html,
body{
  margin: 0;
	overflow-x: hidden;
}
html{
  height: 100%;
	scroll-behavior: smooth;
}
body{
	font-style: normal;
	-webkit-text-size-adjust: 100%;
	min-height: 100%;
  color: var(--ink);
  background: var(--deep);
  font-family: "Hina Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img{
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
}
.wrapper{
	max-width: 576px;
	margin: 0 auto;
}


.app{
  opacity: 0;
}
.app.is-show{
  opacity: 1;
}
.loaderWrap{
  position: fixed;
  inset: 0;
  background: var(--deep);
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.5s ease;
}
.loaderInner{
  position: relative;
  width: 45vw;
  max-width: 400px;
  aspect-ratio: 20 / 7;
}
.loaderParts{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: opacity;
}
.loaderParts.is-on{
  opacity: 1;
}
.loaderWrap.is-hide{
  opacity: 0;
  pointer-events: none;
}


/* header */

header{
  width: 100%;
  height: 2.7rem;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
}
.headerLogo,
.hamburgerMenu,
.hamburgerMenu div{
  position: absolute;
}
.headerLogo{
  top: 0.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
  z-index: 200;
}
.headerLogo.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.hamburgerMenu{
  top: -1.7rem;
  right: -1.7rem;
  width: 7.2rem;
  height: 7.2rem;
  background: url("../img/hbBG.webp") no-repeat left bottom / cover;
  z-index: 600;
}
.hamburgerMenu div{
  top: 2.6rem;
  right: 2.6rem;
  width: 2rem;
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburgerMenu span{
  display: block;
  height: 0.1rem;
  width: 100%;
  background: var(--ink2);
  transition: transform .3s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hamburgerMenu.active span:nth-child(1){
  transform: translateY(11px) rotate(45deg) translateZ(0);
}
.hamburgerMenu span:nth-child(2){
  transition: opacity 0s;
}
.hamburgerMenu.active span:nth-child(2){
  opacity: 0;
}
.hamburgerMenu:not(.active) span:nth-child(2){
  opacity: 1;
}
.hamburgerMenu.active span:nth-child(3){
  transform: translateY(-11px) rotate(-45deg) translateZ(0);
}
.navPanel{
  position: fixed;
  width: 100%;
  transform: translateY(-100%);
  transition: transform .4s ease;
  z-index: 500;
}
.navPanel.open{
  transform: translateY(0);
}
.navPanel ul{
  width: 100%;
  background: var(--base);
  margin: 0 auto;
  padding: 8vw 0 14vw;
  font-weight: 900;
  text-align: center;
}
.navPanel li a{
  color: var(--ink2);
  font-size: 4.2vw;
  text-decoration: none;
  display: block;
  padding: 5vw 0 0;
}
.navPanel li img{
  width: 35px;
  display: inline-block;
  margin-top: 7vw;
}
@media screen and (min-width: 450px){
  .navPanel ul{
    padding: 2rem 0 3.5rem;
  }
  .navPanel li a{
    font-size: 1.2rem;
    padding: 1.5rem 0 0;
  }
  .navPanel li img{
    margin-top: 2rem;
  }
}
@media screen and (min-width: 900px){
  .hamburgerMenu{
    top: -1.7rem;
    right: -1.7rem;
    width: 10rem;
    height: 10rem;
  }
  .hamburgerMenu div{
    top: 3.7rem;
    right: 3.6rem;
    width: 2.8rem;
    height: 2rem;
  }
  .hamburgerMenu.active span:nth-child(1){
    transform: translateY(15px) rotate(45deg);
  }
  .hamburgerMenu.active span:nth-child(3){
    transform: translateY(-15px) rotate(-45deg);
  }
}
@media (min-aspect-ratio: 1 / 1){
  .navPanel ul{
    padding: 2vw 5vw 3.5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5vw 2vw;
  }
  .navPanel li img{
    margin-top: 0.52rem;
  }
}
@media (min-width: 1280px){
  .navPanel ul{
    padding: 3rem 10rem 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5vw 0;
  }
}
@media (min-width: 1500px){
  .navPanel ul{
    padding: 3rem 18rem 1rem;
  }
}

.backgroundAll{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: opacity .7s ease;
}
.backgroundAll.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}
.backgroundAll::before,
.backgroundAll::after{
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
}
.backgroundAll::before{
  background-image: url("../img/bgMiddle_SP.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  z-index: 0;
}
.backgroundAll::after{
  background-image: url("../img/bgTop_SP.webp"), url("../img/bgBottom_SP.webp");
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% auto;
  z-index: 1;
}
@media (min-aspect-ratio: 1 / 1){
  .backgroundAll::before{
    background-image: url("../img/bgMiddle.webp");
  }
  .backgroundAll::after{
    background-image: url("../img/bgTop.webp"), url("../img/bgBottom.webp");
  }
}


/* mainVisual */

.mainVisualWrap{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue) 30%, var(--deep) 55%, var(--deep) 100%);
}
.mainVisual,
.mainVisual_1,
.mainVisual_2,
.mainVisual_3{
  width: 100%;
  aspect-ratio: 9 / 16;
  background: url("../img/mainVisual.webp") no-repeat center top 9.5vw / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: opacity 1s ease;
}
.mainVisual_1{
  background-image: url("../img/mainVisual_1.webp");
  z-index: 1;
  animation: mvFadeA 2.25s ease-in-out infinite;
}
.mainVisual_2{
  background-image: url("../img/mainVisual_2.webp");
  z-index: 1;
  animation: mvFadeB 2.25s ease-in-out infinite;
}
.mainVisual_3{
  background-image: url("../img/mainVisual_3.webp");
  z-index: 1;
  animation: mvFadeC 2.25s ease-in-out infinite;
}
@keyframes mvFadeA{
  0%      { opacity: 1; }
  33.333% { opacity: 1; }
  33.334% { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes mvFadeB{
  0%      { opacity: 0; }
  33.333% { opacity: 0; }
  33.334% { opacity: 1; }
  66.666% { opacity: 1; }
  66.667% { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes mvFadeC{
  0%      { opacity: 0; }
  66.666% { opacity: 0; }
  66.667% { opacity: 1; }
  100%    { opacity: 1; }
}
.mainVisual img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.mainVisual .mainVisualRibbon{
  top: clamp(2.5rem, 4.8vw + 1.48rem, 2.8rem);
  left: -5rem;
  transform: rotate(-8deg) scale(1.125);
  transform-origin: top left;
  width: 98%;
  max-width: 45rem;
  z-index: 10;
}
.mainVisual .mainVisualLogo{
  position: absolute;
  bottom: 2.5rem;
  animation: floatY 4.5s ease-in-out infinite;
  width: 98%;
  max-width: 42rem;
  z-index: 10;
}
@keyframes floatY{
  0%{
    transform: translateX(-50%) translateY(0);
  }
  50%{
    transform: translateX(-50%) translateY(-20px);
  }
  100%{
    transform: translateX(-50%) translateY(0);
  }
}
@media screen and (min-width: 440px){
  .mainVisual .mainVisualRibbon{
    top: clamp(2.8rem, 10.7vw - 0.15rem, 5rem);
    left: -clamp(0.5rem, 12.2vw - 2.86rem, 3rem);
  }
}
@media screen and (min-width: 769px){
  .mainVisual,
  .mainVisual_1,
  .mainVisual_2,
  .mainVisual_3{
    background-position: center top 0;
  }
  .mainVisual .mainVisualRibbon{
    top: 5rem;
  }
}
@media (min-aspect-ratio: 1 / 1){
  .mainVisualWrap{
    aspect-ratio: 9 / 12;
  }
  .mainVisual,
  .mainVisual_1,
  .mainVisual_2,
  .mainVisual_3{
    aspect-ratio: 9 / 12;
    background-position: center top -13vw;
  }
  .mainVisual .mainVisualRibbon{
    top: 5rem;
  }
  .mainVisual .mainVisualLogo{
    width: 60%;
    bottom: 0;
  }
}
@media screen and (max-width: 350px){
  .mainVisual .mainVisualRibbon{
    left: -4.5rem
  }
}

/* common */

.commonWrap{
  margin: auto;
  padding: 0 2vw;
}
.commonSection{
  padding: 19vw 0;
  margin-top: -0.25rem;
}
@media (min-aspect-ratio: 1 / 1){
  .pcWrap{
    width: 80%;
    margin: 0 auto;
  }
}
@media (min-width: 768px){
  .commonWrap{
    padding: 0;
  }
  .commonSection{
    padding: 12rem 0;
  }
}
@media (min-width: 1280px){
  .pcWrap{
    width: 900px;
  }
}

.bgMovie{
  background: linear-gradient(to bottom, var(--deep) 0%, var(--base) calc( 100% - 10rem ), var(--base) calc( 100% - 5rem ), var(--base) 100%);
}
.bgIntro{
  background: linear-gradient(to bottom, var(--base) 0%, var(--base) 60%, var(--deep) 100%);
}
.bgStory{
  background: linear-gradient(to bottom, var(--deep) 0%, var(--blue) 12rem, var(--blue) calc( 100% - 12rem ), var(--blue) 100%);
}
.bgChara{
  background: linear-gradient(to bottom, var(--blue) 0%, var(--base) 12rem, var(--base) calc( 100% - 12rem ), var(--deep) 100%);
}
.bgCredit,
.bgMurderMystery{
  background: linear-gradient(to bottom, var(--deep) 0%, var(--blue) 12rem, var(--blue) calc( 100% - 12rem ), var(--deep) 100%);
}
.bgInfo,
.bgAccess{
  background: var(--deep);
}
.bgContact{
  background: linear-gradient(to bottom, var(--deep) 0%, var(--base) 70%, var(--base) 100%);
}
.whiteSection{
  max-width: 900px;
  padding: 15vw 4vw;
  background: var(--ink2);
  position: relative;
}
.whiteSection::before,
.whiteSection::after{
  content: "";
  position: absolute;
  left: -5px;
  width: calc(100% + 1.5vw);
  aspect-ratio: 96 / 13;
  pointer-events: none;
}
.whiteSection::before,
.whiteSection::before{
  top: -9.52vw;
  background: url("../img/lineTop_SP.webp") no-repeat center top / 100% auto;
}
.whiteSection::after,
.whiteSection::after{
  bottom: -9.52vw;
  background: url("../img/lineBottom_SP.webp") no-repeat center bottom / 100% auto;
}
.whiteSection .commonTtl h3,
.whiteSection .commonTtl h2{
  color: var(--blue);
}
@media (min-width: 768px){
  .whiteSection{
    margin: 0 auto;
    max-width: 700px;
  }
  .whiteSection::before,
  .whiteSection::after{
    left: -1rem;
    width: calc(100% + 2rem);
  }
  .whiteSection::before{
    top: -4.5rem;
    background-image: url("../img/lineTop.webp");
  }
  .whiteSection::after{
    bottom: -4.5rem;
    background-image: url("../img/lineBottom.webp");
  }
  .whiteSection{
    padding: 4rem 2rem;
  }
}
@media (min-width: 1000px){
  .whiteSection{
    max-width: 980px;
  }
  .whiteSection::before{
    top: -5.5rem;
  }
  .whiteSection::after{
    bottom: -5.5rem;
  }
  .whiteSection{
    padding: 7.5rem 3rem;
  }
}
@media (min-width: 1280px){
  .whiteSection::before{
    top: -5.5rem;
  }
  .whiteSection::after{
    bottom: -5.5rem;
  }
  .whiteSection{
    padding: 8.5rem 3rem;
  }
}

.sectionTopLine,
.sectionBottomLine{
  width: 50%;
  max-width: 20rem;
  margin: 0 auto;
}
.sectionTopLine{
  background: url("../img/lineTop_SP.webp") no-repeat center top / 100% auto;
  padding-bottom: 13.3vw;
}
.sectionBottomLine{
  background: url("../img/lineBottom_SP.webp") no-repeat center bottom / 100% auto;
  padding-top: 13.3vw;
}
.commonTtl{
  margin: 0 0 11.4vw;
  text-align: center;
}
.commonTtl h3{
  display: block;
  color: var(--base);
  font-weight: 900;
  font-size: 3vw;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.commonTtl h2{
  color: var(--ink2);
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: clamp(1.875rem, 4vw, 3rem);
}
.commonTtl h4{
  color: var(--ink2);
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 6vw;
}
@media (min-width: 450px){
  .sectionTopLine{
    padding-bottom: 11vw;
  }
  .sectionBottomLine{
    padding-top: 11vw;
  }
}
@media (min-width: 768px){
  .sectionTopLine{
    background-image: url("../img/lineTop.webp");
    padding-bottom: 4.5rem;
  }
  .sectionBottomLine{
    background-image: url("../img/lineBottom.webp");
    padding-top: 4.5rem;
  }
  .commonTtl{
    margin: 0 0 5rem;
  }
  .commonTtl h3{
    font-size: 1.2rem;
    letter-spacing: 0.4em;
  }
  .commonTtl h2,
  .commonTtl h4{
    font-size: 2.4rem;
  }
}

.commonBtn{
  padding-top: 3.5vw;
  text-align: center;
  transition: 0.25s ease;
}
.commonBtn a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  max-width: 25rem;
  margin: -0.3rem 0 0 -0.3rem;
  gap: 0.8rem;
  padding: 5.7vw 0;
  color: var(--ink2);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.15em;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  cursor: pointer;
  background: var(--point);
  z-index: 0;
}
.commonBtn a::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-right: var(--light) 0.3rem solid;
  border-bottom: var(--light) 0.3rem solid;
}
.commonBtn:hover{
  transform: scale(0.96);
}
@media (min-width: 450px){
  .commonBtn a{
    padding: 1.6rem 0;
  }
}
@media (max-width: 370px){
  .commonTtl h2{
    letter-spacing: 0.1em;
  }
}


/* Contents */

.commonLead{
  line-height: 7.5vw;
  text-align: center;
}
.commonLead p:not(:last-of-type){
  margin-bottom: 9.5vw;
}
.movieWrap{
  padding: 23vw 0 12vw;
}
.movieInner{
  padding: 0 0 8vw;
}
.youtubeWrap{
  position: relative;
  width: calc( 100% - 3em );
  aspect-ratio: 16/9;
  margin: 0 auto 7vw;
  overflow: hidden;
}
.youtubeWrap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.introWrap{
  margin-top: -0.1rem;
  padding: 5.7vw 0;
}
.introLead{
  font-weight: 900;
  color: var(--ink2);
  font-size: clamp(0.938rem, 0.689rem + 1.17vw, 1.25rem);
}
.introLead img{
  width: 100%;
  max-width: 42rem;
  display: block;
  margin: 7.6vw auto 0;
}
.storyLead{
  font-weight: 700;
  color: var(--ink2);
  font-size: 3.6vw;
}
.storyLead img{
  width: 35%;
  max-width: 10rem;
  display: block;
  margin: 12vw auto 0;
}
.charaWrap{
  margin: -30vw auto 8vw;
  padding: 38vw 4vw 22vw;
}
.charaWrap .commonTtl{
  padding-bottom: 5vw;
}
.charaWrap img{
  margin: 3vw auto 0;
}
.creditWrap ul{
  padding: 2vw 0 8vw;
}
.creditWrap li{
  font-size: 3.6vw;
  font-weight: 900;
  text-align: center;
  color: var(--ink2);
}
.creditWrap li:not(:last-of-type){
  margin-bottom: 10vw;
}
.creditWrap li span{
  font-size: 3.5vw;
  font-weight: 700;
  border: var(--base) 0.1rem solid;
  color: var(--ink2);
  background: var(--base);
  display: block;
  width: 80%;
  max-width: 45rem;
  padding: 0.4rem 0.7rem;
  margin: 0 auto 5.7vw;
  letter-spacing: 0.1rem;
}
.creditWrap li a{
  color: var(--ink2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
  gap: 0.4rem;
  line-height: 1.8;
  letter-spacing: 0.15rem;
}
.creditWrap li a svg{
  width: 4.2vw;
  height: 4.2vw;
  max-width: 1.5rem;
  max-height: 1.5rem;
}
.mmLead{
  margin-top: -7.6vw;
  font-weight: 700;
  color: var(--ink2);
  font-size: 3.5vw;
  line-height: 6.75vw;
  text-align: left;
  padding: 0 5.7vw 5.7vw;
}
.mmLead p:not(:last-of-type){
  margin-bottom: 7.75vw;
}
@media screen and (min-width: 450px){
  .commonLead{
    line-height: clamp(2rem, 1.603rem + 1.87vw, 2.5rem);
  }
  .commonLead p:not(:last-of-type){
    margin-bottom: 9vw;
  }
  .storyLead,
  .mmLead{
    font-size: clamp(0.75rem, 0.353rem + 1.87vw, 1.25rem);
  }
  .creditWrap li span{
    font-size: clamp(1.1rem, 4vw, 1.2rem);
  }
  .creditWrap li{
    font-size: clamp(1.175rem, 3vw, 1.25rem);
  }
  .mmLead{
    margin-top: -2rem;
    line-height: 2.2rem;
    padding: 0 4rem 3rem;
  }
  .mmLead p:not(:last-of-type){
    margin-bottom: 3rem;
  }
}
@media (min-width: 768px){
  .commonLead{
    line-height: 2.6rem;
  }
  .commonLead p:not(:last-of-type){
    margin-bottom: 3.75rem;
  }
  .movieWrap{
    padding: 15rem 0 6rem;
  }
  .movieInner{
    padding: 0 0 3rem;
  }
  .youtubeWrap{
    margin: 0 auto 3rem;
  }
  .introWrap{
    padding: 0;
  }
  .introLead{
    font-size: 1.25rem;
  }
  .introLead img{
    margin: 4rem auto 0;
  }
  .storyLead{
    font-size: 1.15rem;
  }
  .storyLead img{
    margin: 5rem auto 0;
  }
  .charaWrap{
    margin: -18rem auto 3rem;
    padding: 16rem 5rem 6rem;
  }
  .charaWrap img{
    margin: 1.3rem auto 0;
  }
  .creditWrap li{
    font-size: 1.2rem;
  }
  .creditWrap li:not(:last-of-type){
    margin-bottom: 4.5rem;
  }
  .creditWrap li span{
    font-size: 1.25rem;
    padding: 0.7rem;
    margin: 0 auto 2.75rem;
    letter-spacing: 0.1rem;
  }
  .mmLead{
    padding: 0 3rem 4rem;
  }
}


/* information */

.infoWrap{
  padding: 0 3vw;
}
.infoList{
  text-align: left;
}
.infoList .commonBtn{
  margin: 11.4vw auto 19vw;
}
.infoList .commonBtn a{
  width: 100%;
}
.infoList h5{
  margin-bottom: 6vw;
  font-weight: 900;
  color: var(--ink2);
  background-color: var(--base);
  text-align: center;
  padding: 0.5rem 0;
}
.infoList h5:not(:first-of-type){
  margin-top: 7vw;
}
.infoList p,
.infoList ul{
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 0.5rem;
}
.infoList ul{
  display: grid;
  gap: 3.5vw;
}
.infoList li{
  position: relative;
  padding-left: 1.2rem;
}
.infoList li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
}
.infoList p:not(:first-of-type){
  margin-top: 3.5vw;
}
.infoList li span{
  padding: 0.5rem 0.5rem 0 0;
  display: block;
}
@media screen and (min-width: 450px){
  .infoList h5{
    margin-bottom: 2rem;
    font-size: clamp(1.3rem, 2.5vw, 1.4rem);
    padding: 0.6rem 0;
  }
  .infoList h5:not(:first-of-type){
    margin-top: 4rem;
  }
  .infoList ul{
    gap: 1.75rem;
  }
  .infoList p,
  .infoList ul{
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  }
  .infoList .commonBtn{
    margin: 3rem auto 10rem;
  }
}


/* Access, Contact */

.accessWrap{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 3rem;
}
.accessMapWrap{
  display: grid;
  gap: 0;
}
.accessMap{
  aspect-ratio: 4/3;
  background: #d1d5db;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.accessMap iframe{
  width: 100%;
  height: 100%;
  border: none;
}
.accessAddress{
  padding: 11.5vw 0 5.7vw;
  font-size: 3.25vw;
  text-align: center;
}
.accessAddress h3{
  margin: 0 0 3.8vw;
  font-size: 5.5vw;
  letter-spacing: 0.1em;
  font-weight: 900;
  text-transform: uppercase;
}
.accessAddress p{
  margin: 0 0 7.6vw;
  font-size: 3.25vw;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.accessBadge{
  display: inline-block;
  border-top: 0.05rem dashed var(--base);
  padding: 7vw 0 0;
  font-size: 3.25vw;
  line-height: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.formWrap{
  padding: 0;
}
.formWrap iframe{
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
}
@media screen and (min-width: 450px){
  .formWrap iframe{
    margin-bottom: -275px;
  }
  .accessAddress h3{
    font-size: clamp(2rem, 2.5vw, 2.2rem);
    margin: 0 0 1.5rem;
  }
  .accessAddress p,
  .accessBadge{
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
  }
  .accessAddress p{
    margin: 0 0 3rem;
  }
  .accessBadge{
    line-height: 2rem;
    padding: 3rem 0 0;
  }
}
@media screen and (min-width: 1000px){
  .formWrap iframe{
    margin-bottom: -400px;
  }
}
@media screen and (min-width: 769px){
  .formWrap iframe{
    margin-bottom: -350px;
  }
}
@media screen and (max-width: 768px){
  .formWrap iframe{
    margin-bottom: -300px;
  }
}
@media screen and (max-width: 600px){
  .formWrap iframe{
    margin-bottom: -280px;
  }
}
@media screen and (max-width: 420px){
  .formWrap iframe{
    margin-bottom: -200px;
  }
}
@media screen and (max-width: 375px){
  .formWrap iframe{
    margin-bottom: -180px;
  }
}

/* footer */

footer{
  margin-top: -0.1rem;
  aspect-ratio: 11 / 13;
  position: relative;
  background: var(--base) url("../img/dancho_SP.webp") no-repeat calc(100% + 30.5vw) bottom / 100% auto;
}
.footerInner{
  position: absolute;
  top: 0;
  left: -14vw;
  text-align: center;
  width: 100%;
}
.footerLogo{
  margin: 3.8vw auto 5.7vw;
}
.footerLogo img{
  width: 45.2vw;
  max-width: 300px;
  display: inline-block;
}
.footerCopy{
  margin: 0 auto 3.8vw;
  font-size: 2.9vw;
  color: var(--ink2);
  line-height: 2.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
}
@media screen and (min-width: 450px){
  footer{
    background: var(--base) url("../img/dancho.webp") no-repeat calc(100% + 8.5rem) bottom / 100% auto;
  }
  .footerInner{
    left: -4rem;
  }
  .footerLogo{
    margin: 1.25rem auto 1.5rem;
  }
  .footerCopy{
    margin: 0 auto 1rem;
    font-size: 0.9rem;
    line-height: 2.2;
  }
}
@media screen and (min-width: 500px){
  footer{
    background-position: calc(100% + 10rem) bottom;
  }
  .footerInner{
    left: -4.5rem;
  }
}
@media screen and (min-width: 600px){
  footer{
    background-position: calc(100% + 12rem) bottom;
  }
  .footerInner{
    left: -5.5rem;
  }
}
@media screen and (min-width: 769px){
  footer{
    background-position: calc(100% + 15rem) bottom;
  }
  .footerInner{
    left: -7rem;
  }
}
@media screen and (min-width: 1000px){
  footer{
    aspect-ratio: 11 / 9.5;
    background-position: calc(100% + 8rem) bottom;
    background-size: 70% auto;
  }
  .footerInner{
    margin-top: 3rem;
    left: -10rem;
  }
}
@media screen and (min-width: 1280px){
  footer{
    aspect-ratio: inherit;
    width: 100%;
    height: 1150px;
    background-position: calc(50% + 250px) bottom;
    background-size: 950px auto;
  }
  .footerInner{
    margin-top: 3rem;
    left: -10rem;
  }
}


/* CTA */

.buttonCTA{
  position: fixed;
  right: 0.5rem;
  bottom: 1rem;
  width: 25vw;
  height: 25vw;
  font-size: 1rem;
  border-radius: 50%;
  background: var(--point);
  color: var(--ink2);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateY(10px);
  z-index: 300;
}
.buttonCTA.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.buttonCTA.is-hide{
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.buttonCTA::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;box-sizing: border-box;
  border-right: var(--light) 0.3rem solid;
  border-bottom: var(--light) 0.3rem solid;
}
.buttonCTA span{
  width: 100%;
  display: block;
  font-weight: 900;
  line-height: 5vw;
  text-align: center;
}
.buttonCTA span{
  font-size: 3.8vw;
  letter-spacing: 0.08em;
}
.buttonCTA img{
  margin: 1.1vw 0 -2vw;
  width: 11.4vw;
}
.buttonCTA:hover{
  transform: scale(1.05) translateY(-2px);
}
@media screen and (min-width: 450px){
  .buttonCTA{
    width: 7rem;
    height: 7rem;
  }
  .buttonCTA::before{
    border-right: var(--light) 0.3rem solid;
    border-bottom: var(--light) 0.3rem solid;
  }
  .buttonCTA span{
    line-height: 1.5rem;
  }
  .buttonCTA span{
    font-size: 1.1rem;
  }
  .buttonCTA img{
    margin: 0.2rem 0 -0.5rem;
    width: 3.1rem;
  }
}
@media screen and (min-width: 600px){
  .buttonCTA{
    right: 1rem;
    width: 8rem;
    height: 8rem;
  }
  .buttonCTA::before{
    border-right: var(--light) 0.4rem solid;
    border-bottom: var(--light) 0.4rem solid;
  }
  .buttonCTA span{
    font-size: 1.2rem;
  }
  .buttonCTA img{
    margin: 0.3rem 0 -0.5rem;
    width: 3.5rem;
  }
}
@media (min-aspect-ratio: 1 / 1){
  .buttonCTA{
    width: 7rem;
    height: 7rem;
  }
  .buttonCTA::before{
    border-right: var(--light) 0.3rem solid;
    border-bottom: var(--light) 0.3rem solid;
  }
  .buttonCTA span{
    line-height: 1.5rem;
  }
  .buttonCTA span{
    font-size: 1.1rem;
  }
  .buttonCTA img{
    margin: 0.2rem 0 -0.5rem;
    width: 3.1rem;
  }
}
@media screen and (min-width: 1100px){
  .buttonCTA{
    right: 2rem;
    bottom: 2rem;
    width: 9rem;
    height: 9rem;
  }
  .buttonCTA span{
    font-size: 1.3rem;
  }
  .buttonCTA img{
    margin: 0.5rem 0 -0.5rem;
    width: 4rem;
  }
}


/* scroll-up */

.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}