@charset "UTF-8";
/* =========================================
  共通変数 & ベーススタイル
========================================= */
:root {
  --color-text: #474747; /* コンテンツ通常の文字色 */
  --color-h-text: #231815; /* 見出しの黒の文字色 */
  --color-brown: #996a1a; /* ブラウン系の文字色 */
  --color-gold: #bb8d38; /* ゴールド系のアクセント色 */
  --color-border: #9f844b; /*ボーダーここから透過させる*/
  --color-gray-bg: #f6f6f6; /* グレーの背景色 */

  --color-star-on: #fabb05; /* 星の黄色 */
  --color-star-off: #dadce0; /* 星のグレー */

  --space-card: clamp(1.5rem, 4vw, 2.5rem); /* 可変の余白設定（内側） */

  /* スマホ: 8px (0.5rem) 〜 PC: 16px (1rem) */
  --radius-s: clamp(0.5rem, 1.5vw, 1rem);

  /* スマホ: 16px (1rem) 〜 PC: 32px (2rem) */
  --radius-l: clamp(1rem, 3vw, 2rem);

  /* 大元CSSから読み込み下記最後消す
  --main-color: #f54851;
  --sub-color: #009bd3;
  --base-color: #fff6ec;
*/
}

.page-layout-wrapper {
  display: flex;
  flex-direction: column;
  /* background: #fff; */
}
/* パンくず */

.path {
  margin-block: 3em;
  padding-inline: 2em;
  order: 1;
  /* background: #fff; */
  @media screen and (min-width: 750px) {
    order: -1;
    padding-top: 10px;
    margin: 0 auto;
    padding: 1.6rem 0;
    width: 1100px;
    font-size: 11px;
  }
}
/* ------------------------------
- utiluty
------------------------------ */
@media screen and (min-width: 1024px) {
  .visible-md,
  .visible-sm {
    display: none;
  }
  .visible-lg {
    display: inherit;
  }
}
@media screen and (min-width: 750px) and (max-width: 1023px) {
  .visible-lg,
  .visible-sm {
    display: none;
  }
  .visible-md {
    display: inherit;
  }
}
@media screen and (max-width: 749px) {
  .visible-lg,
  .visible-md {
    display: none;
  }
  .visible-sm {
    display: inherit;
  }
}
/* =========================================
  MVアニメーション用 (全体11秒 / 停滞5秒 / フェード0.5秒)
========================================= */
@keyframes fadeOut1 {
  0%,
  45.45% {
    opacity: 1;
    z-index: 1;
  }
  45.45%,
  50% {
    opacity: 0;
    z-index: 0;
  }
  50%,
  95.45% {
    opacity: 0;
    z-index: 0;
  }
  95.45%,
  100% {
    opacity: 1;
    z-index: 1;
  }
}

@keyframes fadeOut2 {
  0%,
  45.45% {
    opacity: 0;
    z-index: 0;
  }
  45.45%,
  50% {
    opacity: 1;
    z-index: 1;
  }
  50%,
  95.45% {
    opacity: 1;
    z-index: 1;
  }
  95.45%,
  100% {
    opacity: 0;
    z-index: 0;
  }
}

/* =========================================
  下記からpage-branch内の入れ子
========================================= */

.page-branch {
  color: var(--color-text);
  line-height: 1.6;
  & h3 {
    margin: 0;
  }
  & .content-white-bg {
    background: #fff;
  }

  & .content-beige-bg {
    background: var(--base-color);
    padding-bottom: clamp(6.4rem, 5.57rem + 2.21vw, 8rem);
  }

  & .content-wrap {
    margin: 0 2rem;

    @media screen and (min-width: 750px) {
      max-width: 1100px;
      margin: 0 auto;
    }
  }

  /* Slickが自動生成するレール部分をFlexboxにする */
  & .slick-track {
    display: flex;
  }

  /* スライド要素の高さを自動で揃える */
  & .slick-slide {
    height: auto !important;
  }
  & .js-slick-slider-voice,
  & .js-slick-slider-experience,
  & .js-slick-slider-story,
  & .js-slick-slider-spot {
    & .arrow-circle {
      fill: none;
    }
    & .meet__slider__arrow {
      @media screen and (max-width: 749px) {
        width: 40px;
        height: 40px;
      }
      @media screen and (min-width: 750px) {
        width: 60px;
        height: 60px;
      }
      &.-prev {
        left: -0.8rem;

        @media screen and (min-width: 750px) {
          left: -2rem;
        }
      }
      &.-next {
        right: -0.8rem;

        @media screen and (min-width: 750px) {
          right: -2rem;
        }
      }
      & svg {
        @media screen and (min-width: 750px) {
          width: 60px;
          height: 60px;
        }
      }
      & .arrow-path {
        stroke: #c9c9c9;
      }
    }
  }

  & .js-slick-slider-experience,
  & .js-slick-slider-story,
  & .js-slick-slider-spot {
    @media screen and (min-width: 750px) {
      /*padding: 0 0rem 0 3rem;*/
      position: relative;
    }
  }
  /* =========================================================
  共通見出しコンポーネント（Component - Heading）
========================================================= */
  /* スマホ用（SP） */
  & .c-heading-l {
    /* h2相当の特大見出し */
    font-size: 2.4rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  & .c-heading-m {
    /* h3相当の大見出し */
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  & .c-heading-s {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  & .c-heading-ss {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  & .c-heading-xs {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  & .c-heading-xxs {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    font-weight: bold;
    text-align: center;
    color: var(--color-h-text);
  }
  /*  PC用（750px以上）で文字サイズだけ上書き */
  @media screen and (min-width: 750px) {
    & .c-heading-l {
      font-size: 3.2rem;
    }
    & .c-heading-m {
      font-size: 2.8rem;
    }
    & .c-heading-s {
      font-size: 2.4rem;
    }
    & .c-heading-ss {
      font-size: 2.2rem;
    }
    & .c-heading-xs {
      font-size: 2.2rem;
    }
    & .c-heading-xxs {
      font-size: 1.8rem;
    }
  }
  & .content-headline {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
    font-weight: bold;
    line-height: 1.6;
    font-size: 2.4rem;
    color: #fff;
    @media screen and (min-width: 750px) {
      font-size: 3.2rem;
    }
  }

  /* =========================================================
  共通テキストコンポーネント（Component - Text）
========================================================= */
  /* スマホ用（SP） */
  & .c-text-l {
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
  & .c-text-m {
    /* ★これが一番よく使う標準サイズ */
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
  & .c-text-s {
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }

  & .c-text-xs {
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }
  & .c-text-note {
    /* 注釈用 */
    font-size: 1.2rem;
    line-height: 1.6;
  }

  /* PC用（750px以上）で文字サイズだけ上書き */
  @media screen and (min-width: 750px) {
    & .c-text-l {
      font-size: 2rem;
      line-height: 2;
    }
    & .c-text-m {
      font-size: 1.8rem;
      line-height: 2;
    }
    & .c-text-s {
      font-size: 1.6rem;
      line-height: 1.7;
    }
    & .c-text-xs {
      font-size: 1.4rem;
      line-height: 1.6;
    }
    & .c-text-note {
      font-size: 1.4rem;
    }
  }

  /* =========================================
  メインビジュアル (.main-visual)
========================================= */
  & .main-visual {
    width: 100%;
    overflow: hidden;
    /*background-color: var(--color-spot-bg);*/
    & .mv-container {
      position: relative;
      aspect-ratio: 1 / 1;

      @media screen and (min-width: 650px) {
        max-width: 1100px;
        margin: 0 auto;
        aspect-ratio: 1200 / 524;
      }
    }

    /* --- スライド全体を包む箱 --- */
    & .mv-image-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* --- スライド1枚分（画像＋テキストの枠） --- */
    & .mv-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 0;

      &.js-mv-slide-1 {
        opacity: 1;
        z-index: 1;
        animation: fadeOut1 11s infinite;
        animation-delay: 3s;
        @media screen and (min-width: 650px) {
          animation: fadeOut1 12s infinite;
          animation-delay: 3s;
        }
      }
      &.js-mv-slide-2 {
        animation: fadeOut2 11s infinite;
        animation-delay: 3s;

        @media screen and (min-width: 650px) {
          animation: fadeOut2 12s infinite;
          animation-delay: 3s;
        }
      }
    }

    /* --- 画像部分 (.mv-image-part) --- */
    & .mv-image-part {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      & .mv-picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      & .mv__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .js-mv-slide-1 {
      @media screen and (min-width: 750px) {
        & .mv__image {
          border-radius: var(--radius-l) var(--radius-l) 0 0;
        }
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 43%;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 0.8) 0%,
          rgba(255, 255, 255, 0) 100%
        );
        z-index: 1;
        pointer-events: none;
      }
    }
    & .js-mv-slide-2 {
      @media (min-width: 650px) {
        & .mv__sales-pitch {
          width: 65.5%;
          right: 4.2em;
        }
      }

      & .mv__image {
        max-width: 1000px;
        margin: 0 auto;
      }
    }
    /* --- テキスト部分 (.mv-text-container) --- */
    & .mv-text-container {
      position: absolute;
      z-index: 2;
      padding: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem)
        clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem)
        clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem)
        clamp(4rem, -0.14rem + 11.03vw, 12rem);
      background: transparent;
      top: 0;
      bottom: 0;

      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      &.type-shop {
        left: 0;
      }
    }
    /* --- グラデーションブラー (.mv-blur-layer) --- */
    & .mv-blur-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--radius-l) 0 0 0;
      backdrop-filter: blur(30px);

      /* ベンダープレフィックスが必要（Webkit/Blink系） */
      -webkit-mask-image: linear-gradient(
        to top right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      mask-image: linear-gradient(
        to top right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
      );

      z-index: -1;

      @media screen and (min-width: 750px) {
        border-radius: var(--radius-l) 0 0 0;
      }
    }

    /* --- 文字専用 (.mv-text-content) --- */
    & .mv-text-content {
      position: relative;
      z-index: 0;

      text-shadow: 0px 0px 10px #ffffff;
    }

    & .mv-lead {
      color: #333333;
      font-size: clamp(1.4rem, 1.19rem + 0.55vw, 1.8rem);
      line-height: 1.4;
      font-weight: bold;
      margin: 0 0 0.5rem 0;
    }

    & .mv-title {
      color: var(--color-h-text);
      font-size: clamp(2rem, 1.38rem + 1.66vw, 3.2rem);
      line-height: 1.3;
      margin: 0;

      @media (max-width: 649px) {
        & .mv__sales-pitch {
          letter-spacing: -0.08em;
        }
      }
      & .mv-title-main {
        display: block;
        font-size: clamp(4rem, 2.76rem + 3.31vw, 6.4rem);
        line-height: 1.2;

        letter-spacing: 0.08em;
      }
    }
  }

  /* =========================================
  ページナビゲーション
========================================= */
  & .page-nav {
    background: #fff;
    padding-bottom: clamp(4rem, 1.93rem + 5.52vw, 8rem);

    & .content-wrap {
      background: rgb(from var(--base-color) r g b / 60%);
      text-align: center;
      border-radius: 0 0 2.4rem 2.4rem;
      padding: clamp(1.6rem, 3vw, 2.4rem) 0;
      margin: 0 auto;
    }

    & .nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: stretch;

      & li {
        position: relative;
        display: flex;
        flex: 1;
        justify-content: center;

        &:nth-child(3) {
          flex: 1.4;
        }

        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 100%;
          background-color: rgb(from var(--color-gold) r g b / 60%);
        }
      }

      & a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--color-brown);
        font-weight: bold;
        font-size: 1.4rem;
        line-height: 1.4;
        text-align: center;
        padding: 0 0.4rem;
        width: 100%;
        transition: opacity 0.3s ease;

        @media screen and (min-width: 750px) {
          font-size: 1.8rem;
        }
        &::after {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          margin-top: 8px;
          border-bottom: 1.8px solid var(--color-gold);
          border-right: 1.8px solid var(--color-gold);
          transform: rotate(45deg);
        }

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
  /* =========================================
  キャンペーン (.campaign)
========================================= */
  & .campaign {
    background: #fff;
    text-align: center;
    padding-bottom: clamp(4rem, 1.93rem + 5.52vw, 8rem);
  }

  /* =========================================
  イントロセクション (.intro-section)
========================================= */
  & .intro-section {
    & .intro-container {
      display: flex;
      flex-direction: column;
      gap: clamp(4rem, 4vw, 6rem);

      @media screen and (min-width: 750px) {
        flex-direction: row-reverse;
        align-items: flex-start;
      }
    }

    & .intro-content {
      flex: 1;
    }

    & .intro-title {
      color: var(--color-brown);
      margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
      @media screen and (min-width: 750px) {
        text-align: left;
      }
    }

    & .intro-image {
      flex: 1;
      margin: 0;
      @media screen and (min-width: 750px) {
        max-width: 520px;
      }

      & img {
        width: 100%;
        border-radius: var(--radius-s);
      }
    }
  }

  /* =========================================
  店舗情報セクション (info-section)
========================================= */
  & .info-section {
    padding-bottom: 0;
    padding-top: clamp(6.4rem, 5.57rem + 2.21vw, 8rem);
    @media screen and (min-width: 750px) {
      padding-bottom: clamp(0rem, -4.14rem + 11.03vw, 8rem);
    }

    & .info-title {
      margin-bottom: clamp(3.2rem, 1.54rem + 4.41vw, 6.4rem);
    }

    & .info-layout {
      display: flex;
      flex-direction: column;
      gap: clamp(4rem, 4vw, 6rem);
      padding-bottom: clamp(4rem, 3.17rem + 2.21vw, 5.6rem);

      @media screen and (min-width: 750px) {
        flex-direction: row;
        justify-content: space-between;
      }

      & .c-table {
        flex: 1;
        width: 100%;
        border-collapse: collapse;
      }

      & .c-table-th {
        width: 25%;
        color: var(--color-brown);
        text-align: left;
        border: none;
        border-bottom: 1px solid rgb(from var(--color-border) r g b / 30%);
        padding: 2.4rem 0;
      }

      & .c-table-td {
        border: none;
        border-bottom: 1px solid rgb(from var(--color-border) r g b / 30%);
        padding: 2.4rem 0;
        & .note {
          display: block;
          margin-top: 1rem;
          @media screen and (min-width: 750px) {
            font-size: 1.2rem;
          }

          & a {
            text-decoration: underline;
          }
        }
      }
      & .c-table tr:first-child .c-table-th,
      & .c-table tr:first-child .c-table-td {
        padding-top: 0;
      }
      & .c-table tr:last-child .c-table-th,
      & .c-table tr:last-child .c-table-td {
        border-bottom: none;
      }
    }

    & .map-area {
      flex: 1;
      @media screen and (min-width: 750px) {
        max-width: 520px;
      }

      & .map-embed {
        width: 100%;
        aspect-ratio: 4 / 3;
        background-color: #f5f5f5;
        border-radius: var(--radius-s);
        overflow: hidden;
        margin-bottom: 0.8rem;
      }

      & .map-link {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-decoration: none;
        color: var(--color-text);
        font-weight: bold;
        gap: 0.5rem;

        &::after {
          content: '›';
          background-color: #333;
          color: #fff;
          border-radius: 50%;
          width: 18px;
          height: 18px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          line-height: 1;
        }

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  /* =========================================
  道のり (.route-section)
========================================= */
  & .route-section {
    /*
		background-color: var(--color-gray-bg);
    border-radius: var(--radius-s);
    padding: clamp(4rem, 3.59rem + 1.1vw, 4.8rem) clamp(2rem, 5vw, 4rem)
      clamp(4.8rem, 7.23rem - 2.21vw, 6.4rem) clamp(2rem, 5vw, 4rem);*/

    padding: clamp(1.6rem, 0.77rem + 2.21vw, 3.2rem) 0
      clamp(4.8rem, 7.23rem - 2.21vw, 6.4rem) 0;
    /*
    @media screen and (max-width: 749px) {
      &.content-wrap {
        margin: 0 auto;
        border-radius: 0;
      }
    }*/

    & .c-heading-m {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
    }

    /* --- ステップリスト --- */
    & .route-list {
      display: flex;
      flex-direction: column;
      gap: clamp(2rem, 4vw, 3rem);
      /*margin-top: clamp(3.2rem, 2.79rem + 1.1vw, 4rem);*/
      @media screen and (min-width: 750px) {
        flex-direction: row;
        justify-content: space-between;
        gap: 2.5rem;
      }
    }

    & .route-item {
      display: flex;
      flex-direction: column;

      @media screen and (min-width: 750px) {
        flex: 1;
      }
    }

    & .route-image {
      margin-bottom: clamp(0.5rem, 1vw, 1rem);

      & img {
        border-radius: var(--radius-s);
      }
    }
  }

  /* =========================================
  特長 (.feature-section)
========================================= */

  & .feature-section {
    margin-bottom: clamp(4rem, 2.76rem + 3.31vw, 6.4rem);

    & .feature-container {
      display: flex;
      flex-direction: column-reverse;
      gap: clamp(4rem, 2.97rem + 2.76vw, 6rem);
      padding-top: clamp(4rem, 2.76rem + 3.31vw, 6.4rem);

      @media screen and (min-width: 750px) {
        flex-direction: row;
        align-items: flex-start;
      }
    }

    & .feature-content {
      flex: 1;
    }

    & .feature-title {
      margin-top: 0;
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
      @media screen and (min-width: 750px) {
        text-align: left;
      }
    }

    & .feature-image {
      flex: 1;
      margin: 0;
      @media screen and (min-width: 750px) {
        max-width: 520px;
      }

      & img {
        width: 100%;
        border-radius: var(--radius-s); /* 角丸も可変 */
      }
    }
  }

  /* =========================================
  会員データセクション (.member-data-section)
========================================= */
  & .member-data-section {
    margin-bottom: clamp(4rem, 8vw, 8rem);

    width: calc(100% - 4rem);
    max-width: 83.2rem; /* ただし最大832pxでストップ */
    margin: 0 auto;
    & .member-data-title {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
    }
    & .data-container {
      background: #fff;
      text-align: center;
      padding: clamp(3.2rem, 2.79rem + 1.1vw, 4rem)
        clamp(2.4rem, 1.57rem + 2.21vw, 4rem);
      border-radius: var(--radius-s);
      margin-bottom: 1.6rem;
    }
    & .c-text-note {
      margin-bottom: 2.4rem;
    }
    /* --- 共通パーツ --- */
    & .data-block {
      padding: clamp(2rem, 4vw, 3rem) 0;
    }

    & .data-title {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);

      & sup {
        font-size: 0.6em;
        margin-left: 0.2em;
        vertical-align: super;
        font-weight: normal;
      }
    }

    & .data-desc {
      margin-top: clamp(1rem, 2vw, 1.5rem);
      letter-spacing: 0;

      & .text-red {
        color: var(--main-color);
      }
    }
    & .data-gender,
    & .data-age {
      & .data-desc {
        margin-top: auto;
        padding-top: 1.6rem;
      }
    }
    & .data-number-large {
      font-weight: bold;
      display: flex;
      align-items: baseline;
      justify-content: center;
      line-height: 1;

      & .prefix {
        font-size: 2.4rem;
        margin-right: 0.5rem;
      }

      & .num {
        font-size: 7.2rem;
        color: var(--color-brown);
      }

      & .unit {
        font-size: 2.4rem;
        margin-left: 0.2em;
      }
    }

    /* 区切り線 */
    & .data-divider {
      border: none;
      border-top: 1px solid rgb(from var(--color-border) r g b / 30%);
      margin: 0;

      &.sp-only {
        @media screen and (min-width: 750px) {
          display: none;
        }
      }
    }

    /* --- 中央ラッパー（男女比・年代） --- */
    & .data-middle-wrapper {
      display: flex;
      flex-direction: column;

      @media screen and (min-width: 750px) {
        flex-direction: row;
        align-items: stretch;
        margin: clamp(1.5rem, 4vw, 2rem) 0;
      }

      & .data-gender,
      & .data-age {
        @media screen and (min-width: 750px) {
          flex: 1;
          padding: 3rem 2rem; /* PCの時の左右余白 */
          display: flex;
          flex-direction: column;
        }
      }

      & .data-gender {
        @media screen and (min-width: 750px) {
          border-right: 1px solid rgb(from var(--color-border) r g b / 30%);
        }
      }
    }

    /* --- 男女比ブロック --- */
    & .gender-illustration {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(1rem, 3vw, 2rem);
      @media screen and (min-width: 750px) {
        padding-top: 3rem;
      }
      & .gender-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: clamp(80px, 20vw, 130px);

        & img {
          width: 100%;
          margin-bottom: 0.5rem;
        }

        & .gender-label {
          font-weight: bold;
          font-size: 1.6rem;
          @media screen and (min-width: 750px) {
            font-size: 1.8rem;
          }
          &.men {
            color: var(--sub-color);
          }
          &.women {
            color: var(--main-color);
          }
        }
      }

      & .gender-arrow {
        width: 16px;
        height: 16px;
        border-top: 3px solid var(--color-brown);
        border-right: 3px solid var(--color-brown);
        transform: rotate(45deg);
        margin-bottom: 1.5rem;
      }
    }

    /* --- 年代ブロック --- */
    & .age-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem;

      & .age-item {
        border-right: 1px solid rgb(from var(--color-border) r g b / 30%);
        border-bottom: 1px solid rgb(from var(--color-border) r g b / 30%);
        border-radius: 0 0 var(--radius-s) 0;
        padding: 0.8rem 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;

        & .age-range {
          font-size: 1.6rem;
          margin-bottom: 0.2rem;
        }

        & .age-percent {
          font-weight: bold;
          line-height: 1;
          display: flex;
          align-items: baseline;

          &.red {
            color: var(--main-color);
          }
          & .num {
            font-size: 4rem;
          }
          & .unit {
            font-size: 2rem;
            margin-left: 0.1em;
          }
        }

        & .gray {
          & .num {
            font-weight: 500;
          }
        }
      }
    }
    /* =========================================
  会員プロフィールセクション (.profiles-section)
========================================= */
    & .profiles-section {
      margin: clamp(4rem, 3.17rem + 2.21vw, 5.6rem) auto;
      text-align: center;
      background: none;
      padding: 0;

      /* --- グリッドレイアウト（PC/SPの切り替え） --- */
      & .profiles-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        @media screen and (min-width: 750px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* --- カード本体 (.profile-card) --- */
      & .profile-card {
        background-color: #fff;
        border-radius: var(--radius-s);
      }

      /* --- カードの内側 (.card-inner) --- */
      & .card-inner {
        display: flex;
        align-items: flex-start;
        padding: var(--space-card);
        gap: clamp(1rem, 3vw, 2rem);
      }

      /* --- アイコンエリア (.icon-area) --- */
      & .icon-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: clamp(4.8rem, 8vw, 5.6rem);
        flex-shrink: 0;

        & img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        & .gender-label {
          font-weight: bold;
          font-size: 1.6rem;
          @media screen and (min-width: 750px) {
            font-size: 1.8rem;
          }
        }
      }

      /* --- プロフィールリスト (.profile-list) --- */
      & .profile-list {
        display: grid;
        grid-template-columns: clamp(7rem, 10vw, 7rem) auto;
        gap: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.5rem, 1.5vw, 1rem);
        font-size: 1.4rem;
        line-height: 1.8;
        text-align: left;
        @media screen and (min-width: 750px) {
          font-size: 1.6rem;
        }
        & dt {
          font-weight: bold;
          margin: 0;
        }

        & dd {
          color: var(--color-text);
          margin: 0;
          font-weight: normal;
        }
      }
      /* --- 女性カード --- */
      & .profile-woman {
        box-shadow: 4px 4px 0px var(--main-color);

        & .gender-label,
        & .profile-list dt {
          color: var(--main-color);
        }
      }
      /* --- 男性カード --- */
      & .profile-man {
        box-shadow: 4px 4px 0px var(--sub-color);

        & .gender-label,
        & .profile-list dt {
          color: var(--sub-color);
        }
      }
    }

    & .area-data {
      & .c-text-m {
        text-align: left;
      }
    }
  }

  /* =========================================
  コンシェルジュ紹介セクション (.concierge-section)
========================================= */
  & .concierge-section {
    margin-bottom: clamp(6.4rem, 3.5rem + 7.72vw, 12rem);

    & .concierge-container {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      padding-top: clamp(4rem, 2.97rem + 2.76vw, 6rem);

      @media screen and (min-width: 750px) {
        flex-direction: row;
        align-items: flex-start; /* これがないとStickyが効かなくなります！ */
        gap: 4rem;
      }
    }

    /* =========================================
    左側：プロフィールエリア（追従）
  ========================================= */
    & .concierge-profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.6rem;
      position: relative;

      /* 追従（Sticky） */
      @media screen and (min-width: 750px) {
        width: clamp(160px, 20vw, 256px);
        flex-shrink: 0;
        position: sticky;
        top: 12rem;

        /* 三角形（写真に追従） */
        &::after {
          content: '';
          position: absolute;
          top: 40%;
          right: -4rem;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-right: 20px solid #fff;
        }
      }

      & .profile-name {
        font-size: 2rem;
        font-weight: bold;
        margin: 0;
        order: 1;
        @media screen and (min-width: 750px) {
          order: 2;
          font-size: 1.6rem;
        }
      }

      & .profile-image {
        order: 2;
        width: clamp(160px, 20vw, 256px);
        @media screen and (min-width: 750px) {
          order: 1;
        }

        & img {
          width: 100%;
          height: auto;
          border-radius: clamp(0.5rem, 1vw, 1rem);
        }
      }
    }

    /* =========================================
    右側：文章コンテンツエリア（白箱）
  ========================================= */
    & .concierge-content {
      background-color: #fff;
      border-radius: var(--radius-l, clamp(1rem, 3vw, 2rem));
      padding: clamp(6.4rem, 5.99rem + 1.1vw, 7.2rem)
        clamp(2rem, -0.07rem + 5.52vw, 6rem)
        clamp(3.2rem, 1.54rem + 4.41vw, 6.4rem);
      position: relative;
      margin: 0 2rem;

      @media screen and (min-width: 750px) {
        flex: 1;
        margin: 0 0 4rem 0;
      }

      /* SP用の三角形 */
      &::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid #fff;

        @media screen and (min-width: 750px) {
          display: none;
        }
      }

      /* --- 文章のスタイル --- */
      & .content-block {
        margin-bottom: clamp(4rem, 2.76rem + 3.31vw, 6.4rem);

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

      & .content-title {
        color: var(--color-brown);
        margin-bottom: clamp(3.2rem, 2.79rem + 1.1vw, 4rem);
        position: relative;
        z-index: 1;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: clamp(50px, 8vw, 70px);
          height: clamp(50px, 8vw, 70px);
          background: url(/branch/assets/img/common/bg-cc-subheading-01.webp)
            center/contain no-repeat;
          z-index: -1;
        }
      }
    }
  }

  /* =========================================
  体験談カード (.testimonial-card)
========================================= */
  & .testimonial-section {
    & .meet__slider__arrow {
      @media screen and (min-width: 750px) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        &.-prev {
          left: calc(50% - 16rem - 4.1rem);
        }

        /* 右矢印 */
        &.-next {
          right: calc(50% - 16rem - 4.35rem);
        }
      }
    }
    & .c-heading-l {
      padding-bottom: clamp(3.2rem, 2.79rem + 1.1vw, 4rem);
    }
  }
  & .testimonial-card {
    width: 32rem;
    background: #ffffff;
    height: 100%;
    border-radius: var(--radius-s);
    padding: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--color-text);

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 2.8rem 0 2.4rem;

    /* --- 1. ユーザー情報ヘッダー --- */
    & .tc-header {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    & .tc-user-icon {
      width: 48px;
      height: 48px;
      flex-shrink: 0;

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

    & .tc-user-info {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    & .tc-user-tags {
      display: flex;
      gap: 0.8rem;
      font-weight: bold;
      font-size: 2rem;
      margin: 0;
    }

    & .tc-user-meta {
      font-size: 1.4rem;
    }

    &.testimonial-woman {
      box-shadow: 4px 4px 0px var(--main-color);
      & .tc-user-tags {
        color: var(--main-color);
      }
    }
    &.testimonial-man {
      box-shadow: 4px 4px 0px var(--sub-color);
      & .tc-user-tags {
        color: var(--sub-color);
      }
    }
    /* --- 2. 満足度（星） --- */
    & .tc-rating {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.4rem;
      font-weight: bold;
      & .rating-label {
        font-weight: normal;
        padding-top: 0.2rem;
      }
      & .rating-stars {
        display: flex;
        gap: 0.1rem;
        font-size: 2rem;
        letter-spacing: 0.1em;

        & .star {
          color: var(--color-star-off);
          font-style: normal;

          &.active {
            color: var(--color-star-on);
          }
        }
      }
    }

    /* --- 3. コメント本文 --- */
    & .tc-comment {
      font-size: 1.6rem;
      line-height: 1.8;
      padding-bottom: 2.4rem;
    }

    /* --- 4. コンシェルジュからの返信 --- */
    & .tc-reply {
      border-left: 2px solid #d4d4d4;
      padding-left: clamp(1rem, 3vw, 1.5rem);
      display: flex;
      flex-direction: column;
      gap: 1rem;

      /* カードの高さが余った場合用*/
      margin-bottom: auto;

      & .tc-reply-header {
        display: flex;
        align-items: center;
        gap: 0.8rem;

        & .reply-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }

        & .reply-name {
          font-weight: bold;
          font-size: 1.4rem;
        }
      }

      & .tc-reply-text {
        font-size: 1.6rem;
        line-height: 1.8;
      }
    }
  }

  /* =========================================
  利用者の声　成婚ストーリーセクション　共通レイアウト
========================================= */
  & .experience-section {
    padding: clamp(5.6rem, 6.81rem - 1.1vw, 6.4rem) 0
      clamp(6.4rem, 8.83rem - 2.21vw, 8rem);
  }
  & .story-section {
    padding: 0 0 clamp(6.4rem, 8.83rem - 2.21vw, 8rem) 0;
  }
  & .experience-container,
  & .story-container,
  & .spot-container {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 4rem);
    margin: 0;
    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
    }
    /* --- タイトルエリア --- */
    & .experience-header,
    & .story-header {
      margin-bottom: 0;

      @media screen and (min-width: 750px) {
        width: 35%; /* 右側のタイトルエリアの幅 */
        flex-shrink: 0;
      }
    }

    & .slider-area {
      position: relative;
      @media screen and (min-width: 750px) {
        width: calc(100% - 35% - 4rem);
        min-width: 0;
        max-width: 100%;
        position: relative;
        overflow: clip;
      }
    }
  }

  & .story-container {
    @media screen and (min-width: 750px) {
      flex-direction: row-reverse;
      min-width: 0;
    }
  }

  /* =========================================
  デートスポットセクション (.date-spot-section)
========================================= */
  & .spot-section {
    background-image: url('/branch/assets/img/common/bg-cc-spot-01_sp.webp');
    background-size: 100%;
    background-position: left top;
    background-repeat: no-repeat;
    /*padding: clamp(3rem, 6vw, 5rem) 0;*/
    overflow: hidden;

    @media screen and (min-width: 750px) {
      background-image: url('/branch/assets/img/common/bg-cc-spot-01_pc.webp');
      background-position: center top;
      background-size: cover;
    }
    @media screen and (min-width: 1700px) {
      background-size: contain;
    }
    & .spot-container {
      gap: 0;
      padding: clamp(4rem, 3.17rem + 2.21vw, 5.6rem) 0
        clamp(5.6rem, 6.81rem - 1.1vw, 6.4rem);
    }
    /* =========================================
    見出し＆イラストエリア (.spot-header-area)
  ========================================= */
    & .spot-header-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      @media screen and (min-width: 750px) {
        width: 35%; /* 左側の幅 */
        flex-shrink: 0;
      }
    }
    & .speech-bubble {
      width: clamp(22rem, 26vw, 30rem);
      & img {
        width: 100%;
        height: auto;
      }
    }

    /* --- タイトル --- */
    & .spot-title {
      color: var(--color-brown);
      margin: 0 0 1.5rem 0;
    }

    & .spot-illustration {
      width: clamp(176px, 38vw, 280px);

      @media screen and (min-width: 750px) {
        width: clamp(176px, 18vw, 196px);
      }
      & img {
        width: 100%;
        height: auto;
      }
    }

    /* =========================================
    スライダーエリア (.spot-slider-area)
  ========================================= */
    & .slider-area {
      & .arrow-path {
        stroke: var(--color-gold);
      }
    }

    /* =========================================
    カード本体 (.spot-card)
  ========================================= */
    & .spot-card {
      background-color: #ffffff;
      border: 1px solid rgb(from var(--color-text) r g b / 30%);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin: 0 2.4rem;

      @media screen and (min-width: 1080px) {
        max-width: 61.6rem;
        background-color: transparent;
        border: none;
        flex-direction: row;
        align-items: flex-start;
      }
    }

    /* --- 画像エリア --- */
    & .spot-card-image {
      width: 100%;
      aspect-ratio: 16 / 9;

      @media screen and (min-width: 1080px) {
        width: clamp(21.6rem, 28.8vw, 32rem);
        height: auto;
        aspect-ratio: auto;
        border-radius: 16px;
        overflow: hidden;
        flex-shrink: 0;
      }

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

    /* --- テキストエリア --- */
    & .spot-card-body {
      padding: clamp(1.6rem, 4vw, 2.4rem);

      @media screen and (min-width: 1080px) {
        padding: 2.4rem 3.2rem 2.4rem 4.8rem;
        max-width: 32rem; /*clamp(25.6rem, 45%, 32rem);*/
        margin: 2.4rem 0 0 -2.4rem;
        /*flex: 1;*/
        position: relative;
        z-index: -1;

        background-color: #ffffff;
        border-radius: 16px;
      }
    }

    & .spot-card-title {
      font-size: 1.6rem;
      margin: 0 0 1rem 0;
      line-height: 1.5;
      @media screen and (min-width: 1080px) {
        font-size: 1.8rem;
      }
    }

    & .spot-card-desc {
      font-size: 1.4rem;
      color: var(--color-text);
      margin: 0;
      line-height: 1.8;

      @media screen and (min-width: 1080px) {
        font-size: 1.6rem;
      }
    }
  }
  /* =========================================
  利用者の声　成婚ストーリー 見出しエリア
========================================= */
  & .experience-header,
  & .story-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    text-align: center;

    & .experience-title,
    & .story-title {
      /* SPの時：一番上に配置 */
      order: 1;
      color: #333333;
      margin: 0 0 2.4rem 0;

      /* SP用の左右の横線*/
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem; /* テキストと線のすき間 */
      width: 100%;

      &::before,
      &::after {
        content: '';
        height: 1px;
        background-color: #999999;
        width: clamp(30px, 10vw, 60px);
      }

      /* PC版（750px以上）：下に移動＆線を消す */
      @media screen and (min-width: 750px) {
        order: 2;
        margin-bottom: 0;

        &::before,
        &::after {
          display: none;
        }
      }
    }

    & .experience-lead,
    & .story-lead {
      order: 2;
      text-align: left;
      margin: 0 2rem 0.4rem;

      @media screen and (min-width: 750px) {
        order: 1;
        text-align: center;
        color: var(--color-brown);
        margin-bottom: 1rem;
        padding-bottom: 5rem;

        background-image: url('/branch/assets/img/common/icon-cc-story-01.webp');
        background-repeat: no-repeat;
        background-position: bottom center; /* 下部の中央に配置 */
        background-size: contain;
      }
    }
  }

  /* =========================================
  成婚ストーリーカード (.story-card)
========================================= */
  & .story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid rgb(from var(--color-text) r g b / 30%);
    border-radius: var(--radius-s);
    overflow: hidden;
    transition:
      box-shadow 0.3s ease,
      transform 0.3s ease;
    width: 100%;
    margin: 0 2.4rem;
    &:hover {
      color: #463d3c;
      opacity: 0.8;
    }

    @media screen and (min-width: 1080px) {
      flex-direction: row;
      max-width: 61.6rem;
    }

    /* --- 画像エリア --- */
    & .card-thumb {
      width: 100%;
      aspect-ratio: 1.5;

      @media screen and (min-width: 1080px) {
        width: 45%;
        flex-shrink: 0;
        padding: 2.4rem;
        aspect-ratio: auto;
      }

      & img {
        width: 100%;
        height: 100%;
        @media screen and (min-width: 1080px) {
          max-width: 24rem;
          height: auto;
        }
      }
    }

    /* --- テキストエリア --- */
    & .card-body {
      padding: clamp(1.2rem, 3vw, 1.5rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.8rem;

      @media screen and (min-width: 1080px) {
        width: 55%;
        padding: 2.4rem 2.4rem 2.4rem 0;
      }
    }

    & .card-vol {
      color: var(--color-brown);
      font-size: 1.4rem;
    }

    & .card-title {
      margin: 0;
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.4;

      @media screen and (min-width: 1080px) {
        font-size: 1.8rem;
      }
      & .card-link {
        color: inherit;
        text-decoration: none;

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 1;
        }
      }
    }

    & .card-text {
      margin: 0 0 0.5rem 0;
      font-size: 1.4rem;
      line-height: 1.7;

      @media screen and (min-width: 1080px) {
        font-size: 1.6rem;
      }
    }

    /* --- タグエリア --- */
    & .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;

      & .tag {
        background-color: var(--color-brown);
        color: #ffffff;
        font-size: 1.2rem;
        padding: 0.3em 0.6em;
        line-height: 1.4;

        @media screen and (min-width: 1080px) {
          font-size: 1.4rem;
        }
      }
    }
  }

  /* =========================================
  体験談セクション (.experience)
========================================= */

  & .experience {
    & .flexBox--3col .flexBox__item {
      margin: 0 2.4rem;
    }

    & .read-btn {
      text-align: center;
      background: #463d3c;
      color: #fff;
      border: 1px solid #463d3c;
      border-radius: 0 0 var(--radius-s) var(--radius-s);
      font-family: 'Spinnaker', sans-serif;
      font-size: 1rem;
      padding: 4px 0;
    }

    & .profile {
      border-bottom: 1px dashed #a29e9d;
      @media screen and (min-width: 750px) {
        padding: 0 2rem;
      }
      @media screen and (max-width: 749px) {
        padding: 0 1.5rem 1.5rem;
      }
    }
  }

  /* =========================================
  .experience の子要素
========================================= */
  & .experience__inner {
    position: relative;
    text-align: center;
    margin: 0 auto;
    @media screen and (min-width: 750px) {
      padding: 9rem 0 7rem;
    }
    @media screen and (max-width: 749px) {
      padding: 5rem 0;
    }

    &.bg-pink {
      background: #fff3f3;
    }
    &.bg-blue {
      background: #eafafb;
    }
  }

  & .experience__body {
    width: auto;
    margin: 0 auto;
    position: relative;
  }

  & .experience__btnWrap {
    text-align: left;
    @media screen and (min-width: 750px) {
      margin: 6rem 0 0;
    }
    @media screen and (max-width: 749px) {
      margin: 5rem 0 0;
    }
  }

  /* =========================================
  体験談リスト (.stories-list)
========================================= */
  & .experience .stories-list {
    & a {
      height: 100%;
      overflow: visible;
      display: block;
      color: #000;
      /*width: 34rem;*/
      &:hover {
        color: #463d3c;
        opacity: 0.8;
      }

      @media screen and (min-width: 1080px) {
        max-width: 61.6rem;
      }
    }

    & .tag-list {
      z-index: 2;
      position: absolute;
      margin: -1px 0 0 10px;
      font-size: 0;
    }

    & .post-date {
      color: #463d3c;
      position: absolute;
      right: 8px;
      top: 8px;
      text-align: right;
      font-size: 1.1rem;
    }

    & .copy {
      @media screen and (min-width: 750px) {
        padding: 24px;
      }
      @media screen and (max-width: 749px) {
        padding: 15px;
      }
      & strong,
      & span {
        background: linear-gradient(transparent 50%, #fff2cf 0%);
      }
    }

    & .number-list {
      display: flex;
      margin-top: auto;
      font-weight: bold;
      @media screen and (min-width: 750px) {
        font-size: 1.3rem;
        padding: 20px 0;
      }
      @media screen and (max-width: 749px) {
        font-size: 1.2rem;
        padding: 13px 0 10px;
      }

      & .list_item {
        width: 33.33%;
        text-align: center;
        border-left: 1px dashed #463d3c;
        &:first-child {
          border-left: none;
        }

        & .number-list__cont {
          color: #463d3c;
          position: relative;
          display: inline-block;
          @media screen and (min-width: 750px) {
            font-size: 1.4rem;
          }
          @media screen and (max-width: 749px) {
            font-size: 1.2rem;
          }

          & .lg {
            @media screen and (min-width: 750px) {
              font-size: 2.5rem;
            }
            @media screen and (max-width: 749px) {
              font-size: 2rem;
            }
          }
          &::before {
            content: '';
            position: absolute;
            top: 9px;
            background-size: 100%;
          }
        }
      }
    }
  }

  & .experience .stories-list .tag-list__item {
    display: inline-block;
    vertical-align: top;
    & img {
      height: auto;
      @media screen and (max-width: 749px) {
        width: 30px;
        height: 28px;
      }
    }
  }

  & .experience .stories-list .number-list__ttl {
    margin-bottom: 2px;
  }

  &
    .experience
    .stories-list
    .number-list
    .list_item--number
    .number-list__cont {
    @media screen and (min-width: 750px) {
      margin-left: 30px;
    }
    @media screen and (max-width: 749px) {
      margin-left: 15px;
    }
    &::before {
      background-image: url(/introduce/images/experience/stories-list_icon_number01.png);
      @media screen and (min-width: 750px) {
        left: -30px;
        width: 23px;
        height: 19px;
      }
      @media screen and (max-width: 749px) {
        left: -15px;
        width: 11.5px;
        height: 9.5px;
      }
    }
  }

  &
    .experience
    .stories-list
    .number-list
    .list_item--contact
    .number-list__cont {
    @media screen and (min-width: 750px) {
      margin-left: 27px;
    }
    @media screen and (max-width: 749px) {
      margin-left: 14px;
    }
    &::before {
      background-image: url(/introduce/images/experience/stories-list_icon_contact01.png);
      @media screen and (min-width: 750px) {
        left: -27px;
        width: 22px;
        height: 17px;
      }
      @media screen and (max-width: 749px) {
        left: -14px;
        width: 11px;
        height: 8.5px;
      }
    }
  }

  &
    .experience
    .stories-list
    .number-list
    .list_item--period
    .number-list__cont {
    @media screen and (min-width: 750px) {
      margin-left: 28px;
    }
    @media screen and (max-width: 749px) {
      margin-left: 14px;
    }
    &::before {
      background-image: url(/introduce/images/experience/stories-list_icon_period01.png);
      @media screen and (min-width: 750px) {
        left: -28px;
        width: 21px;
        height: 21px;
      }
      @media screen and (max-width: 749px) {
        left: -14px;
        width: 10.5px;
        height: 10.5px;
      }
    }
  }

  & .experience .stories-list__item {
    vertical-align: top;
    font-size: 1.6rem;
    line-height: 1.53;
    box-sizing: border-box;
    text-align: left;
    @media screen and (min-width: 750px) {
      margin: 0 2.5rem 5rem 0;
    }
    @media screen and (max-width: 749px) {
      margin: 0 0 1.5rem 0;
    }
  }

  & .experience .stories-list__item--woman {
    & .number-list {
      background: #fcecee;
    }
    & .copy {
      color: #e17777;
      font-weight: bold;
    }
  }

  & .experience .stories-list__item--man {
    & .number-list {
      background: #ecf5fc;
    }
    & .copy {
      color: #208abb;
      font-weight: bold;
    }
  }

  & .experience .stories-list__inner {
    border: 1px solid #a29e9d;
    border-radius: var(--radius-s);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  /* =========================================
   プロフィール情報 (.profile-info)
========================================= */
  & .experience .profile-info {
    font-size: 0;
    @media screen and (min-width: 750px) {
      margin-top: 2.3rem;
      min-height: 121px;
    }
    @media screen and (max-width: 749px) {
      margin-top: 2rem;
    }

    & .img-area,
    & .txt-area {
      display: inline-block;
    }

    & .img-area {
      margin-right: 20px;
      width: 71px;
      @media screen and (max-width: 749px) {
        margin-right: 12px;
      }
    }

    & .txt-area {
      vertical-align: top;
      width: calc(100% - 100px);
      @media screen and (min-width: 750px) {
        margin-top: 3px;
        font-size: 1.6rem;
      }
      @media screen and (max-width: 749px) {
        margin-top: 0;
        font-size: 1.4rem;
      }

      & .type {
        font-weight: bold;
        color: #463d3c;
        position: relative;
        z-index: 1;
        @media screen and (max-width: 749px) {
          font-size: 1.2rem;
        }

        &::before {
          content: '';
          position: absolute;
          z-index: -1;
          background-size: 134px 50px;
          width: 134px;
          height: 50px;
          top: -15px;
          left: -20px;
        }
      }
    }
  }
  & .experience {
    & .profile-info {
      & .txt-area {
        & .type--tanki {
          &::before {
            background: url(/introduce/images/experience/type_tanki_bg01.png)
              no-repeat;
          }
        }

        & .type--app {
          &::before {
            background: url(/introduce/images/experience/type_app_bg01.png)
              no-repeat;
          }
        }

        & .type--inexperienced {
          &::before {
            background: url(/introduce/images/experience/type_inexperienced_bg01.png)
              no-repeat;
          }
        }

        & .type--oyakoko {
          &::before {
            background: url(/introduce/images/experience/type_oyakoko_bg01.png)
              no-repeat;
          }
        }

        & .type--honki {
          &::before {
            background: url(/introduce/images/experience/type_honki_bg01.png)
              no-repeat;
          }
        }

        & .type--koso {
          &::before {
            background: url(/introduce/images/experience/type_koso_bg01.png)
              no-repeat;
          }
        }
      }
    }
  }

  & .experience .profile-info__name,
  & .experience .profile-info__age {
    display: inline-block;
    color: #463d3c;
    font-weight: bold;
    font-size: 1.4rem;

    & span {
      font-size: 2.3rem;
    }
  }

  & .experience .profile-info__age span {
    font-size: 1.8rem;
  }

  & .experience .profile-info__other {
    color: #748c50;
    font-size: 0;
    @media screen and (min-width: 750px) {
      margin-top: 14px;
    }
    @media screen and (max-width: 749px) {
      margin-top: 8px;
    }

    & li {
      color: #463d3c;
      display: inline-block;
      margin-right: 10px;

      @media screen and (min-width: 750px) {
        font-size: 1.2rem;
      }
      @media screen and (max-width: 749px) {
        font-size: 1.4rem;
      }
    }
  }
  /* =========================================
料金表　 .pricing
========================================= */
  & .pricing-section {
    & .pricing-desc {
      padding-top: clamp(4rem, 2.76rem + 3.31vw, 6.4rem);
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
      @media screen and (min-width: 750px) {
        text-align: center;
      }
    }

    & .or {
      font-size: 1.4rem;
      line-height: 1.1;
      font-weight: normal;
      display: block;
    }
    & .yen {
      font-size: 1.2rem;
      padding-left: 0.1rem;
      @media (min-width: 920px) {
        font-size: 1.8rem;
      }
    }
    & .pricing-detail {
      margin-bottom: 1.6rem;
      & .sp-only {
        display: block;
        @media (min-width: 920px) {
          display: none;
        }
      }
      & .pc-only {
        display: none;
        @media (min-width: 920px) {
          display: block;
        }
      }
    }
    & .c-text-note {
      margin-bottom: 3.2rem;
      @media screen and (min-width: 650px) {
        text-align: right;
      }
    }
    & .price-body {
      & .c-heading-xxs {
        text-align: left;
        margin-bottom: 1.6rem;
      }
    }
  }

  /* =========================================
PC用：テーブルのスタイル
========================================= */
  & .pricing-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-weight: bold;

    & th,
    & td {
      border: 1px solid var(--color-brown);
      padding: 11px;
      vertical-align: middle;
      font-size: 1.8rem;
    }

    & thead {
      background-color: var(--color-brown);
      color: #fff;

      & th {
        border-color: #fff;
      }
      & .th-course {
        width: 328px;
      }
      & .th-reg {
        width: 188px;
        border-right: 1px solid var(--color-brown);
      }
    }

    & tbody {
      & td {
        border-color: var(--color-brown);
      }

      & .td-course {
        text-align: left;
        padding: 2.4rem;
        & .course-name {
          color: var(--color-brown);
          font-size: 2rem;
          margin-bottom: 5px;
        }
        & .course-desc {
          font-size: 1.6rem;
          font-weight: normal;
        }
      }

      & .course-price {
        font-size: 2.8rem;
        padding: 2.4rem 0;
      }
      & .td-reg {
        font-size: 1.2rem;
      }
    }
  }

  /* =========================================
SP用：カード型のスタイル
========================================= */
  & .plan-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;

    & .plan-item {
      border: 1px solid var(--color-brown);

      & .pi-title-area {
        background-color: var(--color-brown);
        color: #fff;
        text-align: center;
        padding: 15px;
        & .pi-name {
          margin: 0 0 5px;
          font-size: 1.8rem;
        }
        & .pi-desc {
          margin: 0;
          font-size: 1.4rem;
          font-weight: normal;
        }
      }

      & .price-header-sp {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr 1fr;
        background-color: var(--base-color);
        text-align: center;
        font-weight: bold;
        font-size: 1.4rem;
        border-bottom: 1px solid var(--color-brown);

        & .ps-group-ttl {
          grid-column: 1 / 4;
          padding: 10px;
          border-right: 1px solid var(--color-brown);
          border-bottom: 1px solid var(--color-brown);
        }
        & .ps-reg-ttl {
          grid-column: 4;
          grid-row: 1 / 3;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        & .ps-col {
          padding: 10px;
          border-right: 1px solid var(--color-brown);
        }
      }

      & .pi-data-area {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr 1fr;
        text-align: center;
        font-weight: bold;
        align-items: stretch;
        font-size: 1.6rem;
        @media (min-width: 750px) {
          font-size: 2.4rem;
        }

        & .pd-col {
          padding: 1.6rem 0.4rem;
          border-right: 1px solid var(--color-brown);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
        & .pd-reg {
          padding: 15px 5px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  /* =========================================
  パララックスセクション (.c-parallax)
========================================= */
  & .c-parallax {
    min-height: 224px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    clip-path: inset(0);

    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: center;
      z-index: -1;
      transform: translateZ(0);
      will-change: transform;
    }

    &.bg-feature::before {
      background-image: url('/branch/assets/img/common/bg-parallax-data_sp.webp');

      @media screen and (min-width: 768px) {
        background-image: url('/branch/assets/img/common/bg-parallax-data_pc.webp');
      }
    }
    &.bg-concierge::before {
      background-image: url('/branch/assets/img/common/bg-parallax-cc_sp.webp');
      @media screen and (min-width: 768px) {
        background-image: url('/branch/assets/img/common/bg-parallax-cc_pc.webp');
      }
    }
    &.bg-course::before {
      background-image: url('/branch/assets/img/common/bg-parallax-course_sp.webp');
      @media screen and (min-width: 768px) {
        background-image: url('/branch/assets/img/common/bg-parallax-course_pc.webp');
      }
    }
    &.bg-visit::before {
      background-image: url('/branch/assets/img/common/bg-parallax-visit_sp.webp');
      @media screen and (min-width: 768px) {
        background-image: url('/branch/assets/img/common/bg-parallax-visit_pc.webp');
      }
    }
    & .c-heading-l {
      position: relative;
      z-index: 1;
      color: #fff;
      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.31);
    }
  }

  /* =========================================
    (.subline-section　.option-section)
========================================= */
  & .subline-section,
  & .option-section {
    margin-bottom: clamp(6.4rem, 5.57rem + 2.21vw, 8rem);
    padding-top: clamp(6.4rem, 5.57rem + 2.21vw, 8rem);

    & .c-heading-m {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
    }
    & .subline-desc,
    & .option-desc {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
      @media screen and (min-width: 750px) {
        text-align: center;
      }
    }
    & .subline-bnr,
    & .option-bnr {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      @media screen and (min-width: 750px) {
        flex-direction: row;
        gap: clamp(4rem, 2.97rem + 2.76vw, 6rem);
      }
      & li {
        margin-bottom: clamp(2.4rem, 1.57rem + 2.21vw, 4rem);
        &:last-child {
          margin-bottom: 0;
        }
        @media screen and (min-width: 750px) {
          margin-bottom: 0;
        }
      }
      & img {
        border-radius: var(--radius-s);
      }
    }
  }
  & .subline-section {
    margin-bottom: 0;
  }
  /* =========================================
  流れ (.coming-section)
========================================= */
  & .coming-section {
    & .c-text-note {
      margin-top: 0.8rem;
    }

    & .coming-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: clamp(2rem, 1.38rem + 1.66vw, 3.2rem);

      & .icon-time {
        background: var(--color-brown);
        color: #fff;
        padding: 0.8rem 1.6rem;
      }
    }

    & .coming-desc {
      margin-bottom: clamp(1.6rem, 1.19rem + 1.1vw, 2.4rem);
      @media screen and (min-width: 750px) {
        text-align: center;
      }
    }
    & .coming-list {
      display: flex;
      flex-direction: column;
      /*justify-content: space-between;*/
      gap: 3.2rem;
      counter-reset: step-number;

      @media screen and (min-width: 750px) {
        flex-direction: row;
      }

      & li {
        position: relative;
        @media screen and (min-width: 750px) {
          width: calc((100% - 6.4rem) / 3);
          max-width: 34rem;
        }
        /* SP専用：カード全体の下につく矢印 */
        &:after {
          content: '';
          position: absolute;
          display: block;
          bottom: -2.4rem;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 15px 20px 0 20px;
          border-color: #e0e0e0 transparent transparent transparent;

          @media screen and (min-width: 750px) {
            display: none;
          }
        }
        &:last-child:after {
          display: none;
        }
        & h4 {
          display: flex;
          align-items: center;
          gap: 1.2rem;
          margin: 1.8rem 0 1.5rem;
          font-size: 1.8rem;
          font-weight: bold;

          &:before {
            counter-increment: step-number; /* カウンターを+1 */
            content: counter(step-number);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            background: #b6b694;
            color: #fff;
            border-radius: 50%;
            flex-shrink: 0;
            font-size: 1.8rem;
          }
        }
      }
      & .coming-img-wrap {
        position: relative;

        & img {
          display: block;
          width: 100%;
          height: auto;
          border-radius: var(--radius-s);
        }

        @media screen and (min-width: 750px) {
          &:after {
            content: '';
            position: absolute;
            display: block;
            top: 50%;
            right: -1.6rem;
            transform: translate(50%, -50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px 0 20px 15px;
            border-color: transparent transparent transparent #e0e0e0;
          }
        }
      }
      & li:last-child .coming-img-wrap:after {
        display: none;
      }
    }
  }

  /* ========================================
  サイド追従（※不要なら削除）
========================================= */
  & .bnr-conv {
    position: fixed;
    right: 0;
    bottom: 30px;
    font-size: 0;
    z-index: 9999;

    & a {
      display: block;
      margin-bottom: 1px;
    }
  }
}