* {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

/* --- ヘッダー全体の箱 --- */
.header {
    width: 100%;
    /* 背景色は元のイメージを継承 */
    background: linear-gradient(180deg, rgba(224, 224, 224, 0.25) 0%, rgba(83, 80, 80, 0.25) 50%, rgba(71, 69, 69, 0.25) 100%);
    overflow: hidden; /* はみ出した画像を隠す */
    padding-bottom: 5rem; /* 下に少し余白 */
}

.header__inner {
    max-width: 1200px; /* コンテンツ幅を制限（PCで見やすく） */
    width: 90%;        /* スマホでは端に余白を作る */
    margin: 0 auto;    /* 中央揃え */
    padding-top: 2rem;
    position: relative;
    z-index: 2;
}

/* --- ロゴ --- */
.header__logo img {
    width: 180px; /* 適切なサイズに固定 */
    height: auto;
}

/* --- メインビジュアルエリア（左右レイアウト） --- */
.mv {
    display: flex; /* ★ここで左右に並べる */
    align-items: center; /* 上下中央揃え */
    justify-content: space-between; /* 左右に離す */
    margin-top: 3rem;
}

/* --- 左側：テキストエリア --- */
.mv__content {
    width: 50%; /* 左半分を使う */
}

.mv__sub-copy {
    font-size: 3.2rem;
    font-weight: 600;
    color: #353333;
    margin-bottom: 1rem;
    /* 背景のピンクマーカー表現（グラデーションで再現） */
    background: linear-gradient(transparent 60%, #ffd3de 60%);
    display: inline-block; /* マーカーを文字幅に合わせる */
}

.mv__main-copy {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: 10rem; /* 元より少し控えめに調整 */
    line-height: 1;
    margin-bottom: 3rem;
    
    /* ★プロの技：文字を斜めにする */
    transform: skewX(-10deg); 
    transform-origin: bottom left; /* 左下を基準に傾ける */
    
    /* 文字色グラデーション */
    background: linear-gradient(180deg, #FB0E4D 0%, #F34977 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mv__main-copy .small {
    font-size: 5rem;
    -webkit-text-fill-color: #353333; /* 「の」だけ黒に戻す */
}

.mv__main-copy .en {
    display: block; /* 改行 */
    font-size: 8rem;
    -webkit-text-fill-color: #353333; /* 英語部分は黒 */
}

/* チェックリスト画像 */
.mv__manual img {
    width: 80%;
    max-width: 400px;
}

/* --- 右側：ビジュアルエリア --- */
.mv__visual {
    width: 50%; /* 枠を少し広げる（元45%） */
    display: flex;
    justify-content: flex-end; /* ★重要：右側に寄せる */
    position: relative; /* 位置調整の基準にする */
}

.mv__model-img {
    /* width: 100%; ← 削除 */
    /* max-width: 500px; ← ★諸悪の根源！この制限を撤廃 */
    max-width: none; /* 上限なし */
    height: auto;

    /* ★プロの技：枠からはみ出させる */
    width: 150%; /* 親要素の1.5倍の大きさにする（巨大化！） */
    margin-right: -15%;
    margin-top: -37%;
    
    /* 位置の微調整（お好みで調整可能） */
    transform: translateY(10px); /* 少し下にずらして重心を下げる */
    
    /* 重なり順の保証（緑のエリアより前に出す） */
    position: relative;
    z-index: 10;
}
/* --- コンセプトエリア（旧 header_bottom） --- */
.concept {
    position: relative;
    width: 100%;
    background-color: #DDEAB7; /* 元の薄緑色 */
    
    /* ★プロの技：前のセクションに食い込ませる */
    margin-top: -15vw; /* 上にズラして重ねる */
    padding-top: 20vw; /* 食い込んだ分の余白を確保 */
    padding-bottom: 5rem;

    /* ★プロの技：斜めの切り抜き（クリップパス） */
    /* 固定値(313px)ではなく % で指定することでスマホでも形を維持 */
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

.concept__inner {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    
    /* ★Flexboxで横並び */
    display: flex;
    justify-content: space-between; /* 左右に離す */
    align-items: center; /* 上下中央 */
}

/* --- テキストエリア --- */
.concept__content {
    width: 45%;
}

.concept__title {
    font-family: 'Hiragino Kaku Gothic Std w8', sans-serif;
    font-size: 3.6rem;
    color: #FB0E4D;
    line-height: 1.2;
    letter-spacing: 0.2rem;
    margin-bottom: 2rem;
}

.concept__subtitle {
    font-size: 2.4rem;
    font-weight: bold;
    color: #353333;
    margin-bottom: 2rem;
    display: inline-block;
    
    /* 上下の線（擬似要素の代わりにborderで簡易再現も可だが、今回はシンプルに） */
    border-top: 2px solid #353333;
    border-bottom: 2px solid #353333;
    padding: 0.5rem 2rem;
}

.concept__text {
    font-size: 1.6rem; /* 読みやすいサイズに調整 */
    line-height: 2;
    color: #353333;
    font-weight: 600;
}

/* --- 画像エリア --- */
.concept__visual {
    width: 50%;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
}

.concept__visual img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 20px; /* 少し角丸にすると今風（お好みで） */
    box-shadow: 20px 20px 0px #C7FFCA; /* 元のデザインの影を再現 */
    background-color: #fff; /* 画像透過時の対策 */
}



.h2_sub {
    /* Group 2 */
    width: 432px;
    height: 36px;
    color: #353333;
    font-family: 'Hiragino Kaku Gothic Pro W6';
    font-size: 2.4rem;
    text-align: center;
    padding-top: 20px;
    padding-left: 100px;
    line-height: 36px;
    letter-spacing: 0.2rem;
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
}
.h2_sub:before, .h2_sub:after {
    border-top: 2px solid;
    content: "";
    width: 3rem; /* 線の長さ */
}
.h2_sub:before {
    margin-right: 0.5rem; /* 文字の右隣 */
}
.h2_sub:after {
    margin-left: 0.5rem; /* 文字の左隣 */
}
.header_bottom_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.header_bottom_wrap_text {
    width: 600px;
    height: 114px;
    color: #353333;
    font-family: 'Hiragino Kaku Gothic Pro W6',sans-serif;
    font-size: 2.4rem;
    padding-top: 40px;
    padding-left: 200px;
    line-height: 36px;
    letter-spacing: 0.15em;
}

.header_bottom img {
    width: 450px;
    height: 300px;
    object-fit: cover;
    margin: 150px 150px 0 0;
    box-shadow: 34.2px 36px 4px #C7FFCA ;
}


/* --- お悩みセクション --- */
.problem {
    position: relative;
    max-width: 1440px;
    width: 100%;
    /* グラデーション背景は維持 */
    background: linear-gradient(180deg, rgba(202, 220, 162, 0.43) 0%, rgba(210, 255, 168, 0.43) 50%, rgba(202, 230, 162, 0.43) 100%);
    z-index: 0;
    
    /* 余白調整：下部にバナーが食い込む分のスペースを空ける */
    padding-top: 5rem;
    padding-bottom: 15rem; /* ★重要：バナーがはみ出す分を確保 */
    margin: 0 auto;
}

/* 枠線の装飾（変更なし） */
.problem::before {
    content: "";
    position: absolute;
    top: -4px; left: 2px; right: 2px; bottom: -4px;
    background: inherit;
    border: 4px solid #099259; 
    filter: blur(4px);
    z-index: -1;
    pointer-events: none; 
}

.problem_h2 {
    color: #353333;
    font-family: 'Hiragino Mincho Pro W6', sans-serif;
    font-size: 3.6rem;
    text-align: center;
    padding-top: 20px;
}

.problem_h2_center {
    color: #FB0E4D;
    font-size: 4.8rem;
    padding: 0 1rem;
}

/* 下線装飾（変更なし） */
.underline {
    height: 3px;
    background: #f5f5f5;
    width: 41%;
    margin: 2rem auto 4rem; /* 上下の余白を調整 */
    position: relative;
}
.underline::before, .underline::after {
    content: '';
    position: absolute;
    top: -150%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    background: #f5f5f5;
    transform: rotate(45deg);
}
.underline::before { left: -15px; }
.underline::after { right: -15px; }

/* --- アイコンエリア（Flexbox化） --- */
/* 上段：3つ並び */
.imgs_container_top {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 3rem; /* アイコン間の距離 */
    flex-wrap: wrap; /* スマホで折り返せるように */
    width: 90%;
    margin: 0 auto 3rem; /* 下に余白 */
}

/* 下段：2つ並び */
.imgs_container_bottom {
    /* position: absolute; を削除！ */
    /* bottom: 115px; を削除！ */
    
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 3rem;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.problem_img {
    width: 28%; /* PCでのサイズ感 */
    max-width: 300px;
    height: auto;
}

/* --- バナーエリア --- */
.banner {
    width: 90%;
    max-width: 544px;
    margin: 5rem auto -12rem; /* ★上は5rem、下は-12rem（次の要素に被せる） */
    
    background: linear-gradient(to bottom, #ffa64d, #f7962d);
    color: #ffffff;
    text-align: center;
    font-family: "Hiragino Kaku Gothic Std W8", sans-serif;
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: .6em;
    padding: 1.5rem 0;
    
    /* 下向き矢印の形 */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    /* box-shadowはclip-pathを使うと消えるため、filter: drop-shadowを使うのが正解だが今回は割愛 */
    
    position: relative; /* z-index用 */
    z-index: 10; /* 次のセクションより前に出す */
}

.arrow {
    display: block;
    margin: 0 auto; /* 中央寄せ */
    width: 40px; /* サイズ調整 */
    margin-top: 0.5rem;
}



.contact {
    max-width: 1440px;
    /* height: 476px; */
    background-color: #AFFE94;
    padding-top: 10px;
    
}
.contact_top {
    display: flex;
    font-family: 'Hiragino Mincho Pro W6', sans-serif;
    align-items: center;
    letter-spacing: 1.8em;
}
.contact p {
    font-size: 2.8rem;
    text-align: center;
    width: 145px;
    margin-left: 134px;
    color: #353333;
    border-radius: 80%;
    background-color: #E3FFCF;
}
.contact_h3 {
    font-size: 4.2rem;
    padding: 58px 0 10px;
}
.form  {
    display: flex;
    font-family: "Hiragino Kaku Gothic Std W8", sans-serif;
    height: 122px;
    margin: 20px 0 44px;
}   
.form a {
    text-decoration: none;
    margin: 0 auto;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
}
.mail {
    display: block;
    background-color: #F6CC58;
    border: 1.8px solid #ffffff;
    color: #353333;
    font-size: 3.4rem;
    width: 604px;
    padding-top: 31px;
    text-align: center;
    border-radius: 80px;
}
.line {
    display: block;
    background-color: #21E721;
    border: 1.8px solid #ffffff;
    color: #353333;
    font-size: 4.1rem;
    width: 604px;
    padding-top: 30px;
    text-align: center;
    border-radius: 80px;
}
.contact img {
    display: block;
    max-width: 1440px;
    width: 100%;
}

.program {
    position: relative;
    max-width: 1440px;
    height: 100%; 
}
.program img {
    max-width: 1440px;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.program_text {
    position: absolute;
    top: 37%;
    left: 24.5%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    border: solid 7px #D9D9D9;
    width: 464px;
    height: 439px;
    background-color: #F1FFC7;
}
.program_p_top {
    font-size: 3.6rem;
    color: #353333;
    text-decoration:underline;
    padding-top: 45px;
}
.program_text h3 {
    font-size: 2.8rem;
    margin-top: 15px;
    color: #353333;
}
.program_text h3 span {
    font-size: 7.2rem;
    color: #FA8500;
    background-color: #FBFFEE;
    border-radius: 10%;
    padding: 10px 0;
}
.program_p_bottom {
    font-size: 3.2rem;
    color: #353333;
    text-align: start;  
    margin: 35px 0 0 64px;
}

/* --- ガイドセクション（完全再現版） --- */
.guide {
    background-image: url("imgs/back_img.png");
    background-size: cover;
    background-position: center;
    width: 100%;
    
    /* 上下の余白 */
    padding-top: 10rem;
    padding-bottom: 30rem; /* ★重要：次のセクションが被らないよう巨大な余白を確保 */
    
    overflow: visible; /* 装飾のはみ出しを許可 */
}

.guide__inner {
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12rem; /* 上下のブロック間隔 */
}

/* --- ブロック共通設定 --- */
.guide__item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* --- テキストエリア（ピンクのカプセル） --- */
.guide__content {
    background-color: #FFF7F7; /* 薄いピンク */
    width: 65%; /* 横長にする */
    
    /* 余白設定：画像が重なる側を広く空ける */
    padding: 6rem 12rem 6rem 6rem; 
    
    border-radius: 80px; /* カプセルの角丸 */
    
    position: relative;
    z-index: 1; /* ★重要：画像より「奥（後ろ）」にする */
    
    /* 画像側に食い込ませるネガティブマージン */
    margin-right: -80px;
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 2つ目のテキスト（左側余白を増やす） */
.guide__item--reverse .guide__content {
    padding: 6rem 6rem 6rem 12rem; /* 左を広く */
    margin-right: 0;
    margin-left: 15px; /* 左側に食い込ませる */
}

.guide__title {
    font-family: 'Hiragino Mincho Pro W6', serif;
    font-size: 3.6rem;
    color: #353333;
    margin-bottom: 2rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.guide__line {
    width: 100%;
    height: 2px;
    background-color: #353333;
    margin-bottom: 2rem;
}

.guide__text {
    font-family: 'Hiragino Mincho Pro W6', serif;
    font-size: 2.4rem;
    color: #353333;
    line-height: 2;
    font-weight: 600;
}

/* --- 画像エリア（円形） --- */
.guide__visual {
    width: 400px; /* 大きめの固定サイズで正円を維持 */
    height: 400px;
    flex-shrink: 0; /* 縮まないようにする */
    
    position: relative;
    z-index: 10; /* ★重要：テキストより「手前（前）」にする */
}

/* 画像本体 */
.guide__visual img {
    width: 120%;
    height: 90%;
    object-fit: cover;
    border-radius: 40%; 
    position: relative;
    z-index: 2;
    box-shadow: 43.2px 75.6px 7px #F1FFC7;
}

/* --- 画像後ろの黄色い装飾（ビーンズ） --- */
.guide__visual::before {
    content: "";
    position: absolute;
    /* 右下に大きくずらす */
    top: -45px;
    right: -65px; 
    width: 120%;
    height: 100%;
    border-radius: 50%;
    z-index: -1; /* 画像の真後ろ */
   
}

/* 2つ目の装飾は左下にずらす */
.guide__item--reverse .guide__visual::before {
    right: auto;
    left: 30px;
}



/* --- 料金セクション --- */
.plan-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1440px;
    width: 100%; /* スマホで横にはみ出さないように */
    
    background: radial-gradient(50% 50% at 50% 50%, #F5F5F5 0%, #F1FFD9 100%);
    border: 4px solid #099259;
    border-radius: 20px; /* 角を少し丸く */
    
    /* 中身の余白 */
    padding: 8rem 0 5rem;
}

/* --- タイトル（料金） --- */
.plan-top {
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    font-size: 8rem; /* 少しサイズ調整 */
    color: #353333;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1;
    
    /* ★プロの技：absoluteを使わずに上に突き出させる */
    margin-top: -13rem; /* 枠の上に引っ張り上げる */
    margin-bottom: 1rem;
    
    position: relative; /* 重なり順のため */
    z-index: 10;
}

/* --- サブタイトル（PRICE） --- */
.plan-top_sub {
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    font-size: 4rem;
    color: #353333;
    text-align: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* 線との距離 */
    
    margin-bottom: 5rem;
}

/* 横線 */
.plan-top_sub:before, .plan-top_sub:after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #353333;
    border: none; /* 元の border-top 指定をリセット */
}
.plan {
    display: flex;
    overflow: hidden;
    width: 88%;
    margin: 37px 0 0 100px;
  }

.plan-title {
    background: #353333;
    color: #ffffff;
    height: 165px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Hiragino Kaku Gothic Pro W3', sans-serif;
    font-size: 4.32rem;
    text-align: center;
    border: solid;
    border-radius: 30px;
    margin-right: 48px;
  }

.plan-details {
    padding: 20px;
    flex-grow: 1;
    border: solid 1px #ffffff;
    border-radius: 36px;
    background-color: #ffffff;
  }

.price {
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    font-size: 3.4rem;
    margin-left: 48px;
    margin-bottom: 10px;
  }
.price_trial {
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    font-size: 3.4rem;
    margin-left: 10px;
    margin-bottom: 10px;
}  
.plan small {
    font-size: 2.3rem;
    color: #000000;
    margin-left: -15px;
}
.plan_arrow {
    font-size: 4.7rem;
}
.discount {
    font-weight: bold;
    background-color: #FC9921;
    border: solid 1px #FC9921;
    border-radius: 10px;
    color: #353333;
    width: 163px;
    height: 57px;
    display: inline-block;
    text-align: center;
    font-size: 3.6rem;
  }
.discount_small {
    font-weight: bold;
    background-color: #FC9921;
    border: solid 1px #FC9921;
    border-radius: 10px;
    color: #353333;
    width: 190px;
    height: 48px;
    display: inline-block;
    text-align: center;
    padding-top: 8px;
    font-size: 2.5rem;
}
.new-price {
    color: #FF1C1C;
    font-size: 4.3rem;
}

  ul {
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    list-style: none;
    display: flex;
    padding: 0 50px;
}
  li {
    position: relative;
    font-size: 2.8rem;
    margin: 0 auto;
}
  li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0.5em;
    left: -1em;
    width: 20px;
    height: 10px;
    border-left: 5px solid #353333;
    border-bottom: 5px solid #353333;
    transform: rotate(-45deg);
}

.note {
    font-size: 2.8rem;
    font-family: 'Hiragino Kaku Gothic Pro W6', sans-serif;
    text-align: center;
    color: #353333;
    margin-top: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.note_price {
    font-size: 2.8rem;
    margin-top: 15px;

}
.note_price::after {
    content: '';
    display: block;
    position: absolute;
    top: 2.4em;
    left: 5.4em;
    width: 20px;
    height: 10px;
    border-left: 5px solid #353333;
    border-bottom: 5px solid #353333;
    transform: rotate(-45deg);
}
.price_pay {
    display: block; 
    background-color: #353333;
    border: 1.8px solid #ffffff;
    color: #ffffff;
    width: 85%;
    height: 81px;
    padding-top: 31px;
    margin: 127px 83px 26px 128px;
    border-radius: 50px;
}
.price_pay p {
    font-family: 'Hiragino Kaku Gothic Pro W3', sans-serif;
    font-size: 3.6rem;
    text-align: center;
}
.cashless_pay {
    width: 86%;
    margin: 0 83px 219px 128px;
}

.reservation {
    background-color: #AFFE94;
    max-width: 1440px;
    height: 324px;
}
.reservation p {
    font-family: 'Hiragino Mincho Pro W6', sans-serif;
    letter-spacing: 0.08em;
    font-size: 4.2rem;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 29px;
    color: #000000;
}
.reservation a {
    display: block;
    text-decoration: none;
    margin: 0 auto;
    width: 1263px;
    height: 136px;
    background-color: #F6CC58;
    border: 3.8px solid #ffffff;
    color: #353333;
    padding-top: 14px;
    text-align: center;
    border-radius: 80px;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #ffffff;
   
}
.reservation_trial {
    font-family: 'Hiragino Kaku Gothic StdN W8', sans-serif;
    font-size: 7.2rem;
    letter-spacing: 0.3em;
}

a:hover {
    letter-spacing: 0.05em;
}
.reservation_trial:hover {
    letter-spacing: 0.5em;
}


@media screen and (max-width: 768px) {
    .header {
        padding-bottom: 0;
    }

    .mv {
        flex-direction: column-reverse; /* ★スマホなら縦並び（画像を上にしてもOK） */
        text-align: center;
    }
    .mv__model-img {
        width: 90%;
        margin-right: -5%;
        margin-top: -33%;
    }
    
    .mv__content, .mv__visual {
        width: 100%; /* 幅いっぱいに */
    }

    .mv__visual {
        margin-bottom: 3rem;
    }

    .mv__main-copy {
        font-size: 6rem; /* スマホ用に文字サイズ縮小 */
    }
    
    .mv__main-copy .en {
        font-size: 5rem;
    }
    .concept {
        padding-top: 25vw;
    }

    .concept__inner {
        flex-direction: column; /* 縦並び */
    }

    .concept__content {
        width: 100%;
        text-align: center; /* 中央揃え */
        margin-bottom: 4rem;
    }

    .concept__visual {
        width: 100%;
        justify-content: center;
    }
   
    .problem_img {
        width: 45%; /* スマホでは2列っぽく */
    }
    
    .imgs_container_top, .imgs_container_bottom {
        gap: 1rem;
    }

    .banner {
        font-size: 2rem;
        margin-bottom: -10rem; /* スマホでの食い込み調整 */
    }
    
    .contact p {
        width: 10rem;
        font-size: 2.4rem;
        margin-left: 5rem;
    }
    .contact_h3 {
        font-size: 2.4rem;
        padding: 30px 0 10px;
    }
    .form {
        flex-direction: column;
        height: auto;
        gap: 2rem;
    }
    .mail, .line {
        width: 80%;
        font-size: 2.4rem;
        padding: 1.2rem;
    }

    .program_p_top {
        font-size: 2.6rem;
        padding-top: 20px;
    }
    .program_text  {
        width: 40%;
        height: auto;
        left: 25%;
        top: 50%;
    }
    .program_text h3 span {
        font-size: 3rem;
        margin: 0 auto;
    }
    .program_p_bottom {
        font-size: 2.4rem;
        margin: 20px 20px;
    }



    .guide__inner {
        gap: 8rem; /* ブロック間隔を縮小 */
        width: 80%;
    }
    .guide {
        padding-bottom: 10rem;
    }
    
    .guide__item {
        flex-direction: column-reverse; /* 画像上・テキスト下 */
        margin-bottom: 5rem;
    }
    
    .guide__item--reverse {
        flex-direction: column; 
    }

    .guide__content {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-top: -60px; /* 縦方向に食い込ませる */
        padding: 8rem 4rem 4rem; /* 上の余白を増やして画像と被らないように */
        text-align: center;
        border-radius: 40px;
    }
    
    .guide__item--reverse .guide__content {
        padding: 8rem 4rem 4rem;
        margin-left: 0;
    }

    .guide__visual {
        width: 80%;
        height: auto;
    }
    .guide__visual img {
        width: 100%;
        box-shadow: 0px 10px 10px #F1FFC7;
    }
    
    /* 線も中央寄せ */
    .guide__line {
        margin: 2rem auto;
        width: 80%;
    }

    /* --- スマホ対応：料金セクション --- */
    
    /* 1. コンテナ全体の余白調整 */
    .plan-container {
        width: 100%; 
        margin: 0 auto; 
        padding: 6rem 0 3rem; /* 中の余白も調整 */
        border-width: 2px; /* 枠線を少し細く */
    }

    /* 2. タイトルのサイズダウン */
    .plan-top {
        font-size: 4.8rem; /* 8remから縮小 */
        margin-top: -9rem; /* 突き出し位置の調整 */
    }

    .plan-top_sub {
        font-size: 2.4rem; /* 4remから縮小 */
        margin-bottom: 3rem;
        gap: 1rem;
    }
    
    /* 線の長さ調整 */
    .plan-top_sub:before, .plan-top_sub:after {
        width: 30px;
    }

    /* 3. プランリストの縦積み化 */
    .plan {
        flex-direction: column; /* 縦並びにする */
        gap: 0; /* 隙間をなくして一体化させる */
        
        width: 90%; /* コンテナ内で少し余白を持たせる */
        margin: 0 auto 3rem; /* 下に余白 */
        
        /* 影をつけてカードっぽさを強調 */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-radius: 15px; /* 全体の角丸 */
    }

    /* コース名（黒い部分） */
    .plan-title {
        width: 100%; /* 横幅いっぱい */
        height: auto; 
        padding: 1.5rem;
        
        /* 上半分だけ角丸にする */
        border-radius: 15px 15px 0 0;
        font-size: 2.4rem;
    }

    /* 詳細（白い部分） */
    .plan-details {
        width: 100%;
        padding: 2rem;
        
        /* 下半分だけ角丸にする */
        border-radius: 0 0 15px 15px;
        
        align-items: center; /* 中身を中央寄せ */
        text-align: center; /* テキストも中央寄せ */
    }
    .plan small {
        font-size: 1.2rem;
    }
    .plan_arrow {
        font-size: 2.4rem;
    }

    /* 価格まわりの調整 */
    .price, .price_trial {
        font-size: 3rem; /* 少し小さく */
        flex-direction: column; /* 要素が多い場合は縦に積むのもアリだが、今回はflex-wrapで対応 */
        gap: 0.5rem;
    }

    .new-price {
        font-size: 2.8rem;
    }
    
    .discount, .discount_small {
        font-size: 1.8rem;  
        padding: 0.6rem 1rem;
        width: auto; /* 幅を内容に合わせる */
        height: auto;
    }

    /* リスト（チェックマーク部分） */
    .plan-details ul {
        justify-content: center; /* 中央寄せ */
        gap: 1rem;
    }
    
    .plan-details li {
        font-size: 2rem;
    }

    li::after {
        left: -2em;
    }

    /* 4. 支払い方法エリア */
    .price_pay {
        width: 90%; /* はみ出し防止 */
        height: auto; /* 高さを文字量に合わせる */
        padding: 2rem;
        margin: 4rem auto 2rem; /* 中央配置 */
    }
    
    .price_pay p {
        font-size: 2rem; /* 文字サイズ調整 */
        line-height: 1.4;
    }
    
    .cashless_pay {
        width: 90%; /* 画像をコンテナに収める */
        margin: 0 auto 2rem;
        display: block; /* 中央寄せ用 */
    }

    .note {
        font-size: 2.4rem;
    }
    .note_price::after {
        left: 2.4em;
    }  
    
    
    .reservation p {
        font-size: 3.6rem;
    }
    .reservation a  {
        width: 90%; /* はみ出し防止 */
        height: auto;
        padding: 1rem;
        border: 1.8px solid #ffffff;
        -webkit-text-stroke-width: 2px;
    }
}

@media screen and (max-width: 425px) {
     
    .mv__model-img {
        width: 85%;
        margin-right: 0%;
        margin-top: -59%;
    }
    .mv__sub-copy {
    font-size: 2.4rem;
    }
    .mv__main-copy {
        font-size: 4.8rem;
    }
    .mv__main-copy .small {
    font-size: 3rem;
    }
    .mv__main-copy .en {
        font-size: 4rem;
    }
    .mv__manual img {
        width: 75%;
    }

    .concept {
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    }
    .concept__title {
        font-size: 3rem;
    }
    .concept__subtitle {
        font-size: 2rem;
    }
    .concept__text {
        font-size: 1.4rem;  
    }
    .concept__visual img {
        width: 85%;
        box-shadow: 10px 10px 0px #C7FFCA;
    }

    .problem_h2 {
        font-size: 2rem;
    }
    .problem_h2_center {
        font-size: 3rem;  
        padding: 0 0.5rem;
    }
    .underline {
        width: 70%;
        margin: 1rem auto 4rem;
    }
    .arrow {
        width: 25px;
        margin-top: 0.3rem;
    }


    .contact_top {
        letter-spacing: 1em;
    }
    .contact p {
        width: 6rem;
        font-size: 1.8rem;
        margin-left: 1rem;
    }
    .contact_h3 {
        font-size: 1.5rem;
        padding: 10px 0 10px;
    }


    .program_text {
        width: 40%;
        height: 65%;
        left: 25%;
        top: 45%;
    }
    .program_p_top {
        font-size: 1.2rem;
        padding-top: 10px;
    }
    .program_text h3 span {
        font-size: 2.4rem;  
        margin: 0 auto; 
    }
    .program_text h3 {
        font-size: 1.8rem;
    }
    .program_p_bottom {
        font-size: 1.2rem;
        margin: 15px;
    }

    .guide {
        padding: 6rem 0;
    }
    .guide__inner {
        gap: 6rem;
        width: 70%;
    }
    .guide__title {
        font-size: 1.8rem;
    }
    .guide__text {
        font-size: 1.2rem;
    }
    .guide__item {
        margin-bottom: 2rem;
    }

    .plan-top {
        font-size: 4.2rem;
    }
    .plan-top_sub {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .plan {
        width: 95%;
        margin: 0 auto 2rem;
    }
    .plan-title {
        font-size: 2rem;
    }
    .plan-details {
        padding: 1.5rem;
    }
    .plan small {
        font-size: 1rem;
        margin-left: -8px;
    }
    .plan_arrow {
        font-size: 1.8rem;
    }
    .price {
        font-size: 1.8rem;
        margin-left: -10px;
    }
    .price_trial {
        font-size: 1.2rem;
        margin-left: 0;
    }
    .new-price {
        font-size: 2rem;
    }
    .discount, .discount_small {
        font-size: 1.2rem;  
        padding: 0.4rem;
    }  
    .plan-details li {
        font-size: 1.2rem;
    }
    li::after {
        position: absolute;
        top: 0.4em;
        left: -2em;
        width: 10px;
        height: 5px;
        border-left: 3px solid #353333;
        border-bottom: 3px solid #353333;
    }
    .note {
        font-size: 1.5rem;
    }
    .note_price {
        font-size: 1.8rem;
        margin-top: 10px;
    }
    .note_price::after {
        top: 2.3em;
        left: 1.6em;
        width: 12px;
        height: 5px;
        border-left: 3px solid #353333;
        border-bottom: 3px solid #353333;
    }  
    .price_pay {
        width: 85%;
        margin: 3rem auto 1rem;
    }
    .price_pay p {
        font-size: 1.5rem;
    }
    .cashless_pay {
        width: 95%;
        margin: 0 auto 1rem;
    }

    .reservation {
        height: auto;
        padding-bottom: 3rem;
    }
    .reservation p {
        font-size: 2.4rem;
    }
    .reservation_trial {
        font-size: 4.2rem;
    }
    .reservation a  {
        width: 90%;
        padding: 0.8rem;
        border: 1.2px solid #ffffff;
        -webkit-text-stroke-width: 1.2px;
    }
}