@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 relax

========================================================= */
main.categoryTop:before {
  background: url(../../../lineup/img/2017renewal/relax/bg_01.gif) center top repeat;
}

.mainVisual {
  margin-bottom: 0;
}

.containItemList {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

.containItemList .introTxt {
  width: 86.2069%;
  margin: 0 auto;
}

.containItemList .itemList {
  position: relative;
  z-index: 2;
}

.containItemList .itemList > li {
  border-color: #dadada;
}

.containItemList .itemList > li .link {
  width: 53.07263%;
}

.containItemList .itemList > li .link a {
  border: none;
  color: #000;
}

.containItemList .itemList > li .link a::after {
  display: none;
}

.containItemList .itemList > li:nth-child(1) .link a {
  background: url(../../../lineup/img/2017renewal/relax/pc_linkbtn_01.png) center no-repeat;
  background-size: contain;
}

.containItemList .itemList > li:nth-child(2) .link a {
  background: url(../../../lineup/img/2017renewal/relax/pc_linkbtn_02.png) center no-repeat;
  background-size: contain;
}

.containItemList .itemList > li:nth-child(3) .link a {
  background: url(../../../lineup/img/2017renewal/relax/pc_linkbtn_03.png) center no-repeat;
  background-size: contain;
}

.containHairtest {
  max-width: 660px;
  margin: 60px auto 0;
}

.containHairtest a {
  display: block;
}

.remodal-overlay {
  background: rgba(186, 186, 186, 0.5) !important;
}

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

.remodal img {
  width: 100%;
}

.remodal .hairtestTtl {
  background: #fff;
}

.remodal .hairtestWrap {
  background: #fff;
  padding: 0 calc(71/1100*100%);
}

.remodal .hairtestWrap ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.remodal .hairtestWrap ul li {
  position: relative;
}

.remodal .hairtestWrap ul li .link {
  z-index: 99;
  position: absolute;
  right: calc(65/320*100%);
  bottom: calc(31/569*100%);
  width: calc(190/320*100%);
  height: calc(50/569*100%);
}

.remodal .hairtestWrap ul li .link a {
  background: none;
  height: 100%;
}

.remodal-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

.remodal-close::before {
  display: none !important;
}

.containItemDesc {
  max-width: 1100px;
  margin: 80px auto 0;
  background: #fff;
}

.item_wrapper {
  background: url(../../../lineup/img/2017renewal/relax/bg_01.gif) center top repeat;
  padding-bottom: 100px;
}

.containItem {
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================================================
 RESPONSIVE - sp
========================================================= */
@media screen and (max-width: 48.0625em) {
  .mainVisual {
    background-image: url(../../../lineup/img/2017renewal/relax/sp_main_bg.jpg);
    margin-bottom: 0;
  }
  .containItemList {
    padding: 0;
  }
  .containItemList .introTxt {
    width: 100%;
  }
  .containItemList .itemList {
    display: block;
    width: calc(600/640*100%);
    margin: 0 auto;
  }
  .containItemList .itemList > li {
    width: 100%;
    padding: 0;
  }
  .containItemList .itemList > li:not(:first-child) {
    margin-top: calc(30/600*100%);
  }
  .containItemList .itemList > li:nth-child(1), .containItemList .itemList > li:nth-child(2), .containItemList .itemList > li:nth-child(3) {
    position: relative;
  }
  .containItemList .itemList > li:nth-child(1) .link, .containItemList .itemList > li:nth-child(2) .link, .containItemList .itemList > li:nth-child(3) .link {
    z-index: 99;
    position: absolute;
    right: calc(77/600*100%);
    bottom: calc(55/360*100%);
    width: calc(220/600*100%);
    height: calc(70/360*100%);
  }
  .containItemList .itemList > li:nth-child(1) .link a, .containItemList .itemList > li:nth-child(2) .link a, .containItemList .itemList > li:nth-child(3) .link a {
    background: none;
    height: 100%;
  }
  .containHairtest {
    width: calc(600/640*100%);
    margin: calc(80/640*100%) auto 0;
  }
  .remodal {
    width: 100% !important;
  }
  .remodal .hairtestWrap {
    padding: 0 calc(20/600*100%);
  }
  .remodal .hairtestWrap ul {
    display: block;
  }
  .remodal .hairtestWrap ul li .link {
    z-index: 99;
    position: absolute;
    right: calc(57/560*100%);
    bottom: calc(54/529*100%);
    width: calc(220/560*100%);
    height: calc(70/529*100%);
  }
  .containItemDesc {
    width: 100%;
    margin: calc(100/640*100%) auto 0;
  }
  .item_wrapper {
    background: url(../../../lineup/img/2017renewal/relax/bg_01.gif) center top repeat;
    padding-bottom: 50px;
  }
}
/*# sourceMappingURL=relax.css.map */