@charset 'UTF-8';
/* ===================================================================
CSS information
 file name  :  style.css
 style info : メンズアートメイクLP スタイル
=================================================================== */

/* -----------------------------
  common
----------------------------- */
html {
  background-color: #f2f2f2;
}

.l_wrap {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  box-shadow: 0 0 10px 2px #d6d6d6;
  background: #fff;
  color: #211f1f;
  padding: 0;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴPro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, Verdana, sans-serif;
  /* padding: calc(120/750*100vw) 0 0; */
}

img {
  width: 100%;
}

a {transition: all 0.2s;}

a:hover {opacity: 0.8;}


@media screen and (min-width: 768px) {
  /* .l_wrap {
    padding: 120px 0 0;
  } */

  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* -----------------------------
  animation
----------------------------- */

.btn a {
  -webkit-animation: move_btn 1.9s ease infinite normal;
  animation: move_btn 1.9s ease infinite normal;
}

@keyframes move_btn {
  0% {
    left: 50%;
  }

  50% {
    left: 50%;
  }

  85% {
    left: 50%;
  }

  90% {
    left: 52%;
  }

  95% {
    left: 50%;
  }

  100% {
    left: 50%;
  }
}

@-webkit-keyframes move_btn {
  0% {
    left: 50%;
  }

  50% {
    left: 50%;
  }

  85% {
    left: 50%;
  }

  90% {
    left: 52%;
  }

  95% {
    left: 50%;
  }

  100% {
    left: 50%;
  }
}

.shine::before {
  content: "";
  width: 200%;
  height: 200%;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  animation: shine 1.8s linear infinite;
}

@keyframes shine {
  from, 0% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
    transform: translate3d( 100%, 0, 0) rotate(45deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
    transform: translate3d( 100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
  to, 100% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
}

/* -----------------------------
  scrolldown
----------------------------- */
.sec_ttl {
  position: relative;
}
/*スクロールダウン全体の場所*/
.scrolldown {
  position: relative;
  height: calc(138/750*100vw);
  margin: 0 0 calc(46/750*100vw);
}

.scrolldown span {
  position: absolute;
  bottom: calc(-46/750*100vw);
}

/* 線の描写 */
.scrolldown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
  height: calc(138/750*100vw);
  background: #000;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
  margin: 0 auto;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:calc(110/750*100vw);
    opacity: 1;
  }
  100%{
    height:0;
    top: calc(120/750*100vw);
    opacity: 0;
  }
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .scrolldown {
    height: 138px;
    margin: 0 0 46px;
  }

  .scrolldown span {
    bottom: -46px;
  }

  .scrolldown::after {
    height: 138px;
  }

  @keyframes pathmove{
    0%{
      height:0;
      top:0;
      opacity: 0;
    }
    30%{
      height:110px;
      opacity: 1;
    }
    100%{
      height:0;
      top: 120px;
      opacity: 0;
    }
  }
}

/* -----------------------------
  scrollView
----------------------------- */
.scrollView {
  transition: all 1.2s 0s ease;
  opacity: 0;
  transform: scale(1, 1) translate(0%, 20px);
  transition-delay: .25s;
}

.scrollView.view {
  opacity: 1;
  transform: scale(1, 1) translate(0%, 0%);
}

/* -----------------------------
  header
----------------------------- */
header {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.9);
  padding: calc(15/750*100vw) 0;
  /* position: fixed;
  top: 0;
  z-index: 1000; */
}

header .inner {
  padding: 0 calc(17/750*100vw);
  display: flex;
  justify-content: space-between;
}

header h1 {
  width: calc(168/750*100vw);
  max-width: 168px;
  padding: calc(3/750*100vw) 0 0 calc(2/750*100vw);
}

header .h_btnBox {
  display: flex;
}

header .h_btn a {
  display: block;
}

header .clinicInfo_btn a {
  width: calc(170/750*100vw);
  max-width: 170px;
}

header .counseling_btn a {
  width: calc(280/750*100vw);
  max-width: 280px;
  margin: 0 0 0 calc(20/750*100vw);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  header {
    padding: 15px 0;
  }

  header .inner {
    padding: 0 17px;
  }

  header h1 {
    padding: 3px 0 0 2px;
  }
  header .h_btn a {
    font-size: 20px;
  }

  header .counseling_btn a {
    margin: 0 0 0 20px;
  }

  header .h_btn a::after {
    margin-left: 10px;
  }
}
/* -----------------------------
  .btn-fixed
----------------------------- */
.btn-fixed {
  width: 100%;
  display: none;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.9);
  padding: calc(15/750*100vw) 0;
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.btn-fixed .inner {
  width: 100%;
  padding: 0 calc(20/750*100vw);
  display: flex;
  justify-content: center;
}

.btn-fixed .h_btn a {
  display: block;
  font-size: calc(28/750*100vw);
  letter-spacing: 0.08em;
  padding: calc(50/750*100vw) calc(46/750*100vw);
  height: calc(150/750*100vw);
  max-height: 150px;
  position: relative;
}

.btn-fixed .clinicInfo_btn a {
  border: calc(2/750*100vw) solid #000;
}

.btn-fixed .counseling_btn a {
  background: #CE264A;
  color: #fff;
  margin: 0 0 0 calc(20/750*100vw);
  text-align: center;
  border: calc(2/750*100vw) solid #CE264A;
}

.btn-fixed .h_btn a::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(10/750*100vw);
  height: calc(10/750*100vw);
  max-width: 10px;
  max-height: 10px;
  transform: rotate(45deg);
  margin: auto;
  top: 0;
  bottom: 0;
  right: calc(10/750*100vw);
}

.btn-fixed .clinicInfo_btn a::after {
  border-top: calc(2/750*100vw) solid #000;
  border-right: calc(2/750*100vw) solid #000;
}

.btn-fixed .counseling_btn a::after {
  border-top: calc(2/750*100vw) solid #fff;
  border-right: calc(2/750*100vw) solid #fff;
}

/* -------  PC閲覧時 ------- */
@media screen and (min-width: 768px) {
  .btn-fixed {
    padding: 15px 0;
  }

  .btn-fixed .inner {
    padding: 0 20px;
  }

  .btn-fixed .h_btn a {
    font-size: 22px;
    padding: 25px 86px;
    max-height: 90px;
  }

  .btn-fixed .clinicInfo_btn a {
    border: 2px solid #000;
  }

  .btn-fixed .counseling_btn a {
    border: 2px solid #CE264A;
    margin: 0 0 0 20px;
  }

  .btn-fixed .h_btn a::after {
    right: 10px;
  }

  .btn-fixed .clinicInfo_btn a::after {
    border-top: 2px solid #000;
    border-right: 2px solid #000;
  }

  .btn-fixed .counseling_btn a::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}
/* -----------------------------
  cv
----------------------------- */
.cv {
  background: url('../img/cv_bg_02.png') no-repeat left top / 100% auto;
}

.cv .cv_block {
  padding: calc(117/750*100vw) 0 calc(75/750*100vw);
  background: url('../img/cv_bg_01.png') no-repeat center top / 100% auto;
}

.cv .btn a {
  position: relative;
  display: block;
  width: calc(550/750*100vw);
  max-width: 550px;
  transform: translateX(-50%);
}

.cv .shine {
  width: calc(550/750*100vw);
  max-width: 550px;
  height: calc(130/750*100vw);
  max-height: 130px;
  display: block;
  position: absolute;
  top: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.cv .arrow {
  position: absolute;
  top: calc(55/750*100vw);
  right: calc(-27/750*100vw);
  width: calc(80/750*100vw);
  max-width: 80px;
  border-radius: 50%;
  z-index: 3;
  margin: auto;
  pointer-events: none;
}

.cv_01 {
  margin: calc(-728/750*100vw) 0 0;
  padding: calc(728/750*100vw) 0 calc(122/750*100vw);
}

.cv_01 .btn,.cv_03 .btn {
  position: relative;
  margin: calc(-103/750*100vw) 0 0;
  z-index: 1;
}

.cv_02 {
  background: url('../img/cv_bg_02.png') no-repeat left top calc(225/750*100vw) / 100% auto;
  padding: 0 0 calc(118/750*100vw);
}

.cv_03 {
  background: #ededed url('../img/cv_bg_02.png') no-repeat left top / 100% auto;
  padding: calc(212/750*100vw) 0 calc(122/750*100vw);
  margin: calc(-179/750*100vw) 0 0;
}

.cv_04 {
  position: relative;
}

.cv_04 .btn_box {
  position: absolute;
  bottom: calc(-205/750*100vw);
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .cv .cv_block {
    padding: 117px 0 75px;
  }

  .cv .arrow {
    top: 55px;
    right: -27px;
  }

  .cv_01 {
    margin: -728px 0 0;
    padding: 728px 0 122px;
  }

  .cv_01 .btn,.cv_03 .btn {
    margin: -103px 0 0;
  }

  .cv_02 {
    background: url('../img/cv_bg_02.png') no-repeat left top 225px / 100% auto;
    padding: 0 0 118px;
  }

  .cv_03 {
    padding: 212px 0 122px;
    margin: -179px 0 0;
  }

  .cv_04 .btn_box {
    bottom: -205px;
  }
}

/* -----------------------------
  sns
----------------------------- */
.sns h2 {
  margin: 0 0 calc(-48/750*100vw);
  position: relative;
  z-index: 2;
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .sns h2 {
    margin: 0 0 -48px;
  }
}

/* -----------------------------
  youtube
----------------------------- */
.youtube h2 {
  position: relative;
  z-index: 3;
  margin: 0 0 calc(-38/750*100vw);
  pointer-events: none;
}

.youtube .youtube_area {
  position: relative;
  width: 100%;
  height: calc(390/750*100vw);
  max-width: 750px;
  max-height: 390px;
}

.youtube .popup-youtube {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.youtube .player video {
  width: 100%;
  height: 100%;
}

.mfp-container {
  max-width: 750px;
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .youtube h2 {
    margin: 0 0 -38px;
  }
  .mfp-container {
    left: calc(50% - 375px);
  }
}

/* -----------------------------
  situation
----------------------------- */
.situation_list {
  background-image: linear-gradient(to right, #fff 8.6666666%, #ededed 8.6666666%, #ededed 91.3333334%, #fff 91.3333334%);
}

.situation_list .situation {
  padding: 0 0 calc(71/750*100vw);
}

.situation_list li:last-child {
  padding: 0 0 calc(152/750*100vw);
}

.situation_list .num {
  display: block;
  margin: 0 0 calc(-15/750*100vw);
  position: relative;
  z-index: 2;
}

.situation_list .txt {
  padding: 0 calc(40/750*100vw);
  font-size: calc(24/750*100vw);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .situation_list .situation {
    padding: 0 0 71px;
  }

  .situation_list li:last-child {
    padding: 0 0 152px;
  }

  .situation_list .num {
    margin: 0 0 -15px;
  }

  .situation_list .txt {
    padding: 0 40px;
    font-size: 24px;
  }
}

/* -----------------------------
  jisseki
----------------------------- */
.jisseki {
  margin: calc(-80/750*100vw) 0 0;
}

.jisseki .notes {
  font-size: calc(16/750*100vw);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  text-align: center;
  margin: calc(6/750*100vw) 0 calc(42/750*100vw);
}

.jisseki .slick-slide {
  margin: 0 calc(0.5/750*100vw);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .jisseki {
    margin: -80px 0 0;
  }

  .jisseki .notes {
    font-size: 16px;
    margin: 6px 0 42px;
  }

  .jisseki .slick-slide {
    margin: 0 0.5px;
  }
}

/* -----------------------------
  about
----------------------------- */
.about {
  background: url('../img/about_bg.png') no-repeat center top / 100% auto;
  padding: 0 0 calc(180/750*100vw);
}
.about h2 {
  margin: 0 0 calc(-48/750*100vw);
  position: relative;
  z-index: 2;
}
.about .cont_block {
  position: relative;
}
.about .txt_area {
  position: absolute;
  top: calc(118/750*100vw);
  padding: 0 calc(85/750*100vw);
}
.about .txt {
  font-size: calc(24/750*100vw);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
}
.about .txt_01 {
  padding: 0 calc(335/750*100vw) 0 0;
}
.about small {
  display: block;
  font-size: calc(16/750*100vw);
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin: calc(5/750*100vw) 0 0;
}
.about b {
  font-weight: 400;
  color: #ce264a;
  background: linear-gradient(transparent 70%, #fff700 70%);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .about {
    padding: 0 0 180px;
  }
  .about h2 {
    margin: 0 0 -48px;
  }
  .about .txt_area {
    top: 118px;
    padding: 0 85px;
  }
  .about .txt {
    font-size: 24px;
  }
  .about .txt_01 {
    padding: 0 335px 0 0;
  }
  .about small {
    font-size: 16px;
    margin: 5px 0 0;
  }
}

/* -----------------------------
  features
----------------------------- */
.features_list {
  margin: 0 0 calc(-107/750*100vw);
  background-color: #ededed;
}
.features_list > li {
  background-image: linear-gradient(to right, transparent 11.3333333%, #fff 11.3333333%, #fff 88.6666667%, transparent 88.6666667%);
  margin: 0 0 calc(127/750*100vw);
  position: relative;
}
.features_list h3 {
  position: relative;
  top: calc(-44/750*100vw);
  margin: 0 0 calc(-17);
}
.features_list > li > .txt {
  padding: 0 calc(38/750*100vw);
  font-size: calc(24/750*100vw);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  margin: 0 0 calc(32/750*100vw);
}
.features_list > li > .txt_02 {
  padding: 0 calc(38/750*100vw) 0 calc(148/750*100vw);
  position: absolute;
  top: calc(1176/750*100vw);
  letter-spacing: 0.1em;
}
.features_list b {
  font-weight: 400;
  color: #ce264a;
  background:linear-gradient(transparent 70%, #fff700 70%);
}
.features_list small {
  display: block;
  font-size: calc(16/750*100vw);
  line-height: 2.875em;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  margin: 0 0 calc(-10/750*100vw);
}
.image_list {
  display: flex;
  justify-content: center;
}
.image_list li {
  width: calc(328/750*100vw);
  max-width: 328px;
  margin: 0 calc(6.5/750*100vw);
}
.image_list li h4 {
  color: #fff;
  text-align: center;
  font-size: calc(23.73/750*100vw);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  padding: calc(8/750*100vw);
}
.image_list li:nth-child(1) h4 {
  background-color: #d5cfcf;
}
.image_list li:nth-child(2) h4 {
  background-color: #d6848e;
}
.image_list li .txt {
  text-align: center;
  font-size: calc(20/750*100vw);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  padding: calc(16/750*100vw) 0 calc(26/750*100vw);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .features_list {
    margin: 0 0 -107px;
  }
  .features_list > li {
    margin: 0 0 127px;
  }
  .features_list h3 {
    top: -44px;
    margin: 0 0 calc(-44px + 27px);
  }
  .features_list > li > .txt {
    padding: 0 38px;
    font-size: 24px;
    margin: 0 0 32px;
  }
  .features_list > li > .txt_02 {
    padding: 0 38px 0 148px;
    top: 1176px;
  }
  .features_list small {
    font-size: 16px;
    margin: 0 0 -10px;
  }
  .image_list li {
    margin: 0 6.5px;
  }
  .image_list li h4 {
    font-size: 23.73px;
    padding: 8px;
  }
  .image_list li .txt {
    font-size: 20px;
    padding: 16px 0 26px;
  }
}

/* -----------------------------
  flow
----------------------------- */
.flow {
  padding: 0 0 calc(147/750*100vw);
  position: relative;
}

.flow .flow-slider {
  width: calc(726.5/750*100vw);
  max-width: 726.5px;
  margin: 0 0 0 calc(23.5/750*100vw);
}

.flow .flow-slider .slick-list {
  padding: 0 calc(192.5/750*100vw) 0 0!important;
}

.flow .flow-slider .slick-slide:not(.slick-active) > img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.3;
}

.flow .flow-slider .slider-cont {
  margin: 0 calc(16.5/750*100vw);
  position: relative;
  padding: 0 0 calc(64/750*100vw);
}

.flow .flow-slider .slider-cont .num {
  position: absolute;
  left: -14px;
  bottom: 0;
}

.flow .flow-slider .slider-cont .num_01 {
  width: calc(109/750*100vw);
  max-width: 109px;
}

.flow .flow-slider .slider-cont .num_02,
.flow .flow-slider .slider-cont .num_03,
.flow .flow-slider .slider-cont .num_05 {
  width: calc(126/750*100vw);
  max-width: 126px;
}

.flow .flow-slider .slider-cont .num_04 {
  width: calc(132/750*100vw);
  max-width: 132px;
}

.flow .slick-next {
  width: calc(45/750*100vw);
  height: calc(45/750*100vw);
  max-width: 45px;
  max-height: 45px;
  z-index: 2;
}

.flow .slick-next {
  top: calc(180.5/750*100vw);
  right: calc(17/750*100vw);
}

.flow .slick-next:before {
  content: "";
  display: inline-block;
  width: calc(45/750*100vw);
  height: calc(45/750*100vw);
  max-width: 45px;
  max-height: 45px;
  opacity: 1;
  background: url('../img/flow_next_arrow.png') no-repeat left top / calc(45/750*100vw) auto;
}

.flow .slick-prev {
  display: none;
}

.flow .flow-fade .ttl-box {
  margin: 0 0 20px;
}

.flow .flow-fade .txt {
  font-size: calc(26/750*100vw);
  font-weight: 300;
  line-height: 1.77;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  padding: 0 calc(40/750*100vw);
}

.flow .slick-dots {
  bottom: calc(-46/750*100vw);
}

.flow .slick-dots li {
  width: calc(15/750*100vw);
  max-width: 15px;
  height: calc(15/750*100vw);
  max-height: 15px;
  margin: 0 calc(10.5/750*100vw);
}

.flow .slick-dots li button {
  width: calc(15/750*100vw);
  max-width: 15px;
  height: calc(15/750*100vw);
  max-height: 15px;
}

.flow .slick-dots li button:before {
  width: calc(15/750*100vw);
  max-width: 15px;
  height: calc(15/750*100vw);
  max-height: 15px;
  content: '';
  opacity: 1;
  background: #ededed;
  border-radius: 50%;
}

.flow .slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: #211f1f;
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .flow {
    padding: 0 0 147px;
  }

  .flow .flow-slider {
    margin: 0 0 0 23.5px;
  }

  .flow .flow-slider .slick-list {
    padding: 0 192.5px 0 0!important;
  }

  .flow .flow-slider .slider-cont {
    margin: 0 16.5px;
    padding: 0 0 64px;
  }

  .flow .slick-next {
    top: 180.5px;
    right: 17px;
  }

  .flow .slick-next:before {
    background: url('../img/flow_next_arrow.png') no-repeat left top / 45px auto;
  }

  .flow .flow-fade .ttl-box {
    margin: 0 0 20px;
  }

  .flow .flow-fade .txt {
    font-size: 26px;
    padding: 0 40px;
  }

  .flow .slick-dots {
    bottom: -46px;
  }

  .flow .slick-dots li {
    margin: 0 10.5px;
  }
}

/* -----------------------------
  faq
----------------------------- */
.faq {
  background: #ededed;
  padding: 0 0 calc(163/750*100vw);
}

.faq h2 {
  margin: 0 0 calc(106/750*100vw);
}

.faq dl {
  margin: 0 0 calc(-88/750*100vw);
}

.faq .qa_list {
  background-image: linear-gradient(to right, transparent 10%, #fff 10%, #fff 90%, transparent 90%);
  position: relative;
  margin: 0 0 calc(88/750*100vw);
}

.faq .qa_list::before {
  content: "";
  position: absolute;
  top: calc(-57/750*100vw);
  left: calc(17/750*100vw);
  display: block;
  width: 89px;
  height: 86px;
  max-width: calc(89/750*100vw);
  max-height: calc(86/750*100vw);
  background: url('../img/icon_q.png') no-repeat left top / calc(89/750*100vw) calc(86/750*100vw);
}


.faq dt {
  position: relative;
  font-size: calc(30/750*100vw);
  line-height: 1.66;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  font-weight: 400;
  padding: calc(31/750*100vw) calc(112/750*100vw) calc(31/750*100vw) calc(38/750*100vw);
  cursor: pointer;
}

.faq dd {
  display: none;
  font-size: calc(26/750*100vw);
  line-height: 1.77;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  font-weight: 300;
  padding: 0 calc(36/750*100vw) calc(44/750*100vw) calc(36/750*100vw);
}

.faq .toggle_btn {
  position: absolute;
  top: 50%;
  right: 5.3333333%;
  transform: translateY(-50%);
  width: calc(50/750*100vw);
  height: calc(50/750*100vw);
  max-width: 50px;
  max-height: 50px;
  background-color: #211f1f;
}

.faq .toggle_btn::before,
.faq .toggle_btn::after {
  content: "";
  display: inline-block;
  line-height: 1;
  background: currentColor;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%);
  transition: .2s;
  color: #fff;
  width: calc(20/750*100vw);
  height: calc(2/750*100vw);
  max-width: 20px;
  max-height: 2px;
}

.faq dt .toggle_btn::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq dt.open .toggle_btn::before {
  transform: translateY(-50%) rotate(180deg);
}
.faq dt.open .toggle_btn::after {
  transform: translateY(-50%) rotate(0);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .faq {
    padding: 0 0 163px;
  }
  .faq h2 {
    margin: 0 0 106px;
  }

  .faq dl {
    margin: 0 0 -88px;
  }

  .faq .qa_list {
    margin: 0 0 88px;
  }

  .faq .qa_list::before {
    top: -57px;
    left: 17px;
    background: url('../img/icon_q.png') no-repeat left top / 89px 86px;
  }

  .faq dt {
    font-size: 30px;
    padding: 31px 112px 31px 38px;
  }

  .faq dd {
    font-size: 26px;
    padding: 0 36px 44px 36px;
  }
}

/* -----------------------------
  clinic
----------------------------- */
.clinic h2 {
  margin: 0 0 calc(68/750*100vw);
}

.clinic table {
  width: calc(610/750*100vw);
  max-width: 610px;
  margin: calc(42/750*100vw) 0 0 calc(40/750*100vw);
}

.clinic table a {
  color: #ce264a;
  text-decoration: underline;
}

.clinic th {
  font-size: calc(24/750*100vw);
  line-height: 1.58;
  letter-spacing: 0.06em;
  text-align: left;
  vertical-align: top;
  padding: 0 0 calc(10/750*100vw);
  width: calc(160/750*100vw);
  max-width: 160px;
}

.clinic td {
  font-size: calc(24/750*100vw);
  line-height: 1.58;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 0 0 calc(10/750*100vw);
  width: calc(450/750*100vw);
  max-width: 450px;
}

.clinic td li:not(:last-child) {
  padding: 0 0 calc(6/750*100vw);
}

.clinic table + p.row_01 {
  margin: calc(110/750*100vw) 0 0;
}

.clinic table + p.row_02 {
  margin: calc(121/750*100vw) 0 0;
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .clinic h2 {
    margin: 0 0 68px;
  }

  .clinic table {
    margin: 42px 0 0 40px;
  }
  .clinic th {
    font-size: 24px;
    line-height: 1.58;
    padding: 0 0 10px;
  }

  .clinic td {
    font-size: 24px;
    line-height: 1.58;
    padding: 0 0 10px;
  }

  .clinic td li:not(:last-child) {
    padding: 0 0 6px;
  }

  .clinic table + p.row_01 {
    margin: 110px 0 0;
  }

  .clinic table + p.row_02 {
    margin: 121px 0 0;
  }
}

/* -----------------------------
  info
----------------------------- */
.info {
  background-color: #fff;
  padding: calc(306/750*100vw) calc(38/750*100vw) calc(110/750*100vw) calc(38/750*100vw);
}

.info dl {
  background-color: #ededed;
  padding: calc(22/750*100vw) calc(24/750*100vw);
}

.info div:not(:last-child) {
  margin: 0 0 calc(40/750*100vw);
}

.info dt {
  font-size: calc(24/750*100vw);
  font-weight: 500;
  line-height: 1.583;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  margin: 0 0 0 calc(3/750*100vw);
}

.info dd {
  font-size: calc(24/750*100vw);
  font-weight: 300;
  line-height: 1.583;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}

.info dd li:not(:last-child) {
  margin: 0 0 calc(38/750*100vw);
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  .info {
    padding: 306px 38px 110px 38px;
  }

  .info dl {
    padding: 22px 24px;
  }

  .info div:not(:last-child) {
    margin: 0 0 40px;
  }

  .info dt {
    font-size: 24px;
    margin: 0 0 0 3px;
  }

  .info dd {
    font-size: 24px;
  }

  .info dd li:not(:last-child) {
    margin: 0 0 38px;
  }
}

/* -----------------------------
  footer
----------------------------- */
footer {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  background-color: #000;
  padding: calc(68/750*100vw) 0 calc(20/750*100vw);
}

footer p {
  text-align: center;
}

footer .logo {
  width: calc(244/750*100vw);
  max-width: 244px;
  margin: 0 auto calc(35/750*100vw);
}

footer .ft_link {
  text-align: center;
  margin: 0 0 calc(40/750*100vw);
}

footer .ft_link a {
  color: #fff;
  font-size: calc(24/750*100vw);
  font-weight: 300px;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

footer small {
  color: #fff;
  font-size: calc(20/750*100vw);
  font-weight: 300px;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}

/* -----  PC閲覧時 ----- */
@media screen and (min-width: 768px) {
  footer {
    padding: 68px 0 20px;
  }

  footer .logo {
    margin: 0 auto 35px;
  }

  footer .ft_link {
    margin: 0 0 40px;
  }

  footer .ft_link a {
    font-size: 24px;
  }

  footer small {
    font-size: 20px;
  }
}