@charset "utf-8";

:root{
  --content_width: 100vw;
  --ar_scale: 1;
}
html, body{
  position: relative;
  width: 100%;

  touch-action: manipulation;
}
*{
  background-repeat: no-repeat;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -webkit-touch-callout: none;
}
img, video {
  width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  pointer-events: none;
}
a, button {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  text-decoration: none;
}
button{
  cursor: pointer;
}
*:focus{
  outline: none;
}
h1, h2, h3{
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
ul, li{
  padding: 0;
  margin: 0;
  list-style: none;
}
button{
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}
body{
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #323232;
  background-color: #fff;
}
a, button{
  color: #323232;
}
.content_wrapper{
  a:link {
    color: #323232;  
  }
}

.content_outer,
.content_outer .content_inner{
  position: relative;
  width: 100%;
  min-height: 100%;
}
.content_outer .pc_wrapper{
  display: none;
}

.content_wrapper{
  display: none;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  contain: paint;
}
.top .content_wrapper.content_top,
.ar .content_wrapper.content_ar,
.err .content_wrapper.content_err{
  display: block;
}

.content_main{
  position: relative;
  width: 100%;
}



footer{
  padding: 30px 10px 15px;
  font-size: 10px;
  color: #222;
  background-color: #fff;
  border-top: 1px solid #dcd4cc;
}
footer .footer_link_block{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-bottom: 10px;
}
footer .footer_logo{
  display: block;
  width: 207px;
  max-width: 100%;
  margin: 20px 0 10px;
}
footer .copyright{
  font-size: 9px;
}



.kv_block{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: calc(75 * var(--content_width) / 750) 0 calc(175 * var(--content_width) / 750);
  background-image: url(../images/top_kv.jpg);
  background-size: 100% 100%;
  background-position: center;
}
.kv_block .kv_img{
  width: calc(706 * var(--content_width) / 750);
  line-height: 0;
  margin-bottom: calc(45 * var(--content_width) / 750);
}
.kv_block .btn_start{
  width: calc(638 * var(--content_width) / 750);
  margin-bottom: calc(80 * var(--content_width) / 750);
  line-height: 0;
}
.kv_block .txt_onlysp{
  display: none;
}

.kv_block .content_period{
  width: calc(665 * var(--content_width) / 750);
  margin: 0 auto;
}

.section2{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(-91 * var(--content_width) / 750);
  padding: calc(125 * var(--content_width) / 750) 0 calc(135 * var(--content_width) / 750);
  background-image: url(../images/bg_section2.png);
  background-size: 100% 100%;
  background-position: top center;
}
.section2 .section_title{
  width: calc(310 * var(--content_width) / 750);
  margin-bottom: calc(20 * var(--content_width) / 750);
  line-height: 0;
}

.section2 .howto_wrapper{
  position: relative;
  width: 100%;
  height: calc(885 * var(--content_width) / 750);
  overflow: hidden;
}
.section2 .howto_wrapper .howto_inner{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  left: 0;
  width: 400%;
  transition: left .3s;
}
.section2 .howto_wrapper .howto_inner.dragging{
  transition: none;
}
.section2.page2 .howto_wrapper .howto_inner{ left: -100%; }
.section2.page3 .howto_wrapper .howto_inner{ left: -200%; }
.section2.page4 .howto_wrapper .howto_inner{ left: -300%; }

.section2 .howto_wrapper .howto_inner .howto_block{
  width: calc(750 * var(--content_width) / 750);
  line-height: 0;
}
.section2 .howto_wrapper .btn_page{
  position: absolute;
  top: calc(525 * var(--content_width) / 750);
  width: calc(63 * var(--content_width) / 750);
  height: calc(80 * var(--content_width) / 750);
  line-height: 0;
}
.section2 .howto_wrapper .btn_page.btn_page_prev{ left: calc(10 * var(--content_width) / 750); }
.section2 .howto_wrapper .btn_page.btn_page_next{ right: calc(10 * var(--content_width) / 750); }

.section2.page1 .howto_wrapper .btn_page.btn_page_prev,
.section2.page4 .howto_wrapper .btn_page.btn_page_next{
  display: none;
}

.pager_block{
  display: flex;
  justify-content: center;
  gap: calc(15 * var(--content_width) / 750);
}
.pager_block .pager_icon{
  width: calc(30 * var(--content_width) / 750);
  height: calc(30 * var(--content_width) / 750);
  background-image: url(../images/img_pager_off.png);
  background-size: calc(22 * var(--content_width) / 750) calc(22 * var(--content_width) / 750);
  background-position: center center;
}
.section2.page1 .pager_block .pager_icon1,
.section2.page2 .pager_block .pager_icon2,
.section2.page3 .pager_block .pager_icon3,
.section2.page4 .pager_block .pager_icon4{
  background-image: url(../images/img_pager_on.png);
  background-size: calc(30 * var(--content_width) / 750) calc(30 * var(--content_width) / 750);
}

.section3{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(-102 * var(--content_width) / 750);
  padding: calc(125 * var(--content_width) / 750) 0;
  background-image: url(../images/bg_section3.png);
  background-size: 100% auto;
  background-position: top center;
}
.section3 .section_title{
  width: calc(703 * var(--content_width) / 750);
  margin-bottom: calc(30 * var(--content_width) / 750);
}
.section3 .package_wrapper{
  display: flex;
  justify-content: center;
  gap: calc(27 * var(--content_width) / 750);
}
.section3 .package_wrapper .package_block{
  width: calc(203 * var(--content_width) / 750);
}
.section3 .package_wrapper .package_block.package4{
  width: calc(264 * var(--content_width) / 750);
  margin-left: calc(-10 * var(--content_width) / 750);
}
.section3 .package_wrapper .package_others{
  display: flex;
  flex-wrap: wrap;
  width: calc(340 * var(--content_width) / 750);
  gap: calc(35 * var(--content_width) / 750) calc(40 * var(--content_width) / 750);
  margin-left: calc(5 * var(--content_width) / 750);
}
.section3 .package_wrapper .package_others .package_other_block{
  width: calc(150 * var(--content_width) / 750);
  line-height: 0;
}
.section3 .package_wrapper+.package_wrapper{
  margin-top: calc(40 * var(--content_width) / 750);
}

.section4{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(-91 * var(--content_width) / 750);
  padding: calc(105 * var(--content_width) / 750) 0 calc(145 * var(--content_width) / 750);
  background-image: url(../images/bg_section4.png);
  background-size: 100% 100%;
  background-position: top center;
}
.section4::after{
  content: "";
  position: absolute;
  left: calc(10 * var(--content_width) / 750);
  top: calc(-158 * var(--content_width) / 750);
  width: calc(281 * var(--content_width) / 750);
  height: calc(252 * var(--content_width) / 750);
  background-image: url(../images/img_char.png);
  background-size: 100% 100%;
}
.section4 .section_title{
  width: calc(544 * var(--content_width) / 750);
  margin-bottom: calc(40 * var(--content_width) / 750);
  line-height: 0;
}
.section4 .download_period{
  width: 100%;
  margin-bottom: calc(75 * var(--content_width) / 750);
  line-height: 0;
}


.section4 .download_image_wrapper{
  position: relative;
  width: 100%;
  height: calc(640 * var(--content_width) / 750);
  margin-bottom: calc(50 * var(--content_width) / 750);
  overflow: hidden;
}
.section4 .download_image_wrapper .download_image_inner{
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(20 * var(--content_width) / 750);
  top: 0;
  left: 0;
  padding: 0 calc(55 * var(--content_width) / 750);
  width: calc(3470 * var(--content_width) / 750);
  transition: left .3s;
}
.section4 .download_image_wrapper .download_image_inner.dragging{
  transition: none;
}
.section4.page2 .download_image_wrapper .download_image_inner{ left: calc(-336 * var(--content_width) / 750); }
.section4.page3 .download_image_wrapper .download_image_inner{ left: calc(-672 * var(--content_width) / 750); }
.section4.page4 .download_image_wrapper .download_image_inner{ left: calc(-1008 * var(--content_width) / 750); }
.section4.page5 .download_image_wrapper .download_image_inner{ left: calc(-1344 * var(--content_width) / 750); }
.section4.page6 .download_image_wrapper .download_image_inner{ left: calc(-1680 * var(--content_width) / 750); }
.section4.page7 .download_image_wrapper .download_image_inner{ left: calc(-2016 * var(--content_width) / 750); }
.section4.page8 .download_image_wrapper .download_image_inner{ left: calc(-2352 * var(--content_width) / 750); }
.section4.page9 .download_image_wrapper .download_image_inner{ left: calc(-2688 * var(--content_width) / 750); }
.section4.page10 .download_image_wrapper .download_image_inner{ left: calc(-3024 * var(--content_width) / 750); }

.section4 .download_image_wrapper .download_image_inner .download_image_block{
  display: flex;
  flex-direction: column;
}
.section4 .download_image_wrapper .download_image_inner .download_image_block .download_image{
  display: block;
  width: calc(316 * var(--content_width) / 750);
  border: calc(6 * var(--content_width) / 750) solid #ffffff;
  line-height: 0;
  border-radius: calc(6 * var(--content_width) / 750);
}
.section4 .download_image_wrapper .download_image_inner .download_image_block .download_image img{
  pointer-events: auto;
  -webkit-touch-callout: default;
  user-select: none;
  -webkit-user-select: none;
}
.section4 .download_image_wrapper .download_image_inner .download_image_block .btn_download{
  display: none;
}
.section4 .download_pager{
  margin-bottom: calc(30 * var(--content_width) / 750);
}
.section4.page1 .pager_block .pager_icon1,
.section4.page1 .pager_block .pager_icon2,
.section4.page2 .pager_block .pager_icon2,
.section4.page2 .pager_block .pager_icon3,
.section4.page3 .pager_block .pager_icon3,
.section4.page3 .pager_block .pager_icon4,
.section4.page4 .pager_block .pager_icon4,
.section4.page4 .pager_block .pager_icon5,
.section4.page5 .pager_block .pager_icon5,
.section4.page5 .pager_block .pager_icon6,
.section4.page6 .pager_block .pager_icon6,
.section4.page6 .pager_block .pager_icon7,
.section4.page7 .pager_block .pager_icon7,
.section4.page7 .pager_block .pager_icon8,
.section4.page8 .pager_block .pager_icon8,
.section4.page8 .pager_block .pager_icon9,
.section4.page9 .pager_block .pager_icon9,
.section4.page9 .pager_block .pager_icon10,
.section4.page10 .pager_block .pager_icon10{
  background-image: url(../images/img_pager_on.png);
  background-size: calc(30 * var(--content_width) / 750) calc(30 * var(--content_width) / 750);
}

.section4 .download_image_wrapper .btn_page{
  position: absolute;
  top: calc(280 * var(--content_width) / 750);
  width: calc(63 * var(--content_width) / 750);
  height: calc(80 * var(--content_width) / 750);
  line-height: 0;
}
.section4 .download_image_wrapper .btn_page.btn_page_prev{ left: calc(10 * var(--content_width) / 750); }
.section4 .download_image_wrapper .btn_page.btn_page_next{ right: calc(10 * var(--content_width) / 750); }

.section4.page1 .download_image_wrapper .btn_page.btn_page_prev,
.section4.page9 .download_image_wrapper .btn_page.btn_page_next{
  display: none;
}

.section4 .download_text{
  width: calc(529 * var(--content_width) / 750);
}

.section5{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(-91 * var(--content_width) / 750);
  padding: calc(125 * var(--content_width) / 750) 0 calc(85 * var(--content_width) / 750);
  background-image: url(../images/bg_section5.png);
  background-size: 100% auto;
  background-position: top center;
}
.section5 .section_title{
  width: calc(310 * var(--content_width) / 750);
  margin-bottom: calc(35 * var(--content_width) / 750);
}
.section5 .attention_list{
  font-size: calc(30 * var(--content_width) / 750);
  font-weight: bold;
  line-height: 1.5em;
  margin: 0 calc(50 * var(--content_width) / 750) calc(70 * var(--content_width) / 750);
  padding-left: 1em;
}
.section5 .attention_list li:before{
  content: "・";
  margin-left: -1em;
}
.section5 .attention_list li span{
  display: block;
}
.section5 .attention_list li span::before{
  content: "※";
}
.section5 .btn_chocoball{
  display: block;
  width: calc(711 * var(--content_width) / 750);
  line-height: 0;
  margin-bottom: calc(75 * var(--content_width) / 750);
}
.section5 .share_block{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(50 * var(--content_width) / 750);
}
.section5 .share_block .btn_share{
  display: block;
  width: calc(120 * var(--content_width) / 750);
  line-height: 0;
}

.modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba( 0, 0, 0, 0.3);
  overflow: auto;
}
.modal.active{
  display: block;
}
.modal_wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 100dvh;
  min-height: calc(1300 * var(--content_width) / 750);
}
.modal_wrapper .modal_inner{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(630 * var(--content_width) / 750);
  background-color: #fff;
  border-radius: calc(50 * var(--content_width) / 750);
}
.modal_wrapper .modal_inner .modal_title{
  width: 100%;
  line-height: 0;
}
.modal_wrapper .modal_inner .modal_body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  line-height: 0;
  padding: calc(40 * var(--content_width) / 750) calc(51 * var(--content_width) / 750) calc(70 * var(--content_width) / 750);
  gap: calc(50 * var(--content_width) / 750);
}
.modal_wrapper .modal_inner .btn_modal_close{
  position: absolute;
  top: calc(-50 * var(--content_width) / 750);
  right: calc(-30 * var(--content_width) / 750);
  width: calc(98 * var(--content_width) / 750);
  line-height: 0;
}


.content_wrapper.content_ar{
  height: 100dvh;
}
.content_wrapper.content_ar .ar_canvas{
  width: 100% !important;
  height: 100% !important;
}
.content_wrapper.content_ar .marker_movie{
  display: none;
}

.content_wrapper.content_err{
  height: 100dvh;
}
.content_wrapper.content_err .err_block{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(30 * var(--content_width) / 750);
  width: 100%;
  height: 100%;
}
.content_wrapper.content_err .err_block .err_title{
  font-size: calc(30 * var(--content_width) / 750);
  line-height: 1.5em;
  font-weight: bold;
}
.content_wrapper.content_err .err_block .err_text{
  font-size: calc(24 * var(--content_width) / 750);
  line-height: 1.5em;
  text-align: center;
}

.content_wrapper.content_ar .ui_frame{
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  
  width: calc(var(--ar_scale) * var(--content_width) / 750);
  aspect-ratio: 930 / 1920;
  transform: translate(-50%, -50%); 
}
.content_wrapper.content_ar .ui_frame.active{
  display: block;
}
.content_wrapper.content_ar .ui_frame .btn_back{
  position: absolute;
  bottom: calc(50 * 100% / 1920);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(833 * 100% / 930);
  line-height: 0;
}
  
.content_wrapper.content_ar .ui_frame .btn_change{
  position: absolute;
  top: calc(666 * 100% / 1920);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(833 * 100% / 930);
  line-height: 0;
}

.content_wrapper.content_ar .ui_frame .user_image_block{
  position: absolute;
  top: calc(580 * 100% / 1920);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(475 * 100% / 930);
  aspect-ratio: 930 / 1920;
  line-height: 0;
}
.content_wrapper.content_ar .ui_frame .user_image_block img{
  width: 100%;
  height: 100%;
  
  pointer-events: auto;
  user-select: auto;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
}
.content_wrapper.content_ar .ui_frame .btn_finish{
  position: absolute;
  top: calc(1615 * 100% / 1920);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(833 * 100% / 930);
  line-height: 0;
}

.loading_wrapper{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba( 0, 0, 0, 0.8 );
  z-index: 10000;
}
.loading_wrapper.active{
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading_wrapper .loading_inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(50 * (var(--content_width) / 750));
}


.loading_wrapper .loading_inner .loading_text{
  color: #fff;
  font-size: calc(36 * (var(--content_width) / 750));
  line-height: 1em;
  text-align: center;
}

.loading_wrapper .loading_inner .sk-fading-circle {
  position: relative;
  width: calc(200 * (var(--content_width) / 750));
  height: calc(200 * (var(--content_width) / 750));
}

.loading_wrapper .loading_inner .sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.loading_wrapper .loading_inner .sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.loading_wrapper .loading_inner .sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}