@charset "UTF-8";

:root {
  --color-green: #459189;
}

/************************************
** 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(--naturafit-color);
    color: var(--naturafit-color);
}
.hov-bg-main:hover {
    background-color: var(--naturafit-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 {
  .items {
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  .rw01 {
    margin-bottom: 0px;
    a {
      display: block;
      width: 400px;
      border: 2px solid var(--naturafit-color);
      border-radius: 50px;
      padding: 15px;
      font-size: 20px;
      color: #222;
      text-align: center;
      position: relative;
      transition: all 0.7s ease;
      i {
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        color: var(--naturafit-color);
      }
      &:hover {
        background: var(--naturafit-color);
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
  }
  @media screen and (max-width: 959px) {
    .rw01 {
      margin-bottom: 40px;
      .items {
        flex-wrap: wrap;
        gap: 20px;
      }
      a {
        width: calc(100vw - 30px);
      }
    }
  }
}

/************************************
** lead
************************************/
.lead .rw {
  text-align: center;
  margin-bottom: 40px;
}
.lead .rw01 {
  text-align: center;
  ul li {
    font-size: 24px;
    span {
      font-size: 14px;
      color: var(--color-green);
      padding-right: 0.5em;
    }
  }
  @media screen and (max-width: 480px) {
    ul li {
      font-size: 20px;
    }
  }
}
.lead .rw02 {
  .msg {
    font-size: 24px;
    color: var(--color-green);
    .s1 {
      font-size: 32px;
    }
  }
  @media screen and (max-width: 480px) {
    .msg {
      font-size: 20px;
      .s1 {
        font-size: 28px;
      }
    }
  }
}
.lead .rw03 {
  .items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  .items .item {
    .iw {
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 16px;
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
    .msg {
      font-size: 18px;
      font-weight: bold;
    }
  }
  @media screen and (max-width: 480px) {
    .items {
      grid-template-columns: repeat(2, 1fr);
    }
    .items .item {
      .msg {
        font-size: 16px;
      }
    }
  }
}
/************************************
** service
************************************/
.service {
  .rw {
    padding-bottom: 60px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 60px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .style02 {
    display: none;
    font-size: 60px;
    letter-spacing: 0.1em;
    color: #d9f1f0;
    line-height: 1.2;
  }
  .sttl {
    font-size: 32px;
    color: #459189;
    margin-bottom: 0px;
    span {
      padding-right: 0.25em;
    }
  }
  .desc {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .items {
    display: flex;
    gap: 30px;
    height: 600px;

    .item01 {
      width: 40%;
      
      .thumb-wrapper .thumb-media {
        /* アコーディオン（説明文）のスタイル */
        .thumb-desc-wrap {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.4s ease;
        }
        
        .thumb-desc-inner {
          overflow: hidden;
          min-height: 0;
          font-size: 14px;
          line-height: 1.6;
          color: #333;
          padding: 0 10px;
          opacity: 0;
          transition: opacity 0.4s ease, padding 0.4s ease;
        }

        /* アクティブ時（選択中）のスタイル */
        &.is-active {
          .item-name {
            background: #fff;
            color: var(--naturafit-color);
            border-color: var(--naturafit-color);
            i {
              color: var(--naturafit-color);
            }
          }
          
          .thumb-desc-wrap {
            grid-template-rows: 1fr;
          }
          
          .thumb-desc-inner {
            opacity: 1;
            padding: 5px 10px 20px;
          }
        }

        .item-name {
          display: block;
          position: relative;
          margin-bottom: 10px;
          padding: 15px 20px;
          background: var(--color-green);
          color: #fff;
          border: 2px solid var(--color-green);
          border-radius: 15px;
          cursor: pointer;
          transition: all 0.7s ease;
          i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 5%;
          }
          &:hover {
            background: #fff;
            color: var(--naturafit-color);
            border-color: var(--naturafit-color);
            i {
              color: var(--naturafit-color);
            }
          }
        }
      }
      
      .attn {
        text-align: right;
        font-size: 14px;
      }
    }
    
    .item02 {
      width: 60%;
      overflow: hidden;

      .item-image {
        height: 100%;

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

.service .svc01 .items .item01 {
  overflow: auto;
  overflow-y: scroll;
}

.service .svc03 .items,
.service .svc04 .items,
.service .svc05 .items {
  .item01 {
    display: none;
  }
}

/* --- レスポンシブ（スマホ用） --- */
@media screen and (max-width: 767px) {
  .service {
    .rw {
      padding-bottom: 0;
      margin-bottom: 30px;
    }
    .style02 {
      font-size: 28px;
    }
    .sttl {
      font-size: 24px;
      margin-bottom: 0px;
    }
    .desc {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .items {
      flex-wrap: wrap;
      gap: 20px;
      height: auto;
      margin-bottom: 30px;
      
      /* 画像スライダー（常に上部に配置） */
      .item02 {
        order: 1;
        width: 100%;
        height: 280px; /* スマホで見やすいサイズ */
      }

      /* ボタンエリア（下部に配置し、枠内で縦スクロール） */
      .item01 {
        order: 2;
        width: 100%;
        height: 240px;       /* ★ボタンエリア全体の高さを制限 */
        overflow-y: auto;    /* ★縦スクロールを有効化 */
        overflow-x: hidden;  /* 横スクロールは禁止 */
        padding-right: 5px;  /* スクロールバーとボタンの間の余白 */
        
        /* スクロールバーを少し細くしてスタイリッシュに */
        &::-webkit-scrollbar {
          width: 5px;
        }
        &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 3px;
        }

        .thumb-wrapper {
          display: block; /* ★1カラム（縦並び）に固定 */
          
          .thumb-media {
            width: 100%;
            
            /* アコーディオン（説明文）のスタイルはPC用を継承、
               縦スクロール枠の中でそのまま文字量に応じて展開します */
            .thumb-desc-inner {
              font-size: 13px;
              color: #444;
            }

            .item-name {
              padding: 12px 15px;
              margin-bottom: 10px; /* ボタン同士の間隔 */
              font-size: 14px;
              border-radius: 10px;
              
              i {
                font-size: 12px;
                right: 15px;
              }
            }
          }
        }
      }
    }
  }
  
  /* 特定の個別の高さ制限を上書きして統一 */
  .service .svc01 .items .item01,
  .service .svc02 .items .item01 {
    height: 240px !important; /* 上記の設定と合わせる */
    overflow-y: auto !important;
  }
  
  .service .svc03 .items,
  .service .svc04 .items,
  .service .svc05 .items {
    .item01 {
      display: none;
    }
    .thumb-wrapper {
      display: block;
    }
  }
}


/************************************
** Price
************************************/
.price {
  --label-width: 320px;
  --border: #d9d9d9;
  --gray: #bcbcbc;
  --brown: #9b8b8b;
  --rightgreen: #5ba198;
  --green: #459189;
  --accent: #459189;
  .wrap {
    display: flex;
    flex-direction: column;
    /* gap: 40px; */
  }
}

/* 共通 */
.price-section,
.price-entry {
  display: flex;
  border: 1px solid var(--border);
}
.price-entry {
  margin-bottom: 40px;
  border: none;
}
.price-label {
  width: var(--label-width);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--rightgreen);
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  padding: 20px;
  flex-shrink: 0;
}

/* 月額 */
.price-list {
  flex: 1;
}
.price-item {
  display: grid;
  grid-template-columns: 1fr 260px;
  border-bottom: 1px solid var(--border);
}
.price-item:last-child {
  border-bottom: none;
}
.plan {
  padding: 28px 35px;
  h3 {
    font-size: 28px;
    margin-bottom: 8px;
    font-weight: 500;
  }
  p {
    font-size: 17px;
    line-height: 1.8;
  }
  ol {
    margin-left: 25px;
    list-style-type: disclosure-closed;
  }
}
.price-value {
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--border);
  font-size: 34px;
  font-weight: 500;
  span {
    margin-top: 5px;
    font-size: 15px;
  }
}
.price-item-01 .price-value {
  color: #459189;
}

/* 相互利用 */
.mutual {
  .price-label {
    background: var(--accent);
  }
}
.mutual-box {
  flex: 1;
  text-align: center;
}
.copy {
  padding: 25px;
  font-size: 28px;
  color: var(--accent);
  border-bottom: 1px dashed var(--border);
}
.campaign {
  padding: 45px;
  p {
    font-size: 30px;
  }
}
.campaign-price {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin-top: 25px;
}
.before {
  font-size: 32px;
  text-decoration: line-through;
}
.arrow {
  font-size: 55px;
  color: var(--accent);
}
.after {
  font-size: 72px;
  color: var(--accent);
  small {
    font-size: 22px;
  }
}
.note {
  background: #f6f6f6;
  padding: 20px;
  font-size: 22px;
}
.banner {
  padding: 35px;
  p {
    margin-bottom: 18px;
    color: #af6660;
    font-size: 24px;
  }
  img {
    width: 100%;
    display: block;
  }
}

/************************************
** price SP
************************************/
@media (max-width: 768px) {
  .price-section {
    display: block;
    margin-bottom: 40px;
  }
  .price-section.mutual {
    margin-bottom: 0;
  }
  .price-label {
    width: 100%;
    padding: 16px;
    font-size: 20px;
  }
  .first {
    padding: 35px 20px;
    .lead {
      font-size: 20px;
    }
    .free {
      font-size: 36px;
    }
  }
  .price-item {
    grid-template-columns: 1fr;
  }
  .plan {
    padding: 15px;
    text-align: center;
    h3 {
      font-size: 20px;
    }
    p {
      font-size: 14px;
    }
  }
  .price-value {
    padding: 15px;
    font-size: 22px;

    span {
      font-size: 13px;
    }
  }
  .copy {
    padding: 15px;
    font-size: 20px;
  }
  .campaign {
    padding: 30px 20px;
    p {
      font-size: 28px;
    }
  }
  .campaign-price {
    display: block;
    margin-top: 0;
  }
  .before,
  .arrow,
  .after {
    display: block;
  }
  .before {
    font-size: 28px;
  }
  .arrow {
    margin: 10px 0;
    transform: rotate(90deg);
  }
  .after {
    font-size: 48px;
  }
  .note {
    padding: 15px;
    font-size: 20px;
  }
  .banner {
    padding: 20px;
    p {
      font-size: 22px;
    }
  }
}

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

  p {
    margin-bottom: 10px;
  }
}
.links .rw01 a {
  display: block;
  width: 400px;
  margin: 0 auto;
  border: 2px solid var(--naturafit-color);
  border-radius: 50px;
  padding: 15px;
  font-size: 20px;
  color: #222;
  text-align: center;
  position: relative;
  transition: all 0.7s ease;
  i {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    color: var(--naturafit-color);
  }
  &:hover {
    background: var(--naturafit-color);
    color: #fff;
    i {
      color: #fff;
    }
  }
  @media screen and (max-width: 767px) {
    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(--andmake-color);
    }
    &.item2 .cont {
      background: var(--pilatesmusk-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: clamp(15px, 1.6vw, 20px);
        text-align: center;
        font-size: clamp(12px, 1.5vw, 18px);
        letter-spacing: 0.2em;
        color: #fff;
        @media screen and (max-width: 480px) {
          width: 70%;
        }
        p {
          margin-bottom: clamp(10px, 1.25vw, 15px);
        }
        .box-iw {
          margin: 0 auto;
          img {
            width: auto;
            height: clamp(40px, 5vw, 60px);
          }
        }
      }
    }
  }
}