@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);
}
.wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 480px) {
  .wrap {
    width: auto;
    padding: 30px 15px;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}



/************************************
** before and after
************************************/
.ba .lead {
  text-align: center;
  margin-bottom: clamp(30px, 3.33vw, 40px);
  p {
    font-size: clamp(18px, 2.33vw, 28px);
  }
}

/* --- 全体共通・変数定義とネスト構造 --- */
.ba {
  --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;
    }
  }
}

/************************************
** 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;
            }
          }
        }
      }
    }
  }
}