@charset "UTF-8";

/* =====================
Common
===================== */

:root {
    --primary-white: #FFFFFF;
    --primary-gray: #F6F6F6;
    --primary-darkgray: #E0E9EB;
    --primary-black: #373634;
    --primary-orange: #EF761B;
    --primary-blue: #1D2C6D;
    --primary-Midblue: #0068B7;
    --primary-Lightblue: #DDECF1;
    --primary-green: #06C755;
    --contentWidth: 91.4%;
    --contentPadding: 4.2%;
}
@font-face {
    font-family: "ab-intoreplus";
    src: url("../fonts/ab-intoreplus.woff2") format("woff2"),
         url("../fonts/ab-intoreplus.woff") format("woff"),
         url("../fonts/ab-intoreplus.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "corporate-logo-ver2";
    src: url("../fonts/corporate-logo-ver2.woff2") format("woff2"),
         url("../fonts/corporate-logo-ver2.woff") format("woff"),
         url("../fonts/corporate-logo-ver2.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.m-plus-1p-regular {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-family:
        "ab-intoreplus",
        "corporate-logo-ver2",
        "Noto Sans JP",
        "Libre Baskerville",
        "Montserrat",
        "m-plus-1p",
        sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--primary-black);
    background-color: var(--primary-white, #FFFFFF);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img {
    max-width: 100%;
    height: auto;
}

/* 初期状態（非表示 + 左側にずらしておく） */
.section-label {
    color: var(--primary-darkgray);
    font-family: "Libre Baskerville";
    font-size: 4.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    margin-top: 15px;
    display: block;
    /* アニメーションのための初期設定 */
    opacity: 0;
    transform: translateX(-50px); /* 左から50pxズレた状態 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示時（アニメーション適用） */
.section-label.fade-in-left {
    opacity: 1;
    transform: translateX(0);
}

.flow-title,
.service-title,
.qa-title,
.contact-title {
    color: var(--primary-blue);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2.1rem;
    font-weight: 700;
    margin-top: 10px;
    /* .section-label との間隔を調整 */
}


.for-sp {
    display: block;
}

.for-pc {
    display: none;
}

/* common pc */
@media (min-width: 768px) {
    .button-container {
        flex-direction: row;
        /* 横並び */
        justify-content: center;
        align-items: center;
        max-width: none;
        /* 幅制限を解除 */
        gap: 30px;
        /* PC時のボタン間隔 */
    }

    .for-sp {
        display: none;
    }

    .for-pc {
        display: block;
    }

    .section-label {
            font-size: 8.0rem;
            margin-top: 35px;
            transform: translateX(-80px); /* PCは少し長めにスライド */
    }

    .flow-title,
    .service-title,
    .qa-title,
    .contact-title {
        text-align: center;
        font-size: 4.2rem;
    }
}

/* pc 768px */

/* ボタン */
/* ボタン全体のコンテナ */
.button-container {
    display: flex;
    flex-direction: column;
    /* スマホ時は縦並び */
    align-items: center;
    /* 中央配置 */
    justify-content: center;
    gap: 15px;
    /* スマホ時のボタン間隔 */
    width: 100%;
    margin: 0 auto;
    /* スマホ時の中央配置 */
}

/* ボタン共通スタイル */
.contact-button,
.line-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    /* 18px */
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, opacity 0.2s ease;
    gap: 10px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    /* スマホ時の中央配置 */
    padding: 0 20px;
    /* 左右の余白を統一 */
}

/* お問い合わせボタン（オレンジ） */
.contact-button {
    background: #F37415;
}

/* LINE追加ボタン（緑） */
.line-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px; /* アイコンとテキストの間隔 */
    background: #06C755;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 10px 20px;
    position: relative;
    width: 200px;
    height: 46px;
}
/* LINEアイコンのスタイル */
.line-button .line-icon {
    width: 40px; /* アイコンのサイズ調整 */
    height: auto;
}

/* アイコンの統一配置 */
.contact-button svg:last-child,
.line-button svg {
    position: absolute;
    right: 20px;
    /* 右端に配置 */
}

.flow-step-buttons {
    display: flex;
    flex-direction: column;
    /* スマホ時は縦並び */
    align-items: center;
    /* 中央配置 */
    justify-content: center;
    gap: 15px;
    /* スマホ時のボタン間隔 */
    width: 100%;
    margin: 0 auto;
    /* スマホ時の中央配置 */
}

.contact-button,
.line-button {
    width: 250px;
    height: 55px;
    font-size: 1.8rem;
    /* 18px */
    padding-right: 30px;
    /* 矢印アイコンの分だけ余白を確保 */
    justify-content: center;
}

.contact-button svg:first-child {
    width: 30px;
    height: 30px;
}

.contact-button svg:last-child,
.line-button svg {
    width: 6px;
    height: 9px;
    right: 15px;
}

.contact-button:hover {
    background: #D96512;
    transform: translateY(-2px);
    opacity: 0.9;
}

.line-button:hover {
    background: #05B84A;
    transform: translateY(-2px);
    opacity: 0.9;
}

/* 送信ボタンの基本スタイル */

/* 送信ボタン（中央配置） */
.form-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 送信ボタン */
.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 文字と矢印の間隔 */
    background: #EF761B;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    /* 文字を少し大きく */
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 310px;
    /* スマホ時の幅 */
    height: 55px;
    /* 少し高さを増やし、クリックしやすく */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-right: 50px;
    /* 矢印分のスペース */
}

/* 矢印（サイズを大きく & 長く） */
.btn-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    /* 余白を増やす */
    width: 50px;
    /* 横の長さを増やす */
    height: 8px;
    /* 高さ調整 */
    border-right: 4px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: skewX(40deg) translateY(-50%);
    transition: right 0.3s ease, transform 0.3s ease;
}

/* ホバー時（矢印のスライド & 背景色の変化を強調） */
.btn-submit:hover {
    background: #FF8C42;
    /* より明るいオレンジ */
    transform: translateY(-3px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btn-submit:hover::after {
    right: 15px;
    /* 矢印が右にスライド */
    transform: skewX(40deg) translateY(-50%) scale(1.2);
    /* 矢印を少し大きく */
}

/* クリック時（押し込まれる動き） */
.btn-submit:active {
    background: #D95F1A;
    transform: translateY(1px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

/* PC時のボタンサイズ調整 */
@media (min-width: 768px) {
    .btn-submit {
        width: 620px;
        /* PC時の幅 */
        height: 60px;
        /* 高さを増やし、目立たせる */
        font-size: 2.2rem;
    }

    .btn-submit::after {
        width: 35px;
        height: 9px;
        border-right: 5px solid #FFF;
        border-bottom: 5px solid #FFF;
        right: 30px;
    }

    .contact-button,
    .line-button {
        min-width: 362px;
        height: 100px;
        font-size: 3.2rem;
        /* 32px */
        padding-right: 50px;
        /* 矢印アイコンの分だけ余白を確保 */
        margin: 0;
        /* PC時は `auto` を解除 */
        line-height: 1.3;
    }

    .contact-button svg:first-child {
        width: 60px;
        height: 55px;
    }

    .contact-button svg:last-child,
    .line-button svg {
        width: 12px;
        height: 18px;
        right: 30px;
    }

    .flow-step-buttons {
        display: flex;
        flex-direction: row;
        /* PC時は横並び */
        align-items: center;
        /* 中央配置 */
        justify-content: center;
        gap: 30px;
        /* PC時のボタン間隔 */
        width: 100%;
        margin: 0 auto;
        /* PC時は `auto` を解除 */
    }

    /* LINEアイコンのスタイル */
    .line-button .line-icon {
        width: 80px; /* アイコンのサイズ調整 */
        height: auto;
}

}
/* pc 768px */

/* CTAボタンの共通スタイル */
.cta-button {
    display: flex;
    justify-content: center;  /* 横方向の中央配置 */
    align-items: center;  /* 垂直方向の中央配置 */
    width:  auto;
    max-width: 400px; /* 画像サイズに応じて調整 */
    margin: 30px auto; /* 完全に中央配置 */
    transition: all 0.3s ease;
}
.cta-button a {
    display: block;
    width: 100%;
    max-width: 350px; /* PC時もサイズ統一 */
}

/* 画像に影をつける */
.cta-button img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(5px 5px 5px rgba(173, 81, 12, 0.5)); /* 影を画像の形に沿わせる */
    transition: filter 0.3s ease, transform 0.3s ease;
}
/* ホバー時（影を強く＆拡大） */
.cta-button:hover img {
    filter: drop-shadow(8px 8px 15px rgba(0, 0, 0, 0.4));
    transform: scale(1.05); /* わずかに拡大 */
}

/* クリック時（押し込まれる動作） */
.cta-button:active img {
    transform: scale(0.95); /* 縮小してクリック感を出す */
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2)); /* 影を小さくする */
}
/* PC時のサイズ調整 */
@media (min-width: 768px) {
    .cta-button {
        width: 400px; /* PCでは少し大きく */
        display: flex;
        justify-content: center;
    }

    .cta-button a {
        max-width: 400px;
    }
    .cta-button img {
        max-width: 100%;
        transition: all 0.3s ease;
        display: block;
        margin: 0 auto;
    }
}
/* pc 768px */
/* =====================
header (固定表示 & スクロール時の調整)
===================== */

/* ヘッダー全体 (固定表示) */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff; /* 背景色 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* スクロール時の影 */
    z-index: 1000; /* 他の要素より前面に */
    transition: height 0.3s ease-in-out; /* スムーズな高さ変化 */
}

/* ページの上部余白を確保 (ヘッダーの高さ分) */
body {
    padding-top: 55px;
}

/* ロゴ部分 */
.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ロゴ画像 */
.header-logo img {
    width: 130px;
    height: auto;
    transition: width 0.3s ease-in-out; /* スクロール時のロゴサイズ変化 */
    padding: 0 4px;
}

/* ロゴテキスト */
.header-logo-text {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}

/* GYMスタ（横並び） */
.logo-line {
    display: flex;
    align-items: center;
    gap: 1px; /* ジムとスタの間隔 */
}

/* GYMテキスト */
.gym-text {
    color: #1D2C6D;
    font-family: "corporate-logo-ver2";
    font-size: 2.0rem;
    font-weight: 700;
}

/* スタ テキスト */
.suta-text {
    color: #E67E22;
    font-family: "ab-intoreplus";
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: -4.75px;
}

/* ジム開業サポート（GYMスタの下に配置、幅を統一） */
.sub-text {
    color: #1D2C6D;
    font-family: "ab-intoreplus";
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.54px;
    text-align: center;
    width: 100%;
}

/* ヘッダー内アイコン */
.header-icons {
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* スクロール時にヘッダーの高さを変更 */
.scrolled .header {
    height: 45px;
}

.scrolled .header-logo img {
    width: 110px; /* スクロール時にロゴを縮小 */
}

/* =====================
PC時のヘッダー設定
===================== */
@media (min-width: 1049px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;  /* ヘッダーをフル幅にする */
        height: 70px;
        background-color: #ffffff; /* 必要なら背景色を指定 */
        z-index: 1000; /* 他の要素より前面に表示 */
    }

    /* ナビゲーションコンテンツの中央揃え */
    .header-container {
        max-width: 1210px; /* コンテンツ部分だけ中央寄せ */
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4%; /* 必要なら余白を追加 */
    }
    /* ロゴ画像 */
    .header-logo img {
        width: 169px;
        height: auto;
    }
}

/* pc 768px */


/* .nav初期表示 */
.nav {
    background:#F6F6F6;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
}

.nav__header {
    padding-right: 4.5%;
    display: flex;
    justify-content: right;
}

/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}
.overlay.active {
    opacity: 1;
    visibility: visible;
}
/* スクロール禁止 */
body.no-scroll {
    overflow: hidden;
}

.nav__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
    /* 上の余白を少し減らす */
}

.nav__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ロゴ画像 */
.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-container {
    display: flex;
    align-items: center;
}

.nav__logo img {
    width: 86px;
    height: auto;
}

/* ロゴテキスト */
.nav_header-logo-text {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}

/* GYMスタ（横並び） */
.nav_logo-line {
    display: flex;
    align-items: center;
    gap: 1px;
    /* ジムとスタの間隔 */
}

/* GYMテキスト */
.nav_gym-text {
    color: #1D2C6D;
    font-family: "corporate-logo-ver2";
    font-size: 3.3rem;
    font-weight: 700;
}

/* スタ テキスト */
.nav_suta-text {
    color: #E67E22;
    font-family: "ab-intoreplus";
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: -4.75px;
}

/* ジム開業サポート（GYMスタの下に配置、幅を統一） */
.nav_sub-text {
    color: #1D2C6D;
    font-family: "ab-intoreplus";
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.54px;
    text-align: center;
    width: 100%;
}

.nav__list {
    font-family: Noto Sans JP;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}
.nav__list li {
    margin: 20px 0;
}
.nav__list li a {
    font-size: 2rem;
    color: #1D2C6D;
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav__list li a:hover {
    color: #F97410;
}
/* 🟠 オーバーレイ（半透明背景） */
.overlay {
    pointer-events: none; /* クリックを通す */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}


/* リスト内のアイテムを均等配置 */
.nav__item {
    width: 100%;
    text-align: center;
}

.nav__item a {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__btnEntry {
    margin-top: 10px;
    display: flex;
    width: 229px;
    flex-direction: column;
    align-items: center;
}

.nav__btnEntry:hover {
    opacity: 0.5;
}

.header__btn {
    display: block;
    width: 64px;
    height: 64px;
}

/* スマホメニューアイコン */
.icon-link img {
    width: 60px;
    height: 55px;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* ホバー時のエフェクト */
.icon-link:hover img {
    transform: scale(1.1); /* わずかに拡大 */
    filter: brightness(1.2); /* 色を明るくする */
    opacity: 0.9; /* 透明度を少し下げる */
}

/* アイコンのサイズ */
.btn-contact svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* 右矢印アイコン */
.btn-contact svg:last-child {
    width: 6px;
    height: 9px;
}

/* ホバー時 */
.btn-contact:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

/* クリック時 */
.btn-contact:active {
    background: #D95F1A;
    transform: translateY(1px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* スマホメニュー内のCTAボタン画像のサイズを制御 */
.nav__ctaimg {
    max-width: 240px !important;
    width: 100%;
    /* 必要以上に拡大しない */
    height: auto;
    /* 縦横比を維持 */
    display: block;
    margin: 0 auto;
}

.PCnav__cta {
    display: none;
}

/* メニューアイコン（2本線 & テキスト追加） */
.menu-toggle {
    width: 55px;
    height: 55px; /* ボタン枠 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1001;
}


/* 2本線 */
.menu-toggle span {
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: #1D2C6D;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 2本線の配置 */
.menu-toggle span:first-child {
    transform: translateY(-10px);
}

.menu-toggle span:last-child {
    transform: translateY(10px);
}
/* 「menu」テキスト */
.menu-toggle p {
    font-family: Noto Sans JP;
    font-size: 9px;
    font-weight:700;
    color: #1D2C6D;
    margin-top: 30px;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
    position: absolute;
}

/* メニューが開いた時のアニメーション（バツマークへ変化） */
.menu-toggle.open span:first-child {
    transform: translateY(0) rotate(45deg);
}

.menu-toggle.open span:nth-of-type(2) {
    transform: translateY(0) rotate(-45deg);
}

/* pc 1049px */
@media (min-width: 1049px) {
    .nav {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        background: transparent;
        z-index: 1002; /* 確実に前面に */
    }

    .nav__list {
        pointer-events: auto; /* クリック可能に */
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 80%;
    }

    .nav ul li a {
        text-decoration: none;
        color: #000;
        font-family: "Noto Sans JP";
        font-size: 1.4rem;
        font-weight: 400;
        transition: color 0.2s ease;
    }

    .nav__item a {
        text-decoration: none;
        font-size: 1.6rem;
        color: #373634;
        transition: color 0.2s ease;
    }

    .nav__item a:hover {
        color: #E67E22;
    }

    .nav ul li a:hover {
        color: #E67E22;
    }

    .menu-close,
    .menu-toggle {
        display: none;
    }

    .nav__logo a {
        display: none;
    }

    /* CTAボタン（PC用） */
    .PCnav__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #EF761B;
        color: #FFF;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 8px;
        width: 229px;
        height: 40px;
        border: none;
        cursor: pointer;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        transition: all 0.3s ease;
    }

    /* 左側のメールアイコン */
    .cta-icon-left {
        width: 24px;
        height: 24px;
        fill: white;
    }

    /* 右側の矢印アイコン */
    .cta-icon-right {
        width: 6px;
        height: 9px;
    }

    /* ボタンのホバーエフェクト */
    .PCnav__cta:hover {
        background: #FF8C42;
        transform: translateY(-2px);
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
    }

    /* クリック時 */
    .PCnav__cta:active {
        background: #D95F1A;
        transform: translateY(1px);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* PC時（769px以上）はスマホアイコン非表示 */
    .header-icons {
        display: none;
    }

    /* ロゴ画像 */
    .nav__logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        /* GYMとスタの間隔 */
    }

    .header-logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .logo-container {
        display: flex;
        align-items: center;
    }

    .nav__logo img {
        width: 86px;
        height: auto;
    }

    .nav_header-logo-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .nav_logo-line {
        gap: 2px;
    }

    /* GYMテキスト */
    .nav_gym-text {
        color: #1D2C6D;
        font-family: "corporate-logo-ver2";
        font-size: 2.6rem;
        font-weight: 700;
        display: inline-block;
    }

    /* スタ テキスト */
    .nav_suta-text {
        color: #E67E22;
        font-family: "ab-intoreplus";
        font-size: 2.4rem;
        font-weight: 400;
        letter-spacing: -6.175ppx;
        display: inline-block;
    }

    /* ジム開業サポート（GYMスタの下に配置、幅を統一） */
    .nav_sub-text {
        color: #1D2C6D;
        font-family: "ab-intoreplus";
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.7px;
        text-align: center;
        width: 100%;
    }
}

/* pc 1049px */


/*============================
main
============================*/
/* メインビジュアルのコンテナを基準にする */
.main-visual-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    /* ボタンの基準位置 */
}

/* CTAボタン（スマホ用） */
.main-visual-cta {
    position: absolute;
    top: 48%;
    /* 適宜調整 */
    left: 4%;
    /* 画面幅に対する相対位置 */
    min-width: 250px; /* これで極端に小さくならない */
    max-width: 55vw;
    transition: all 0.3s ease;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}



/* PC用レイアウト */
@media (min-width: 768px) {
    .main-visual-cta {
        top: 65%;
        left: 9%;
        width: 505px;
        max-width: 35vw;
    }
}

/* CTAボタンのホバーエフェクト */
.main-visual-cta:hover {
    transform: scale(1.05);
    /* 少し拡大 */
    filter: brightness(1.1);
    /* 明るくする */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    /* 影を強調 */
    transition: all 0.3s ease;
}

/* pc 769px */

/*============================
About
============================*/
.about-section {
    padding: 11px 4.5% 55px;
    /* 上下左右の余白 */
    text-align: center;
}

/* タイトル */
.about-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 2.7%;
}

/* GYM */
.about-title span:nth-child(1) {
    color: #1D2C6D;
    font-family: "corporate-logo-ver2";
    font-size: 3.6rem;
    font-weight: 700;
}

/* スタ */
.about-title span:nth-child(2) {
    color: #E67E22;
    font-family: "ab-intoreplus";
    font-size: 3.4rem;
    letter-spacing: -8.55px;
}

/* とは？ */
.about-title span:nth-child(3) {
    color: #161963;
    font-family: "Noto Sans JP";
    font-size: 2.1rem;
    font-weight: 500;
}

/* 説明文 (commonの設定を維持しつつ、独自調整) */
.about-description {
    font-family: "Noto Sans JP";
    font-size: 1.3rem;
    line-height: 1.5;
    color: #1D2C6D;
    text-align: center;
    margin-bottom: 6.7%;
}

/* 強調テキスト */
.about-description .about-keyword {
    font-size: 1.7rem;
    font-weight: 700;
}

.six-points-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px; /* PC時の最大幅を制限 */
    margin: 0 auto;
}

.six-points-container img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 800px; /* PC時の最大幅を制限 */
    margin: 0 auto;
}

/* テキストオーバーレイの位置調整 */
.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 上の帯 (現役税理士による) */
.text-overlay span:first-child {
    background: linear-gradient(264.67deg, #161963 7.51%, #112873 22.9%, #0068B7 43.3%);
    box-shadow: 0px 1px 7px rgba(255, 255, 255, 0.8);
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.7rem; /* スマホ時 */
    font-weight: 700;
    padding: 2px 4px;
    text-align: center;
    max-width: 50%;
    min-width: 145px;
    height: auto;
}

/* 下の帯 ("信頼できるジム開業パートナー") */
.text-overlay span:last-child {
    background: linear-gradient(264.67deg, #161963 7.51%, #112873 22.9%, #0068B7 43.3%);
    box-shadow: 0px 1px 7px rgba(255, 255, 255, 0.8);
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.7rem; /* スマホ時 */
    font-weight: 700;
    padding: 2px;
    text-align: center;
    max-width: 100%;
    min-width: 200px;
    height: auto;
    white-space: nowrap; /* 折り返さない */
}

/* PC対応 (横幅1440px時) */
@media (min-width: 768px) {

}


/* CTAボタン */
.about-cta {
    display: flex;
    justify-content: center;
}


@media (min-width: 768px) {
    .about-section {
        padding: 35px 4.5%;
        /* 上下左右の余白 */
    }

    .about-title {
        margin-bottom: 75px;
    }

    /* GYM */
    .about-title span:nth-child(1) {
        font-size: 7.4rem;
    }

    /* スタ */
    .about-title span:nth-child(2) {
        font-size: 7.1rem;
        letter-spacing: -17.784px;
    }

    /* とは？ */
    .about-title span:nth-child(3) {
        font-size: 4.2rem;
        margin-left: 10px;
    }

    /* 説明文 (commonの設定を維持しつつ、独自調整) */
    .about-description {
        font-size: 2.4rem;
        margin-bottom: 56px;
    }

    /* 強調テキスト */
    .about-description .about-keyword {
        font-size: 3.4rem;
    }
    .text-overlay span {
        font-size: 3.2rem; /* PC時は大きく */
        padding: 10px 15px;
    }

    .text-overlay span:first-child {
        max-width: 100%;
        min-width: 180px;
        font-size: 3.2rem;
    }

    .text-overlay span:last-child {
        max-width: 100%;
        min-width: 250px;
        font-size: 3.2rem;
    }
    .six-points-container {
        max-width: 1000px; /* PC時に最大幅を拡張 */
    }

    .six-points-container img {
        max-width: 1000px; /* PC時の最大幅を調整 */
    }
}

/* =============================
   Worry Section
============================= */
.concerns-section {
    background-image: url("../img/worry_bg_sp.png");
    background-size: cover; /* 画面いっぱいに表示 */
    background-repeat: no-repeat;
    background-position: center bottom; /* 下部を固定して上に調整 */
    padding: 40px 5% 170px; /* 下部の余白を確保 */
}

.concerns-container {
    position: relative;
    z-index: 2; /* 背景画像の上に配置 */
    padding: 20px 5%;
}

/* サブタイトル */
.concerns-subtitle {
    color: #1D2C6D;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 24px;
}

/* 「悩ん」の強調 */
.concerns-subtitle span {
    color: #EF761B;
    font-family: "Noto Sans JP";
    font-size: 2.4rem;
    font-weight: 700;
}

/* 悩みリスト */
.concerns-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0 auto;
    width: 91.47%;
    /* 343px / 375px * 100 */
    max-width: 100%;
}

/* リストアイテム */
.concerns-item {
    position: relative;
    z-index: 2; /* 背景より前に表示 */
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    height: 49px;
    padding: 11px 0;
    color: #1D2C6D;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
}
.concerns-item:last-child {
    margin-bottom: 50px; /* 最後の .concerns-item のみに適用 */
}
/* チェックボックスアイコン */
.concerns-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.concerns-image {
    display: none;
}

@media (min-width: 768px) {
    .concerns-section {
        background-image: url("../img/worryPCbg.png");
        min-height: 1020px;
        /* 必要に応じて変更 */
        background-size: cover;
        /* 画面いっぱいに表示 */
        background-repeat: no-repeat;
        background-position: center top;
        /* 画像の位置を上部に調整 */
        padding: 85px 5%;
        /* コンテンツの余白調整 */
    }
    
    .concerns-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    /* サブタイトル */
    .concerns-subtitle {
        font-size: 4.2rem;
        margin-bottom: 80px;
    }

    /* 「悩ん」の強調 */
    .concerns-subtitle span {
        font-size: 4.8rem;
    }


    .concerns-image {
        display: block;
        width: 60%;
        max-width: 450px;
    }

    .PCflex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin-bottom: 10px;
    }

    /* リストアイテム */
    .concerns-item {
        gap: 13px;
        width: 100%;
        height: 49px;
        padding: 53px 0;
        font-size: 2.8em;
    }

    /* チェックボックスアイコン */
    .concerns-item img {
        width: 54px;
        height: 54px;
    }
}


/*============================
strength
============================*/

.strengths-section {
    background-color: var(--primary-white);
    padding: 40px 5%;
    /* コンテンツの余白調整 */
}

/* 見出し上部テキスト */
.strengths-section p {
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    color: #1D2C6D;
    margin-bottom: 15px;
    letter-spacing: 2.4px;
    text-align: center;
    font-weight: 700;
}

/* 強調テキスト */
.strengths-section .emphasis {
    color: #E67E22;
    font-size: 2.1rem;
}

/* タイトル部分 (SVG + テキスト) */
.strengths-title-wrapper {
    position: relative;
    max-width: 100%;  /* 画面幅より大きくならないように調整 */
    width: 90%;  /* 画面幅に応じた可変サイズ */
    height: 73px;
    margin: 0 auto 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #0068B7 0%, #002E51 100%);
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    overflow: hidden; /* clip-pathの影響でずれるのを防止 */
}

/* タイトルのテキスト */
.strengths-title {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    align-items: center;
}

/* GYMのフォントスタイル */
.gym-suta {
    font-family: "corporate-logo-ver2", sans-serif; /* フォント名を統一 */
    font-size: 1.8rem;
    font-weight: 900;
    color: #FFF;
    line-height: 100%;
    letter-spacing: 3.96px;
}

/* スタのフォントスタイル */
.suta-highlight {
    font-family: "ab-intoreplus", sans-serif; /* フォント名を統一 */
    font-size: 1.9rem;
    font-weight: 400;
    color: #FFF;
    line-height: 100%;
    letter-spacing: 3.96px;
}
/* 数字の3 */
.number-three {
    color: #F97410;
    font-family: Montserrat, sans-serif;
    font-size: 3.1rem;
    font-weight: 700;
    letter-spacing: 5.58px;
}

/* つの強み */
.highlight {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 100%;
    letter-spacing: 4.62px;
}
/* 3つの強み (3のみが改行しないように調整) */
.three-strength {
    display: flex; /* 横並び */
    justify-content: center;
    align-items: center;
    gap: 5px;
}
/* 各強みのコンテナ */
.strength {
    text-align: center;
    padding: 20px 5%;s
}

/* 番号 */
.strength-number {
    display: block;
    font-size: 4.0rem;
    font-weight: 700;
    color: #E67E22;
    font-family: Montserrat;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 40px; /* 100% */
}

/* タイトル */
.strength h3 {
    font-size: 1.7rem;
    font-family: "Noto Sans JP";
    font-weight: 700;
    color: #1D2C6D;
    margin-bottom: 12px;
}

/* 説明文 */
.strength p {
    color: #1E1E1E;
    font-family: "Noto Sans JP";
    font-size: 1.3rem;
    margin: 10px 10px 20px;
    text-align: left;
    font-weight: 400;
}

/* 画像 */
.strength img {
    width: 100%;
    height: auto;
}




    @media (min-width:  768px) {
        .strengths-section {
            padding: 80px 7.64%; /* 1440px の 110px に変換 */
        }
    
        /* 見出し上部テキスト */
        .strengths-section p {
            font-size: 4.2rem;
            text-align: center;
            margin-bottom: 26px;
        }
    
        /* 強調テキスト */
        .strengths-section .emphasis {
            font-size: 4.8rem;
        }
    
        /* タイトル部分 */
        .strengths-title-wrapper {
            width: 782px;
            height: 162px;
            margin: 0 auto 60px;
        }
    
        /* GYMスタ */
        .gym-suta {
            font-size: 4.2rem;
            letter-spacing: 9.24px;
        }
    /* スタのフォントスタイル */
.suta-highlight {
    font-size: 4.2rem;
}
        /* 3 */
        .number-three {
            font-size: 6.2rem;
            letter-spacing: 11px;
        }
    
        /* つの強み */
        .highlight {
            font-size: 4.2rem;
            letter-spacing: 9.24px;
        }
    
        /* 3つの強み (PCでも横並びを維持) */
        .three-strength {
            gap: 8px;
        }
    
        /* 各強みのコンテナ */
        .strength {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 50px;
            margin-bottom: 80px;
        }
    
        /* 番号 */
        .strength-number {
            font-family: Montserrat;
            font-size: 6.4rem;
            font-weight: 600;
            line-height: 40px;
        }
    
        /* タイトル */
        .strength h3 {
            color: #1D2C6D;
            font-family: "Noto Sans JP";
            font-size: 34px;
            font-weight: 700;
            line-height: normal;
        }
    
        /* 画像と説明文のコンテナ */
        .strength-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px; /* 画像とテキストの間 */
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
            text-align: left;
        }
    
        /* 画像 */
        .strength-content img {
            width: 45%;
            height: auto;
        }
    
        /* 説明文 */
        .strength-content p {
            font-size: 2.8rem;
            width: 50%;
            max-width: 500px;
            text-align: left;
            line-height: 1.6;
        }
    }
    

/* =============================
   Contact セクション
============================= */
.contact-section {
    background-color: #ffffff; /* 背景色を白 */
    padding: 40px 11.2%;
    text-align: center;
}

/* フォーム全体 */
.contact-form {
    background: #FFFFFF;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* フォームグループ（中央配置） */
.form-group {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

/* ラベル */
.form-label {
    color: #373634;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 400;
    display: block;
    margin-bottom: 8px;
}

/* 必須マーク */
.required {
    font-size: 1.4rem;
    color: #EF761B;
    margin-left: 5px;
}

/* 入力欄（共通: 名前・メールアドレス・内容） */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    max-width: 500px;
    padding: 12px;
    border: 2px solid #ccc;
    background: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 400;
    color: #373634;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s ease;
}

/* フォーカス時のスタイル（強調） */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border: 2px solid #FF8C42;
    box-shadow: 0px 4px 10px rgba(255, 140, 66, 0.3);
}

/* プレースホルダー */
input::placeholder,
textarea::placeholder {
    color: #DDECF1;
    text-align: left;
}

/* 内容欄（テキストエリア） */
textarea {
    height: 120px;
    padding: 12px;
    resize: none;
}

/* プライバシーポリシー */
.form-policy {
    font-family: Noto Sans JP;
    font-size: 1.3rem;
    text-align: left;
    margin: 20px 0;
    color: #1D2C6D;
}

.privacy-policy {
    color: #0068B7;
    text-decoration: underline;
    font-weight: 700;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
}

.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    height: 55px;
    background: linear-gradient(90deg, #FF8C42, #D96512);
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* 送信ボタンのホバーエフェクト */
.btn-submit:hover {
    background: linear-gradient(90deg, #FFB15C, #D96512);
    transform: translateY(-3px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

/* クリック時のエフェクト */
.btn-submit:active {
    background: #D95F1A;
    transform: scale(0.95);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

/* 送信ボタン内の矢印アイコン */
.btn-submit svg {
    width: 14px;
    height: 14px;
    fill: white;
    transition: transform 0.3s ease;
}

/* ホバー時に矢印が右にスライド */
.btn-submit:hover svg {
    transform: translateX(5px);
}

/* =============================
   Contact セクション（PC用）
============================= */
@media (min-width: 768px) {
    .contact-section {
        padding: 35px 4.5%;
    }

    /* フォーム全体 */
    .contact-form {
        max-width: 620px;
        padding: 50px;
        margin: 0 auto;
    }

    /* フォームグループ */
    .form-group {
        text-align: left;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 30px;
    }

    /* ラベル */
    .form-label {
        font-size: 3.2rem;
        text-align: left;
        margin-bottom: 12px;
    }

    /* 入力欄 */
    input[type="text"],
    input[type="email"] {
        width: 100%;
        height: 50px;
        padding: 15px;
        font-size: 2.4rem;
    }

    /* 内容欄（テキストエリア） */
    textarea {
        width: 100%;
        height: 166px;
        padding: 15px;
        font-size: 2.4rem;
        resize: none;
    }

    /* プライバシーポリシー */
    .form-policy {
        font-size: 1.8rem;
        text-align: left;
        margin: 35px 0;
    }

    /* 送信ボタン */
    .btn-submit {
        width: 620px;
        height: 100px;
        font-size: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        position: relative;
    }

    /* ボタン内の矢印アイコン（1つだけ表示） */
    .btn-submit svg {
        width: 8px;
        height: 12px;
        fill: white;
        position: absolute;
        right: 30px;
    }
}

/*============================
flow-section
============================*/
.flow-section {
    padding: 40px 8.8%;
    background-color: #ffffff;
    text-align: center;
}

/* 各STEPのコンテナ */
.flow-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 各STEPのブロック */
.flow-step {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

/* STEP番号 (STEP01, STEP02...) */
.flow-step-number {
    font-size: 4.0rem;
    font-weight: 400;
    font-style: italic;
    color: #006ECD;
    font-family: Montserrat;
    line-height: 40px;
}

/* STEP ラベル */
.step-label {
    font-size: 2.1rem;
    font-weight: 400;
    font-family: "m-plus-1p";
    color: #006ECD;
}

/* STEP番号とラベルを横並びにする */
.flow-step-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 間隔調整 */
    margin-bottom: 10px;
}

/* STEP タイトル */
.flow-step-title {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP";
    color: #006ECD;
    margin-bottom: 15px;
}

/* 説明文 */
.flow-step-text {
    width: 292px;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: "Noto Sans JP";
    color: #373634;
    margin: 0 auto 20px;
    line-height: normal;
}

/* 矢印アイコン (down.webp) */
.flow-arrow {
    display: block;
    width: 33px;
    height: 33px;
    aspect-ratio: 1/1;
    margin: 20px auto 0;
}

/* 最後のSTEPには矢印を表示しない */
.flow-step:last-child .flow-arrow {
    display: none;
}





@media (min-width: 768px) {
    .flow-section {
        padding: 35px 4.5%;
    }
    /* 各STEPのブロック */
    .flow-step {
        margin-bottom: 80px;
        max-width: 900px;
    }
    .flow-title {
        padding-bottom: 63px;
    }
    /* STEP番号 (STEP01, STEP02...) */
    .flow-step-number {
        font-size: 6.4rem;
        font-weight: 600;
        line-height: normal;
    }

    /* STEP ラベル */
    .step-label {
        font-size: 3.2rem;
    }

    /* STEP番号とラベルを横並びにする */
    .flow-step-header {
        gap: 15px;
        margin-bottom: 20px;
    }

    /* STEP タイトル */
    .flow-step-title {
        font-size: 3.2rem;
        margin-bottom: 25px;
    }

    /* 説明文 */
    .flow-step-text {
        width: 620px;
        font-size: 2.4rem;
        margin: 0 auto 30px;
    }

    /* ボタン (お問い合わせ・LINE追加) */
    .flow-step-buttons {
        display: flex;
        margin-top: 30px;
        flex-direction: row;
    }

    /* 矢印アイコン (down.webp) */
    .flow-arrow {
        width: 48px;
        height: 48px;
        margin: 40px auto 0;
    }

}

/*============================
supporter-section (スマホ)
============================*/
.supporter-section {
    padding: 40px 5.3%;
    background-color: #ffffff;
    text-align: center;
}
.supporter-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* サポーターヘッダー */
.supporter-header {
    margin-bottom: 35px;
}


/* サブタイトル */
.supporter-subtitle {
    font-size: 2.3rem;
    font-weight: 700;
    font-family: "Noto Sans JP";
    text-align: center;
    margin: 0 10px 18px;
}

/* 強調部分 */
.supporter-highlight {
    color: #1D2C6D;
    font-weight: 700;
    font-size: 2.3rem;
}

/* 通常テキスト */
.supporter-normal {
    color: #373634;
    font-weight: 400;
    font-size: 2.1rem;
}

/* プロフィール情報のコンテナ */
.supporter-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

/* 画像ラッパー */
.supporter-image-wrapper {
    max-width: 332px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* サポーターの写真 */
.supporter-photo {
    width: 100%;
    height: auto;
}

/* テキスト情報 */
.supporter-info {
    width: 320px;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: "Noto Sans JP";
    color: #373634;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 重要キーワードの強調 */
.highlight-blue {
    color: #1D2C6D;
    font-weight: 700;
}

.highlight-orange {
    color: #E67E22;
    font-weight: 700;
}

/* サポート内容リスト */
.supporter-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.supporter-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 400;
    color: #373634;
    margin-bottom: 10px;
}

/* アイコン */
.supporter-list svg {
    width: 24px;
    height: 24px;
    stroke: #0068B7;
}

/* メッセージ */
.supporter-message {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1D2C6D;
    margin: 20px 0;
}
/* メッセージボックス */
.supporter-message-box {
    background: #F5FAFC; /* ソフトなブルー背景 */
    padding: 20px;
    text-align: left;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

/* メッセージテキスト */
.supporter-message {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: "Noto Sans JP";
    color: #373634;
    line-height: 1.7;
}

/* 重要キーワードの強調 */
.highlight-blue {
    color: #0068B7;
    font-weight: 700;
}

.highlight-orange {
    color: #E67E22;
    font-weight: 700;
}
/* ============================
  税理士HPリンク
============================ */
.supporter-link-wrapper {
    text-align: center;
    margin-top: 30px;
}

/* 税理士HPボタン */
.supporter-link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 260px;
    padding: 12px 20px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFF;
    background: linear-gradient(90deg, #0068B7 0%, #002E51 100%);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ボタンホバーエフェクト */
.supporter-link-button:hover {
    background: linear-gradient(90deg, #00549A 0%, #001E3E 100%);
    transform: translateY(-2px);
}

/* ボタンアイコン */
.supporter-link-button svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

/*============================
supporter-section (PC)
============================*/
@media (min-width: 768px) {
    .supporter-section {
        padding: 35px 4.5%;
        text-align: center;
    }

    .supporter-container {
        max-width: 900px;
        margin: 0 auto;
    }

    .supporter-image-wrapper {
        max-width: 600px;
        margin: 0 auto 30px;
    }

    .supporter-photo {
        width: 100%;
        height: auto;
        display: block;
    }
    .supporter-message-box {
        padding: 30px;
        font-size: 1.8rem;
    }

    .supporter-message {
        font-size: 1.8rem;
    }
    .supporter-info {
        width: 90%;
        max-width: 700px;
        font-size: 1.8rem;
        line-height: 1.6;
        margin: 0 auto;
        text-align: left;
    }

    .supporter-subtitle {
        font-size: 3rem;
        text-align: center;
        margin: 0 30px 30px;
    }

    .supporter-highlight {
        font-size: 3rem;
        font-weight: 700;
    }

    .supporter-normal {
        font-size: 2.7rem;
    }

    .supporter-link {
        font-size: 1.8rem;
        margin-top: 30px;
        text-align: center;
    }
}
/*============================
service-section
============================*/
.service-section {
    padding: 40px 5.3%;
    background-color: #ffffff;
    text-align: center;
}


/* サブタイトル */
.service-subtitle {
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP";
    color: #ffffff;
    line-height: normal;
    padding: 15px;
    background: linear-gradient(90deg, #0068B7 0%, #002E51 100%);
    width: 100%;
    margin: 34px auto 20px;
}

/* テーブルヘッダー */
.table-header th {
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    font-weight: 700;
    padding: 6px;
    text-align: center;
}

/* フルサポート */
.full-support {
    background: #1D2C6D;
    color: #ffffff;
    padding: 10px;
}

/* スタートアップ */
.startup-support {
    background: #5080B1;
    color: #ffffff;
    padding: 10px;
}

/* 白の区切り線 */
.divider {
    width: 76px;
    height: 1px;
    background: #ffffff;
    border: none;
    margin: 5px auto;
}

/* サブテキスト（開業後も安心 / 開業まで） */
.support-desc {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 400;
}

/* 価格のフォーマット */
.full-support-price, .startup-support-price {
    background: #DDECF1;
    color: #0068B7;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 8px;
}

/* 価格表示 */
.price-value {
    font-size: 1.6rem;
    font-weight: 400;
}

.price-unit {
    font-size: 1.0rem;
    font-weight: 400;
}

/* 費用の項目 */
.table-category {
    background: #DDECF1;
    font-size: 1.5rem;
    font-weight: 400; /* 他の項目と統一 */
    color: #1D2C6D;
}

/* GYMスタロゴ */
.table-logo img {
    width: 129px;
    margin: 10px auto;
}

/* テーブルデザイン */
.service-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background: #ffffff;
}

/* セルのデザイン */
.service-table td {
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    color: #373634;
    padding: 10px;
    border: 1px solid #DDECF1;
    background: #F5FAFC;
}

/* 〇や-の記号 */
.service-table td:nth-child(2),
.service-table td:nth-child(3) {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0068B7;
    background-color: var(--primary-white);
}

/* ※のフォントサイズを小さく */
.asterisk {
    font-size: 0.8rem;
}

.service-note {
    font-family: Noto Sans JP;
    text-align: left;
    margin-top: 10px;
}


/*============================
 PC向け service-section
============================*/
@media (min-width: 768px) {
    .service-section {
        padding: 35px 4.5%; /* PCで余白を広げる */
    }


    /* サブタイトル */
    .service-subtitle {
        font-size: 4.2rem;
        max-width: 946px;
        padding: 20px;
        margin: 98px auto 30px;
    }

    /* テーブル全体の配置 */
    .service-table-wrapper {
        max-width: 946px;
        margin: 0 auto;
    }

    /* テーブル */
    .service-table {
        width: 100%;
        font-size: 1.8rem;
    }

    /* テーブルヘッダー */
    .table-header th {
        font-size: 2.4rem;
        padding: 12px;
    }

    /* 価格のフォーマット */
    .full-support-price, .startup-support-price {
        font-size: 3.2rem;
        padding: 12px;
    }

    /* フルサポート・スタートアップのタイトル */
    .full-support, .startup-support {
        font-size: 3.2rem;
        padding: 25px;
    }

    /* サブテキスト（開業後も安心 / 開業まで） */
    .support-desc {
        font-size: 2.2rem;
    }

    /* 白い区切り線 */
    .divider {
        width: 100px;
        height: 1px;
        background: #ffffff;
        border: none;
        margin: 5px auto;
    }

    /* 費用の項目 */
    .table-category {
        font-size: 3.0rem;
        padding: 12px;
    }     

    /* GYMスタロゴ */
    .table-logo img {
        width: 312px;
        margin: 15px auto;
    }

    /* 各セルのフォントサイズ */
    .service-table td {
        font-size: 3.0rem;
        padding: 18px;
    }

    /* 〇や-の記号 */
    .service-table td:nth-child(2),
    .service-table td:nth-child(3) {
        font-size: 3.2rem;
    }

    /* 価格表示 */
    .price-value {
        font-size: 3.2rem;
    }

    .price-unit {
        font-size: 2.0rem;
    }

 
    /* フッターの注意書き */
    .service-note {
        font-size: 2.4rem;
        text-align: left;
        margin: 45px 11%;
    }
}

/*============================
 Q&A セクション
============================*/
.qa-section {
    padding: 35px 4.5% !important; /* 強制適用 */
    background-color: #ffffff;
    text-align: center;
}

/* Q&Aリスト */
.qa-list {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

/* Q&A項目 */
.qa-item {
    border-bottom: 1px solid #DDECF1;
    padding: 15px 0;
}

/* Q&Aトグルボタン (質問部分) */
.qa-toggle {
    width: 100%;
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP";
    color: #1D2C6D;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 15px;
    text-align: left;
    transition: all 0.3s ease;
}

/* Q&Aトグルボタンのホバー時 */
.qa-toggle:hover {
    color: #006ECD;
}

/* 開閉アイコン (矢印) */
.qa-toggle img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* 回答エリア (最初は非表示) */
.qa-answer {
    display: none;
    padding: 15px;
    font-size: 1.6rem;
    font-weight: 400;
    font-family: "Noto Sans JP";
    color: #373634;
    background: #F5FAFC;
    border-radius: 5px;
    margin-top: 10px;
    line-height: 1.7;
}

/* アコーディオン展開時 (矢印回転) */
.qa-item.active .qa-toggle img {
    transform: rotate(180deg);
}

/* アコーディオン展開時 (回答表示) */
.qa-item.active .qa-answer {
    display: block;
}

@media screen and (min-width: 768px) {
    .qa-section {
        padding: 35px 18%;
    }
    /* Q&Aトグルボタン (質問部分) */
.qa-toggle {
    font-size: 1.8rem;
}

/* 開閉アイコン (矢印) */
.qa-toggle img {
    width: 48px;
    height: 48px;
}

/* 回答エリア (最初は非表示) */
.qa-answer {
    display: block !important;
    padding: 15px;
    font-size: 1.8rem;
    margin-top: 10px;
    }

}

/*============================
    フッター (スマホ)
============================*/
.footer {
    background-color: #1D2C6D; /* ダークブルー */
    color: #ffffff; /* テキストは白 */
    text-align: center;
    padding: 40px 5.3%;
}

/* ロゴ */
.footer-logo {
    width: 160px;
    margin-bottom: 20px;
}

/* ナビゲーション */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li {
    margin-bottom: 10px; /* メニューの間隔 */
    font-family: Noto Sans JP;
}

.footer-nav ul li a {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: #FFB400; /* ホバー時のカラー */
}

/* 著作権表記 */
.footer-copyright {
    font-size: 1.2rem;
    margin-top: 20px;
    opacity: 0.7;
}

/*============================
    フッター (PC)
============================*/
@media (min-width: 768px) {
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 10%;
    }

    /* ロゴ */
    .footer-logo {
        width: 180px;
    }

    /* ナビゲーション */
    .footer-nav ul {
        display: flex;
        gap: 30px; /* メニューの間隔 */
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-nav ul li {
        margin-bottom: 0;
    }

    /* 著作権表記 */
    .footer-copyright {
        margin-top: 30px;
    }
}

.floating-line-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #00C300;
    color: #fff;
    border-radius: 50px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-weight: bold;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.floating-line-button img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.floating-line-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}