@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=EB+Garamond");
@font-face {
  font-family: DFLiSongStd-W5;
  src: url(../../../css/fonts/DFLiSongStd-W5.otf);
}
/* =========================================================
 VARIABLE
========================================================= */
/* =========================================================
 MIXIN
========================================================= */
/* ----- BREAK POINT ----- */
/* ----- PREFIX ----- */
/* ----- IE用アンチエイリアス ----- */
/* ----- CLEARFIX ----- */
/* ----- LINK COLOR ----- */
/* ----- HIDDEN TEXT ----- */
/* ----- BACKGROUND HEIGHT ----- */
/* ----- GRADATION ----- */
/* =========================================================
 FUNCTION
========================================================= */
/*
  使用例
  margin: autoSpace(10, 1.6rem, 1.5);
          autoSpace(最終的に空いてほしい値, 要素のfont-size, 要素のline-height)
*/
/* =========================================================

2017 renewal lineup amino

========================================================= */
main:before {
  background-color: #101841;
}

.mainVisual {
  margin-bottom: 0;
  background-image: url(../../img/2017renewal/amino/pc_main_bg.jpg);
}

.intro_wrapper {
  background-image: url(../../img/2017renewal/amino/pc_desc_bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.containItemList {
  max-width: 1600px;
  margin: 0 auto;
  padding: calc(80/1600*100%) 40px 0;
}
.containItemList .itemList {
  position: relative;
  z-index: 2;
}
.containItemList .itemList > li {
  border-color: rgba(255, 255, 255, 0.3);
}
.containItemList .itemList > li .link {
  width: 58.57741%;
}
.containItemList .itemList > li .link a {
  background-size: 49% auto;
  border-color: rgba(255, 255, 255, 0.3);
}
.containItemList .itemList > li .link a::after {
  right: 26%;
}

.containItemDesc {
  position: relative;
  margin: calc(100/1600*100%) auto 0;
  padding-bottom: 50px;
}
.containItemDesc .mainHead {
  width: 62.5%;
  margin: 0 auto;
  padding-top: 200px;
}
.containItemDesc .itemDescOpened {
  position: relative;
  width: calc(1000/1600*100%);
  max-width: 1000px;
  margin: 0 auto;
}
.containItemDesc .popupBtn {
  position: absolute;
  top: calc(34/1600*100%);
  right: calc(34/1600*100%);
  width: calc(182/1000*100%);
}

.remodal-overlay {
  background: none !important;
}

.remodal {
  width: calc(1000/1600*100%) !important;
  max-width: 1000px !important;
  padding: 0 !important;
  background: transparent !important;
}
.remodal img {
  width: 100%;
}

.remodal-close {
  top: 30px !important;
  right: 30px !important;
  left: auto !important;
  width: 5%;
  height: 5%;
}
.remodal-close::before {
  width: 30px !important;
  height: 30px !important;
  content: '' !important;
  background: url(../../img/2017renewal/amino/popup_close.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.containItem {
  position: relative;
  z-index: 0;
}
.containItem > div {
  padding-bottom: 100px;
  position: relative;
}
.containItem > div:last-child {
  padding-bottom: 0;
}
.containItem .mainHead:before {
  padding-top: 76%;
  background-image: url(../../img/2017renewal/amino/item/mainhead_bg.jpg);
  z-index: -1;
}
.containItem .summary .variation {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.containItem .summary .variationList {
  width: 50%;
}

/* anchor */
.moist_smooth:before,
.deep_moist:before,
.deep_repair:before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% - 80px);
  position: absolute;
  top: 80px;
  left: 0;
  z-index: -1;
}

.moist_smooth:before,
.deep_moist:before {
  background-color: #033359;
}

.deep_repair:before {
  background-color: #0f1741;
}

.moist_smooth .itemDesc,
.deep_moist .itemDesc {
  margin-top: -50px;
}

.deep_repair > div {
  position: relative;
  z-index: 1;
}
.deep_repair .mainHead:before {
  padding-top: 63.125%;
  background-image: url(../../img/2017renewal/amino/item/mainhead_deep_repair_bg.jpg);
  z-index: 0;
}
.deep_repair .mainHead img {
  position: relative;
}
.deep_repair .itemDesc01 {
  margin-top: -77px;
}

.topBtn {
  background-color: #0f1741;
}

/* =========================================================
 RESPONSIVE - sp
========================================================= */
@media screen and (max-width: 48em) {
  .mainVisual {
    background-image: url(../../img/2017renewal/amino/sp_main_bg.jpg);
    margin-bottom: 0;
  }

  .intro_wrapper {
    background-image: url(../../img/2017renewal/amino/sp_desc_bg.png);
  }

  .containItemDesc {
    max-width: none;
    margin: 0 auto;
  }
  .containItemDesc .mainHead {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  .containItemDesc .itemDescOpened {
    width: calc(580/640*100%);
    margin: 0 auto;
    padding: calc(70/640*100%) 0 0;
  }
  .containItemDesc .popupBtn {
    top: calc(20/640*100vw);
    right: calc(-11/640*100%);
    width: calc(183/640*100%);
  }

  .remodal {
    width: calc(600/640*100%) !important;
  }

  .remodal-close {
    top: 5vw !important;
    right: 5vw !important;
    width: 7vw;
    height: 7vw;
  }
  .remodal-close::before {
    width: 7vw !important;
    height: 7vw !important;
  }

  .containItem .itemView,
  .containItemDesc .itemView {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .containItem .itemDesc,
  .containItemDesc .itemDesc {
    padding-top: 20px;
  }

  .containItem > div {
    margin-bottom: 0;
    padding-bottom: 45px;
  }
  .containItem > div:last-child {
    padding-bottom: 0;
  }
  .containItem .mainHead:before {
    padding-top: 187.5%;
    background-image: url(../../img/2017renewal/amino/item/sp_mainhead_bg.jpg);
  }
  .containItem .desc {
    padding-top: 40px;
  }
  .containItem .desc .head:nth-of-type(2) img {
    width: 41.37931%;
  }
  .containItem .desc .head:nth-of-type(3) img {
    width: 31.03448%;
  }
  .containItem .summary .variation {
    margin: 0 auto;
  }
  .containItem .summary .variationList {
    width: 100%;
  }

  /* anchor */
  .moist_smooth:before,
  .deep_moist:before,
  .deep_repair:before {
    height: 100%;
    top: 0;
  }

  .moist_smooth .itemDesc,
  .deep_moist .itemDesc {
    margin-top: 0;
  }

  .deep_repair .mainHead:before {
    display: none;
  }
  .deep_repair .itemDesc01 {
    margin-top: 0;
  }

  footer .footerNav {
    background-color: #0f1741;
  }
}