.flex {display: flex;}
.justify-start {justify-content: start;}
.justify-end {justify-content: end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.items-stretch {align-items: stretch;}
.items-start {align-items: start;}
.items-center {align-items: center;}
.items-end {align-items: end;}
.flex-col {flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}

.sp {display: none;}
@media (max-width: 768px) {
  .pc {display: none;}
  .sp {display: block;}
}

:root {
  --mainYellow: #FFE869;
}

/* コンポーネント */
/* タイトル */
.c-title{
  position: relative;
  margin-bottom: 2.4rem;
  & .c-heading01{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    font-weight: 600;
    text-align: center;
  }
  & .c-text01{
    font-size: 2rem; /* 32px ÷ 16 = 2rem */
    font-weight: 600;
    font-family: "Noto Serif JP", serif;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 768px) {
  .c-title {
    margin-bottom: 4.25rem;
    & .c-heading01 {
      font-size: 1.7919rem; /* 14px ÷ 7.8125 = 1.7919rem */
    }
    & .c-text01 {
      font-size: 3.5837rem; /* 28px ÷ 7.8125 = 3.5837rem */
      margin-bottom: 1rem;
    }
  }
}

/* インナー */
.c-inner_m{
  width: 90%;
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 4rem 0;
}
@media (max-width: 768px) {
  .c-inner_m {
    max-width: 100%;
    width: 92%;
    padding: 8rem 0 9.5rem;
  }
}

.c-under_line{
  text-decoration: underline;
  text-decoration-color: var(--mainYellow);
  text-decoration-thickness: 0.75rem; /* 12px ÷ 16 = 0.75rem */
  text-underline-offset: -0.1rem;
  text-decoration-skip-ink: none;
}
.c-dot{
  position: relative;
  &::after{
    content: "";
    width: 0.3125rem; /* 5px ÷ 16 = 0.3125rem */
    height: 0.3125rem; /* 5px ÷ 16 = 0.3125rem */
    background: var(--mainYellow);
    border-radius: 50%;
    position: absolute;
    top: -0.1rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%)
  }
}
@media (max-width: 768px) {
  .c-under_line {
    text-decoration-thickness: 1.5359rem; /* 12px ÷ 7.8125 = 1.5359rem */
    text-underline-offset: -0.6rem;
  }
  .c-dot {
    &::after {
      width: 0.5119rem; /* 4px ÷ 7.8125 = 0.5119rem */
      height: 0.5119rem; /* 4px ÷ 7.8125 = 0.5119rem */
      top: -0.1rem;
    }
  }
}

.c-btn{
  margin: 0 auto;
  position: relative;
  z-index: 1;
  & .c-text01{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    font-weight: 600;
    line-height: 1;
    color: #9A73AF;
    width: fit-content;
    margin: 0 auto 0.5rem;
    text-align: center;
    position: relative;
    &::before,
    &::after{
      position: absolute;
      content: "";
      height: 2px; /* borderと同様にpx指定のまま */
      width: 1.0625rem; /* 17px ÷ 16 = 1.0625rem */
      background: #9A73AF;
      top: 50%;
    }
    &::before{
      left: -1.25rem;
      transform: translateY(-50%) rotate(50deg);
      -webkit-transform: translateY(-50%) rotate(50deg);
      -ms-transform: translateY(-50%) rotate(50deg);
    }
    &::after{
      right: -1.25rem;
      transform: translateY(-50%) rotate(-50deg);
      -webkit-transform: translateY(-50%) rotate(-50deg);
      -ms-transform: translateY(-50%) rotate(-50deg);
    }
  }
  & .c-link01{
    background: linear-gradient(to top, #9CAAD9, #9A73AF);
    color: white;
    max-width: 25rem; /* 400px ÷ 16 = 25rem */
    width: 100%;
    margin: 0 auto;
    font-size: 1.125rem; /* 18px ÷ 16 = 1.125rem */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding: 1.25rem 0;
    border-radius: 1.875rem; /* 30px ÷ 16 = 1.875rem */
    box-shadow: 0 6px 0 #DEDEDE; /* boxShadowはpx指定のまま */
    transition: all 0.5s;
    &:hover{
      opacity: 0.6;
    }
  }
}
@media (max-width: 768px) {
  .c-btn {  
    & .c-text01 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      margin: 0 auto 1rem;
      &::before,
      &::after {
        height: 2px; /* borderと同様にpx指定のまま */
        width: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      }
      &::before {
        left: -2.5rem;
      }
      &::after {
        right: -2.5rem;
      }
    }
    & .c-link01 {
      max-width: 40.9597rem; /* 320px ÷ 7.8125 = 40.9597rem */
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      padding: 2.6rem 0;
      border-radius: 3.8399rem; /* 30px ÷ 7.8125 = 3.8399rem */
      box-shadow: 0 6px 0 #DEDEDE; /* boxShadowはpx指定のまま */
    }
  }
}

.c-background{
  background-image: url(../img/background.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.header{
  background: rgba(255, 255, 255, 0.7);
  height: 5rem; /* 80px ÷ 16 = 5rem */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  & .img01{
    width: 7.5625rem; /* 121px ÷ 16 = 7.5625rem */
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .c-background {
    background-image: url(../img/background-sp.webp);
  }
  .header {
    height: 7.6799rem; /* 60px ÷ 7.8125 = 7.6799rem */
    & .img01 {
      width: 10.8797rem; /* 85px ÷ 7.8125 = 10.8797rem */
    }
  }
}

.fv{
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .fv{
    margin-bottom: 5rem;
  }
}

/* こんなお悩みありませんか */
.section01{
  overflow: hidden;
  & .inner{
    padding-bottom: 3.85rem;
  }
  & .block01{
    padding: 0;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
  }
  & .block02{
    padding: 0;
    position: relative;
    z-index: 1;
    & *{
      position: relative;
    }
  }
  & .wrap01{
    background-image: url(../img/section01_background01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -3rem;
    padding: 4rem 0 2.5rem;
  }
  & .wrap02{
    gap: 3rem;
    margin-bottom: 3.5rem;
  }
  & .wrap03{
    position: relative;
    z-index: 1;
    max-width: 48.125rem; /* 770px ÷ 16 = 48.125rem */
    width: 90%;
    margin: 0.75rem auto 0;
    padding: 3rem 0 1.75rem;
    background-image: url(../img/section01_background03.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  & .texts01{
    background: white;
    max-width: 46.875rem; /* 750px ÷ 16 = 46.875rem */
    width: 90%;
    margin: 0 auto;
    padding: 1.25rem 0;
  }
  & .title{
    text-align: center;
    font-size: 1.5rem; /* 24px ÷ 16 = 1.5rem */
    font-weight: 600;
    padding-top: 0.5rem;
    & .big{
      font-size: 2rem; /* 32px ÷ 16 = 2rem */
    }
  }
  & .heading01{
    font-size: 1.5rem; /* 24px ÷ 16 = 1.5rem */
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.5rem;
    & .big{
      font-size: 2rem; /* 32px ÷ 16 = 2rem */
    }
    & .c-dot {
      &::after {
        background: #F0CF1A;
      }
    }
  }
  & .heading02{
    font-size: 2.625rem; /* 42px ÷ 16 = 2.625rem */
    font-weight: 600;
    text-align: center;
    width: fit-content;
    position: relative;
    margin: 0 auto 1.5rem;
    line-height: 1.28;
    &::after,
    &::before{
      content: "";
      position: absolute;
      width: 2.375rem; /* 38px ÷ 16 = 2.375rem */
      height: 2.375rem; /* 38px ÷ 16 = 2.375rem */
      background-image: url(../img/section01_img03.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    &::before{
      top: -0.5rem;
      left: -2rem;
      transform: rotate(180deg);
    }
    &::after {
      bottom: -1.25rem;
      right: -2rem;
    }
  }
  & .heading03{
    font-size: 1.375rem; /* 22px ÷ 16 = 1.375rem */
    color: #454545;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.75rem;
    & .big{
      font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    }
    & .c-dot{
      &::after{
        background: #9A73AF;
      }
    }
    & .c-under_line{
      text-decoration-thickness: 0.5rem; /* 8px ÷ 16 = 0.5rem */
      text-decoration-color: #FFF965;
    }
  }
  & .text01,
  & .text02{
    text-align: center;
  }
  & .text01{
    font-size: 1.125rem; /* 18px ÷ 16 = 1.125rem */
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    & .big{
      font-size: 1.25rem; /* 20px ÷ 16 = 1.25rem */
      font-feature-settings: "palt";
      text-decoration-thickness: 0.625rem; /* 10px ÷ 16 = 0.625rem */
    }
  }
  & .text02{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    line-height: 1.75;
    letter-spacing: 0;
  }
  & .text03{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    line-height: 1.75;
    letter-spacing: 0;
  }
  & .text04{
    font-size: 1.375rem; /* 22px ÷ 16 = 1.375rem */
    font-weight: 600;
    text-align: center;
    margin-bottom: 2.5rem;
  }
  & .text05{
    font-size: 1.625rem; /* 26px ÷ 16 = 1.625rem */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    width: 10rem; /* 160px ÷ 16 = 10rem */
    margin: 0 auto;
    border: 1px solid #454545;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
  }
  & .text06{
    font-size: 1.375rem; /* 22px ÷ 16 = 1.375rem */
    font-weight: 600;
    color: #9A73AF;
    width: 22rem;
    margin: 0 auto;
    text-align: left;
    line-height: 1.5;
  }
  & .text07{
    font-size: 1.375rem; /* 22px ÷ 16 = 1.375rem */
    color: #454545;
    font-weight: 600;
    text-align: center;
    margin-top: 1rem;
    & .big{
      font-size: 2rem;
    }
  }
  & .img02{
    width: 28.25rem; /* 452px ÷ 16 = 28.25rem */
  }
  & .img03{
    position: absolute;
    z-index: 0;
    max-width: 100vw;
    width: 100vw;
    height: 69.8125rem; /* 1117px ÷ 16 = 69.8125rem */
    object-fit: cover;
    top: -9rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .section01 {
    & .inner {
      padding-bottom: 9.5rem;
    }
    & .block01 {
      width: 100%;
      margin-bottom: 0;
    }
    & .wrap01 {
      background-image: url(../img/section01_background01-sp.webp);
      margin-top: -5rem;
      padding: 8rem 0 7rem;
    }
    & .wrap02 {
      flex-direction: column;
      gap: 2.5rem;
      margin: 0;
      padding: 3.5rem 0;
    }
    & .wrap03 {
      max-width: 100%;
      width: 95%;
      margin: 0.75rem auto 0;
      padding: 6.5rem 0 4.5rem;
      background-image: url(../img/section01_background03-sp.webp);
    }
    & .texts01 {
      max-width: 100%;
      width: 92%;
      padding: 2.5rem 0 2.75rem;
    }
    & .title {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      padding-top: 1rem;
      & .big {
        font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
      }
    }
    & .heading01 {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      margin-bottom: 3rem;
      & .big {
        font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
      }
    }
    & .heading02 {
      font-size: 4.0958rem; /* 32px ÷ 7.8125 = 4.0958rem */
      margin: 0 auto 2.5rem;
      &::after,
      &::before {
        width: 3.8399rem; /* 30px ÷ 7.8125 = 3.8399rem */
        height: 3.8399rem; /* 30px ÷ 7.8125 = 3.8399rem */
        background-image: url(../img/section01_img03-sp.webp);
      }
      &::before {
        top: 0;
        left: -3rem;
      }
      &::after {
        bottom: -1.5rem;
        right: -4rem;
      }
    }
    & .heading03 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      margin-bottom: 1.25rem;
      & .big {
        font-size: 2.8159rem; /* 22px ÷ 7.8125 = 2.8159rem */
      }
      & .c-dot {
        &::after {
          width: 0.64rem; /* 5px ÷ 7.8125 = 0.64rem */
          height: 0.64rem; /* 5px ÷ 7.8125 = 0.64rem */
        }
      }
      & .c-under_line {
        text-decoration-thickness: 0.8959rem; /* 7px ÷ 7.8125 = 0.8959rem */
        text-underline-offset: -0.3rem;
      }
    }
    & .text01 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      margin-bottom: 1.25rem;
      & .big {
        font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
        text-decoration-thickness: 1.2799rem; /* 10px ÷ 7.8125 = 1.2799rem */
      }
    }
    & .text02 {
      font-size: 1.7919rem; /* 14px ÷ 7.8125 = 1.7919rem */
    }
    & .text03 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
    }
    & .text04 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      margin-bottom: 4.5rem;
    }
    & .text05 {
      font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
      width: 20.4799rem; /* 160px ÷ 7.8125 = 20.4799rem */
      padding: 1rem 0;
      margin-bottom: 2rem;
    }
    & .text06 {
      font-size: 2.2rem; 
    }
    & .text07 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      margin-bottom: 1.25rem;
      & .big {
        font-size: 2.8159rem; /* 22px ÷ 7.8125 = 2.8159rem */
      }
    }
    & .img02 {
      width: 100%;
    }
    & .img03 {
      position: absolute;
      height: 154.3591rem; /* 1206px ÷ 7.8125 = 154.3591rem */
      top: 0;
    }
  }
}

/* THE BANANAジムのトレーニング例 */
.section02{
  background: #F6F6F6;
  & .p-box {
    gap: 2.5rem;
    width: 100%;
    &:not(:last-child) {
      margin-bottom: 2.2rem;
    }
    &.reverse {
      flex-direction: row-reverse;
    }
    & .p-wrap01 {
      flex: 1;
    }  
    & .p-heading01 {
      font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
      font-weight: 600;
      border-bottom: 1px solid rgba(69,69,69,0.3);
      padding-bottom: 0.45rem;
      margin-bottom: 0.5rem;
    }
    & .p-text01 {
      font-size: 1rem; /* 16px ÷ 16 = 1rem */
      line-height: 1.75;
      letter-spacing: 0;
    }
    & .p-img01 {
      width: 31.25rem; /* 500px ÷ 16 = 31.25rem */
    }
  }
}
@media (max-width: 768px) {
  .section02 {
    & .p-box {
      flex-direction: column;
      align-items: end;
      &:not(:last-child) {
        margin-bottom: 3.5rem;
      }
      &.reverse {
        flex-direction: column;
        align-items: start;
        & .p-img01{
          margin-right: calc(50% - 50vw);
          margin-left: auto;
        }
      }
      & .p-wrap01 {
        width: 41.5995rem; /* 325px ÷ 7.8125 = 41.5995rem */
      }
      & .p-heading01 {
        font-size: 2.8159rem; /* 22px ÷ 7.8125 = 2.8159rem */
        padding-bottom: 1.1rem;
        margin-bottom: 1.1rem;
      }
      & .p-text01 {
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      }
      & .p-img01 {
        width: 44.1594rem; /* 345px ÷ 7.8125 = 44.1594rem */
        margin-right: 0;
        margin-left: calc(50% - 50vw);
      }
    }
  }
}

/* 子供の頃の体 */
.section03{
  & .block01{
    gap: 7.5rem;
    margin-bottom: 3.75rem;
  }
  & .list01{
    margin-bottom: 2rem;
    margin-left: 1.6rem;
  }
  & .item01{
    gap: 0.3rem;
    &:not(:last-child){
      margin-bottom: 1rem;
    }
  }
  & .wrap01{
    position: relative;
    &::after{
      position: absolute;
      content: "";
      width: 26.25rem; /* 420px ÷ 16 = 26.25rem */
      height: 17.0625rem; /* 273px ÷ 16 = 17.0625rem */
      opacity: 0.3;
      background: linear-gradient(to bottom right, #F47EA6, #FFD28B);
      right: -4.5rem;
      bottom: -1.5rem;
    }
  }
  & .title{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    & .big{
      font-size: 2rem; /* 32px ÷ 16 = 2rem */
    }
    &::after{
      content: "";
      position: absolute;
      width: 1.875rem; /* 30px ÷ 16 = 1.875rem */
      height: 0.25rem; /* 4px ÷ 16 = 0.25rem */
      background: #F0CF1A;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
    }
  }
  & .heading01{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
  }
  & .heading02{
    font-size: 2rem; /* 32px ÷ 16 = 2rem */
    font-weight: 600;
    text-align: center;
    width: fit-content;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
    & span::after{
      position: absolute;
      content: "";
      width: 100%;
      height: 1.125rem; /* 18px ÷ 16 = 1.125rem */
      left: 0;
      right: 0;
      bottom: -0.1rem;
      background: linear-gradient(to bottom right ,#F0CF1A,#FFF8D3);
      z-index: -1;
    }
  }
  & .text01{
    font-size: 1.25rem; /* 20px ÷ 16 = 1.25rem */
    font-weight: 600;
    line-height: 1;
  }
  & .text02{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    & .back{
      background: linear-gradient(to bottom right, #454545, #B9B9B9);
      padding: 0.3rem 1.25rem;
    }
  }
  & .text03{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    text-align: center;
    font-weight: 600;
  }
  & .img01{
    width: 26.25rem; /* 420px ÷ 16 = 26.25rem */
    position: relative;
    z-index: 1;
  }
  & .img02{
    width: 1.125rem; /* 18px ÷ 16 = 1.125rem */
  }
  & .p-column {
    gap: 1.5rem;
    position: relative;
    padding-bottom: 5rem;
    margin-bottom: 2rem;
    &::after{
      position: absolute;
      content: "";
      background-image: url(../img/section03_img06.webp);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      width: 8.4375rem; /* 135px ÷ 16 = 8.4375rem */
      height: 2.625rem; /* 42px ÷ 16 = 2.625rem */
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    & .p-item01 {
      width: calc((100% - 1.5rem * 2) / 3);
    }
    & .p-wrap01 {
      width: 100%;
        margin: 0 auto 0.5rem;
      position: relative;
    }
    & .p-heading01 {
      font-size: 1rem; /* 16px ÷ 16 = 1rem */
      font-weight: 600;
      & .c-under_line{
        text-decoration-thickness: 0.625rem; /* 10px ÷ 16 = 0.625rem */
      }
    }
    & .p-img01 {
      width: 100%;
      position: relative;
      z-index: 1;
    }
  }
}
@media (max-width: 768px) {
  .section03 {
    & .block01 {
      flex-direction: column;
      gap: 5rem;
      margin-bottom: 3rem;
    }
    & .list01 {
      margin-bottom: 3rem;
      margin-left: 3rem;
    }
    & .item01 {
      gap: 0.8rem;
      &:not(:last-child) {
        margin-bottom: 1.8rem;
      }
    }
    & .wrap01 {
      &::after {
        width: 27.0076rem; /* 211px ÷ 7.8125 = 27.0076rem */
        height: 17.5359rem; /* 137px ÷ 7.8125 = 17.5359rem */
        right: -5rem;
        bottom: -2.5rem;
      }
    }
    & .title {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      line-height: 1.4;
      margin-bottom: 3.75rem;
      padding-bottom: 1.5rem;
      & .big {
        font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
      }
      &::after {
        width: 3.8399rem; /* 30px ÷ 7.8125 = 3.8399rem */
        height: 0.5119rem; /* 4px ÷ 7.8125 = 0.5119rem */
      }
    }
    & .heading01 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
      margin-bottom: 1.5rem;
    }
    & .heading02 {
      font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
      line-height: 1.8;
      margin: 0 auto 1.5rem;
      & span{
        position: relative;
      }
      & span::after {
        left: -2rem;
        right: -1.5rem;
        width: auto;
        height: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
        bottom: -0.5rem;
      }
    }
    & .text01 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
    }
    & .text02 {
      font-size: 2.8159rem; /* 22px ÷ 7.8125 = 2.8159rem */
      gap: 0.75rem;
      & .back {
        padding: 0.8rem 2.25rem 1rem;
      }
    }
    & .text03 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      line-height: 1.5;
    }
    & .img01 {
      width: 27.0076rem; /* 211px ÷ 7.8125 = 27.0076rem */
    }
    & .img02 {
      width: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
    }
    & .p-column {
      width: 100%;
      gap: 1.5rem;
      padding-bottom: 7rem;
      margin-bottom: 3.5rem;
      &::after {
        width: 17.2799rem; /* 135px ÷ 7.8125 = 17.2799rem */
        height: 5.3758rem; /* 42px ÷ 7.8125 = 5.3758rem */
      }
      & .p-item01 {
        width: 100%;
        gap: 2rem;
        display: flex;
        justify-content: start;
        align-items: center;
      }
      & .p-wrap01 {
        width: 19.8399rem; /* 155px ÷ 7.8125 = 19.8399rem */
        margin: 0 auto;
      }
      & .p-heading01 {
        flex: 1;
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
        & .c-under_line {
          text-decoration-thickness: 1.2799rem; /* 10px ÷ 7.8125 = 1.2799rem */
        }
      }
      & .p-img01{
        width: 100%;
      }
    }
  }
}

/* BANANAジムが選ばれる5つのポイント */
.section04{
  background: #F6F6F6;
  & .inner{
    padding: 4rem 0;
  }
  & .block01{
    background-image: url(../img/section04_background.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 4rem 0 8rem;
  }
  & .list01{
    padding: 0;
  }
  & .list02{
    gap: 3rem;
  }
  & .list03{
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  & .item02{
    width: calc((100% - 3rem) / 2);
  }
  & .item03{
    width: 6.4375rem; /* 103px ÷ 16 = 6.4375rem */
    height: 6.4375rem; /* 103px ÷ 16 = 6.4375rem */
    border-radius: 50%;
    border: 1px solid #454545;
  }
  & .wrap01{
    padding: 3rem 0 4rem;
  }
  & .img01{
    width: 24.625rem; /* 394px ÷ 16 = 24.625rem */
    margin: 0 auto;
  }
  & .heading01{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    color: white;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    &::after {
      content: "";
      position: absolute;
      width: 2.5rem; /* 40px ÷ 16 = 2.5rem */
      height: 0.25rem; /* 4px ÷ 16 = 0.25rem */
      background: #FFE869;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
    }
  }
  & .heading02{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    text-align: center;
    margin: 5rem auto 1.75rem;
    & .big{
      font-size: 2rem; /* 32px ÷ 16 = 2rem */
      text-decoration-thickness: 0.625rem; /* 10px ÷ 16 = 0.625rem */
    }
  }
  & .text01{
    color: white;
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    min-height: 5.25rem; /* 84px ÷ 16 = 5.25rem */
    line-height: 1.75;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
  }
  & .large {
    margin-bottom: 3.2rem;
  }
  & .text02{
    font-size: 1.125rem; /* 18px ÷ 16 = 1.125rem */
    text-align: center;
    font-weight: 600;
  }
  & .c-title{
    margin-bottom: 6rem;
  }
  & .p-box {
    position: relative;
    width: 100%;
    &:not(:last-child) {
      margin-bottom: 6.5rem;
    }
    &.reverse {
      & .p-img01{
        right: -13.8rem;
        left: auto;
      }
    }
    & .p-wrap01 {
      flex: 1;
      max-width: 35rem; /* 560px ÷ 16 = 35rem */
      background: white;
      box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
      padding: 2rem 2.25rem 2.25rem;
      position: relative;
      z-index: 1;
    }
    & .p-heading01 {
      font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
      font-weight: 600;
      margin-bottom: 1rem;
    }
    & .p-text01 {
      font-size: 1rem; /* 16px ÷ 16 = 1rem */
      line-height: 1.75;
      letter-spacing: 0;
    }
    & .p-text02{
      font-family: "Noto Serif JP", serif;
      color: #F0CF1A;
      font-weight: 600;
      font-size: 1.25rem; /* 20px ÷ 16 = 1.25rem */
      margin-bottom: 1rem;
      & .big{
        font-size: 2.875rem; /* 46px ÷ 16 = 2.875rem */
        line-height: 1;
      }
    }
    & .p-img01 {
      width: 45rem; /* 720px ÷ 16 = 45rem */
      position: absolute;
      z-index: 0;
      top: -4rem;
      left: -13.8rem;
      right: auto;
    }
  }
}
@media (max-width: 768px) {
  .section04 {
    & .inner {
      padding: 8rem 0 9.5rem;
    }
    & .block01 {
      background-image: url(../img/section04_background-sp.webp);
      margin: 8rem 0 12rem;
    }
    & .list02 {
      flex-direction: column;
      gap: 4.5rem;
    }
    & .list03 {
      flex-wrap: wrap;
      gap: 0 2.5rem;
      margin-bottom: 3.5rem;
    }
    & .item02 {
      width: 100%;
    }
    & .item03 {
      width: 13.1839rem; /* 103px ÷ 7.8125 = 13.1839rem */
      height: 13.1839rem; /* 103px ÷ 7.8125 = 13.1839rem */
    }
    & .wrap01 {
      padding: 3rem 0 7.5rem;
    }
    & .img01 {
      width: 41.5995rem; /* 325px ÷ 7.8125 = 41.5995rem */
      margin-left: calc(50% - 50vw);
    }
    & .heading01 {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      padding-bottom: 2rem;
      margin-bottom: 1.5rem;
      &::after {
        width: 3.8399rem; /* 30px ÷ 7.8125 = 3.8399rem */
        height: 0.5119rem; /* 4px ÷ 7.8125 = 0.5119rem */
      }
    }
    & .heading02 {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      margin: 5.5rem auto 2.5rem;
      & .big {
        font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
        text-decoration-thickness: 1.2799rem; /* 10px ÷ 7.8125 = 1.2799rem */
      }
    }
    & .text01 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      min-height: 10.7519rem; /* 84px ÷ 7.8125 = 10.7519rem */
      margin-bottom: 1.5rem;
    }
    & .text02 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
    }
    & .c-title {
      margin-bottom: 8rem;
    }
    & .p-box {
      padding-top: 20rem;
      &:not(:last-child) {
        margin-bottom: 8rem;
      }
      &.reverse {
        & .p-img01 {
          right: -1.9rem;
        }
      }
      & .p-wrap01 {
        max-width: 41.5995rem; /* 325px ÷ 7.8125 = 41.5995rem */
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
        padding: 3rem 2rem 3.25rem;
      }
      & .p-heading01 {
        font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
        margin-bottom: 1.2rem;
      }
      & .p-text01 {
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      }
      & .p-text02 {
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
        margin-bottom: 1.5rem;
        & .big {
          font-size: 5.1197rem; /* 40px ÷ 7.8125 = 5.1197rem */
        }
      }
      & .p-img01 {
        width: 41.5995rem; /* 325px ÷ 7.8125 = 41.5995rem */
        top: -4rem;
        left: -1.9rem;
      }
    }
  }
}

/* お客様の声 */
.section05{
  & .list01{
    gap: 1rem;
    margin-bottom: 2.5rem;
  }
  & .list02{
    gap: 1rem;
  }
  & .item01{
    width: calc((100% - 1rem) / 2);
  }
  & .item02{
    width: calc((100% - 1rem * 3) / 4);
  }
  & .item02 .img05 {
    background-image: url(../img/section05_img05.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    height: 236px;
  }
  & .item02 .img06 {
    background-image: url(../img/section05_img06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    height: 236px;
  }
  & .item02 .img07 {
    background-image: url(../img/section05_img07.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    height: 236px;
  }
  & .item02 .img08 {
    background-image: url(../img/section05_img08.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    height: 236px;
  }
  & .heading01{
    font-size: 1.75rem; /* 28px ÷ 16 = 1.75rem */
    font-weight: 600;
    text-align: center;
    margin: 3.5rem auto 2.5rem;
    & .big{
      font-size: 2rem; /* 32px ÷ 16 = 2rem */
      text-decoration-thickness: 0.625rem; /* 10px ÷ 16 = 0.625rem */
    }
  }
  & .text-p {
    font-size: 2rem;
    color: #9A73AF;
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
  & .text01{
    font-size: 1.25rem; /* 20px ÷ 16 = 1.25rem */
    font-weight: 600;
    text-align: center;
  }
  & .img02{
    margin-bottom: 0.8rem;
  }
  & .change {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    justify-content: center;
  }

  & .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 18px solid #f0cf1a;
      border-right: 0;
      margin: auto 10px;
  }
}
@media (max-width: 768px) {
  .section05 {
    & .list01 {
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 5rem;
    }
    & .list02 {
      flex-wrap: wrap;
      gap: 3rem 2rem;
    }
    & .item01 {
      width: 100%;
    }
    & .item02 {
      width: calc((100% - 2rem) / 2);
    }
    & .item02 .img05 {
      height: 164px;
    }
    & .item02 .img06 {
      height: 164px;
    }
    & .item02 .img07 {
      height: 164px;
    }
    & .item02 .img08 {
      height: 164px;
    }
    & .heading01 {
      font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
      margin: 6rem auto 3rem;
      & .big {
        font-size: 3.3278rem; /* 26px ÷ 7.8125 = 3.3278rem */
        text-decoration-thickness: 1.2799rem; /* 10px ÷ 7.8125 = 1.2799rem */
      }
    }
    & .text01 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
    }
    & .img02 {
      margin-bottom: 1.25rem;
    }
    & .img00 {
      width: 151px;
      height: 158px;
    }
  }
}

/* 体験レッスンの流れ */
.section06{
  & .list01{
    margin-bottom: 4rem;
  }
  & .p-box {
    gap: 2.5rem;
    width: 100%;
    position: relative;
    &:not(:last-child) {
      margin-bottom: 3rem;
    }
    &::after{
      content: "";
      position: absolute;
      width: 58.75rem; /* 940px ÷ 16 = 58.75rem */
      height: 12.625rem; /* 202px ÷ 16 = 12.625rem */
      background: #EFEFEF;
      right: 0;
      bottom: -1.5rem;
      z-index: 0;
    }
    &:last-child::after{
      height: 10.625rem; /* 170px ÷ 16 = 10.625rem */
    }
    & .p-wrap01 {
      flex: 1;
      position: relative;
      z-index: 1;
      padding-bottom: 1rem;
      padding-right: 2rem;
    }
    & .p-texts01 {
      gap: 0.7rem;
      margin-bottom: 0.5rem;
    }
    & .p-heading01 {
      font-size: 1.25rem; /* 20px ÷ 16 = 1.25rem */
      font-weight: 600;
    }
    & .p-text01 {
      font-size: 1rem; /* 16px ÷ 16 = 1rem */
      letter-spacing: 0;
      line-height: 1.75;
    }
    & .p-text02{
      font-size: 0.875rem; /* 14px ÷ 16 = 0.875rem */
      font-family: "Noto Serif JP", serif;
      font-weight: 600;
      & .big{
        font-size: 2.5rem; /* 40px ÷ 16 = 2.5rem */
        line-height: 1;
      }
    }
    & .p-img01 {
      width: 22.3125rem; /* 357px ÷ 16 = 22.3125rem */
      position: relative;
      z-index: 1;
    }
  }
}
@media (max-width: 768px) {
  .section06 {
    & .list01 {
      margin-bottom: 6rem;
    }
    & .p-box {
      flex-direction: column;
      gap: 1.5rem;
      &:not(:last-child) {
        margin-bottom: 6.5rem;
      }
      &::after {
        width: 41.5995rem; /* 325px ÷ 7.8125 = 41.5995rem */
        height: 39.5518rem; /* 309px ÷ 7.8125 = 39.5518rem */
        bottom: -2.5rem;
      }
      &:last-child::after {
        height: 39.5518rem; /* 309px ÷ 7.8125 = 39.5518rem */
      }
      & .p-wrap01 {
        width: 36.4796rem; /* 285px ÷ 7.8125 = 36.4796rem */
        padding-bottom: 0;
        padding-right: 0;
        margin-right: 2rem;
      }
      & .p-texts01 {
        gap: 1.5rem;
        margin-bottom: 1.25rem;
      }
      & .p-heading01 {
        font-size: 2.5599rem; /* 20px ÷ 7.8125 = 2.5599rem */
        line-height: 1.4;
      }
      & .p-text01 {
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      }
      & .p-text02 {
        font-size: 1.7919rem; /* 14px ÷ 7.8125 = 1.7919rem */
        & .big {
          font-size: 5.1197rem; /* 40px ÷ 7.8125 = 5.1197rem */
        }
      }
      & .p-img01 {
        width: 29.8237rem; /* 233px ÷ 7.8125 = 29.8237rem */
        margin-right: auto;
      }
    }
  }
}

/* アクセス */
.section07{
  background: #F6F6F6;
  & .block01{
    gap: 1.3rem;
  }
  & .list01{
    flex: 1;
  }
  & .item01{
    gap: 1.5rem;
    &:not(:last-child){
      margin-bottom: 0.8rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px solid rgba(69,69,69,0.5);
    }
  }
  & .heading01,
  & .text01{
    font-size: 1.125rem; /* 18px ÷ 16 = 1.125rem */
    font-weight: 600;
    line-height: 1.5;
  }
  & .heading01{
    width: 4.875rem; /* 78px ÷ 16 = 4.875rem */
  }
  & .text01{
    flex: 1;
    & .small{
      font-size: 1rem; /* 16px ÷ 16 = 1rem */
      font-weight: 400;
    }
  }
  & .text02{
    font-size: 1rem; /* 16px ÷ 16 = 1rem */
    line-height: 1.5;
  }
  & .img01{
    margin-bottom: 1.5rem;
  }
  & .map{
    width: 31.25rem; /* 500px ÷ 16 = 31.25rem */
    height: 19.375rem; /* 310px ÷ 16 = 19.375rem */
    margin-bottom: 0.75rem;
    & iframe{
      width: 100%;
      height: 100%;
    }
  }
}
@media (max-width: 768px) {
  .section07 {
    & .block01 {
      flex-direction: column;
      gap: 4rem;
    }
    & .item01 {
      gap: 2.75rem;
      &:not(:last-child) {
        margin-bottom: 1.3rem;
        padding-bottom: 1.3rem;
      }
    }
    & .wrap01{
      flex: 1;
      width: 100%;
    }
    & .heading01,
    & .text01 {
      font-size: 2.3039rem; /* 18px ÷ 7.8125 = 2.3039rem */
    }
    & .heading01 {
      width: 9.9839rem; /* 78px ÷ 7.8125 = 9.9839rem */
    }
    & .text01 {
      & .small {
        font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
      }
    }
    & .text02 {
      font-size: 2.0479rem; /* 16px ÷ 7.8125 = 2.0479rem */
    }
    & .img01 {
      margin-bottom: 2.75rem;
    }
    & .map {
      width: 100%;
      height: 27.3919rem; /* 214px ÷ 7.8125 = 27.3919rem */
      margin-bottom: 3rem;
    }
  }
}

.footer{
  padding: 1rem 0;
  & .text01{
    font-size: 0.75rem; /* 12px ÷ 16 = 0.75rem */
    letter-spacing: 0;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .footer {
    padding: 2rem 0 12rem;
    & .text01 {
      font-size: 1.5359rem; /* 12px ÷ 7.8125 = 1.5359rem */
    }
  }
}

.fix-cta{
  display: none;
}
@media (max-width: 768px) {
  .fix-cta{
    display: block;
    position: fixed;
    width: 46.0796rem; /* 360px ÷ 7.8125 = 46.0796rem */
    bottom: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 1000;
    & .img01{
      width: 100%;
  }
  }
}