@charset "utf-8";

/* ============== BASE============== */

.pc { display: none !important; }


#fftop_recomDetail section {
   padding: 0;
}

body { margin: 0; }


/*  ============== Fadein============== */

.fadein {
  opacity     : 0;
  transform   : translateY(80px);
  transition  : all 1s;
  }


/*  ============== 940px ============== */

.mainContentMT {
  width: 100%!important;
  }

.rootMT ul {
    overflow  : hidden;
    width     : 940px!important;
    margin    : 0 auto;
    }

tr, th, td, div, span, a,p {
    color: inherit;
}


/*  ============== MAIN ============== */

#coa2020summer_natsupre {
    width         : 100%;
    background    : #d4ecea;
    padding-bottom: 50px;
    font-family   : 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3';
}



/*  ============== HEAD ============== */

.head_term {
 background: #f2e725;
 text-align: center;
 padding: 5px 0 5px;
}


.head_term img {
  width: 100%;
}


.head {
  background: #85cbbf;
  position  : relative;
  background-image   : url(../../natsu_pre/img/bg-title_sp.png),url(../../natsu_pre/img/bg-main-sp.jpg);
  background-position: top,bottom;
  background-repeat  : no-repeat;
  background-size    : 100%,contain;
  text-align : center;
  padding    : 10% 0 20% 0;
  }



img.main_title {
  width  : 100%;
  height : auto;
  margin : auto;
}


/*  ============== HEAD-TITLE ============== */

.delay-time02{
  animation-delay: 0.5s;
  }

img.delay-time02.box.fadeUp {
  position : absolute;
  width    : 25%;
  bottom   : 15%;
  right    : 2%;
}

.delay-time04{
  animation-delay: 1s;
}

img.delay-time04.box.fadeUp {
  position : absolute;
  width    : 30%;
  bottom    : 0%;
  right     : 30%;
}



.box{
	opacity: 0;
}

.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }


@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.box{
	opacity: 0;
}




/*  ============== delay fadeup ============== */

.box{
	opacity: 0;
}


.fadeUp {
  animation-name      :fadeUpAnime;
  animation-duration  :0.5s;
  animation-fill-mode :forwards;
  opacity             : 0;
  }


@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }


  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  ============== 商材共通 ============== */


.contents {
}



p.title {
  width: 100%;
  text-align: center;
  margin : 0 auto 20px auto;
}

p.title img {
  width: 100%;
}



.item {
  position: relative;
  border-radius: 10px;
}


.text {
  text-align: center;
}


p.item_name {
  color      : #009b8e;
  font-size  : 23px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .1rem;
  background : linear-gradient(transparent 50%, #fff462 0%);
  display    : inline-block;
  }


.sub_item p.item_name {
  font-size  : 18px;
}



p.item_name_sub {
  color      : #000000;
  font-size  : 18px;
  line-height: 1.2;
  letter-spacing: .1rem;
  font-weight: bold;
  margin     : 15px auto;
  }


p.item_term {
  color     : #000000;
  font-size : 13px;
  line-height: 1.8;
  margin-top : 10px;
  }


p.item_term span:nth-child(1) {
  font-size   : 11px;
  border      : 1px solid #000;
  padding     : 0 5px 0 5px;
  margin-right: 10px;
  }


/*  ============== メイン商材 ============== */

.main_item {
  background :#d4ecea;
  position   : relative;
  z-index    : 100;
  margin : auto;
  }



.main_item .item{
  margin: 0 10px 0 0;
  background: #fff;
  border: 3px solid #009b8e;
  }

.item .monthly {
  box-sizing    : border-box;
  background    : #089387;
  padding       : 15px 10px 10px 15px;
  top           : -3px;
  left          : -3px;
  border-radius : 5px 0 0 0;
}

.item .monthly img {
  width: auto;
  height: 30px;
}



.main_item .item .text{
  padding: 20px 10px 20px 10px;
  }


.main_item .item img.item_pic {
  width        : 100%;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  }


.shindomachine.comment, .matsuzaka.comment,.dyson.comment {
  position : absolute;
  right    : -2%;
  top      : 2%;
}

.shindomachine.comment img,.matsuzaka.comment img, .dyson.comment img{
  width : 120px;
}


/*  ============== メインスライダー　ドット ============== */

.slick-dots li button:before {
  font-size: 20px!important;
 line-height: 20px!important;

}


/*  ============== サブ商材 ============== */


.sub_item {
  background : #d4ecea;
  z-index    : 100;
  background-image   : url(../../natsu_pre/img/bg-sub-sp.jpg);
  background-position: bottom;
  background-repeat  : no-repeat;
  background-size    : contain;
  }


.sub_item .flex {
  width          : 100%;
  margin         : auto;
  padding-bottom : 30px;
  }


.sub_item .flex .item {
  border: 3px solid #009b8e;
  background: #fff;
  position     : relative;
  width        : 85%;
  text-align: center;
  margin       : 30px auto 0 auto;
  }



.sub_item .flex .item img.item_pic {
  width: 80%;
  border-radius: 5px;
  }


.sub_item .item .text {
  padding: 5px 0 15px 0;
  }


.fitbit.comment{
  position : absolute;
  left     : -20px;
  top      : -15%;
  z-index  : 100;
}


.asoview.comment{
  position : absolute;
  right    : -15px;
  top      : -10%;
  z-index  : 100;
}


.fitbit.comment img,.asoview.comment img {
   width  :  150px;
}


/*  ============== プレゼント ============== */

.other_item {
  background : #fff;
  position   : relative;
  z-index    : 100;
  padding-bottom: 30px;
  margin : auto;
  }


.other_item .flex {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin : auto;
  }


.other_item .flex .item {
  width  : 46%;
  border: 3px solid #009b8e;
  margin: 0 auto 5px auto;
  }


.other_item .flex img.item_pic {
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  }

.other_item p.item_name {
  font-size: 13px;
  text-align: center;
  padding: 5px;
  background:none!important;
}





/*  ============== 注意書き ============== */
.notice {
  background-image   : url(../../natsu_pre/img/bg-other-sp.jpg);
  background-position: top;
  background-repeat  : no-repeat;
  background-size    : cover;
  width  :  100%;
  padding: 0 0 50px 0;
  box-sizing: border-box;
  }


.notice p {
  width     :  90%;
  color     : #000;
  font-size : 12px;
  line-height: 1.6;
  margin : auto;
  text-align: justify;
  }



/*  ============== ボタン ============== */

.container {
  width      : 98%;
  text-align : center;
  margin : auto;
  padding-bottom: 50px;
  }



.btn-border {
  display   : inline-block;
  width     : 90%;
  background: #089387;
  font-size : 22px;
  font-weight: bold;
  color    : #fff;
  padding  : 20px 0 20px 0;
  letter-spacing: .15rem;
  border-radius: 10px;
  transition: .4s;
  }

a.btn-border {
  text-decoration: none!important;
}


.btn-border:hover {
  background: #85cbbf;
  }


/*  ==============  ナビゲーション ============== */


._karte-g__3BPu_ ._karte-temp-hover__3BPu_ {
  font-size: 20px!important;
  padding: 15px 0!important;
}