@charset "UTF-8";
/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.fadeIn {
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
  opacity: 0;
  transform: translateY(50px);
  -webkit-transition: all 1500ms;
  transition: all 1500ms;
}

.fadeIn.scrollIn {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
        transform: translateY(0);
  }
  #Contents {
    overflow-x: hidden;
  }
  img{
    width: 100%;
  }
  .flexbox{
    display: flex;
    justify-content: space-between;
  }
  .atmn_all .credit{
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 2;
	position: relative;
	z-index: 10;
  }
  .sp_only{
    display: none;
  }
  /* =================
	all
================= */
#Recommend_200928{
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: quasimoda, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.atmn_all{
  margin-top: 77px;
}
.atmn_all .ttlbox{
  margin-bottom: 65px;
}
.atmn_all .ttlbox .ttl{
  width: 225px;
  margin: 0 auto;
  margin-bottom: 6px;
}
.atmn_all .ttlbox .main_ttl{
  width: 403px;
  margin: 0 auto;
  margin-bottom: 4px;
}
.atmn_all .ttlbox .num{
  display: block;
  width: 126px;
  margin: 0 auto;
}
/* sec1 */
.atmn_all .sec1{
  width: 1000px;
  margin: 0 auto;
  margin-bottom: 223px;
}
.atmn_all .sec1 .flexbox .model._01{
  width: 500px;
}
.atmn_all .sec1 .flexbox .model._02{
  width: 400px;
}
.atmn_all .sec1 .credit{
  text-align: end;
  margin-top: -127px;
}
/* sec2 */
.atmn_all .sec2{
  width: 980px;
  margin: 0 auto;
  margin-bottom: 150px;
}
.atmn_all .sec2 .flexbox .model._01{
  margin-top: 100px;
}
.atmn_all .sec2 .flexbox .model._01,.atmn_all .sec2 .flexbox .model._02{
  width: 450px;
}
.atmn_all .sec2 .credit{
  text-align: end;
  margin-top: -77px;
}
/* sec3 */
.atmn_all .sec3{
  width: 940px;
  margin: 0 auto;
  margin-bottom: 148px;
}
.atmn_all .sec3 .imgbox .model{
  width: 400px;
  margin: 0 auto;
  margin-bottom: 22px;
}
.atmn_all .sec3 .imgbox .credit{
  width: 400px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 116px;
}
.atmn_all .sec3 .flexbox .model._01{
  width: 480px;
}
.atmn_all .sec3 .flexbox .model._02{
  width: 380px;
  margin-top: 75px;
}
.atmn_all .sec3 .credit{
  text-align: end;
  margin-top: -52px;
}
/* sec4 */
.atmn_all .sec4{
  width: 1020px;
  margin: 0 auto;
  margin-bottom: 116px;
}
.atmn_all .sec4 .flexbox .model._01{
  width: 450px;
  margin-top: 75px;
}
.atmn_all .sec4 .flexbox .model._02{
  width: 500px;
  margin-bottom: 24px;
}
.atmn_all .sec4 .credit{
  text-align: end;
}
/* sec5 */
.atmn_all .sec5{
  margin-bottom: 115px;
}
.atmn_all .sec5 .imgbox .model{
  width: 380px;
  margin: 0 auto;
  margin-bottom: 60px;
}
.atmn_all .sec5 .flexbox{
  width: 609px;
  margin-left: 397px;
  flex-direction: row-reverse;
}
.atmn_all .sec5 .flexbox .model{
  width: 380px;
  margin-left: 30px;
}
.atmn_all .sec5 .credit{
  text-align: end;
  margin-top: 478px;
}
/* sec6 */
.atmn_all .sec6{
  width: 1030px;
  margin: 0 auto;
  margin-bottom: 98px;
}
.atmn_all .sec6 .flexbox{
  margin-bottom: 24px;
}
.atmn_all .sec6 .flexbox .model._01,.atmn_all .sec6 .flexbox .model._02{
  width: 480px;
}
.atmn_all .sec6 .credit{
  width: 1030px;
}
/* btn */
.atmn_all .btn{
  width: 430px;
  margin: 0 auto;
  margin-bottom: 32px;
}
.atmn_all .vol1{
  width: 65px;
  margin: 0 auto;
  margin-bottom: 140px;
}

@media only screen and (max-device-width: 1400px){
	.sp_only {
		display: none !important;
    }
      .atmn_all .credit{
        margin-top: calc( 22 * (100vw / 1400));
        font-size: calc( 12 * (100vw / 1400));
      }
      /* =================
      all
    ================= */
    #Recommend_200928{
      max-width: calc( 1400 * (100vw / 1400));
    }
    .atmn_all{
      margin-top: calc( 77 * (100vw / 1400));
    }
    .atmn_all .ttlbox{
      margin-bottom: calc( 65 * (100vw / 1400));
    }
    .atmn_all .ttlbox .ttl{
      width: calc( 225 * (100vw / 1400));
      margin-bottom: calc( 6 * (100vw / 1400));
    }
    .atmn_all .ttlbox .main_ttl{
      width: calc( 403 * (100vw / 1400));
      margin-bottom: calc( 4 * (100vw / 1400));
    }
    .atmn_all .ttlbox .num{
      width: calc( 126 * (100vw / 1400));
    }
    /* sec1 */
    .atmn_all .sec1{
      width: calc( 1000 * (100vw / 1400));
      margin-bottom: calc( 223 * (100vw / 1400));
    }
    .atmn_all .sec1 .flexbox .model._01{
      width: calc( 500 * (100vw / 1400));
    }
    .atmn_all .sec1 .flexbox .model._02{
      width: calc( 400 * (100vw / 1400));
    }
    .atmn_all .sec1 .credit{
      margin-top: calc( -127 * (100vw / 1400));
    }
    /* sec2 */
    .atmn_all .sec2{
      width: calc( 980 * (100vw / 1400));
      margin-bottom: calc( 150 * (100vw / 1400));
    }
    .atmn_all .sec2 .flexbox .model._01{
      margin-top: calc( 100 * (100vw / 1400));
    }
    .atmn_all .sec2 .flexbox .model._01,.atmn_all .sec2 .flexbox .model._02{
      width: calc( 450 * (100vw / 1400));
    }
    .atmn_all .sec2 .credit{
      margin-top: calc( -77 * (100vw / 1400));
    }
    /* sec3 */
    .atmn_all .sec3{
      width: calc( 940 * (100vw / 1400));
      margin-bottom: calc( 148 * (100vw / 1400));
    }
    .atmn_all .sec3 .imgbox .model{
      width: calc( 400 * (100vw / 1400));
      margin-bottom: calc( 22 * (100vw / 1400));
    }
    .atmn_all .sec3 .imgbox .credit{
      width: calc( 400 * (100vw / 1400));
      margin-bottom: calc( 116 * (100vw / 1400));
    }
    .atmn_all .sec3 .flexbox .model._01{
      width: calc( 480 * (100vw / 1400));
    }
    .atmn_all .sec3 .flexbox .model._02{
      width: calc( 380 * (100vw / 1400));
      margin-top: calc( 75 * (100vw / 1400));
    }
    .atmn_all .sec3 .credit{
      margin-top: calc( -52 * (100vw / 1400));
    }
    /* sec4 */
    .atmn_all .sec4{
      width: calc( 1020 * (100vw / 1400));
      margin-bottom: calc( 116 * (100vw / 1400));
    }
    .atmn_all .sec4 .flexbox .model._01{
      width: calc( 450 * (100vw / 1400));
      margin-top: calc( 75 * (100vw / 1400));
    }
    .atmn_all .sec4 .flexbox .model._02{
      width: calc( 500 * (100vw / 1400));
      margin-bottom: calc( 24 * (100vw / 1400));
    }
    /* sec5 */
    .atmn_all .sec5{
      margin-bottom: calc( 115 * (100vw / 1400));
    }
    .atmn_all .sec5 .imgbox .model{
      width: calc( 380 * (100vw / 1400));
      margin-bottom: calc( 60 * (100vw / 1400));
    }
    .atmn_all .sec5 .flexbox{
      width: calc( 609 * (100vw / 1400));
      margin-left: calc( 397 * (100vw / 1400));
    }
    .atmn_all .sec5 .flexbox .model{
      width: calc( 380 * (100vw / 1400));
      margin-left: calc( 30 * (100vw / 1400));
    }
    .atmn_all .sec5 .credit{
      margin-top: calc( 478 * (100vw / 1400));
    }
    /* sec6 */
    .atmn_all .sec6{
      width: calc( 1030 * (100vw / 1400));
      margin-bottom: calc( 98 * (100vw / 1400));
    }
    .atmn_all .sec6 .flexbox{
      margin-bottom: calc( 24 * (100vw / 1400));
    }
    .atmn_all .sec6 .flexbox .model._01,.atmn_all .sec6 .flexbox .model._02{
      width: calc( 480 * (100vw / 1400));
    }
    .atmn_all .sec6 .credit{
      width: calc( 1030 * (100vw / 1400));
    }
    /* btn */
    .atmn_all .btn{
      width: calc( 430 * (100vw / 1400));
      margin-bottom: calc( 32 * (100vw / 1400));
    }
    .atmn_all .vol1{
      width: calc( 65 * (100vw / 1400));
      margin-bottom: calc( 140 * (100vw / 1400));
    }
  }