@charset "utf-8";

/* **************************************************

  main
  
************************************************** */
#main {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-top: solid 1px #ede39b;
}




/* **************************************************

  kv
  
************************************************** */
#kv {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
  text-align:  center;
  padding: 8.4375vw 6.25vw 12.5vw;
}
#kv .content > .inner { position: relative; }
#kv .logo {
  text-align: left;
  position: relative;
  left: 0;
}
#kv .logo img { width: 74.10714285714286%; }
#kv .products {
  width: 90.625vw;
  margin: 1.785714285714286% auto 0;
}
#kv .copy {
  font-size: 2.5vw;
  line-height: 1.375;
  letter-spacing:  0.04em;
  margin-top: 1.625em;
}
#kv .notes {
  font-size: 3.125vw;
  line-height: 1.3;
  display: inline-block;
  letter-spacing:  0.04em;
  text-align:  left;
  margin-top: 1em;
}
#kv .component {
  width: 40.35714285714286%;
  padding-top: 2.142857142857143%;
  position: absolute;
  top: 0;
  right: -3.928571428571429%;
}

@media screen and (min-width:600px) {
  #kv { padding: 9.375vw 40px 80px; }
  #kv .content > .inner {
    max-width: 560px;
    margin: 0 auto;
  }
  #kv .logo img { max-width: 523px; }
  #kv .products {
    width: 100%;
    max-width: 712px;
    margin-inline: auto;
  }
  #kv .products img { max-width: 580px; }
  #kv .copy { font-size: 16px; }
  #kv .notes { font-size: 20px; }
}

@media screen and (min-width:960px) {
  #kv .copy { font-size: 10px; }
  #kv .notes { font-size: 10px; }
}

@media screen and (max-width:1023px) {
  #kv { background-image: url("../images/kv_bg_01@sp.png"); }
}

@media screen and (min-width:1024px) {
  #kv {
    background-image: url("../images/kv_bg_01.png");
    background-size: 1280px auto;
    height: 46.09375vw;
    padding: 3.90625% 3.90625% 0;
  }
  #kv .content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  #kv .content > .inner {
    max-width: 1024px;
    width: 80vw;
    height: 42.1875vw;
    position: relative;
  }
  #kv .logo {
    width: 32.03125vw;
    margin: 0;
    padding-top: 0.9765625%;
    position: absolute;
    top: 0;
    left: -6.34765625%;
  }
  #kv .logo img {
    max-width: 100%;
    width: 100%;
  }
  #kv .logo:after {
    background: url(../images/main_comp.png) no-repeat left top;
    background-size: contain;
    display: block;
    content: "";
    width: 78.78048780487805%;
    margin-top: 5.121951219512195%;
    padding-top: 34.14634146341463%;
    position: relative;
    left: 14.63414634146341%;
  }
  #kv .products {
    width: 55.625vw;
    margin: 0 0 0 auto;
    position: relative;
    right: -6.34765625%;
  }
  #kv .products img {
    max-width: 100%;
    width: 100%;
  }
  #kv .notes {
    font-size: 8px;
    z-index: 2000;
    position: absolute;
    left: 3.90625vw;
    bottom: 0;
  }
  #kv .copy {
    font-size: 8px;
    z-index: 2000;
    position: absolute;
    right: 3.90625vw;
    bottom: 0;
  }
}

@media screen and (min-width:1280px) {
  #kv {
    background-size: 100% auto;
    background-position: center bottom;
    height: 590px;
    padding: 50px 50px 0;
  }
  #kv .content > .inner { height: 540px; }
  #kv .logo { width: 410px; }
  #kv .products { width: 712px; }
}


/* **************************************************

  concept
  
************************************************** */
#concept {
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  position: relative;
}
#concept:before {
  content: "";
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 5.78125vw;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-72.97297297297297%);
  transform: translateY(-72.97297297297297%);
}
#concept > .wrap {
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 17.1875vw 3.125vw 15.625vw;
}
#concept .title { text-align: center; }
#concept .title img {
  max-width: 560px;
  width: 96.55172413793103%;
}
#concept .subtitle { text-align: center; }
#concept .subtitle img { width: 70%; }
#concept .intro .txt1 {
  text-align: center;
  margin-top: 13.33333333333333%;
}
#concept .intro .txt1 img { width: 93.83333333333333%; }
#concept .intro .img1 { margin: min(5.714285714285714vw,30px) -3.125vw 0; }
#concept .intro .txt2 {
  font-size: 3.125vw;
  margin: 1em 3.125vw 0;
}
#concept .beauty { margin-top: 13.33333333333333%; }
#concept .beauty .component { margin-top: 4.6875vw; }
#concept .beauty .component li:nth-child(even) { text-align: right; }
#concept .beauty .component li:nth-child(n+2) { margin-top: -6.666666666666667%; }
#concept .beauty .component li:nth-child(n+2) img { width: 82%; }
#concept .free,
#concept .fragrance {
  margin-top: 13.33333333333333%;
  padding-top: 13.33333333333333%;
  border-top: dotted 1px #542e0e;
}
#concept .free .txt1,
#concept .fragrance .txt1 {
  text-align: center;
  margin-top: 8.333333333333333%;
}
#concept .free .txt1 img { width: 68.33333333333333%; }
#concept .fragrance .txt1 img { width: 83.16666666666667%; }
#concept .free .txt2 {
  font-size: 3.125vw;
  margin: 2em 3.125vw 0;
}

@media screen and (min-width:600px) {
  #concept >.wrap { padding: 17.1875vw 40px 100px; }
  #concept >.wrap > .inner {
    max-width: 560px;
    margin: 0 auto;
  }
  #concept .subtitle img { max-width: 420px; }
  #concept .intro .txt1 img { max-width: 563px; }
  #concept .intro .txt2 {
    font-size: 20px;
    margin: 1em 0 0;
  }
#concept .free .txt2 { font-size: 20px; }
}

@media screen and (min-width:960px) {
  #concept .subtitle img { width: 350px; }
  #concept .intro .txt2 { font-size: 10px; }
  #concept .beauty .component li:nth-child(2) { margin-top: -60px; }
  #concept .beauty .component li:nth-child(n+3) { margin-top: -100px; }
  #concept .beauty .component li:nth-child(1) img { max-width: 471px; }
  #concept .beauty .component li:nth-child(n+2) img { max-width: 344px; }
  #concept .free .txt2 {
    font-size: 10px;
    text-align: center;
    margin: 2em 0 0;
  }
  #concept .title img {
    max-width: 587px;
  }
}

@media screen and (max-width:1023px) {
  #concept { background-image: url(../images/bg_01@sp.jpg); }
  /*#concept:before { background-image: url(../images/concept_line_01@sp.png); }*/
  #concept > .wrap { background-image: url(../images/concept_bg_01@sp.png); }
}

@media screen and (min-width:1024px) {
  #concept {
    background-image: url(../images/bg_01.jpg);
    background-size: 1352px auto;
  }
  #concept >.wrap { padding: 140px 50px 100px; }
  #concept >.wrap > .inner { max-width: 1024px; }
  #concept >.wrap > .inner:after {
    display: block;
    content: "";
    clear: both;
  }
  #concept > .wrap {
    background-image: url(../images/concept_bg_01.png);
    background-size: 1280px auto;
  }
  #concept .intro .txt1 { margin-top: 50px; }
  #concept .intro .txt1 img { width: auto; }
  #concept .intro .img1 {
    text-align: center;
    margin: 30px 0 0;
  }
  #concept .intro .img1 img { width: auto !important; }
  #concept .intro .txt2 {
    line-height: 1.8;
    max-width: 580px;
    margin: 1em auto 0;
  }
  #concept .beauty { margin-top: 80px; }
  #concept .beauty .component {
    margin-top: -3.90625%;
    padding: 11.9140625% 0 31.0546875%;
    position: relative;
  }
  #concept .beauty .component li { margin: 0 !important; }
  #concept .beauty .component li:nth-child(1) {
    text-align: center;
    position: relative;
    z-index: 1;
  }
  #concept .beauty .component li:nth-child(1) img { width: 45.99609375%; }
  #concept .beauty .component li:nth-child(n+2) {
    width: 33.69140625%;
    position: absolute;
  }
  #concept .beauty .component li:nth-child(n+2) img {
    max-width: 100%;
    width: 100%;
  }
  #concept .beauty .component li:nth-child(2) {
    top: 0;
    left: 0;
  }
  #concept .beauty .component li:nth-child(3) {
    top: 0;
    right: 0;
  }
  #concept .beauty .component li:nth-child(4) {
    top: 41.53846153846154%;
    left: 0;
  }
  #concept .beauty .component li:nth-child(6) {
    top: 41.53846153846154%;
    right: 0;
  }
  #concept .beauty .component li:nth-child(5) {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  #concept .free,
  #concept .fragrance {
    width: 44.140625%;
    margin-top: 55px;
    padding-top: 35px;
  }
  #concept .free { float: left; }
  #concept .fragrance {
    float: right;
    position: relative;
  }
  #concept .fragrance:before {
    display: block;
    content: "";
    height: calc(100% - 35px);
    border-left: dotted 1px #542e0e;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #concept .free { margin-left: 5.859375%; }
  #concept .fragrance { margin-right: 5.859375%; }
  #concept .free .txt1,
  #concept .fragrance .txt1 { margin-top: 20px; }
  #concept .free .txt1 img,
  #concept .fragrance .txt1 img { width: auto; }
}
@media screen and (min-width:1150px) {
  #concept .beauty .component li:nth-child(n+2) { width: auto; }
}
@media screen and (min-width:1280px) {
  #concept > .wrap {
    background-size: 100% auto;
    background-position: center top;
  }
}


/* **************************************************

  lineup
  
************************************************** */
#lineup {
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  position: relative;
  border-top: solid 1px #dbbbb9;
  border-bottom: solid 1px #dbbbb9;
}
#lineup:before,
#lineup:after {
  background-repeat: repeat-x;
  background-size: 100% 100%;
  content: "";
  display: block;
  width: 100%;
  pointer-events: none;
  z-index: 1;
  position: absolute;
  left: 0;
}
#lineup:before {
  background-position: center top;
  height: 75.78125vw;
  top: 0;
}
#lineup:after {
  background-position: center bottom;
  height: 93.125vw;
  bottom: 0;
}
#lineup > .wrap {
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding: 14.0625vw 6.25vw;
}
#lineup > .wrap > * {
  position: relative;
  z-index: 2;
}
#lineup .title { margin: 0 -3.125%; }
#lineup .item-wrap { margin-top: 7.142857142857143%; }
#lineup .item:nth-child(n+2) { margin-top: 17.85714285714286%; }
#lineup .item .item-header .subtitle { text-align: center; }
#lineup .item .item-header .table { margin-top: 8.928571428571429%; }
#lineup .item .item-body { margin-top: 12.5%; }
#lineup .item .item-body .img1 { text-align: center; }
#lineup .item .item-body .img1 img { width: 99.28571428571429%; }
#lineup .item .item-body .btn1,
#lineup .item .item-body .table { text-align: center; }
#lineup .item .item-body .btn1 { margin-top: 8.928571428571429%; }
#lineup .item .item-body .table { margin-top: 8.928571428571429%; }
#lineup .item .item-body .notes,
#lineup .item .item-body .tips { font-size: 3.125vw; }
#lineup .item .item-body .notes { margin-top: 3.5em; }
#lineup .item .item-body .tips,
#lineup .item .item-body .copy { margin-top: 1em; }
#lineup .item .item-body .copy { font-size: 2.5vw; }

#lineup #sheet .item-body { margin-top: 0; }
#lineup #sheet .subtitle { margin-inline: -0.5035714285714286%; }
#lineup #sheet .img1 { width: 101.4285714285714%; }
#lineup #sheet .btn1 { margin-top: 0; }
#lineup #sheet .features { margin-top: 8.928571428571429%;}
#lineup #sheet .notes { margin-top: 2em; }

@media screen and (min-width:600px) {
  #lineup > .wrap { padding: 100px 40px; }
  #lineup > .wrap > .inner {
    max-width: 560px;
    margin: 0 auto;
  }
  #lineup .title { margin: 0 auto; }
  #lineup .item .item-body .notes,
  #lineup .item .item-body .tips { font-size: 20px; }
  #lineup .item .item-body .copy { font-size: 16px; }
}

@media screen and (min-width:768px) {
	#lineup .item .item-body .btn1 a {
    background: #fff;
    display: inline-block;
  }
  #lineup .item .item-body .btn1 a img {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  #lineup .item .item-body .btn1 a:hover img { opacity: 0.5; }
}

@media screen and (min-width:960px) {
  #lineup .item .table { text-align: center; }
  #lineup .item .table img { max-width: 400px; }
  #lineup .item .item-header .subtitle img { max-width: 370px; }
  #lineup .item .item-body .img1 img { max-width: 512px; }
  #lineup .item .item-body .btn1 img { max-width: 400px; }
  #lineup .item .item-body .notes,
  #lineup .item .item-body .tips,
  #lineup .item .item-body .copy { font-size: 10px; }
}

@media screen and (max-width:1023px) {
  #lineup { background-image: url(../images/lineup_bg_01@sp.png); }
  #lineup:before { background-image: url(../images/lineup_bg_02@sp.png); }
  #lineup:after { background-image: url(../images/lineup_bg_03@sp.png); }
  #lineup > .wrap { background-image: url(../images/lineup_bg_honeycomb@sp.png); }
  #lineup #sheet .img1 img { width: 101.4285714285714%; }
}

@media screen and (min-width:1024px) {
  #lineup {
    background-image: url(../images/lineup_bg_01.png);
    background-size: 1492px auto;
  }
  #lineup:before {
    background-image: url(../images/lineup_bg_02.png);
    height: 450px;
  }
  #lineup:after {
    background-image: url(../images/lineup_bg_03.png);
    height: 478px;
  }
  #lineup > .wrap {
    background-image: url(../images/lineup_bg_honeycomb.png);
    background-size: 1920px auto;
    background-position: center 770px;
    padding: 45px 50px 100px;
  }
  #lineup > .wrap > .inner { max-width: 1024px; }
  #lineup .section-title { max-width: 520px; }
  #lineup .item:nth-child(n+2) { margin-top: 5.859375%; }
  #lineup .item:after {
    content: "";
    display: block;
    clear: both;
  }
  #lineup .item > * { width: 50%; }
  #lineup .item .item-header { float: left; }
  #lineup .item .item-header .subtitle img {
    max-width: 376px;
    width: 73.4375% !important;
  }
  #lineup .item .item-header .table { margin-top: 3.90625%; }
  #lineup .item .item-header .table img {
    max-width: 360px;
    width: 70.3125% !important;
  }
  #lineup .item .item-body {
    float: right;
    margin-top: 0;
  }
  #lineup .item:nth-child(2) .item-body,
  #lineup .item:nth-child(4) .item-body { padding-top: 7.8125%; }
  #lineup .item .item-body .img1 img { width: 100%; }
  #lineup .item .item-body .btn1 { margin-top: 5.859375%; }
  #lineup .item:nth-child(1) .item-body .btn1 { margin-top: 1.953125%; }
  #lineup .item:nth-child(2) .item-body .btn1 { margin-top: 3.90625%; }
  #lineup .item .item-body .notes,
  #lineup .item .item-body .tips,
  #lineup .item .item-body .copy { text-align: right; }
  #lineup .item .item-body .notes { margin-top: 2.5em; }

  #lineup #sheet .subtitle { margin-inline: 0; }
  #lineup #sheet .subtitle img {
    max-width: 477px;
    width: 93.1640625% !important;
  }
  #lineup #sheet .img1 {
    margin-top: 1.953125%;
  }
  #lineup #sheet .btn1 { margin-top: 0; }
  #lineup #sheet .features {
    text-align: center;
    margin-top: 3.90625%;
  }
  #lineup #sheet .features img { width: 93.1640625% !important; }
  #lineup #sheet .notes { margin-top: 2em; }
}



/* **************************************************

  lesson
  
************************************************** */
#lesson {
  background-image: url(../images/bg_01@sp.jpg);
  background-repeat: repeat-y;
  background-position: center 108%;
  background-size: 100% auto;
  padding: 21.09375vw 3.125vw;
  position: relative;
}
#lesson .title { position: relative; }
#lesson .title .txt {
  display: block;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  padding:  0 3.333333333333333%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#lesson .title .txt:after {
  font-family: 'icon';
  font-size: 2.8125vw;
  line-height: 1;
  color: #fff;
  display: block;
  content: "\e901";
  position: absolute;
  bottom: 0.6em;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(90deg);
  transform: translateX(-50%) rotate(90deg);
}
#lesson.is-open .title .txt:after {
  -webkit-transform: translateX(-50%) rotate(270deg);
  transform: translateX(-50%) rotate(270deg);
}
#lesson .step { display: none; }
#lesson .step .step-inner {
  background: #fff;
  padding: 17.85714285714286% 2%;
  border: solid 1px #542e0e;
}
#lesson .step .step-item:nth-child(n+2):before {
  content: "";
  display: block;
  width: 96%;
  margin: 12.96296296296296% auto;
  border-top: dotted 1px #542e0e;
}
#lesson .step .step-wrap:nth-child(n+2) {
  margin-top: min(3.571428571428571%,20px);
}
#lesson .step .step-title:nth-child(n+2) {
  margin-top: min(21.42857142857143%,120px);
}
#lesson .step .step-title {
  text-align: center;
}

@media screen and (min-width:600px) {
  #lesson { padding: 120px 20px; }
  #lesson > .inner {
    max-width: 600px;
    margin: 0 auto;
  }
  #lesson .title .txt:after { font-size: 18px; }
}
@media screen and (max-width:1023px) {
  #lesson .step .step-title img {
    max-width: 590px;
    width: 103.1468531468531%;
    margin-inline: -1.57342657342655%;
  }
}
@media screen and (min-width:1024px) {
  #lesson {
    background-image: url(../images/bg_01.jpg);
    background-position: center top;
  }
  #lesson > .inner { max-width: 1024px; }
  #lesson .title .txt {
    width: 647px;
    padding: 0;
  }
  #lesson .title .txt:after {
    font-size: 14px;
    bottom: 0.7142857142857143em;
  }
  #lesson .step .step-inner { padding: 100px 60px 65px; }
  #lesson .step .step-item { padding: 0 60px;  }
  #lesson .step .step-item:nth-child(n+2):before {
    width: auto;
    margin: 35px -60px;
  }
  #lesson .step .step-title:nth-child(n+2) {
    margin-top: 80px;
  }
  #lesson .step .step-wrap:nth-child(n+2) {
    margin-top: 20px;
  }
}