@charset "UTF-8";

/************************************
** init
************************************/
.l-content {
  margin: 0 auto;
  padding-top: 0;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.fw {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.inner-wrap,
.wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 480px) {
  .inner-wrap,
  .wrap {
    width: auto;
    padding: 30px 15px;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}


/************************************
** pageTop
************************************/

.c-fixBtn {
    background: #fff;
    border: 1px solid var(--andmake-color);
    color: var(--andmake-color);
}
.hov-bg-main:hover {
    background-color: var(--andmake-color)!important;
    color: #fff!important
}

/************************************
** banner
************************************/
.campaign-banner {
  padding-top: 60px;
  margin: 0 auto;
  text-align: center;
  @media screen and (max-width: 959px) {
    padding: 30px 0 0;
  }
}

/************************************
** Page-Navi
************************************/
.page-navi {
  .wrap {
    padding: 30px 0 30px;
  }
  .rw01 {
    margin-bottom: 0;
    .items {
      display: flex;
      justify-content: center;
      gap: 30px;
    }
    .item {
      flex: 1;
      max-width: 280px;
      a {
        display: block;
        border: 2px solid var(--andmake-color);
        border-radius: 50px;
        padding: 15px;
        font-size: 20px;
        color: #222;
        text-align: center;
        position: relative;
        transition: all 0.7s ease;
        text-decoration: none;
        i {
          position: absolute;
          top: 50%;
          right: 10%;
          transform: translateY(-50%);
          color: var(--andmake-color);
        }
        &:hover {
          background: var(--andmake-color);
          color: #fff;
          i {
            color: #fff;
          }
        }
      }
    }
  }

  /* SP用の設定（959px以下） */
  @media screen and (max-width: 959px) {
    .wrap{
      padding:30px 15px;
    }
    .rw01 {
      margin-bottom: 0px;
      .items {
        flex-wrap: wrap;
        gap: 10px;
      }
      .item {
        flex: none;
        width: calc(50% - 10px);
        max-width: none;
        a {
          font-size: 14px;
        }
      }
    }
  }
}

/************************************
** service
************************************/
.service {
  .lead {
    text-align: center;
    margin-bottom: clamp(40px, 7.5vw, 90px);
    font-size: clamp(16px, 2.5vw, 24px);
  }
  .hmsg-sp {
    background: linear-gradient(180deg, #cab79d, #cab79d);
    color: #fff;
    padding: 20px 15px;
    border-radius: 30px 30px 0 0;
    font-size: 17px;
  }
}
.service-container {
  position: relative;
  /* margin-bottom: 60px; */

  .hmsg {
    position: absolute;
    top: -30px;
    left: 0%;
    width: 80%;
    display: block;
    margin: 0 10% 60px 10%;
    font-size: 18px;
    text-align: center;
    padding: 15px;
    background: var(--andmake-color);
    color: #fff;
    border-radius: 30px;
    z-index: 10;
  }
  @media (max-width: 768px) {
    .hmsg {
      display: none;
    }
  }
}
.service .items.swiper {
  border: 2px solid var(--andmake-color);
  padding: 60px 20px 30px;
  background: #fff;
  .item {
    display: block;
    height: 300px;
    padding-right: 15px;
    border-right: 1px solid var(--andmake-color);
    &:nth-child(5) {
      padding-right: 0;
      border: none;
    }
    .iw {
      width: 120px;
      height: 120px;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 20px;
      img {
        width: 100%;
        object-fit: contain;
      }
    }
    h3 {
      text-align: center;
      margin-bottom: 10px;
    }
    .msg {
      font-size: 14px;
    }
  }
}
/************************************
** aim
************************************/
.aim {
  margin-bottom: 60px;
  .items {
    display: flex;
    margin-bottom: 60px;
    .iw {
      margin-bottom: 30px;
    }
    .item:nth-child(1) {
      padding-top: 5px; /*画像タイトルの位置調整のため*/
    }
    .effect {
      display: flex;
      align-items: center;
      gap: 30px;
      padding: 0 30px 30px;
      img {
        width: 30%;
      }
      p {
        font-size: 30px;
      }
    }
  }
  .msg {
    text-align: center;
    font-size: clamp(16px,2.33vw,28px);
  }
  @media (max-width: 768px) {
    margin-bottom: 30px;
    .items {
      flex-wrap: wrap;
      margin-bottom: 30px;
      .iw {
        margin-bottom: 20px;
      }
      .effect {
        align-items: center;
        gap: 30px;
        padding: 0 0 30px;
      }
    }
    .msg {
    text-align: left;
    }
  }
}

/************************************
** plan
************************************/
/** .trial **/
.trial {
  .items {
    display: flex;
    justify-content: center;
    gap: 30px;
    .item {
      width: 50%;
    }
    .item02 {
      .box {
        border: 1px solid #ccc;
        margin-bottom: 30px;
        font-size: clamp(18px, 1.66vw, 20px);
        .ttl {
          text-align: center;
          padding: 15px;
          background: #f6f2ea;
          border-bottom: 1px solid #ccc;
        }
        .price {
          text-align: center;
          padding: 15px;
          background: #fff;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .msg {
      font-size: clamp(16px, 2.5vw, 20px);
      span {
        font-size: 16px;
      }
    }
  }
  @media (max-width: 767px) {
    .items {
      flex-wrap: wrap;
      .item {
        width: 100%;
      }
      .item .msg {
        font-size: 16px;
      }
    }
  }
}

/** select **/
.select {
  .ttl-plan {
    background: var(--andmake-color);
    color: #fff;
    padding: 20px 30px;
    font-size: 18px;
    border-radius: 10px;
    margin-bottom: clamp(20px, 3.33vw, 40px);
  }
  .items {
    display: flex;
    gap: 30px;
    .item {
      width: 50%;
    }
    .item h3 {
      font-size: clamp(18px, 1.66vw, 20px);
      margin-bottom: 10px;
    }
    .item p {
      font-size: clamp(16px, 1.416vw, 17px);
      margin-bottom: 20px;
      height: 80px;
    }
  }
  @media (max-width: 768px) {
    .items {
      flex-wrap: wrap;
      .item {
        width: 100%;
      }
      .item p {
        height: auto;
      }
      .item .atten {
        font-size: 12px;
      }
    }
  }
}
.select .wrap > .ttl-plan:first-of-type + .items {
  margin-bottom: 60px;
}

/************************************
** links
************************************/
.links .wrap {
  padding: 0 15px;
}
.links .rw {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-size: 16px;
  p {
    margin-bottom: 10px;
  }
}

/************************************
** before and after
************************************/

/* --- 全体共通・変数定義とネスト構造 --- */
.beforeafter {
  --ba-theme-color: #c9bba6;   /* ゴールド/ベージュ系のアクセントカラー */
  --ba-border-color: #e6e1da;  /* 外枠や線の淡いグレーベージュ */
  --ba-text-main: #333333;

  .ba-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* カード間の余白 */
  }

  .ba-card {
    border: 1px solid var(--ba-border-color); /* 全体を囲う細い線 */
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  .ba-card-inner {
    padding: 40px 50px; /* PC時のカード内余白 */
  }

  /* --- ヘッダー（基本情報） --- */
  .ba-header {
    font-size: 20px;
    color: var(--ba-text-main);
    letter-spacing: 0.1em;
    margin-bottom: 40px;
  }

  /* --- メイン・サブ比較エリア --- */
  .ba-compare-main,
  .ba-compare-sub {
    display: grid;
    grid-template-columns: 1fr 140px 1fr; /* 左右のカラムと中央のバッジエリアの比率 */
    gap: 20px;
    align-items: center;
  }

  .ba-compare-sub {
    margin-top: 40px;
  }

  /* 左右カラム内 */
  .ba-col {
    display: flex;
    flex-direction: column;

    .col-title {
      font-size: 28px;
      color: var(--ba-text-main);
      text-align: left;
      letter-spacing: 0.05em;
    }

    .img-wrap {
      width: 100%;
      background-color: #f0f0f0;
      aspect-ratio: 3 / 4;
      overflow: hidden;

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

    /* 画像下のステータスボックス */
    .stats-box {
      border: 1px solid var(--ba-border-color);
      border-top: none; /* 画像とピッタリくっつけるため上線はなし */
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;

      .stat-row {
        display: grid;
        grid-template-columns: 100px 50px 100px; /* 文字幅を固定して「：」を揃える */
        font-size: 20px;
        color: var(--ba-text-main);
        letter-spacing: 0.1em;

        .label {
          text-align: justify; /* 「体重」と「体脂肪」の幅を美しく揃える */
          text-align-last: justify;
        }

        .colon {
          text-align: center;
        }

        .val {
          text-align: right;
        }
      }
    }
  }

  /* --- 中央（期間バッジ） --- */
  .ba-center {
    display: flex;
    justify-content: center;
    align-items: center;

    .duration-badge {
      background-color: var(--ba-theme-color);
      color: #fff;
      padding: 15px 30px;
      border-radius: 40px;
      font-size: 16px;
      font-family: serif;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }
  }

  /* --- 下部：TOTAL結果帯 --- */
  .ba-result-bar {
    background-color: var(--ba-theme-color);
    color: #fff;
    padding: 25px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    .total-label {
      font-size: 20px;
      letter-spacing: 0.1em;
    }

    .res-wrap {
      display: flex;
      gap: 30px;
      align-items: baseline;
    }

    .res-item {
      display: flex;
      align-items: baseline;

      .label {
        font-size: 14px;
        letter-spacing: 0.05em;
      }

      .value {
        font-size: clamp(24px, 2.5vw, 36px);
        font-family: serif;
        margin-left: 5px;
      }
    }
  }

  /* --- PC用：SP用タブコントローラーを非表示 --- */
  .sp-tab-controller {
    display: none;
  }

  /* --- 下部リンクボタン --- */
  .link {
    text-align: center;
    margin-top: 40px;

    a {
      display: block;
      width: 480px;
      margin: 0 auto;
      border: 2px solid var(--andmake-color);
      border-radius: 50px;
      padding: 15px;
      font-size: clamp(16px, 1.6vw, 20px);
      color: var(--andmake-color);
      text-align: center;
      position: relative;
      transition: all 0.7s ease;

      i {
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        color: var(--andmake-color);
      }

      &:hover {
        background: var(--andmake-color);
        color: #fff;

        i {
          color: #fff;
        }
      }
    }
  }

  /* ===================================================
  ** スマートフォン用レスポンシブ (画面幅 768px 以下)
  =================================================== */
  @media (max-width: 768px) {
    .ba-card-inner {
      padding: 25px 15px;
    }

    .ba-header {
      margin-bottom: 17px;
      font-size: 16px;
      text-align: left;
    }

    /* SP時はPC用の中央要素を非表示 */
    .pc-only {
      display: none !important;
    }

    /* SP時はGridを解除して通常のブロック表示に */
    .ba-compare-main,
    .ba-compare-sub {
      display: block; 
    }

    /* JavaScriptによる表示切り替えの仕組み */
    .ba-card[data-sp-view="before"] .after-col {
      display: none;
    }
    
    .ba-card[data-sp-view="after"] .before-col {
      display: none;
    }

    .ba-col {
      .col-title {
        font-size: 22px;
        margin-bottom: 0;
        text-align: left;
      }

      .stats-box {
        padding: 15px 0;
        gap: 10px;

        .stat-row {
          grid-template-columns: 80px 50px 80px; /* スマホ用のバランス調整 */
          font-size: 16px;
        }
      }
    }

    /* SP用タブボタンのデザイン */
    .sp-tab-controller {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-top: 30px;
    }

    .sp-tab-btn {
      width: 100px;
      padding: 10px 0;
      border-radius: 8px;
      border: 1px solid #786b5c;
      background: #fff;
      color: #786b5c;
      font-family: serif;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;

      /* アクティブ（選択中）ボタン */
      &.active {
        background: #786b5c; 
        color: #fff;
      }
    }

    /* 中央の期間バッジ */
    .sp-tab-badge {
      background: var(--ba-theme-color);
      color: #fff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-family: serif;
      white-space: nowrap;
    }

    /* TOTAL結果帯のスマホ対応（縦並び） */
    .ba-result-bar {
      flex-direction: column;
      gap: 15px;
      padding: 25px 20px;

      .res-wrap {
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }

      .res-item {
        justify-content: space-between; 
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding-bottom: 5px;

        .value {
          font-size: 24px;
        }
      }
    }

    /* 下部リンクボタンの幅調整 */
    .link a {
      width: auto;
    }
  }
}
/************************************
** trainer
************************************/

.trainer {
  /* ▼ メインスライダーのスタイル ▼ */
  .trainer-swiper-main {
    width: 100%;
    margin-bottom: 20px; /* サムネイルとの余白 */
  }

  .item {
    display: flex;
    gap: 40px;
    padding: 30px;
    box-sizing: border-box;

    /* 高さを統一（PC時は一律450pxに固定） */
    height: 450px;
    border: 1px solid var(--main-color);

    .img {
      width: 40%;
      height: 100%; /* 親の高さに合わせる */
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 画像の比率が違っても枠に合わせてトリミング */
        display: block;
      }
    }

    .profile {
      width: 60%;
      display: flex;
      flex-direction: column;
      height: 100%; /* 親の高さに合わせる */
      min-height: 0; /* Flexbox内で子要素のスクロールを有効にするための必須指定 */

      .name {
        display: grid;
        margin-bottom: 15px;
        flex-shrink: 0;

        .en {
          letter-spacing: 0.15em;
        }
        .jp {
          font-size: 40px;
          font-weight: bold;
          letter-spacing: 0.1em;
        }
      }

      .msg {
        flex-grow: 1; /* 残りの高さをすべて埋める */
        overflow-y: auto; /* 文章が長い場合は縦スクロール */
        padding-right: 15px; /* スクロールバー用の余白 */

        /* モダンなスクロールバーのスタイリング */
        scrollbar-width: thin; /* Firefox用 */
        scrollbar-color: var(--main-color) transparent;

        /* Chrome, Safari用のスクロールバースタイル */
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--main-color);
          border-radius: 10px;
        }

        h3 {
          color: var(--main-color);
          font-size: 20px;
          letter-spacing: 0.1em;
          margin-bottom: 10px;
        }
        p {
          margin: 0;
          line-height: 1.6;
        }
      }
    }

    /* SP時のレスポンシブ (Media Query Range Context) */
    @media (width <= 768px) {
      flex-direction: column;
      height: 600px; /* SP時の全体の高さを統一 */
      gap: 20px;
      padding: 20px;

      .img {
        width: 100%;
        height: 250px; /* SP時の画像の高さを固定 */
      }

      .profile {
        width: 100%;
      }
    }
  }

  /* ▼ サムネイルスライダーのスタイル ▼ */
  .trainer-swiper-thumbs {
    width: 100%;
    box-sizing: border-box;

    .swiper-slide {
      aspect-ratio: 4 /3;
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 0.3s ease;
      border: 2px solid transparent;
      box-sizing: border-box;

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

    /* アクティブ（現在表示中）のサムネイル */
    .swiper-slide-thumb-active {
      opacity: 1;
      border-color: var(--main-color);
    }

    @media (width <= 768px) {
      .swiper-slide {
        height: 60px; /* SP時は少し小さく */
      }
    }
  }
}

/************************************
** service-links
************************************/
.service-links {
  /* SP: コンテナ全体のマージン */
  @media screen and (max-width: 480px) {
    margin-bottom: 30px;
  }
  .items {
    display: flex;
    gap: 30px;
    @media screen and (max-width: 480px) {
      display: block;
    }
  }
  .item {
    margin-bottom: 5px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    @media screen and (max-width: 480px) {
      margin-bottom: 10px;
    }
    /* 動的クラスによる背景色の出し分け（CSSネストでは & を結合） */
    &.item1 .cont {
      background: var(--pilatesmusk-color);
    }
    &.item2 .cont {
      background: var(--naturafit-color);
    }
    a {
      display: flex;
      position: relative;
      height: 150px;
      transition: opacity 0.7s ease; /* ホバー時の透過用 */
      @media screen and (max-width: 480px) {
        height: 100px;
      }
      &:hover {
        opacity: 0.8;
        &::after {
          right: 20px;
        }
      }
      /* 矢印アイコン */
      &::after {
        content: "";
        position: absolute;
        top: 45%;
        right: 25px;
        width: 15px;
        height: 15px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: rotate(135deg);
        transition: right 0.7s ease; /* アニメーション対象をrightに修正 */
        @media screen and (max-width: 480px) {
          right: 20px;
          width: 10px;
          height: 10px;
        }
      }
      /* 左側: 画像エリア */
      .iw {
        width: 40%;
        overflow: hidden;
        @media screen and (max-width: 480px) {
          width: 30%;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      /* 右側: コンテンツエリア */
      .cont {
        display: block;
        width: 60%;
        padding: 20px;
        text-align: center;
        font-size: 18px;
        letter-spacing: 0.2em;
        color: #fff;
        @media screen and (max-width: 480px) {
          width: 70%;
          padding: 15px;
          font-size: 12px;
        }
        p {
          margin-bottom: 15px;
          @media screen and (max-width: 480px) {
            margin-bottom: 10px;
          }
        }
        .box-iw {
          margin: 0 auto;
          img {
            width: auto;
            height: 60px;
            @media screen and (max-width: 480px) {
              height: 40px;
            }
          }
        }
      }
    }
  }
}