/* --- カラーパレット (青・水色系) --- */
:root {




    /* サブカラー：清潔感・安心感 */
    --color-bg-light: #FFF7FA;
    /* ほぼ白に近いピンク */
    --color-bg-lighter: #FFFFFF;
    /* 完全な白 */
    /*ボタンの背景*/
    --color-button-orange: #ff8c00;

    /* 主要な青色 */
    --color-primary: #FADADD;
    /* 明るいスカイブルー */
    --color-primary-dark: #F7A8B8;
    /* 過去サイトの青 */
    --color-light-blue: #B3E5FC;
    /* 深い青 */
    --color-primary-light: #FBEAEE;
    /* 淡い水色 (背景・薄いアクセント) */
    --color-lighter: #F6F8FB;
    /* さらに明るい水色 */
    --color-cream: #fffac6;
    --color-dark-pink: #f5bfd0;

    /* テキストカラー */
    --color-text-dark: #374151;
    /* 読みやすい濃いグレー */
    --color-text-light: #6B7280;
    /* 少し明るいグレー */
    --color-text-white: #FFFFFF;
    /* 白 */
    --color-text-red: #FF0000;
    --color-text-dark-navy: #0A1E3F;
    --color-text-blue: #0000ff;
    --color-title-blue: #009bff;
    --color-text-green: #00aa00;
    --color-text-black: #000000;
    --color-text-line: #0000aa;
    --color-text-title-blue:#1d2087;    

    /* その他のアクセントカラー */
    --color-accent: #FFEB3B;
    --color-accent2: #ff9500;
    --color-accent-yellow: #fff000;
    /* 明るいオレンジ（元気） */
    /* 黄色 */


    /* ほとんど白に近い淡い水色 */
    /* ★★★ 新しい影の変数定義 ★★★ */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    /* 既存のlight shadow */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    /* 中程度の影 */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    /* より強い影 */
}

/* --- 基本的なスタイル (koiwatop.cssの冒頭にこれがあることを確認) --- */
/* すべての要素にbox-sizing: border-box;を適用することで、
   paddingとborderが要素のwidthとheightに含まれるようになります。 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- 基本的なスタイル --- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* 横方向のはみ出しスクロールを防ぎます */
}

body {
    font-family: 'Noto sans Japanese', 'M PLUS 1p', 'Helvetica Neue', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'sans-serif';
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--color-bg-lighter);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark-navy);
    overflow-x: hidden;
    /* 横スクロールバーが出ないように - ここが重要 */
    word-wrap: break-word;
    /* 長い単語がはみ出すのを防ぐ */
    -webkit-text-size-adjust: 100%;
    /* モバイルでのテキストサイズ調整を無効化 */
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    /* 横方向のスクロールを抑制 */
    max-width: 800px;
}

/* 画像と動画、iframeがはみ出さないように */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;

}

img {
    aspect-ratio: attr(width) / attr(height);
}

/* フォーム要素もはみ出す可能性があるので念のため */
input,
textarea,
select,
button {
    max-width: 100%;
}


.first-view-space{
    background-color: var(--color-primary-light);
    padding :2% 0;
}
.first-view-text-main-space{
      font-family: 'M PLUS Rounded 1c';
    background-color: var(--color-accent-yellow);
    color: var(--color-text-red);
    margin : 2% 2% 0 2%;
    padding:3% 0% 3% 2%;
    font-weight: 100;
       text-align: left;
        font-size: clamp(6px, 7.8vw, 62px);
}

.first-view-text-sub-space01{
         font-family: 'M PLUS Rounded 1c';
    -webkit-text-stroke: 0.3px var(--color-text-white);
    background-color: var(--color-accent-yellow);
    color: var(--color-text-title-blue);
    margin : 0 2%;
    padding:1% 0% 3% 2%;
    font-weight: 700;
       text-align: left;
        font-size: clamp(6px, 4vw, 32px);
}
.first-view-text-sub-space01 > strong{
    color : var(--color-text-red);
      font-size: clamp(6px, 5.6vw, 44px);
}

.first-view-image-01{
    margin : 1% 0.3%;
}
.first-view-image-02{
    display: flex;
    /* 子要素 (aタグ) を横並びにする */
    margin : 1% 0.3%;
}
.first-view-image-left{
width: 30%;
margin-left :7%;
}
.first-view-image-left > img{
    width: 100%;
    height: auto;

}
.first-view-image-right{
         font-family: 'M PLUS Rounded 1c';
    
width: 70%;
margin-left:-7%;
}

.first-view-text-sub-space02{
         font-family: 'M PLUS Rounded 1c';
    -webkit-text-stroke: 0.3px var(--color-text-white);
    background-color: var(--color-dark-pink);
    color: var(--color-text-title-blue);
    margin : 0 2%;
    padding:1% 0% 0% 2%;
    font-weight: 700;
       text-align: left;
        font-size: clamp(6px, 4.2vw, 34px);
}
.first-view-text-sub-space02 > strong{
    color : var(--color-text-red);
      font-size: clamp(6px, 5.6vw, 44px);
}







/* --- レイアウトコンテナ --- */


.Free-trial-section {
    /*background-color: var(--color-primary-light);*/
    background-color: var(--color-bg-lighter);
    /* 非常に明るい背景色 */

}


.free-trial-small-top {
    font-size: clamp(6px, 5vw, 24px);
    color: var(--color-text-dark-navy);
    margin: 0;
    padding-bottom: 0.5%;
}

.free-trial-small-bottom {
    font-size: clamp(6px, 5vw, 24px);
    color: var(--color-text-dark-navy);
    margin: 0;
    padding-top: 0.5%;
}

.free-trial-flow-container {

    /* 左右のパディングを0に変更 */
    font-size: 1.5rem;
}



.free-trial-flow-section {
    background-color: var(--color-bg-lighter);
    /* 明るい背景 */
    overflow: hidden;
    margin: 0 auto;
    /* 泡がはみ出さないように */
    padding: 0;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;

}

.Free-trial {
    width: 100%;
    max-width: 450px;
    padding: 4% 2% 0 2%;
    margin: 0 auto 0 auto;
    position: relative;
    text-align: center
}

.free-trial-flow-subtitle {
    margin: 0;
    font-size: clamp(6px, 4.6vw, 26px);
    padding: 0 3% 2% 3%;
}


.free-trial-space {
    position: relative;
    background-color: var(--color-bg-lighter);
    /* 明るい背景 */
    margin-top: 0;
    padding-top: 2.5rem;
    padding-bottom: 15px;
    text-align: center;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.free-trial-description {
    margin-top: 0;
    margin-bottom: 3%;
    padding: 0 3%;
    font-size: clamp(6px, 4.2vw, 22px);
}

.bg-light-blue-50 {
    /* background-color: var(--color-bg-light);*/
    background-color: var(--color-bg-lighter);
}

/* 明るい背景色 */
.bg-gradient-to-b {
    background-color: var(--color-bg-light);
    margin: 0;
    padding: 3% 2%;
}




/* --- マップギャラリー --- */
.header-gallery {
    display: flex;
    /* 子要素 (aタグ) を横並びにする */
    justify-content: center;
    /* 中央に配置 */
    gap: 0%;
    /* ★★★ 各画像間の隙間を4%にする ★★★ */

    margin: 0px auto;
    /* 上下のマージンと中央寄せ */
    max-width: 800px;
    /* ギャラリー全体の最大幅を設定 */
    padding: 0;
    /* ★★★ 左右のパディングを2%ずつ追加し、合計4%の余白を確保 ★★★ */
    box-sizing: border-box;
    /* paddingを含めて幅を計算する */
}

/* テキストロゴの各行のフォントサイズ (モバイル向け - 必要に応じて調整) */
.logo-line1 {
    font-size: clamp(6px, 2.8vw, 22px);
}

.logo-line2 {
    font-size: clamp(6px, 3.5vw, 24px);
}

.logo-line3 {
    font-size: clamp(6px, 3.9vw, 30px);
}

.header-left-image {
    width: 70%;
}

.header-right-image {
    width: 30%;
    /* 親要素（aタグ）の幅に合わせて画像を縮小 */
    height: auto;
    /* アスペクト比を維持 */
    line-height: 1.4;
    display: block;
    /* 余分な下部スペースを削除 */
    text-align: right;
    padding-right: 1%;
}

.header-right-image>img {
    width: 100%;
}








/*タブここから*/
.tab-wrap {

    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
}

.tab-wrap:after {
    content: "";
    width: 100%;
    height: 3px;
    background: var(--color-primary-dark);
    display: block;
    order: -1;
}

.tab-h4 {
    margin: 5px;
}

.tab-label {
    color: #000000;
    background: var(--color-primary-light);
    font-weight: bold;
    /*text-shadow: 0 -1px 0 rgba(0,0,0,.2);*/
    white-space: nowrap;
    text-align: center;
    padding: 10px 0.5em;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 1;
}

.tab-label:not(:last-of-type) {
    margin-right: 5px;
}

.tab-content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 18px;
    font-weight: 500;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: var(--color-primary-dark);
}

.tab-switch:checked+.tab-label+.tab-content {
    height: 470px;
    /*枠の幅をここで設定*/
    overflow: auto;
    padding: 15px;
    opacity: 1;
    transition: 0.5s opacity;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}

/*タブここまで*/
.side-image {
    display: inline-block;
    width: 100%;
}

.side-text {
    font-size: clamp(14px, 4.2vw, 20px);
    display: inline-block;
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
    vertical-align: top;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-primary-dark);
    /* 深い青 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}


h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    /* 深い青 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}



.text-logo-wrapper {
    width: calc((100% - 9%) / 3);
    margin: 0 1.5% 0 1.5%;
    padding: 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;

}

.logo-text-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-line1,
.logo-line2,
.logo-line3 {
    /* logo-line2は個別に太さを指定するためここからは除外 */
    font-weight: 700;
    color: var(--color-text-blue);
    white-space: nowrap;
    /* テキストの折り返し防止 */
}

/* 個別調整 */



.section-title {
    font-size: clamp(12px, 7vw, 40px);
    line-height: 1.2;
    display: inline-block;
    /* 背景色がテキストの幅に合わせるように */
    padding: 0.5em 0.5em;
    /* パディングで背景色に余白を持たせる */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 軽く影をつける */
    margin: 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 0.5em;
    border-radius: 10px;
    box-shadow: none;
}

.title-info-space {
    margin: 0 0 3% 0;
    padding: 2% 0 2% 0;
}

.section-title-info {
    font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    ;
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
    -webkit-text-stroke: 0.7px var(--color-text-line);
    /* 縁取りの太さと色 */
    font-weight: 900;
}

.section-title-customer-voice {
    font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    font-size: clamp(12px, 8vw, 32px);
        -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-coach-list {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-free-trial {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-fee {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-our-mission {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-access {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0 0 2% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.title-feature-space {
    margin: 0% 0 3% 0;
    padding: 5% 0 2% 0;
}

.section-title-feature {
    font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-white);
        -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-infection-control {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 8vw, 32px);
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.benefit-title-area {
    width: 100%;
    text-align: center;
    margin-left: -25%;
}

.benefit-image-area {
    width: 25%;
    margin-top: -20%;
}

.section-title-icon {
    width: 100%;
    /* ★★★ SVGアイコンの幅 (調整してください) ★★★ */
    height: auto;
    /* 高さは自動調整 */
    margin-right: 0px;
    /* ★★★ テキストとの間の余白 (調整してください) ★★★ */
    margin-top: 0%;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 5;
}

.section-title-benefit {
    font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 6.7vw, 32px);
    line-height: 1.2;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    padding: 1%;
    margin: 2%;
    -webkit-text-stroke: 0.7px var(--color-text-line);
    /* 縁取りの太さと色 */
    font-weight: 900;
}



.section-title-voice-more {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    font-size: clamp(12px, 5.8vw, 32px);
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;
}

.section-title-wrapper {
    display: flex;
    /* 横並びにする */
    align-items: center;

}

.benefit-section-title-wrapper {
    display: flex;
    /* 横並びにする */
    align-items: center;
    background-color: var(--color-title-blue);
    width: 100%;
}


/* --- 紹介キャンペーンセクション --- */
.referral-campaign-section {
    padding: 0 0 5% 0;
    /* セクション全体の上下パディング */
    /*    background-color: var(--color-bg-light);*/
    /* 非常に明るい背景色 */
    text-align: center;
}

.referral-title-icon {
    width: 100%;
    /* ★★★ SVGアイコンの幅 (調整してください) ★★★ */
    height: auto;
    /* 高さは自動調整 */
}

.referral-title-wrapper {
    display: flex;
    /* 横並びにする */
    align-items: center;
    /* 縦方向中央揃え */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 2;

}

.referral-title-wrapper-left {
    margin-top: -5%;
    width: 20%;
}

.referral-title-wrapper-right {
    margin-top: -5%;
    width: 80%;
    text-align: left;
}


.referral-campaign-header {
    padding-top: 0;
    margin-bottom: 0;
}

.referral-campaign-title {

    font-size: clamp(16px, 6vw, 32px);
    /* 例: 16px～40pxの間で3vwに可変 */
    color: var(--color-text-red);
    line-height: 1.3;
    margin-bottom: 10px;
    margin-top: 0;
}

.referral-campaign-title>strong {
    color: var(--color-text-red);
    font-size: clamp(8px, 8vw, 40px);
    /* 例: 16px～40pxの間で3vwに可変 */
}

.referral-campaign-subtitle {
    font-size: clamp(8px, 7vw, 40px);
    /* 例: 16px～40pxの間で3vwに可変 */
    color: var(--color-text-green);
    font-weight: bold;
    margin: 2% 0 0 0;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 3;
}

.referral-campaign-details {
    background-color: var(--color-text-white);
    border: 5px double var(--color-text-dark-navy);
    /* 線幅、線の種類、色 */
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    text-align: center;
    margin-top: -2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.referral-campaign-details p {
    font-size: clamp(8px, 2.7vw, 22px);
    color: var(--color-text-blue);
    line-height: 1.3;
    margin: 0;
    font-weight: 500;
    text-align: left;

}

.referral-campaign-details>p>strong {
    font-size: clamp(8px, 4.3vw, 34px);
    color: var(--color-text-red);
    font-weight: 700;
}

.referral-campaign-note {
    font-size: clamp(6px, 2vw, 16px);
    color: var(--color-text-dark-navy);
    margin-top: 0px;
    text-align: left;
}


.card-title {
    font-size: clamp(6px, 4vw, 24px);
    /* 以前の1.75remから縮小 (デフォルトのremサイズ程度に) */
    line-height: 1.5;
    color: var(--color-text-light);
    /* 以前のvar(--color-primary-dark)から控えめな色に (薄いグレー) */
    margin-bottom: 0;
    margin-top: 1.5%;
    word-break: break-word;
    /* ★★★ 長い単語でも強制的に改行 ★★★ */
    text-align: center;
}



.card-title-lg-features {
    font-size: clamp(6px, 4.6vw, 26px);
    /* 例: 16px～40pxの間で3vwに可変 */
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-align: center;
    margin-bottom: 0;
}

.card-title-lg {
    font-size: clamp(6px, 4.6vw, 26px);
    line-height: 1.3;
    font-weight: 700;
    padding: 0 3%;
    text-align: left;
    margin-bottom: 0;
}

/* --- 段落・テキストスタイル --- */
p {
    color: var(--color-text-dark-navy);
    line-height: 1.75rem;
    font-size: 1rem;
}

.hero-title {
    width: 100%;
    font-size: clamp(8px, 10vw, 58px);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text-red);
    font-weight: 800;
    border-radius: 3px;
}

.hero-main-content {
    display: flex;
    /* 子要素を横並びにする */
    align-items: center;
    /* 垂直方向の中央揃え (必要に応じて調整) */
    width: 100%;
    /* 親要素の幅いっぱいに広がるように */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
    /* 必要に応じて、このセクション全体の最大幅を設定できます */
    /* max-width: 1200px; */
    /* margin: 0 auto; /* 中央寄せにしたい場合 */
}


.hero-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    /* デフォルトは縦並び */
    align-items: center;
    text-align: center;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.benefit-content {
    margin-top: 15%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    /* デフォルトは縦並び */
    align-items: center;
    text-align: center;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    /* 明るい背景 */
    overflow: hidden;
    /* 泡がはみ出さないように */
    padding: 0;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.hero-text {
    max-width: 700px;
    /* テキストの幅を制限 */
    margin: 0 auto;
}

.hero-buttons {
    
    align-items: center;
    /* ラッパー自身がコンテンツの幅に合わせるようにする */
    /* 必要に応じて、このラッパー全体の margin や position を調整して配置 */
    margin-top: 0px;
    /* 例: 上に吹き出しが出るスペースを確保するため */
    margin-left: 0px;
    /* 例: 全体的な位置調整 */


}

/* 2. 吹き出し本体のスタイル */
.comment-bubble {
    position: absolute;
    background-image: url('../svg/Speech-bubble.svg');
    background-size: 100% 100%;
    /* 要素の幅と高さに合わせてSVGを引き伸ばす */
    /* SVGのアスペクト比を維持したい場合は background-size: contain; を使用し、width/heightを調整 */

    /* SVGが要素の中央に配置されるように */

    /* ★★★ 吹き出しを表示するサイズを設定 ★★★ */
    /* ここで指定するwidthとheightは、作成したSVGの形状と比率を考慮して調整してください */
    width: 30%;
    /* 例: SVG作成時のキャンバスの幅に合わせる */
    height: 30%;
    /* 例: SVG作成時のキャンバスの高さに合わせる */

    /* テキスト関連のスタイル (テキスト「まずは」の色やフォントなど) */
    color: var(--color-text-dark-navy);
    /* テキストの色はネイビー */
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    /* テキストの折り返し防止 (吹き出し内なので nowrap が良い場合が多い) */
    /* ★★★ テキストがSVGの丸い本体部分に収まるようにパディングを調整 ★★★ */
    /* 上 右 下 左 の順。特に「下」のパディングはしっぽ部分を避けるために多めに必要です */
    padding: 20px 6px 25px 4px;
    /* 例: 上18px、下25pxなど。SVGの形に合わせて微調整 */
    /* 吹き出し全体の位置調整 (変更なし) */
    top: -5%;
    /* 吹き出しの新しい高さ(例:60px)に合わせて、ボタンの上からの距離を調整 */
    left: -3%;
    z-index: 10;
}
.h02 {
  position: relative;
  border-top: solid 3px #ef4123;
  border-bottom: solid 1px #ef4123;
  background: #ffffef;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin-top: 50px;
  margin-bottom: 0;
  font-size: 20pt;
  font-weight: bold;
}
.h02:after {
  /*タブ*/
  position: absolute;
  font-weight: 900;
  content: "\f0a7\ 今月限定";
  background: #80c8d1;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}
/* --- ボタン --- */
.btn {
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 3rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    /* transform追加 */
    font-weight: 700;
}

.btn-primary {
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    background-color: var(--color-button-orange);
    color: #fff;
    border: 1px solid transparent;
  
    font-weight: 900;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* シャドウ追加 */
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    /* ホバーで少し浮き上がる */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.btn-lg {
    padding: 3% 4%;
    /* ボタンを大きく */
    font-size: 2rem;
}

.hero-image {
    width: 100%;
    /* モバイルでは全幅 */
    max-width: 500px;
    /* ある程度の最大幅 */
    margin-top: 2rem;
    /* テキストとの間に余白 */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.hero-image img {
    height: auto;
    /* 高さを自動調整 */
}

.hero-description {
    width: 80%;
    font-size: clamp(6px, 6.2vw, 48px);
    line-height: 1.5;
    color: var(--color-text-dark-navy);
    font-weight: 800;
    margin: 0 0 0 0;
    padding-left: 1%;
    padding-right: 1%;
    text-align: left;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.hero-description>strong {
    color: var(--color-text-red);
    font-weight: 800;
}

.hero-description02 {
    font-size: clamp(6px, 6.3vw, 40px);
    line-height: 1.5;
    color: var(--color-text-dark-navy);
    margin-bottom: 1rem;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    width: 70%;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.hero-description02>strong {
    color: var(--color-text-red);
    font-weight: 800;
}

.hero-image-area {
    /* ★★★ 新規追加 ★★★ */
    width: 30%;

    justify-content: center;
    /* 水平方向の中央揃え */
    align-items: center;
    /* 垂直方向の中央揃え */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.hero-main-image {
    /* ★★★ 新規追加 ★★★ */
    max-width: 100%;
    /* 親要素 (.hero-image-area) の幅に合わせる */
    height: auto;
    /* アスペクト比を保持 */
    display: block;
    /* 画像の下に余分なスペースができるのを防ぐ */
    object-fit: cover;
    /* 画像がコンテナを覆うようにトリミング (アスペクト比は維持されるが、はみ出す部分がある) */
    background-color: transparent;
    /* 背景を透明にする */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}


.hero-description-small {
    font-size: 1.125rem;
    color: var(--cohero-description-smalllor-text-light);
    margin-bottom: 2rem;
}


.info-description {
    font-size: clamp(6px, 4.2vw, 22px);
    line-height: 1.8rem;
    color: var(--color-text-dark-navy);
    margin-bottom: 3%;
    text-align: left;
    margin-top: 0;
    padding: 0 2%;
}

.card-description {
    font-size: clamp(8px, 7vw, 32px);
    /* 必要に応じて調整 */
    font-weight: 900;
    /* 以前の標準から太く (最も太く) */
    color: var(--color-text-red);

    margin-top: 0.5rem;
    /* タイトルからの距離を少し確保 */
}

.card-description02 {
    font-size: clamp(8px, 5.4vw, 26px);
    /* 以前の1.05remから大きく (一番目立つように) */
    font-weight: 900;
    /* 以前の標準から太く (最も太く) */
    text-align: center;
    color: var(--color-text-red);

    margin-top: 0.5rem;
    /* タイトルからの距離を少し確保 */
    margin-bottom: 0;
}

.icon-wrapper-image {
    border-radius: 50%;
}

.text-gray-600 {
    color: var(--color-text-light);
    margin: 0px;
    padding: 0;
    font-size: clamp(6px, 2.7vw, 18px);
    /* 例: 16px～40pxの間で3vwに可変 */
    line-height: 1.3;
    /* 行の高さも調整して、複数行になったときに間隔を空ける */
    /* white-space: nowrap; は削除 */
    text-align: left;
}

.coach-message {
    font-weight: 800;
}

.marker {
    background: linear-gradient(transparent 70%, #fff799 0%);
    font-weight: bold;
}

.our-mission {
    text-align: left;
    font-size: clamp(6px, 4.2vw, 22px);
    margin: 0;
    padding: 0 3%;
    line-height: 1.7;
}


.customer-voice {
    margin: 0px;
    padding-bottom: 20px;
}

.customer-voice-image {
    text-align: center;
    margin: 0 15% 0 15%;
}

.customer-voice-information {
    font-size: 18px;
    padding: 0px 20px 10px 20px;
}

.customer-voice-subtitle {
    color: #e60012;
    position: relative;
    padding: 2% 5%;
    font-size: clamp(14px, 5.5vw, 26px);
    font-weight: bold;
    text-align: center;
}

.customer-voice-subtitle::before,
.customer-voice-subtitle::after {
    content: '';
    /* 必ず必要 */
    position: absolute;
    top: 0.8rem;
    width: 4px;
    height: 30px;
    background: linear-gradient(109.6deg, rgba(62, 161, 219, 1) 11.2%, rgba(93, 52, 236, 1) 100.2%);
    /* ★追加: 背景にグラデーションを適用 */
    /* --gradient変数を使いたい場合は、以下のように記述 */
    /* background: var(--gradient); */
}

/* ::beforeと::afterの位置を左右にずらす */
.customer-voice-subtitle::before {
    left: 3%;
    transform: rotate(-30deg);
    /* 例: 45度時計回りに回転 */
    transform-origin: center;
    /* 回転の中心を指定 (デフォルトはcenterなので通常は不要ですが明示的に) */
    /* ★調整: 左側に配置する位置 */
    /* transform: translateX(-50%); */
    /* 必要に応じて中央寄せに使う */
}

.customer-voice-subtitle::after {
    right: 3%;
    transform: rotate(30deg);
    /* 例: 45度時計回りに回転 */
    transform-origin: center;
    /* 回転の中心を指定 (デフォルトはcenterなので通常は不要ですが明示的に) */
    /* ★調整: 右側に配置する位置 */
    /* transform: translateX(50%); */
    /* 必要に応じて中央寄せに使う */
}

.customer-voice-text {
    font-size: clamp(6px, 3.7vw, 20px);
    padding: 10px 20px 10px 20px;
}

.customer-voice-face {
    border-radius: 50%;
}

.coach-list {
    display: flex;
    /* 子要素 (coach-item) を横並びにする */
    overflow-x: auto;
    /* ★重要: 横方向にはみ出したらスクロール可能にする ★ */
    -webkit-overflow-scrolling: touch;
    /* iOSで滑らかなスクロールを実現 */
    padding-bottom: 2%;
    /* スクロールバーが見えやすいように下部にパディング */
    scroll-snap-type: x mandatory;
    /* スワイプでアイテムの区切りにスナップする（任意） */
    padding-left: 10px;
    /* 左端の余白（必要に応じて調整） */
    padding-right: 10px;
    /* 右端の余白（必要に応じて調整） */
    margin-bottom: 0px;
    /* セクションの下の余白 */
    margin-top: 0;
}

.coach-item {
    /* display: inline-block; と vertical-align: top; は削除 */
    flex: 0 0 auto;
    /* ★重要: 縮小・拡大しないようにし、幅はコンテンツまたは設定値に任せる ★ */
    width: 80%;
    /* ★個々のコーチアイテムの固定幅 (調整してください) ★ */
    /* width: 80%; は削除。幅はここでpxなどで固定する */
    max-width: 400px;

    margin: 5px;
    /* 各アイテム間のマージン */
    /* 上記の coach-items-wrapper の padding と gap で調整するなら、
       ここで margin を 0 にして、親で gap を使う方が良い場合もあります。
       例: margin-right: 20px; (最後のアイテム以外) など */
    font-size: clamp(8px, 3.2vw, 16px);
    color: #000;
    background-color: #ffffff;
    border-radius: 15px;
    box-sizing: border-box;
    /* paddingやborderがwidthに含まれるように */
    padding: 10px;
    /* アイテム内のパディング */
    text-align: left;
    /* テキストを左寄せにする場合 */
    display: flex;
    /* ★追加: 内部コンテンツを縦方向中央揃えにするため */
    flex-direction: column;
    /* ★追加: 内部コンテンツを縦に並べる */
    justify-content: flex-start;
    /* ★ここを変更: 内部コンテンツを上寄せにする ★ */
    align-items: center;
    /* ★追加: 内部コンテンツを横方向中央揃え */
    min-height: 180px;
    /* ★アイテムの最小高さを設定 (コンテンツが少ない場合でも高さが確保される) ★ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 見栄えのための影 */
    scroll-snap-align: start;
    /* スワイプで先頭にスナップする（任意） */
}

.coach-text {
    white-space: normal;
    padding: 1% 2%;
}



.infection-control-section {
    position: relative;
    background-color: var(--color-bg-lighter);
    /* 明るい背景 */
    padding: 0 0 13% 0;

    margin: 0 auto;
    overflow: hidden;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.infection-control-section-subfont {
    margin: 0;
    padding: 0 3%;
    font-size: clamp(6px, 4.6vw, 26px);
}

ul.horizontal-list {
    background-color: var(--color-bg-lighter);
    overflow-x: auto;
    margin: 0 auto;
    white-space: nowrap;
    height: 200px;
}

li.item {
    display: inline-block;
    width: 30%;
    height: 150px;
    margin: 16px;
    font-size: 48px;
}

/*アコーディオンメニューここから*/
.s_04 .accordion_one {
    width: 95%;
    max-width: 600px;
    margin: 0 auto;
}

.s_04 .accordion_one .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
    color: #080811;
    font-size: 22px;
    /* font-weight: bold; */
    padding: 5px 60px 5px 10px;
    /*padding: 20px 11%;*/
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

.accordion_sub_title {
    font-size: 20px;
    color: #080811;
    font-weight: bold;
}

.accordion_under_line {
    border-bottom: solid 1px #181821;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.s_04 .accordion_one:nth-of-type(2) .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
}

.s_04 .accordion_one:nth-of-type(3) .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
}

.s_04 .accordion_one .accordion_header:hover {
    opacity: 0.8;
}

.s_04 .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    margin-top: -15px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.s_04 .accordion_one .accordion_header.stay .i_box {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_04 .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}

.s_04 .accordion_one .accordion_header.stay .i_box .one_i {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.s_04 .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.s_04 .accordion_one .accordion_header.stay.open .i_box {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

.s_04 .accordion_one .accordion_header .i_box .one_i:before,
.s_04 .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: "";
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}

.s_04 .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}

.s_04 .accordion_one .accordion_header.stay .i_box .one_i:before {
    content: none;
}

.s_04 .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}

.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:before {
    content: "";
}

.s_04 .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_04 .accordion_one .accordion_inner {
    display: none;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
    box-sizing: border-box;
}

.s_04 .accordion_one .accordion_inner.stay {
    display: block;
}

.s_04 .accordion_one:nth-of-type(2) .accordion_inner {
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
}

.s_04 .accordion_one:nth-of-type(3) .accordion_inner {
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
}

.s_04 .accordion_one .accordion_inner .box_one {
    height: auto;
    font-size: 16px;
}

.s_04 .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
}


@media screen and (min-width: 749px) {
    .s_04 .accordion_one .accordion_header {
        font-size: 24px;
    }

    .s_04 .accordion_one .accordion_header .i_box {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    .txt_a_a {
        text-align: center;
    }

}

.s_05 .accordion_one {
    max-width: 1024px;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 0px;
}

.s_05 .accordion_one .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
    color: #080811;
    font-size: 22px;
    /* font-weight: bold; */
    padding: 5px 60px 5px 10px;
    /*padding: 20px 11%;*/
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

.accordion_sub_title {
    font-size: 20px;
    color: #080811;
    font-weight: bold;
}

.accordion_under_line {
    border-bottom: solid 1px #181821;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.s_05 .accordion_one:nth-of-type(2) .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
}

.s_05 .accordion_one:nth-of-type(3) .accordion_header {
    background-color: #ffe6fa;
    /*titleの色*/
}

.s_05 .accordion_one .accordion_header:hover {
    opacity: 0.8;
}

.s_05 .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    margin-top: -15px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.s_05 .accordion_one .accordion_header.stay .i_box {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_05 .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}

.s_05 .accordion_one .accordion_header.stay .i_box .one_i {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_05 .accordion_one .accordion_header.stay.open .i_box .one_i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.s_05 .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.s_05 .accordion_one .accordion_header.stay.open .i_box {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

.s_05 .accordion_one .accordion_header .i_box .one_i:before,
.s_05 .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: "";
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}

.s_05 .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}

.s_05 .accordion_one .accordion_header.stay .i_box .one_i:before {
    content: none;
}

.s_05 .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}

.s_05 .accordion_one .accordion_header.stay.open .i_box .one_i:before {
    content: "";
}

.s_05 .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.s_05 .accordion_one .accordion_header.stay.open .i_box .one_i:after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s_05 .accordion_one .accordion_inner {
    display: none;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
    box-sizing: border-box;
}

.s_05 .accordion_one .accordion_inner.stay {
    display: block;
}

.s_05 .accordion_one:nth-of-type(2) .accordion_inner {
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
}

.s_05 .accordion_one:nth-of-type(3) .accordion_inner {
    border-left: 1px solid #080811;
    /*枠線の色*/
    border-right: 1px solid #080811;
    /*枠線の色*/
    border-bottom: 1px solid #080811;
    /*枠線の色*/
}

.s_05 .accordion_one .accordion_inner .box_one {
    height: auto;
    font-size: 16px;
}

.s_05 .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
}

.accordion_inner {
    background-color: #ffffff;
}

@media screen and (min-width: 749px) {
    .s_05 .accordion_one .accordion_header {
        font-size: 24px;
    }

    .s_05 .accordion_one .accordion_header .i_box {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    .txt_a_a {
        text-align: center;
    }

    .s_05 {
        margin-left: 15%;
        margin-right: 7%;
    }
}

.box {
  padding: 15px;
  padding-bottom: 30px;
  border-bottom: solid 3px #ef4123;
  margin: 0px;
  margin-bottom: 20px;
  background: #fffcd7;
}

.column_font_big {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.title_line {
  border-left: solid 2px #fae06a;
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex; /* Add this line */
  align-items: center; /* Vertically aligns items in the middle */
}
.title_line > span {
  color: #1e1210;
  /*text-shadow:0 1px 0 black,1px 0 0 black,0 -1px 0 black,-1px 0 0 black;*/
  font-size: 20px;
  font-weight: 600;
  margin-left: 10px;
  /*border-bottom: solid 1px #c030c0;*/
  border-radius: 5px;
}

 .call-to-action-top-text02{
     margin-bottom: 0px; 
    margin-top: 20px;
  }

    .call-to-action-bottom-text{
    margin-top: 0px;
    margin-bottom: 15px;
  }
.font14_01 {
    font-size: 20px;
    color: #000;
    font-weight: 800;
}

.font14_02 {
    font-size: 17px;
    color: #000;
    font-weight: 800;
}

.money_column03 {
    text-align: right;
    margin: 0;
    margin-top: -0.8rem;
    line-height: 2.0em;
}

.money_column04 {
    text-align: right;
    margin: 0;
    margin-top: -1rem;
}

.font30 {
    font-size: 30px;
    color: #000;
    font-weight: 800;
}

.font10 {
    font-size: 10px;
    color: #000;
    font-weight: 300;
}

.font18 {
    font-size: 18px;
    color: #000;
    font-weight: 800;
}

/*アコーディオンメニューここまで*/
.text-lg {
    margin: 0 0 3% 0;
    font-size: clamp(6px, 3.8vw, 20px);
    padding-left: 3%;
}

/* リストスタイル */
.list-check {
    list-style: none;
    /* デフォルトのリストスタイルを削除 */
    padding-left: 0;
    margin-top:0;
}

.list-check li {
    position: relative;
    padding-left: 1.8rem;
    /* チェックアイコン分のスペース */
    margin-bottom: 0.5rem;
    font-size: clamp(6px, 4.2vw, 22px);
    color: var(--color-text-dark-navy);
}

.list-check li::before {
    content: '\f00c';
    /* Font Awesomeのチェックアイコン */
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    position: absolute;
    left: 0;
    color: var(--color-text-blue);
    /* チェックアイコンの色 */
}

.coach-section {
    background-color: var(--color-bg-lighter);
    padding-top: 5%;
}



/* --- 画像関連 --- */

.image-almost-full-width {
    background-color: var(--color-bg-light);
    width: 100%;
    /* 親要素の幅に合わせる */
    max-width: 1000px;
    padding: 20px;
    height: auto;
    /* 高さを自動調整 */
    object-fit: cover;
    display: block;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}



/* --- STEP 番号 --- */


/* --- カード・要素のシャドウ --- */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* --- 汎用的なFlexbox/Gridレイアウト --- */

.grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* モバイルでも2列に設定 */
    row-gap: 2%;
    /* ★★★ 縦方向の隙間（例: 5%） ★★★ */
    column-gap: 6%;
    /* ★★★ 横方向の隙間（例: 6%） ★★★ */
    padding: 15px;
    /* ★★★ モバイルでの左右パディング（必要なら後で調整） ★★★ */
    margin-bottom: 40px;
    /* ★★★ ここを調整: 次のセクションとの間に十分な余白を追加 ★★★ */
    align-items: stretch;
    /* ★★★ 追加: グリッドアイテムを縦方向に引き伸ばす ★★★ */
    /* max-widthやmargin: auto; を設定して、コンテナ自体の中央寄せや最大幅を制御することも検討 */
    /* 例: max-width: 480px; */
    /* 例: margin: 0 auto; */
}





.benefit-grid {
    display: grid;
    /* ★常に1列にする */

    max-width: 500px;
    /* カードの最大幅を調整してください */
    margin: 0 auto 3% auto;
    /* 中央寄せ */
    row-gap: 0%;
    /* ★★★ 縦方向の隙間（例: 5%） ★★★ */
    padding: 15px;
    /* ★★★ モバイルでの左右パディング（必要なら後で調整） ★★★ */

}

/* --- Benefit Section --- */

.benefit-card {
    padding: 1rem;
    /* パディングを増やす */
    /* より強い影を適用 */
    box-shadow: var(--shadow-lg);
    /* 非常に薄い水色の枠線を追加して、カードの境界を強調 */
    border: 5px solid var(--color-lighter);
    border-radius: 5%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* アイコン、タイトル、説明文を中央寄せ */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-height: 300px;
    /* ★★★ 例: カードの最低高さを設定（値はコンテンツに合わせて調整） ★★★ */
    margin: 1.5% auto;
    background-color: var(--color-text-white);
    /* 背景色を追加 (例: ブルー系) */
    display: flex;
    /* アイコンを中央寄せするため */

}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-light);
}

/* --- Benefit Card Icon Styling --- */


.icon-wrapper {
    height: 100%;
    width: 100%;
    max-width: 200px;
    background-color: var(--color-light-blue);
    /* 背景色を追加 (例: ブルー系) */
    border-radius: 50%;
    /* 円形にする (例) */
    display: flex;
    justify-content: center;
}

.first-view {
    position: relative;
    /* 子要素（擬似要素）を基準に配置するために必要 */
    width: 100%;
    display: flex;
    /* 内部のテキストなどを中央寄せしたい場合 */
    flex-direction: column;
    /* justify-content: center;*/
    /* align-items: center;*/
    color: white;
    /* 背景画像の上に白いテキストを置く場合 */
    text-align: center;
    /* テキストを中央寄せ */
    padding: 2%;
    /* 内部コンテンツと背景の間に余白を持たせる */
    overflow: hidden;
    /* ぼかしがはみ出すのを防ぐ */
}

.first-view::before {
    content: '';
    /* 擬似要素には必須 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../image/mobile/koiwa-top/first-view-image.webp');
    background-size: cover;
    /* 画面全体を覆うように画像を拡大・縮小 */
    background-position: right;
    /* 画像を中央に配置 */
    background-repeat: no-repeat;
    /* 画像の繰り返しをなしにする */
    filter: blur(0px);
    /* ★★★ ここでぼかしを設定します。値は調整してください ★★★ */
    z-index: -1;
    /* ★★★ コンテンツの背面に配置 ★★★ */
}



/* --- Fee Section --- */
/* --- Header --- */
.header {
    background-color: #fff;

    height: auto;
    flex-direction: column;
    /* ★★★ 追加：子要素を縦に並べる ★★★ */
    align-items: center;
    /* ★★★ 追加：子要素を中央揃えにする ★★★ */
}

.header-content {

    /* フレックスアイテムが内容によっては縮まない問題を解決 */
    margin: 0 auto;
    /* 中央揃え */
}

.header-bottom-row {
    width: 100%;
    /* ★★★ 追加：親要素の幅いっぱいに広げる ★★★ */
    max-width: 1200px;
    /* ★★★ 追加：コンテナの最大幅を適用 ★★★ */
    margin: 0 auto;
    /* 中央揃え */
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    /* パディングを調整 */
    display: none;
}

.h2 {
    margin-top: 0;
}

.bottom_zero {
    margin-bottom: 0px;
}

.image {
    text-align: center;
}

.header-bottom-row nav {
    width: 100%;
}

/* ヘッダー内の各要素の幅 (flexプロパティで可変にする) */
/* 指導実績 と 地域唯一（共通スタイル） */
.achievements-container {
    width: calc((100% - 4%) / 2);
    padding: 0px;
    /* 各アイテムの左右にわずかなパディング */
    text-align: center;
    justify-content: center;
    margin: 0 2% 1.5% 2%;
    /* モバイルで縦並びになった時の間隔 */
    position: relative;
    min-height: 50px;
    display: flex;
    background-color: #DD2C00;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* ★★★ 影の設定を再調整 ★★★ */
    align-items: center;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7.5px), 50% 100%, 0 calc(100% - 7.5px));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7.5px), 50% 100%, 0 calc(100% - 7.5px));
}

.achievements-flag-left-border {
    position: absolute;
    top: 2.5px;
    /* 上からの内側に */
    left: 3px;
    /* 左からの内側に */
    width: 3px;
    /* ボーダーの幅 */
    height: calc(100% - 5px);
    /* 上下を5pxずつ開けるため */
    background-color: #fff;
    /* 白い左線 */
    z-index: 2;
    /* テキストよりも手前に */
    border-bottom-left-radius: 3px;
    /* 下部角丸追加で窪み形状に合わせる */
}


.achievements-flag-right-border {
    position: absolute;
    top: 2.5px;
    /* 上からの内側に */
    right: 3px;
    /* 右からの内側に */
    width: 3px;
    /* ボーダーの幅 */
    height: calc(100% - 5px);
    /* 上下を5pxずつ開けるため */
    background-color: #fff;
    /* 白い右線 */
    z-index: 2;
    /* テキストよりも手前に */
    border-bottom-right-radius: 3px;
    /* 下部角丸追加で窪み形状に合わせる */
}

.achievements-text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 100%;
    padding: 0 5px;
    /* モバイルでの左右パディングを少し増やして、文字を大きくするスペースを作る */
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
    display: flex;
    /* ★★★ text-wrapper自体はflexを維持 ★★★ */
    flex-direction: column;
    /* ★★★ 縦並びを維持（指導実績行とサブテキスト行のため） ★★★ */
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
    min-width: 0;
}















.achievements-main-line {
    display: flex;
    /* 指導実績と3万人を横に並べるためにflexにする */
    align-items: baseline;
    /* 縦方向の揃え方を調整（必要ならcenterなど） */
    justify-content: center;
    /* 横方向の中央揃え */
    white-space: nowrap !important;
    /* ★★★ ここにnowrapを移動！ ★★★ */
    /* overflow, text-overflow も必要ならここに追加 */
}

.achievements-main-text {
    font-size: clamp(6px, 3.5vw, 26px);
    /* モバイルの文字サイズ */
    font-weight: bold;
    line-height: 1.1;
    display: inline;
    /* flexアイテムの子要素なので inlineでもOK */
    /* white-space: nowrap !important; ← ここからは削除！ */
    transform: translateY(-2px);
    /* ★★★ 5px上にずらす (適宜調整) ★★★ */
}

.achievements-main-text02 {
    font-size: clamp(6px, 2.6vw, 22px);
    /* モバイルの文字サイズ */
    font-weight: bold;
    line-height: 1.1;
    display: inline;
    /* flexアイテムの子要素なので inlineでもOK */
    /* white-space: nowrap !important; ← ここからは削除！ */

    transform: translateY(-2px);
    /* ★★★ 5px上にずらす (適宜調整) ★★★ */
}


.achievements-line2-new {
    font-size: clamp(6px, 4.6vw, 40px);
    /* 3万人の部分 */
    color: var(--color-accent);
    display: inline;
    /* flexアイテムの子要素なので inlineでもOK */

    transform: translateY(-2px);
}

.achievements-line2-new02 {
    font-size: clamp(6px, 3.6vw, 30px);
    /* 地域唯一の部分 */
    color: var(--color-accent);
    display: inline;
    /* flexアイテムの子要素なので inlineでもOK */
    transform: translateY(-2px);
}

.achievements-sub-text {
    font-size: clamp(6px, 2.5vw, 22px);
    /* サブテキストサイズ */
    line-height: 1.1;
    white-space: nowrap;
    transform: translateY(-5px);
    /* ★★★ 5px上にずらす (適宜調整) ★★★ */
    /* これは残す */
}

.achievements-sub-text02 {
    font-size: clamp(6px, 2.5vw, 22px);
    /* サブテキストサイズ */
    line-height: 1.1;
    white-space: nowrap;
    /* これは残す */
    transform: translateY(-5px);
    /* ★★★ 5px上にずらす (適宜調整) ★★★ */
}




.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* ナビ項目が多すぎる場合に折り返す */
    justify-content: center;
    /* 中央寄せ */
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-dark-navy);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav .btn-primary {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
}




.features-section {
    position: relative;
    background-color: var(--color-bg-lighter);
    /* 明るい背景 */
    padding-top: 5rem;
    padding-bottom: 5rem;
    overflow: hidden;
    /* 泡がはみ出さないように */
    padding-top: 5px;
    padding-bottom: 15px;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
}

.why-choose-us-section {
    position: relative;
    background-color: var(--color-bg-lighter);
    /* 明るい背景 */
    padding-top: 3%;
    padding-bottom: 2%;
    max-width: 500px;
    margin: 0 auto;

}

/* Hero Sectionの泡 */
.bubble {
    position: absolute;
    border-radius: 9999px;
    background-color: var(--color-primary-light);
    /* 淡い水色の泡 */
    opacity: 0.4;
    /* 透明度を調整 */

}

.bubble-1 {
    top: 10%;
    left: 5%;
    width: 6rem;
    height: 6rem;

}

.bubble-2 {
    bottom: 15%;
    right: 10%;
    width: 8rem;
    height: 8rem;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 10;
}

.bubble-3 {
    top: 20%;
    right: 20%;
    width: 3rem;
    height: 3rem;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 10;
}



/* --- Info Card (About Section) --- */
.info-card-content {
    display: flex;
    flex-direction: column;
    /* モバイルでは縦並び */
    align-items: center;
    gap: 3rem;
}

.last-menu-section {
    background-color: var(--color-bg-lighter);
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0;
}

.access-container {
    background-color: var(--color-bg-lighter);
    padding: 0;
}

.customer-voice-container {
    padding: 0;
    background-color: #fffff2;
    max-width: 500px;
    margin: 0 auto;
}

.go-to-pagetop {
    background-color: var(--color-bg-lighter);
}

.font-right {
    text-align: right;
    padding-right: 2%;
}

.font-min {
    font-size: 14px;
}

.last-menu-title {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    background: #ffe6fa;
    padding: 2% 0;
    margin: 0 3%;
    height: 40px;
}

.last-menu {
    margin: 0 3% 3% 3%;
    padding: 4% 3% 3% 2%;
    border-right: solid 1px #080811;
    border-left: solid 1px #080811;
    border-bottom: solid 1px #080811;
}

.c-link_top {
    display: inline-block;
    width: 3em;
    height: 3em;
    border: 1px solid;
    border-radius: 50%;
    text-align: center;
    line-height: 3;
}

.access>iframe {
    height: 60svw;
}

.info-card-text {
    flex: 1;
    text-align: center;
    /* モバイルでは中央寄せ */
}

.our-mission-container {
    padding: 3% 0 0 0;
    background-color: var(--color-bg-lighter);
}

/* --- Feature Section --- */
.feature-item {
    padding: 2%;
    margin: 2% auto;
    max-width: 500px;
    text-align: left;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.feature-item:last-child {
    margin-bottom: 0;
}




.feature-item-heading {
    font-size: clamp(8px, 6vw, 28px);
    color: var(--color-text-dark-navy);
    font-weight: 700;
    margin: 2% 0 3% 0;
    text-align: center;
}

.feature-item-description {
    font-size: clamp(6px, 4.6vw, 26px);
    text-align: left;
    padding: 0 3%;
    line-height: 1.6;
    color: var(--color-text-dark-navy);

    margin: 0 0 5px 0;

}

.very-convenient-item {
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* デフォルトは縦並び */
    margin: 0 auto;
    max-width: 500px;
}

.very-convenient-heading {
    font-family: 'M PLUS Rounded 1c';
    font-size: clamp(8px, 6vw, 24px);
    color: var(--color-accent);
    -webkit-text-stroke: 0.7px black;
    /* 縁取りの太さと色 */
    margin: 3px 0 5px 0;
    text-align: left;
    font-weight: 900;
}




.section-title-why-choose-us {
    font-size: clamp(12px, 5.5vw, 26px);
       -webkit-text-stroke: 0.7px var(--color-text-line); /* 縁取りの太さと色 */
      font-weight: 900;
font-family: 'M PLUS Rounded 1c';
    margin: 0 0 3% 0;
    color: var(--color-text-white);
    text-align: center;
    /* 以前の背景色関連のスタイルは削除または透明に設定されていることを確認 */
    background-color: var(--color-title-blue);
    padding: 3%;

}

.card-title-lg-why-choose-us {
    font-size: clamp(6px, 5.4vw, 24px);
    /* 例: 16px～40pxの間で3vwに可変 */
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
    margin: 0;
    padding : 0 0 3% 0;;
}
.card-title-lg-why-choose-us02 {
    font-size: clamp(6px, 5.0vw, 20px);
    /* 例: 16px～40pxの間で3vwに可変 */
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
    margin: 0;
    padding : 0 0 3% 0;
}
.why-choose-us-description {
    margin-top: 0;
    margin-bottom: 3%;
    font-size: clamp(6px, 4.2vw, 22px);
    line-height: 1.8;
}

.why-choose-us-subtitle {
    margin: 0;
    font-size: clamp(6px, 5vw, 26px);
}
.why-choose-us-subtitle02 {
    margin: 0;
    font-size: clamp(6px, 4.3vw, 22px);
}

/* 特徴セクション */
.feature-section {
    /*background-color: var(--color-primary-light);*/
    text-align: center;
    padding-bottom: 3%;
}

.infection-control-description {

    margin-top: 0;
    margin-bottom: 3%;
    padding: 0 3%;
    font-size: clamp(6px, 4.2vw, 22px);

}

.Compare-to {
    font-size: clamp(8px, 6vw, 30px);
    font-weight: bold;
    color: var(--color-text-black);
    margin: 0;
    text-align: left;
}

/* 例（通常なら...）ボックス */
.example-box {
      
    max-width: 500px;
    background-color: var(--color-title-blue);
    margin: 0 auto;
    padding: 0px 3% 2% 3%;

  
}

.example-smart-box {
    background-color: var(--color-cream);
    padding-top: 2%;
    border-radius: 10px;
}

.example-smart-box02 {
    background-color: var(--color-cream);
    padding-top: 2%;
    border-radius: 10px;
    border: red solid 1px;
}

.example-intro {
    font-family: 'M PLUS Rounded 1c';
    font-weight: 900;
    font-size: clamp(8px, 4.5vw, 30px);
    font-weight: bold;
    padding-top: 2%;
    color: var(--color-accent);
    margin-bottom: 10px;
    -webkit-text-stroke: 0.5px black;
    /* 縁取りの太さと色 */
    text-align: left;

}

.example-list {
    list-style: none;
    margin: 0;
}

.example-list li {
    font-size: 0.95rem;
    color: var(--color-text-dark-navy);
    margin-bottom: 8px;
    position: relative;
    display: flex;
    padding-left: 60px;
    /* アイコンの幅 + アイコンとテキストの間隔 */
    gap: 2vw;
    /* ここを調整して、希望のスペースを設定してください */
}

.example-list li.sister-item::before {
    content: "";
    position: absolute;
    display: inline-block;
    /* アイコンを配置するためにインラインブロック要素にする */
    width: 40px;
    /* ★アイコンの幅 (調整してください) */
    height: 40px;
    /* ★アイコンの高さ (調整してください) */
    background-image: url('../svg/sister.svg');
    /* ★アイコン画像のパスを指定 */
    background-size: contain;
    /* アイコンがコンテナ内に収まるように */
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    /* 親要素（li）を基準に位置を調整 */
    left: 4%;
    /* liの左端に配置 */
    top: 50%;
    /* 縦方向中央に配置 */
    transform: translateY(-50%);
    /* 縦方向中央揃えのための微調整 */
}

.example-list li.brother-item::before {
    content: "";
    position: absolute;
    display: inline-block;
    /* アイコンを配置するためにインラインブロック要素にする */
    width: 40px;
    /* ★アイコンの幅 (調整してください) */
    height: 40px;
    /* ★アイコンの高さ (調整してください) */
    background-image: url('../svg/brother.svg');
    /* ★アイコン画像のパスを指定 */
    background-size: contain;
    /* アイコンがコンテナ内に収まるように */
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    /* 親要素（li）を基準に位置を調整 */
    left: 4%;
    /* liの左端に配置 */
    top: 50%;
    /* 縦方向中央に配置 */
    transform: translateY(-50%);
    /* 縦方向中央揃えのための微調整 */
}

.example-list li .experience-text {
    display: inline-block;
    /* span要素をインラインブロックにして、幅や高さを扱えるようにする */
    vertical-align: middle;
    /* 垂直方向のアライメント調整（必要であれば） */
    line-height: 1.2;
    /* 行間を調整して、2行のテキストが適切に見えるようにする */
}

.experience-text {
    color: var(--color-text-blue);
}

.example-bold {
    font-weight: bold;
    color: var(--color-text-blue);
}

.example-total {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-text-red);
    text-align: right;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-right: 3%;
}

.example-highlight01 {
    font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    font-size: clamp(8px, 6vw, 26px);
    font-weight: bold;
    color: var(--color-text-blue);
    text-align: center;
    padding-top: 10px;
    margin: 0;
}

.example-highlight02 {
    font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    width: 70%;
    padding-left: 3%;
    font-size: clamp(8px, 4.5vw, 22px);
    font-weight: bold;
    color: var(--color-text-red);
    text-align: left;
    padding-top: 0;
    margin-top: 1rem;

    padding-right: 0;
    /* アイコンをテキストの下に持っていくならpadding-rightは不要 */
    padding-bottom: 10px;
    /* アイコンのスペースを確保するため下パディングを追加 */
    /* min-height を設定すると、2行テキストの高さが固定され、アイコン配置が楽になります */

    vertical-align: middle;
    /* 上下のずれを調整 */
}

/* モバイルでは左側のパディングを減らす */
.example-highlight03 {
    font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    font-size: clamp(8px, 5.5vw, 24px);
    font-weight: bold;
    color: var(--color-accent);
    text-align: left;
    padding-top: 10px;
    margin: 0;
    -webkit-text-stroke: 0.7px black;
    /* 縁取りの太さと色 */

}

.example-highlight04 {
    font-size: clamp(8px, 5.5vw, 24px);
    font-weight: bold;
    color: var(--color-accent);
    text-align: left;
    padding-top: 10px;
    margin: 0;
    -webkit-text-stroke: 0.7px black;
    /* 縁取りの太さと色 */
  font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
}

.highlight-icons-group-right {
    width: 30%;
    /* アイコンを配置する右側エリアの幅 (調整してください) */
}







/* 新しいラッパー要素 */
.example-highlight-wrapper {
    position: relative;
    /* ★これにアイコンの基準を設定する */
    display: flex;
    /* pタグとアイコングループを横並びにするため */
    /* 必要に応じて、ラッパーの最大幅や余白を設定 */

    margin: 0;
    /* 中央に配置する例 */
}

/* top, left, bottom, right は static になるので不要 */
/* ★★★ 個々のアイコンの位置、サイズ、SVGパスの指定 ★★★ */


.convenient-content {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
    /* デフォルトは縦並び */
    padding-left: 5%;
    max-width: 500px;
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 1;
    margin: 0 auto;
}

.no-break-phrase {
    font-family: 'M PLUS Rounded 1c';
    white-space: nowrap;
    /* この要素内のテキストを改行させない */
    color: var(--color-accent);
    -webkit-text-stroke: 0.7px black;
    /* 縁取りの太さと色 */
}

.convenient-description {
    font-size: clamp(6px, 5vw, 26px);
    line-height: 1.5;
    color: var(--color-text-dark-navy);
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: left;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.convenient-highlight-wrapper {

    max-width: 100%;
    display: flex;
    /* 内部のテキストなどを中央寄せしたい場合 */
    text-align: left;
    /* テキストを中央寄せ */


}

.convenient-highlight-wrapper::before {
    content: '';
    /* 擬似要素には必須 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;

    background-image: url('../svg/convenience-program.svg');
    background-size: 100% auto;
    background-position: center;
    /* 画像を中央に配置 */
    background-repeat: no-repeat;
    /* 画像の繰り返しをなしにする */

    z-index: -1;
    /* ★★★ コンテンツの背面に配置 ★★★ */
}























.convenient-icons-group-right {
    position: absolute;
    /* 親要素 .example-highlight02 を基準に絶対位置指定 */
    top: 0;
    /* 親要素の上端に合わせる */
    right: 0;
    /* 親要素の右端に合わせる */
    width: 50%;
    /* アイコンを配置する右側エリアの幅 (調整してください) */
    height: 100%;
    /* 親要素 (p.example-highlight02) と同じ高さを取る */
    pointer-events: none;
    /* コンテナ自体はクリックイベントをブロックしない */
    /* background-color: rgba(255,0,0,0.1); /* デバッグ用: エリア確認 */
    /* 中のアイコンをFlexboxで配置する場合 */
    justify-content: center;
    /* アイコンが1つの場合や、モバイルで横並びにする場合 */
    align-items: left;
}

.convenient-icons-group-right span {
    position: absolute;
    /* ★グループコンテナ .convenient-icons-group-right を基準に絶対位置指定 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    /* background-imageが表示されるように */
    pointer-events: auto;
    /* アイコン自体はクリック可能にする */
    /* border: 1px solid blue; /* デバッグ用: アイコン要素の枠を確認 */
}

.convenient-icons-group-right .convenient-program {
    width: 85vw;
    height: 85vw;
    bottom: -13vw;
    left: -43vw;
    background-image: url('../svg/convenience-program.svg');
    /* ★ここにSVGパスを入力 */
}

.example-highlight05 {
    font-size: clamp(8px, 5.5vw, 40px);
    font-weight: bold;
    color: var(--color-accent);
    text-align: left;
    padding-top: 35vw;
    padding-left: 4vw;
    margin: 0;
}

.small-font {
    font-size: clamp(8px, 3.8vw, 18px);
    color: #000;
    font-weight: normal;
    text-shadow: none;
}

.infection-control-small-font {
    font-size: clamp(8px, 3.2vw, 18px);
    color: #000;
    font-weight: normal;
    text-shadow: none;
}

.example-highlight06 {
font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    width: 100%;
    font-size: clamp(8px, 4.2vw, 18px);
    font-weight: bold;
    color: var(--color-accent);
    -webkit-text-stroke: 0.7px black;
    /* 縁取りの太さと色 */
    text-align: left;
    position: absolute;
    /* 親要素の.containerを基準に配置 */
    padding-top: 0px;
    padding-left: 3%;
    margin: 0;
    text-align: left;
    z-index: 10;
}

.convenient-last-wrapper {
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    /* ★これにアイコンの基準を設定する */
    display: flex;
    /* pタグとアイコングループを横並びにするため */
    padding-bottom: 0vw;
    /* 必要に応じて、ラッパーの最大幅や余白を設定 */
    justify-content: flex-end;
    /* ★要素を右端に寄せる */
}

.white-back {
    max-width: 500px;
    background-color: var(--color-title-blue);
    margin: 0% auto;
    padding: 2% 0;
}

.convenient-last-icons-group-right {
    text-align: right;

    min-height: 90px;
    top: 0;
    /* 親要素の上端に合わせる */
    width: 25%;
    /* アイコンを配置する右側エリアの幅 (調整してください) */
    text-align: center;
    /* background-color: rgba(255,0,0,0.1); /* デバッグ用: アイコンエリアを確認 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    /* background-imageが表示されるように */
    pointer-events: auto;
    /* アイコン自体はクリック可能にする */
    /* border: 1px solid blue; /* デバッグ用: アイコン要素の枠を確認 */
    background-image: url('../svg/happy-family.svg');
    /* ★ここにSVGパスを入力 */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 8;
    margin-right: 0;
}

/* 1つ目のアイコン */
.happy-family {
    position: absolute;
    /* 親要素 .example-highlight02 を基準に絶対位置指定 */
    width: 100px;
    height: 100px;
    bottom: 0vw;
    left: 0vw;
    background-image: url('../svg/happy-family.svg');
    /* ★ここにSVGパスを入力 */
    position: relative;
    /* z-indexを有効にするために必要 */
    z-index: 10;
}




/* アイコンコンテナの基本スタイル (アイコンがposition:absolute;なのでなくてもよいが、管理しやすい) */
.highlight-icons-container {
    position: absolute;
    /* .example-highlight02 に対して絶対位置指定 */
    top: 0;
    right: 0;
    height: 100%;
    width: 150px;
    /* アイコンを配置するエリアの幅（調整してください） */
    pointer-events: none;
    /* コンテナ自体はイベントをブロックしない */
    display: flex;
    /* アイコンをFlexboxで横並びにする */
    justify-content: center;
    /* アイコンを中央に配置 */
    align-items: center;
    /* アイコン間の隙間 */
    gap: 10px;
    transform: translateX(-50%);
    /* モバイル中央寄せ用 */
    top: auto;
    bottom: 0;
    left: 50%;
}


/* 個々のアイコンの基本スタイル */
.highlight-icons-container i {
    position: absolute;
    color: transparent;
    /* Font Awesomeのアイコンを透明にするか、または非表示に */
    /* デフォルトのフォントサイズを設定しておくと、個別のクラスで上書きしやすい */
    font-size: 1.5rem;
    /* デフォルトのアイコンサイズ */
    pointer-events: auto;
    /* クリック可能にしたい場合はautoに戻す */
    transform: none;
    /* transformも解除 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    /* background-imageが確実に表示されるように */
    text-align: center;
    /* Font Awesomeのフォントアイコンを中央に表示したい場合 */

}



/* アイコンごとの位置とサイズ調整 */

.red-arrow {
    color: red;
    white-space: nowrap;
}

.at-our-swimming-school {
    font-family: 'M PLUS Rounded 1c';
  font-weight: 900; /* 極太に指定 */
    font-size: clamp(8px, 5.5vw, 24px);
    font-weight: bold;
    text-align: left;
    color: var(--color-accent);
    -webkit-text-stroke: 0.5px black;
    /* 縁取りの太さと色 */
    margin: 0;
}

.why-choose-us-item {
    padding: 1rem;
    padding-bottom: 0;
    margin-bottom: 1rem;
}

/* --- マップギャラリー --- */
.map-gallery {
    display: flex;
    /* 子要素 (aタグ) を横並びにする */
    justify-content: center;
    /* 中央に配置 */
    align-items: flex-start;
    /* 縦方向の上揃え */
    gap: 4%;
    /* ★★★ 各画像間の隙間を4%にする ★★★ */
    flex-wrap: wrap;
    /* 画面が狭い場合は画像を折り返す（今回は2枚なので基本的に折り返さないが念のため） */
    margin: 20px auto;
    /* 上下のマージンと中央寄せ */
    max-width: 800px;
    /* ギャラリー全体の最大幅を設定 */
    padding: 0 2%;
    /* ★★★ 左右のパディングを2%ずつ追加し、合計4%の余白を確保 ★★★ */
    box-sizing: border-box;
    /* paddingを含めて幅を計算する */
}

.map-gallery a {
    /* 各画像のラッパー（aタグ）の幅を設定 */
    flex-basis: 48%;
    /* ★★★ 各アイテムの基本幅を48%に設定 ★★★ */
    max-width: 48%;
    /* ★★★ 各アイテムの最大幅も48%に設定 ★★★ */
    text-decoration: none;
    color: inherit;
    /* 必要に応じて、個々のリンク要素の調整 */
}

.map-image {
    max-width: 100%;
    /* 親要素（aタグ）の幅に合わせて画像を縮小 */
    height: auto;
    /* アスペクト比を維持 */
    display: block;
    /* 余分な下部スペースを削除 */
    border: 1px solid #ddd;
    /* 視認性向上のための薄い枠線 */
    border-radius: 8px;
    /* 角を丸くする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 軽い影を追加 */
}




/* --- Coach Section --- */
.coach-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* モバイルで小さめ */

    row-gap: 2%;
    /* ★★★ 縦方向の隙間（例: 5%） ★★★ */
    column-gap: 6%;
    /* ★★★ 横方向の隙間（例: 6%） ★★★ */
    padding: 2% 2% 5% 2%;
    /* ★★★ モバイルでの左右パディング（必要なら後で調整） ★★★ */
    margin-bottom: 0;
    /* ★★★ ここを調整: 次のセクションとの間に十分な余白を追加 ★★★ */
    align-items: stretch;
    /* ★★★ 追加: グリッドアイテムを縦方向に引き伸ばす ★★★ */
    /* max-widthやmargin: auto; を設定して、コンテナ自体の中央寄せや最大幅を制御することも検討 */
    /* 例: max-width: 480px; */
    /* 例: margin: 0 auto; */
    display: grid;



}

/* --- Voice More Section --- */
.voice-grid {
    background-color: var(--color-bg-lighter);
    display: grid;

    padding: 3% 3% 7% 3%;
    /* ★★★ モバイルでの左右パディング（必要なら後で調整） ★★★ */

}



.questionnaire-image-container {
    margin: 0.5rem;
}

.questionnaire-image-container img {
    border-radius: 10px;
    /* 画像自体の角が丸くなる */
}


.fee-container {
    margin: 0%;
    padding-top: 2%;
    background-color: var(--color-bg-lighter);
}



@media screen and (min-width: 768px) {
    .achievements-container {
        min-height: 100px;
    }

    .convenient-description {
        min-height: 300px;
    }

    .tab-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 95%;

    }

    .side-image {
        width: 40%;
    }

    .side-text {
        width: 55%;
    }

    .tab-switch:checked+.tab-label+.tab-content {
        height: 250px;

    }

    ul.horizontal-list {
        height: 350px;
    }

    .access>iframe {
        height: 30svw;
    }

    .infection-control-section {
        margin-bottom: 13%;
    }
          .h02{
       margin-left: 15%;
       margin-right: 15%; 
      }
            .box{
        margin-left: 15%;
       margin-right: 15%; 
      }
           .column_font_big{
        font-size: 24px;
      }
}