/*
foundation	変数・リセット・タイポ・基本設計
layout	コンテナ、カラム、ブレークポイントごとの共通レイアウト
components	各種パーツ（button, modal, drawer, form, etc...）
utilities	汎用クラス群（.u-mb, .u-text-center, .u-hide-sp など）
editor-style	管理画面用
*/

:root {
  --bp-xxl: 1400px;
  --bp-xl: 1200px;
  --bp-lg: 992px;
  --bp-md: 768px;
  --bp-sm: 576px;
  --bp-xs: 375px;

  --fs-pc-min: 0.9rem; /* ← 9px */
  --fs-pc-max: 1rem; /* ← 10px */
  --fs-tab-min: 0.8rem; /* ← 8px */
  --fs-tab-max: 0.9rem; /* ← 9px */
  --fs-sp-min: 0.7rem; /* ← 7px */
  --fs-sp-max: 0.8rem; /* ← 8px */

  --w-full: 100%;
  --w-container: 120rem;
  --w-content: 96rem;
  --w-narrow: 64rem;
  --w-wide: 140rem;
  --w-box-large: 120rem;
  --w-box-medium: 96rem;
  --w-box-small: 64rem;
  --w-custom-01: 110rem;
  --w-custom-02: 54rem;

  --max-w-container: 120rem;
  --max-w-content: 96rem;
  --max-w-narrow: 64rem;
  --max-w-box-large: 105.4rem;
  --max-w-box-medium: 96rem;
  --max-w-box-small: 64rem;
  --max-w-custom-01: 110rem;
  --max-w-custom-02: 54rem;

  --space-3xs: 0.4rem;
  --space-2xs: 0.8rem;
  --space-xs: 1.2rem;
  --space-sm: 1.6rem;
  --space-md: 2.4rem;
  --space-lg: 3.2rem;
  --space-xl: 4.8rem;
  --space-2xl: 6.4rem;
  --space-3xl: 9.6rem;

  --color-text: #5a5d52;
  --color-text-strong: #665d52;
  --color-text-sub: rgba(147, 141, 134, 1);
  --color-bg: rgba(250, 244, 237, 1);
  --color-bg-light: rgba(252, 249, 245, 1);
  --color-white: rgba(254, 252, 251, 1);
  --color-line: rgba(239, 225, 209, 1);
  --color-bg-sub: rgba(249, 249, 249, 1);
  --color-border: rgba(239, 225, 209, 1);
  --color-primary: rgba(232, 145, 64, 1);
  --color-primary-light: rgba(252, 249, 245, 1);
  --color-primary-light-02: rgba(227, 177, 135, 1);
  --color-primary-light-03: rgb(255, 241, 231);
  --color-secondary: rgba(76, 217, 100, 1);
  --color-accent: rgba(255, 107, 107, 1);
  --color-success: rgba(76, 175, 80, 1);
  --color-warning: rgba(255, 152, 0, 1);
  --color-error: rgba(244, 67, 54, 1);
  --color-info: rgba(33, 150, 243, 1);
  --color-bg-gradient: linear-gradient(
    273.12deg,
    #fef4e9 40.6%,
    #fff8f0 93.39%
  );
  --color-bg-gradient-01: linear-gradient(
    220.11deg,
    #ffdfbb 41.92%,
    #ffecdc 47.86%,
    #d6f4f5 58.47%
  );

  --font-sans: "FOT-ニューセザンヌ Pro M", "Noto Sans JP", "Poppins", serif,
    "Yu Mincho", Yumincho, serif;
  --font-sans-bold: "FOT-ニューセザンヌ Pro B", "Noto Sans JP", "Poppins", serif,
    "Yu Mincho", Yumincho, serif;
  --font-sans-semibold: "FOT-ニューセザンヌ Pro DB", "Noto Sans JP", "Poppins",
    serif, "Yu Mincho", Yumincho, serif;
  --font-sans-thin: "FOT-ニューセザンヌ Pro M", "Noto Sans JP", "Poppins", serif,
    "Yu Mincho", Yumincho, serif;
  --font-serif: "Noto Serif JP", "Georgia", serif;
  --font-en: "Poppins", "FOT-ニューセザンヌ Pro M", "Noto Serif JP";

  --lh-compact: 1;
  --lh-tight: 1.2;
  --lh-tight: 1.35;
  --lh-normal: 1.5;
  --lh-base: 1.9;
  --lh-loose: 1.8;
  --lh-loose: 2.4;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;
  --ls-ultra: 0.5em;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration: 0.3s;
  --duration-slow: 0.5s;

  --z-header: 200;
  --z-menu: 150;
  --z-under-modal: 300;
  --z-dropdown: 200;
  --z-fixed: 500;
  --z-modal: 1000;
  --z-tooltip: 2000;

  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.6rem;
  --fs-lg: 1.8rem;
  --fs-xl: 2.1rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3.2rem;
  --fs-4xl: 3.6rem;

  --fw-thin: 100;
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900;
}
html {
  min-height: 100vh;
}
body {
  padding-top: 0 !important;
  max-width: 100%;
  overflow-x: hidden;
  word-break: break-all;
}
a,
a:link {
  text-decoration: underline;
  color: var(--color-primary);
}
table {
  word-break: normal;
}
.is-root-container {
  font-size: var(--fs-md);
}

.p-header {
  padding: 5rem 7.5rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  transition: 0.3s ease-in-out;
  opacity: 1;

  @media screen and (max-width: 768px) {
    padding: 3rem;
  }

  .is-open & {
    z-index: -1 !important;
    opacity: 0 !important;
  }
  .js__tmodal-active &,
  .js__lmodal-active &,
  .is-subpage &,
  .stmodal__no-scroll &,
  .no-scroll &,
  .js__is-scroll & {
    padding: 1.6rem 3.2rem;
    /* height: 7.5rem; */
    height: 8rem;
    background: rgba(254, 252, 251, 1);
    backdrop-filter: blur(10px);

    @media screen and (max-width: 768px) {
      padding: 2rem 3rem;
    }
  }

  .p-header__inner {
    position: relative;
    align-items: center;
    margin: 0 auto;
  }

  .p-header__logo > a > img {
    transition: 0.2s ease-in-out;
    width: 20rem;
    position: relative;
    top: 0;
    left: 0;
    .js__tmodal-active &,
    .js__lmodal-active &,
    .is-open &,
    .no-scroll &,
    .stmodal__no-scroll &,
    .is-subpage &,
    .js__is-scroll & {
      height: 4.3rem;
      height: 3.9rem;
      width: auto;
    }

    @media screen and (max-width: 768px) {
      width: 13.6rem;
      height: 3.9rem;
    }
  }
  .js__tmodal-active .p-header,
  .js__lmodal-active .p-header,
  .is-open .p-header,
  .no-scroll .p-header,
  .stmodal__no-scroll .p-header,
  .is-subpage .p-header,
  .js__is-scroll .p-header {
    height: 4.3rem;
    height: 3.9rem;
    width: auto;
  }
  @media screen and (max-width: 768px) {
    .p-header {
      padding: 3rem;
    }
    .js__tmodal-active .p-header,
    .js__lmodal-active .p-header,
    .is-open .p-header,
    .no-scroll .p-header,
    .stmodal__no-scroll .p-header,
    .is-subpage .p-header,
    .js__is-scroll .p-header {
      height: 4.3rem;
      height: 3.9rem;
      width: auto;
    }
    .p-header__logo img {
      width: 13.6rem;
      height: 3.9rem;
    }
  }
  .p-header__menu {
    position: absolute;
    max-width: calc(100% - 26rem);
    left: calc(50% + 7rem);
    transform: translateX(-50%);
    display: grid;
    align-items: center;
    width: 100%;
    place-content: center;
    top: 0.7rem;
    @media screen and (max-width: 1050px) {
      display: none;
    }
    @media screen and (max-width: 768px) {
    }
  }

  .p-header__nav {
    list-style: none;
    display: flex;
    gap: 3rem;
  }

  .p-header__nav li a {
    text-decoration: none;
    font-size: 1.3rem;
    color: var(--color-text);
    letter-spacing: var(--ls-widest);
  }
}

.st__nav {
  opacity: 0;
  z-index: -1;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 10rem;
  height: 10rem;
  border-radius: 9999px;
  background: var(--color-primary-gradient);
  display: grid;
  place-items: center;
  user-select: none;
  transition: all 0.3s;

  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }

  @media screen and (max-width: 768px) {
    opacity: 1;
    z-index: var(--z-menu);

    &.js__active {
      opacity: 0;
    }
  }
  .page-id-11255 &,
  .page__book & {
    opacity: 0 !important;
    z-index: -1 !important;
  }

  .st__inner {
    position: absolute;
    width: calc(100% - 0.4rem);
    height: calc(100% - 0.4rem);
    border-radius: 9999px;
    border: 1px solid var(--color-white);
    display: grid;
    place-items: center;
    text-align: center;

    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 0.35rem solid var(--color-white);
      border-left-width: 0.5rem;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: transparent;
      left: calc(50% + 0.4rem);
      transform: translateX(-50%);
      bottom: 1.5rem;
    }
  }

  .st__inner__text {
    font-size: var(--fs-xs);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    font-family: var(--font-sans-semibold);
    line-height: 1.35;
  }
}

.concept {
  color: var(--color-text);
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 40vh;
  position: relative;
  margin: 0;
  padding: 15rem 0;

  * {
    position: relative;
  }

  @media screen and (max-width: 768px) {
    padding: 10rem 0;
  }

  .concept__cover {
    position: absolute;
    margin: 0;
    padding: 0 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 0;
    backdrop-filter: blur(1.5rem);
  }

  .concept__inner {
    z-index: 0;
    position: relative;
    max-width: 106.7rem;
    padding: 0 2rem;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
      "top image"
      "title image"
      "text image"
      "button image"
      "bottom image";
    gap: 2rem 10rem;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr 1fr;

    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "title"
        "image"
        "text"
        "button";
    }
  }

  .concept__image-area {
    grid-area: image;
    position: relative;

    .concept__main-image {
      z-index: 0;
      margin-left: auto;
      max-width: 40.7rem;
      border-radius: 9999px 999.9rem 0 0;
      overflow: hidden;
      position: relative;

      @media screen and (max-width: 768px) {
        margin: 0 auto;
        max-width: 24.5rem;
      }
    }

    .concept__sub-image {
      z-index: 0;
      position: absolute;
      right: -20%;
      bottom: -17%;

      max-width: 21.5rem;
      border-radius: 9999px;
      overflow: hidden;

      @media screen and (max-width: 768px) {
        display: none;
      }
    }

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

  .concept__title-area {
    grid-area: title;
    width: 100%;
    font-weight: normal !important;

    h2 {
      font-size: var(--fs-3xl);
      letter-spacing: var(--space-md);
      line-height: var(--lh-base);
      font-weight: normal !important;

      @media screen and (max-width: 768px) {
        font-size: 2.7rem;
        line-height: var(--lh-base);
        letter-spacing: 0.5em;
        text-align: center;
      }
    }
  }

  .concept__text-area {
    margin-top: 1rem;
    grid-area: text;
    width: 100%;
    letter-spacing: 0.3rem;
    font-size: var(--fs-sm);

    p {
      line-height: 2.1;
    }

    @media screen and (max-width: 768px) {
      text-align: center;
    }
  }

  .concept__button-area {
    grid-area: button;
    width: 100%;
    display: block;

    .u-button-01 {
      margin: 0 0 auto 0;
      display: inline-block;

      @media screen and (max-width: 768px) {
        margin: 0 auto;
        display: block;
      }
    }
  }

  .concept__banner-area {
    img {
      margin: 20rem auto 0;
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 5px;
      position: relative;
      z-index: 1;

      @media screen and (max-width: 768px) {
        margin: 2rem auto;
      }
    }
  }
}

.movie {
  overflow: hidden;
  background: linear-gradient(
    220.11deg,
    #ffdfbb 41.92%,
    #ffecdc 47.86%,
    #d6f4f5 58.47%
  );
  padding: 15rem 0;
  position: relative;

  @media screen and (max-width: 768px) {
    padding: 0;
    background: none !important;
  }

  .movie__inner {
    z-index: 1;
    max-width: 95rem;
    margin: 0 auto;
    width: 100%;
    position: relative;

    video {
      background: var(--color-text);
      position: relative;
      border-radius: var(--radius-md);
      z-index: 1;

      @media screen and (max-width: 768px) {
        border-radius: 0px;
      }
    }

    &:before {
      width: 80rem;
      right: -40rem;
      top: -35rem;
      min-width: 40rem;
      aspect-ratio: 1/1;
      content: "";
      border-radius: 9999px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      position: absolute;
      z-index: 0;
    }
  }
}

:root {
  /* 基本色（グラデーション＋テキストカラー） */
  --gradient-01: linear-gradient(
    90deg,
    rgba(126, 183, 235, 1),
    rgba(97, 165, 228, 1)
  );
  --gradient-01-text: rgba(97, 165, 228, 1);

  --gradient-02: linear-gradient(
    90deg,
    rgba(231, 164, 218, 1),
    rgba(227, 137, 210, 1)
  );
  --gradient-02-text: rgba(227, 137, 210, 1);

  --gradient-03: linear-gradient(
    90deg,
    rgba(107, 181, 131, 1),
    rgba(75, 158, 102, 1)
  );
  --gradient-03-text: rgba(75, 158, 102, 1);

  --gradient-04: linear-gradient(
    90deg,
    rgba(243, 184, 122, 1),
    rgba(238, 158, 82, 1)
  );
  --gradient-04-text: rgba(238, 158, 82, 1);

  --gradient-05: linear-gradient(95.52deg, #7bcacd 19.19%, #56b7c4 82.37%);

  --gradient-05-text: #7bcacd;

  --gradient-06: linear-gradient(
    90deg,
    rgba(255, 150, 150, 1),
    rgba(255, 100, 100, 1)
  );
  --gradient-06-text: rgba(255, 100, 100, 1);

  /* サイズ（必要なら追加可能） */
  --border-radius-base: 10px;
  --transition-base: 0.3s ease;
}
.temp {
  position: relative;
  background: var(--color-bg-gradient);

  a {
    text-decoration: none;
  }

  a:hover {
    opacity: 0.8;
    cursor: pointer;
  }
  .swiper-slide {
    .temp__text-area,
    .c-button-area {
      display: none;
    }
  }

  .temp__area {
    margin: 0 auto;
    padding: var(--space-2xl) 1rem 3.2rem;
    max-width: 134rem;
    width: 100%;

    @media (max-width: 768px) {
      padding: var(--space-lg) 0;
      background: var(--color-bg-light);
    }
    .u-title-sub {
      margin-bottom: var(--space-lg);
    }

    .switer-container {
      position: relative;
      padding: 0 2rem;

      @media (max-width: 768px) {
        padding: 0;
      }
    }
    .swiper-wrapper {
      padding-bottom: 4rem;
    }
    .swiper {
      margin: 0 auto;
      padding-bottom: 2rem;
      margin-bottom: 1rem;

      @media (max-width: 768px) {
        padding: 0 1.8rem 0rem;
      }
    }

    .swiper .swiper-slide {
      height: auto;
      overflow: hidden;
      &:before {
        z-index: 1;
        content: "";
        position: absolute;
        top: -1rem;
        left: -10rem;
        width: 40%;
        max-width: 23rem;
        aspect-ratio: 1/1;
        border-radius: 100%;
        background: rgba(255, 255, 255, 0.2);
        @media (max-width: 768px) {
          left: -8rem;
        }
      }
    }

    .swiper .swiper-slide-item {
      height: 100%;
    }

    .temp__title {
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      font-family: var(--font-sans-semibold);
      padding: 0.2rem 0.9rem 0.4rem;
      line-height: 1.35;
      margin-bottom: 0.7rem;
      @media (max-width: 768px) {
        font-size: var(--fs-md);
        padding: 0.2rem 0.5rem 0.4rem;
      }
    }

    .temp__description {
      font-size: var(--fs-md);
      line-height: 1.5;
      font-family: var(--font-sans-bold);
      @media (max-width: 768px) {
        font-size: var(--fs-xs);
      }
    }

    .temp__catch {
      font-size: var(--fs-xl);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      font-family: var(--font-sans-bold);
      @media (max-width: 768px) {
        font-size: var(--fs-lg);
      }
    }

    .temp__tip {
      position: absolute;
      top: 0;
      width: fit-content;
      right: 1.5rem;
      z-index: 2;
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      font-family: var(--font-sans-bold);
    }

    .temp__card {
      border-radius: var(--radius-sm);
      padding: 1rem 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .swiper-container-wrap {
      overflow: visible;
    }

    .swiper-pagination {
      bottom: 1rem;
    }

    .swiper-pagination-bullet {
      border-radius: 999px;
    }

    .swiper-pagination-bullet-active {
      background: var(--color-primary);
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-size: 2rem;
      color: var(--color-primary);
    }

    .swiper-button-next,
    .swiper-button-prev {
      border-radius: 9999px;
      width: var(--space-2xl);
      height: var(--space-2xl);
      background: rgba(255, 255, 255, 0.8);
      @media (max-width: 768px) {
        display: none;
      }
    }

    .swiper-button-next {
      right: -5.1rem;
      top: calc(50% - 3.8rem);
    }

    .swiper-button-prev {
      left: -5.1rem;
      top: calc(50% - 3.8rem);
    }
    .temp__button-area {
      margin-top: 0;
    }
  }
  .temp__wrapper {
    padding: 0 8rem;
    width: 100%;
    @media screen and (max-width: 768px) {
      padding: 0;
      overflow: hidden;
    }
  }
  .temp__tip {
  }

  .temp__card {
    background: #333;
    background-image: var(--gradient-01);
    color: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: var(--space-md) 0;
  }
  .c-h2-area {
    font-size: var(--fs-lg);
    font-family: var(--font-sans-bold);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.6rem;
  }

  /* 背景テキスト色の変更 */
  .temp__card--c-color-001 {
    background-image: var(--gradient-01);

    .temp__title {
      color: var(--gradient-01-text);
    }

    .c-h2-area {
      color: var(--gradient-01-text);
      border-bottom-color: var(--gradient-01-text);
    }

    .c-button__link {
      color: var(--gradient-01-text);
      border-color: var(--gradient-01-text);
      font-family: var(--font-sans-semibold);
    }
  }

  .temp__card--c-color-002 {
    background-image: var(--gradient-02);

    .temp__title {
      color: var(--gradient-02-text);
    }

    .c-h2-area {
      color: var(--gradient-02-text);
      border-bottom-color: var(--gradient-02-text);
    }

    .c-button__link {
      color: var(--gradient-02-text);
      border-color: var(--gradient-02-text);
    }
  }

  .temp__card--c-color-003 {
    background-image: var(--gradient-03);

    .temp__title {
      color: var(--gradient-03-text);
    }

    .c-h2-area {
      color: var(--gradient-03-text);
      border-bottom-color: var(--gradient-03-text);
    }

    .c-button__link {
      color: var(--gradient-03-text);
      border-color: var(--gradient-03-text);
    }
  }

  .temp__card--c-color-004 {
    background-image: var(--gradient-04);

    .temp__title {
      color: var(--gradient-04-text);
    }

    .c-h2-area {
      color: var(--gradient-04-text);
      border-bottom-color: var(--gradient-04-text);
    }

    .c-button__link {
      color: var(--gradient-04-text);
      border-color: var(--gradient-04-text);
    }
  }

  .temp__card--c-color-005 {
    background-image: var(--gradient-05);

    .temp__title {
      color: var(--gradient-05-text);
    }

    .c-h2-area {
      color: var(--gradient-05-text);
      border-bottom-color: var(--gradient-05-text);
    }

    .c-button__link {
      color: var(--gradient-05-text);
      border-color: var(--gradient-05-text);
    }
  }

  .temp__card--c-color-006 {
    background-image: var(--gradient-06);

    .temp__title {
      color: var(--gradient-06-text);
    }

    .c-h2-area {
      color: var(--gradient-06-text);
      border-bottom-color: var(--gradient-06-text);
    }

    .c-button__link {
      color: var(--gradient-06-text);
      border-color: var(--gradient-06-text);
    }
  }

  .temp__card-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(16.2rem, 30%) 1fr;
    @media (max-width: 768px) {
      grid-template-columns: minmax(12rem, 30%) 1fr;
    }
  }

  .temp__card {
    position: relative;
  }

  .temp__card:before,
  .temp__card:after {
    content: "";
    position: absolute;
    width: calc(100% - 3rem);
    height: 0.1rem;
    background: rgba(255, 255, 255, 0.5);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
  }
  .temp__card:not(:has(.c-button-area))::after {
    display: none;
  }

  .temp__card:before {
    top: 0.7rem;
  }

  .temp__card:after {
    bottom: 0.7rem;
  }

  .temp__card-inner:before {
    bottom: 0;
    top: auto;
  }

  .temp__image-area {
    padding-left: var(--space-sm);
    display: grid;
    height: 100%;
    place-content: center;
    @media (max-width: 768px) {
      padding-left: 0.8rem;
    }
  }

  .temp__image-area img {
    border-radius: 9999px 9999px 0 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    @media (max-width: 768px) {
      aspect-ratio: 60 / 77;
    }
  }

  .temp__card-text-area {
    display: grid;
    align-items: center;
    padding: var(--space-sm);
  }

  .temp__cart-text-inner {
    display: grid;
    gap: 0.5rem;
  }

  .temp__title {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    background: var(--color-white);
    color: var(--gradient-01-text);
    font-size: var(--fs-md);
    font-weight: bold;
    width: fit-content;
    margin-right: auto !important;
  }

  @media (min-width: 767px) {
    .temp__title {
      font-size: var(--fs-3xl);
    }
  }

  .temp__description {
    font-size: var(--fs-sm);
    color: var(--color-white);
  }

  @media (min-width: 767px) {
    .temp__description {
      font-size: var(--fs-lg);
    }
  }

  .temp__catch {
    font-size: var(--fs-lg);
    font-weight: bold;
    font-family: var(--font-sans-bold);
    color: var(--color-white);
  }

  @media (min-width: 767px) {
    .temp__catch {
      font-size: var(--fs-2xl);
    }
  }

  .temp__add-desc .temp__text-area {
    line-height: var(--lh-tight);
    padding: 0 1.5rem;
    font-family: var(--font-sans);
  }

  .temp__add-desc {
    font-size: var(--fs-sm);
  }

  .temp__add-desc .temp__text-area p {
    margin-bottom: 1em;
    font-size: var(--fs-sm);
  }

  .temp__text-area-inner .c-h2-area:not(:first-child) {
    margin-top: 2rem;
  }

  .temp__text-area-inner {
    background: var(--color-white);
    border-radius: var(--radius-md);
    color: #555;
    padding: var(--space-md);

    li {
      list-style: disc outside;
      padding: 0.25em 0.5rem 0.25rem 0;
      margin-left: 3.5rem;
    }
    ul {
      margin: 1.6rem 0;
    }
    .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
      > table {
      margin: 2.4rem 0;
      border-radius: 4px !important;
      overflow: hidden;
      th,
      td {
        border: none;

        border: 1px solid #ddd;
      }
      th {
        font-family: var(--font-sans-bold);
      }
      tr:nth-child(even) {
        background: #f9f9f9;
      }
    }
    strong {
      font-family: var(--font-sans-semi-bold);
    }
  }

  .c-button {
    margin: 2rem 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    @media (max-width: 768px) {
      margin: 1rem 0;
    }
  }

  .c-button__link {
    display: inline-block;
    padding: var(--space-xs) 2rem;
    width: fit-content;
    background: var(--color-white);
    border-radius: 5px;
    font-size: var(--fs-sm);
    color: var(--gradient-01-text);
    border: 1px solid var(--gradient-01-text);
    text-decoration: none;
    min-width: 12.4rem;
    transition: all 0.3s ease;
    font-weight: var(--font-sans-semibold);
    @media (max-width: 768px) {
      padding: var(--space-xs) 1.5rem;
      font-size: var(--fs-xs);
    }
  }

  .c-button__link:hover {
    opacity: 0.8;
  }

  /* 色違いパターン */
  .temp--01 .temp__card {
    background-image: var(--gradient-02);
  }

  .temp--01 .temp__title,
  .temp--01 .c-h2-area,
  .temp--01 .c-button__link {
    color: var(--gradient-02-text);
    margin-bottom: 2rem;
  }

  .temp--01 .c-h2-area {
    border-bottom-color: var(--gradient-02-text);
  }

  .temp--01 .c-button__link {
    border-color: var(--gradient-02-text);
    font-family: var(--font-sans) !important;
    font-family: "FOT-ニューセザンヌ Pro DB", "Noto Sans JP", "Poppins", serif,
      "Yu Mincho", Yumincho, serif !important;
  }

  .temp--01 .c-button__link:hover {
    background: var(--gradient-02-text);
    color: var(--color-white);
  }
  &.temp--page {
    .temp__area {
      padding: 0 2.4rem;
      @media (max-width: 768px) {
        padding: 0 0.8rem;
      }
    }
    .temp__card {
      margin: 2.4rem auto;
    }
    .temp__image-area {
      padding: 1.5rem;
      @media screen {
        padding-right: 0;
      }
    }
    .temp__title {
      font-size: var(--fs-3xl);
      padding: 0.5rem 1.5rem 0.7rem;
      font-family: var(--font-sans-semibold);
      @media (max-width: 768px) {
        font-size: var(--fs-md);
      }
    }
    .temp__description {
      font-size: var(--fs-lg);
      font-family: var(--font-sans);
      @media (max-width: 768px) {
        font-size: var(--fs-sm);
      }
    }
    .temp__catch {
      font-size: var(--fs-2xl);
      font-family: var(--font-sans-bold);
      @media (max-width: 768px) {
        font-size: var(--fs-lg);
      }
    }
    .temp__tip {
      @media (max-width: 768px) {
        position: relative;
        right: 0;
      }
    }
  }
}
.temp__navi {
  .wp-block-buttons {
    display: grid;
    max-width: 85rem;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .wp-block-button {
    .wp-block-button__link {
      width: 100% !important;
      display: block !important;
    }
  }
}
.topic {
  position: relative;
  @media screen and (max-width: 768px) {
    padding: 0rem 0;
  }

  .topic__wrapper {
    display: block;
    max-width: 124.8rem;
    margin: 0 auto;
    width: 100%;
    background: var(--color-bg-light);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) 0;
    border: 1px solid var(--line-color-01);

    @media screen and (max-width: 768px) {
      padding: var(--space-2xl) var(--space-md);
      border-radius: 0;
      background: transparent;
      border: none;
      border-top: 1px solid var(--line-color-01);
    }
    .u-title,
    .u-title-sub {
      @media (max-width: 768px) {
        text-align: left;
      }
    }
  }

  .c-title-001 {
    h2 {
      @media screen and (max-width: 768px) {
        text-align: left;
      }
    }
  }

  .c-sub-title-001 {
    h2 {
      @media screen and (max-width: 768px) {
        text-align: left;
      }
    }
  }

  .topic__scroll-area {
    display: block;
    @media screen and (max-width: 768px) {
      overflow: auto !important;
      width: 100%;
      padding: 2rem 0;
      cursor: grab;
    }

    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar-track {
      background: #f6e0cb;
    }

    &::-webkit-scrollbar {
      height: 0.2rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--color-primary);
      border-radius: 4px;
    }
  }

  .topic__inner {
    max-width: 90rem;
    margin: 0 auto;
    margin-top: 7rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: 9.6rem 3rem;

    @media screen and (max-width: 768px) {
      max-width: none;
      display: flex;
      margin-top: -1.4rem;
      /* width: fit-content; */
      width: fit-content;
    }

    .topic__block {
      max-width: 37rem;
      margin: 0 auto;

      @media screen and (max-width: 768px) {
        width: 20.4rem;
      }

      .topic__image {
        position: relative;

        &:before {
          content: "";
          position: absolute;
          z-index: 1;
          right: 0;
          bottom: 0;
          width: 4.2rem;
          height: 4rem;
          background: var(--color-primary-gradient);
          border-radius: 5px 0 0 0;

          @media screen and (max-width: 768px) {
            width: 3.9rem;
            height: 3.7rem;
          }
        }

        &:after {
          position: absolute;
          content: "";
          z-index: 2;
          bottom: 1.3rem;
          width: var(--space-xs);
          height: var(--space-xs);
          border-right: 2px solid var(--color-white);
          border-bottom: 2px solid var(--color-white);
          transform: rotate(-45deg);
          right: 1.7rem;
        }
      }

      .topic__block-image {
        position: relative;
        border-radius: 9999px 999.9rem 0 0;
        overflow: hidden;

        img {
          width: 100%;
          height: auto;
          transition: 0.3s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .topic__block-title {
        margin-top: 1.3rem;
        margin-bottom: 0.5rem;
        font-weight: bold;
        font-size: var(--fs-xl);

        letter-spacing: 0.3em;

        @media screen and (max-width: 768px) {
          font-size: var(--fs-sm);
          letter-spacing: 0.2rem;
        }
      }

      .topic__block-text {
        font-size: var(--fs-sm);

        @media screen and (max-width: 768px) {
          font-size: var(--fs-xs);
        }
      }
    }
    .topic__block-heading {
      line-height: var(--lh-tight);
      font-family: var(--font-sans-semibold);
      letter-spacing: 0.25em;
    }
    .topic__main-title-area {
    }

    .topic__main-title {
      text-align: center;
    }

    .topic__sub-title {
      text-align: center;
    }
  }
}
.menu {
  .block__display & {
    .menu__title-area {
      display: none;
    }
  }
  .menu__block-wrapper & {
    .menu__area {
      padding: 6.4rem 1.6rem;
      @media (max-width: 768px) {
        padding: 3.2rem 0.8rem;
      }
    }
  }
  overflow: hidden;
  position: relative;
  &:before {
    width: 100rem;
    right: -20rem;
    top: -25rem;
    min-width: 40rem;
    aspect-ratio: 1 / 1;
    content: "";
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: absolute;
  }
  &:after {
    width: 70rem;
    right: -10rem;
    bottom: 0rem;
    min-width: 50rem;
    aspect-ratio: 1 / 1;
    content: "";
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: 2;
  }

  .menu__area {
    padding: 5.8rem 0;
    background: var(--color-bg-gradient-01);
    @media screen and (max-width: 768px) {
      padding-left: 0.8rem;
      padding-right: 0.8rem;
    }
  }

  .menu__title-area {
    margin-bottom: 0rem;

    .u-title-sub {
      margin-bottom: 0rem;
    }
  }
  .u-tab-button-area {
    @media (max-width: 768px) {
      margin: 2.4rem 0 1.1rem;
    }
  }
  .menu__wrapper {
    position: relative;
    z-index: 3;
    max-width: 124.8rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin: 0 auto;
    padding: 6rem 1rem;

    @media screen and (max-width: 768px) {
      padding: var(--space-xl) var(--space-md) var(--space-lg);

      border-radius: 8px;
    }
  }

  .menu__inner {
    max-width: 105.6rem;
    margin: 0 auto;
    .u-title-area-parallel {
      @media (max-width: 768px) {
        place-content: baseline;
      }
    }
  }

  .menu__list-tab-content {
    display: none;

    font-size: var(--fs-sm);
    @media (max-width: 768px) {
      font-size: var(--fs-xs);
    }
  }

  .menu__list-tab-content.js__active {
    display: block;
  }

  .menu__bar {
    padding: var(--space-sm) 4rem var(--space-sm) 6.8rem;
    background: var(--color-white);
    position: relative;
    border-radius: 5px;
    font-size: var(--fs-md);
    margin: 0rem 0 1.6rem;
    &:first-child {
      margin-top: 0;
    }
    @media (max-width: 768px) {
      font-size: 1.2rem;
      padding: 1.8rem 4rem 1.8rem 5.6rem;
    }
  }

  .menu__inner {
    .js__menu-toggle {
      user-select: none;

      &:hover {
        cursor: pointer;
      }

      &:after {
        content: "";
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.6rem;
        height: 2px;
        background-color: var(--color-text);
        border-radius: var(--radius-md);
        transition: 0.4s;
      }

      &:before {
        content: "";
        position: absolute;
        right: 2.2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 1.6rem;
        background-color: var(--color-text);
        border-radius: var(--radius-md);
        transition: 0.4s;
        transition-delay: 0.2s;
      }

      &.js__active {
        &:after {
          rotate: 180deg;
        }

        &:before {
          top: 1.8rem;
          height: 0;
          opacity: 0;
          transform: rotate(90deg);
        }
      }
    }
  }
  .menu__bar-icon-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.1rem;
    display: grid;
    place-items: center;
    width: 3.9rem;
    height: 3.7rem;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-right: 2rem;
    background: var(--color-bg-light);
    border-radius: 9999px;
  }
  .menu__bar-icon {
  }
  .menu__bar-text {
    letter-spacing: 0.05em;
    color: var(--color-text-strong);
    font-family: var(--font-sans-semibold);
  }

  .menu__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0rem;
    padding-bottom: 3.2rem;
    gap: 0.6rem 0;
    transition: all 0.3s ease-in-out;
    &.js__menu-toggle-c {
      max-height: 0;
      overflow: hidden;
      transition: 0.3s;
      padding: 0;

      &.js__active {
        max-height: 80vh;
        overflow: auto;
        padding-bottom: 3.2rem;
      }
    }

    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.8rem 0;
      padding: 0rem 0rem 1.6rem 0rem;
    }

    .menu__list-li {
      text-decoration: none !important;
      color: var(--color-text);
      padding: 1.2rem 3.1rem 1.2rem 0.6rem;
      display: grid;
      align-items: center;
      transition: all 0.3s ease-in-out;
      border-bottom: 1px solid var(--color-white);
      position: relative;
      line-height: 1.9;
      height: 100%;
      @media screen and (max-width: 768px) {
        line-height: 1.9;

        padding: 0.8rem 4.4rem 0.8rem 1.2rem;
      }
      &:after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0.8rem;
        height: 0.8rem;
        border-right: var(--color-primary-light-02) 2px solid;
        border-bottom: var(--color-primary-light-02) 2px solid;
        rotate: -45deg;
        transition: 0.3s;
        @media screen and (max-width: 768px) {
          right: 2.6rem;
        }
      }

      &:hover {
        &:after {
          @media screen and (max-width: 768px) {
            right: 2.2rem;
          }
        }
      }
    }
  }

  .menu__list-indent-inner {
    padding: 1rem 0 1rem 4rem;

    .menu__list.js__menu-toggle-c.js__active {
      padding-bottom: 1.6rem;
      @media (max-width: 768px) {
        padding-bottom: 0.8rem;
      }
    }
    &.js__menu-toggle-c {
      padding: 0rem 0 0rem 4rem;
      /* max-height: 0; */
      overflow: hidden;
      transition: 0.3s;

      &.js__active {
        overflow: auto;
        padding-bottom: 3.2rem;
      }
    }
  }

  .menu__iist-inner-title {
    font-size: var(--fs-sm);
    padding: 1rem 4rem 1rem 1rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    margin: 0.8rem 0;
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0rem;
    }
    @media screen and (max-width: 768px) {
      line-height: 1.5;
    }
  }
  .menu__iist-inner-title-b {
    padding: 1.4rem 1.6rem 1.6rem;
    border-radius: 4px;
    margin: 1rem 0;
    background: rgba(251, 232, 213, 1);
    @media screen and (max-width: 768px) {
      line-height: 1.5;
    }
  }
}
body.js__tmodal-active,
body.js__lmodal-active,
body.stmodal__no-scroll,
body.no-scroll {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.doctor {
  position: relative;
  padding: var(--space-3xl) 0 var(--space-2xl);
  .is-subpage & {
    &:after,
    &:before {
      display: none;
    }
  }
  &:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -25rem;
    left: 0;
    width: 100%;
    height: 25rem;
    background: linear-gradient(
      180deg,
      rgba(254, 244, 233, 0) 0%,
      #fef4e9 64.43%
    );
  }
  &:after {
    width: 80rem;
    left: 0rem;
    top: -10rem;
    min-width: 50rem;
    aspect-ratio: 1 / 1;
    content: "";
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: -1;
  }

  .doctor__wrapper {
    &:before {
    }
  }

  .doctor__inner {
  }

  .doctor__list {
  }

  .doctor__list-block {
    margin: 5rem auto;
    max-width: 103.4rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 2rem;
    color: var(--color-text);
    img {
      border-radius: 0 9999px 9999px 0;
    }
  }

  .doctor__list-block--reverse {
    .doctor__list-block-image-area {
      order: 1;

      img {
        border-radius: 9999px 0 0 9999px;
      }
    }

    .doctor__list-block-text-area {
    }
  }

  .doctor__list-block-image-area {
    width: 50rem;
    order: -1;

    img {
      width: 100%;
      display: block;
      height: auto;
      margin-left: 0;
      margin-right: auto;
      position: relative;
    }
  }

  .doctor__list-block-text-area {
    max-width: 39rem;
    margin: 0 auto;
    display: grid;
    place-content: center;
  }

  .doctor__list-block-text-name {
    font-size: var(--fs-3xl);
    font-weight: bold;
    letter-spacing: var(--ls-widest);
    margin-bottom: 2rem;
    font-family: var(--font-sans-semibold);

    span {
      text-decoration: none;
      font-size: var(--fs-md);
      font-style: normal;
      font-weight: normal;
      letter-spacing: var(--ls-wider);
    }
  }

  .doctor__list-block-text-position {
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: var(--lh-compact);
    letter-spacing: var(--ls-widest);
    font-family: var(--font-sans-semibold);
  }

  .doctor__list-block-text-desc {
    font-size: var(--fs-sm);
    letter-spacing: 0.2rem;

    p {
      line-height: var(--lh-base);
    }
  }

  .doctor__list-button-area {
    .u-button-01 {
      left: 0;
      margin-right: auto;
      margin-left: 0;
    }
  }

  /* === SP (max-width: 768px) 用スタイル === */
  @media (max-width: 768px) {
    .doctor {
      padding: var(--space-2xl) 0;
      padding-bottom: 0;
    }

    /* doctor__inner 内のタイトル調整 */
    .doctor__inner {
      .u-title,
      .u-title-sub {
        text-align: left;
        padding: 0 var(--space-md);
      }
    }

    /* リストブロック全体のSPレイアウト */
    .doctor__list-block {
      grid-template-columns: 1fr;
      grid-template-areas: "image" "text";
      margin-top: 3rem;
      padding-right: 6.5rem;
      padding-left: 0;

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

    /* reverse時の左右パディング反転 */
    .doctor__list-block--reverse {
      padding-left: 6.5rem;
      padding-right: 0;

      .doctor__list-block-image-area {
        order: 0;

        img {
          width: 80%;
          display: block;
          height: auto;
          margin-left: auto;
          margin-right: 0;
          position: relative;

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

      .doctor__list-block-text-area {
        padding: 0 var(--space-md) 0 0;
      }
    }

    /* 通常の画像エリア調整 */
    .doctor__list-block-image-area {
      width: 100%;
      order: 0;
    }

    /* テキストエリア調整 */
    .doctor__list-block-text-area {
      max-width: 100%;
      padding: 0 0 0 var(--space-md);
    }

    /* 医師名フォント調整 */
    .doctor__list-block-text-name {
      font-size: var(--fs-2xl);
      margin-bottom: 0;
    }

    /* 職位フォントサイズ */
    .doctor__list-block-text-position {
      font-size: 1.3rem;
    }

    /* 説明テキスト調整 */
    .doctor__list-block-text-desc {
      margin-top: 0.6rem;
      font-size: var(--fs-xs);
    }

    /* ボタン配置調整 */
    .doctor__list-button-area {
      .u-button-01 {
        margin-right: auto;
      }
    }
  }
}

.photo__slide {
  position: relative;
  .photo__slide-wrapper {
    overflow: hidden;
    position: relative;
  }

  .photo__slide-track {
    display: flex;
    width: fit-content;
    gap: 2rem;
    animation: scroll-track 50s linear infinite;
  }

  .photo__slide {
    flex-shrink: 0;
    width: 36rem;
    height: 24rem;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    @media screen and (max-width: 768px) {
      width: 23.6rem;
      height: 15.7rem;
    }
  }

  .photo__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@keyframes scroll-track {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.clinic {
  position: relative;
  padding: var(--space-2xl);
  border-radius: var(--radius-md);
  border-radius: 0;
  border: none;
  .is-subpage & {
    background: var(--color-bg-gradient);
  }

  .clinic__wrapper {
    padding: var(--space-2xl) 0;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    max-width: 124.8rem;
    margin: 0 auto;
    background: rgba(252, 249, 245, 1);
    .is-subpage & {
      padding-top: 4.8rem;
      padding-left: 6.4rem;
      padding-right: 6.4rem;
      max-width: 112rem;
      @media (max-width: 768px) {
        padding-top: 2.4rem;

        padding-left: 0.8rem;
        padding-right: 0.8rem;
      }
    }
  }

  .clinic__inner {
    padding: 0 var(--space-lg);
    @media (max-width: 768px) {
      padding: 0;
    }
  }

  .clinic__title-area {
    margin-bottom: 0;
  }

  .clinic__takasaki-page & {
    .clinic__list--ota {
      display: none !important;
    }
  }
  .clinic__ota-page & {
    .clinic__list--takasaki {
      display: none;
    }
  }
  .clinic__takasaki-page &,
  .clinic__ota-page & {
    .u-button-area {
      display: none !important;
    }
  }

  .clinic__list {
    margin: 3.2rem auto;
    font-family: var(--font-sans-semibold);
    color: var(--color-text);
    padding: var(--space-lg);
    max-width: 111.8rem;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .clinic__list-block {
    display: grid;
    grid-template-columns: 0.95fr 1fr;
    gap: var(--space-md) 3.2rem;
    grid-template-areas:
      "top top"
      "image text"
      "map text"
      "map button"
      "map bottom";
  }

  .clinic__top {
    grid-area: top;
    letter-spacing: 0.25rem;
    font-size: var(--fs-xl);
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(252, 249, 245, 1);
    position: relative;
    margin-bottom: 2rem;
    line-height: var(--lh-compact);
    font-family: var(--font-sans-semibold);

    &::after {
      content: "";
      height: 2.3rem;
      width: 0.2rem;
      border-radius: var(--radius-md);
      background: var(--color-primary);
      position: absolute;
      left: 1.5rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }
  }

  .clinic__image-area {
    grid-area: image;
    max-width: 49.5rem;
  }

  .clinic__image {
    display: block;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-03);
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.sub-img {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        animation: fade 12s infinite;
        animation-delay: 6s;
      }
    }
  }

  .clinic__map {
    grid-area: map;
    margin-top: 2rem;
    text-align: center;

    iframe {
      width: 100%;
      max-width: 49.5rem;
      aspect-ratio: 16/9;
      border-radius: var(--border-radius-03);
      filter: grayscale(100%);
      border: none;
    }
  }

  .clinic__text {
    grid-area: text;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    font-family: var(--font-sans-semibold) !important;
    a {
      text-decoration: none !important;
      color: var(--color-text);
      &:hover {
        font-family: var(--font-sans-semibold) !important;
        text-decoration: none;
      }
    }
  }

  .clinic__title {
    font-weight: bold;
    color: var(--color-primary);
    margin-top: 2.4rem;
    font-family: var(--font-sans-semibold);
    margin-bottom: 0.5rem;

    &:first-child {
      margin-top: 0;
    }
  }

  .clinic__icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;

    a {
      display: block;
      font-family: var(--font-sans-semibold) !important;

      img {
        display: block;
        width: 24px;
        height: 24px;
      }
    }
  }

  .clinic__schedule {
    margin-top: 2.4rem;
    font-size: var(--fs-xs);

    table {
      width: 100%;
      border-collapse: collapse;
      max-width: 37rem;
      margin: 0;

      th,
      td {
        padding: var(--space-2xs);
        text-align: center;
        color: var(--color-primary);
        background: transparent;
        border-bottom: 1px solid var(--line-color-01);
      }

      th {
        font-size: var(--fs-sm);
        border-top: 1px solid var(--color-primary);
        border-bottom: 1px solid var(--color-primary);

        &:first-child {
          min-width: 13.2rem;
        }
      }

      td:first-child {
        color: var(--color-text);
      }
    }
  }

  .clinic__button-area {
    margin: 0 auto;
    grid-area: button;
    width: 100%;
    display: block;

    .u-button-01 {
      margin-left: 0;
      margin-right: auto;
    }
  }

  /* ========== 以下：レスポンシブ対応 ========== */
  @media screen and (max-width: 768px) {
    /* --- clinic 全体のpadding調整 --- */
    padding: 0;

    /* --- clinic__wrapper --- */
    .clinic__wrapper {
      padding: 0 0.8rem;
      background: transparent;
      border: none;
    }

    /* --- clinic__title-area --- */
    .clinic__title-area {
      grid-template-columns: 1fr;
    }

    /* --- u-title-sub --- */
    .u-title-sub {
      width: 100%;
      place-content: center;
    }

    /* --- clinic__list --- */
    .clinic__list {
      margin: 1.1rem auto 3.2rem;
      padding: var(--space-md);
    }

    /* --- clinic__top --- */
    .clinic__top {
      font-size: var(--fs-sm);
      margin-bottom: 0.2rem;

      &::after {
        height: 1.8rem;
      }
    }
    .clinic__image-area {
      max-width: 100%;
    }
    /* --- clinic__image --- */
    .clinic__image {
      border-radius: 0;
      height: 100%;
    }

    /* --- clinic__list-block：レイアウト切替 --- */
    .clinic__list-block {
      grid-template-columns: 1fr;
      grid-template-areas:
        "top"
        "image"
        "text"
        "map"
        "button";
    }

    /* --- clinic__text 以下 --- */
    .clinic__text {
      font-size: var(--fs-xs);
      .clinic__title {
        margin-bottom: 0;
      }

      .clinic__schedule {
        font-size: 1.1rem;

        table {
          max-width: 100%;

          th,
          td {
            padding: 0.5rem;
            font-size: 1.1rem;
          }
          th {
            &:first-child {
              min-width: 10.2rem;
            }
          }
        }
      }
    }

    /* --- clinic__button-area --- */
    .clinic__button-area {
      margin: 0 auto;
      width: 100%;
      .u-button-01 {
        margin: 0 auto;
        display: block;
      }
    }
    /* --- clinic__map --- */
    .clinic__map {
      margin-top: 0;
      iframe {
        border-radius: 0;
        aspect-ratio: 311/329;
      }
    }
  }
}

@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
.news {
  .is-subpage & {
    &:before,
    &:after {
      display: none;
    }
  }
  &.news__block {
    padding-top: 0;
    .news__block {
      max-width: calc(100% - 6.4rem);
      margin: 0 auto;
      @media (max-width: 768px) {
        max-width: 100%;
      }
    }
    &:before,
    clinic__title &:after {
      display: none;
    }
    .news__wrapper {
      @media (max-width: 768px) {
        width: calc(100% - 2.4rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        border-radius: var(--radius-md);
      }
    }
  }
  position: relative;
  padding: 6rem 0;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: -7rem;
    width: 100%;
    height: 55rem;
    z-index: -2;
    background: var(--color-bg-gradient-01);
  }
  &:after {
    width: 70rem;
    right: -10rem;
    top: -26rem;
    min-width: 50rem;
    aspect-ratio: 1 / 1;
    content: "";
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: -1;
  }

  .u-title-sub {
    margin-bottom: 0;
  }

  .u-title-area-parallel {
    margin-bottom: var(--space-lg);
  }

  .news__area {
  }
  .news__wrapper {
    padding: 6rem 0 var(--space-2xl) 0;
    max-width: 124.8rem;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
  }
  .news__inner {
    max-width: 105.6rem;
    margin: 0 auto;
  }

  .news__tab-area {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .news__tab-button-area {
    margin: 3.4rem 0;
  }
  .news__tab-content {
    display: none;

    &.js__active {
      display: block;
    }
  }

  .news__block {
    width: 100%;
    padding: 3.8rem 0;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: minmax(30rem, 25%) 1fr;
    gap: 2rem;
    grid-template-areas: "image text";
    &:first-child {
      padding-top: 0;
    }
  }

  .news__block-image-area {
    grid-area: image;
    aspect-ratio: 16/9;
    overflow: hidden;

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

  .news__block-text-area {
    flex: 1;
    grid-area: text;
    font-size: var(--fs-sm);
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid;
    gap: 1rem;
    align-items: center;
  }

  .news__block-text-date-tag-area {
    display: flex;
    gap: 1rem;
  }

  .news__block-text-date {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    width: fit-content;
    line-height: var(--lh-compact);
    padding: 0.5rem 0;
    display: grid;
    align-items: center;
  }

  .news__block-text-tag-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .news__block-text-tag {
    font-size: var(--fs-sm);
    color: var(--color-primary);
    width: fit-content;
    background: var(--color-white);
    padding: 0.7rem 1rem;
    border-radius: 9999px;
    line-height: var(--lh-compact);

    a {
      color: var(--color-primary);
      text-decoration: none;
      line-height: var(--lh-compact);
    }
  }

  .news__block-text-title {
    margin-top: 1rem;

    a {
      font-size: var(--fs-sm);
      color: var(--color-text);
      text-decoration: none !important;
    }
  }

  .news__button-area {
    margin-bottom: 0;
  }

  /* ========== 以下：レスポンシブ対応 ========== */
  @media (max-width: 768px) {
    padding: 4rem 0;
    &:before {
      height: 29rem;
    }
    /* --- .news__area --- */
    .news__area {
      .u-title-area-parallel {
        display: block;
        margin-bottom: 2rem;
      }

      .u-title {
        font-size: 3.8rem;
        text-align: left;
      }

      .u-title-sub {
        font-size: var(--fs-xs);
        text-align: left;
        margin-bottom: 0;
      }
    }

    /* --- .news__wrapper --- */
    .news__wrapper {
      width: calc(100% - 2.4rem);
      margin-left: auto;
      margin-right: 0;
      padding-top: 6rem;
      padding-left: 3.2rem;
      padding-right: 3.2rem;

      border-radius: 96px 0 0 0;
    }

    .u-tab-button {
      padding: 0.7rem 0.2rem;
    }
    /* --- .news__tab-button-area --- */
    .news__tab-button-area {
      margin: 2.5rem 0;
    }
    /* --- .news__block --- */
    .news__block {
      padding: 0;
      padding-top: 3.2rem;
      padding-bottom: 1.6rem;
      &:first-child {
        padding-top: 0;
      }
      grid-template-columns: minmax(9.92rem, 25%) 1fr;
      gap: 1.2rem;
    }

    /* --- .news__block-image-area --- */
    .news__block-image-area {
      border-radius: 0;
    }

    /* --- .news__block-text-area --- */
    .news__block-text-area {
      font-size: 1.1rem;
    }

    /* --- .news__block-text-date --- */
    .news__block-text-date {
      font-size: 1.1rem;
    }
    /* --- .news__block-text-date-tag-area --- */
    .news__block-text-date-tag-area {
      flex-direction: column;
      gap: 0.5rem;
    }

    /* --- .news__block-text-tag-wrapper --- */
    .news__block-text-tag-wrapper {
      gap: 0.5rem;
    }

    /* --- .news__block-text-tag --- */
    .news__block-text-tag {
      padding: var(--space-2xs) 0.8rem;
      font-size: var(--fs-xs);
    }
    /* --- .news__block-text-title --- */
    .news__block-text-title {
      margin-top: 0.2rem;
      line-height: 1.9;
      a {
        font-size: 1.2rem;
      }
    }
  }
}

.column {
  background: none;
  &.column__block {
    background: none;
    .column__wrapper {
      padding: 6rem 0 var(--space-2xl) 0;
      max-width: 124.8rem;
      margin: 0 auto;
      border-radius: var(--radius-xl);
      background: var(--color-bg-light);
      border: 1px solid var(--color-border);
      @media (max-width: 768px) {
        width: calc(100% - 2.4rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        border-radius: var(--radius-md);
      }
    }
    .column__list-block {
      max-width: calc(100% - 6.4rem);
      margin: 0 auto;
      @media (max-width: 768px) {
        max-width: 100%;
      }
    }
  }
  position: relative;
  /* === Area === */
  .column__area {
    padding: 6.4rem 0;
  }

  /* === Inner Grid Layout === */
  .column__inner {
    max-width: 106.4rem;
    margin: 0 auto;
    display: grid;
    grid-template-areas:
      "title list"
      "button list";
    grid-template-columns: 30rem 1fr;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  /* === Title Area === */
  .column__title-area {
    grid-area: title;
  }

  .u-title {
    text-align: left;
  }

  .u-title-sub {
    margin: 0;
    text-align: left;
  }

  /* === List Area === */
  .column__list-area {
    grid-area: list;
  }

  .column__list {
  }

  .column__list-block {
    padding: 2.4rem 0;
    border-top: 1px solid var(--color-border);

    &:last-child {
      border-bottom: 1px solid var(--color-border);
    }
  }

  .column__list-date-tag-area {
    display: flex;
    margin-bottom: 0.3rem;
    color: var(--color-primary);
    font-size: var(--fs-xs);
  }

  .column__list-date {
    display: flex;
    align-items: center;
  }

  .column__list-tag {
    margin-left: 1rem;
    padding: 0.4rem 1rem 0.5rem;
    background-color: var(--color-white);
    border-radius: 9999px;
    font-size: var(--fs-xs);
  }

  .column__list-title-area a {
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-base);
    text-decoration: none !important;

    &:hover {
      opacity: 0.8;
    }
  }

  /* === Button Area === */
  .column__button-area {
    grid-area: button;
  }

  .u-button-area {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .u-button-01 {
    margin-top: 0;
    margin-left: 0;
    margin-right: auto;
  }

  /* === Responsive: max-width 768px === */
  @media (max-width: 768px) {
    /* --- .column__area --- */
    .column__area {
      padding: 0;
    }

    /* --- .column__inner --- */
    .column__inner {
      grid-template-areas:
        "title"
        "list"
        "button";
      grid-template-columns: 1fr;
      gap: 2.4rem;
    }

    /* --- .column__title-area --- */
    .column__title-area {
    }

    /* --- .u-title --- */
    .u-title {
      font-size: var(--fs-4xl);
      margin-bottom: 0;
    }

    /* --- .u-title-sub --- */
    .u-title-sub {
    }

    /* --- .column__list-area --- */
    .column__list-area {
    }

    /* --- .column__list --- */
    .column__list {
    }

    /* --- .column__list-block --- */
    .column__list-block {
      &:first-child {
        padding-top: 0;
        border-top: none;
      }
    }

    /* --- .column__list-date-tag-area --- */
    .column__list-date-tag-area {
      font-size: 1.1rem;
    }

    /* --- .column__list-date --- */
    .column__list-date {
    }

    /* --- .column__list-tag --- */
    .column__list-tag {
      padding: 0.4rem 1rem 0.6rem;
    }

    /* --- .column__list-title-area --- */
    .column__list-title-area {
      line-height: 1.9;
      font-size: var(--fs-xs);
    }

    /* --- .column__button-area --- */
    .column__button-area {
    }

    /* --- .u-button-area --- */
    .u-button-area {
    }

    /* --- .u-button-01 --- */
    .u-button-01 {
      margin-left: auto;
    }
  }
}

.p-concept {
  min-height: 100vh;
  width: 100%;
  z-index: 0;
  position: relative;
  overflow: hidden;

  .p-concept__back {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    min-height: 100vh;
    overflow: visible;

    width: 100%;
    img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
    }
    &.p-concept__back--our-story {
      @media screen and (max-width: 768px) {
        left: 50%;
        transform: translateX(-66%);
        width: auto;
        aspect-ratio: 1179 /1271;
      }
    }
    &.p-concept__back--my-place {
      height: 100vh;
      transition: 0s !important;

      @media screen and (max-width: 1200px) {
        left: -22rem;
        transform: translateX(0%);
        width: auto;
        aspect-ratio: 2260/1413;
      }
      @media screen and (max-width: 768px) {
        left: 50%;
        transform: translateX(-30%);
      }
    }
    &.p-concept__back--beauty-path {
      @media screen and (max-width: 768px) {
        left: 50%;
        transform: translateX(-50%);
        aspect-ratio: 648/1271;
        width: auto;
        min-width: 100%;
      }
    }
    &.p-concept__back--beauty-garden {
      @media screen and (max-width: 1500px) {
        left: auto;
        right: 0%;
        transform: translateX(0);
        width: auto;
        aspect-ratio: 1464 / 1259;
      }
    }
  }
  .p-concept__back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 2s;
    transition-delay: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .js__is-view & {
    .p-concept__back::after {
      opacity: 1;
    }
  }
  .p-concept__inner {
    position: relative;
    z-index: 1;
    max-width: 124.8rem;
    margin: 0 auto;
    padding-top: calc(20rem + 10vh);
    padding-bottom: 30rem;
    @media screen and (max-width: 768px) {
    }
  }

  .p-concept__copy {
    opacity: 0;
    color: #fff;
    font-size: 6.2rem;
    max-width: 100%;
    width: 100%;
    * {
      max-width: 100%;
      width: 100%;
    }
    @media screen and (max-width: 768px) {
      font-size: 6vw;
    }
    transition: 0.5s;
    font-family: var(--font-sans-semibold);
    .js__is-view & {
      opacity: 1;
    }
  }
  h1 {
    display: none;
  }
  .p-concept__text-block {
    .wp-block-button__link {
      display: none;
      color: var(--color-white);
      display: flex;
      padding: 1.6rem 2.4rem;
      justify-content: center;
      gap: 1.2rem;
      align-items: center;
      border-radius: 999px;
      background: #4c423b;
      width: -moz-max-content;
      width: max-content;
      margin-top: 2.4rem;
      line-height: 1;
      &:before {
        content: "";
        height: 0.6rem;
        width: 0.6rem;
        background: var(--color-white);
        border-radius: 50%;
      }
      &:hover {
        opacity: 0.8;
      }
    }
    .editor-styles-wrapper & {
      padding: 1rem;
      margin: 2rem 0;
      border: 3px solid #000;
    }
    transition: all 0.6s ease-in-out;
    transition-delay: 0.1s;
    bottom: -1rem;
    opacity: 0;
    position: relative;
    line-height: 1.9;
    max-width: 55%;
    min-width: 30rem;
    margin-top: 6.4rem;
    margin-bottom: 6.4rem;
    padding: 2.4rem;
    font-size: 1.5rem;
    border-radius: 8px;
    background: rgba(240, 239, 235, 0.9);
    left: 0;
    margin-right: auto;
    margin-left: 1rem;
    &:nth-child(2n) {
      margin-left: auto;
      margin-right: 1rem;
    }
    .js__is-view &.js__inview--active {
      opacity: 1;
      bottom: 0;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    @media screen and (max-width: 1200px) {
      max-width: 65%;
    }
    @media screen and (max-width: 768px) {
      max-width: 85%;
    }
    img {
      display: block;
      border-radius: 8px;
      margin: 2rem auto;
    }

    h1,
    h2,
    h3,
    p {
      opacity: 0;
      transition: all 0.6s ease-in-out;
      transition-delay: 0.7s;
      line-height: 1.9;
      font-size: 1.6rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
    }
    h1 {
      display: block;
      font-size: 3.2rem;
      line-height: 1.35;
      margin-top: 0.25em;
      margin-bottom: 1.5em;
      font-family: var(--font-sans-semibold);
      line-height: 1.35;
    }
    h2 {
      font-size: 3.2rem;
      line-height: 1.35;
      margin-top: 0.25em;
      margin-bottom: 1.5em;
      font-family: var(--font-sans-semibold);
      line-height: 1.35;
      @media screen and (max-width: 768px) {
        font-size: 2.4rem;
      }
    }
    h3 {
      font-size: 2rem;
      padding: 0.5em 1em;
      line-height: 1.35;
      background: #ece5df;
      margin: 1em 0 1em;
      line-height: 1.35;
      font-family: var(--font-sans-semibold);
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
      }
    }
    h4 {
      font-family: var(--font-sans-semibold);
      font-weight: bold;

      font-size: 1.6rem;
      padding: 0.5rem 0.5rem 0.5rem 2rem;
      border-left: #666 solid 4px;
      line-height: 1.35;
      margin: 2rem 0;
    }
    p {
      font-size: 1.6rem;
      line-height: 1.9;
      margin-bottom: 1em;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
    }
    strong {
      font-weight: bold;
      font-family: var(--font-sans-semibold);
    }
    ul {
      margin: 1rem 0;
      padding: 1rem 0 1rem 2.4rem;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      list-style: disc outside;
      li {
        margin: 0.5rem 0;
      }
    }
    &.js__inview--active {
      h1,
      h2,
      h3,
      h4,
      p {
        opacity: 1;
      }
    }
  }

  .p-concept__text-block--center {
    max-width: 70rem;
    margin: 0 auto !important;
    margin-top: 6.4rem !important;
    margin-bottom: 6.4rem !important;
  }
}

.stmodal {
  .stmodal__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    padding: var(--space-md);
    place-items: center;

    .js__active & {
      z-index: var(--z-under-modal);
      display: grid;
      transition: opacity 0.3s ease-in-out;
    }
  }

  .stmodal-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    opacity: 0;

    transition: 0.3s;

    .js__active & {
      opacity: 1;
      z-index: var(--z-menu);
    }
  }
  .js__tmodal-active &,
  .js__lmodal-active & {
    .stmodal-back {
      background: rgba(0, 0, 0, 0);
    }
  }

  .stmodal__close {
    position: absolute;
    width: 6.4rem;
    height: 6.4rem;
    right: -3.5rem;
    top: -3.7rem;
    width: var(--space-2xl);
    height: var(--space-2xl);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 2.9rem;
    font-weight: var(--fw-semi-bold);
    border-radius: 9999px;
    display: grid;
    place-items: center;
    line-height: var(--lh-compact);
    user-select: none;
    opacity: 0;
    transition: 0.2s;
    transition-delay: 0.25s;
    z-index: -1;

    span {
      position: relative;
      top: -0.1rem;
      left: 0.1rem;
    }
    @media screen and (max-width: 768px) {
      width: 4.8rem;
      height: 4.8rem;
      font-size: 2.3rem;
      right: -1.2rem;
      top: -2.9rem;
    }
    .js__active & {
      opacity: 1;
      z-index: var(--z-menu);
    }
  }

  .stmodal-inner {
    position: relative;
    padding: var(--space-md);
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    background: var(--color-white);
    opacity: 0;
    z-index: -1;
    transition: 0.2s;
    transition-delay: 0.25s;
    top: 1rem;

    .js__active & {
      top: 0;
      z-index: var(--z-menu);
      opacity: 1;
    }
  }

  .stmodal__inner__text {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .stmodal__footer-buttons {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;

    .stmodal__button {
      flex: 1;
      display: grid;
      place-items: center;
      text-decoration: none;
      font-size: 1.2rem;
      text-align: center;
      letter-spacing: var(--ls-wider);
      border-radius: 6px;
      padding: 1rem 1.3rem;
      position: relative;
      box-shadow: var(--shadow-button);

      img {
        border-radius: 0;
        height: 2.1rem;
        width: auto;
        position: absolute;
        left: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
      }

      &.web {
        background: var(--color-primary-gradient);
        color: var(--color-white);
      }
      &.line {
        background: var(--color-line-gradient);
        color: var(--color-white);
      }

      &.tel {
        background: var(--color-button-gray-01);
        color: var(--color-white);
      }
    }
  }
}
body.js__tmodal-active,
body.js__lmodal-active {
  overflow: hidden;
  position: fixed;
}

.lnmodal__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  padding: var(--space-md);
  place-items: center;
}
.js__tmodal-active .js__tmodal-content .lnmodal__wrapper,
.js__lmodal-active .js__lmodal-content .lnmodal__wrapper {
  z-index: var(--z-under-modal);
  display: grid;
  transition: opacity 0.3s ease-in-out;
}
.lnmodal-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
  opacity: 0;

  transition: 0.3s;
}
.js__tmodal-active .js__tmodal-content .lnmodal-back,
.js__lmodal-active .js__lmodal-content .lnmodal-back {
  opacity: 1;
  z-index: var(--z-menu);
}
.lnmodal__close {
  position: absolute;
  width: 6.4rem;
  height: 6.4rem;
  right: -3.5rem;
  top: -3.7rem;
  width: var(--space-2xl);
  height: var(--space-2xl);
  background: var(--color-primary-gradient);
  color: var(--color-white);
  font-size: 2.9rem;
  font-weight: var(--fw-semi-bold);
  border-radius: 9999px;
  display: grid;
  place-items: center;
  line-height: var(--lh-compact);
  user-select: none;
  opacity: 0;
  transition: 0.2s;
  transition-delay: 0.25s;
  z-index: -1;

  span {
    position: relative;
    top: -0.1rem;
    left: 0.1rem;
  }
  @media screen and (max-width: 768px) {
    font-size: 2.3rem;
    right: -1.2rem;
    top: -2.9rem;
  }
  &:hover {
    cursor: pointer;
    opacity: 0.8;
  }
}
.js__tmodal-active .js__tmodal-content .lnmodal__close,
.js__lmodal-active .js__lmodal-content .lnmodal__close {
  width: 4.8rem;
  height: 4.8rem;
  opacity: 1;
  z-index: var(--z-menu);
}
.lnmodal-inner {
  position: relative;
  padding: var(--space-md);
  width: 100%;
  max-width: 64rem;
  height: fit-content;
  border-radius: 8px;
  border: 1px solid var(--color-line);
  min-height: 18.6rem;
  background: var(--color-white);
  opacity: 0;
  z-index: -1;
  transition: 0.2s;
  transition-delay: 0.25s;
  top: 1rem;
}
.js__tmodal-active .js__tmodal-content .lnmodal-inner,
.js__lmodal-active .js__lmodal-content .lnmodal-inner {
  top: 0;
  z-index: var(--z-menu);
  opacity: 1;
}

.lnmodal__inner__title {
  font-size: 2.1rem;
  font-weight: var(--fw-semi-bold);
  margin-bottom: 1.5rem;
  text-align: center;
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
  line-height: 1.35;
  letter-spacing: 0.2em;
  font-family: var(--font-sans-semibold);
  @media screen and (max-width: 768px) {
    font-size: 1.5rem;
  }
}
.lnmodal__inner__text {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-bottom: 2.4rem;
}

.lnmodal__buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.4rem;

  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 0.4rem;
  }

  .lnmodal__button {
    flex: 1;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    flex: 1;
    text-align: center;
    letter-spacing: var(--ls-wider);
    border-radius: 6px;
    padding: 1rem 1.3rem;
    position: relative;
    background: var(--color-line-gradient);
    min-height: 4rem;
    border-radius: 4px;
    text-align: center;
    color: var(--color-white);
    font-family: var(--font-sans-semibold);
    &.lnmodal__button--tel {
      span {
        font-size: 1.1rem;
      }
      background: var(--color-button-gray-01);
      height: 4.7rem;
      font-size: 1.2rem;
      padding: 0.8rem 1.3rem 1rem;
      gap: 0;
      line-height: 1;
      img {
        width: 1.4rem;
        height: auto;
      }
    }
    @media screen and (max-width: 768px) {
      letter-spacing: 0.1em;
    }
    img {
      border-radius: 0;
      height: 2.1rem;
      width: auto;
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
    }
  }
}

.lead--section .block--left .btn--wrap a {
  text-decoration: none !important;
  color: var(--color-text) !important;
}
.temp__text-area-inner {
  @media (max-width: 768px) {
    table,
    tr,
    tbody,
    th,
    td {
      display: block !important;
      width: 100% !important;
    }
    th,
    td {
      border: none !important;
      padding: 1rem !important;
    }
    th {
      background: #eee !important;
    }
  }
}