:root{
  --content-width: 780px;
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Montserrat", sans-serif;
  --font-awesome: 'Font Awesome 6 Free';
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 10px;
}
body{
  font-family: var(--font-ja);
}
ul{
  list-style: none;

  margin: 0;
  padding: 0;
}
p{
  margin: 0;
}
img{
  display: block;
  width: 100%;
}
a{
  color: inherit;
  text-decoration: none;
}
@media (max-width: 780px){
  html{
    font-size: calc(100vw * 10 / 780);
  }
}


.wrap{
  background: #FFFCEE;
  width: min(100%, var(--content-width));
  margin: auto;
  overflow: hidden;
}
.en{
  font-family: var(--font-en);
}


/* header */
#header{
  position: fixed;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  width: min(100%, var(--content-width));
  z-index: 5;
}


/* footer */
#footer{
  position: fixed;
  inset: auto auto 0 50%;
  translate: -50% 0;
  width: min(100%, var(--content-width));
  z-index: 5;
}
#footer .grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#footer .grid li:nth-child(1){
  position: relative;
  grid-column: span 2;
}
#footer .grid li:nth-child(1)::before{
  content: '';
  background: url(../img/footer01_a.png) no-repeat center / cover;
  position: absolute;
  inset: 50% 4% auto auto;
  translate: 0 -50%;
  width: 32%;
  aspect-ratio: 1 / 1;
  animation: footerAnim .5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes footerAnim{
  from {
    transform: scale(.9, .9);
  }
  to {
    transform: scale(1, 1);
  }
}


/* main */
main{
  padding: 15.3% 0 23%;
}
main .img{
  position: relative;
}
main .img a{
  display: block;
  position: absolute;
  left: 5%;
  width: calc(90%);
}
main .img a.click::after{
  content: '';
  background: url(../img/ico-click.png) no-repeat center / cover;
  position: absolute;
  inset: 50% -4.5% auto auto;
  translate: 0 -50%;
  width: 16%;
  aspect-ratio: 109 / 74;
  animation: wobbleSoft 1.2s infinite ease-in-out;
}
@keyframes wobbleSoft {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(6px); }
  60%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}
main .movie{
  display: block;
  position: absolute;
  left: 5%;
  width: calc(90%);
  height: 0;
  padding-top: 56.25%;
}
main .movie iframe{
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  border: none;
}

main .img a.btn01{
  bottom: 11%;
}
main .img a.btn02{
  bottom: 10.1%;
}
main .img a.btn03{
  bottom: 0;
}
main .img a.btn04{
  bottom: 1.2%;
}
main .img a.btn05{
  top: 1%;
}
main .img a.btn06{
  bottom: 1%;
}
main .img a.btn07{
  bottom: 0;
}
main .img a.btn08{
  top: 0;
  translate: 0 -50%;
}
main .img a.btn09{
  top: 8%;
}
main .movie01{
  bottom: 16.2%;
}


main .img .txt_area01 .day{
  color: #fff;
  position: absolute;
  inset: auto auto 10% 50%;
  translate: -50% 0;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
main .img .txt_area01 .day small{
  display: block;
  font-size: 3.2rem;
}
main .img .txt_area01 .num{
  color: #FFDC1F;
  position: absolute;
  inset: auto auto 3.5% 47.5%;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1.2;
}

main .faq{
  counter-reset: num 0;
  padding: 6rem 5% 0;
}
main .faq .ttl{
  background: #005BC4;
  color: #fff;
  padding: 2rem 0;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  border-radius: 4rem;
}
main .faq .block{
  padding-top: 4rem;
}
main .faq .block .block_ttl{
  color: #005BC4;
  padding-bottom: 2rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
main .faq .block .block_list li{
  background: #fff;
  border-radius: 4rem;
}
main .faq .block .block_list li + li{
  margin-top: 2rem;
}
main .faq .block .block_list details summary{
  background: #D5E8FF;
  position: relative;
  margin-left: 3.5rem;
  padding: 1rem 4rem 1rem 4.6rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.55;
  border-radius: 0 4rem 4rem 4rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, .16);
  user-select: none;
  cursor: pointer;
}
main .faq .block .block_list details summary::before{
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  background: #005BC4;
  color: #fff;
  display: block;
  position: absolute;
  inset: 0 auto auto -3.5rem;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
  font-weight: 700;
  font-family: var(--font-en);
  line-height: 7rem;
  text-align: center;
  border-radius: 50%;
}
main .faq .block .block_list details summary::after{
  content: '\f0d7';
  font-family: var(--font-awesome);
  position: absolute;
  inset: 50% 2rem auto auto;
  translate: 0 -50%;
  line-height: 1;
}
main .faq .block .block_list details[open] summary::after{
  content: '\f0d8';
}
main .faq .block .block_list details p{
  padding: 2rem 3rem;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.5;
}

main .policy{
  background: #FFFCED;
  padding-bottom: 6rem;
}
main .policy a{
  background: #FFDC1F;
  display: block;
  width: calc(90%);
  margin: auto;
  padding: 2rem 0;
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  border-radius: 100px;
}