@charset "utf-8";

/* common */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a:hover {
  opacity: .7;
  transition: all .3s;
}
/* Loading背景画面設定　z-index: 5000000; がヘッダー */
.clsSplash {
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  z-index: 5000001;
  background:#000;
  text-align:center;
  color:#fff;
}

/* Loading 画像中央配置　*/
@media screen and (min-width: 701px) {
  .clsSplash__logo,
  .clsSplash__logo img {
    width: calc(760px / 2);
    height: calc(777px / 2);
  }
}
@media screen and (max-width: 700px) {
  .clsSplash__logo,
  .clsSplash__logo img {
    width:60vw;
    height:61.34vw;
  }
}
.clsSplash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* splash z-index:3- */
.fadeAnime {
  opacity: 0;
  top: 0;
  left: 0;
}
.kvFadeAnime,
.kvFadeAnime1,
.kvFadeAnime2 {
  display: none;
  opacity: 0;
}
.fadeAnime1 {
  position: relative;
  animation: startAnime 1.5s linear forwards;
  animation-delay: 0.5s;
  z-index: 1;
}
.fadeAnime2 {
  position: absolute;
  animation: startAnime 2s linear forwards;
  animation-delay: 1.2s;
  z-index: 2;
}
.kvFadeAnime {
  animation: startAnime 1s linear forwards;
}
.kvFadeAnime1 {
  animation: startAnime 2s linear forwards;
}
.kvFadeAnime2 {
  animation: startAnime 1.5s linear forwards;
}
@keyframes startAnime {
  from {opacity: 0;}
  to {opacity: 1;}
}


/* topボタン */
@media screen and (min-width: 701px) {
  .pagetop {
    position: fixed;
    bottom: 30px;
    right: 15px;
    width: calc(142px / 2);
    height: calc(162px / 2);
    z-index: 100;
  }
}
@media screen and (max-width: 700px) {
  .pagetop {
    display: none;
    width: 12.5vw;
    height: 11.333vw;
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index: 1000;
  }
}
.pagetop a {
  display: block;
  text-align: center;
}
.pagetop a:hover {
  display: block;
  text-align: center;
  text-decoration: none;
}


@media screen and (min-width: 701px) {
  .sp {display:none;}
}
@media screen and (max-width: 700px) {
  .pc {display:none;}
}


/* frame controll */
.el-d-section .mainarea {
  margin: 0 auto;
  max-width: 1440px;
}
@media screen and (min-width: 701px) {
  .el-d-section .mainarea {
    align-items: flex-start;
    display: flex;
  }
}


/* mainarea__cnt */
.el-d-section .mainarea__cnt {
  overflow: hidden;
  width: 1000px
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .el-d-section .mainarea__cnt {
    min-width:780px;
    max-width:calc(100% - 220px - ((100% - 1000px) / 2));
  }
}

@media screen and (max-width: 700px) {
  .el-d-section .mainarea__cnt {
    padding-bottom:0;
    width: 100%
  }
}

/* mainarea__nav */
.el-d-section.isScrollingUp .mainarea__nav {
  display: none;
}
@media screen and (min-width: 701px) {
  .el-d-section.isScrollingUp .mainarea__nav {
    display: block;
    top: 220px;
  }
}

.el-d-section .mainarea__nav {
  padding-top: 150px;
  position: sticky;
  top: 100px;
  width: 220px;
}

.el-d-section .mainarea__nav .navList li{
  padding: 0 0 30px;
}
.el-d-section .mainarea__nav .navList li img{
  opacity: .5;
}

.el-d-section .mainarea__nav .navList li:nth-child(1) img{
  opacity: 1.0;
}
.el-d-section .mainarea__nav .navList.onPf li:nth-child(1) img{
  opacity: .5;
}

.el-d-section .mainarea__nav .navList.onPf li:nth-child(2) img{
  opacity: 1.0;
}

.el-d-section .mainarea__nav .navList.onPf.onItem li:nth-child(1) img,
.el-d-section .mainarea__nav .navList.onPf.onItem li:nth-child(2) img{
  opacity: .5;
}
.el-d-section .mainarea__nav .navList.onPf.onItem li:nth-child(3) img{
  opacity: 1.0;
}


/* keyvisual area */
@media screen and (min-width: 701px) {
  .kv {
    margin:0 auto;
    max-width:1000px;
    max-height:750px;
    font-size:0;
    line-height:0;
    background-image: url(../img/kv_bg_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position:relative;
    z-index:100;
  }
  .kv__lv1 {
    width:100%;
  }
  .kv__lv2,
  .kv__lv3,
  .kv__lv4,
  .kv__lv5 {
    max-width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:105;
  }

  .kv img {width:100%;}
}
@media screen and (max-width: 700px) {
  .kv {
    margin:0 auto;
    width:100%;
    font-size:0;
    line-height:0;
    background-image: url(../img/kv_bg_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position:relative;
    z-index:100;
  }
  .kv__lv1 {
    width:100%;
  }
  .kv__lv2,
  .kv__lv3,
  .kv__lv4,
  .kv__lv5 {
    max-width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:105;
  }

  .kv img,
  .kv__lv2 img,
  .kv__lv2 img,
  .kv__lv3 img,
  .kv__lv4 img,
  .kv__lv5 img {width:100%;}
}


/* section__1 area */
.s1 {
  margin:0 auto;
  max-width:1000px;
  font-size:0;
  line-height:0;
  position:relative;
  z-index:100;
}
.s1__i1 {
  width: calc(344px / 2);
  top: 108px;
  left: 33px;
}
.s1__i2 {
  width: calc(147px / 2);
  top: 99px;
  left: 469px;
}
.s1__i3 {
  width: calc(300px / 2);
  top: 111px;
  right: 45px;
}
.s1__i4 {
  width: calc(214px / 2);
  top: 315px;
  left: 74px;
}
.s1__i5 {
  width: calc(169px / 2);
  top: 307px;
  right: 91px;
}
.s1__i6 {
  width: calc(299px / 2);
  bottom: 23px;
  left: 19px;
}
.s1__i7 {
  width: calc(335px / 2);
  bottom: 21px;
  right: 51px;
}
/* @media screen and (min-width: 701px) { */
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s1 {
    margin:0 auto;
    width:100%;
    font-size:0;
    line-height:0;
    position:relative;
    z-index:100;
  }
  .s1__i1 {
    width: 17.2%;
    top: 16%;
    left: 3.3%;
  }
  .s1__i2 {
    width: 7.35%;
    top: 14.8%;
    left: 46.9%;
  }
  .s1__i3 {
    width: 15%;
    top: 16.8%;
    right: 4.5%;
  }
  .s1__i4 {
    width: 10.7%;
    top: 47%;
    left: 7.4%;
  }
  .s1__i5 {
    width: 8.45%;
    top: 45.6%;
    right: 9.1%;
  }
  .s1__i6 {
    width: 14.95%;
    bottom: 3.5%;
    left: 1.9%;
  }
  .s1__i7 {
    width: 16.75%;
    bottom: 3.5%;
    right: 5.1%;
  }
}
@media screen and (max-width: 700px) {
  .s1 {
    margin:0 auto;
    width:100%;
    font-size:0;
    line-height:0;
    position:relative;
    z-index:100;
  }
  .s1__i1 {
    width: 22.5vw;
    top: 20.5vw;
    left: 1vw;
  }
  .s1__i2 {
    width: 10vw;
    top: 15.2vw;
    left: 46.5vw;
  }
  .s1__i3 {
    width: 18.4vw;
    top: 21vw;
    right: 3.5vw;
  }
  .s1__i4 {
    width: 14.4vw;
    top: 69.6vw;
    left: 3.5vw;
  }
  .s1__i5 {
    width: 14.13vw;
    top: 58vw;
    right: 4vw;
  }
  .s1__i6 {
    width: 20.5vw;
    bottom: 3vw;
    left: 0;
  }
  .s1__i7 {
    width: 24vw;
    bottom: 12.4vw;
    right: 2.7vw;
  }
}
.s1__i1,
.s1__i2,
.s1__i3,
.s1__i4,
.s1__i5,
.s1__i6,
.s1__i7 {
  position:absolute;
}
.s1__base {
  width:100%;
}
.s1__base img,
.s1__i1 img,
.s1__i2 img,
.s1__i3 img,
.s1__i4 img,
.s1__i5 img,
.s1__i6 img,
.s1__i7 img {width:100%;}

.s1__i1,
.s1__i3,
.s1__i6,
.s1__i7 {
  animation: flowerMove1 10s linear infinite;
}
.s1__i2,
.s1__i4,
.s1__i5 {
  animation: flowerMove2 10s linear infinite;
}

@media screen and (min-width: 701px) {
  @keyframes flowerMove1 {
    0% { transform: translate(0,0); }
    25% { transform: translate(-5px,5px); }
    50% { transform: translate(0,0); }
    75% { transform: translate(-10px,10px); }
    100% { transform: translate(0,0); }
  }
  @keyframes flowerMove2 {
    0% { transform: translate(0,0); }
    25% { transform: translate(-5px,-5px); }
    50% { transform: translate(0,0); }
    75% { transform: translate(-10px,-10px); }
    100% { transform: translate(0,0); }
  }
}
@media screen and (max-width: 700px) {
  @keyframes flowerMove1 {
    0% { transform: translate(0,0); }
    25% { transform: translate(-0.833vw,-0.833vw); }
    50% { transform: translate(0,0); }
    75% { transform: translate(-1.667vw,-1.667vw); }
    100% { transform: translate(0,0); }
  }
  @keyframes flowerMove2 {
    0% { transform: translate(0,0); }
    25% { transform: translate(-0.833vw,0.833vw); }
    50% { transform: translate(0,0); }
    75% { transform: translate(-1.667vw,1.667vw); }
    100% { transform: translate(0,0); }
  }
}


/* section__2 area */
@media screen and (min-width: 1441px) {
  .s2 {
    margin:0 auto;
    padding:0 0 45px;
    max-width:1000px;
    font-size:0;
    line-height:0;
  }
  .s2 h2 {
    margin:0 auto;
    padding:63px 0 7px;
    width:calc(585px / 2);
  }
  .s2__prof-headtxt {
    margin:0 auto 23px;
    font-size:18px;
    line-height:36px;
    text-align:center;
  }
  .s2__txt-center {
    margin:0 auto 92px;
    font-size:20px;
    line-height:36px;
    text-align:center;
  }
  .s2__info-wrap {
    margin:0 0 70px;
    width:100%;
    display:flex;
  }
  .s2__info-wrap--flexend {
    width:100%;
    display:flex;
    flex-direction: row-reverse;
  }
  .s2__body {
    padding:0 0 0 164px;
    width:50%;
  }
  .s2__body--bottom {
    padding:0 64px 0 0;
    width:55%;
  }
  .s2__body-img {width:50%;}
  .s2__body-img--bottom {
    padding:15px 0 0 84px;
    width:45%;
  }
  .s2__i1 {
    margin:-40px 0 0 88px;
    width:252px;
  }
  .s2__i2 {
    margin:5px auto 23px;
    width:330px;
  }
  .s2__i3 {
    width:320px;
  }
  .s2__txt,
  .s2__txt-link {
    margin:0 0 30px;
    font-size:20px;
    line-height:30px;
    text-align:left;
  }
  .s2__txt {
    line-height:36px;
  }
  .s2__txt-link a:hover {
    color:#dd92a3;
    text-decoration:underline;
  }
  .s2 h2 img,
  .s2__i1 img {width:100%;}
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s2 {
    margin:0 auto;
    padding:0 0 45px;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s2 h2 {
    margin:0 auto;
    padding:6.75% 0 1.4%;
    width:29.25%;
  }
  .s2__prof-headtxt {
    margin:0 auto 2.9%;
    font-size:1.35vw;
    line-height:1.35vw;
    text-align:center;
  }
  .s2__txt-center {
    margin:0 auto 10.2%;
    font-size:1.35vw;
    line-height:1.35vw;
    text-align:center;
  }
  .s2__info-wrap {
    margin:0 0 7.5%;
    width:100%;
    display:flex;
  }
  .s2__info-wrap--flexend {
    width:100%;
    display:flex;
    flex-direction: row-reverse;
  }
  .s2__body {
    padding:0 0 0 16.4%;
    width:50%;
  }
  .s2__body--bottom {
    padding:0 6.4% 0 0;
    width:55%;
  }
  .s2__body-img {width:50%;}
  .s2__body-img--bottom {
    padding:1.4% 0 0 8.5%;
    width:45%;
  }
  .s2__i1 {
    margin:-6.8% 0 0 16.8%;
    width:50.4%;
  }
  .s2__i2 {
    margin:0 auto 4.5%;
    width:66%;
  }
  .s2__i3 {
    width:85%;
  }
  .s2__txt,
  .s2__txt-link {
    margin:0 0 8.9%;
    font-size:1.39vw;
    line-height:2.25vw;
    text-align:left;
  }
  .s2__txt {
    line-height:2.5vw;
  }
  .s2__txt-link a:hover {
    color:#dd92a3;
    text-decoration:underline;
  }
  .s2 h2 img,
  .s2__i1 img {width:100%;}
  @media all and (min-width: 701px)and (max-width: 1000px) {
    .s2__prof-headtxt,
    .s2__txt-center {
      font-size:1.35rem;
      line-height:1.35rem;
    }
    .s2__txt,
    .s2__txt-link {
      font-size:1.39rem;
      line-height:2.3rem;
    }
    .s2__txt {
      line-height:2.5rem;
    }
  }
}
@media screen and (max-width: 700px) {
  .s2 {
    margin:0 auto;
    padding:0 0 8vw;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s2 h2 {
    margin:0 auto;
    padding:10vw 0 2vw;
    width:41.07vw;
  }
  .s2__prof-headtxt {
    margin:0 auto 4.5vw;
    font-size:4.8vw;
    line-height:8vw;
    text-align:center;
  }
  .s2__txt-center {
    margin:0 auto 7vw;
    font-size:4.8vw;
    line-height:9vw;
    text-align:center;
  }
  .s2__info-wrap {
    margin:0 0 10vw;
    width:100%;
  }
  .s2__info-wrap--flexend {
    width:100%;
  }
  .s2__body {
    padding:0 0 3vw;
    width:100%;
  }
  .s2__body--bottom {
    padding:0;
    width:100%;
  }
  .s2__body-img {width:100%;}
  .s2__body-img--bottom {
    margin:-6vw auto 0;
    width:60%;
  }
  .s2__i1 {
    margin:0 auto;
    width:42vw;
  }
  .s2__i2 {
    margin:0 auto 10vw;
    width:65vw;
  }
  .s2__i3 {
    width:58vw;
  }
  .s2__txt-link {
    margin:0 0 8vw;
    font-size:4.8vw;
    line-height:9vw;
    text-align:center;
  }
  .s2__txt {
    margin:0 0 8vw;
    padding:0 7vw;
    font-size:5vw;
    line-height:10vw;
    text-align:justify;
  }
  .s2 h2 img,
  .s2__i1 img,
  .s2__i2 img,
  .s2__i3 img {width:100%;}
}
.s2 {
  background:#000;
  font-family: "Ryumin Medium KL", "HiraMinProN W3" , "Hiragino Mincho Pro" , "Yu Mincho" , serif;
  color:#FFF;
}
.s2__txt-link a {
  color:#dd92a3;
  text-decoration:none;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/* section__3 area */
@media screen and (min-width: 1441px) {
  .s3 {
    margin:0 auto;
    padding:0;
    max-width:1000px;
    font-size:0;
    line-height:0;
  }
  .s3__lineup {
    padding:65px 58px;
    width:100%;
    background:#f7e1cd;
  }
  .s3__detail-wrap {
    margin:0 0 58px;
    width:100%;
    display:flex;
  }
  .s3__detail-wrap--last {
    width:100%;
    display:flex;
  }
  .s3__slider {
    margin:0 28px 0 0;
    width:500px;
    background:#FFF;
    position:relative;
    cursor:pointer;
  }
  .s3__detail {
    width:calc(100% - 500px - 28px);
  }
  .s3__slider div:nth-child(3) {
    width: 500px;
    height:366px;
    border:2px solid #c2464a;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s3__slider div:nth-child(3) picture {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s3__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .item__icon {
    width: 145px;
    height:182.5px;
    position:absolute;
    top: 52%;
    right:10%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__icon3 {
    width: 145px;
    height:182.5px;
    position:absolute;
    top: 62%;
    right:10%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__point {
    width: 120px;
    height:120px;
    position:absolute;
    top:-8%;
    right:-6.8%;
    z-index:302;
  }
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s3 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s3__lineup {
    padding:6.5% 5.8%;
    width:100%;
    background:#f7e1cd;
  }
  .s3__detail-wrap {
    margin:0 0 5.8%;
    width:100%;
    display:flex;
  }
  .s3__detail-wrap--last {
    width:100%;
    display:flex;
  }
  .s3__slider {
    margin:0 2.6% 0 0;
    width:56.3%;
    background:#FFF;
    position:relative;
    cursor:pointer;
  }
  .s3__detail {
    width:calc(100% - 56.34% - 2.6%);
  }
  .s3__slider div:nth-child(3) {
    width: 100%;
    height:100%;
    border:2px solid #c2464a;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s3__slider div:nth-child(3) picture {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s3__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .item__icon,
  .item__icon3 {
    width: 29%;
    height:36.5%;
    position:absolute;
    top: 46%;
    right:10%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__icon3 {
    width: 27%;
    height: 36.5%;
    position: absolute;
    top: 55%;
    right: 10%;
    transform: translateY(-50%);
    z-index: 300;
  }
  .item__point {
    width: 24%;
    height:24%;
    position:absolute;
    top:-8%;
    right:-6.8%;
    z-index:302;
  }
}
@media screen and (max-width: 700px) {
  .s3 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s3__lineup {
    padding:0;
    width:100%;
    background:#f7e1cd;
  }
  .s3__detail-wrap {
    margin:0 auto;
    padding:0 4vw;
    width:100%;
    border-bottom:3vw solid #e9c4a9;
  }
  .s3__detail-wrap--last {
    margin:0 auto;
    padding:0 4vw;
    width:100%;
  }
  .s3__slider {
    padding:4vw 0 0 0;
    width:100%;
    position:relative;
  }
  .s3__detail {
    padding:1vw 0 4vw;
    width:100%;
  }
  .s3__slider div:nth-child(3) {
    width: 100%;
    height:80vw;
    background:#FFF;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s3__slider div:nth-child(3) picture {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s3__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .slide {
    top: 50%!important;
  }
  .sOff {
    opacity:0;
  }
  .item__icon {
    width: 32.5%;
    height:45.5%;
    position:absolute;
    top: 58%;
    right:5%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__icon3 {
    width: 32.5%;
    height:45.5%;
    position:absolute;
    top: 58%;
    right:2.5%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__point {
    width: 24%;
    height:24%;
    position:absolute;
    top:1.5vw;
    right:-2vw;
    z-index:302;
  }
}


/* section__4 area */
.s4 {
  margin:0 auto;
  padding:0;
  max-width:1000px;
  font-size:0;
  line-height:0;
}
.s4__wrap {
  padding:58px 0;
  background-color:#f7e1cd;
  background-image: url(../img/s4_bk_pc.png);
  background-repeat: repeat;
  background-size: 50%;
  background-position:top left;
}
.s4__body {
  margin:0 auto;
  padding:60px 40px;
  width:880px;
  background:#FFF;
  border-radius:42px;
}
.s4__body-title {
  margin:0 auto 50px;
  width:800px;
}
.s4__body-feat {
  width:100%;
}
.feat__open,
.feat__close,
.feat__body {
  margin:50px auto 0;
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s4 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s4__wrap {
    padding:5.8% 0;
    background-color:#f7e1cd;
    background-image: url(../img/s4_bk_pc.png);
    background-repeat: repeat;
    background-size: 50%;
    background-position:top left;
  }
  .s4__body {
    margin:0 auto;
    padding:6% 4%;
    width:88%;
    background:#FFF;
    border-radius:42px;
  }
  .s4__body-title {
    margin:0 auto 6%;
    width:100%;
  }
  .s4__body-feat {
    width:100%;
  }
  .feat__open,
  .feat__close,
  .feat__body {
    margin:6% auto 0;
  }
}
@media screen and (max-width: 700px) {
  .s4 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s4__wrap {
    padding:8vw 0;
    background-color:#f7e1cd;
    background-image: url(../img/s4_bk_sp.png);
    background-repeat: repeat;
    background-size: 100%;
    background-position:top left;
  }
  .s4__body {
    margin:0 auto;
    padding:8vw 5vw;
    width:84vw;
    background:#FFF;
    border-radius:2.5vw;
  }
  .s4__body-title {
    margin:0 auto 4vw;
    width:100%;
  }
  .s4__body-feat {
    width:100%;
  }
  .feat__open,
  .feat__close,
  .feat__body {
    margin:8vw auto 0;
  }
}
.feat__open,
.feat__close {
	cursor:pointer;
}
.feat__open:hover img,
.feat__close:hover img {
  opacity: 0.6;
}
.open,
.feat__body {
	display:none;
}
.feat__body {
	width:100%;
}


/* section__5 area */
@media screen and (min-width: 1441px) {
  .s5 {
    margin:0 auto;
    padding:0;
    max-width:1000px;
    font-size:0;
    line-height:0;
  }
  .s5__lineup {
    padding:65px 28px 65px 58px;
    width:100%;
    background:#f0cad1;
  }
  .s5__detail-wrap {
    margin:0 0 56px;
    width:100%;
    display:flex;
  }
  .s5__detail-wrap--last {
    width:100%;
    display:flex;
  }
  .s5__slider {
    margin:0 46px 0 0;
    width:540px;
    background:#FFF;
    position:relative;
    cursor:pointer;
  }
  .s5__detail {
    width:calc(100% - 540px - 46px);
  }
  .s5__slider div:nth-child(3) {
    width: 540px;
    height:366px;
    border:2px solid #941d5c;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s5__slider div:nth-child(3) picture {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s5__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .item__icons5 {
    width: 145px;
    height:182.5px;
    position:absolute;
    top: 62%;
    right:10%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__points5 {
    width: 120px;
    height:120px;
    position:absolute;
    top:-8%;
    right:2.8%;
    z-index:302;
  }
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s5 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s5__lineup {
    padding:6.5% 2.8% 6.5% 5.8%;
    width:100%;
    background:#f0cad1;
  }
  .s5__detail-wrap {
    margin:0 0 5.8%;
    width:100%;
    display:flex;
  }
  .s5__detail-wrap--last {
    width:100%;
    display:flex;
  }
  .s5__slider {
    margin:0 4.6% 0 0;
    width:60.8%;
    background:#FFF;
    position:relative;
    cursor:pointer;
  }
  .s5__detail {
    width:calc(100% - 60.8%);
  }
  .s5__slider div:nth-child(3) {
    width: 100%;
    height:100%;
    border:2px solid #941d5c;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s5__slider div:nth-child(3) picture {
    width: 100%;
    height:100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s5__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .item__icons5 {
    width: 26%;
    height:46.5%;
    position:absolute;
    top: 58%;
    right:10%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__points5 {
    width: 22%;
    height:22%;
    position:absolute;
    top:-8%;
    right:2.8%;
    z-index:302;
  }
}
@media screen and (max-width: 700px) {
  .s5 {
    margin:0 auto;
    padding:0;
    max-width:100%;
    font-size:0;
    line-height:0;
  }
  .s5__lineup {
    padding:0;
    width:100%;
    background:#f0cad1;
  }
  .s5__detail-wrap {
    margin:0 auto;
    padding:0 4vw;
    width:100%;
    border-bottom:3vw solid #f2a8aa;
  }
  .s5__detail-wrap--last {
    margin:0 auto;
    padding:0 4vw;
    width:100%;
  }
  .s5__slider {
    padding:4vw 0 0 0;
    width:100%;
    position:relative;
  }
  .s5__detail {
    padding:2vw 0 3vw;
    width:100%;
  }
  .s5__slider div:nth-child(3) {
    width: 100%;
    height:80vw;
    background:#FFF;
    display: block;
    position:relative;
    overflow:hidden;
  }
  .s5__slider div:nth-child(3) picture {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
    z-index:301;
  }
  .s5__slider div:nth-child(3) picture:nth-of-type(2) {
    top: 150%;
  }
  .item__icons5 {
    width: 32.5%;
    height:45.5%;
    position:absolute;
    top: 58%;
    right:5%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__icon3 {
    width: 32.5%;
    height:45.5%;
    position:absolute;
    top: 58%;
    right:2.5%;
    transform: translateY(-50%);
    z-index:300;
  }
  .item__points5 {
    width: 24%;
    height:24%;
    position:absolute;
    top:1.5vw;
    right:-2vw;
    z-index:302;
  }
}


/* section__6 area */
@media screen and (min-width: 1441px) {
  .s6 {
    margin:0 auto;
    padding:0;
    width:1000px;
    height:800px;
    font-size:0;
    line-height:0;
    background:#000;
    position:relative;
  }
  .s6__foundation,
  .s6__lv1 {
    width:100%;
  }
  .s6__base,
  .s6__dummy,
  .s6__movie-frame {
    width:734px;
    height:413px;
    position:absolute;
    top:224px;
    left: 50%;
    transform: translateX(-50%);
  }
  .s6__dummy {
    cursor:pointer;
  }
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s6 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
    background:#000;
    position:relative;
  }
  .s6__foundation,
  .s6__lv1 {
    width:100%;
  }
  .s6__base,
  .s6__dummy,
  .s6__movie-frame {
    width:73.4%;
    height:51.5%;
    position:absolute;
    top:28.2%;
    left: 50%;
    transform: translateX(-50%);
  }
  .s6__dummy {
    cursor:pointer;
  }
}
@media screen and (max-width: 700px) {
  .s6 {
    margin:0 auto;
    padding:0;
    width:100%;
    height:78vw;
    font-size:0;
    line-height:0;
    background:#000;
    position:relative;
  }
  .s6__foundation,
  .s6__lv1 {
    width:100%;
  }
  .s6__base,
  .s6__dummy,
  .s6__movie-frame {
    width:73.47vw;
    height:41.55vw;
    position:absolute;
    top:22vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
.s6__base {
  z-index:210;
}
.s6__lv1 {
  position:absolute;
  top:0;
  left:0;
  z-index:215;
}
.s6__dummy {
  z-index:225;
}
.s6__movie-frame {
  z-index:205;
}


/* section__7 area */
.s7 {
  margin:0 auto;
  padding:0;
  width:100%;
  font-size:0;
  line-height:0;
}
.s7__wrap {
  padding:58px 0;
  background-color:#f0cad1;
  background-image: url(../img/s4_bk_pc.png);
  background-repeat: repeat;
  background-size: 50%;
  background-position:top left;
}
.s7__body {
  margin:0 auto;
  padding:60px 40px;
  max-width:880px;
  background:#FFF;
  border-radius:42px;
}
.s7__body-title {
  margin:0 auto 50px;
  width:800px;
}
.s7__body-feat {
  width:100%;
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s7 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s7__wrap {
    padding:5.8% 0;
    background-color:#f0cad1;
    background-image: url(../img/s4_bk_pc.png);
    background-repeat: repeat;
    background-size: 50%;
    background-position:top left;
  }
  .s7__body {
    margin:0 auto;
    padding:6% 4%;
    width:88%;
    background:#FFF;
    border-radius:42px;
  }
  .s7__body-title {
    margin:0 auto 6%;
    width:100%;
  }
  .s7__body-feat {
    width:100%;
  }
}
@media screen and (max-width: 700px) {
  .s7 {
    margin:0 auto;
    padding:0;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s7__wrap {
    padding:8vw 0;
    background-color:#f0cad1;
    background-image: url(../img/s4_bk_sp.png);
    background-repeat: repeat;
    background-size: 100%;
    background-position:top left;
  }
  .s7__body {
    margin:0 auto;
    padding:8vw 5vw;
    width:84vw;
    background:#FFF;
    border-radius:2.5vw;
  }
  .s7__body-title {
    margin:0 auto 4vw;
    width:100%;
  }
  .s7__body-feat {
    width:100%;
  }
}


/* section__8 area */
.s8 {
  margin:0 auto;
  padding:0;
  max-width:1000px;
}
.s8__maintitle {
  margin:60px auto 45px;
  width:100%;
}
.s8__select-item {
  margin:0 auto 45px;
  width:100%;
}
.s8__link,
.s8__acdion {
  margin:0 auto 80px;
  width:880px;
}
@media all and (min-width: 701px)and (max-width: 1440px) {
  .s8 {
    margin:0 auto;
    padding:0;
    width:100%;
  }
  .s8__mainTitle {
    margin:6% auto 4.5%;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s8__select-item {
    margin:0 auto 4.5%;
    width:100%;
    font-size:0;
    line-height:0;
  }
  .s8__link,
  .s8__acdion {
    margin:0 auto 8%;
    width:88%;
    font-size:0;
    line-height:0;
  }
}
@media screen and (max-width: 700px) {
  .s8 {
    margin:0 auto;
    padding:0;
    width:100%;
  }
  .s8__mainTitle {
    margin:12vw 0 8vw;
    width:100%;
  }
  .s8__acdion {
    margin:0 auto 8vw;
    width:82.9%;
  }
  .s8__select-item {
    margin:0 0 8vw;
    width:100%;
  }
  .s8__link {
    margin:0 auto 40px;
    width:82.9%;
  }
}
/*=======================================================
	ナチュラ
=======================================================*/
#footer-area{
  margin-top: 100px;
}
.btm_nav{
  margin: 50px 0 0;
  padding: 0 20px 20px;
  border-top: 1px solid #d8317a;
  text-align: center;
}
.btm_nav__ttl{
  margin: -12px 0 15px;
  font-size: 1.5rem;
}
.btm_nav__ttl2{
  color: #454545;
}
.btm_nav__ttl span{
  padding: 0 15px;
  display: inline-block;
  background-color: #fff;
  color: #d8317a;
}
.btm_nav__ttl span a{
  color: #d8317a;
  text-decoration: none;
}
.natura_index{
  margin: 15px 0 20px;
}
.natura_index li{
  margin: 0 0 10px;
}
.natura_index.item3 li{
  margin: 0 0 10px;
}
.natura_index.item2 li{
  margin: 0 0 10px;
}
.natura_index li a {
  padding:20px;
  display: block;
  background: url(../img/arrow-pink.png) no-repeat 95% center;
  background-color: #fbe4e9;
  color: #424242;
  text-decoration: none;
}
.natura_index li.current a {
  background: url(../img/arrow-w.png) no-repeat 95% center;
  background-color: #fbc6d1;
}
.natura_index li a:hover{
  opacity: 0.8;
}
.btm_nav__lead{
  text-align: center;
}
@media all and (min-width: 701px) {
  .natura_index{
    margin: 15px 0 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .natura_index li{
    margin: 0;
    width: 24%;
  }
  .natura_index li a {
    padding:37px 20px;
  }
  .natura_index.item3 li{
    margin: 0 0 20px;
    width: 32%;
  }
  .natura_index.item2 li{
    margin: 0 0 20px;
    width: 48%;
  }
  .ttl-lead{
    display: none;
  }
  .selfcheck__wrap{
    margin: 0 -50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .selfcheck__wrap > div{
    margin: 0 0 15px;
    padding: 0 30px;
    box-sizing: border-box;
    width: 33%;
    border-right: 1px dotted #353535;
  }
  .check-cont{
    margin: 30px 0 50px;
    padding: 30px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  .check__txt{
    padding-left: 20px;
    flex: 1;
  }
  .natura_index li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.2em;
  }
}
@media screen and (max-width: 700px) {
  .ttl-lead{
    display: block;
    text-align: center;
  }
}
/*=======================================================
	商品の選び方
=======================================================*/
.lead-cont {
  margin: 50px 0 30px;
  padding: 0;
  font-size: 1.8rem;
  text-align: center;
}
.select-question {
  margin: 0 0 25px;
  color: #d10065;
  font-size: 1.8rem;
  line-height:2.4rem;
  text-align: center;
}
.select-cont > div{
  margin: 15px 0 0;
  padding: 40px 40px;
  box-sizing: border-box;
  border: 1px solid #d10065;
}
.select-q{
  display: block;
  text-align: center;
}
.select-q img{
  margin-top: -65px ;
  margin-bottom: 23px;
}
.select_answer li{
  margin: 10px 0;
  padding-bottom: 5px;
  padding-left: 25px;
  border-bottom: 2px solid #fff;
  background: url(../img/ico_off.png) no-repeat left 0.2em;
  font-size: 1.6rem;
  line-height: 1.6;
  transition: all  0.3s ease;
}
.osusume h2 {
  margin: 25px 0 30px;
  color: #d10065;
  font-size: 2.8rem;
  text-align: center;
}
.select_answer li.check{
  border-bottom: 2px dotted #ffb3b3;
  background: url(../img/ico_on.png) no-repeat left 0.2em;
}
.item-cont > div {
  padding: 50px;
  display: none;
  border: 1px solid #c2c2c2;
  opacity: 0;
  text-align: center;
}
.select-item__ttl {
  margin: 0 0 20px;
  display: none;
  opacity: 0;
  font-size: 2.0rem;
}
.select-item__ttl.show{
  display: block;
  opacity: 1;
  animation: fadeIn 0.1s ease-in 0s forwards;
}
@keyframes fadeIn {
  0%{
    display: none;
    opacity: 0;
  }
  1%{
    display: block;
    opacity: 0;
  }
  100%{
    display: block;
    opacity: 1;
  }
}
.select-item__wrap{
  display: flex;
  justify-content: center;
}
.item-cont > div.show{
  padding: 50px;
  display: block;
  border: 1px solid #c2c2c2;
  opacity: 1;
  text-align: center;
  animation: fadeIn 0.1s ease-in 0s forwards;
}
.item-cont > div.show > div{
  text-align: center;
}
.item-cont > div.show > div img{
  margin: 0;
}
.item-cont > div h4{
  padding: 5px 0 0;
  font-size: 1.4rem;
}
.osusume-header{
  text-align: center;
}
.select-output{
  height: 1px;
  opacity: 0;
}
.osusume-text{
  padding: 30px;
  border: 1px solid #ccc;
  color: #575757;
  font-size: 1.8rem;
}
.osusume-text.hide{
  display: none;
}
.arrow{
  margin: 15px 0 0;
  text-align: center;
}
.packagecheck{
  margin: 30px 0 0;
  padding: 10px 20px 0;
  background-color: #ffe2e7;
}
.natura-item__info{
  padding: 20px 0 0;
}
.natura-item__info + .natura-item__info{
  padding: 5px 0 0;
}
.natura-item__info a{
  margin: 0 0 3px;
  padding: 10px 15px 10px 5px;
  display: inline-block;
  width: 13em;
  background: url(../img/linkarrow.png) no-repeat 96% center;
  background-color: #de2047;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
.natura-item__info a:hover{
  opacity: 0.8;
}
.natura-item__info.chokotto a{
  background-color: #ea5f00;
}
.natura-item__info.powerful a{
  background-color: #463b37;
}
.packagecheck_box2 p{
  margin-bottom: 0;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 701px){
  .select-cont{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .select-cont > div{
    margin: 15px 0 0;
    padding: 40px 3% 30px;
    box-sizing: border-box;
    width: 32%;
    border: 1px solid #d10065;
  }
  .select-question{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2em;
  }
  .packagecheck{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .packagecheck_box2{
    padding-left: 30px;
  }
}
/* スマホ----------------------------- */
@media screen and (max-width: 700px){
  .osusume {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    height: auto;
  }
  .lead-cont{
    margin: 40px 0 20px;
    padding: 0;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.8;
  }
  .item-cont > div{
    padding: 15px;
  }
  .select-item__wrap{
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .select-item__wrap > div{
    width: 34%;
  }
  .item-cont > div h4{
    padding-top: 2px;
    height: 2.5em;
    line-height: 1.2;
  }
  .select-question{
    margin: 0 0 15px;
    font-size: 1.7rem;
  }
  .select-cont {
    margin:0 auto;
    width:calc(100% - 30px);
  }
  .select-cont > div{
    margin: 30px 0 0;
    padding: 20px 20px;
    box-sizing: border-box;
    border: 1px solid #d10065;
  }
  .select-q img{
    margin-top: -41px;
    margin-bottom: 15px;
    width: 59px;
  }
  .packagecheck{
    margin: 30px 0 0;
    padding: 15px;
  }
  .packagecheck_box2{
    padding-top: 15px;
  }
  .item-cont > div.show{
    padding: 20px 5px 5px;
  }
  .select_answer li{
    margin: 5px 0;
  }
}