:root {
  --color-white: #fff;
  --color-text-main: #2c2c2c;
  --color-text-sub: #7c7c7c;
  --color-text-navy: #005782;
  --color-text-blue: #0471a1;
  --color-text-blue-light: #328fec;
  --color-text-red: #f78484;
  --color-brand-green: #45cc51;
  --color-brand-green-light: #62ce1b;
  --color-brand-yellow: #ffec1f;
  --color-surface-sky: #bcebff;
  --color-surface-sky-soft: #eaf9ff;
  --color-border-blue: #03a3ff;
  --color-shadow: rgb(0 0 0 / 25%);
  --font-heading: "Shippori Mincho B1", serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-eng: "Jost", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  display: grid;
  justify-content: center;
  color: var(--color-text-main);
  background: var(--color-white);
  font-family: var(--font-body);
  overflow-x: clip;
}

img {
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

li {
  list-style: none;
}

footer {
  width: 100%;
}

.main-container {
  width: 100%;
  max-width: 400px;
  overflow: clip;
  background: var(--color-white);
}

.optimized-image[data-v-30c75bb4] {
  object-fit: var(--v2e7b32f4);
  height: var(--v093878a4);
}

.cancel-step-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 30px 24px;
  background: var(--color-white);
}
.cancel-step-section__bg {
  position: absolute;
  inset: 0;
}
.cancel-step-section__heading,
.cancel-step-section__footer {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cancel-step-section__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.cancel-step-section__title,
.cancel-step-section__footer-lead {
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.cancel-step-section__lead {
  width: 100%;
}
.cancel-step-section__line {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.cancel-step-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  background: #4acf4f;
  flex: none;
}
.cancel-step-section__icon img {
  display: block;
  width: 33px;
  height: 32px;
}
.cancel-step-section__accent {
  color: var(--color-text-red);
  font-size: 30px;
}
.cancel-step-section__steps {
  position: relative;
  display: grid;
  gap: 11px;
  width: 100%;
}
.cancel-step-section__step-group {
  display: grid;
  gap: 8px;
}
.cancel-step-section__step {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
.cancel-step-section__step-num {
  color: transparent;
  background-image: linear-gradient(
    97deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.2;
}
.cancel-step-section__step-text {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.2;
}
.cancel-step-section__step-emphasis {
  color: transparent;
  background-image: linear-gradient(
    153deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  font-weight: 700;
  font-size: 20px;
}
.cancel-step-section__arrow {
  width: 18px;
  height: 13px;
  margin-left: 0;
  color: var(--color-border-blue);
}
.cancel-step-section__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.cancel-step-section__footer-copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.cancel-step-section__footer-copy span {
  color: var(--color-text-red);
  font-size: 30px;
}

.cause-section {
  position: relative;
}
.cause-section__bg {
  position: absolute;
  top: 0;
  left: 0;
}
.cause-section__inner {
  position: relative;
}
.cause-section__title {
  background: var(--color-text-navy);
  padding: 30px 0 20px;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.cause-section__intro {
  padding-top: 28px;
  color: var(--color-text-main);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.cause-section__body {
  margin-top: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cause-section__quote-bar {
  position: relative;
  margin-top: 10px;
  padding: 10px 20px;
  background-image: linear-gradient(
    139deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
  width: 352px;
}
.cause-section__subcopy {
  margin-top: 8px;
  color: var(--color-text-main);
  font-size: 20px;
  font-family: var(--font-heading);
  line-height: 1.2;
}
.cause-section__note {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cause-section__note-text {
  width: 352px;
  padding: 10px;
  background: var(--color-white);
  color: var(--color-text-main);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.cause-section__need {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 12px;
}
.cause-section__need-main {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  position: relative;
}
.cause-section__need-main::before {
  position: absolute;
  z-index: 0;
  content: "";
  bottom: -12px;
  left: 0;
  width: 322px;
  height: 27px;
  background: linear-gradient(90deg, var(--color-white) 0%, #f5ff00 100%);
}
.cause-section__lead {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.cause-section__need-main-label {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(
    117deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  position: relative;
}
.cause-section__panel {
  margin-top: 24px;
  padding: 10px;
  color: var(--color-text-main);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 300px;
}
.cause-section__panel::before,
.cause-section__panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 100px;
  background: var(--color-text-main);
  translate: 0 -50%;
}
.cause-section__panel::after {
  left: unset;
  right: 0;
}
.cause-section__panel-accent {
  color: transparent;
  font-weight: 700;
  background-image: linear-gradient(
    117deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.cause-section__panel-quote {
  color: transparent;
  font-weight: 700;
  background-image: linear-gradient(
    117deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  font-size: 20px;
}
.cause-section__compare {
  margin-top: 18px;
  position: relative;
  width: 400px;
  height: 448px;
}
.cause-section__compare-image {
  position: absolute;
  top: 0;
  left: 0;
}
.cause-section__compare-inner {
  position: relative;
}
.cause-section__labels {
  position: absolute;
  top: 100px;
  left: 22px;
  width: 40px;
  display: grid;
  gap: 5px;
}
.cause-section__label {
  height: 108px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  writing-mode: vertical-rl;
}
.cause-section__label--top {
  border-radius: 5px 0 0 5px;
}
.cause-section__label--bottom {
  height: 79px;
  border-radius: 5px 0 0 5px;
}
.cause-section__columns {
  position: absolute;
  top: 20px;
  left: 64px;
  display: flex;
  gap: 1px;
  align-items: flex-end;
}
.cause-section__column {
  width: 94px;
  border-radius: 5px;
  display: grid;
  gap: 2px;
  grid-template-rows: 80px 108px 108px;
}
.cause-section__column--primary {
  width: 123px;
}
.cause-section__column-head {
  min-height: 56px;
  background: transparent;
  color: var(--color-white);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.cause-section__column-head p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.cause-section__column-head span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.2;
}
.cause-section__column-head--sub {
  font-size: 18px;
  line-height: 1.2;
  padding-top: 20px;
}
.cause-section__column-block {
  color: var(--color-text-main);
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cause-section__column-block--strong {
  font-size: 17px;
  font-weight: 700;
}
.cause-section__list {
  display: grid;
  gap: 8px;
}
.cause-section__list li {
  list-style: disc;
  margin-left: 20px;
}
.cause-section__list--strong li {
  margin-left: 26px;
}

.clinic-compare-section {
  padding: 0 0 30px;
  background: var(--color-white);
}
.clinic-compare-section__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  text-align: center;
}
.clinic-compare-section__title {
  color: transparent;
  background-image: linear-gradient(
    153deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.clinic-compare-section__subcopy {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.clinic-compare-section__subcopy-emphasis {
  color: transparent;
  background-image: linear-gradient(
    132deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.clinic-compare-section__table {
  position: relative;
  width: 400px;
  height: 256px;
}
.compare-table__col-head {
  position: absolute;
  top: 60px;
  left: 190px;
  display: grid;
  grid-template-columns: repeat(2, 100px);
  color: var(--color-text-sub);
  text-align: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
}
.compare-table__inner {
  display: grid;
  grid-template-rows: 57px 46px 46px;
  grid-template-columns: 61px 117px 100px 100px;
  position: absolute;
  top: 86px;
  left: 10px;
}
.compare-table__row {
  display: contents;
}
.compare-table__row > * {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.compare-table__row > h4 {
  display: flex;
  justify-content: flex-end;
  padding-right: 4px;
}
.compare-table__row > p {
  font-family: var(--font-eng);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-sub);
}
.compare-table__row-tax,
.compare-table__row-annotation {
  position: absolute;
  top: 14px;
  left: 72px;
  font-size: 8px;
  font-weight: 700;
}
.comparet-table__emphasis {
  color: #db7674;
  font-size: 22px;
}
.compare-table__unit {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7;
  padding-top: 4px;
}
.clinic-compare-section__note {
  padding: 0 24px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.cta-button__wrapper {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 120%;
  display: grid;
  gap: 6px;
}
.cta-button__lead {
  background: linear-gradient(
    90deg,
    var(--color-brand-green) 0%,
    var(--color-brand-green-light) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-button {
  width: 332px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 60px;
  color: var(--color-white);
  background: var(--color-brand-green);
  box-shadow: 0 3px 1px rgb(0 0 0 / 60%);
  transition: background 0.3s;
}
.cta-button:visited {
  color: var(--color-white);
}
.cta-button__text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
@media (any-hover: hover) {
  .cta-button:hover {
    background: color-mix(in srgb, var(--color-brand-green) 60%, #3b7c40);
  }
}

.cta-heading {
  position: relative;
}
.cta-heading__summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.cta-heading__summary-title {
  color: var(--color-text-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.cta-heading__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 22px;
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  box-shadow: 0 0 6px var(--color-shadow);
}
.cta-heading__pill-copy {
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.cta-heading__annotation {
  font-size: 5px;
}
.cta-heading__pill-price {
  display: flex;
  align-items: flex-end;
  color: var(--color-brand-yellow);
  font-family: var(--font-serif);
  font-weight: 700;
}
.cta-heading__pill-zero {
  font-size: 34px;
}
.cta-heading__pill-yen {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
}
.cta-heading__decor {
  position: absolute;
  top: 30px;
  right: 16px;
  transform: rotate(4deg);
}
.cta-heading__price {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 900;
  height: 72px;
}
.cta-heading__price-group {
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: transparent;
  background: var(
    --2,
    linear-gradient(
      90deg,
      var(--color-text-blue) 5%,
      var(--color-text-blue-light) 59%
    )
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-heading__price-num {
  font-size: 58px;
  letter-spacing: -3.5488px;
  height: 100%;
}
.cta-heading__price-yen {
  color: transparent;
  font-size: 35px;
  line-height: 1;
  padding-bottom: 12px;
}
.cta-heading__price-tax {
  color: transparent;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  writing-mode: vertical-rl;
}
.cta-heading__price-group--month {
  padding-bottom: 12px;
}
.cta-heading__price-month-mark {
  font-size: 59px;
  letter-spacing: -3.5488px;
}
.cta-heading__price-month-unit {
  font-size: 29px;
}
.cta-heading__note {
  margin-top: 6px;
  color: var(--color-text-main);
  font-size: 10px;
  margin-bottom: 10px;
}

.clinic-cta {
  position: relative;
  background: var(--color-white);
  padding-bottom: 20px;
}
.clinic-cta__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.clinic-cta__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clinic-cta__overlay {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 60%);
}
.clinic-cta__content {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 30px 24px 20px;
}
.clinic-cta__lead {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background: var(
    --2,
    linear-gradient(
      100deg,
      var(--color-text-blue) 5%,
      var(--color-text-blue-light) 60%
    )
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.clinic-cta__text {
  margin-top: 10px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}
.clinic-cta__price {
  margin-top: 8px;
  position: relative;
  text-align: center;
}
.clinic-cta__button {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinic-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 43px;
  padding: 50px 24px;
  background: #ebffff;
}
.clinic-info__heading {
  width: 100%;
  text-align: center;
}
.clinic-info__title {
  color: var(--color-text-navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.clinic-info__title-emphasis {
  color: var(--color-text-red);
}
.clinic-info__body {
  width: 275px;
}
.clinic-info__name {
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.clinic-info__divider {
  margin-top: 4px;
  width: 269px;
  height: 1px;
}
.clinic-info__address {
  margin-top: 4px;
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.5;
}

.coupon-section {
  padding: 20px 24px;
  background: linear-gradient(
    90deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
}
.coupon-section__card {
  position: relative;
  padding: 20px 10px;
  border-radius: 20px;
  background: var(--color-surface-sky);
  box-shadow: 0 0 6px var(--color-shadow);
  text-align: center;
}
.coupon-section__tag {
  position: absolute;
  z-index: 1;
  left: -8px;
  top: -12px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-white);
}
.coupon-section__tag-text {
  color: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(
    150deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  background-clip: text;
}
.coupon-section__coupon {
  position: relative;
  width: 234px;
  height: 98px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  color: var(--color-white);
  font-family: var(--font-serif);
}
.coupon-section__coupon::before {
  width: 1px;
  height: 80%;
  content: "";
  position: absolute;
  top: 50%;
  right: 39px;
  translate: 0 -50%;
  background-image: linear-gradient(
    to bottom,
    var(--color-white) 5px,
    transparent 3px
  );
  background-size: 1px 8px;
  background-repeat: repeat-y;
}
.coupon-section__coupon-inner {
  position: absolute;
  left: 22px;
  top: 18px;
  width: 160px;
}
.coupon-section__coupon-title {
  padding: 2px 10px;
  border: 1px solid var(--color-white);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 4px;
}
.coupon-section__price {
  font-weight: 700;
  display: flex;
  align-items: flex-end;
}
.coupon-section__coupon-price-num {
  font-size: 39px;
  line-height: 0.9;
}
.coupon-section__coupon-price-yen {
  font-size: 23px;
  line-height: 1;
}
.coupon-section__coupon-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.3px;
  text-align: left;
}
.coupon-section__coupon-vertical {
  position: absolute;
  right: 12px;
  top: 13px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3rem;
  writing-mode: vertical-rl;
  rotate: 180deg;
}
.coupon-section__lead {
  margin-top: 4px;
  color: transparent;
  background: linear-gradient(
    150deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  background-clip: text;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.coupon-section__codebox {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 12px 10px;
  border: 1px solid var(--color-text-blue);
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: 0 3px 10px var(--color-shadow);
  margin-bottom: 16px;
}
.coupon-section__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 16px;
  color: var(--color-text-blue-light);
  font-weight: 900;
  line-height: 1.2;
}
.coupon-section__code-value {
  font-size: 20px;
  user-select: none;
}
.coupon-section__copy-icon {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}
.coupon-section__note {
  color: var(--color-text-main);
  font-size: 10px;
  line-height: 1.2;
}

.delivery-cta {
  padding: 0 24px 20px;
  background: var(--color-white);
  text-align: center;
}
.delivery-cta__button {
  display: flex;
  justify-content: center;
}
.delivery-cta__notes {
  margin-top: 18px;
  display: grid;
  gap: 0;
  justify-items: center;
  width: 100%;
}
.delivery-cta__note {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
}

.delivery-section {
  background: var(--color-white);
}
.delivery-section__hero {
  position: relative;
  height: 321px;
  overflow: hidden;
}
.delivery-section__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.delivery-section__hero-copy {
  position: absolute;
  top: 27px;
  left: 180px;
  z-index: 1;
  padding-right: 24px;
  color: var(--color-text-navy);
}
.delivery-section__hero-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.delivery-section__hero-text {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  display: grid;
}
.delivery-section__hero-text > li {
  line-height: 1.5;
}
.delivery-section__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 24px 30px;
}
.delivery-section__block--reverse {
  align-items: center;
}
.delivery-section__block-copy {
  color: var(--color-text-navy);
}
.delivery-section__block-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.delivery-section__block-text {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.detail-section {
  background: var(--color-white);
  position: relative;
  padding-bottom: 30px;
}
.detail-section__bg {
  position: absolute;
  top: 0;
  left: 0;
}
.detail-section__content {
  position: relative;
}
.detail-section__message {
  position: absolute;
  left: 50px;
  top: 48px;
  gap: 9px;
  color: var(--color-text-main);
  writing-mode: vertical-rl;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.detail-section__message-label {
  width: 30px;
  padding: 10px 0;
  background-image: linear-gradient(
    91deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  margin-top: 60px;
  color: var(--color-white);
}
.detail-section__message-emphasis {
  width: 22px;
  color: transparent;
  background-image: linear-gradient(
    91deg,
    var(--color-border-blue) 5%,
    rgb(61 182 252) 59%
  );
  background-clip: text;
}
.detail-section__result-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 460px;
}
.detail-section__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
  white-space: nowrap;
}
.detail-section__result-copy {
  margin-bottom: -2px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.detail-section__result-value {
  color: transparent;
  background-image: linear-gradient(
    145deg,
    var(--color-border-blue) 5%,
    rgb(61 182 252) 59%
  );
  background-clip: text;
  font-family: var(--font-eng);
  font-size: 70px;
  font-weight: 700;
  line-height: 1.2;
}
.detail-section__note {
  width: 100%;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  padding: 0 24px;
}
.detail-section__side {
  margin-top: 68px;
  padding: 0 24px;
}
.detail-section__side-inner {
  display: flex;
  padding: 30px 20px;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 0 10px 0 var(--color-shadow);
  gap: 20px;
}
.detail-section__side-title {
  padding: 20px 24px;
  border-radius: 5px;
  background-image: linear-gradient(
    128deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}
.detail-section__side-text {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.detail-section__side-list {
  display: grid;
  gap: 24px;
}
.detail-section__side-item {
  display: grid;
  gap: 20px;
}
.detail-section__side-item-title,
.detail-section__side-item-text {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.detail-section__side-item-title {
  font-weight: 700;
  position: relative;
}
.detail-section__side-item-title::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  bottom: -10px;
  left: 0;
}
.detail-section__side-item-text {
  font-weight: 500;
}

.faq-section {
  background: var(--color-white);
  padding: 24px;
}
.faq-section__title-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 10px;
  background: var(--color-text-main);
}
.faq-section__title {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.faq-section__list {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}
.faq-section__item {
  overflow: hidden;
  border: 1px solid var(--color-text-main);
  border-radius: 10px;
}
.faq-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px;
  cursor: pointer;
  list-style: none;
}
.faq-section__summary::-webkit-details-marker {
  display: none;
}
.faq-section__question {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.faq-section__icon {
  width: 17px;
  height: 13px;
  transition: rotate 0.3s;
  transform-origin: center 5px;
}
.faq-section__item[open] .faq-section__icon {
  rotate: -180deg;
}
.faq-section__answer {
  padding: 10px 20px;
  border-top: 1px solid var(--color-text-main);
}
.faq-section__answer-text {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-all;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 36px;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 24px 24px;
  background: #2891cd;
  color: var(--color-white);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
.footer-section__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-section__item {
  color: var(--color-white);
  font-size: 20px;
  line-height: 1.5;
}
.footer-section__link {
  color: var(--color-white);
  display: inline-block;
  width: 100%;
}
.footer-section__link > span {
  border-bottom: 1px solid;
  border-color: transparent;
  transition: border-color 0.2s;
}
@media (any-hover: hover) {
  .footer-section__link:hover > span {
    border-color: var(--color-white);
  }
}
.footer-section__copyright {
  margin-top: 24px;
  font-size: 16px;
  text-align: center;
}

.fv-cta {
  position: relative;
  padding-top: 24px;
  padding-bottom: 20px;
  text-align: center;
}
.fv-cta__button-wrap {
  display: flex;
  justify-content: center;
}

.fv-header {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: linear-gradient(
    150deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  height: 40px;
}
.fv-header__text {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.17px;
  line-height: 1.5;
  white-space: nowrap;
}
.fv-header__badge {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 10px;
  border-radius: 30px;
  background: var(--color-brand-yellow);
}
.fv-header__badge-text {
  display: inline-block;
  color: transparent;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.18px;
  line-height: 1;
  background: linear-gradient(
    150deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  background-clip: text;
}

.fv-main {
  padding: 0;
}
.fv-main__hero {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.fv-main__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.fv-main__lead-wrap {
  font-family: var(--font-heading);
  position: absolute;
  left: 56px;
  top: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  writing-mode: vertical-rl;
  color: #000;
}
.fv-main__lead {
  text-orientation: upright;
  letter-spacing: 0.01rem;
}
.fv-main__lead-copy {
  padding-top: 12px;
  letter-spacing: 0.01rem;
}
.fv-main__lead-copy-emphasis {
  font-size: 20px;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--color-text-blue) 0%,
    var(--color-text-blue-light) 100%
  );
  background-clip: text;
}
.fv-main__bottom-copy {
  position: absolute;
  left: 24px;
  top: 258px;
  display: grid;
  gap: 6px;
}
.fv-main__bottom-strip {
  font-size: 26px;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0 12px;
  color: var(--color-white);
  line-height: 1.5;
  background: linear-gradient(
    150deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
}
.fv-main__bottom-strip--small {
  font-size: 20px;
}
.fv-main__bottom-strip--emphasis {
  color: var(--color-brand-yellow);
}
.fv-main__badge {
  position: absolute;
  top: 190px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.fv-main__badge-text {
  position: absolute;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--color-text-blue) 0%,
    var(--color-text-blue-light) 100%
  );
  background-clip: text;
  font-weight: 700;
  text-align: center;
  top: 274px;
  right: 30px;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.fv-main__badge-text--small {
  font-size: 9px;
}

.medicine-detail {
  background: var(--color-white);
  padding: 40px 0 18px;
}
.medicine-detail__heading {
  text-align: center;
}
.medicine-detail__title {
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.medicine-detail__lead {
  margin-top: 20px;
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.medicine-detail__photo {
  margin-top: 22px;
}
.medicine-detail__contra-head {
  padding: 20px 24px;
  background: var(--color-text-navy);
  color: var(--color-white);
  text-align: center;
}
.medicine-detail__contra-head p {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.medicine-detail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 20px 24px 10px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.medicine-detail__item {
  white-space: nowrap;
}
.medicine-detail__warning {
  margin: 24px 24px 0;
  padding: 10px 22px;
  border: 1px solid var(--color-text-main);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.medicine-info {
  padding: 20px 24px 48px;
  background: #f5f5f5;
}
.medicine-info__title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-main);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.medicine-info__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}
.medicine-info__item {
  display: grid;
  gap: 20px;
}
.medicine-info__item-title {
  position: relative;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.medicine-info__item-title--split {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 0;
  white-space: nowrap;
}
.medicine-info__item-title::before {
  width: 100%;
  content: "";
  height: 1px;
  position: absolute;
  bottom: -12px;
  left: 0;
  background: #000;
}
.medicine-info__item-title-note {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
}
.medicine-info__item-text {
  line-height: 1.5;
}
.medicine-info__item-note {
  margin-top: -6px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.medicine-info__item-list {
  display: grid;
}
.medicine-info__item-list > li {
  line-height: 1.5;
}

.merit-section {
  background: var(--color-white);
  position: relative;
}
.merit-bg {
  width: 400px;
  height: 476px;
  overflow: hidden;
  > img {
    height: auto;
    margin-top: -464px;
  }
}
.merit-section__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 24px;
}
.merit-section__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  align-items: start;
  margin-bottom: 38px;
}
.merit-section__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.merit-section__feature-frame {
  position: relative;
  width: 106px;
  height: 106px;
  flex: none;
}
.merit-section__feature-ellipse {
  width: 100%;
  height: 100%;
}
.merit-section__feature-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.merit-section__feature-text {
  color: var(--color-text-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.merit-section__result-card {
  position: relative;
  padding: 38px 16px 20px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 0 14px var(--color-shadow);
  text-align: center;
}
.merit-section__badge {
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
}
.merit-section__result-badge-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.merit-section__result-label {
  color: var(--color-text-main);
  font-size: 12px;
  font-weight: 700;
}
.merit-section__result-value {
  color: transparent;
  font-family: var(--font-eng);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  background-image: linear-gradient(
    90deg,
    var(--color-border-blue) 0%,
    #3db6fc 100%
  );
  background-clip: text;
  margin-bottom: 32px;
}
.merit-section__result-copy {
  display: grid;
  justify-items: center;
}
.merit-section__result-title {
  color: transparent;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  background-image: linear-gradient(
    145deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.merit-section__result-lead {
  color: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  background-image: linear-gradient(
    153deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.merit-section__result-note {
  margin-top: 12px;
  color: var(--color-text-main);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.price-table {
  background: var(--color-white);
  padding-bottom: 30px;
}
.price-table__intro {
  padding: 20px;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 100%) 0%,
      rgb(255 255 255 / 0%) 100%
    ),
    linear-gradient(
      90deg,
      var(--color-surface-sky) 0%,
      var(--color-surface-sky) 100%
    );
  display: grid;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  gap: 6px;
  margin-bottom: 26px;
}
.price-table__lead-emphasis {
  color: transparent;
  background: linear-gradient(
    128deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.price-table__table {
  width: 360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 132px 74px 81px 74px;
  grid-template-rows: repeat(4, 62px);
  margin-bottom: 10px;
}
.price-table__cell {
  box-sizing: border-box;
  border-right: 1px solid var(--color-border-blue);
  border-bottom: 1px solid var(--color-border-blue);
}
.price-table__cell--spacer {
  border: none;
  background: transparent;
}
.price-table__cell--head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: #efefef;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border-top: 1px solid var(--color-border-blue);
}
.price-table__cell--head:nth-child(2) {
  border-left: 1px solid var(--color-border-blue);
}
.price-table__cell--label:nth-child(5) {
  border-top: 1px solid var(--color-border-blue);
}
.price-table__cell--head-accent {
  color: var(--color-text-red);
}
.price-table__cell--label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--color-surface-sky-soft);
  color: var(--color-text-navy);
  font-family: var(--font-body);
  text-align: center;
  border-left: 1px solid var(--color-border-blue);
}
.price-table__label-main {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.price-table__label-sub {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.price-table__cell--value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  background: var(--color-white);
  color: var(--color-text-sub);
}
.price-table__value-num {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-eng);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.price-table__value-unit {
  display: flex;
  align-items: flex-end;
  margin-left: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.price-table__note {
  padding: 0 24px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.price-table__cell--value-accent {
  color: var(--color-text-red);
}

.problem-section {
  background: var(--color-white);
}
.problem-section__top {
  position: relative;
  overflow: hidden;
  background: #0078ac;
}
.problem-section__top-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.problem-section__top-overlay {
  position: absolute;
  inset: 0;
  background: #0078ac;
}
.problem-section__top-image {
  position: absolute;
  left: -138%;
  top: 0;
  width: 371%;
  height: 107%;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.problem-section__heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px 20px;
}
.problem-section__title {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.problem-section__cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 20px;
  padding: 20px 24px;
}
.problem-section__card {
  width: 164px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-radius: 9px;
  background: var(--color-white);
  box-shadow: 0 0 7px var(--color-shadow);
}
.problem-section__card-image {
  height: 80px;
  max-width: none;
  object-fit: contain;
}
.problem-section__card-text {
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
.problem-section__bottom {
  position: relative;
  height: 557px;
  overflow: hidden;
}
.problem-section__bottom-background {
  position: absolute;
  top: 0;
  left: 0;
}
.problem-section__bottom-heading {
  position: relative;
  display: flex;
  justify-content: center;
}
.problem-section__bottom-title {
  color: var(--color-text-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-top: 70px;
}

.reason-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px 30px;
  background: #f7f7f7;
}
.reason-section__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}
.reason-section__title {
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.reason-section__list {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 352px;
}
.reason-section__card {
  border: 3px solid var(--color-text-navy);
  border-radius: 11px;
  background: var(--color-white);
}
.reason-section__card-inner {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px 10px 16px;
}
.reason-section__card-title {
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.reason-section__divider {
  width: 176px;
  height: 2px;
}
.reason-section__card-text {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.recommend-reason-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;
  background: #ffefd8;
  overflow: hidden;
  z-index: 0;
}
.recommend-reason-section__actions::before {
  content: "";
  position: absolute;
  bottom: -162px;
  left: 50%;
  width: 483px;
  height: 483px;
  border-radius: 50%;
  background: #e2f6ff;
  translate: -50% 0;
  z-index: -1;
}
.recommend-reason-section__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 108px;
  padding: 30px 24px 20px;
}
.recommend-reason-section__title {
  color: var(--color-text-main);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.recommend-reason-section__features {
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
  padding: 0 24px;
}
.recommend-reason-section__feature {
  position: relative;
  width: 152px;
  flex: none;
}
.recommend-reason-section__feature-image {
  width: 152px;
  height: 152px;
}
.recommend-reason-section__feature-image--second {
  width: 154px;
  height: 152px;
}
.recommend-reason-section__feature-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.recommend-reason-section__feature-note {
  position: absolute;
  top: 3px;
  left: 13px;
  color: var(--color-text-main);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.recommend-reason-section__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #d9de58;
}
.recommend-reason-section__label p {
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.recommend-reason-section__copy {
  width: 352px;
  margin-top: 24px;
  padding: 15px 0;
  color: var(--color-text-main);
  background: var(--color-white);
  border-radius: 7px;
  box-shadow: 0 0 14px var(--color-shadow);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
}
.recommend-reason-section__copy-emphasis {
  color: transparent;
  font-size: 20px;
  font-weight: 700;
  background-clip: text;
  background-image: linear-gradient(
    108deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
}
.recommend-reason-section__actions {
  margin-top: 40px;
}
.recommend-reason-section__action-title {
  color: transparent;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background-clip: text;
  background-image: linear-gradient(
    108deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
}
.recommend-reason-section__action-list {
  margin-top: 36px;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  display: grid;
  gap: 8px;
}

.recommend-section {
  position: relative;
  padding: 52px 24px 20px;
}
.recommend-section__bg {
  position: absolute;
  top: 0;
  left: 0;
}
.recommend-section__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.recommend-section__heading-line,
.recommend-section__heading-main {
  background: linear-gradient(
    157deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  width: 100%;
  color: transparent;
  background-clip: text;
}
.recommend-section__heading-main {
  font-size: 20px;
}
.recommend-section__content {
  position: relative;
  padding: 20px 0;
}
.recommend-section__media {
  margin-top: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recommend-section__badge {
  position: absolute;
  bottom: -40px;
  right: 10px;
}
.recommend-section__title {
  margin-top: 8px;
  color: var(--color-text-navy);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.recommend-section__text {
  margin-top: 12px;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.schedule1-section {
  padding: 30px 24px;
  background: var(--color-white);
}
.schedule1-section__heading {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.schedule1-section__title {
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.schedule1-section__lead {
  color: var(--color-text-navy);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.schedule1-section__lead-link {
  text-decoration: underline;
}
.schedule1-section__plans {
  margin-top: 18px;
  position: relative;
}
.schedule1-section__plans-bg {
  position: absolute;
  top: 0;
  left: 0;
}
.schedule1-section__table-wrapper {
  display: grid;
  gap: 2px;
}
.schedule1-section__table {
  position: relative;
  display: grid;
  grid-template:
    "title title title" 40px
    "first second third" 218px
    "firstDelivery secondDelivery thirdDelivery" 40px
    / 116px 116px 114px;
}
.schedule1-section__table > * {
  display: grid;
  justify-content: center;
  align-items: center;
}
.schedule1-section__table h4 {
  grid-area: title;
  color: var(--color-white);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}
.schedule1-section__table p {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  align-items: start;
}
.schedule1-section__table > p:nth-of-type(1) {
  padding-top: 13px;
  grid-area: first;
}
.schedule1-section__table > p:nth-of-type(2) {
  padding-top: 13px;
  grid-area: second;
}
.schedule1-section__table > p:nth-of-type(3) {
  padding-top: 13px;
  grid-area: third;
}
.schedule1-section__table > p:nth-of-type(4) {
  grid-area: firstDelivery;
}
.schedule1-section__table > p:nth-of-type(5) {
  grid-area: secondDelivery;
}
.schedule1-section__table > p:nth-of-type(6) {
  grid-area: thirdDelivery;
}
.schedule1-section__table-minus {
  margin-left: -8px;
}
.schedule1-section__table-plus {
  margin-left: 4px;
}

.schedule2-section {
  padding: 0 20px 18px;
  background: var(--color-white);
}
.schedule2-section__heading {
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--color-text-navy);
}
.schedule2-section__eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
.schedule2-section__title {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.schedule2-section__cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.schedule2-section__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.schedule2-section__card > h4 {
  position: relative;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.schedule2-section__card > h4 > span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.schedule2-section__pack-wrap {
  margin-top: 14px;
}
.schedule2-section__pack {
  width: 41px;
  height: 57px;
  transform: rotate(11deg);
}
.schedule2-section__summary {
  margin-top: 24px;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: pre-line;
}
.schedule2-section__summary-accent {
  color: transparent;
  font-weight: 700;
  background-image: linear-gradient(
    113deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.schedule2-section__footer {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 18px;
}
.schedule2-section__footer-chip {
  padding: 3px 10px;
  border: 1px solid var(--color-text-blue);
  color: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  background-image: linear-gradient(
    129deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  background-clip: text;
}
.schedule2-section__note {
  margin-top: 10px;
  color: #535353;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
}

.step-section {
  padding: 20px 24px 40px;
  background: linear-gradient(
    94deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
}
.step-section__title {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.step-section__card {
  margin-top: 24px;
  padding: 24px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 0 15px var(--color-shadow);
  display: grid;
  gap: 16px;
}
.step-section__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.step-section__row::before {
  width: 1px;
  height: calc(100% - 52px);
  content: "";
  position: absolute;
  top: 52px;
  left: 20px;
  background: var(--color-text-navy);
}
.step-section__index {
  position: relative;
  width: 40px;
  height: 40px;
}
.step-section__index::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-text-navy);
  top: 0;
  left: 0;
  position: absolute;
}
.step-section__number {
  position: absolute;
  top: 7px;
  left: 20px;
  width: 16px;
  height: 25px;
  transform: translateX(-50%);
  color: var(--color-text-navy);
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}
.step-section__content {
  display: grid;
  justify-items: center;
  gap: 16px;
  flex: 1;
  padding: 13px 0;
}
.step-section__text {
  color: #535353;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.step-section__note {
  margin-top: 10px;
  color: #535353;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.5;
}

.visual-section {
  position: relative;
  width: 400px;
  height: 410px;
}
.visual-section__bg {
  position: absolute;
  top: 0;
  left: 0;
}
.visual-section__lead {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  writing-mode: vertical-rl;
  position: absolute;
  top: 48px;
  left: 50px;
  line-height: 1.6;
}
.visual-section__label {
  background-image: linear-gradient(
    90deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 59%
  );
  padding: 10px 0;
}

.clipboard-message {
  padding: 10px 16px;
  border-radius: 999px;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  position: fixed;
  left: 50%;
  background: linear-gradient(
    90deg,
    var(--color-text-blue) 5%,
    var(--color-text-blue-light) 60%
  );
  box-shadow: 0 0 6px var(--color-shadow);
  z-index: 10;
  bottom: 60px;
  translate: -50% 0;
  color: var(--color-white);
  visibility: hidden;
}
.clipboard-message.is-visible {
  visibility: visible;
}