@charset "UTF-8";
/*--------------------------------------------------------------
/pub/template/
--------------------------------------------------------------*/
/* *****************************************
/*+  common  +******************************
/***************************************** */
body {
  margin: 0;
  padding: 0;
}
@media (min-width: 513px) {
  body {
    background-color: #FFF;
  }
}

#template {
  max-width: 512px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif;
  background-color: #FFF;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .16em;
  line-height: 1.65;
  font-size: 3.2vw;
  color: #383838;
  font-weight: 400;
}
@media (min-width: 513px) {
  #template {
    box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 513px) {
  #template {
    font-size: 16.384px;
  }
}
#template a {
  color: #666666;
  text-decoration: underline;
}
#template a:link, #template a:visited {
  color: #666666;
  text-decoration: underline;
}
#template a:hover, #template a:active {
  color: #666666;
  text-decoration: none;
}
@media (min-width: 513px) {
  #template a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
  #template a {
    transition: .3s all;
  }
  #template a:hover {
    opacity: .7;
  }
}
#template * {
  margin: 0;
  padding: 0;
}
#template div, #template h1, #template h2, #template h3, #template h4, #template h5, #template h6, #template form, #template fieldset, #template p, #template th, #template td, #template dl, #template dt, #template dd {
  line-height: 1.65;
}
#template img, #template input[type="image"] {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}
#template video {
  width: 100%;
  height: auto;
  display: block;
}
#template ol, #template ul {
  list-style: none;
}
#template sup {
  font-size: 60%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
  letter-spacing: .05em;
}
#template .clearfix:after {
  content: "";
  display: block;
  clear: both;
}
#template *, #template *:before, #template *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#template .bold {
  font-weight: 700;
}
#template .notes {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.65;
  font-size: min(calc(100vw*18/640), 18px);
  text-align: left;
  letter-spacing: 0.05em;
  color: #404040;
}
#template #footer {
  padding: 1em 0;
}

/* *****************************************
/*+  content  +********************************
/***************************************** */
/*+ block + ------------------------------ */
#content > section {
  position: relative;
}
/*+ mv + ------------------------------ */
#content .mv {
  position: relative;
}
/*+ menu + ------------------------------ */
#content .menu {
  position: relative;
  padding-bottom: calc(80/640*100%);
  background-color: #f5f8fb;
}
#content .menu__inner {
  width: calc(574/640*100%);
  margin: 0 auto;
}
#content .menu.menu01 {
  background-image: url("../img/sp/menu01_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#content .menu h2 {
  width: calc(379/574*100%);
  margin: 0 auto calc(50/640*100%);
}
#content .menu h3 {
  width: calc(530/574*100%);
  margin: 0 auto calc(24/574*100%) auto;
}
#content .menu ul + h3 {
  margin-top: calc(60/574*100%);
}
#content .menu li {
  filter: drop-shadow( 0 clamp(4px, 1.25vw, 8px) clamp(4px, 1.25vw, 8px) rgba(116, 125, 139, 0.2));
  background-color: #fff;
  border-radius: clamp(0px, calc(10/640*100vw), 10px);
}
#content .menu li + li {
  margin-top: calc(24/574*100%);
}
#content .menu .notes {
  margin-top: calc(60/574*100%);
}
#content .menu .notes {
  width: calc(571/574*100%);
}
/*+ cv +
------------------------------ */
#content .cv {
  position: relative;
}
#content .cv_btn input {
  position: relative;
  cursor: pointer;
  display: block;
  width: calc( 574 / 640 * 100%);
  height: 0;
  margin: calc( 37 / 640 * 100%) auto 0;
  padding-top: calc( 172 / 640 * 100%);
  border: none;
  text-indent: -9999px;
  background: url(../img/sp/cv_btn.png) no-repeat 0 0/100% auto;
  transition: all .3s;
}
#content .cv_btn_member input {
  position: relative;
  cursor: pointer;
  display: block;
  width: calc( 440 / 640 * 100%);
  height: 0;
  margin: calc( -9 / 640 * 100%) auto calc( 30 / 640 * 100%);
  padding-top: calc( 80 / 640 * 100%);
  border: 0;
  text-indent: -9999px;
  background: url("../img/sp/cv_btn_member.png") no-repeat 0 0/100% auto;
  transition: all .3s;
}
@media (min-width: 513px) {
  #content .cv_btn input:hover {
    opacity: .9;
    transform: translateY(5px);
  }
  #content .cv_btn_member input:hover {
    opacity: .7;
    transform: translateY(5px);
  }
}
#content .cv_btn_acc {
  position: relative;
  cursor: pointer;
  display: block;
  width: calc(520/640*100%);
  margin: 0 auto;
}
#content .cv .details__inner {
  margin-top: calc(60/640*100%);
  padding-bottom: calc(40/640*100%);
  display: none;
}
#content .cv .details__point{
  width: calc(596/640*100%);
  margin: 0 auto;
}
#content .cv .details__point + .details__point {
  margin-top: calc(18/640*100%);
}
#content .cv .details__inner .cv_btn {
  width: calc(636/640*100%);
  margin: calc(34/640*100%) auto 0;
}
#content .cv .voice {
  padding-top: calc(80/640*100%);
  background-image: url("../img/sp/voice_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
#content .cv .voice h3 {
  width: calc(349/640*100%);
  margin: 0 auto;
  padding-bottom: calc(25/640*100%);
}
#content .cv .voice__notes {
  width: calc(420/640*100%);
  margin: 0 0 0 auto;
  padding: calc(42/640*100%) calc(33/640*100%) calc(75/640*100%) 0;
}
#content .cv .slick-slide {
    padding: 0 1.95314em;
}
/*+ slider基本 + ----- */
#content .slick-dots {
  position: absolute;
  bottom: -1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
#content .slick-dots li {
  position: relative;
  text-indent: -999em;
  margin: 0 .5em;
}
#content .slick-dots li::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 4px #aaaaaa;
  border-radius: 50%;
}
#content .slick-dots li.slick-active::after {
  border: solid 4px #32469b;
}
#content .slick-arrow {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: calc( 42 / 640 * 100%);
  height: 0;
  padding: calc( 42 / 640 * 100%) 0 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 99;
}
#content .slick-prev {
  left: 4%;
  background: url("../img/sp/voice_prev.png") no-repeat center center/100% auto;
}
#content .slick-next {
  right: 4%;
  background: url("../img/sp/voice_next.png") no-repeat center center/100% auto;
}
/*+ toiro_vl + ----- */
#toiro_vl .details__inner {
  padding-top: calc(75/640*100%);
  background-image: url("../img/sp/cv_toiro_vl_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#toiro_vl .details__inner h3 {
  width: calc(434/640*100%);
  margin: 0 auto calc(43/640*100%);
}
#toiro_vl .notes {
  width: calc(560/640*100%);
  margin: 0 auto;
  padding-top: calc(40/640*100%);
}
/*+ toiro_bl + ----- */
#toiro_bl .details__inner {
  background-image: url("../img/sp/cv_toiro_bl_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center clamp(0px, 13vw, 83px);
}
#toiro_bl .details__inner .ttl__head {
  width: calc(494/640*100%);
  margin: 0 auto calc(20/640*100%);
}
#toiro_bl .details__inner h3 {
  width: calc(534/640*100%);
  margin: 0 auto calc(20/640*100%) calc(73/640*100%);
}
#toiro_bl .notes {
  width: calc(567/640*100%);
  margin: 0 auto;
  padding-top: calc(24/640*100%);
}
/*+ enrichplus + ----- */
#enrichplus .details__inner {
  padding-top: calc(80/640*100%);
  background-image: url("../img/sp/cv_enrichplus_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#enrichplus .details__inner h3 {
  width: calc(519/640*100%);
  margin: 0 auto calc(33/640*100%);
}
#enrichplus .details__inner .details__txt {
  width: calc(607/640*100%);
  margin: 0 0 0 auto;
  padding: calc(65/640*100%) 0 calc(20/640*100%);
}
/*+ acnecare + ----- */
#acnecare .details__inner {
  padding-top: calc(80/640*100%);
  background-image: url("../img/sp/cv_acnecare_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#acnecare .details__inner h3 {
  width: calc(472/640*100%);
  margin: 0 auto calc(43/640*100%);
}
#acnecare .details__inner .details__txt {
  width: calc(574/640*100%);
  margin: 0 auto;
  padding: calc(65/640*100%) 0 calc(20/640*100%);
}
/*+ moistrefine + ----- */
#moistrefine .details__inner {
  padding-top: calc(95/640*100%);
  background-image: url("../img/sp/cv_moistrefine_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#moistrefine .details__inner h3 {
  width: calc(523/640*100%);
  margin: 0 auto calc(50/640*100%);
}
/*+ brightening + ----- */
#content #brightening .cv__btn__area .cv_btn {
  margin: calc( 7 / 640 * 100%) auto 0;
}
#brightening .details__inner {
  background-image: url("../img/sp/cv_brightening_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center clamp(0px, 13vw, 83px);
}
#brightening .details__inner .ttl__head {
  width: calc(494/640*100%);
  margin: 0 auto calc(27/640*100%);
}
#brightening .details__inner h3 {
  width: calc(559/640*100%);
  margin: 0 auto calc(20/640*100%) calc(36/640*100%);
}
#brightening .notes {
  width: calc(571/640*100%);
  margin: 0 auto;
  padding: calc(11/640*100%) 0 calc(40/640*100%);
}
/*+ bc + ----- */
#content #bc .cv__btn__area .cv_btn {
  margin: 0 auto;
}
#bc .details__inner {
  padding-top: calc(68/640*100%);
  background-image: url("../img/sp/cv_bc_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#bc .details__inner h3 {
  width: calc(525/640*100%);
  margin: 0 auto calc(35/640*100%);
}
/*+ sensitive + ----- */
#content #sensitive .cv__btn__area .cv_btn {
  margin: calc( 7 / 640 * 100%) auto 0;
}
#sensitive .details__inner {
  padding-top: calc(82/640*100%);
  background-image: url("../img/sp/cv_sensitive_details_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#sensitive .details__inner h3 {
  width: calc(559/640*100%);
  margin: 0 auto calc(44/640*100%);
}
/*+ quality + ------------------------------ */
#content .quality .quality__slide {
  padding: calc(65/640*100%) 0 calc(155/640*100%);
  background-image: url("../img/sp/quality_slider_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#content .quality .quality__slide h3 {
  width: calc(399/640*100%);
  margin: 0 auto;
  padding-bottom: calc(40/640*100%);
}
#content .quality__slide .slick-slide {
    padding: 0 3.32em;
}
#content .quality__slide .slick-prev {
  left: 2%;
}
#content .quality__slide .slick-next {
  right: 2%;
}
#content .quality__slide .slick-arrow {
  top: 66%;
}
#content .quality__slide .slick-dots{
  bottom: -2.5em;
}
/*+ service + ------------------------------ */
#content .service {
  padding: calc(76/640*100%) calc(30/640*100%) calc(80/640*100%);
  background-color: #f2f5f8;
}
#content .service h2 {
  width: calc(371/640*100%);
  margin: 0 auto calc(45/640*100%);
}
#content .service p + p {
  padding-top: calc(30/640*100%);
}
/*+ faq + ------------------------------ */
#content .faq {
  padding: calc(76/640*100%) calc(30/640*100%) calc(80/640*100%);
}
#content .faq h2 {
  width: calc(338/640*100%);
  margin: 0 auto calc(60/640*100%);
}
#content .faq ul {
  border-radius: clamp(0px, calc(10/640*100vw), 10px);
  overflow: hidden;
}
#content .faq ul + ul {
  margin-top: calc(40/640*100%);
}
#content .faq .faq__q {
  position: relative;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}
#content .faq .faq__q::before {
  content: "";
  width: 1px;
  height: 1em;
  background: #373737;
  position: absolute;
  right: 2em;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: .6s;
}
#content .faq .faq__q::after {
  content: "";
  width: 1em;
  height: 1px;
  background: #373737;
  position: absolute;
  right: 1.5em;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: .6s;
}
#content .faq .faq__q.active::before {
  transform: rotate(90deg);
  opacity: 0;
}
#content .faq .faq__a {
  display: none;
}
/*+ menu02 + ------------------------------ */
#content .menu.menu02 {
  background-color: #f5f8fb;
  padding-top: calc(80/640*100%);
}
/*+ guide + ------------------------------ */
#template .guide {
  margin: 0;
  padding: 2em 0 0;
  letter-spacing: normal;
}
#template .guide .guidance {
  width: 42%;
  margin: 2em auto 5.33333%;
}
#template .guide #tokushou, #template .guide .company-outline, #template .guide .policy {
  margin-bottom: 1em;
}
#template .guide .note {
  text-align: left;
  margin: 0 4%;
}
#template .guide .note h3 {
  margin-top: 1em;
}
#template .guide .note p {
  margin-bottom: 1em;
}
#template .guide .returnTop {
  text-align: right;
  margin: 1.5em 3.125%;
}