:root {
  --pc-viewport: 1280;
  --sp-viewport: 375;
  --pc-pad-inline: 70;
  --sp-pad-inline: 16;
  --breakpoint: 768;
  --text-color-base: #573D35;
  --text-color-orange: #DB6F45;
  --bg-pink: #F6E6E5;
  --orange: #DB6F45;
  --white: #FFFFFF;
  --brown: #573D35;
  --ff-quicksand: "Quicksand", sans-serif;
  --ff-ryo: "ryo-gothic-plusn", sans-serif;
}

@keyframes logo-slide-loop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes scale-in {
  from {
    transform: translateX(var(--tx)) scale(0);
    opacity: 0;
  }

  to {
    transform: translateX(var(--tx)) scale(1);
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(calc(var(--base) * 3));
}

html {
  scroll-padding-top: 66px;
  overflow-x: hidden;
  scroll-behavior: smooth;

}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 158px;
  }
}

body {
  --base: calc(10 / var(--sp-viewport) * 100vw);

  overflow-x: hidden;
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  color: var(--text-color-base);
  line-height: 1.6;
  background: #FBF8F5;


  @media (min-width: 768px) {
    --base: min(10px, calc(10 / var(--pc-viewport) * 100vw));
  }

  /* ===== font-sizeスケール ===== */
  --fs-10: calc(var(--base) * 1);
  --fs-12: calc(var(--base) * 1.2);
  --fs-13: calc(var(--base) * 1.3);
  --fs-14: calc(var(--base) * 1.4);
  --fs-15: calc(var(--base) * 1.5);
  --fs-16: calc(var(--base) * 1.6);
  --fs-18: calc(var(--base) * 1.8);
  --fs-20: calc(var(--base) * 2);
  --fs-22: calc(var(--base) * 2.2);
  --fs-24: calc(var(--base) * 2.4);
  --fs-26: calc(var(--base) * 2.6);
  --fs-28: calc(var(--base) * 2.8);
  --fs-30: calc(var(--base) * 3);
  --fs-32: calc(var(--base) * 3.2);
  --fs-34: calc(var(--base) * 3.4);
  --fs-36: calc(var(--base) * 3.6);
  --fs-38: calc(var(--base) * 3.8);
  --fs-40: calc(var(--base) * 4);
  --fs-48: calc(var(--base) * 4.8);
  --fs-52: calc(var(--base) * 5.2);
  --fs-56: calc(var(--base) * 5.6);
  --fs-62: calc(var(--base) * 6.2);
  --fs-64: calc(var(--base) * 6.4);
  --fs-96: calc(var(--base) * 9.6);

  /* ===== spacingスケール(margin/padding共用) ===== */
  --sp-2: calc(var(--base) * 0.2);
  --sp-4: calc(var(--base) * 0.4);
  --sp-5: calc(var(--base) * 0.5);
  --sp-6: calc(var(--base) * 0.6);
  --sp-8: calc(var(--base) * 0.8);
  --sp-10: calc(var(--base) * 1);
  --sp-12: calc(var(--base) * 1.2);
  --sp-14: calc(var(--base) * 1.4);
  --sp-15: calc(var(--base) * 1.5);
  --sp-16: calc(var(--base) * 1.6);
  --sp-17: calc(var(--base) * 1.7);
  --sp-20: calc(var(--base) * 2);
  --sp-24: calc(var(--base) * 2.4);
  --sp-25: calc(var(--base) * 2.5);
  --sp-26: calc(var(--base) * 2.6);
  --sp-30: calc(var(--base) * 3);
  --sp-32: calc(var(--base) * 3.2);
  --sp-35: calc(var(--base) * 3.5);
  --sp-40: calc(var(--base) * 4);
  --sp-45: calc(var(--base) * 4.5);
  --sp-48: calc(var(--base) * 4.8);
  --sp-50: calc(var(--base) * 5);
  --sp-55: calc(var(--base) * 5.5);
  --sp-60: calc(var(--base) * 6);
  --sp-65: calc(var(--base) * 6.5);
  --sp-70: calc(var(--base) * 7);
  --sp-80: calc(var(--base) * 8);
  --sp-90: calc(var(--base) * 9);
  --sp-96: calc(var(--base) * 9.6);
  --sp-100: calc(var(--base) * 10);
  --sp-150: calc(var(--base) * 15);
  --sp-200: calc(var(--base) * 20);
}


/* =============================
layout
============================== */
.l-inner {
  width: 100%;
  max-width: calc(var(--base) * 128);
  padding-inline: calc(var(--base) * 1.6);

  @media (min-width: 768px) {
    padding-inline: calc(var(--base) * 7);
    margin: auto;
  }
}

.l-inner-sm {
  width: 100%;
  max-width: calc(var(--base) * 114);
  padding-inline: calc(var(--base) * 1.6);

  @media (min-width: 768px) {
    padding-inline: calc(var(--base) * 7);
    margin: auto;
  }
}

/* =============================
utility
============================== */
.u-block {
  display: block !important;
}

.u-center {
  text-align: center !important;
}

.u-sp {
  @media (max-width: 767px) {
    display: block;
  }

  @media (min-width: 768px) {
    display: none;
  }
}

.u-pc {
  @media (max-width: 767px) {
    display: none !important;
  }

  @media (min-width: 768px) {
    display: block !important;
  }
}

/* =============================
module
============================== */
.m-btn01 {
  display: block;
  position: relative;
  width: 100%;
  background: #DB6F45 url("/medical/lp/assets/images/btn01-bg.webp");
  color: #fff;
  border-radius: calc(var(--base) * 14);
  padding: var(--sp-10) var(--sp-20) var(--sp-10) var(--sp-40);
  transition: all .3s;
  border: 1px solid var(--orange);
  font-size: var(--fs-16);

  @media (min-width: 768px) {
    max-width: calc(var(--base) * 45.6);
    font-size: var(--fs-22);
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: calc(var(--base) * 2);
    background: url("/medical/lp/assets/images/ico-arrow01.svg")no-repeat;
    background-size: contain;
    width: calc(var(--base) * 3);
    aspect-ratio: 1/1;
    transition: all .3s;
  }

  @media (hover: hover) {
    &:hover {
      background: url("/medical/lp/assets/images/btn01-bg-hover.webp");
      color: var(--text-color-orange);

      &::after {
        background: url("/medical/lp/assets/images/ico-arrow01-hover.svg")no-repeat;
        background-size: contain;
      }
    }
  }

}

.m-title01 {
  position: relative;
  color: #DB6F45;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  width: fit-content;
  margin: auto;
  margin-bottom: var(--sp-30);

  @media (min-width: 768px) {
    text-align: center;
    font-size: var(--fs-34);
    line-height: 1.8;
    letter-spacing: 1.7px;
    margin-bottom: var(--sp-40);
  }

  &::before {
    content: "";
    position: absolute;
    top: calc(var(--base) * -3.5);
    left: calc(var(--base) * -5.5);
    width: calc(var(--base) * 10.5);
    aspect-ratio: 1/1;
    background: url("/medical/lp/assets/images/h-bg01.webp")no-repeat;
    background-size: contain;

    @media (min-width: 768px) {
      top: calc(var(--base) * -2);
    }
  }
}

.m-title01.m-title01--rl {
  @media (min-width: 768px) {
    margin: 0;
    margin-left: var(--sp-60);
    writing-mode: vertical-rl;

    span {
      text-combine-upright: all;
    }

    &::before {
      top: calc(var(--base) * -4);
      left: calc(var(--base) * -3);
    }
  }


}

.m-title02 {
  position: relative;
  color: #DB6F45;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.8px;
  margin-bottom: var(--sp-30);

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
    margin-bottom: var(--sp-40);
  }

  &::before {
    content: "";
    position: relative;
    top: calc(var(--base) * -.5);
    display: inline-block;
    width: calc(var(--base) * 0.8);
    aspect-ratio: 1/1;
    background: var(--orange);
    border-radius: 50%;
    margin-right: var(--sp-8);

    @media (min-width: 768px) {
      top: calc(var(--base) * -1.5);
    }
  }
}

.m-cta {
  display: block;
  min-height: calc(var(--base) * 56);
  padding-top: calc(var(--base) * 22.8);
  margin: var(--sp-80) auto;
  overflow: hidden;
  cursor: pointer;

  @media (min-width: 768px) {
    padding-top: calc(var(--base) * 7.2);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/medical/lp/assets/images/cta-bg01-sp.webp") no-repeat;
    background-position: center top;
    background-size: cover;
    transition: transform 0.3s ease;
    z-index: -1;

    @media (min-width: 768px) {
      background: url("/medical/lp/assets/images/cta-bg01-pc.webp")no-repeat;
      background-position: center top;
      background-size: cover;
    }
  }

  @media (hover: hover) {
    &:hover {
      &::before {
        transform: scale(1.05);

      }

      .m-cta__box {
        background: var(--orange);
      }

      .m-cta__text01 {
        color: #fff;
      }

      .m-cta__text02 {
        color: #fff;
      }

      .m-btn01 {
        background: url("/medical/lp/assets/images/btn01-bg-hover.webp");
        color: var(--text-color-orange);

        &::after {
          background: url("/medical/lp/assets/images/ico-arrow01-hover.svg")no-repeat;
          background-size: contain;
        }
      }
    }
  }
}


.m-cta__box {
  display: flex;
  width: calc(var(--base) * 34.3);
  padding: calc(var(--base) * 3) calc(var(--base) * 2);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: calc(var(--base) * 2);
  background: #FFF;
  margin: auto;

  @media (min-width: 768px) {
    width: calc(var(--base) * 60.9);
    height: calc(var(--base) * 41.6);
    padding: calc(var(--base) * 5) calc(var(--base) * 6.5);
    margin: 0;
  }
}

.m-cta__text01 {
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.8px;
  margin-bottom: var(--sp-10);
  transition: all .3s;

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
  }
}

.m-cta__text02 {
  color: #DB6F45;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  margin-bottom: var(--sp-20);
  transition: all .3s;

  @media (min-width: 768px) {
    font-size: var(--fs-32);
    letter-spacing: 1.6px;
  }
}

/* =============================
header
============================== */
.l-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: calc(var(--base) * 128);
  z-index: 100;
  padding-top: var(--sp-16);

  @media (min-width: 768px) {
    padding-inline: calc(var(--base) * 7);
    padding-top: var(--sp-20);
  }

  &::after {
    display: none;
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: var(--bg-pink);
    transition: opacity .2s;

    @media (min-width: 768px) {
      display: none;
    }
  }

  &.is-active {
    &::after {
      display: block;
      opacity: 1;
    }

    .l-header__nav {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: calc(var(--base) * 6) var(--sp-24) var(--sp-40);
      overflow-y: auto;

      @media (min-width: 768px) {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background-color: transparent;
        overflow: visible;
      }
    }
  }

}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--base) * 34.3);
  height: calc(var(--base) * 5);
  margin-inline: auto;
  padding-inline: var(--sp-20);
  background: #fff;
  border-radius: calc(var(--base) * 4);
  position: relative;
  z-index: 1;


  @media (min-width: 768px) {
    width: 100%;
    height: calc(var(--base) * 7.8);
    padding: var(--sp-16);
  }
}

.l-header__logo-wrap {
  display: flex;
  align-items: center;
}

.l-header__logo {
  display: block;
  width: calc(var(--base) * 6.9);
  height: calc(var(--base) * 2.4);
  aspect-ratio: 23/8;
  flex: 1;

  @media (min-width: 768px) {
    width: calc(var(--base) * 10.9);
    height: calc(var(--base) * 3.8);
    aspect-ratio: 109/38;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

h1 {
  color: #2778BE;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin-left: var(--sp-10);

  @media (min-width: 768px) {
    font-weight: 500;
    line-height: 1.8;
    margin-left: var(--sp-20);
  }
}

.l-header__nav-wrap {
  @media (max-width: 767px) {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  @media (min-width: 768px) {
    display: flex;
    align-items: center;
    gap: var(--sp-20);
  }
}


.l-header__nav {
  display: none;
  width: 100%;

  @media (min-width: 768px) {
    display: block;
    position: static;
    width: auto;
  }
}


.l-header__nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-30);

  @media (min-width: 768px) {
    display: none;
  }
}

.l-header__nav-logo {
  display: block;
  flex-shrink: 0;
}

.l-header__nav-logo-image {
  display: block;
  width: calc(var(--base) * 16);
  height: auto;
}

.l-header__nav-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: calc(var(--base) * 2.2);
  height: calc(var(--base) * 2.2);
  flex-shrink: 0;
}

.l-header__nav-close-line {
  display: block;
  position: absolute;
  width: calc(var(--base) * 2.2);
  height: calc(var(--base) * 0.2);
  background-color: var(--orange);
}

.l-header__nav-close-line:first-child {
  transform: rotate(45deg);
}

.l-header__nav-close-line:last-child {
  transform: rotate(-45deg);
}

.l-header__list {
  display: flex;
  flex-direction: column;

  @media (min-width: 768px) {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-20);
  }
}

.l-header__item {
  list-style: none;
  border-bottom: 1px dashed var(--orange);

  @media (min-width: 768px) {
    padding-bottom: 0;
    border-bottom: none;
    white-space: nowrap;
  }

  a {
    display: block;
    color: var(--text-color-orange);
    font-size: var(--fs-16);
    font-weight: 700;
    text-decoration: none;
    padding-block: var(--sp-24);

    @media (min-width: 768px) {
      color: var(--text, #573D35);
      font-size: var(--fs-14);
      font-weight: 500;
      letter-spacing: 0.56px;
      transition: color .2s;
    }

    @media (hover: hover) {
      &:hover {
        color: var(--text-color-orange);
      }
    }
  }
}



.l-header__sns {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--sp-40);

  @media (min-width: 768px) {
    display: none;
  }
}

.l-header__sns-icon {
  display: block;
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
}

.l-header__cta {
  display: none;

  @media (min-width: 768px) {
    display: block;
    width: calc(var(--base) * 33.7);
    padding: calc(var(--base) * 0.8) calc(var(--base) * 1) calc(var(--base) * 0.8) calc(var(--base) * 2);
  }

  &::after {
    right: calc(var(--base) * 1);
  }


  &.m-btn01 {
    @media (min-width: 768px) {
      font-size: var(--fs-16);
    }

  }
}

.l-header__cta-text {
  color: var(--white);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.l-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--base) * 0.8);
  width: calc(var(--base) * 2.2);
  height: calc(var(--base) * 2.2);
  flex-shrink: 0;

  @media (min-width: 768px) {
    display: none;
  }
}

.l-header__toggle-line {
  display: block;
  width: 100%;
  height: calc(var(--base) * 0.2);
  background-color: var(--orange);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.l-header__toggle.is-active .l-header__toggle-line:nth-child(1) {
  transform: translateY(calc(var(--base) * 1)) rotate(45deg);
}

.l-header__toggle.is-active .l-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.l-header__toggle.is-active .l-header__toggle-line:nth-child(3) {
  transform: translateY(calc(var(--base) * -1)) rotate(-45deg);
}

/* =============================
CTA
============================== */
.fixed-cta {
  position: fixed;
  width: 100%;
  bottom: var(--sp-10);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  @media (min-width: 768px) {
    display: none;
  }

  .m-btn01 {
    padding-left: var(--sp-20);
  }
}

.fixed-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* =============================
mv
============================== */
.mv {
  position: relative;
  background: url("/medical/lp/assets/images/mv-bg-sp.webp") no-repeat;
  background-size: cover;
  min-height: calc(var(--base) * 70);

  @media (min-width: 768px) {
    background: url("/medical/lp/assets/images/mv-bg-pc.webp") no-repeat;
    background-size: cover;
    min-height: calc(var(--base) * 81.7);
  }

  .m-btn01 {
    @media (min-width: 768px) {
      padding-left: var(--sp-20);
    }
  }
}

.mv__text-wrap {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--base) * 27.6);
  padding-inline: calc(var(--base) * 1.6);
  margin-bottom: calc(var(--base) * 1.7);

  @media (min-width: 768px) {
    max-width: calc(var(--base) * 128);
    padding-top: calc(var(--base) * 32.6);
    padding-inline: calc(var(--base) * 7);
    margin: auto;
  }
}

.mv__text {
  display: inline-block;
  position: relative;
  font-family: var(--ff-ryo);
  font-size: var(--fs-14);
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.7px;
  margin-bottom: calc(var(--base) * .8);
  margin-left: .8rem;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
    letter-spacing: 0.8px;
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
    background: var(--brown);
    width: calc(var(--base) * .4);
    aspect-ratio: 1/1;
    border-radius: calc(var(--base) * 4);
    top: calc(var(--base) * 1);
    left: calc(var(--base) * -1);

    @media (min-width: 768px) {
      width: calc(var(--base) * .6);
      top: calc(var(--base) * 1.2);
      left: calc(var(--base) * -1.2);
    }
  }

  &::after {
    left: auto;
    right: calc(var(--base) *-1)
  }
}

.mv__catchcopy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  gap: var(--sp-10);
  margin-bottom: calc(var(--base) * .985);

  @media (min-width: 768px) {
    margin-bottom: var(--sp-20);
    gap: var(--sp-15);
  }

  p {
    display: flex;
    padding: calc(var(--base) * 1.2) 0 calc(var(--base) * 1.2) calc(var(--base) * 1);
    justify-content: center;
    align-items: center;
    gap: calc(var(--base) * 1);
    color: #DB6F45;
    font-family: var(--ff-ryo);
    font-size: var(--fs-26);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.3px;
    background: #FFF;

    @media (min-width: 768px) {
      display: inline-flex;
      padding: calc(var(--base) * 1.6) 0 calc(var(--base) * 1.6) calc(var(--base) * 2);
      font-size: var(--fs-34);
      letter-spacing: 1.7px;
    }
  }

}

.mv__badge {
  display: flex;
  gap: calc(var(--base) * .8);

  @media (min-width: 768px) {
    max-width: calc(var(--base) * 46.2);
    justify-content: space-between;
    margin-bottom: var(--sp-30);
  }

  img {
    width: 48%;
  }
}

.mv__cta {
  display: none;

  @media (min-width: 768px) {
    display: block;
    font-size: var(--fs-22);
    font-style: normal;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.88px;
  }
}

.mv__result {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  width: calc(var(--base) * 35.9);
  padding: calc(var(--base) * 2) calc(var(--base) * 3);
  border-radius: calc(var(--base) * 3) 0 0 calc(var(--base) * 3);
  border-top: 3px solid #ECC9BB;
  border-bottom: 3px solid #ECC9BB;
  border-left: 3px solid #ECC9BB;
  background: #FFF;
  opacity: 1;
  transition: all .3s;
  transform: scale(1);

  @media (min-width: 768px) {
    display: inline-flex;
    width: calc(var(--base) * 52.4);
    padding: calc(var(--base) * 3) calc(var(--base) * 3) calc(var(--base) * 3) calc(var(--base) * 4);
    justify-content: normal;
    gap: calc(var(--base) * .5);
    top: calc(var(--base) * 58.8);
    z-index: 2;
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--base) * 3);
    transform: translate(0, -50%);
    background: url("/medical/lp/assets/images/ico-blank.svg")no-repeat;
    background-size: contain;
    width: calc(var(--base) * 4.2);
    aspect-ratio: 1/1;
  }

  @media (hover: hover) {
    &:hover {
      transform: scale(1.1);
    }
  }
}

.mv__result-head {
  color: var(--orange, #DB6F45);
  font-size: var(--sp-14);
  line-height: 1;
  letter-spacing: 0.7px;
  margin-bottom: var(--sp-4);

  @media (min-width: 768px) {
    font-size: var(--sp-20);
    letter-spacing: 1px;
  }
}

.mv__result-text {
  width: calc(var(--base) * 22);
  color: #573D35;
  font-kerning: none;
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.6px;

  @media (min-width: 768px) {
    font-size: var(--fs-14);
    width: calc(var(--base) * 36);
  }
}


.mv__ph01 {
  position: absolute;
  top: calc(var(--base) * 17.5);
  left: calc(var(--base) * 12.1);
  width: calc(var(--base) * 31.6);
  animation: scale-in 0.8s ease forwards;
  animation-delay: 0s;
  animation-fill-mode: both;

  @media (min-width: 768px) {
    top: calc(var(--base) * 18.3);
    left: 50%;
    width: calc(var(--base) * 61.5);
    --tx: -56%;
  }
}

.mv__ph02 {
  position: absolute;
  top: calc(var(--base) * 7.2);
  right: calc(var(--base) * 21.6);
  width: calc(var(--base) * 21.1);
  animation: scale-in 0.8s ease forwards;
  animation-delay: 0.15s;
  animation-fill-mode: both;

  @media (min-width: 768px) {
    top: calc(var(--base) * 4);
    right: auto;
    left: 50%;
    width: calc(var(--base) * 38.5);
    --tx: -190%;
  }
}

.mv__ph03 {
  position: absolute;
  top: calc(var(--base) * -2);
  left: calc(var(--base) * 15.6);
  width: calc(var(--base) * 22.9);
  animation: scale-in 0.8s ease forwards;
  animation-delay: 0.3s;
  animation-fill-mode: both;

  @media (min-width: 768px) {
    top: calc(var(--base) * -5);
    left: 50%;
    width: calc(var(--base) * 47.8);
    --tx: 50%;
  }
}

.mv__ph04 {
  display: none;

  @media (min-width: 768px) {
    display: block;
    position: absolute;
    top: calc(var(--base) * 35.8);
    left: 50%;
    width: calc(var(--base) * 37.9);
    --tx: 83%;

    animation: scale-in 0.8s ease forwards;
    animation-delay: 0.45s;
    animation-fill-mode: both;
  }
}

.anxiety {
  position: relative;
  margin-top: calc(var(--base) * -6.2);
  z-index: 1;
  background: url("/medical/lp/assets/images/anxiety-bg01-sp.webp")no-repeat;
  background-size: contain;
  background-position: center top;
  padding-top: calc(var(--base) * 6.28);
  height: calc(var(--base) * 87);

  @media (min-width: 768px) {
    margin-top: calc(var(--base) * -14.5);
    padding-top: calc(var(--base) * 17.6);
    background: url("/medical/lp/assets/images/anxiety-bg01-pc.webp")no-repeat;
    background-size: auto;
    background-position: center top;
    height: calc(var(--base) * 77.2);
  }
}

.anxiety__inner {
  background: #FBF8F5;
  height: 100%;
}

.anxiety__head {
  position: relative;
  color: #DB6F45;
  font-kerning: none;
  font-feature-settings: 'hwid' on, 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  margin: calc(var(--base) * -.1) auto var(--sp-30) auto;
  width: fit-content;

  @media (min-width: 768px) {
    font-size: var(--fs-34);
    letter-spacing: 1.7px;
  }

  &::before {
    content: "";
    background: url("/medical/lp/assets/images/anxiety-img01.webp")no-repeat;
    background-size: contain;
    position: absolute;
    top: calc(var(--base) * -3);
    right: calc(var(--base) * 4);
    width: calc(var(--base) * 3.0353);
    aspect-ratio: 26/29;

    @media (min-width: 768px) {
      top: calc(var(--base) * -4.5);
      right: calc(var(--base) * 26);
      width: calc(var(--base) * 4.2138);
      height: calc(var(--base) * 4.7);
    }
  }
}

.anxiety__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--base) * -17);
    transform: translate(-50%, 0);
    background: url("/medical/lp/assets/images/anxiety-img02.webp")no-repeat;
    background-size: contain;
    width: calc(var(--base) * 14.2421);
    height: calc(var(--base) * 20.5457);

    @media (min-width: 768px) {
      bottom: calc(var(--base) * -36);
      width: calc(var(--base) * 23.603);
      height: calc(var(--base) * 40.862);
    }
  }
}

.anxiety__list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--sp-10);
  background: url("/medical/lp/assets/images/anxiety-baloon01.webp")no-repeat;
  background-size: contain;
  width: calc(var(--base) * 28.5);
  height: calc(var(--base) * 17.2629);
  margin-left: auto;

  @media (min-width: 768px) {
    margin: auto;
    width: calc(var(--base) * 35);
    height: calc(var(--base) * 21.2);
  }
}

.anxiety__list-item-head {
  position: relative;
  color: #573D35;
  text-align: center;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.32px;
  padding-bottom: var(--sp-10);

  @media (min-width: 768px) {
    font-size: var(--fs-18);
    letter-spacing: 0.36px;
  }

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    width: calc(var(--base) * 4);
    height: calc(var(--base) * .1);
    border-top: 1px dashed var(--brown);
  }
}

.anxiety__list-item-text {
  color: #573D35;
  text-align: center;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.28px;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
    line-height: 1.8;
    letter-spacing: 0.32px;
  }
}

.anxiety__list-item.anxiety__list-item--2nd {
  background: url("/medical/lp/assets/images/anxiety-baloon02.webp")no-repeat;
  background-size: contain;
  width: calc(var(--base) * 29.4957);
  height: calc(var(--base) * 18.9941);
  margin-left: 0;

  @media (min-width: 768px) {
    position: absolute;
    left: 50%;
    top: calc(var(--base) * 20);
    transform: translateX(-140%);
    width: calc(var(--base) * 34.3);
    height: calc(var(--base) * 22.1);
    margin-top: calc(var(--base) * -3);
  }

  .anxiety__list-item-head {
    margin-left: calc(var(--base) * -3.5);

  }

  .anxiety__list-item-text {
    margin-left: calc(var(--base) * -3.5);

  }

}

.anxiety__list-item.anxiety__list-item--3rd {
  background: url("/medical/lp/assets/images/anxiety-baloon03.webp")no-repeat;
  background-size: contain;
  width: calc(var(--base) * 28.5);
  height: calc(var(--base) * 18.5);


  @media (min-width: 768px) {
    position: absolute;
    left: 50%;
    top: calc(var(--base) * 20);
    transform: translateX(40%);
    margin-top: calc(var(--base) * -3);
    width: calc(var(--base) * 35.4);
    height: calc(var(--base) * 22.9);
  }
}

.reason {
  position: relative;
  margin-top: calc(var(--base) * -3.5);
  z-index: 1;
  background: url("/medical/lp/assets/images/reason-bg01-sp.webp")no-repeat;
  background-size: contain;
  background-position: center top;
  padding-top: calc(var(--base) * 6);

  @media (min-width: 768px) {
    margin-top: calc(var(--base) * -10.5);
    padding-top: calc(var(--base) * 20.4);
    background: url("/medical/lp/assets/images/reason-bg01-pc.webp")no-repeat;
    background-size: auto;
    background-position: center top;
  }
}

.reason__inner {
  background: var(--bg-pink);
}

.reason__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  gap: var(--sp-10);
  margin-bottom: calc(var(--base) * 7);

  @media (min-width: 768px) {
    justify-content: center;
    flex-flow: row wrap;
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
    margin-bottom: calc(var(--base) * 6);
  }

  &::after {
    content: "";
    background: url("/medical/lp/assets/images/reason-img02.svg")no-repeat;
    background-size: contain;
    position: absolute;
    width: calc(var(--base) * .8);
    height: calc(var(--base) *3.6);
    bottom: calc(var(--base) * -5);
    left: 50%;
    transform: translate(-50%, 0);
  }
}

.reason__lead-group {
  display: flex;
  gap: var(--sp-5);
  align-items: center;

  @media (min-width: 768px) {
    gap: var(--sp-10);
  }

  span {
    display: flex;
    border-radius: calc(var(--base) * 5);
    background: #FFF;
    padding: calc(var(--base) * 0.4) calc(var(--base) * 2);
    justify-content: center;
    align-items: center;
    gap: calc(var(--base) * 1);
    color: var(--text-color-orange);
    text-align: center;
    font-kerning: none;
    font-feature-settings: 'halt' on;
    font-size: var(--fs-20);
    font-style: normal;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1px;
    white-space: nowrap;

    @media (min-width: 768px) {
      padding: calc(var(--base) * 0.4) calc(var(--base) * 3);
      font-size: var(--fs-24);
      letter-spacing: 1.2px;
    }
  }
}

.reason__lead-text {
  flex-basis: 100%;
}

.reason-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  margin-left: auto;
  margin-bottom: var(--sp-50);

  @media (max-width: 767px) {
    margin-bottom: var(--sp-70);
  }

  &::before {

    @media (min-width: 768px) {
      content: "";
      position: absolute;
      top: calc(var(--base) * 8);
      left: calc(var(--base) * -3.5);
      background: url("/medical/lp/assets/images/reason-img01.webp")no-repeat;
      background-size: contain;
      width: calc(var(--base) * 24.6);
      height: calc(var(--base) * 32.4);
      z-index: 1;
    }
    @media (min-width: 1300px) {
      left: calc(var(--base) * -1.5);
    }
  }

}

.reason-list__item {
  display: flex;
  width: calc(var(--base) * 34.3);
  padding: calc(var(--base) * 3) calc(var(--base) * 2.5);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: calc(var(--base) * 2);
  border: 3px solid #ECC9BB;
  background: #FFF;

  @media (min-width: 768px) {
    width: calc(var(--base) * 95);
    padding: calc(var(--base) * 4);
    flex-direction: row-reverse;
    align-items: center;
    gap: calc(var(--base) * 5);
    border: 5px solid #ECC9BB;
    margin-left: calc(100% - calc(var(--base) * 95));
  }
}

.reason-list__item--img {
  position: relative;


}

.reason-list__ph {
  width: 100%;
  border-radius: calc(var(--base) * 2);
  margin-bottom: var(--sp-20);

  @media (min-width: 768px) {
    width: calc(var(--base) * 42.6);
  }
}

.reason-list__number {
  color: #DB6F45;
  font-family: var(--ff-quicksand);
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  margin-bottom: var(--sp-16);

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
  }

  span {
    font-size: var(--fs-24);

    @media (min-width: 768px) {
      font-size: var(--fs-32);
    }
  }
}

.reason-list__head {
  color: #573D35;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.9px;
  margin-bottom: var(--sp-16);

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    line-height: 1.8;
    letter-spacing: 1.2px;
  }
}

.reason-list__text {
  color: #573D35;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.28px;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
    letter-spacing: 0.32px;
  }
}

.slide {
  background: linear-gradient(180deg, #F6E6E5 1%, #FFF 30%, #FFF 90%, #FBF8F5 100%);

  @media (min-width: 768px) {
    background: linear-gradient(180deg, #F6E6E5 5%, #FFF 30%, #FFF 90%, #FBF8F5 100%);
    padding-bottom: calc(var(--base) * 12);
  }

}

.logo-slide {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  margin-bottom: var(--sp-80);

  @media (min-width: 768px) {
    margin-bottom: 0;
  }
}

.logo-slide__row {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--sp-40);
  animation-name: logo-slide-loop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.logo-slide__row--2nd {
  animation-direction: reverse;
}

.logo-slide__row img {
  width:auto;
  height: auto;
  max-width: calc(var(--base) * 20);
  max-height: calc(var(--base) * 4);
  flex-shrink: 0;
}

.numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-20);

  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.numbers__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: calc(var(--base) * 3);
  background: #F6E6E5;
  color: var(--orange);
  height: calc(var(--base) * 26);
  padding-top: var(--sp-20);

  @media (min-width: 768px) {
    padding-top: var(--sp-30);
    min-height: calc(var(--base) * 33.7);
  }
}

.numbers__head {
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
  }
}

.numbers__achievements {
  font-family: var(--ff-quicksand);
  font-size: var(--fs-64);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.92px;


  @media (min-width: 768px) {
    font-size: var(--fs-96);
    letter-spacing: 1.28px;
  }

  span {
    font-size: var(--fs-40);

    @media (min-width: 768px) {
      font-size: var(--fs-64);
    }
  }
}

.numbers__img {
  width: calc(var(--base) * 14.7);
  position: absolute;
  bottom: 0;

  @media (min-width: 768px) {
    width: calc(var(--base) * 18);
  }

}

.numbers__item.numbers__item--2nd {
  .numbers__img {
    width: calc(var(--base) * 20.2);

    @media (min-width: 768px) {
      width: calc(var(--base) * 27.2);
    }

  }
}

.numbers__item.numbers__item--3rd {
  .numbers__img {
    width: calc(var(--base) * 18.5);

    @media (min-width: 768px) {
      width: calc(var(--base) * 26.9);
    }
  }

  .numbers__achievements {
    font-size: var(-fs-56);

    @media (min-width: 768px) {
      font-size: var(--fs-62);
    }
  }

  .numbers__achievements-year {
    font-size: var(--fs-28);
  }

  span {
    font-size: var(--fs-24);

    @media (min-width: 768px) {
      font-size: var(--fs-24);
    }
  }
}

.numbers__item.numbers__item--4th {

  .numbers__achievements {
    display: flex;
    letter-spacing: 19.2px;

    span:first-child {
      @media (max-width: 767px) {
        position: relative;
        left: calc(var(--base) * -.9)
      }
    }
  }

  .numbers__img {
    position: relative;
    width: calc(var(--base) * 19.7);

    @media (min-width: 768px) {
      width: calc(var(--base) * 19.7);
    }
  }

  .numbers__label {
    font-size: var(--fs-16);
    letter-spacing: normal;
    margin-top: var(--sp-40);

    @media (min-width: 768px) {
      font-size: var(--fs-20);
      font-weight: 700;
      margin-top: 0;
    }

    span:first-child {
      @media (min-width: 768px) {
        position: relative;
        left: calc(var(--base) * -5);
      }
    }

    span:last-child {
      @media (min-width: 768px) {
        position: relative;
        right: calc(var(--base) * -2.2);
      }
    }
  }
}

.numbers__item.numbers__item--5th {
  justify-content: space-between;
  padding-bottom: var(--sp-20);

  .numbers__img {
    position: relative;
    width: calc(var(--base) * 31);
  }

  .numbers__achievements {
    span {
      @media (min-width: 768px) {
        font-size: var(--sp-40);
      }
    }
  }
}

.numbers__item.numbers__item--6th {
  .numbers__achievements-wrap {
    display: flex;
    width: 92%;

    @media (min-width: 768px) {
      width: 100%;
    }

    dl {
      display: flex;
      align-items: end;
      margin-bottom: calc(var(--base) * 1);

      dt {
        font-kerning: none;
        font-feature-settings: 'halt' on;
        font-size: var(--fs-18);
        font-style: normal;
        font-weight: 700;
        line-height: 1.8;
        letter-spacing: 0.9px;
        margin-right: calc(var(--base) * 2);
      }

      dd {
        color: #DB6F45;
        font-family: var(--ff-quicksand);
        font-size: var(--fs-38);
        font-style: normal;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.76px;

        @media (min-width: 768px) {
          font-size: var(--fs-52);
          letter-spacing: 1.04px;
        }

        span {
          color: #DB6F45;
          font-family: var(--ff-quicksand);
          font-size: var(--fs-28);
          font-style: normal;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 0.8px;

          @media (min-width: 768px) {
            font-size: var(--fs-36);
            letter-spacing: 0.72px;
          }
        }
      }

      &:nth-child(3) {
        dt {
          margin-right: calc(var(--base) * .4);

          @media (min-width: 768px) {
            margin-right: calc(var(--base) * 1);
          }
        }
      }

      &:nth-child(4) {
        dt {
          margin-right: calc(var(--base) * 2.3);

          @media (min-width: 768px) {
            margin-right: calc(var(--base) * 2.9);
          }
        }
      }
    }
  }

  .numbers__img {
    position: relative;
    width: calc(var(--base) * 12.9);
    display: block;

    @media (min-width: 768px) {
      width: calc(var(--base) * 15.3);
      bottom: calc(var(--base) * -1.5);
    }
  }
}

.numbers__item.numbers__item--7th {
  justify-content: space-between;
  padding-bottom: var(--sp-20);

  @media (min-width: 768px) {
    padding-bottom: var(--sp-30);
  }

  .numbers__img {
    position: relative;
    width: calc(var(--base) * 11.35);

    @media (min-width: 768px) {
      width: calc(var(--base) * 15.6);
    }
  }
}

.numbers__item.numbers__item--8th {
  .numbers__img {
    width: calc(var(--base) * 20.4);

    @media (min-width: 768px) {
      width: calc(var(--base) * 26.5);
    }
  }

  .numbers__achievements {
    span {
      font-size: var(--fs-32);

      @media (min-width: 768px) {
        font-size: var(--fs-40);

      }
    }
  }
}

.numbers__note {
  color: #573D35;
  text-align: right;
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.24px;
  margin-top: var(--sp-10);

  @media (min-width: 768px) {
    text-align: left;
    font-size: var(--fs-16);
    letter-spacing: 0.32px;
    margin-top: var(--sp-20);
  }
}

.scroll {
  @media (max-width: 767px) {
    overflow-x: auto;
  }


  img {
    @media (max-width: 767px) {
      width: 1140px;
      max-width: none;
    }
  }
}

.support {
  margin-top: var(--sp-50);
  padding-bottom: var(--sp-80);

  @media (min-width: 768px) {
    margin-top: var(--sp-100);
  }
}

.support__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);

  @media (min-width: 768px) {
    flex-direction: row;
  }

  li {
    display: flex;
    flex-direction: column;
    width: calc(var(--base) * 34.3);
    padding: calc(var(--base) * 3);
    gap: calc(var(--base) * 1);
    color: #573D35;
    font-size: var(--fs-14);
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.28px;
    border-radius: var(--sp-20);
    background: var(--white, #FFF);

    @media (min-width: 768px) {
      width: calc(var(--base) * 36.6);
      padding: calc(var(--base) * 4) calc(var(--base) * 3.5);
      flex-shrink: 0;
      font-size: var(--fs-16);
      letter-spacing: 0.32px;
    }
  }

  .support__head {
    display: flex;
    align-items: center;
    gap: var(--sp-20);
    justify-content: flex-start;
    font-weight: 700;
    font-size: var(--fs-16);
    letter-spacing: 0.8px;

    @media (min-width: 768px) {
      font-size: var(--fs-20);
      letter-spacing: 1px;
    }

    img {
      width: calc(var(--base) * 8);

      @media (min-width: 768px) {
        width: calc(var(--base) * 10);
      }
    }
  }
}

.schedule {
  background: url("/medical/lp/assets/images/schedule-bg01-sp.webp")no-repeat;
  background-position: top center;
    background-size: 100%;
  padding-top: calc(var(--base) * 8);

  @media (min-width: 768px) {
    background: url("/medical/lp/assets/images/schedule-bg01-pc.webp")no-repeat;
    background-position: top center;
    background-size: auto;
    padding-top: calc(var(--base) * 13.5);
  }


}

.schedule__inner {
  background-image: linear-gradient(#f6e6e5, #f6e6e5 85%, #fbf8f5 100%);
  margin-top: calc(var(--base) * -1.1);

  @media (min-width: 768px) {
    margin-top: calc(var(--base) * -3.2);
    padding-top: calc(var(--base) * 10);
  }


}

.schedule__inner-flex {
  @media (min-width: 768px) {
    display: flex;
    align-items: flex-start;
  }
}


.schedule-timeline {
  position: relative;
}

@media (min-width: 768px) {
  .schedule-timeline {
    padding-left: calc(var(--base) * 12.5);
  }
}

.schedule-timeline__item {
  position: relative;
  padding-left: calc(var(--base) * 3);
  padding-bottom: calc(var(--base) * 3);
}

@media (min-width: 768px) {
  .schedule-timeline__item {
    padding-left: calc(var(--base) * 4);
    padding-bottom: calc(var(--base) * 5);
  }
}

.schedule-timeline__item--last {
  padding-bottom: 0;
}

.schedule-timeline__item::before {
  content: '';
  position: absolute;
  top: calc(var(--base) * 0.6);
  left: calc(var(--base) * 0.15);
  width: 2px;
  height: 100%;
  background: #DB6F45;
}

.schedule-timeline__item--last::before {
  display: none;
}

.schedule-timeline__dot {
  position: absolute;
  top: 0;
  left: calc(var(--base) * -1);
  width: calc(var(--base) * 2.4);
  height: calc(var(--base) * 2.4);
  border-radius: 50%;
  background: #DB6F45;

  @media (min-width: 768px) {
    top: var(--sp-5);
  }
}

.schedule-timeline__content {
  border-bottom: 1px dashed #DB6F45;
  padding-bottom: calc(var(--base) * 2);
}


.schedule-timeline__content--with-image {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 2);
}

@media (min-width: 768px) {
  .schedule-timeline__content--with-image {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--base) * 3);
  }
}

.schedule-timeline__body {
  flex: 1;
}

.schedule-timeline__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--base) * 2);
  margin-bottom: calc(var(--base) * 1);
}

.schedule-timeline__time {
  color: #DB6F45;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.4;

  @media (min-width: 768px) {
    font-size: var(--fs-24);
  }
}

.schedule-timeline__title {
  color: #DB6F45;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.4;

  @media (min-width: 768px) {
    font-size: var(--fs-24);

  }
}

.schedule-timeline__text {
  color: #333;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.6;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
  }
}

.schedule-timeline__image {
  width: 100%;
  height: auto;
  border-radius: calc(var(--base) * 1.2);
  object-fit: cover;
  flex-shrink: 0;

  @media (min-width: 768px) {
    width: calc(var(--base) * 30);
    height: auto;
  }
}

.interview {
  padding-top: var(--sp-80);

  @media (min-width: 768px) {
    padding-top: calc(var(--base) * 12);
  }
}

.interview-card {
  background: #F6E6E5;
  border-radius: calc(var(--base) * 2);
  padding: calc(var(--base) * 2);
  touch-action: manipulation;
}

@media (min-width: 768px) {
  .interview-card {
    border-radius: calc(var(--base) * 3);
    padding: calc(var(--base) * 3);
  }
}

.interview-card+.interview-card {
  margin-top: var(--sp-30);
}

.interview-card__trigger {
  display: block;
  width: 100%;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.interview-card__inner {
  display: grid;
  grid-template-columns: calc(var(--base) * 12) 1fr;
  grid-template-areas:
    "photo head"
    "tags tags"
    "highlight highlight";
  gap: calc(var(--base) * 1.5);
    @media (min-width: 768px) {
      grid-template-columns: calc(var(--base) * 20.5) 1fr;
      grid-template-areas:
        "photo head"
        "photo tags"
        "photo highlight";
      gap: calc(var(--base) * 1) calc(var(--base) * 5);
  }
}



.interview-card__photo {
  grid-area: photo;
  width: 100%;
  height: calc(var(--base) * 15.0217);
  border-radius: calc(var(--base) * 1.2);
  object-fit: cover;
  @media (min-width: 768px) {
    width: calc(var(--base) * 20.5);
    height: calc(var(--base) * 25.9);
}

}


.interview-card__head {
  grid-area: head;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 1.5);

  @media (min-width: 768px) {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .interview-card__head {
    align-self: start;
    padding-right: calc(var(--base) * 4);
  }
}

.interview-card__badge {
  display: flex;
  width: calc(var(--base) * 13);
  padding: calc(var(--base) * 0.8) calc(var(--base) * 2);
  justify-content: center;
  align-items: center;
  gap: calc(var(--base) * 1);
  border-radius: calc(var(--base) * 4);
  background: #FFF;
  color: #DB6F45;
  text-align: right;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 700;
  line-height: 1;

  @media (min-width: 768px) {
    width: calc(var(--base) * 12);
    padding: calc(var(--base) * 1) calc(var(--base) * 2);
    align-self: stretch;
    font-size: var(--fs-16);
  }
}

.interview-card__name {
  color: #DB6F45;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-20);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;

  @media (min-width: 768px) {
    font-size: var(--fs-24);
    letter-spacing: 1.2px;
  }
}

.interview-card__tags {
  grid-area: tags;
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 1);
  @media (min-width: 768px) {
    gap: calc(var(--base) * 2.4);
  }
}

.interview-card__tag-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--base) * 1);
}

.interview-card__tag-label {
  display: flex;
  width: calc(var(--base) * 8.5);
  height: calc(var(--base) * 2.8);
  padding: 0 calc(var(--base) * 2);
  justify-content: center;
  align-items: center;
  gap: calc(var(--base) * 1);
  border-radius: calc(var(--base) * 3.2);
  border: 1px solid #573D35;
  color: #573D35;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.28px;
  white-space: nowrap;

  @media (min-width: 768px) {
    height: auto;
    padding: calc(var(--base) * 0.6) calc(var(--base) * 2);
    align-self: stretch;
  }
}

.interview-card__tag-text {
  color: #573D35;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.6;
  padding-top: calc(var(--base) * 0.4);
  @media (min-width: 768px) {
    font-size: var(--fs-16);
    padding-top: 0;
  }
}

.interview-card__highlight {
  grid-area: highlight;
  color: #DB6F45;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.8px;
  padding-bottom: var(--sp-50);

  @media (min-width: 768px) {
    font-size: var(--fs-22);
    letter-spacing: 1.1px;
  }
}

@media (min-width: 768px) {
  .interview-card__highlight {
    padding-right: calc(var(--base) * 4);
    padding-bottom: 0;
  }
}

.interview-card__toggle-icon {
  position: absolute;
  bottom: calc(var(--base) * 1.5);
  right: 0;
  width: calc(var(--base) * 2);
  height: calc(var(--base) * .2);
  background: var(--orange);
  transition: transform 0.2s ease;
  @media (min-width: 768px) {
    top: calc(var(--base) * 1);
    right:  calc(var(--base) * 2);
    height: calc(var(--base) * .3 );
    width: calc(var(--base) * 3);
  }
}



.interview-card__toggle-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.interview-card__trigger[aria-expanded="true"] .interview-card__toggle-icon::before {
  transform: rotate(0deg);
}

.interview-card__detail {
  margin-top: calc(var(--base) * 2);
  @media (min-width: 768px) {
    margin-top:0;
  }
}


.interview-card__qa {
  padding: calc(var(--base) * 2) 0;
  border-top: 1px dashed #DB6F45;
  @media (min-width: 768px) {
    padding: calc(var(--base) * 3) 0;
  }
}

.interview-card__qa:first-child {
  border-top: none;
}

.interview-card__question {
  position: relative;
  color: #573D35;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  padding-left: calc(var(--base) * 4);
  margin-bottom: var(--sp-10);

  @media (min-width: 768px) {
    font-size: var(--fs-20);
    line-height: 1.8;
    letter-spacing: 1px;
    padding-left: calc(var(--base) * 12);
    margin-bottom: var(--sp-16);
  }
}

.interview-card__question::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--base) * 1);
  width: calc(var(--base) * 3);
  height: 1px;
  background: #573D35;
  @media (min-width: 768px) {
    width: calc(var(--base) * 10);
    top: calc(var(--base) * 1.8);
  }
}

.interview-card__answer {
  color: #573D35;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.8;
  @media (min-width: 768px) {
    font-size: var(--fs-16);
  }
}

.interview-note {
  color: #573D35;
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.6px;

  @media (min-width: 768px) {
    text-align: right;
    font-size: var(--fs-14);
    letter-spacing: 0.7px;
  }
}

.step {
  background: url("/medical/lp/assets/images/step-bg01-sp.svg")no-repeat;
  background-position: top center;
  background-size:contain;
  display: flex;
  flex-direction: column;
  width: calc(var(--base) * 34.3);
  height: calc(var(--base) * 101);

  @media (min-width: 768px) {
    background: url("/medical/lp/assets/images/step-bg01-pc.svg")no-repeat;
    background-position: top left;
    background-size: contain;
    flex-direction: row;
    width: calc(var(--base) * 114);
    height: calc(var(--base) * 40);
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
}

.step__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--base) * 34.3);
  aspect-ratio: 1/1;
  height: 100%;
  padding-top: var(--sp-60);
  gap: var(--sp-2);

  @media (min-width: 768px) {
    width: calc(var(--base) * 38);
    padding: calc(var(--base) * 5) calc(var(--base) * 4.3) calc(var(--base) * 6.9) calc(var(--base) * 5.1);
    gap: var(--sp-8);
  }
}

.step__item.step__item--2nd {

  padding-top: var(--sp-30);
  @media (min-width: 768px) {
    padding: calc(var(--base) * 5) calc(var(--base) * 4.5) calc(var(--base) * 6.9) calc(var(--base) * 4.9);
  }
}

.step__item.step__item--3rd {

  padding-top:0;
  @media (min-width: 768px) {
    padding: calc(var(--base) * 5) calc(var(--base) * 4.7) calc(var(--base) * 6.9);
  }
}

.step__number {
  color: #DB6F45;
  text-align: center;
  font-family: var(--ff-quicksand);
  font-size: var(--fs-24);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;

  @media (min-width: 768px) {
    font-size: var(--fs-36);
    letter-spacing: 1.8px;
  }

  span {
    color: #DB6F45;
    text-align: center;
    font-family: "Quicksand";
    font-size: var(--fs-40);
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 2px;

    @media (min-width: 768px) {
      font-size: var(--fs-64);
    }
  }
}

.step__head {
  color: #573D35;
  text-align: center;
  font-kerning: none;
  font-feature-settings: 'halt' on;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.8px;

  @media (min-width: 768px) {
    font-size: var(--fs-20);
    letter-spacing: 1px;
  }
}

.step__text {
  color: #573D35;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.7px;
  width: calc(var(--base) * 25);

  @media (min-width: 768px) {
    font-size: var(--fs-16);
    letter-spacing: 0.8px;
    width: calc(var(--base) * 26);
  }
}



.faq__inner {
  position: relative;
  background-image: linear-gradient(#f6e6e5, #f6e6e5 85%, #fbf8f5 100%);
  padding-top: calc(var(--base) * 13);
  padding-bottom: var(--sp-100);

  @media (min-width: 768px) {
    margin-top: calc(var(--base) * 3.5);
    padding-top: calc(var(--base) * 20);
  }

  &::before {
    content: "";
    position: absolute;
    top: calc(var(--base) * -2);
    background: url("/medical/lp/assets/images/faq-bg01-sp.svg")no-repeat;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: calc(var(--base) * 9.3);

    @media (min-width: 768px) {
      top: calc(var(--base) * -7);
      background: url("/medical/lp/assets/images/faq-bg01-pc.svg")no-repeat;
      background-size: cover;
      background-position: top center;
      height: calc(var(--base) * 22);
    }
  }
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 2);
}

.faq-accordion__item {
  background: #FFF;
  border-radius: calc(var(--base) * 2);

  @media (min-width: 768px) {
    border-radius: calc(var(--base) * 2);
  }
}

.faq-accordion__question {
  display: flex;
  align-items: center;
  gap: calc(var(--base) * 1.2);
  position: relative;
  padding: calc(var(--base) * 2) calc(var(--base) * 5) calc(var(--base) * 2) calc(var(--base) * 2);
  cursor: pointer;
  list-style: none;
  @media (min-width: 768px) {
    gap: calc(var(--base) * 1.6);
  }

  &::-webkit-details-marker {
    display: none;
  }

}

.faq-accordion__q-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--base) * 3.6);
  height: calc(var(--base) * 3.6);
  border-radius: 50%;
  background: var(--orange);
  color: #FFF;
  font-size: var(--fs-20);
  font-family: var(--ff-quicksand) ;
  font-weight: 700;
  line-height: 1;
}

.faq-accordion__question-text {
  color: #DB6F45;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.7px;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
    letter-spacing: 0.8px;
  }
}

.faq-accordion__toggle-icon {
  position: absolute;
  top: 50%;
  right: calc(var(--base) * 2);
  transform: translateY(-50%);
  width: calc(var(--base) * 2);
  height: calc(var(--base) * .2);
  background: var(--orange);

  @media (min-width: 768px) {
    width: calc(var(--base) * 2.4);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--orange);
    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }
}

.faq-accordion__item[open] .faq-accordion__toggle-icon::before {
  transform: rotate(0deg);
}

.faq-accordion__answer {
  padding-top: calc(var(--base) * 2);
  margin: 0 calc(var(--base) * 2) calc(var(--base) * 2);
  border-top: 1px dashed var(--orange);

  @media (min-width: 768px) {
    margin: calc(var(--base) * 2);
    margin-top: 0;
  }
}

.faq-accordion__answer-text {
  color: #573D35;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.8;

  @media (min-width: 768px) {
    font-size: var(--fs-16);
  }
}

.job-table-wrap{
  position: relative;
  padding-top: calc(var(--base) * 17);
  @media (min-width: 768px) {
    padding-top: 0;
  }
  &::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--base) * 34.3);
    height: calc(var(--base) * 19.41);
    background: url("/medical/lp/assets/images/job-img01-sp.webp") no-repeat;
    background-size: contain;
    z-index: -1;

    @media (min-width: 768px) {
      height: calc(var(--base) * 27.3);
      background: url("/medical/lp/assets/images/job-img01-pc.webp") no-repeat;
      background-size: contain;
      z-index: 1;
      top: calc(var(--base) * -5);
      left: auto;
      right: 0;
    }
  };
}

.job-table {
  position: relative;
   border-radius: calc(var(--base) * 1);
  overflow: hidden;


}

.job-table__table {
  width: 100%;
  border-collapse: collapse;


}

.job-table__row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #FBF8F5;

  @media (min-width: 768px) {
    display: table-row;
    background: var(--bg-pink);
  }
}

.job-table__th {
  display: flex;
  padding: calc(var(--base) * 1);
  gap: calc(var(--base) * 1);
  color: #DB6F45;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.7px;
  background: var(--bg_pink, #F6E6E5);

  @media (min-width: 768px) {
    width: calc(var(--base) * 17);
    padding: calc(var(--base) * 3);
    font-size: var(--fs-16);
    letter-spacing: 0.8px;
    height: 100%;
  }
}

.job-table__td {
  padding: calc(var(--base) * 1);
  gap: calc(var(--base) * 1);
  border-radius: 0 calc(var(--base) * 1) 0 0;
  background: #FFF;
  color: #573D35;
  font-size: var(--fs-14);
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.7px;

  @media (min-width: 768px) {
    padding: calc(var(--base) * 3);
    border-radius: 0;
    font-size: var(--fs-16);
    letter-spacing: 0.8px;
  }

  p {
    margin-bottom: calc(var(--base) * 0.5);
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.job-table__list {
  list-style: none;
}

.job-table__list li {
  position: relative;
  padding-left: calc(var(--base) * 1.2);
}

.job-table__list li::before {
  content: '・';
  position: absolute;
  left: 0;
}

.job-table__list--plain {
  margin-bottom: calc(var(--base) * 0.5);
}


.about-us {
  position: relative;
  max-width: calc(var(--base) * 100);
  margin: auto;
}

.about-us__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--base) * 2);
  margin-bottom: calc(var(--base) * 2);

  @media (min-width: 768px) {
    flex-direction: row;
    gap: calc(var(--base) * 2);
    margin-bottom: calc(var(--base) * 3);
  }
}

.about-us__item {
  list-style: none;

  @media (min-width: 768px) {
    flex: 1;
  }
}

.about-us__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--base) * 2);
  height: calc(var(--base) * 8);
  padding: 0 calc(var(--base) * 2);
  border: 3px solid #ECC9BB;
  border-radius: calc(var(--base) * 1.6);
  background: #FFF;
  text-decoration: none;
  color: #573D35;
  font-size: var(--fs-16);
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  opacity: 1;
  transition: opacity .3s;

  @media (min-width: 768px) {
    height: calc(var(--base) * 12);
  }

  @media (hover: hover) {
    &:hover {
      opacity: .7;
    }
  }
}

.about-us__link-text {
  color: #573D35;
  font-size: var(--fs-16);
  line-height: 1.6;
}

.about-us__link-icon {
  flex-shrink: 0;
  width: calc(var(--base) * 4);
  height: calc(var(--base) * 4);
  background: url("/medical/lp/assets/images/ico-arrow01-hover.svg") no-repeat;
  background-size: contain;
}

.about-us__more {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: #573D35;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.6;
  text-decoration: underline;
  opacity: 1;
  transition: opacity .3s;
  @media (hover: hover) {
    &:hover {
      opacity: .7;
    }
  }
}


.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  margin-top: var(--sp-80);

  @media (min-width: 768px) {
    margin-top: var(--sp-100);
  }
}

/* === モバイル（デフォルト） ===================== */
.l-footer__marks {
  width: 100%;
  max-width: calc(var(--base) * 128);
  display: block;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  margin-top: 0.25rem;
  margin-bottom: 1.375rem;

  @media (min-width: 768px) {
    padding-inline: calc(var(--base) * 7);
    margin: auto;
  }
}


.l-footer__mark,
.l-footer__brand {
  display: block;
  width: 100%;
  min-width: 0;
  border-left: none;
  border-top: 1px solid #DDDDDD;
  padding: var(--sp-20) 0;
  text-align: center;
}

.l-footer__mark:first-child {
  border-top: none;
  padding-left: 0;
}

.l-footer__mark--privacy {
  img {
    width: calc(var(--base) *10);

    @media (min-width: 768px) {
      width: calc(var(--base) * 7);
    }
  }
}

.l-footer__mark--iso {
  img {
    width: calc(var(--base) *20);

    @media (min-width: 768px) {
      width: calc(var(--base) * 12);
    }
  }
}

.l-footer__mark--eruboshi {
  img {
    width: calc(var(--base) *10);

    @media (min-width: 768px) {
      width: calc(var(--base) * 7);
    }
  }
}

.l-footer__markImg {
  height: auto;
  display: flex;
  align-items: center;
}

.l-footer__markImg div,
.l-footer__markImg a {
  margin-left: auto;
  margin-right: auto;
}

.l-footer__markText {
  font-size: 0.875rem;
  line-height: 1.14;
  text-align: center;
  margin-top: 0.5rem;
}

.l-footer__brandLogo {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  img {
    width: calc(var(--base) * 10);
  }
}

.l-footer__button {
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  transition: .3s;
}

@media (min-width:768px) {

  .l-footer__button:hover,
  .l-footer__snsItem:hover,
  .l-footer__linkItem:hover {
    opacity: .7;
  }
}

.l-footer__buttonLink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.14;
  color: #fff;
  background-color: #2778BE;
  padding: 1.25rem 3rem;
  text-align: center;
  min-width: 15rem;
}

.l-footer__buttonLink::before {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.l-footer__sns {
  display: flex;
  justify-content: center;
}

.l-footer__sns>*+* {
  margin-left: .9375rem;
}

.l-footer__bottom {
  width: 100%;
  background-color: #2778BE;
  color: #fff;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width:767px) {
  .l-footer__bottom {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
}

.l-footer__linkList {
  display: flex;
}

@media (max-width:767px) {
  .l-footer__linkList {
    flex-wrap: wrap;
    max-width: 17.5rem;
    justify-content: center;
  }

  .l-footer__linkList>*:nth-child(n+3) {
    margin-top: .375rem;
  }
}

.l-footer__linkList>*+* {
  margin-left: 1.25rem;
}

.l-footer__linkItem a {
  position: relative;
  display: block;
  font-size: .875rem;
  padding-right: 1.25rem;
}

@media (max-width:767px) {
  .l-footer__linkItem a {
    font-size: .75rem;
    padding-right: 1.125rem;
  }
}

.l-footer__linkItem a::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("/medical/lp/assets/images/footer-link.svg") no-repeat center / cover;
}

@media (max-width:767px) {
  .l-footer__linkItem a::before {
    width: .875rem;
    height: .875rem;
  }
}

.l-footer__copyright {
  font-size: .75rem;
  margin-top: .75rem;
}

@media (max-width:767px) {
  .l-footer__copyright {
    margin-top: .375rem;
  }
}

/* === PC（901px以上）だけ上書き =================== */
@media (min-width: 768px) {
  .l-footer__marks {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    max-width: calc(var(--base) * 128);
  }



  .l-footer__mark {
    width: calc(var(--base) * 31);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.875rem;
    border-top: 0;
    border-left: 1px solid #DDDDDD;
  }

  .l-footer__mark:first-child {
    border-left: 0;
  }

  .l-footer__mark {
    width: calc(var(--base) * 20);
  }


  .l-footer__markText {
    margin-top: 1.5rem;
  }

  .l-footer__brand {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: clamp(0.5rem, 3vw, 2.5rem);
    padding-top: 2.625rem;
    border-top: 0;
    border-left: 1px solid #DDDDDD;
  }
}


.card-tilt-in {
  transform-origin: top left;
  transform: rotate(8deg);
  opacity: 0;
}