/* =========================================================
		main
========================================================= */

html{ background: #eef7f3;}

.kv { overflow: hidden; padding-top: 75px;}
.kv picture { display: block;}
.kv img {
  display: block;
  width: 1920px;
  max-width: none;
  min-width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.attend{font-size: 12px;}


/* =========================================================
	 intro
========================================================= */
.intro{
  text-align: center;
  background: url(../images/nami_bg.svg) top/cover repeat;
  position: relative;
  z-index: 0;
}


.intro::before{
  content: "";
  position: absolute;
  display: inline-block;
  width: 12%;
  height: 110px;
  left: 2%;
  top: 30%;
  background: url(../images/top/illust1.webp) center/contain no-repeat;
  z-index: -1;
}

.intro::after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 10%;
  height: 110px;
  right: 2%;
  top: 20%;
  background: url(../images/top/illust2.webp) center/contain no-repeat;
  z-index: -1;
}

.intro .ttl_area{ color: var(--main-color);}
.intro .video_area{ width: 60%; margin: 5% auto 0; }



/* =========================================================
	campaign_top
========================================================= */
.campaign_top{
  background: #fff;
  text-align: center;
  position: relative;
  z-index: 0;
}

.campaign_top::before,.campaign_top::after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 12%;
  height: 110px;
  left: 2%;
  top: 30%;
  background: url(../images/top/illust3.webp) center/contain no-repeat;
  z-index: -1;
}

.campaign_top::after{ left: auto; right: 2%; top: 80%;}
.campaign_top .ttl_area{ color: var(--main-color);}
.limit{ text-align: center; display: inline-block;}
.limit_ttl{ background: var(--main-color); color: #fff; display: inline-block; padding: 3px 30px;}
.limit_day{
  background: var(--yellow_color);
  padding: 25px 50px 10px ;
  margin-top: -20px;
  color: var(--main-color);
  font-size: var(--font-18);
}

.limit_day span{ font-size: 140%;}
.campiagn_top_desc{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: left;
  margin-top: 5%;
  justify-content: center;
}

.video_area{ width: 40%;}
.campiagn_top_desc_ttl{
  color: var(--main-color);
  font-size: var(--font-20);
  margin-bottom: 5px;
}


/* =========================================================
	campaign_spot
========================================================= */

.campaign_spot{ background:var( --spot_bg); position: relative; text-align: center; padding: 80px 0; }
.campaign_spot.campaign_stamp{ background: #cbdcee;}

.campain_ashirai{
  width: 40%;
  max-width: 220px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  top:50px;
}

.campaign_spot .wrapper{
  background: #fff;
  border-radius: 20px;
  padding-top: 60px;
  width: 90%;
}

.campaign_spot .ttl_area{ color: var(--sky_color); margin-bottom: 10px;}
.campaign_spot.campaign_stamp .ttl_area{ color: var(--main-color);}
.sample_card_inner{ width: 55%; margin: 30px auto 0;}
.campaign_spot .attend{ text-align: right;}
.campaign_spot .more_btn{ background: var(--sky_color);}
.campaign_spot.campaign_stamp .more_btn{ background: var(--main-color);}
.howto{ width: 90%; margin: 3% auto 0;}
.present{ margin-top: 60px;}

.howto_list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
}

.howto_list .arrow{
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #555555;
  border-right: 0;
  align-self: center;
  flex-shrink: 0;
  margin-top: -90px;
}

.howto_item{ width: 29%;}
.howto_ttl{
  background: #75a2b5;
  color: #fff;
  font-size: var(--font-20);
  padding: 5px 0;
  margin-bottom: 20px;
  border-radius: 5px;
}

.present_ttl{ background: var(--brown_color);}
.howto_item_img{ width: 70%; margin: 0 auto;}
.howto_item_ttl{ color: var(--main-color); margin-top: 10px;}
.howto_item_text{ font-size: var(--font-14);}

.howto_join{
  background: #fcfcfc;
  box-shadow: 0 0 10px 3px #eaeaea;
  text-align: left;
  padding: 3% 5%;
  margin: 40px auto 0;
  width: 85%;
}

.howto_join_inner{
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

.howto_join_img{ width: 20%;}
.howto_join_desc{ width: 70%;}
.howto_join_text{ padding-left: 20px;}
.howto_join_link{
  display: flex;
  border: solid 1px #0076a9;
  background: #ffffff;
  gap: 20px;
  align-items: center;
  padding: 3% 5%;
  margin-top: 15px;
}

.howto_join_qr{ width: 15%;}
.howto_join_message{ width: 80%;  color: var(--main-color); font-size: var(--font-18);}
.present_list{ display: flex; flex-wrap: wrap; gap: 30px 10px; justify-content: space-between;}
.present_item{ background: #fef8cc; padding: 5% 3% 4%; width: 42%;}
.present_item_img{ position: relative;}
.present_num{  position: absolute; width: 70px; top: -30px;}
.present_card{ width: 90%; margin: 0 auto;}
.present_stamp{ width: 80%; margin: 15px auto 5px;}
.present_item_ttl{ color: var(--main-color); font-size: var(--font-18);}
.present_item .attend{ text-align: center;}
.present_attend{ background: #fcfcfc; box-shadow: 0 0 10px 3px #eaeaea; margin-top: 5%; padding: 4%;}

.present_attend_ttl{
  font-weight: 500;
  font-size: 1.125rem;
  position: relative;
  display: inline-block;
}

.present_attend_ttl::before,.present_attend_ttl::after{
  content: "";
  display: inline-block;
  background: url(../images/top/onsen_icon.webp) center/contain no-repeat;
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
    left: -20%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.present_attend_ttl::after{ left:auto; right: -20%;}
.present_attend_list{ text-align: left; margin-top: 10px;}
.present_attend_sub{font-size: var(--font-14);}
.present_attend_sub span{color: var(--main-color);}
.campaign_stamp .attend.att_lf{ text-align: left; margin-top: 20px;}

.top_model{ background: #fff; position: relative; z-index: 0;}
.top_model::after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 10%;
  height: 110px;
  right: 10%;
  top: 40%;
  background: url(../images/top/illust4.webp) center/contain no-repeat;
  z-index: -1;
}

.top_model .wrapper{ padding-bottom: 0;}
.top_model .bg{
  text-align: center;
  background: url(../images/nami_bg.svg) top/cover repeat;
  position: relative;
  z-index: 0;
}

.top_model .inner{ background: rgba(255,255,255,0.4); padding-bottom: 80px;}
.top_model .ttl_area{ background: var(--yellow_color); padding: 15px 0;}
.top_model .ttl_sub{ color: var(--sky_color);}

.top_model .ttl_sub::before,.top_model .ttl_sub::after{ background: var(--sky_color);}
.top_model .ttl_main{ color: var(--main-color);}
.top_model .video_area{ width: 60%; margin: 5% auto 3%;}
.model_slider { width: 100%; overflow: hidden; margin-top: 50px;}

.model_slider .swiper {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    overflow: visible;
}

.model_slider .swiper-slide { width: 340px; height: auto; box-sizing: border-box;}
.model_link a { display: block;}
.model_link img { display: block; width: 100%; height: auto;}

.model-pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.model-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 !important;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--sky_color);
    border-radius: 50%;
    opacity: 1;
}

.model-pagination .swiper-pagination-bullet-active { background: var(--sky_color);}
.model_slider .swiper-wrapper { transition-timing-function: linear;}



@media screen and (max-width: 980px){
    .kv img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        left: auto;
        transform: none;
  }

}


@media screen and (max-width: 767px) {
  .kv {padding-top: 65px;}
  .attend{font-size: 11px;}
  .model_slider .swiper-slide { width: 78%;}
  .model-pagination.swiper-pagination { gap: 12px; margin-top: 24px; }
  .model-pagination .swiper-pagination-bullet { width: 12px; height: 12px;}
  .intro::before{ top: 13%; width: 13%; left: -2%;}
  .intro::after{ width: 12%; height: 36px; top: 4%;}
  .intro .video_area{ width: 100%;}
  .limit{ margin-top: 10px; font-size: var(--font-14);}
  .limit_day{ font-size: var(--font-14); padding: 20px 16px 10px;}
  .campaign_top::before{ width: 20%; top: 13%; left: -4%;}
  .campaign_top::after{ width: 20%; bottom: 0; right: -4%; top: auto; height: 50px;}
  .campiagn_top_desc{ flex-direction: column-reverse; margin-top: 3%;}
  .campiagn_top_desc_inner{ text-align: center;}
  .campiagn_top_desc_ttl{ font-size: var(--font-18); margin-bottom: 0;}
  .campiagn_top_desc_text{ font-size: var(--font-14); margin-top: 5px;}
  .video_area{ width: 100%;}
  .campaign_spot{ padding: 50px 0;}
  .campain_ashirai{ top: 30px;}
  .campaign_spot .wrapper{ padding: 60px 2% ;}
  .sample_card_inner{ width: 90%; margin-top: 20px;}
  .howto{ width: 100%; margin-top: 5%;}
  .howto_ttl{ font-size: var(--font-18); padding: 3px 0;}
  .howto_item{width: 28%;}
  .present_num{ width: 50px; top: -10px; }
  .present_list{justify-content: center;}
  .top_model .video_area{ width: 95%;}
  .model_slider{ margin-top: 30px;}
  .model_slider .swiper-slide { width: 180px;}
  .top_model .inner{ padding-bottom: 50px;}
  .top_model::after{ top: auto; bottom: 3%; height: 50px; width: 70px; right: 5%;}
}


@media screen and (max-width: 600px) {
  .howto_list{ flex-direction: column; align-items: center;}
  .howto_item{ width: 100%;}
  .howto_item_img{ width: 30%;}
  .howto_list .arrow{ margin: 0 0 -10px; transform: rotate(90deg);}
  .howto_join_text{ font-size: 13px; padding-left: 0; line-height: 1.6;}
  .howto_join{ padding: 5% 3%; margin: 3% auto 10%; width: 90%;}
  .howto_join_inner{ gap: 12px; justify-content: flex-start; margin-bottom: 16px;}
  .howto_join_desc{ width: 70%;}
  .howto_join_img{width: 24%;}
  .present_item{ width: 90%; margin: 0 auto; padding: 7% 3% 5%;}
  .present_attend{  width: 90%; margin-top: 30px; line-height: 1.6;}
  .present_attend_main{ font-size: var(--font-14);}
  .present_attend_sub{ font-size: 12px;}

}

@media screen and (max-width: 467px) {
    .campaign_spot .wrapper {
        padding: 40px 2%;
    }

  }