header {
    display: none;
}


body{
   font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
   color: #333333;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   margin: 0;
   min-width: 320px;
   line-break: strict;
}

main,
.is-show {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  margin: 0;
}
.sp{
  display: none;
}
a{text-decoration:none;
  display: block;
  transition: .5s;
}
a:hover{
  opacity: 0.8;
  transition: .5s;
}
li{
  list-style: none;
}
section,div{
  margin: 0;
  padding: 0;
}
h3{
  font-size: 38px;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}
.h3_after{
  max-width: 276px;
  width: 42.857142857vw;
  margin: 0 auto 30px;
}
p{
  color: #333;
  font-size: 21px;
  font-weight: 400;
  text-align: center;
  line-height: 2;
}
p.lh17{line-height: 1.7;}
tbody tr td{
  color: #333;
  font-size: 18px;
  text-align: left;
}
p.copy{
  font-weight: normal;
}
.small{font-size: 18px;}
.bold{font-weight: bold;}
.marker{background: linear-gradient(transparent 0, #ffff99 0);}
.flex{display: flex;}

/* content style */
img{
  max-width: 100%;
  margin: 0;
}
.fixed_banner{
  display: none;
}
footer{
  background-color: #fff;
}
header{
  display: none;
  position: fixed;
  width: 100%;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 99;
}

.is-show{
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}


/* contents */
.contents{
  max-width: 644px;
  width: 100%;
  height: 100%;
  /* box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3); */
  margin: 0;
  margin-left: auto;
  background-color: #fff;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
}

.wrapper{
  width: 90%;
  margin: 0 auto;
}

.block{
  max-width: 480px;
  width: 95%;
  margin: 0 auto;
}

.fv-bg,.campaign_1_bg{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.fv-bg video,
.campaign_1_bg video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 101%;
  min-height: 101%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  will-change: transform;
}

.fv{
  position: absolute;
  height: 100%;
  max-width: 644px;
  width: 100%;
  top: 0;
  padding-top: 15vh;
  z-index: 2;
}
.fv-cont{
  position: relative;
  width: 90%;
  margin: 0 auto;
  max-width: 470px;
  height: 100%;
}

.fv_scroll{
  position: absolute;
  bottom: 8vh;
  max-width: 90px;
  margin: 0 auto;
  left: calc(50% - 45px);
}
.fuwafuwa01{
  animation: fuwafuwa01 4.2s infinite ease-in-out;
}

@keyframes fuwafuwa01 {
  0% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(0px) rotate(-3deg);
  }
  100% {
    transform: translateY(-15px) rotate(2deg);
  }
}


.cont_introduction{
  position: relative;
  z-index: 2;
  background-color: #fff;
}
.introduction_bg,
.reason_bg{
  position: absolute;
  top: -4vh;
}
.introduction_wrapper{
  position: relative;
  padding-top: 80px;
}
.introduction_block{
  margin-bottom: 100px;
}
.cont_introduction p{
  margin-bottom: 30px;
}

.campaign_1{
  position: relative;
  overflow: hidden;
}
.campaign_1_bg{
  height: 93vh;
}
.campaign_1_wrapper{
  position: absolute;
  top:0;
  z-index: 2;
  width: 100%;
}
.campaign_cont{
  position: relative;
  padding: 50px 0 80px;
}
.campaign-ttl{
  max-width: 520px;
  width: 100%;
  margin: 0 auto 20px;
}
.campaign_img01{
  max-width: 520px;
  width: 100%;
  margin: 0 auto 30px;
}
.campaign_1 p{
  color: #fff;
  font-weight: bold;
      text-shadow: #233e58 0 0 0.2em, #233e58 0 0 0.5em, #233e58 0 0 0.8em;
}
.yellow{
  color: #ffff33;
}


.campaign_2{
  background-color: #fff;
  padding: 80px 0 40px;
}
.campaign_benefit{
  position: relative;
  margin-bottom: 120px;
}
.campaign_bg{
  position: absolute;
}
.campaign_benefit_box{
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.campaign_benefit_ttl{
  position: absolute;
  max-width: 220px;
  left: calc(50% - 110px);
  top: -20px;
}
.campaign_benefit_block{
  position: relative;
  padding: 60px 0 0;
  max-width: 450px;
  width: 71%;
}
.campaign_img03{
  border-bottom: dotted 1px #333;
  padding: 15px 0 30px;
  margin-bottom: 30px;
}
.campaign_img04{
  padding-top: 15px;
}
.campaign_img06{
  position: absolute;
  max-width: 135px;
  width: 20.962732919vw;
  top: 0;
  left: -5vw;
}
.campaign_img07{
  padding-top: 15px;
  max-width: 305px;
  margin: 0 auto 10px;
  width: 47.360248447vw;
}
.campaign_img08{
  margin-top: 25px;
}

.join_terms h5{
  font-size: 26px;
  color: #00cccc;
  text-align: center;
  margin-bottom: 20px;
}
.join_terms h6{
  font-size: 26px;
  margin-bottom: 10px;
}
.notes td{
  vertical-align: baseline;
}
.join_terms .notes{
  margin-bottom: 50px;
}
.join_img01{
  margin-bottom: 80px;
}
.campaign_btn_box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.campaign_btn{
  width: 48.5%;
  max-width: 280px;
}


.cont_reason{
  position: relative;
  z-index: 2;
  padding: 80px 0 100px;
  text-align: center;
  margin: 0 auto;
  background-color: #ffeef4;
}
.cont_reason h3{
  color: #333
}
.reason_block{
  margin-top: 60px;
}
.reason{
  margin: 0 auto 40px;
  max-width: 530px;
  width: 81.98757764vw;
}
.reason_point{
  max-width: 530px;
  width: 81.98757764vw;
  margin: 0 auto 20px;
}
.reason .flex{
  justify-content: space-between;
}
.reason p{
  text-align: left;
  font-weight: 500;
}
.reason_photo{
  max-width: 172px;
  width: 25.4062038vw;
}
.reason_photo06{
  max-width: 240px;
  width: 35.4505169vw;
}



.cont_flow{
  background-color: #d9ffff;
  padding: 80px 0 100px;
}
.cont_flow h5{
  font-size: 26px;
  margin-bottom: 10px;
}
.flow_img01{
  margin: 30px auto 50px;
  max-width: 450px;
  width: 70vw;
}
.flow_box{
  text-align: center;
  margin: 0 auto 50px;
}
.flow_number{
  width: 33px;
  margin: 0 auto 5px;
}
.flow_photo{
  margin: 20px auto 50px;
  max-width: 450px;
}
.notes_small{
  margin: 0 auto;
}
.notes_small td{
  font-size: 14px;
}
.flow_box .flex{
  justify-content: center;
  margin-top: 15px;
}
.flow_box .flex .schedule{
  background-color: #333;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  display: block;
  padding: 5px 15px;
  margin-right: 10px;
}
.flow_img08{
  max-width: 355px;
  margin: 20px 0 40px auto;
  width: 55.124223602vw;
}
.flow_after_follow{
  position: relative;
}
.flow_bg{
  position: absolute;
  margin: 0 auto;
  width: 90%;
  left: 5%;
}
.after_follow_box{
  position: relative;
  text-align: center;
  padding: 50px 0 50px;
}
.after_follow_box h5{
  font-size: 26px;
  color: #00cccc;
  margin-bottom: 20px;
}
.flow_img09{
  position: absolute;
  width: 80px;
  top: 0;
  left: calc(50% - 230px);
}
.after_follow_box p{
  margin-bottom: 30px;
}
.btn_tolicense {
  max-width: 492px;
  width: 72.7vw;
  margin: 0 auto 80px;
}
.btn_totour{
  max-width: 492px;
  width: 72.7vw;
  margin: 0 auto;
}
.photo_slide .swiper-slide{
  max-width: 320px;
  width: 49.689440994vw;
  margin: 0 5px 0;
}
.skyblue{
  color: #00cccc;
}




.cont_fee{
  padding: 80px 0 100px;
  text-align: center;
}
.cont_fee h5{
  font-size: 26px;
  margin-bottom: 10px;
}
.fee_img01{
  max-width: 580px;
  margin: 0 auto 50px;
}
.fee_img02{
  max-width: 580px;
  margin: 0 auto 50px;
}

.cont_join{
  background-color: #e5ffff;
  padding: 80px 0 100px;
}
.btn_toonline{
  max-width: 492px;
  width: 72.7vw;
  margin: 0 auto;
}

.cont_voice{
  padding: 80px 0 100px;
}
.voice_box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.voice_img{
  max-width: 140px;
  width: 21.739130435vw;
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.voice_txt{
  width: 75vw;
  padding: 4% 3.4%;
  border-radius: 20px;
}
.voice_txt p{
  text-align: left;
}
.voice_txt01{
  margin-left: 3vw;
  background-color: #ffffd6;
}
.voice_box02{
  flex-direction: row-reverse;
}
.voice_txt02{
  background-color: #d9ffff;
  margin-right: 3vw;
}



/* --- 既存のスタイル --- */
.qa-item {
  max-width: 520px;
  border: solid 1px #000;
  border-radius: 20px;
  padding: 5%;
  margin: 0 auto 30px;
  width: 80vw;
}

.qa-item p {
  text-align: left;
}

.question {
  border-bottom: dotted 1px #000;
  padding-bottom: 10px;
  cursor: pointer;
  /* クリックできることを示す */
}

.question p {
  color: #00cccc;
}

.question_img {
  width: 28px;
  margin-right: 5px;
}

.answer_img {
  width: 30px;
  margin-right: 5px;
}

.answer_txt {
  width: calc(100% - 35px);
}

.answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;
}

.answer.open {
  grid-template-rows: 1fr;
  /* 開く */
}

.answer-inner {
  min-height: 0;
  margin-top: 15px;
}
.answer.open .answer-inner{
  padding: 0 0 5px;
}

/* --- アイコンのアニメーション --- */
.toggle_btn {
  margin-left: auto;
}

.toggle-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 20px;
  /* サイズ微調整 */
  height: 20px;
  margin-right: 8px;
}

.bar {
  position: absolute;
  background-color: #333;
  transition: all 0.3s ease;
}

.bar.horizontal {
  width: 100%;
  height: 2px;
}

.bar.vertical {
  width: 2px;
  height: 100%;
}

/* 開いた時に縦棒を回転させて横棒に重ねる（「−」にする） */
.toggle-icon.open .vertical {
  transform: rotate(90deg);
  /* opacity: 0; にしても良いですが、回転させるとより「ぬるっ」と見えます */
}


footer{

}
.footer-wrap{
  margin: 0 auto;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
}
.footer-logo{
  width: 130px;
}
.footer-credit{
  font-size:12px;
}



/* modal */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 644px;
  background-color: rgba(255,255,255,1);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 100;
}
.modal_wrap{

}
.container{
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  z-index: 100;
}
.modal_inner {
  display: table-cell;
  vertical-align: middle;
}

.modal {
  max-width: 550px;
  width: 85%;
  margin: 0 auto;
  position: relative;
  background-color: none;
  padding: 0;
  top: 50px;
  right: 0;
  text-align: center;
}
.modal h3{
  font-size: 34px;
  margin-bottom: 30px;
}
.modal h5{
  margin: 50px auto 20px;
  color: #001ecf;
  text-align: center;
  font-size: 26px;
}
.popup_img{
  margin-bottom: 20px;
}
.modal .notes{
  margin-bottom: 30px;
  text-align: left;
}
.modal .popup_btn01{
  background: transparent;
  border: none;
  position: absolute;
  width: 65px;
  height: 65px;
  top: -45px;
  right: -35px;
}
.modal button {
  outline: none;
}
.modalopen:hover{
  opacity: 0.8;
}


#modal02 .modal{
  max-width: 550px;
  width: 95%;
}
#modal02 .modal .popup_btn01{
  right: -35px;
}
.shop-list{
  margin: 30px auto;
}
.shop-list-ttl{
  text-align: left;
  font-weight: bold;
  color: #193c90;
  font-size: 26px;
  margin-bottom: 10px;
}
.shop-list .flex{
  justify-content: space-between;
}
a.shop-btn{
  display: block;
  width: 49.5%;
  margin-bottom: 8px;
  padding: 10px 5px;
  border-radius: 10px;
  border: solid 2px #193c90;
  font-weight: bold;
  color: #193c90;
  text-align: center;
  line-height: 1.2;
  font-size: 18px;
}
.shop-btn-small{
  font-size: 0.9em;
}

.popup_btn02{
  width: 280px;
  height: 70px;
  margin: 0 auto 80px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  opacity: 1;
  transition: .5s;
  border:none;
  font-size: 22px;
}
.popup_btn02:hover{
  opacity: .7;
  transition: .5s;
}


/* fixed */
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fixed_bg img{
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

.fixed_cont{
  position: absolute;
  z-index: 1;
  width: calc(100% - 644px);
  margin: 0;
  margin-right: auto;
  top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.fixed_title {
  max-width: 800px;
  width: 55%;
  margin: 0 auto 30px;
}

.fixed_btn{
  display: flex;
  justify-content: space-between;
  max-width: 580px;
  margin: 0 auto 50px;
  width: 46.4%;
  z-index: 1;
  cursor: pointer;
}

.fixed_nav{
  display: flex;
  margin-top: auto;
}
.fixed_nav li{
  margin-bottom: 10px;
}
.fixed_nav a{
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  text-shadow: #233e58 0 0 0.2em, #233e58 0 0 0.5em, #233e58 0 0 0.8em;
}


@media screen and (max-width: 1400px){
  .fixed_title,
  .fixed_btn{
    width: 85%;
  }
  .fixed_title {
    max-width: 828px;
    width: 64.9%;
    margin: 0 auto 30px;
  }
  .fixed_nav a{
    font-size: 1.6666666666666vw;
  }

}


@media screen and (max-width: 968px){
  header{
    display: block;
    position: fixed;
    width: 100%;
    max-width: 644px;
    top: 0;
    right: calc(50% - 322px);
  }
    /* ハンバーガーメニューのスタイル */
  .hamburger {
      width: 60px;
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      position: fixed;
      top: 25px;
      right: calc(50% - 297px);
      z-index: 99;
  }

  .hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transition: 0.3s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0.1, 0.3), 0 2px 5px rgba(0, 0, 0.1, 0.4);
  }

  /* ナビゲーションメニューのスタイル */
  .sp_nav {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      max-width: 644px;
      height: 100vh;
      background: #00cccc;
      transition: right 0.3s ease-in-out;
      padding-top: 60px;
  }
  .sp_nav_list{
    padding-left: 0;
  }

  .sp_nav ul {
      list-style: none;
      text-align: center;
  }

  .sp_nav ul li {
      margin: 20px 0;
  }

  .sp_nav ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 3.6vw;
  }
  .sp_nav_list{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* メニューが開いたとき */
  .sp_nav.active {
      right: 0;
      left: calc(50% - 322px);
  }

  /* ハンバーガーメニューのアニメーション */
  .hamburger.active span:nth-child(1) {
      transform: translateY(19px) rotate(45deg);
      box-shadow:0 0 0 0;
  }

  .hamburger.active span:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
      transform: translateY(-19px) rotate(-45deg);
      box-shadow:0 0 0 0;
  }



  .contents{
    margin: 0 auto;
  }
  .fv_scroll{
    bottom: 22vh;
  }

  footer{
    margin-bottom: 25vw;
  }

  .fixed_title,.fixed_btn,.fixed_nav{
    display: none;
  }
  .fixed_banner{
    display: block;
    position: fixed;
    width: 100%;
    max-width: 644px;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
    z-index: 3;
    background-color: #fff;
  }
  .fixed_banner_cont{
    position: relative;
  }
  .banner_bg{
    position: absolute;
    width: 100%;
    max-width: 644px;
    bottom: 0;
  }
    .banner_bg img {
      width: 100%;
      vertical-align: bottom;
      /* 画像下の謎の隙間を消す */
    }
  .fixed_banner_btn{
    position: relative;
    max-width: 492px;
    width: 72.7vw;
    margin: 0 auto;
    padding-bottom: 15px;
    cursor: pointer;
  }

  .overlay {
    right: calc(50% - 322px);
  }

}

@media screen and (max-width: 644px){
  .hamburger{
    right: 20px;
  }
  .sp_nav.active{
    left: 0;
  }
  .sp_nav ul li a{
    font-size: 4.8vw;
  }
  p{font-size: 3.6vw;}
  .small{font-size: 3.3vw;}

  h2{
    width: 85%;
    margin: 0 auto;
  }
  h3{
    font-size: 5.9vw;
  }
  .cont_fee h5,
  .cont_flow h5,
  .after_follow_box h5{
    font-size: 4vw;
  }
  .fv_scroll{
    width: 16vw;
    left: calc(50% - 8vw);
    bottom: 15vh;
  }
  .introduction_wrapper{
    padding-top: 12.5vw;
  }
  .introduction_block{
    margin-bottom: 15.5vw;
  }
  .reason p {
   font-size: 3.3vw;
  }
  .campaign_1_bg{
    height: 130vw;
  }
  .campaign-ttl{
    margin-bottom: 3.125vw;
  }
  .campaign_img01{
    margin-bottom: 4.658350932vw;
  }
  .campaign_2,
  .cont_reason,
  .cont_flow,
  .cont_fee,
  .cont_voice,
  .cont_join{
    padding: 12.422360248vw 0 15.527950311vw;
  }
  .campaign_2,
  .cont_fee{
    padding-bottom: 5vw;
  }

  .campaign_benefit{
    margin-bottom: 18vw;
  }
  .campaign_benefit_ttl{
    width: 40vw;
    left: calc(50% - 20vw);
    top: -3.5vw;
  }
  .campaign_benefit_block{
    padding-top: 12.422360248vw;
  }
  .campaign_img03{
    width: 95%;
    margin: 0 auto 4.6vw;
    padding: 2.3vw 0 4.6vw;
  }
  .campaign_img04{
    width: 95%;
    margin: 0 auto;
  }
  .join_terms h5,.join_terms h6{
    font-size: 4.8vw;
  }
  .join_img01{
     margin-bottom: 10vw;
  }
  tbody tr td{
    font-size: 3.1055900621vw;
  }
  .notes_small td{
    font-size: 2.85vw;
  }
  .after_follow_box{
    padding: 7.776vw 0;
  }
  .cont_voice{

  }
  .question_img,
  .answer_img{
    width: 4.3478vw;
  }
  .toggle-icon{
    width: 6.6vw;
    height: 6.6vw;
  }
  .bar.vertical{
    height: 6.6vw;
  }
    footer {
      padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

  .footer-wrap{
    padding: 4.4444444vw;
  }
  .footer-logo{
    width: 28vw;
  }
  .footer-credit{
    font-size: 2.6666666vw;
  }

  .fixed_banner_btn{

  }

  .overlay{
    right: 0;
  }
  .modal h3{
    font-size: 5.27vw;
  }
  .modal h5{
    font-size: 4vw;
  }
  .modal .popup_btn01{
    width: 14vw;
    height: 14vw;
    right: -13vw;
    top: -8vw;
  }
  #modal02 .modal .popup_btn01{
   right: -2vw;
  }
   a.shop-btn{
    font-size: 3.1vw;
  }
  .shop-list-ttl{
    font-size: 20px;
    margin-bottom: 0;
  }


  .fixed{display: none;}
}

@media screen and (max-width: 450px){
  .sp{display: block;}
  .hamburger{
    width: 50px;
    height: 34px;
  }
  .hamburger.active span:nth-child(1){
    transform: translateY(16px) rotate(45deg);
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-16px) rotate(-45deg);
}
  .sp_nav ul li a{
    font-size: 6vw;
  }
  p,tbody tr td{font-size: 3.8vw;}
  .block{
    width: 95%;
  }
  h3{
    font-size: 8.444444vw;
  }
  .small{font-size: 3.2vw;}
  .wrapper{
    width: 95%;
  }

  .campaign_img03{
    width: 73%;
  }
  .campaign_img04{
    width: 73%;
  }
  .campaign_img06{
    left: 3vw;
  }
  .campaign_img08{
    width: 73%;
    margin: 2vw auto 0;
  }
  .join_terms h5,
  .join_terms h6{
    font-size: 5.7777vw;
  }
  .reason{
    width: 90vw;
  }
  .reason_point{
    width: 100%;
  }
  .reason p{
   font-size: 3.8vw;
  }

  .h3_after{
    width: 61.33333333vw;
  }
  .flow_img01{
    width: 85vw;
  margin: 6.6666vw auto 11.1111111vw;
  }
  .cont_flow h5,
  .cont_fee h5{
    font-size: 5.7777vw;
  }
  .flow_number{
    width: 8.333333vw;
  }
  .flow_box .flex .schedule{
    font-size: 3.3vw;
    padding: 1.1111111vw 3.3333333333vw;
  }
  .notes_small td{
    font-size: 3.111111vw;
  }
  .after_follow_box{
    padding: 11.111111vw 0;
  }
  .flow_img09{
    width: 16vw;
    left: 1vw;
  }
  .voice_txt{
    padding: 5vw 4vw;
  }
  .qa-item{
    width: 95%;
  }
  .question_img,
  .answer_img{
    width: 6.2222222vw;
  }



  .modal{
    width: 90%;
  }
  .modal td{
    font-size: 14px;
  }
  .popup_btn02{
    width: 62.5vw;
  height: 16vw;
  font-size: 18px;
  }
  .modal .popup_btn01{
    width: 14vw;
    height: 14vw;
    right: -3vw;
    top: -11vw;
  }

}