@charset "UTF-8";






#special #key {
  margin: 0 auto;
  width: 100%;
  height: 600px;
/*  background: url(../images/collagen/key.png) no-repeat center 0;*/
  background-size: cover;
  position: relative;
}
#special #key header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
}
#special #key header .inner {
  margin: 0 auto;
  padding: 30px 0;
  width: 1000px;
}
#special #key header .inner h1 {
  margin: 0 70px 0 0;
  display: inline-block;
  vertical-align: middle;
}
#special #key header .inner h1 img {
  width: 200px;
}
#special #key header .inner nav {
  display: inline-block;
  vertical-align: middle;
}
#special #key header .inner nav ul {
  font-size: 0;
}
#special #key header .inner nav ul li {
  margin: 0 30px 0 0;
  font-size: 1.1666666666667rem;
  line-height: 1;
  display: inline-block;
}
#special #key header .inner nav ul li a {
  color: #333333;
}
#special #key header .inner nav ul.sp {
  display: none;
}
#special #key .panel {
  width: 100%;
  position: absolute;
  top: 55%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#special #key .panel .inner {
  margin: 0 auto;
  width: 1000px;
}
#special #key .panel .inner h2 {
  margin: 0 0 10px 40%;
  width: 50%;
}

#special #key .panel .inner p {
  width:430px;
  margin: 0 0 10px 40%;
  padding: 60px 0 0 0; 
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.4rem;
  line-height: 2;
}


@media print, screen and (min-width: 960px) {
  #special #key header .inner nav {
    display: inline-block;
  }
  #special #key header #sp__menu {
    display: none;
  }
  #special #wrap {
    margin: 0;
  }
  #special section .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #special section .swiper-slide {
    width: 50%;
    padding: 10px;
  }
  #special section .swiper-button-prev,
  #special section .swiper-button-next,
  #special section .swiper-pagination {
    display: none;
  }

}


@media print, screen and (min-width: 600px) and (max-width: 959px) {
  #special #key header .inner {
    padding: 0;
    background: #ffffff;
  }
  #special #key header .inner h1 {
    margin: 0;
    padding: 20px 0 20px 15px;
  }
  #special #key header .inner nav {
    width: 100%;
    height: 100vh;
    background: #ffffff;
    border-top: 1px #333333 solid;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    display: none;
  }
  #special #key header .inner nav ul li {
    width: 100%;
    padding: 16px;
    font-size: 1.1666666666667rem;
    line-height: 1;
    border-bottom: 1px #333333 solid;
    position: relative;
  }
  #special #key header .inner nav ul li a {
    color: #333333;
    display: block;
  }
  #special #key header .inner nav ul.sp {
    display: block;
  }
  #special #key header #sp__menu {
    width: 30px;
    height: 40px;
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  #special #key header #sp__menu span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    background-color: #333333;
  }
  #special #key header #sp__menu span:nth-child(1) {
    top: 8px;
  }
  #special #key header #sp__menu span:nth-of-type(2) {
    top: 15px;
  }
  #special #key header #sp__menu span:nth-of-type(3) {
    top: 22px;
  }
  #special #key header #sp__menu.active span:nth-child(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    -moz-transform: translateY(6px) rotate(-45deg);
    -ms-transform: translateY(6px) rotate(-45deg);
    -o-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }
  #special #key header #sp__menu.active span:nth-of-type(2) {
    opacity: 0;
  }
  #special #key header #sp__menu.active span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    -moz-transform: translateY(-8px) rotate(45deg);
    -ms-transform: translateY(-8px) rotate(45deg);
    -o-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }

}


@media print, screen and (max-width: 768px) {
  #special #key {
    min-height: auto;
    height: auto;
    background: url(../) no-repeat 0 0;
    background-size: cover;
  }
  #special #key header .inner {
    padding: 0;
    width: 100%;
    background: #ffffff;
  }
  #special #key header .inner h1 {
    margin: 0;
    padding: 20px 0 20px 15px;
  }
  #special #key header .inner h1 img {
    width: 150px;
  }
  #special #key header .inner nav {
    width: 100%;
    height: 100vh;
    background: #ffffff;
    border-top: 1px #333333 solid;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    display: none;
  }
  #special #key header .inner nav ul li {
    width: 100%;
    padding: 16px;
    font-size: 1.1666666666667rem;
    line-height: 1;
    border-bottom: 1px #333333 solid;
    position: relative;
  }
  #special #key header .inner nav ul li a {
    color: #333333;
    display: block;
  }
  #special #key header .inner nav ul.sp {
    display: block;
  }
  #special #key #sp__menu {
    width: 30px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  #special #key #sp__menu span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    background-color: #333333;
  }
  #special #key #sp__menu span:nth-child(1) {
    top: 8px;
  }
  #special #key #sp__menu span:nth-of-type(2) {
    top: 15px;
  }
  #special #key #sp__menu span:nth-of-type(3) {
    top: 22px;
  }
  #special #key #sp__menu.active span:nth-child(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    -moz-transform: translateY(6px) rotate(-45deg);
    -ms-transform: translateY(6px) rotate(-45deg);
    -o-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }
  #special #key #sp__menu.active span:nth-of-type(2) {
    opacity: 0;
  }
  #special #key #sp__menu.active span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    -moz-transform: translateY(-8px) rotate(45deg);
    -ms-transform: translateY(-8px) rotate(45deg);
    -o-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }

}





/*=====================================
  PC key_block
=====================================*/

div.key_block {
  width: auto;
  height: 657px;
  background: transparent url(../../assets/images/pure/key_bg.png) top center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

div.key_block div.block_inner {
  width: 807px;
  margin: 0 auto;
  padding: 130px 0 0 0;
}

div.key_block div.block_inner div.box h2 {
  width: 610px;
  margin: 0 auto;
}


/*=====================================
  SP key_block
=====================================*/
@media print, screen and (max-width: 768px) {

  div.key_block {
    width: auto;
    height: auto;
    padding: 0 0 0 0;
    margin: 0;
    background: transparent url(../) 0 0 no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }

  div.key_block div.block_inner {
    width: auto;
    margin: 0 auto;
    padding: 60px 0 0 0;
  }

}

/*=====================================
  PC top_block
=====================================*/

div.top_container {
  width: 1000px;
  margin: 0 auto;
  padding: 70px 0 0 0;
}


div.top_container h2 {
  width: auto;
  font-size: 30px;
  text-align: center;
}


div.top_container div.component_block {
  width: 1000px;
  padding: 70px 0 0 0;
}

div.top_container div.component_block dl.left_box {
  width: 470px;
  float: left;
}

div.top_container div.component_block dl.right_box {
  width: 470px;
  float: right;
}

div.top_container div.component_block dl dt {
  width: auto;
  padding: 0 0 10px 0;
  border-bottom: 1px #999 solid;
  text-align: center;
}

div.top_container div.component_block dl dt span {
  width: auto;
  font-size: 23px;
}

div.top_container div.component_block dl dd.text {
  width: 450px;
  margin: 0 auto;
  padding: 15px 0 0 0;
  font-size: 17px;
  line-height: 1.8em;
  color: 333;
}

div.top_container div.component_block dl.left_box dd.pic {
  width: 370px;
  margin: 0 auto;
  padding: 30px 0 0 0;
}

div.top_container div.component_block dl.right_box dd.text div.detail_box {
  width: 430px;
  margin: 0 auto;
  padding: 10px 0 0 0;
}

div.top_container div.component_block dl.right_box dd.text div.detail_box p.pic {
  width: 178px;
  float: left;
}

div.top_container div.component_block dl.right_box dd.text div.detail_box p.text {
  width: 220px;
  float: right;
  margin: 0 auto;
  padding: 55px 0 0 0;
  font-size: 14px;
}

/*=====================================
  SP top_block
=====================================*/
@media print, screen and (max-width: 768px) {

  div.top_container {
    width: auto;
    margin: 0 auto;
    padding: 3.5em 0 0 0;
  }

  div.top_container h2 {
    width: auto;
    font-size: 22px;
    text-align: center;
  }

  div.top_container div.component_block {
    width: auto;
    padding: 1.5em 0.8em 0 0.8em;
  }

  div.top_container div.component_block dl.left_box {
    width: auto;
    float: none;
  }

  div.top_container div.component_block dl.right_box {
    width: auto;
    float: none;
    padding: 2.5em 0 0 0;
  }

  div.top_container div.component_block dl dt {
    width: auto;
    border-bottom: 1px #000 solid;
    text-align: center;
  }

  div.top_container div.component_block dl dt span {
    width: auto;
    font-size: 19px;
    line-height: 2em;
  }

  div.top_container div.component_block dl dd.text {
    width: auto;
    margin: 0 auto;
    padding: 15px 0 0 0;
    font-size: 17px;
    line-height: 1.8em;
  }


  div.top_container div.component_block dl.left_box dd.pic {
    width: auto;
    margin: 0 auto;
    padding: 1.5em 1.5em;
  }

  div.top_container div.component_block dl.right_box dd.text div.detail_box {
    width: auto;
    margin: 0 auto;
    padding: 20px 0 0 0;
  }

  div.top_container div.component_block dl.right_box dd.text div.detail_box p.pic {
    width: 40%;
    float: left;
  }

  div.top_container div.component_block dl.right_box dd.text div.detail_box p.text {
    width: 53%;
    float: right;
    margin: 0 auto;
    padding: 3em 0 0 0;
    font-size: 14px;
  }
}

/*=====================================
  PC moisturizing
=====================================*/

div.moisturizing {
  width: auto;
  min-width: 1000px;
  padding: 150px 0 0 0;
}

div.moisturizing div.mois_inner {
  width: auto;
  padding: 0 0 100px 0;
  background-color: #F2F2F2;
  position: relative;
}

div.moisturizing div.mois_inner h2 {
  font-family: "Montserrat", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  width: auto;
  margin: 0 auto;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  position: absolute;
  top: -55px;
  left: 0;
  right: 0;
}

div.moisturizing div.mois_inner h2 strong {
  font-size: 24px;
  display: block;
}

div.moisturizing div.mois_inner div.block01 {
  width: 960px;
  margin: 0 auto;
  padding: 140px 0 0 0;
}

div.moisturizing div.mois_inner div.block01 h3 {
  width: 430px;
  float: right;
  font-size: 30px;
  line-height: 1em;
}

div.moisturizing div.mois_inner div.block01 h3 sup.fs {
  font-size: 14px;
}

div.moisturizing div.mois_inner div.block01 h3 span {
  width: auto;
  display: block;
  font-size: 17px;
}

div.moisturizing div.mois_inner div.block01 span.photo {
  width: 450px;
  display: block;
  float: left;
}

div.moisturizing div.mois_inner div.block01 p.text {
  width: 430px;
  float: right;
  padding: 40px 0 0 0;
  font-size: 17px;
  line-height: 1.8em;
}

div.moisturizing div.mois_inner div.block02 {
  width: 960px;
  margin: 0 auto;
  padding: 80px 0 0 0;
}

div.moisturizing div.mois_inner div.block02 h3 {
  width: 515px;
  float: left;
  font-size: 30px;
  line-height: 1em;
}

div.moisturizing div.mois_inner div.block02 h3 span {
  width: auto;
  display: block;
  font-size: 17px;
  padding: 30px 0 0 0;
}

div.moisturizing div.mois_inner div.block02 span.photo {
  width: 400px;
  display: block;
  float: right;
}

div.moisturizing div.mois_inner div.block02 p.text {
  width: 515px;
  float: left;
  padding: 40px 0 0 0;
  font-size: 17px;
  line-height: 1.8em;
}

div.moisturizing div.mois_inner div.under_block {
  width: 980px;
  margin: 0 auto;
  padding: 80px 0 0 0;
  overflow: hidden;
}


div.moisturizing div.mois_inner div.under_block div.component_block {
  width: 980px;
  padding: 50px 0 0 0;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl.left_box {
  width: 470px;
  float: left;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl.right_box {
  width: 470px;
  float: right;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl dt {
  width: auto;
  border-bottom: 1px #000 solid;
  text-align: center;
}


div.moisturizing div.mois_inner div.under_block div.component_block dl dd {
  width: 460px;
  margin: 0 auto;
  padding: 30px 0 0 0;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl dt span {
  width: auto;
  font-size: 24px;
  line-height: 2em;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl dd em.text {
  width: 255px;
  float: right;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8em;
}

div.moisturizing div.mois_inner div.under_block div.component_block dl dd span.pic {
  width: 173px;
  float: left;
  display: block;
}


div.moisturizing div.mois_inner div.under_block div.nonuse_block {
  width: 930px;
  margin: 0 auto;
  padding: 80px 0 0 0;
}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner {
  width: 930px;
  height: 140px;
  margin: 0 auto;
  background: transparent url(../../assets/images/pure/bl02_box.png) center bottom no-repeat;
}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner h3 {
  width: auto;
  font-size: 19px;
  text-align: center;
}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul {
  width: 820px;
  margin: 0 auto;
  padding: 30px 0 0 0;
}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li {
  width: 190px;
  float: left;
  margin: 0 20px 0 0;
}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li:last-child {
  margin: 0;

}

div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li span {
  width: 190px;
  display: block;
  margin: 0 auto;
  padding: 14px 0;
  background-color: #fff;
  font-size: 16px;
  text-align: center;
}

/*=====================================
  SP moisturizing
=====================================*/
@media print, screen and (max-width: 768px) {

  div.moisturizing {
    width: auto;
    min-width: auto;
    padding: 80px 0 0 0;
  }

  div.moisturizing div.mois_inner {
    width: auto;
    padding: 0 0 30px 0;
    background-color: #F2F2F2;
    position: relative;
  }

  div.moisturizing div.mois_inner h2 {
    font-family: "Montserrat", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    width: auto;
    margin: 0 auto;
    font-size: 33px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
  }

  div.moisturizing div.mois_inner h2 strong {
    font-size: 18px;
    display: block;
    padding: 10px 0 0 0;
  }

  div.moisturizing div.mois_inner div.block01 {
    width: auto;
    margin: 0 auto;
    padding: 130px 0.8em 0 0.8em;
  }

  div.moisturizing div.mois_inner div.block01 h3 {
    width: auto;
    float: none;
    padding: 0 0 10px 0;
    border-bottom: 1px #333 solid;
    font-size: 27px;
    text-align: center;
  }

  div.moisturizing div.mois_inner div.block01 h3 sup.fs {
    font-size: 13px;
  }

  div.moisturizing div.mois_inner div.block01 h3 span {
    width: auto;
    display: block;
    font-size: 16px;
    line-height: 1.8em;
  }

  div.moisturizing div.mois_inner div.block01 span.photo {
    width: auto;
    display: block;
    float: none;
    padding: 2em 0 0 0;
  }

  div.moisturizing div.mois_inner div.block01 p.text {
    width: auto;
    margin: 0 auto;
    padding: 1.5em 0 0 0;
    font-size: 14px;
    line-height: 1.8em;
  }

  div.moisturizing div.mois_inner div.block02 {
    width: auto;
    margin: 0 auto;
    padding: 3em 0.8em 0 0.8em;
  }

  div.moisturizing div.mois_inner div.block02 h3 {
    width: auto;
    float: none;
    padding: 0 0 10px 0;
    border-bottom: 1px #333 solid;
    font-size: 23px;
    text-align: center;
  }

  div.moisturizing div.mois_inner div.block02 span.photo {
    width: auto;
    display: block;
    float: none;
    padding: 2em 0 0 0;
  }

  div.moisturizing div.mois_inner div.block02 p.text {
    width: auto;
    margin: 0 auto;
    padding: 1.5em 0 0 0;
    font-size: 14px;
    line-height: 1.8em;
  }

  div.moisturizing div.mois_inner div.under_block {
    width: auto;
    margin: 0 auto;
    padding: 0 1em 0 1em;
    overflow: hidden;
  }






  div.moisturizing div.mois_inner div.under_block div.component_block {
    width: auto;
    padding: 2.5em 0 0 0;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl.left_box {
    width: auto;
    float: none;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl.right_box {
    width: auto;
    float: none;
    padding: 3em 0 0 0;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl dt {
    width: auto;
    border-bottom: 1px #000 solid;
    text-align: center;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl dt span {
    width: auto;
    font-size: 21px;
    line-height: 2em;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl dd {
    width: auto;
    margin: 0 auto;
    padding: 1.5em 0 0 0;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl dd em.text {
    width: 60%;
    float: right;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.8em;
  }

  div.moisturizing div.mois_inner div.under_block div.component_block dl dd span.pic {
    width: 36%;
    float: left;
    display: block;
  }


  div.moisturizing div.mois_inner div.under_block ul {
    width: auto;
    margin: 0 -40px 0 0;
  }

  div.moisturizing div.mois_inner div.under_block ul li {
    width: auto;
    float: left;
    margin: 0 40px 0 0;
    padding: 0 0 20px 0;
  }

  div.moisturizing div.mois_inner div.under_block ul li dl {
    width: auto;
  }

  div.moisturizing div.mois_inner div.under_block ul li dl dt {
    width: 30%;
    float: left;
  }

  div.moisturizing div.mois_inner div.under_block ul li dl dd.title {
    width: 66%;
    float: right;
    padding: 0;
    font-size: 15px;
    text-align: left;
    line-height: 1em;
    font-weight: bold;

}

  div.moisturizing div.mois_inner div.under_block ul li dl dd.title sup {
    width: px;
  }

  div.moisturizing div.mois_inner div.under_block ul li dl dd.text {
    width: 66%;
    float: right;
    padding: 5px 0 0 0;
    font-size: 14px;
    text-align: left;
    line-height: 1.2
    em;
  }

  div.moisturizing div.mois_inner div.under_block ul li dl dd.text span {
    width: auto;
    line-height: 1.2em;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block {
    width: auto;
    margin: 0 auto;
    padding: 3em 0 0 0;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner {
    width: auto;
    height: auto;
    margin: 0 auto;
    background: transparent url(../) center bottom no-repeat;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner h3 {
    width: 80%;
    margin: 0 auto;
    font-size: 17px;
    text-align: center;
    background-color: #f2f2f2;
    position: relative;
    z-index: 10;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul {
    width: auto;
    margin: -28px 0 0 0;
    padding: 3.5em 1em 1em 1em;
    border: 2px #E3C06F solid;
    position: relative;
    z-index: 1;
 }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li {
    width: 49%;
    margin: 0;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li:nth-child(odd) { float: left;}

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li:nth-child(even) { float: right;}

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li:last-child {
    margin: 0;
  }

  div.moisturizing div.mois_inner div.under_block div.nonuse_block div.nonuse_inner ul li span {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 14px 0;
    background-color: #fff;
    font-size: 14px;
    text-align: center;
  }
}



/*=====================================
  PC howto
=====================================*/

div.howto {
  width: auto;
  padding: 150px 0 0 0;
}

div.howto div.howto_inner {
  width: auto;
  padding: 0 0 80px 0;
  background-color: #F2F2F2;
  position: relative;
}

div.howto div.howto_inner h2 {
  font-family: "Montserrat", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  width: auto;
  margin: 0 auto;
  font-size: 60px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  position: absolute;
  top: -55px;
  left: 0;
  right: 0;
}

div.howto div.howto_inner h2 strong {
  font-size: 24px;
  display: block;
}

div.howto div.howto_inner h3 {
  width: auto;
  padding: 100px 0 0 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

div.howto div.howto_inner ul {
  width: 900px;
  margin: 0 auto;
  padding: 90px 0 0 0;
}

div.howto div.howto_inner ul li {
  width: 900px;
  padding: 0 0 40px 0;
  position: relative;
}

div.howto div.howto_inner ul li dl.scene1 {
  width: auto;
  background: #fff url(../../assets/images/pure/howto_img01.png) 98% center no-repeat;
  -webkit-background-size: 230px;
  background-size: 230px;
}

div.howto div.howto_inner ul li dl.scene2 {
  width: auto;
  background: #fff url(../../assets/images/pure/howto_img02.png) 98% center no-repeat;
  -webkit-background-size: 240px;
  background-size: 240px;
}

div.howto div.howto_inner ul li dl.scene3 {
  width: auto;
  background: #fff url(../../assets/images/pure/howto_img03.png) 98% center no-repeat;
  -webkit-background-size: 230px;
  background-size: 230px;
}

div.howto div.howto_inner ul li dl dt {
  width: auto;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: -20px;
  left: 0;
  right: 0;
}

div.howto div.howto_inner ul li dl dt img {
  width: auto;
}

div.howto div.howto_inner ul li dl dd.title {
  width: 600px;
  margin: 0 0 0 50px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5em;
}

div.howto div.howto_inner ul li dl dd.title span {
  width: auto;
  display: block;
  padding: 30px 0 20px 0;
  border-bottom: 1px #E4E4E4 solid;
  font-size: 16px;
  font-weight: bold;
}

div.howto div.howto_inner ul li dl dd.title span em {
  width: auto;
  color: #E78F72;
  font-size: 18px;
  font-weight: bold;
}

div.howto div.howto_inner ul li dl dd.text {
  width: 600px;
  margin: 0 0 0 50px;
  padding: 30px 0 40px 0;
  font-size: 15px;
  line-height: 1.6em;
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}








/*=====================================
  SP howto
=====================================*/
@media print, screen and (max-width: 768px) {

  div.howto {
    width: auto;
    padding: 100px 0 0 0;
  }

  div.howto div.howto_inner {
    width: auto;
    padding: 0 0 80px 0;
    background-color: #F2F2F2;
    position: relative;
  }

  div.howto div.howto_inner h2 {
      font-family: "Montserrat", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    width: auto;
    margin: 0 auto;
    font-size: 33px;
    font-weight: 300;
    line-height: 1.3em;
    text-align: center;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
  }

  div.howto div.howto_inner h2 strong {
    font-size: 18px;
    display: block;
    padding: 10px 0 0 0;
  }






  div.howto div.howto_inner h3 {
    width: auto;
    padding: 5em 0 0 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }

  div.howto div.howto_inner ul {
    width: auto;
    margin: 0 auto;
    padding: 3em 0.8em 0 0.8em;
  }

  div.howto div.howto_inner ul li {
    width: auto;
    padding: 0 0 3em 0;
    position: relative;
  }

  div.howto div.howto_inner ul li dl.scene1 {
    width: auto;
    background: #fff url(../) 0 0 no-repeat;
  }

  div.howto div.howto_inner ul li dl.scene2 {
    width: auto;
    background: #fff url(../) 0 0 no-repeat;
  }

  div.howto div.howto_inner ul li dl.scene3 {
    width: auto;
    background: #fff url(../) 0 0 no-repeat;
  }

  div.howto div.howto_inner ul li dl dt {
    width: 60%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: -20px;
    left: 0;
    right: 0;
  }

  div.howto div.howto_inner ul li dl dt img {
    width: 100%;
  }

  div.howto div.howto_inner ul li dl dd.title {
    width: auto;
    padding: 0 0.8em;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8em;
  }

  div.howto div.howto_inner ul li dl dd.title span {
    width: auto;
    display: block;
    padding: 0.5em 0 1em 0;
    border-bottom: 1px #E4E4E4 solid;
    font-size: 16px;
    font-weight: bold;
  }

  div.howto div.howto_inner ul li dl dd.pic {
    width: 60%;
    margin: 0 auto;
    padding: 1.5em 0 0 0;
  }

  div.howto div.howto_inner ul li dl dd.title span em {
    width: auto;
    color: #E78F72;
    font-size: 18px;
    font-weight: bold;
  }

  div.howto div.howto_inner ul li dl dd.text {
    width: auto;
    margin: 0;
    padding: 2em 0.8em 2em 0.8em;
    font-size: 15px;
    line-height: 1.8em;
    font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
}


/*****btn_style*****/

#special div.btn {
  width: 150px;
  margin: 0 auto;
  padding: 50px 0 0 0;
}

#special div.btn a {
  width: 150px;
  margin: 0 auto;
  padding: 10px 25px;
  color: #ffffff;
  font-family: Arial, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.1666666666667rem;
  line-height: 1;
  text-align: center;
  background: #000000;
  display: block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}