@charset "UTF-8";

/* 設定
******************************************************************************************** */
/* txt-maker */
/* btn */
/* $width-pc: 1281px; */
/* $width-smartphone: 600px; */
/* $width-scrollbar: 20px; */
/* 共通 CONFIG
******************************************************************************************** */
.page-ttl {
  text-align: center;
  margin-bottom: 140px;
}

/* トピックス　一覧 CONFIG
******************************************************************************************** */
.archive-topics {
  max-width: 600px;
  margin: 0 auto;
  /*  Smartphone */
}

@media only screen and (max-width: 640px) {
  .archive-topics {
    width: 100%;
  }
}

.archive-topics .set {
  margin-bottom: 90px;
}

.archive-topics .set__name {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: normal;
  /*line-height: 2;*/
  line-height: 1.8;
}

.archive-topics .top-topics {
  text-align: center;
}

.archive-topics .top-topics-caption {
  font-size: 38px;
  font-weight: normal;
  position: relative;
  display: inline-block;
}

@media only screen and (max-width: 640px) {
  .archive-topics .top-topics-caption {
    font-size: 5.06667vw;
    width: auto !important;
  }
}

.archive-topics .top-topics-caption:after {
  position: absolute;
  bottom: -12px;
  left: 0;
  content: "";
  width: 100%;
  height: 8px;
  background-image: url(../img/topics/ttl_line_topics.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* Q&A　一覧 CONFIG
******************************************************************************************** */
.archive-faq {
  max-width: 1050px;
  margin: 0 auto;
  /*  Smartphone */
}

@media only screen and (max-width: 640px) {
  .archive-faq {
    width: 100%;
  }
}

.archive-faq .page-ttl {
  margin-bottom: 60px;
}

.archive-faq .top-qa {
  text-align: center;
}

.archive-faq .top-qa-caption {
  font-size: 38px;
  font-weight: normal;
  position: relative;
  display: inline-block;
}

@media only screen and (max-width: 640px) {
  .archive-faq .top-qa-caption {
    font-size: 5.06667vw;
    width: auto !important;
  }
}

.archive-faq .top-qa-caption:after {
  position: absolute;
  bottom: -10px;
  left: 0;
  content: "";
  width: 100%;
  height: 8px;
  background-image: url(../img/faq/ttl_line_faq.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.archive-faq .set {
  margin-bottom: 80px;
}

.archive-faq .set__ttl {
  font-size: 20px;
  font-size: 2rem;
  background: #fff;
  padding: 24px;
  border-bottom: 1px solid #53575a;
  margin: 0;
}

.archive-faq .set__dl {
  margin: 0;
  border-bottom: 1px solid #53575a;
  /*padding: 30px 20px 30px 50px;*/
}

.archive-faq .set__dl dt {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  width: 100%;
  position: relative;
  cursor: pointer;
  padding: 27px 20px 27px 50px;
}

.archive-faq .set__dl dt:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.archive-faq .set__dl dt.selected::before {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

.archive-faq .set__dl dt.selected::after {
  background-color: transparent;
}

.archive-faq .set__dl dt::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 1px;
  background-color: #53575a;
  transition: .2s;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.archive-faq .set__dl dt::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 1px;
  background-color: #53575a;
  transition: .3s;
}

.archive-faq .set__dl dd {
  /*padding-top: 20px;
        margin: 0;*/
  padding: 0 20px 30px 50px;
  margin: 0 0 0 0;
}

.archive-faq .set__dl dd .small {
  font-size: 12px;
  font-size: 1.2rem;
}

.archive-faq .bottom-comment {
  padding-left: 50px;
  margin-top: 90px;
  margin-bottom: 145px;
  font-size: 15px;
  font-size: 1.5rem;
}

.archive-faq .bottom-comment a {
  color: #00a7d2;
}

.Breadcrumb {
  max-width: 1050px;
  margin: 0 auto;
}

.Breadcrumb ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 20px -8px;
  font-size: 12px;
  font-size: 1.2rem;
}

.Breadcrumb ol li {
  list-style: none;
  padding: 0;
  margin: 0 8px;
}

@media only screen and (max-width: 640px) {
  .Breadcrumb {
    width: 84%;
  }

  .Breadcrumb ol {
    font-size: 11px;
    font-size: 1.1rem;
  }
}




.second_topics {
  margin-top: 9rem;
  margin-bottom: -5rem;
  text-align: center;
}

.third_topics {
  margin-top: 5rem;
  margin-bottom: -10rem;
  text-align: center;
}



.articles_wrapper {
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 0 auto 10rem auto;
}

.articles_wrapper .set2 {
  width: 23%;
  margin: 1rem 0;
}

.articles_wrapper .archive_thumbnail {
  /* height: 14vw; */
}

.articles_wrapper .set__ttl {
  font-size: 1.7rem;

}

.articles_wrapper .set__img {
  padding: 1rem;
  border: 1px solid #86878D;
}


@media only screen and (max-width: 640px) {
  .articles_wrapper {
    max-width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 7rem auto 10rem auto;
  }

  .articles_wrapper .set2 {
    width: 100%;
    margin: 1rem 0;
  }

  .articles_wrapper .archive_thumbnail {
    /* height: 63vw; */
  }

  .articles_wrapper .set__ttl {
    font-size: 1.7rem;

  }

  .articles_wrapper .set__img {
    padding: 1rem;
    border: 1px solid #86878D;
  }

}


/* スライダー */

.slider .slide_item {
  height: 50vw;
  display: none;
}

/* ロード時の一瞬縦並び、テキストの非表示を防止 */
.slider .slick-initialized .slide_item {
  display: block;
}

.slider .is--active .slide_item h2 {
  display: block;
}

.slider .is--active .slide_item .set__desc {
  display: block;
}

@media only screen and (max-width: 640px) {
  .slider .slide_item {
    height: 45rem;
  }
}



/*--------画像サイズ調整---------*/
.slider img {
  /* height: 35vw;
  max-height: 600px;
  min-height: 350px; */
  margin: auto;
  width: 80%;
  max-width: 1500px;
  padding: 1rem;
  border: 1px solid #86878D;
}

/*--------NEW!!---------*/

.slider .set {
  position: relative;
}

.slider .set:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6.4vw;
  width: 0;
  height: 0;
  border-top: 125px solid #FA5657;
  border-right: 125px solid transparent;
  z-index: 10;
  opacity: 0.7;
}

.slider .set:after {
  content: "NEW!";
  position: absolute;
  top: 24px;
  left: 7.5vw;
  font-size: 22px;
  color: #FFF;
  transform: rotate(-45deg) translate(-5px, 5px);
  z-index: 20;
}



@media only screen and (max-width: 640px) {
  .slider .set:before {
    content: "";
    position: absolute;
    top: 0;
    left: 2.7vw;
    width: 0;
    height: 0;
    border-top: 70px solid #FA5657;
    border-right: 70px solid transparent;
    z-index: 10;
    opacity: 0.7;
  }

  .slider .set:after {
    content: "NEW!";
    position: absolute;
    top: 11px;
    left: 15px;
    font-size: 15px;
    color: #FFF;
    transform: rotate(-45deg) translate(-5px, 5px);
    z-index: 20;
  }




}



/*---------------------*/
.slider h2 {
  text-align: center;
  width: 65%;
  padding: 1rem;
  position: absolute;
  top: 14vw;
  left: 17%;
  color: white;
  text-shadow: 0 0 30px #000, 0 0 30px #000;


  display: none;
}

.slider .set__desc {
  display: none;
}


.slider .is--active h2 {
  display: initial;
  animation: fadeIn 2s linear;
  animation-fill-mode: both;

}

.slider .is--active .set__desc {
  display: initial;
  animation: fadeIn 2s linear;
  animation-fill-mode: both;

}


@media only screen and (max-width: 640px) {
  .slider .is--active h2 {
    display: initial;
    animation: fadeIn 1s linear;
    animation-fill-mode: both;

  }

  .slider .is--active .set__desc {
    display: initial;
    animation: fadeIn 1s linear;
    animation-fill-mode: both;

  }
}



@media only screen and (max-width: 640px) {

  .slider img {
    height: 73vw;
    max-height: initial;
    min-height: initial;
    margin: initial;
    width: 100%;
    max-width: initial;
    padding: 1rem;
    border: 1px solid #86878D;
  }

  .slider .set {
    position: relative;
    padding: 0 2.5% !important;
  }

  .slider h2 {
    text-align: center;
    width: 80%;
    padding: 1rem;
    position: absolute;
    top: 20vw;
    left: 10%;
    font-size: 5.5vw;
    color: white;
    text-shadow: 0 0 30px #000, 0 0 30px #000;


  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slider .slick-slide {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  transform: scale(.85);
}

@media only screen and (max-width: 640px) {
  .slider .slick-slide {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    transform: scale(.85);
  }
}


.slider .is--active {
  transform: scale(1);
}

/*-----------height調整----------*/
.slider .slick-slide {
  height: auto !important;
}

/*-----------矢印と下部のドット表示----------*/

.slick-dots {
  bottom: 4rem !important;
}

.slick-next:before {
  content: '〉' !important;
}

.slick-prev:before {
  content: '〈' !important;
}


.slider .slick-next {
  top: 260px !important;
  right: 205px !important;
}

.slider .slick-prev {
  top: 260px !important;
  left: 205px !important;
}

.slider .slick-arrow {
  width: initial !important;
  height: initial !important;
  z-index: 2 !important;
}

.slider .slick-arrow:before {
  font-size: 4vw !important;
  color: #000 !important;
  opacity: 0.3 !important;
}

@media only screen and (max-width: 640px) {
  .slick-dots {
    bottom: -4rem !important;
  }

  .slider .slick-next {
    top: 43vw !important;
    right: 2% !important;
  }

  .slider .slick-prev {
    top: 43vw !important;
    left: 2% !important;
  }

  .slider .slick-arrow {
    width: initial !important;
    height: initial !important;
    z-index: 2 !important;
  }

  .slider .slick-arrow:before {
    font-size: 10vw !important;
    color: #000 !important;
    opacity: 0.3 !important;
  }
}

/*-----------ボタン幅----------*/

@media only screen and (max-width: 640px) {
  .sp-btn {
    width: 270px !important;
  }
}

/*-----------スキンケアシート画像----------*/

@media only screen and (max-width: 640px) {
  .sp-img {
    width: 30% !important;
  }
}

/*------------------------------*/
/* .btn--black,
a.btn--black {
  color: #fff;
  background-color: #000;
}

.btn--black:hover,
a.btn--black:hover {
  color: #000;
  background: #fff;
} */


.btnline {
  padding: 80px 0 0 0;
  font-size: 16px;
  text-align: center;
}

.btnline .isbtn {
  display: block;
  max-width: 326px;
  width: 100%;
  margin: 0 auto;
  padding: 1em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #000 no-repeat right 4em center;
  background-image: url(../img/icon_arrWrt.svg);
  background-size: 7.6px auto;
  transition: background 0.15s;
}

@media only screen and (max-width: 640px) {

  .btnline {
    font-size: 2.7733333333vw;
    padding: 7vw 5% 0;
  }

  .btnline .isbtn {
    font-size: 4vw;
  }
}

.set__dl--link {
  display: inline-block;
  color: #04B3E3;
  text-decoration: underline;
  padding-top: 20px;
}
.set__dl--link:hover {
  text-decoration: none;
}
.set__dl--link::before {
  content: "＞";
}