@charset "utf-8";

/*   BASE   */

:root {
  --max-width-inner: 94%;
  --width-inner: 950px;
}

html.is-noscrl #body_wrap {
  padding-top: 0;
}

html.is-noscrl .l-header[data-spfix="1"] {
  position: relative;
}

/*   COMMON   */

.c-link {
  transition: .2s ease-in-out;
}

.c-link:hover {
  opacity: .7;
  transition: .2s ease-in-out;
}

.pc-only {
  display: block !important;
}

.tb-only {
  display: none !important;
}

.sp-only {
  display: none !important;
}


/*   CONTENTS   */

.darkcircles-main {
  font-size: 16px;
}

.section-inner {
  padding: 60px 0;
}

.section-header {
  margin-bottom: 40px;
}

.section-content {
  padding: 0;
}

.section-text {
  text-align: center;
}

#darkcircles-nav .section-inner {
  width: 900px;
}

.darkcircles-nav-list-item {
  border-right: 1px solid #D799A3;
  font-size: clamp(15px,2vw,20px);
  min-height: 88px;
  width: 25%;
}

.darkcircles-nav-list .darkcircles-nav-list-item:nth-of-type(4n) {
  border-right: 0;
}

.darkcircles-nav-list .darkcircles-nav-list-item:nth-of-type(n+5) {
  border-bottom: 0;
}

.darkcircles-nav-list-item a:hover {
  background-color: var(--swl-color_hov_gray);
}

#darkcircles-case .section-inner {
  max-width: 100%;
  overflow: hidden;
  width: 375px;
}

#darkcircles-attractive .section-inner {
  max-width: 100%;
  width: 100%;
}

.darkcircles-attractive-wrapper {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3EC 100%);
  padding-top: 60px;
  padding-bottom: 30px;
}

.darkcircles-attractive-header {
  margin-bottom: 1em;
}

.darkcircles-attractive-title {
  font-size: 24px;
}

.darkcircles-attractive-header-deco img {
  height: auto;
  width: 407px;
}

.darkcircles-attractive-list {
  width: fit-content;
}

.darkcircles-attractive-list-item {
  font-size: 16px;
  margin-bottom: 1em;
  margin-left: 32px;
  text-indent: -32px;
}

.darkcircles-attractive-list-item .c-color1 {
  font-size: 20px;
}

.darkcircles-attractive-list-item::before {
  background-size: 20px 20px;
  height: 20px;
  vertical-align: -5px;
  width: 20px;
}

.darkcircles-attractive-after-bg {
  height: 147px;
  overflow: hidden;
  width: 100%;
}

.darkcircles-attractive-after-bg img {
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  width: 100%;
}

.darkcircles-attractive-after-text {
  font-size: 24px;
}

.darkcircles-attractive-banner {
  margin-top: 30px;
}

.darkcircles-attractive-cta-balloon {
  margin-bottom: -30px;
}

#darkcircles-about {
  background:
    url(../images/common/logo_horizontal.webp) no-repeat top -32px left calc(50vw - 240px) / 727px 173px,
    url(../images/darkcircles/bg_about_pc.webp) no-repeat top center / cover;
}

#darkcircles-about .section-inner {
  width: 748px;
}

.darkcircles-about-header {
  margin-bottom: 2.5em;
}

.darkcircles-about-container {
  display: flex;
  column-gap: 48px;
  justify-content: space-between;
}

.darkcircles-about-text {
  flex: 1;
}

.darkcircles-about-section {
  width: 360px;
}

#darkcircles-cause {
  background: url(../images/darkcircles/bg_cause_pc.webp) no-repeat top center / cover;
  margin-top: -1px;
  overflow: hidden;
}

#darkcircles-cause .section-inner {
  width: 800px;
}

#darkcircles-cause .section-content {
  padding-left: 0;
  padding-right: 0;
}

.darkcircles-cause-tagline {
  margin-bottom: 2em;
}

.darkcircles-cause-box {
  margin: 0 auto 2.5em;
  width: 500px;
}

.darkcircles-cause-text {
  letter-spacing: -.04em;
}

.darkcircles-cause-worry {
  margin-top: 16em;
}

.darkcircles-cause-worry-title {
  font-size: 40px;
  margin-left: auto;
  padding: 1em 0;
  position: absolute;
  top: -130px;
  left: calc(-62vw + 50%);
  width: 120vw;
}

.darkcircles-cause-worry-title-inner {
  margin: auto;
  max-width: 94%;
  width: 800px;
}

.darkcircles-cause-worry-title-inner img {
  height: auto;
  width: 95px;
}

.darkcircles-cause-worry-box {
  padding: 40px 70px 50px;
}

.darkcircles-cause-worry-box-title {
  font-size: 20px;
  margin-bottom: 1em;
}

.darkcircles-cause-worry-box-text {
  margin-bottom: 2em;
  width: 355px;
}

.darkcircles-cause-worry-box-dr {
  top: auto;
  bottom: 48%;
  right: 10px;
}

.darkcircles-cause-worry-box-dr img {
  height: auto;
  width: 429px;
}

.darkcircles-cause-worry-box-dr-caption {
  bottom: 30%;
  right: 65px;
}


.darkcircles-cause-worry-box-inbox {
  margin-left: -40px;
  padding: 30px 40px;
  width: calc(100% + 80px);
}

.darkcircles-cause-worry-box-makeup {
  column-gap: 1.5em;
  margin-bottom: 1em;
}

#darkcircles-merit {
  background: url(../images/darkcircles/bg_merit_pc.webp) no-repeat top center / cover;
}

#darkcircles-merit .section-inner {
  width: 1000px;
}

.darkcircles-merit-header {
  margin-bottom: 2.5em;
}

#darkcircles-merit .section-content {
  padding-left: 0;
  padding-right: 0;
}

.darkcircles-merit-lead {
  margin-bottom: 2em;
  text-align: center;
}

.darkcircles-merit-container {
  justify-content: center;
  padding: 27px 0;
}

.darkcircles-merit-box {
  border-right: 1px dashed var(--color-darkcircles4);
  padding: 0 20px 20px;
  width: 249px;
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(1) {
  border-bottom: 0;
  padding: 0 20px 20px;
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(2) {
  border-bottom: 0;
  padding: 0 20px 20px;
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(3) {
  border-bottom: 0;
  padding: 0 20px 20px;
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(4) {
  border-right: 0;
  padding: 0 20px 20px;
}

.darkcircles-merit-box-figure img {
  display: block;
}

.darkcircles-merit-box-title {
  font-size: 23px;
}

.darkcircles-merit-cross {
  display: none;
}

#darkcircles-strengths .section-inner {
  width: 645px;
}

.darkcircles-strengths-header {
  margin-bottom: 3em;
}

.darkcircles-strengths-point-item-content {
  overflow: hidden;
  padding-left: .5em;
}

.darkcircles-strengths-point-item-title {
  margin-bottom: .75em;
}

.darkcircles-strengths-point-item-figure {
  float: left;
  margin-bottom: 0;
  margin-right: 1em;
}

.darkcircles-strengths-point-item-textarea {
  font-size: 14px;
  overflow: hidden;
}

#darkcircles-strengths-point4 .darkcircles-strengths-point-item-title {
  letter-spacing: 0
}

#darkcircles-strengths-point5 .darkcircles-strengths-point-item-title {
  letter-spacing: 0;
}

#darkcircles-anesthesia {
  background-position: top -15px left calc((100vw - 1370px) / 2 - 25px), top 5px center, top left;
}

#darkcircles-anesthesia .section-inner {
  width: 1100px;
}

.darkcircles-anesthesia-header {
  margin-bottom: 3em;
}

.darkcircles-anesthesia-lead-text {
  width: auto;
}

.darkcircles-anesthesia-lead-figure {
  bottom: -20px;
}

.darkcircles-anesthesia-container {
  display: flex;
  justify-content: space-between;
}

.darkcircles-anesthesia-box {
  max-width: 32%;
  width: 350px;
}

.darkcircles-anesthesia-box-inner {
  height: 100%;
}

.darkcircles-anesthesia-box-header {
  position: relative;
}


.darkcircles-anesthesia-box-header img {
  display: block;
  height: auto;
  width: 100%;
}

.darkcircles-anesthesia-note {
  font-size: 14px;
  margin-bottom: 2.5em;
  padding-left: 1em;
}

.darkcircles-anesthesia-cta-balloon {
  max-width: 663px;
}

#darkcircles-aftercare {
  background:
    url(../images/common/logo_horizontal.webp) no-repeat top -32px left calc(50vw - 240px) / 727px 173px,
    url(../images/darkcircles/bg_aftercare_pc.webp) no-repeat top center / cover;
}

#darkcircles-aftercare .section-inner {
  width: 1170px;
}

.darkcircles-aftercare-container {
  display: flex;
  column-gap: 65px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 35px;
}

.darkcircles-aftercare-box {
  margin-bottom: 0;
  max-width: 45%;
  padding: 0;
  width: 340px;
}

#darkcircles-set {
  background: url(../images/darkcircles/bg_set_pc.webp) no-repeat top center / cover;
}

#darkcircles-set .section-inner {
  width: 1200px;
}

.darkcircles-set-header {
  padding-top: 0;
}

#darkcircles-set .section-content {
  padding-left: 0;
  padding-right: 0;
}

.darkcircles-set-lead {
  margin-bottom: 2.5em;
  padding: 0;
  text-align: center;
}

.darkcircles-set-container {
  column-gap: 2%;
  row-gap: 40px;
}

.darkcircles-set-box {
  max-width: 32%;
}

.darkcircles-set-aftertext {
  margin-top: 3em;
}

#darkcircles-others {
  background-position: top -30px left calc((100vw - 980px) / 2 - 35px), top left;
}

#darkcircles-others .section-inner {
  width: 732px;
}

.darkcircles-others-header {
  margin-bottom: 4em;
}

.darkcircles-others-container {
  display: flex;
  column-gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 70px;
}

.darkcircles-others-section {
  margin-bottom: 0;
  width: 350px;
}

.darkcircles-others-box {
  padding: 7.5px;
}

.darkcircles-others-btn {
  transition: .2s ease-in-out;
}

.darkcircles-others-btn:hover {
  opacity: .7;
  transition: .2s ease-in-out;
}

#darkcircles-price .section-title {
  font-size: 20px;
}

.darkcircles-price-table thead th {
  font-size: 24px;
  padding: 23px 10px;
}

.darkcircles-price-table thead tr th:nth-of-type(1) {
  width: 40%;
}

.darkcircles-price-table thead tr th:nth-of-type(2) {
  width: 30%;
}

.darkcircles-price-table thead tr th:nth-of-type(3) {
  width: 30%;
}

.darkcircles-price-table td {
  font-size: 24px;
  padding: 18px 10px;
}

.c-unit {
  font-size: 16px;
}

.c-price {
  font-size: 32px;
}

.c-price-note {
  font-size: 16px;
}

.darkcircles-price-tips {
  font-size: 16px;
  padding: 20px 30px;
}

.darkcircles-price-payment {
  margin-top: 60px;
}

.darkcircles-price-payment-title {
  font-size: 24px;
}

.darkcircles-price-payment-box-container {
  display: flex;
  column-gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.darkcircles-price-payment-box-item.grid-2 .darkcircles-price-payment-box-name {
  margin-bottom: .5em;
}

.darkcircles-price-payment-box-item.grid-5 .darkcircles-price-payment-box-name {
  margin-bottom: .5em;
}

.darkcircles-price-payment-box-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}

.darkcircles-price-payment-box-image img {
  display: block;
}

#darkcircles-overview {
  background-image: url(../images/common/bg_overview_pc.webp);
}

.darkcircles-overview-table {
  line-height: 1.5;
}

.darkcircles-overview-table th {
  width: 25%;
}

.darkcircles-overview-table td {
  width: 75%;
}

.darkcircles-overview-note {
  font-size: 14px;
  text-align: left;
}

.darkcircles-overview-tips-list dt {
  margin-bottom: .25em;
}

.darkcircles-overview-tips-list dd {
  margin-bottom: .25em;
}

.darkcircles-flow-tips {
  margin-bottom: 60px;
  text-align: center;
}

.darkcircles-flow-step {
  display: flex;
  column-gap: 1.5em;
  margin-bottom: 40px;
  padding: 15px 50px 15px 145px;
}

.darkcircles-flow-step-titlearea {
  left: -15px;
}

.darkcircles-flow-step-image {
  margin-top: -30px;
  margin-bottom: 0;
  margin-right: 0;
  text-align: center;
  width: 330px;
}

.darkcircles-flow-step-image img {
  width: 100%;
}

.darkcircles-flow-step-content {
  align-content: center;
  flex: 1;
}

.darkcircles-flow-step .cta {
  padding: 5px 0;
}

.darkcircles-flow-step-text {
  padding: 0;
}


#darkcircles-column {
  background-image: url(../images/common/bg_column_pc.webp);
}

#darkcircles-column .section-inner {
  width: 875px;
}

.darkcircles-column-slider {
  margin: 0;
}

.darkcircles-column-slider-item {
  margin: 0 5px;
}

.darkcircles-column-slider-item a {
  transition: .25s;
}

.darkcircles-column-slider-item a:hover {
  opacity: .8;
  transition: .25s;
}

.column-thumbnail img {
  transition: .25s;
}

.darkcircles-column-slider-item a:hover .column-thumbnail img {
  opacity: .8;
  transform: scale(1.06);
  transition: .25s;
}

.darkcircles-column-slider-arrow-prev {
  left: -45px;
}

.darkcircles-column-slider-arrow-next {
  right: -45px;
}


/* インクルード */

.cta {
  padding: 60px 0;
}

.cta-button:hover {
  opacity: .7;
  transition: .2s ease-in-out;
}

#thread-introduction {
  background-image: url(../images/common/bg_introduction_pc.webp);
}

.thread-introduction-container {
  column-gap: 20px;
  margin-bottom: 30px;
}

.thread-introduction-portrait {
  max-width: inherit;
  padding-left: 25px;
  width: 404px;
}

.thread-introduction-info {
  padding-bottom: 20px;
}

.thread-introduction-name-en {
  font-size: 16px;
  line-height: 1.5;
}

.thread-introduction-name {
  font-size: 32px;
  margin-bottom: 6px;
}

.thread-introduction-position {
  font-size: 16px;
  margin-bottom: 2em;
}

.thread-introduction-box {
  padding: 18px 50px;
}

.thread-introduction-info .thread-introduction-box {
  padding: 18px;
}

.thread-introduction-box-title {
  font-size: 24px;
  margin-bottom: .5em;
}

.thread-introduction-info .thread-introduction-box-list-item {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 7px;
}

.thread-introduction-text {
  padding: 0 2em;
}

.thread-access-table th {
  width: 25%;
}

.thread-access-table td {
  width: 75%;
}

.thread-access-note {
  margin: .75em auto 0;
  max-width: 100%;
  text-align: center;
  width: 330px;
}

.thread-access-map {
  aspect-ratio: 3 / 2;
  margin: 2em auto 0;
  max-width: 100%;
  width: 524px;
}


@media screen and (min-width:600px) and (max-width:960px) {
  .tb-only {
    display: block !important;
  }
  .darkcircles-cause-worry {
    margin-top: 12em;
  }
  .darkcircles-cause-worry-title {
    font-size: 30px;
    top: -120px;
    left: calc(-50vw + 50%);
  }
  .darkcircles-cause-worry-title-inner img {
    width: 70px;
  }
  .darkcircles-cause-worry-box {
    padding: 40px 30px;
  }
  .darkcircles-cause-worry-box-dr {
    bottom: 55%;
    width: 43%;
  }
  .darkcircles-cause-worry-box-dr-caption {
    bottom: 18%;
    right: 5%;
  }
  #darkcircles-anesthesia {
    background-position: top -15px left calc((100vw - 980px) / 2 - 25px), top 5px center, top left;
  }
  .darkcircles-anesthesia-box-note {
    right: 20px;
  }
  .darkcircles-aftercare-container {
    column-gap: 7%;
  }
  .darkcircles-set-box {
    padding: 18px 14px 26px;
  }
  .darkcircles-set-box-title {
    font-size: 16px;
  }
  .darkcircles-set-box-title-figure img {
    display: block;
  }
  .darkcircles-set-box-text {
    font-size: 14px;
  }
  .darkcircles-flow-tips {
    padding: 25px 20px;
  }
  .darkcircles-flow-step {
    margin-bottom: 60px;
    padding: 0 0 0 60px;
  }
  .darkcircles-flow-step-titlearea {
    height: 160px;
    top: 15px;
    left: -30px;
    width: 160px;
  }
  .darkcircles-flow-step-title {
    font-size: 21px;
  }
  .darkcircles-flow-step-image {
    margin-top: -15px;
    width: 300px;
  }
  .darkcircles-flow-step-content {
    padding: 20px;
  }
  .darkcircles-flow-step-content .cta-button {
    font-size: 21px;
    width: 270px;
  }
  .darkcircles-column-slider-arrow-prev {
    left: -30px;
  }
  .darkcircles-column-slider-arrow-next {
    right: -30px;
  }
}