@charset "utf-8";

/*   BASE   */

@font-face {
  font-family: 'Butler';
  src: url('../fonts/Butler-Light.woff2') format('woff2'),
      url('../fonts/Butler-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

:root {
  --color-text: #000;
  --color-red: #FF3052;
  --color-darkcircles1: #FF6B6B;
  --color-darkcircles2: #FF9797;
  --color-darkcircles3: #FFE5D5;
  --color-darkcircles4: #FCC9AA;
  --font-family-default: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", verdana, sans-serif;
  --font-family-alata: "Alata", sans-serif;
  --font-family-afacad: "Afacad", sans-serif;
  --font-family-butler: 'Butler', sans-serif;
  --font-family-hedvig: "Hedvig Letters Serif", serif;
  --font-family-grapenuts: "Grape Nuts", cursive;
  --font-family-marugo: "Zen Maru Gothic", serif;
  --max-width-inner: inherit;
  --width-inner: 100%;
}

sub {
  vertical-align: baseline;
}

html.is-noscrl {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html.is-noscrl #body_wrap {
  overflow-y: hidden;
  padding-top: 60px;
}

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


/*   COMMON   */

.c-red {
  color: var(--color-red);
}

.c-gray {
  color: #877272;
}

.c-color1 {
  color: var(--color-darkcircles1);
  font-weight: 700;
}

.c-color2 {
  color: var(--color-darkcircles2);
  font-weight: 700;
}

.c-marker1 {
  background: linear-gradient(transparent 60%, var(--color-darkcircles3) 60%);
  color: var(--color-darkcircles1);
  font-weight: 700;
}

.c-marker2 {
  background: linear-gradient(transparent 60%, var(--color-darkcircles4) 60%);
}

.c-fs80 {
  font-size: 80%;
}

.c-fs120 {
  font-size: 120%;
}

.c-fs125 {
  font-size: 120%;
}

.c-fs133 {
  font-size: 133%;
}

.c-fs150 {
  font-size: 150%;
}

.c-fs200 {
  font-size: 200%;
}

.c-bold {
  font-weight: 700;
}

.c-mb15 {
  margin-bottom: 1.5em;
}

.c-dots {
  background-image: radial-gradient(circle at center, var(--color-red) 20%, transparent 20%);
  background-position: top -1px right;
  background-repeat: repeat-x;
  background-size: 1em .3em;
}

.c-dots2 {
  background-image: radial-gradient(circle at center, #FF6B6B 20%, transparent 20%);
  background-position: top -1px right;
  background-repeat: repeat-x;
  background-size: 1em .3em;
}

.c-link {
  color: var(--color-blue);
  text-decoration: underline;
}

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

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

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


/*   CONTENTS   */

#content {
  max-width: inherit;
  padding: 0;
  width: 100%;
  z-index: auto;
}

.darkcircles-main {
  background-color: #fff;
  color: var(--color-text);
  font-family: var(--font-family-default);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
}

.darkcircles-main img {
  image-rendering: -webkit-optimize-contrast;
}

.darkcircles-mainvisual-image {
  display: block;
  height: auto;
  width: 100%;
}

.section {
  position: relative;
}

.section-inner {
  margin: auto;
  max-width: var(--max-width-inner);
  padding: 40px 0;
  width: var(--width-inner);
}

.section-header {
  margin-bottom: 1.5em;
  text-align: center;
}

.section-title-en {
  font-family: "Hedvig Letters Serif", serif;
  font-size: 46px;
  line-height: 1;
}

.section-title {
  font-size: 20px;
  font-weight: 400;
  margin-top: .25em;
}

.section-header-box {
  border: 1px solid #CEB384;
  margin: auto;
  max-width: 100%;
  padding: 6px;
  width: 297px;
}

.section-header-box-inner {
  background-color: #fff;
  padding: 20px 10px;
}

.section-content {
  padding: 0 10px;
}

.section-text {
  font-size: 16px;
}

.darkcircles-cta {
  background: linear-gradient(180deg, #fff 0%, #FFD7C8 100%);
}

.darkcircles-cta-balloon {
  background-color: #FFF3EC;
  border-radius: 10px;
  color: #ADA0A0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 15px auto 21px;
  max-width: 350px;
  padding: 5px 0;
  position: relative;
  text-align: center;
}

.darkcircles-cta-balloon::before {
  content: "";
  border-color: #FFF3EC transparent transparent;
  border-style: solid;
  border-width: 16px 8px 0 8px;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 100%;  
}

.darkcircles-cta-balloon + .cta {
  padding: 0 15px 35px;
}

#darkcircles-nav .section-inner {
  padding: 0;
}

.darkcircles-nav-list {
  display: flex;
  flex-wrap: wrap;
}

.darkcircles-nav-list-item {
  border-bottom: 1px solid #98A1B5;
  font-size: clamp(15px,4vw,20px);
  font-weight: 700;
  min-height: 73px;
  width: 50%;
}

.darkcircles-nav-list .darkcircles-nav-list-item:nth-of-type(odd) {
  border-right: 1px solid #98A1B5;
}

.darkcircles-nav-list .darkcircles-nav-list-item:nth-last-of-type(1),
.darkcircles-nav-list .darkcircles-nav-list-item:nth-last-of-type(2) {
  border-bottom: 0;
}

.darkcircles-nav-list-item a {
  background: url(../images/darkcircles/icon_arrow_down.svg) no-repeat center right min(10px,2.4vw);
  color: #271D18;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 12px 40px 12px 12px;
}

#darkcircles-case {
  background-color: #FFF3EC;
}

#darkcircles-case .section-inner {
  padding-bottom: 60px;
}

.darkcircles-case-header {
  margin-bottom: 1em;
  text-align: center;
}

.darkcircles-case-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-case-title .highlight {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

.darkcircles-case-title .highlight-in {
  background-color: #fff;
  border: 1px solid #271D18;
  color: var(--color-darkcircles1);
  display: inline-block;
  padding: 1px 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-case-title .highlight::after {
  content: "";
  background: linear-gradient(100deg, #FF9797 0%, #FCC9AA 100%);
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

.darkcircles-case-title-en {
  margin-top: -10px;
}

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

.darkcircles-case-box {
  background: linear-gradient(180deg, #FCC9AA 0%, #FCC9AA 51.2%, #fff 51.2%, #fff 100%);
  border-radius: 20px;
  padding: 60px 0 25px;
  position: relative;
}

.darkcircles-case-box-title-en {
  color: #fff;
  font-family: var(--font-family-grapenuts);
  font-size: 36px;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-7deg);
  transform-origin: right;
}

.darkcircles-case-box-header {
  margin-bottom: 25px;
  text-align: center;
}

.darkcircles-case-box-subtitle {
  font-family: var(--font-family-marugo);
  font-size: 20px;
  font-weight: 700;
}

.darkcircles-case-box-subtitle .highlight {
  background: linear-gradient(180deg, rgba(240,130,148,.5) 0%, rgba(243,0,0,.5) 100%);
  color: #fff;
}

.darkcircles-case-box-title {
  font-size: 24px;
  font-weight: 600;
}

.darkcircles-case-box-title .dots {
  background-image: radial-gradient(circle at center, #FF6B6B 20%, transparent 20%);
  background-position: top -1px right;
  background-repeat: repeat-x;
  background-size: 1em .3em;
  display: inline-block;
  line-height: 2;
}

.darkcircles-case-box-title .marker {
    position: relative;
}

.darkcircles-case-box-title .marker::after {
  content: "";
  background: url(../images/darkcircles/icon_underline_marker.svg) no-repeat bottom center / 100% auto;
  display: block;
  height: 24px;
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 167px;
  z-index: 1;
}

.darkcircles-case-box-title .marker-in {
  position: relative;
  z-index: 2;
}

.darkcircles-case-box-slider .slick-list {
  overflow: visible;
}

.darkcircles-case-box-slider-item {
  border: 1px solid #271D18;
  margin: 0 27.5px;
  padding: 9px;
  position: relative;
}

.darkcircles-case-box-slider-item-caption {
  font-family: var(--font-family-grapenuts);
  font-size: 40px;
  height: 50px;
  line-height: 1;
  position: absolute;
  transform: rotate(-7deg);
  z-index: 1;
}

.darkcircles-case-box-slider-item-caption.before {
  background-color: #FCC9AA;
  color: #271D18;
  top: -32px;
  left: -14px;
}

.darkcircles-case-box-slider-item-caption.after {
  background-color: #fff;
  color: var(--color-darkcircles1);
  bottom: -37px;
  right: -7px;
}

.darkcircles-case-box-slider-item img {
  height: auto;
  position: relative;
  width: 100%;
  z-index: 2;
}

.darkcircles-case-box-slider-arrow {
  cursor: pointer;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.darkcircles-case-box-slider-arrow.prev {
  left: 5px;
}

.darkcircles-case-box-slider-arrow.next {
  right: 5px;
}

.darkcircles-case-box-slider .slick-dots {
  bottom: -180px;
}

.slick-dots li button::before {
  color: #D9D9D9;
  font-size: 12px;
  opacity: 1;
}

.slick-dots li.slick-active button::before {
  color: #FF6B6B;
  opacity: 1;
}

.darkcircles-case-box-content {
  color: #271D18;
  font-size: 12px;
  line-height: 1.3;
  margin: 20px auto 0;
  position: relative;
  width: 300px;
  z-index: 2;
}

#darkcircles-attractive {
  background-color: #fff;
}

#darkcircles-attractive .section-inner {
  padding-top: 0;
}

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

.darkcircles-attractive-header {
  margin-bottom: .5em;
  text-align: center;
}

.darkcircles-attractive-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: .5em;
}

.darkcircles-attractive-list {
  margin: auto;
  width: 280px;
}

.darkcircles-attractive-list-item {
  font-size: 14px;
  margin-bottom: .5em;
  margin-left: 30px;
  text-indent: -30px;
}

.darkcircles-attractive-list .darkcircles-attractive-list-item:last-of-type {
  margin-bottom: 0;
}

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

.darkcircles-attractive-list-item::before {
  content: "";
  background: url(../images/darkcircles/icon_checkbox.svg) no-repeat center center / 18px 18px;
  display: inline-block;
  height: 18px;
  margin-right: 12px;
  vertical-align: middle;
  width: 18px;
}

.darkcircles-attractive-after {
  position: relative;
}

.darkcircles-attractive-after-bg img {
  height: auto;
  width: 100%;
}

.darkcircles-attractive-after-text {
  font-size: 20px;
  line-height: 1.35;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  transform: translateY(-50%);
  width: 100%;
}

.darkcircles-attractive-banner {
  margin-top: 20px;
  text-align: center;
}

.darkcircles-attractive-cta-balloon {
  margin-top: 0;
  margin-bottom: -10px;
  max-width: 330px;
  padding: 15px 5px;
}

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

.darkcircles-about-header {
  margin-bottom: 1.5em;
  text-align: center;
}

.darkcircles-about-title {
  font-size: 24px;
  font-weight: 700;
}

.darkcircles-about-text {
  margin-bottom: 2em;
}

.darkcircles-about-section-title {
  background-color: var(--color-darkcircles3);
  color: var(--color-darkcircles1);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: .25em;
  padding: 4px;
  text-align: center;
}

.darkcircles-about-step-item {
  display: flex;
  column-gap: .5em;
}

.darkcircles-about-step-item-order {
  background-color: #FD9090;
  color: #fff;
  font-family: var(--font-family-afacad);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  padding-top: 20px;
  position: relative;
  text-align: center;
  width: 47px;
}

.darkcircles-about-step-item-order::before,
.darkcircles-about-step-item-order::after {
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: block;
  height: 15px;
  position: absolute;
  width: 100%;
}

.darkcircles-about-step-item-order::before {
  background-color: #FD9090;
  top: 0;
  z-index: 2;
}

.darkcircles-about-step-item-order::after {
  background-color: #FED8C5;
  top: 2px;
  z-index: 1;
}

#darkcircles-about-step1 .darkcircles-about-step-item-order {
  padding-top: 10px;
}

#darkcircles-about-step1 .darkcircles-about-step-item-order::before,
#darkcircles-about-step1 .darkcircles-about-step-item-order::after {
  content: none;
}

.darkcircles-about-step-item-order .order-num {
  display: block;
  font-family: var(--font-family-alata);
  font-size: 24px;
}

.darkcircles-about-step-item-content {
  flex: 1;
  padding: 15px 0;
}

.darkcircles-about-step .darkcircles-about-step-item:first-of-type .darkcircles-about-step-item-content {
  padding: 0 0 15px;
}

.darkcircles-about-step-item-figure {
  padding: 10px 0;
  width: 147px;
}

.darkcircles-about-step-item-title {
  font-family: var(--font-family-marugo);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  margin-bottom: .5em;
}

.darkcircles-about-step-item-title .highlight {
  background-color: #fff;
  border: 1px solid var(--color-darkcircles1);
  box-shadow: 4px 4px 0 var(--color-darkcircles4);
  display: inline-block;
  line-height: 1.5;
  padding: 1px 3px;
}

.darkcircles-about-step-item-text {
  font-size: 14px;
}

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

#darkcircles-cause .section-inner {
  padding-top: 20px;
}

.darkcircles-cause-header {
  background: url(../images/darkcircles/img_cause_iconic@2x.webp) no-repeat center center / 200px 200px;
  margin-bottom: 1.5em;
  padding: 75px 0;
  text-align: center;
}

.darkcircles-cause-title {
  font-size: 24px;
  font-weight: 700;
}

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

.darkcircles-cause-tagline {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1em;
  text-align: center;
}

.darkcircles-cause-tagline .highlight1 {
  background-color: #fff;
  border: 1px solid #271D18;
  color: #FF9797;
  padding: 0 2px;
}

.darkcircles-cause-tagline .highlight2 {
  background-color: #fff;
  border: 1px solid #271D18;
  color: #FE9F7F;
  padding: 0 2px;
}

.darkcircles-cause-box {
  background-color: #fff;
  border: 2px solid var(--color-darkcircles3);
  margin-bottom: 1.5em;
}

.darkcircles-cause-box-title {
  background-color: var(--color-darkcircles3);
  color: var(--color-darkcircles1);
  font-size: 20px;
  font-weight: 700;
  padding: 4px;
  text-align: center;
}

.darkcircles-cause-text {
  font-size: 16px;
}

.darkcircles-cause-worry {
  margin-top: 3em;
  position: relative;
}

.darkcircles-cause-worry-title {
  background: linear-gradient(100deg, #FF9797 0%, #FCC9AA 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .25em;
  margin-left: -15%;
  padding: 18px 24px;
  position: relative;
  transform: rotate(-3deg);
  transform-origin: left;
  width: 130%;
  z-index: 2;
}

.darkcircles-cause-worry-title-inner {
  display: flex;
  align-items: center;
  column-gap: .5em;
}

.darkcircles-cause-worry-box {
  background-color: #fff;
  padding: 0 18px 24px;
  position: relative;
  z-index: 1;
}

.darkcircles-cause-worry-box-title {
  color: #FF9393;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .75em;
  position: relative;
  z-index: 4;
}

.darkcircles-cause-worry-box-text {
  line-height: 1.35;
  margin-bottom: 1.25em;
  position: relative;
  width: 210px;
  z-index: 4;
}

.darkcircles-cause-worry-box-dr {
  position: absolute;
  top: -45px;
  right: -103px;
  z-index: 3;
}

.darkcircles-cause-worry-box-dr-caption {
  background-color: rgba(246,243,243,.8);
  font-size: 10px;
  padding: 5px;
  position: absolute;
  bottom: 35px;
  right: 95px;
}

.darkcircles-cause-worry-box-dr-caption-name {
  font-size: 14px;
}

.darkcircles-cause-worry-box-inbox {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE7D6 100%);
  border: 2px solid var(--color-darkcircles2);
  box-shadow: 4px 4px 4px rgba(0,0,0,.25);
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 1em;
  margin-left: -28px;
  padding: 12px 15px;
  position: relative;
  width: calc(100% + 36px + 20px);
  z-index: 4;
}

.darkcircles-cause-worry-box-makeup {
  display: flex;
  align-items: center;
  column-gap: 1em;
  margin-bottom: .5em;
}

.darkcircles-cause-worry-box-makeup-figure {
  width: 120px;
}

.darkcircles-cause-worry-box-makeup-text {
  flex: 1;
  line-height: 1.4;
}

.darkcircles-cause-worry-box-aftertext {
  color: var(--color-darkcircles1);
  font-size: 16px;
  font-weight: 700;
}

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

.darkcircles-merit-header {
  margin-bottom: 1.5em;
  text-align: center;
}

.darkcircles-merit-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-merit-title .highlight {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

.darkcircles-merit-title .highlight-in {
  background-color: #fff;
  border: 1px solid #271D18;
  color: #FE9F7F;
  display: inline-block;
  padding: 1px 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-merit-title .highlight::after {
  content: "";
  background-color: #FF6B6B;
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

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

.darkcircles-merit-lead {
  font-size: 16px;
  margin-bottom: 1.5em;
}

.darkcircles-merit-container {
  background:
  url(../images/darkcircles/icon_triangle1.svg) no-repeat top left,
  url(../images/darkcircles/icon_triangle2.svg) no-repeat bottom right,
  #fff;
  border: 2px solid #CDB289;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px 14px;
  position: relative;
}

.darkcircles-merit-box {
  width: 50%;
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(1) {
  border-bottom: 1px dashed var(--color-darkcircles4);
  border-right: 1px dashed var(--color-darkcircles4);
  padding: 5px 14px 30px 5px
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(2) {
  border-bottom: 1px dashed var(--color-darkcircles4);
  padding: 5px 5px 30px 14px
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(3) {
  border-right: 1px dashed var(--color-darkcircles4);
  padding: 30px 14px 5px 5px
}

.darkcircles-merit-container .darkcircles-merit-box:nth-of-type(4) {
  padding: 30px 5px 5px 14px
}

.darkcircles-merit-box-figure {
  margin-bottom: 1rem;
  text-align: center;
}

.darkcircles-merit-box-title {
  color: var(--color-darkcircles1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.darkcircles-merit-box-text {
  line-height: 1.4;
}

.darkcircles-merit-cross {
  position: absolute;
  top: 50.5%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#darkcircles-merit .cta {
  padding-bottom: 0;
}

#darkcircles-strengths {
  background-color: #FFF3EC;
}

.darkcircles-strengths-header {
  margin-bottom: 1.5em;
  text-align: center;
}

.darkcircles-strengths-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-strengths-title .highlight {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

.darkcircles-strengths-title .highlight-in {
  background-color: #fff;
  border: 1px solid #271D18;
  color: #FE9F7F;
  display: inline-block;
  padding: 1px 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-strengths-title .highlight::after {
  content: "";
  background-color: #FF6B6B;
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

.darkcircles-strengths-title-en {
  background: linear-gradient(180deg, #703939 0%, #D66C6E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--font-family-grapenuts);
  font-size: 36px;
  line-height: 1;
  mix-blend-mode: color-burn;
  -webkit-text-fill-color: transparent;
}

.darkcircles-strengths-subtitle {
  font-size: 20px;
  line-height: 1.35;
  margin-top: -1em;
}

.darkcircles-strengths-point-item {
  display: flex;
  column-gap: .2em;
}

.darkcircles-strengths-point-item-order {
  color: #FE9F7F;
  font-family: var(--font-family-afacad);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  padding-top: .4em;
  text-align: center;
  width: 60px;
}

.darkcircles-strengths-point-item-order .order-num {
  display: block;
  font-size: 40px;
}

.darkcircles-strengths-point-item-icon {
  padding-top: .5em;
  position: relative;
}

.darkcircles-strengths-point-item-icon::after {
  content: "";
  border-left: 1px solid #FE9F7F;
  display: block;
  height: 100%;
  margin: .5em auto 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1px;
}

#darkcircles-strengths-point5 .darkcircles-strengths-point-item-icon::after {
  content: none;
}

.darkcircles-strengths-point-item-content {
  flex: 1;
  padding: .5em 0 2.5em .15em;
}

.darkcircles-strengths-point-item-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: -.25em;
  margin-bottom: .5em;
}

#darkcircles-strengths-point4 .darkcircles-strengths-point-item-title {
  letter-spacing: -.05em;
}

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

.darkcircles-strengths-point-item-title .highlight {
  background-color: #fff;
  border: 1px solid var(--color-darkcircles4);
  color: #FE9F7F;
  padding: 0 2px;
}

.darkcircles-strengths-point-item-figure {
  margin-bottom: .5em;
}

.darkcircles-strengths-point-item-textarea {
  line-height: 1.4;
}

.c-color-rejuran {
  color: #FF882D;
}

.c-color-reduce {
  color: #B555FF;
}

.darkcircles-strengths-point-item-note {
  font-size: 12px;
  margin-top: 2em;
}

#darkcircles-anesthesia {
  background:
  url(../images/common/logo_vertical.webp) no-repeat top -18px left -81px / auto 708px,
  url(../images/darkcircles/img_anesthesia_iconic@2x.webp) no-repeat top 5px center / 227px 186px,
  linear-gradient(90deg, #DEF2FF 0%, #F8EAFF 100%);
}

.darkcircles-anesthesia-header {
  margin-bottom: 2em;
  text-align: center;
}

.darkcircles-anesthesia-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-anesthesia-title .highlight {
  display: inline-block;
  line-height: 1.2;
  position: relative;
}

.darkcircles-anesthesia-title .highlight-in {
  background-color: #fff;
  border: 1px solid #271D18;
  display: inline-block;
  padding: 0 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-anesthesia-title .highlight::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

.darkcircles-anesthesia-title .highlight.local::after {
  background: linear-gradient(100deg, #49ADFF 0%, #AADDFF 100%);
}

.darkcircles-anesthesia-title .highlight.intravenous::after {
  background: linear-gradient(100deg, #826FFF 0%, #CAB3FF 100%);
}

.c-color-local {
  color: #49ADFF;
}

.c-color-block {
  color: #86A8AF;
}

.c-color-intravenous {
  color: #826FFF;
}

.darkcircles-anesthesia-lead {
  padding-bottom: 3em;
  position: relative;
}

.darkcircles-anesthesia-lead-text {
  margin-left: 2em;
  position: relative;
  width: 160px;
  z-index: 2;
}

.darkcircles-anesthesia-lead-figure {
  position: absolute;
  bottom: -40px;
  right: 0;
}

.darkcircles-anesthesia-box {
  border: 2px solid #fff;
  border-radius: 24px;
  margin-bottom: 15px;
  padding: 10.5px;
  position: relative;
  z-index: 3;
}

.darkcircles-anesthesia-box-inner {
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
}

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

.darkcircles-anesthesia-box-title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

#darkcircles-anesthesia-block .darkcircles-anesthesia-box-title {
  text-shadow: 0 4px 4px rgba(0,0,0,.25);
}

.darkcircles-anesthesia-box-title-sub {
  font-size: 16px;
}

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

.darkcircles-anesthesia-box-content {
  padding: 16px 16px 2em;
}

.darkcircles-anesthesia-box-text {
  font-size: 16px;
  line-height: 1.4;
}

.darkcircles-anesthesia-box-note {
  font-size: 12px;
  position: absolute;
  bottom: 16px;
  right: 27px;
}

.darkcircles-anesthesia-note {
  font-size: 12px;
  margin: -10px 0 1.5em;
  padding-left: 27.5px;
}

.darkcircles-anesthesia-cta-balloon {
  background-color: #fff;
  color: #271D18;
  font-size: 16px;
  font-weight: 500;
  max-width: 330px;
  padding: 20px 28px;
  text-align: left;
}

.darkcircles-anesthesia-cta-balloon::before {
  border-color: #fff transparent transparent;
}

#darkcircles-anesthesia .cta {
  padding-bottom: 0;
}

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

.darkcircles-aftercare-header {
  margin-bottom: 2em;
  text-align: center;
}

.darkcircles-aftercare-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-aftercare-box {
  margin-bottom: 50px;
  padding: 0 8px;
}

.darkcircles-aftercare-container .darkcircles-aftercare-box:last-of-type {
  margin-bottom: 0;
}

.darkcircles-aftercare-box-header {
  margin-bottom: 2em;
  position: relative;
}

.darkcircles-aftercare-box-titlearea {
  position: relative;
  z-index: 2;
}

.darkcircles-aftercare-box-num {
  background: linear-gradient(180deg, #FFDCC6 0%, #FF6B6B 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--font-family-butler);
  font-size: 100px;
  font-weight: 300;
  line-height: 1;
  -webkit-text-fill-color: transparent;
}

.darkcircles-aftercare-box-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-aftercare-box-title .highlight {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
  position: relative;
}

.darkcircles-aftercare-box-title .highlight-in {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3E6E6 100%);
  border: 1px solid #FF6B6B;
  color: #271D18;
  display: inline-block;
  padding: 1px 5px;
  position: relative;
  z-index: 2;
}

.darkcircles-aftercare-box-title .highlight::after {
  content: "";
  background-color: #FFDCC6;
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

.darkcircles-aftercare-box-figure {
  position: absolute;
  bottom: -1.25em;
  right: 0;
  z-index: 1;
}

.darkcircles-aftercare-box-text {
  font-size: 16px;
}

#darkcircles-aftercare .cta {
  padding-bottom: 0;
}

#darkcircles-set {
  background:
  url(../images/darkcircles/img_set_iconic@2x.webp) no-repeat top 10px center / 180px 180px,
  url(../images/darkcircles/bg_set_sp.webp) no-repeat top center / cover;
}

.darkcircles-set-header {
  padding-top: 40px;
  margin-bottom: 2.5em;
  text-align: center;
}

.darkcircles-set-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-set-title .highlight {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

.darkcircles-set-title .highlight-in {
  background-color: #fff;
  border: 1px solid #271D18;
  color: #FE9F7F;
  display: inline-block;
  padding: 1px 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-set-title .highlight::after {
  content: "";
  background-color: #FF6B6B;
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

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

.darkcircles-set-lead {
  font-size: 16px;
  margin-bottom: 1.5em;
  padding: 0 10px;
}

.darkcircles-set-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 20px;
}

.darkcircles-set-box {
  border: 2px solid #CEB384;
  box-shadow: 4px 4px 4px rgba(0,0,0,.25);
  max-width: 100%;
  padding: 25px 17.5px;
  width: 360px;
}

#darkcircles-set-rejuran {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE7D6 100%);
}

#darkcircles-set-reduce {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7ECFF 100%);
}

#darkcircles-set-hyaluronic {
  background: linear-gradient(180deg, #FFFFFF 0%, #E3F3FF 100%);
}

#darkcircles-set-lthread {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE7E7 100%);
}

.darkcircles-set-box-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: .75em;
  text-align: center;
}

#darkcircles-set-rejuran .darkcircles-set-box-title {
  color: #FF882D;
}

#darkcircles-set-reduce .darkcircles-set-box-title {
  color: #B555FF;
}

#darkcircles-set-hyaluronic .darkcircles-set-box-title {
  color: #5E4FFC;
}

#darkcircles-set-lthread .darkcircles-set-box-title {
  color: #FF3052;
}

.darkcircles-set-box-title-figure {
  margin-bottom: 1em;
  text-align: center;
}

.darkcircles-set-box-text {
  font-size: 16px;
}

.darkcircles-set-aftertext {
  font-size: 16px;
  margin-top: 1.5em;
  text-align: center;
}

#darkcircles-others {
  background:
  url(../images/common/logo_vertical.webp) no-repeat top -18px left -81px / auto 708px,
  linear-gradient(90deg, #DEF2FF 0%, #F8EAFF 100%);
}

.darkcircles-others-header {
  margin-bottom: 3.5em;
  text-align: center;
}

.darkcircles-others-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.darkcircles-others-title .highlight {
  display: inline-block;
  margin-right: 5px;
  position: relative;
}

.darkcircles-others-title .highlight-in {
  background: linear-gradient(180deg, #FFFFFF 0%, #C7D1FF 100%);
  border: 1px solid #271D18;
  color: #2C33C7;
  display: inline-block;
  padding: 1px 2px;
  position: relative;
  z-index: 2;
}

.darkcircles-others-title .highlight::after {
  content: "";
  background: linear-gradient(100deg, #3B38D4 0%, #787AFF 100%);
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

.darkcircles-others-section {
  margin-bottom: 60px;
}

.darkcircles-others-container .darkcircles-others-section:last-of-type {
  margin-bottom: 0;
}

.darkcircles-others-box {
  border: 2px solid #fff;
  border-radius: 24px;
  margin-bottom: 15px;
  padding: 10.5px;
  position: relative;
  z-index: 3;
}

.darkcircles-others-box-inner {
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
}

.darkcircles-others-box-num {
  font-family: var(--font-family-butler);
  font-size: 100px;
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: -.5em;
  right: 13px;
  z-index: 2;
}

#darkcircles-others-double .darkcircles-others-box-num {
  background: linear-gradient(180deg, #78C9FF 0%, #0080FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#darkcircles-others-inner .darkcircles-others-box-num {
  background: linear-gradient(180deg, #E5B3FF 0%, #8C68F2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.darkcircles-others-box-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  position: absolute;
  bottom: 13px;
  left: 8px;
}

.darkcircles-others-box-title .highlight {
  display: inline-block;
  position: relative;
}

.darkcircles-others-box-title .highlight::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  z-index: 1;
}

#darkcircles-others-double .darkcircles-others-box-title .highlight::after {
  background: linear-gradient(100deg, #78C9FF 0%, #0080FF 100%);
}

#darkcircles-others-inner .darkcircles-others-box-title .highlight::after {
  background: linear-gradient(100deg, #E5B3FF 0%, #8C68F2 100%);
}

.darkcircles-others-box-title .highlight-in {
  border: 1px solid #271D18;
  padding: 0 5px;
  position: relative;
  z-index: 2;
}

#darkcircles-others-double .darkcircles-others-box-title .highlight-in {
  background: linear-gradient(180deg, #FFFFFF 0%, #C7E9FF 100%);
}

#darkcircles-others-inner .darkcircles-others-box-title .highlight-in {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4DEFF 100%);
}

#darkcircles-others-double .darkcircles-others-box-title .highlight-in-in {
  background: linear-gradient(100deg, #78C9FF 0%, #0080FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#darkcircles-others-inner .darkcircles-others-box-title .highlight-in-in {
  background: linear-gradient(100deg, #E5B3FF 0%, #8C68F2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.darkcircles-others-box-title-en {
  font-family: var(--font-family-afacad);
  font-size: 16px;
  position: absolute;
  bottom: 7px;
  right: 8px;
}

#darkcircles-others-double .darkcircles-others-box-title-en {
  color: #78C9FF;
}

#darkcircles-others-inner .darkcircles-others-box-title-en {
  color: #E5B3FF;
}

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

.darkcircles-others-box-content {
  padding: 12px 12px 16px;
}

.darkcircles-others-box-type {
  font-size: 16px;
  font-weight: 700;
}

#darkcircles-others-double .darkcircles-others-box-type {
  color: #0080FF;
}

#darkcircles-others-inner .darkcircles-others-box-type {
  color: #8C68F2;
}

.darkcircles-others-box-text {
  font-size: 16px;
  line-height: 1.4;
}

.darkcircles-others-box-btnarea {
  margin-top: 1em;
  text-align: center;
}

.darkcircles-others-btn {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin: auto;
  padding: 6px 6px 3px;
  position: relative;
  text-align: center;
  width: 172px;
}

#darkcircles-others-double .darkcircles-others-btn {
  background: linear-gradient(180deg, #78C9FF 0%, #0080FF 100%);
}

#darkcircles-others-inner .darkcircles-others-btn {
  background: linear-gradient(180deg, #E5B3FF 0%, #8C68F2 100%);
}

.darkcircles-others-btn::before {
  content: "";
  background: linear-gradient(to bottom, #D5EBFF 0%, #CCE6FF 47%, transparent);
  border-radius: 6px;
  display: block;
  height: calc(100% - 6px);
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  z-index: 1;
}

#darkcircles-others-double .darkcircles-others-btn::before {
  background: linear-gradient(to bottom, #D5EBFF 0%, #CCE6FF 47%, transparent);
}

#darkcircles-others-inner .darkcircles-others-btn::before {
  background: linear-gradient(to bottom, #F4E7FE 0%, #E5CCFF 47%, transparent);
}

.darkcircles-others-btn span {
  border-radius: 3px;
  display: block;
  padding: 6px 6px 10px;
  position: relative;
  z-index: 2;
}

#darkcircles-others-double .darkcircles-others-btn span {
  background: linear-gradient(180deg, #78C9FF 0%, #0080FF 100%);
}

#darkcircles-others-inner .darkcircles-others-btn span {
  background: linear-gradient(180deg, #E5B3FF 0%, #8C68F2 100%);
}

.darkcircles-others-btn span img {
  vertical-align: -2px;
}

#darkcircles-price {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCC9AA 100%);
}

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

.darkcircles-price-table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
}

.darkcircles-price-table th,
.darkcircles-price-table td {
  text-align: center;
  vertical-align: middle;
}

.darkcircles-price-table thead th {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px;
}

.darkcircles-price-table thead tr th:nth-of-type(1) {
  background-color: var(--color-darkcircles1);
  color: #fff;
  width: 32%;
}

.darkcircles-price-table thead tr th:nth-of-type(2) {
  background-color: #FFDCC6;
  color: var(--color-darkcircles1);
  width: 34%;
}

.darkcircles-price-table thead tr th:nth-of-type(3) {
  background-color: #EEE2D1;
  color: #CEB384;
  width: 34%;
}

.darkcircles-price-table td {
  background-color: #fff;
  font-size: 16px;
  line-height: 1.1;
  padding: 15px 5px;
}

.darkcircles-price-table tr td:nth-of-type(3) {
  color: #CEB384;
}

.c-unit {
  font-size: 12px;
  font-weight: 700;
}

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

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

.darkcircles-price-tips {
  background-color: #EEEEEE;
  font-size: 12px;
  margin-top: .5em;
  padding: 10px;
}

.darkcircles-price-tips li {
  margin-left: 1em;
  text-indent: -1em;
}

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

.darkcircles-price-payment-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: .5em;
  text-align: center;
}

.darkcircles-price-payment-box {
  border: 2px solid #fff;
  padding: 5px;
}

.darkcircles-price-payment-box-inner {
  background-color: #fff;
  padding: 25px 15px;
}

.darkcircles-price-payment-box-container {
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr;
}

.grid-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.grid-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid-4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid-5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.darkcircles-price-payment-box-item {
  text-align: center;
}

.darkcircles-price-payment-box-name {
  border-bottom: 1px solid #000;
  font-size: clamp(13px,3.5vw,16px);
  line-height: 1.2;
  margin-bottom: .5em;
  padding-bottom: 5px;
}

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

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

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

#darkcircles-overview .section-inner {
  padding-bottom: 60px;
}

#darkcircles-overview .section-header {
  margin-bottom: 2.5em;
}

.darkcircles-overview-table {
  line-height: 1.2;
  width: 100%;
}

.darkcircles-overview-table th,
.darkcircles-overview-table td {
  padding: 10px;
  vertical-align: middle;
}

.darkcircles-overview-table th {
  border-bottom: 1px solid #CEB384;
  font-weight: 500;
  width: 35%;
}

.darkcircles-overview-table td {
  background-color: rgba(255,255,255,.3);
  border-bottom: 1px solid #DADADA;
  width: 65%;
}

.darkcircles-overview-note {
  color: #000;
  letter-spacing: -.05em;
  margin: .5em 0 1em;
  text-align: center;
}

.darkcircles-overview-tips {
  background-color: rgba(255,255,255,.5);
  border: 1px solid #000;
  padding: 20px 25px;
}

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

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

.darkcircles-flow-tips {
  background-color: #FFEEF1;
  margin-bottom: 20px;
  padding: 25px 22px;
}

.darkcircles-flow-nav-list {
  margin-bottom: 30px;
}

.darkcircles-flow-nav-list-item {
  background: url(../images/common/frame_flow_type2.svg) no-repeat top center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 85px;
  margin: -3px auto 0;
  padding-bottom: 18px;
  position: relative;
  text-align: center;
  width: 322px;
}

.darkcircles-flow-nav-list-item::before {
  content: "";
  background-color: #fff;
  display: block;
  height: 4px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 150px;
  z-index: 1;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(1) {
  background-image: url(../images/common/frame_flow_type1.svg);
  margin-top: 0;
  z-index: 6;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(1)::before {
  content: none;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(2) {
  z-index: 5;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(3) {
  z-index: 4;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(4) {
  z-index: 3;
}

.darkcircles-flow-nav-list .darkcircles-flow-nav-list-item:nth-of-type(5) {
  z-index: 2;
}

.darkcircles-flow-nav-list-item-step {
  color: #D799A3;
  font-family: "Average", serif;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.darkcircles-flow-nav-list-item-step::after {
  content: "";
  background-color: #DADADA;
  display: block;
  height: 3px;
  margin: auto;
  width: 43px;
}

.darkcircles-flow-nav-list-item-title {
  font-size: 16px;
  font-weight: 700;
}

.darkcircles-flow-step {
  background-color: #FFEEF1;
  margin-bottom: 20px;
  padding: 15px 5px 25px;
  position: relative;
}

#darkcircles-flow .section-content .darkcircles-flow-step:last-of-type {
  margin-bottom: 0;
}

.darkcircles-flow-step-titlearea {
  background: linear-gradient(to bottom, rgba(240,130,148,.5), rgba(243,0,0,.5));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  position: absolute;
  top: 30px;
  left: -10px;
  text-align: center;
  width: 200px;
}

.darkcircles-flow-step-num {
  font-family: "Average", serif;
  font-size: 80px;
  line-height: .9;
  position: absolute;
  top: -40px;
  text-align: center;
}

.darkcircles-flow-step-num img {
  display: block;
  margin-right: 12px;
}

.darkcircles-flow-step-title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.darkcircles-flow-step-image {
  margin-bottom: 30px;
  margin-right: -15px;
  text-align: right;
}

.darkcircles-flow-step-image img {
  height: auto;
  width: 290px;
}

.darkcircles-flow-step-text {
  font-size: 16px;
  padding: 0 2em;
}

#darkcircles-flow .cta {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#darkcircles-faq .section-header {
  margin-bottom: 3em;
}

#darkcircles-faq .section-header-box-inner {
  background-color: #F9E8EB;
}

.darkcircles-faq-list-item {
  border-bottom: 1px solid #000;
}

.darkcircles-faq-list dt {
  background: url(../images/common/icon_faq_question.svg) no-repeat top 15px left 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 50px 15px 60px;
  position: relative;
}

.darkcircles-faq-list dt::before {
  content: "";
  border-top: solid 2px var(--color-red);
  height: 0;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
}

.darkcircles-faq-list dt::after {
  content: "";
  border-right: solid 2px var(--color-red);
  height: 24px;
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
  width: 0;
}

.darkcircles-faq-list dt.is-open::after {
  content: none;
}

.darkcircles-faq-list dd {
  background: url(../images/common/icon_faq_answer.svg) no-repeat top 17px left 20px,#FFEEF1;
  display: none;
  font-size: 14px;
  padding: 15px 20px 15px 60px;
}

.darkcircles-faq-list-item ul li {
  margin-left: 1em;
  text-indent: -1em;
}

.darkcircles-faq-list-item ul li::before {
  content: "・";
}

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

#darkcircles-column .section-inner {
  padding-bottom: 40px;
}

#darkcircles-column .section-header {
  margin-bottom: 3em;
}

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

.darkcircles-column-slider-item {
  background-color: #fff;
  margin: 0 10px;
  padding: 12px;
}

.column-thumbnail {
  aspect-ratio: 16 / 10;
  background: linear-gradient(45deg,var(--color_gradient1),var(--color_gradient2));
  overflow: hidden;
  width: 100%;
}

.column-thumbnail img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.column-content {
  margin-top: 1em;
}

.column-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: .5em;
}

.column-date {
  color: #333;
  font-size: 10px;
}

.column-date::before {
  content: "\e931";
  font-family: icomoon !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  margin-right: .25em;
  text-transform: none;
  vertical-align: middle;
}

.darkcircles-column-slider-arrow {
  cursor: pointer;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

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

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


/* インクルード */

.cta {
  padding: 35px 15px;
  text-align: center;
}

.cta-title {
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.cta-title::before {
  content: url(../images/common/icon_slash_left.svg);
  margin-right: 5px;
}

.cta-title::after {
  content: url(../images/common/icon_slash_right.svg);
  margin-left: 5px;
}

.cta-button {
  background: linear-gradient(120deg, #FF3052, #76031E);
  border-radius: 100vh;
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
  color: #fff;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 392px;
}

.cta-button::before {
  content: "";
  background:
  linear-gradient(to bottom, #FF7A90, #D60032 50%, transparent 50%);
  border-radius: 100vh;
  display: block;
  height: 76.4px;
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
}

.cta-button-inner {
  background: url(../images/common/icon_triangle_right.svg) no-repeat center right 26px;
  display: block;
  padding: 21px 56px 21px 21px;
  position: relative;
  z-index: 2;
}

.cta-note {
  font-size: 14px;
}

.cta-phone {
  margin: 10px 0; /* 上下の余白 */
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* アイコン、電話番号、営業時間の間隔 */
}

.cta-phone a {
  text-decoration: none;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* アイコンと電話番号の間隔 */
}

.cta-phone-icon {
  width: 24px; /* アイコンの幅 */
  height: 24px; /* アイコンの高さ */
}

.cta-phone-time {
  font-size: 14px; 
  font-weight: 400;
  color: #666;
}

#thread-introduction {
  background: url(../images/common/bg_introduction_sp.webp) no-repeat top center / cover;
}

.thread-introduction-container {
  display: flex;
  align-items: flex-end;
  column-gap: 10px;
  margin-bottom: 10px;
}

.thread-introduction-portrait {
  line-height: 0;
  max-width: 50%;
  width: 194px;
}

.thread-introduction-info {
  flex: 1;
}

.thread-introduction-name-en {
  color: #545454;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 14px;
  line-height: 1.2;
}

.thread-introduction-name {
  border-bottom: 1px solid #CEB384;
  color: #545454;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 3px;
}

.thread-introduction-position {
  color: #CEB384;
  font-size: 14px;
  margin-bottom: 1.25em;
}

.thread-introduction-box {
  background-color: #fff;
  padding: 10px;
}

.thread-introduction-box-title {
  border-left: 7px solid #CEB384;
  color: #808080;
  font-size: 20px;
  margin-bottom: .25em;
  padding-left: 10px;
}

.thread-introduction-box-list-item {
  padding-left: 7px;
}

.thread-introduction-info .thread-introduction-box-list-item {
  font-size: clamp(12px,3.5vw,14px);
  line-height: 1.2;
  padding-left: 0;
}

#thread-introduction .cta {
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
}

#thread-access .section-header-box-inner {
  background-color: #F9E8EB;
}

.thread-access-table {
  width: 100%;
}

.thread-access-table th,
.thread-access-table td {
  padding: 10px;
  vertical-align: middle;
}

.thread-access-table th {
  border-bottom: 1px solid #CEB384;
  font-weight: 500;
}

.thread-access-table td {
  border-bottom: 1px solid #DADADA;
}

.thread-access-note {
  background-color: #F7F7F7;
  font-size: 12px;
  margin-top: .75em;
  padding: 5px 15px;
}

.thread-access-map {
  aspect-ratio: 4 / 3;
  margin-top: 1.25em;
}

#thread-access .cta {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#reservation-form .section-header-box-inner {
	background-color: #f9e8eb;
}