@charset "utf-8";

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

.sp { display: none !important; }

body { margin: 0; }


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

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


/*  ============== 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 : メイリオ;
}



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

.head_term img {
  width: 500px;
  
}




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

.head {
  position  : relative;
  background-image   : url(../../natsu_pre/img/bg-title.png),url(../../natsu_pre/img/bg-main-pc.jpg);
  background-position: right top,bottom;
  background-repeat  : no-repeat;
  background-size    : 70%,cover;
  text-align : center;
  padding    : 50px 0 100px 0;
  }



img.main_title {
  width  : 60vw;
  height : auto;
  margin: 0 auto 0 5%;
}


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

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

img.delay-time02.box.fadeUp {
  position : absolute;
  width    : 13vw;
  top      : 10%;
  left     : 4vw;
}

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

img.delay-time04.box.fadeUp {
  position : absolute;
  width    : 15vw;
  top      : 50%;
  left     : 8vw;
}





/*  ============== HEAD-MASK ============== */

.box{
	opacity: 0;
}


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


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


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

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


.contents {
}



p.title {
  width: 940px;
  text-align: center;
  margin : auto;
}

p.title img {
  width: 100%;
}



.item {
  position: relative;
  border  : 4px solid #009b8e;
  border-radius: 10px;
  background: #fff;
}



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


p.item_name_sub {
  color      : #000000;
  font-size  : 17.5px;
  line-height: 1.8;
  letter-spacing: .1rem;
  font-weight: bold;
  margin-top : 10px;
  }


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


p.item_comment {
  color     : #000000;
  font-size : 13px;
  margin-top: 10px;
}




p.item_term span:nth-child(1) {
  font-size   : 15px;
  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 .flex {
  width: 90%;
  display: flex;
  justify-content: space-around;
  margin: auto;
}

.main_item .flex .delayScroll {
  width: 32%;
  display: flex;
}




.main_item .item{
  width: 100%;
  margin  : 0 auto;
  }

.item .monthly {
  position      : absolute;
  display       : inline-block;
  box-sizing    : border-box;
  line-height   : 1;
  background    : #089387;
  color         : #ffffff;
  font-weight   : bold;
  padding       : 10px 15px;
  top           : -3px;
  left          : -3px;
  border-radius : 10px 0 0 0;
  font-size     : 20px;
}

.item .monthly img {
  width: auto;
  height: 30px;
  flex-shrink: 0;
  margin : -5px 5px 0 0;
}



.main_item .item .text{
  text-align: center;
  padding: 15px;
  }


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


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


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


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


.sub_item {
  background : #d4ecea;
  position   : relative;
  padding-top: 100px;
  z-index    : 100;
  background-image   : url(../../natsu_pre/img/bg-sub-pc.jpg);
  background-position: bottom;
  background-repeat  : no-repeat;
  background-size    : cover;
  margin : auto;
  }


.sub_item .flex {
  width  : 90%;
  display: flex;
  position   : relative;
  justify-content: space-around;
  margin : auto;
  }


.sub_item .flex .item {
  width: 49%;
  padding: 30px 5px;
  box-sizing: border-box;
  display: flex;
  }


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


.sub_item .item .text {
  align-self : center;
  text-align: center;
  }


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


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


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

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


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


.other_item .flex .item {
  width  : 24%;
  margin : 0 auto;
  }


.other_item .flex img.item_pic {
  width: 100%;
  flex-shrink: 0;
  border-radius: 5px 5px 0 0;
  }


.other_item .text {
  padding: 30px 10px;
  text-align: center;
  }


.other_item p.item_name {
  font-size: 17.5px;
}



/*  ============== 注意書き ============== */
.notice {
  margin : auto;
  background-image   : url(../../natsu_pre/img/bg-other-pc.jpg);
  background-position: top;
  background-repeat  : no-repeat;
  background-size    : cover;
  box-sizing: border-box;
  }


.notice p {
  margin: auto;
  width  : 90%;
  padding: 50px 0;
  color     : #000;
  font-size : 12px;
  line-height: 1.8;
  }



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

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



.btn-border {
  display  : inline-block;
  width    : 800px;
  background: #089387;
  font-size: 25px;
  font-weight: bold;
  color    : #fff;
  padding  : 30px;
  letter-spacing: .1rem;
  border-radius: 10px;
  transition: .4s;
  }

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


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




/*  ============== ボタン ============== */
._karte-g__3BPu_ ._karte-temp-hover__3BPu_ {
  padding: 20px;
  font-size: 25px;
    font-family : メイリオ;
}