/* css/style.css */

/* 変数定義（ここを変えると全体の色が変わります） */
:root {
    /* メインカラー：ヘッダーや見出しのピンク */
    --color-main: #F5AAA7; 
    /* アクセントカラー：CTAボタンの緑 */
    --color-accent: #00a968; 
    /* 背景色：コンテンツエリアの薄いベージュ/ピンク */
    --color-bg-base: #fdf9f2; 
    /* テキストカラー */
    --color-text-main: #333333;
    /* サイト幅 */
    --width-max: 480px;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--color-text-main);
    /* PC閲覧時の画面全体の背景（コンテンツ外） */
    background-color: #eeeeee; 
}

/* ページ全体のラッパー */
.l-page-wrapper {
    max-width: var(--width-max);
    margin: 0 auto; /* 中央寄せ */
    background-color: var(--color-bg-base);
    min-height: 100vh;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* 少し影をつけて浮き上がらせる */
    overflow: hidden; /* 横スクロール防止 */
}

/* =========================================
   ヘッダーバー
   ========================================= */
.p-header-bar {
    background-color: #6d4c41; /* 茶色 */
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 8px 10px;
    font-weight: 500;
}

/* =========================================
   ファーストビュー (FV)
   ========================================= */
.p-fv {
    /* ----------------------------------
       スマホ用 (基本設定)
       ---------------------------------- */
    width: 100%;
    /* スマホ用の縦長画像を指定 */
    background-image: url(../img/fv-bg.png);
    background-size: cover;       /* 画面いっぱいに表示 */
    background-position: center top; /* 上揃え（または bottom など調整） */
    background-repeat: no-repeat;
    
    text-align: center;
    padding-top: 25px;
    padding-bottom: 250px; /* スマホでの余白 */
}

/* ----------------------------------
   PC用 (画面幅 768px以上)
   ---------------------------------- */
@media screen and (min-width: 768px) {
    .p-fv {
        /* PC用の横長画像に切り替え */
        background-image: url(../img/fv-bg-pc.png);
        
        /* PC向けの設定（必要に応じて調整） */
        background-size: cover;       /* PCでも画面いっぱいに */
        background-position: center top; /* 中央揃え */
        
        /* PCでの余白調整（画像が変わるので調整が必要かもしれません） */
        padding-bottom: 250px; 
        
        /* コンテンツ幅の制限（必要であれば） */
        max-width: 100%; 
    }
}

.p-fv__container {
    padding: 0 20px;
}

/* 上部のタグ群 (ベージュ) */
.p-fv__tags-top {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.p-fv__tags-top li {
    background-color: #d7c48c; /* ベージュ */
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

/* 赤いタグ群 */
.p-fv__tags-red {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.c-tag-red {
    background-color: #e60012; /* 赤 */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 4px 15px;
    border-radius: 20px;
}

.c-cross {
    color: #e60012;
    font-size: 20px;
    font-weight: 700;
}

/* メインタイトル */
.p-fv__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

.c-text-red-bg {
    display: inline-block;
    background-color: #e60012;
    color: #ffffff;
    font-size: 20px;
    padding: 2px 8px;
    margin: 0 2px;
    border-radius: 4px;
}

/* サブタイトル */
.p-fv__subtitle {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-main);
    margin-bottom: 30px;
}

.c-text-emphasis {
    color: #e60012;
    font-size: 32px;
    position: relative;
}
/* 強調点の装飾 */
.c-text-emphasis::before,
.c-text-emphasis::after {
    content: '・';
    position: absolute;
    top: -0.6em;
    color: #e60012;
}
.c-text-emphasis::before { left: 0.1em; }
.c-text-emphasis::after { right: 0.1em; }

.c-text-pink-big {
    color: var(--color-main);
    font-size: 36px;
}

.c-text-pink {
    color: var(--color-main);
}

/* 実績バッジ (円形) */
.p-fv__achievements {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    top: 210px; /* 背景の人物画像の下に配置するための調整 */
}

.c-circle-badge {
    width: 100px;
    height: 100px;
    background-color: rgba(244, 143, 177, 0.9); /* ピンク(透過) */
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.c-circle-badge__title {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: -5px;
}

.c-circle-badge__num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.c-circle-badge__num .small { font-size: 14px; }

.c-circle-badge__text {
    font-size: 12px;
    font-weight: 700;
}

.c-circle-badge__note {
    position: absolute;
    bottom: -15px;
    font-size: 9px;
    color: var(--color-text-main);
    width: 120%;
}

/* =========================================
   CTAエリア
   ========================================= */
.p-cta {
    text-align: center;
    padding: 40px 20px;
    background-color: #ffffff;
}

.p-cta__lead {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 20px;
}

.c-text-red {
    color: #e60012;
}

/* ボタン共通スタイル */
.c-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 60px;
    margin: 0 auto;
    border-radius: 30px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
}
/* 矢印アイコン */
.c-btn::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-left: 15px;
    margin-top: -2px;
}

/* LINEボタン（緑） */
.c-btn--line {
    background-color: var(--color-accent); /* #00a968 */
}

/* ホットペッパーボタン（青） */
.c-btn--hotpepper {
    background-color: #5c6b8c; /* 青紫色 */
}

/* ボタンの点滅アニメーション */
@keyframes blink-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; } /* 透明度を下げて控えめに点滅 */
}

.c-btn--blink {
    animation: blink-opacity 2.5s infinite ease-in-out;
}

/* =========================================
   お客様のご報告セクション (Voice)
   ========================================= */
.p-voice {
    padding-bottom: 60px;
    background-color: #F6E9E1; /* ベースの薄い色 */
}

/* 見出しエリア（茶色の帯） */
.p-voice__header {
    background-color: #6d4c41; /* 茶色 */
    color: #ffffff;
    text-align: center;
    padding: 20px 10px;
    position: relative;
    margin-bottom: 40px; /* 下の矢印とカードまでの余白 */
}

.p-voice__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

/* 下向きの三角形（吹き出しのしっぽ） */
.p-voice__header::after {
    content: '';
    position: absolute;
    bottom: -15px; /* 帯の下にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px; /* 上辺15px, 左右15px, 下0 */
    border-color: #6d4c41 transparent transparent transparent; /* 茶色以外は透明 */
}

/* コンテンツエリア */
.p-voice__container {
    padding: 0 20px;
}

/* ボイスカード（白い枠） */
.c-voice-card {
    background-color: #ffffff;
    border-radius: 20px; /* 角丸 */
    padding: 15px; /* 内側の余白（写真の周りの白枠） */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* うっすら影 */
    margin-bottom: 30px; /* カード同士の間隔 */
}

/* カード内の画像 */
.c-voice-card img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* 画像自体の角も少し丸める */
    display: block;
}

/* =========================================
   院長紹介（選ばれる理由）セクション
   ========================================= */
.p-doctor {
    background-color: #F9F5F0; /* 指定された背景色（濃いグレー/茶色） */
    color: #594739; /* テキストは基本茶色 */
    padding-bottom: 40px;
}

/* 見出しエリア（ピンクの帯） */
.p-doctor__header {
    background-color: #F5AAA7; /* 指定された背景色（ピンク） */
    color: #ffffff;
    text-align: center;
    padding: 20px 10px;
    position: relative;
    margin-bottom: 40px; /* 下のバッジまでの余白 */
}

.p-doctor__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

/* 下向きの三角形 */
.p-doctor__header::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #F5AAA7 transparent transparent transparent; /* ピンク以外は透明 */
}

/* コンテンツエリア */
.p-doctor__container {
    padding: 0 20px;
    text-align: center;
}

/* 実績バッジエリア */
.p-doctor__badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* バッジの赤色バージョン（FVのスタイルを上書き） */
.c-circle-badge--red {
    background-color: #e60012; /* 赤 */
    width: 110px; /* 少し大きめに調整 */
    height: 110px;
}
/* 赤バッジ内の注釈テキスト色調整 */
.c-circle-badge--red .c-circle-badge__note {
    color: rgba(255, 255, 255, 0.8);
}

/* テキストエリア */
.p-doctor__text-area {
    margin-bottom: 30px;
}

.p-doctor__lead {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.p-doctor__sublead {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
}

.p-doctor__headline {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    color: #E83830;
}

/* テキスト強調用のクラス */
.c-text-emphasis-red {
    color: #F5AAA7; /* 見出しと同じピンクで強調 */
    font-size: 1.2em;
}

.c-text-red-big {
    color: #F5AAA7; /* 見出しと同じピンク */
    font-size: 28px;
    display: block;
    margin-top: 5px;
}

/* 院長プロフィール */
.p-doctor__profile img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.p-doctor__name {
    font-size: 16px;
    font-weight: 700;
}

/* =========================================
   3つの体質改善メソッド セクション
   ========================================= */
.p-method {
    background-color: #F9F5F0; /* 指定された背景色（薄いベージュ） */
    padding-bottom: 60px;
    color: var(--color-text-main);
}

/* 見出しエリア（前回のスタイルを流用しつつ背景色を上書き） */
.p-method__header {
    background-color: #F5AAA7; /* 指定された背景色（ピンク） */
}
/* 三角形の色も合わせる */
.p-method__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

/* コンテンツエリア */
.p-method__container {
    padding: 0 20px;
    text-align: center;
}

/* 各メソッドの塊 */
.p-method__item {
    margin-bottom: 60px; /* メソッド間の余白 */
}

/* 画像と番号のエリア */
.p-method__img-box {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

/* 番号の円 */
.c-number-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: #F5AAA7; /* ピンク */
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* メソッドのタイトル（テキストで縁取り風を再現） */
.p-method__headline {
    font-size: 28px;
    font-weight: 700;
    color: #594739;
    margin-bottom: 15px;
}

/* サブタイトルバー（茶色の帯） */
.c-subtitle-bar {
    display: inline-block;
    background-color: #6d4c41; /* 茶色 */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 25px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* 本文テキスト */
.p-method__text {
    text-align: left;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* 本文内の強調 */
.c-text-strong {
    font-weight: 700;
    color: #333;
}

/* データ表示エリア */
.p-method__data-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}
.p-method__data-num {
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    font-family: sans-serif; /* 数字はゴシック体で強調 */
}
.p-method__data-num .unit {
    font-size: 24px;
    margin-left: 5px;
}
.p-method__data-note {
    font-size: 10px;
    color: #888;
    margin-top: 10px;
    text-align: left;
}

/* 赤い下線テキスト */
.c-text-underline-red {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 3px solid #e60012;
    padding-bottom: 2px;
}
.u-mt-20 { margin-top: 20px; }

/* ====================
   グラフエリアのスタイル
   ==================== */
.p-method__graph-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}
.p-method__graph-area img {
    margin-bottom: 20px;
}

/* 赤い帯の強調テキスト */
.c-red-band {
    display: inline-block;
    background-color: #e60012;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 15px;
    border-radius: 15px;
    margin-bottom: 10px;
}
.p-method__data-text {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}
.c-text-red-bold {
    color: #e60012;
    font-size: 28px;
}
.p-method__data-num-big {
    color: #e60012;
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 25px;
}
.p-method__data-num-big .unit {
    font-size: 20px;
}

/* =========================================
   院長メッセージ セクション
   ========================================= */
.p-message {
    background-color: #FFFFFF; /* 指定された背景色（白） */
    padding-bottom: 60px;
    padding-top: 40px;
    color: var(--color-text-main);
}

/* 見出しエリア */
.p-message__header {
    text-align: center;
    margin-bottom: 30px;
}

/* 見出しタイトル */
.p-message__title {
    color: #594739; /* 指定色 */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.1em;
    /* 白抜き装飾はせず、シンプルに表示 */
}

.p-message__container {
    padding: 0 20px;
    text-align: center;
}

/* 院長画像 */
.p-message__image img {
    width: 100%;
    max-width: 400px; /* PCで見すぎないように制限 */
    height: auto;
    margin: 0 auto 15px;
    border-radius: 4px; /* 角を少しだけ丸める */
}

/* 名前 */
.p-message__name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* キャッチコピー */
.p-message__catch {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 赤文字クラス */
.c-text-red {
    color: #e60012;
}

/* 赤文字＋波線装飾クラス */
.c-text-red-wavy {
    color: #e60012;
    text-decoration: underline wavy #e60012; /* 波線の下線 */
    text-underline-offset: 4px; /* 下線と文字の距離 */
    font-size: 22px; /* 少し大きく */
}

/* 本文エリア */
.p-message__body {
    text-align: left; /* 本文は左揃え */
    font-size: 15px;
    line-height: 2.0; /* 読みやすく行間を広めに */
}

.p-message__body p {
    margin-bottom: 25px;
}

/* 蛍光ペン風マーカー（黄色） */
.c-marker {
    background: linear-gradient(transparent 60%, #ffffbc 60%);
    font-weight: 700;
    padding-bottom: 2px;
}

/* =========================================
   店内ご紹介セクション (Swiper)
   ========================================= */
.p-salon {
    background-color: #FFFFFF; /* 指定された背景色（白） */
    padding-bottom: 60px;
}

/* 見出しエリア（背景色を上書き） */
.p-salon__header {
    background-color: #F5AAA7; /* 指定された背景色（ピンク） */
    margin-bottom: 40px;
}
/* 三角形の色も合わせる */
.p-salon__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

/* スライダー本体 */
.p-salon__slider {
    padding-bottom: 30px; /* 下の余白 */
}

/* 各スライドのスタイル */
.p-salon__slide {
    text-align: center;
    /* スライドの幅調整（スマホで少し次の画像が見えるように） */
    width: 75%; 
    max-width: 320px;
}

/* スライド内の画像 */
.p-salon__slide img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* 少し角丸に */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影をつける */
    margin-bottom: 15px;
}

/* キャプション */
.p-salon__caption {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.5;
}

/* =========================================
   過去に通っていた方の事例セクション
   ========================================= */
.p-cases {
    background-color: #FFFFFF; /* 背景色：白 */
    padding-bottom: 60px;
}

/* 見出しエリア（ピンク） */
.p-cases__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-cases__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

/* コンテンツエリア */
.p-cases__container {
    padding: 0 20px;
    max-width: 600px; /* 読みやすさのため幅を少し制限 */
    margin: 0 auto;
}

/* 各事例の塊 */
.p-cases__item {
    margin-bottom: 50px;
}

/* 画像 */
.p-cases__image img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像の下の余白はナシ（帯とくっつけるため） */
}

/* 小見出し（年齢・期間） */
.p-cases__sub-title {
    background-color: #F6E9E1; /* 指定色：ベージュピンク */
    color: #594739; /* 文字色は濃い茶色で見やすく */
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 10px;
    margin-bottom: 0; /* 下の文章とくっつける場合は0、離すならmarginを入れる */
}

/* 感想文エリア */
.p-cases__body {
    background-color: #FFF9F9; /* 指定色：極薄いピンク */
    padding: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-main);
    text-align: left;
}

/* 段落間の余白 */
.p-cases__body p {
    margin-bottom: 0; /* brタグで改行しているのでp自体の余白は消す、または調整 */
}

/* =========================================
   ご新規様特別価格 セクション
   ========================================= */
.p-price {
    background-color: #FFFFFF; /* 背景は白 */
    padding-bottom: 60px;
}

/* 見出しエリア（ピンク） */
.p-price__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-price__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

/* コンテンツ幅制限 */
.p-price__container {
    padding: 0 20px;
    max-width: 500px; /* PCで広がりすぎないように */
    margin: 0 auto;
}

/* 料金ボックス共通 */
.p-price__box {
    border-radius: 15px;
    overflow: hidden; /* 角丸からはみ出さないように */
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 軽い影 */
}

/* ボックスの上部（帯） */
.p-price__box-head {
    background-color: #EEE3DD; /* 薄い茶色/ベージュ */
    color: #594739;
    text-align: center;
    font-weight: 700;
    padding: 15px 10px;
    font-size: 18px;
}

/* ボックスの中身 */
.p-price__box-body {
    background-color: #FFFAFA; /* ほんのり赤みがかった白 */
    padding: 30px 10px;
    text-align: center;
    border: 1px solid #EEE3DD;
    border-top: none; /* 上の線は帯があるので消す */
    border-radius: 0 0 15px 15px;
}

/* 「無料」の文字 */
.c-price-text {
    color: #e64a3d; /* 少し濃い赤/朱色 */
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

/* 金額の文字 */
.c-price-num {
    color: #e64a3d;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    font-family: sans-serif; /* 数字は見やすく */
}
.c-price-num .small {
    font-size: 24px;
    font-weight: 700;
    margin-left: 5px;
}

/* =========================================
   ラストCTA セクション
   ========================================= */
.p-last-cta {
    background-color: #F9F5F0; /* 薄いベージュ（メソッド部分と同じ色） */
    padding: 60px 20px;
    text-align: center;
}
/* ※ボタンやテキストのスタイルは既存のクラス(.p-cta__lead, .c-btn)を再利用しています */

/* =========================================
   妊娠に必要な3つの土台 セクション
   ========================================= */
.p-foundation {
    background-color: #FFFFFF; /* 背景色：白 */
    padding-bottom: 60px;
    color: var(--color-text-main);
}

/* 見出しエリア（ピンク） */
.p-foundation__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-foundation__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

/* コンテンツエリア */
.p-foundation__container {
    padding: 0 20px;
    text-align: center;
}

/* 画像 */
.p-foundation__image img {
    width: 100%;
    max-width: 450px; /* PCなどで大きくなりすぎないように */
    height: auto;
    margin: 0 auto 30px;
}

/* テキストエリア */
.p-foundation__text-area {
    font-weight: 700;
}

/* 「つまり…」 */
.p-foundation__lead {
    font-size: 18px;
    margin-bottom: 15px;
}

/* メインテキスト */
.p-foundation__desc {
    font-size: 24px;
    line-height: 1.8;
}

/* 強調テキスト（ピンク文字＋波線） */
.c-text-pink-wavy {
    color: #F5AAA7; /* ピンク */
    font-size: 32px; /* 更に大きく */
    text-decoration: underline wavy #F5AAA7; /* 波線の下線 */
    text-underline-offset: 6px; /* 文字と線の距離 */
    display: inline-block; /* 波線を綺麗に出すため */
    margin: 5px 0;
}

/* =========================================
   問題提起（データ編） #FFF9F9
   ========================================= */
.p-problem-data {
    background-color: #FFF9F9; /* 薄いピンク */
    padding-top: 50px;
    padding-bottom: 40px;
    color: #594739; /* 指定の茶色 */
    text-align: center;
}

.p-problem__container {
    padding: 0 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* 導入エリア */
.p-problem__intro {
    position: relative;
    margin-bottom: 40px;
}

.p-problem__intro-text {
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 10px;
}

.c-text-big-brown {
    font-size: 30px;
    color: #594739;
}

.c-text-outline-gray {
    font-size: 28px;
    color: #ffffff;
    /* 文字の縁取り（影で表現） */
    text-shadow: 
        1px 1px 0 #999, -1px -1px 0 #999, 
        -1px 1px 0 #999, 1px -1px 0 #999;
}

.p-problem__intro-img {
    width: 100px;
    margin: 0 auto;
    display: block;
}

/* グラフエリア共通 */
.p-problem__graph-box {
    margin-bottom: 40px;
}

.p-problem__graph-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.p-problem__graph-img-wrapper {
    position: relative; /* バッジを絶対配置するための基準 */
    display: inline-block;
}
.p-problem__graph-img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* グラフ上の赤い丸バッジ */
.c-badge-circle-red {
    position: absolute; /* 親要素に対して自由配置 */
    width: 90px;
    height: 90px;
    background-color: #e60012;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* 吹き出しのしっぽ */
}

.c-badge-circle-red .big {
    font-size: 16px;
    display: block;
}

/* つなぎのテキスト */
.p-problem__bridge {
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 50px;
}
.c-text-wavy-blue {
    font-size: 26px;
    color: #5c6b8c; /* 青っぽいグレー */
    text-decoration: underline wavy #5c6b8c;
    text-underline-offset: 5px;
}

/* 誤解の解消・医師エリア */
.p-problem__misconception {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
}

.p-problem__doctor-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.p-problem__doctor-text {
    text-align: left;
    font-size: 16px;
}
.c-text-red-line {
    color: #e60012;
    font-size: 37px;
    border-bottom: 3px solid #e60012;
}

.p-problem__doctor-img {
    width: 120px;
    height: auto;
}

/* =========================================
   問題提起（理由編） #FFFFFF
   ========================================= */
.p-problem-reason {
    background-color: #FFFFFF; /* 白 */
    padding-top: 40px;
    padding-bottom: 60px;
    color: #594739;
    text-align: center;
}

/* 問いかけ */
.p-problem__question {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 50px;
}
.c-text-outline-white {
    font-size: 26px;
    color: #ffffff;
    /* 白抜き文字（影で表現） */
    text-shadow: 
        1px 1px 0 #ccc, -1px -1px 0 #ccc, 
        -1px 1px 0 #ccc, 1px -1px 0 #ccc;
}

/* 答えエリア */
.p-problem__answer {
    margin-bottom: 30px;
}
.p-problem__answer-lead {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}
.p-problem__answer-main {
    font-size: 38px;
    color: #e64a3d; /* 朱色 */
    font-weight: 700;
    line-height: 1.3;
}
.p-problem__answer-main .small { font-size: 20px; }
.p-problem__answer-main .normal { 
    font-size: 20px; 
    color: #594739;
    display: block;
    margin-top: 5px;
}

/* 解説テキスト */
.p-problem__desc {
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    background-color: #FFF9F9; /* 読みやすいように薄い背景を敷くか、白のままにするか。今回は白背景セクションなので白のまま */
    padding: 10px;
}
.p-problem__desc p {
    margin-bottom: 20px;
}

.c-marker-orange {
    background: linear-gradient(transparent 60%, #ffdecb 60%); /* オレンジマーカー */
    font-weight: 700;
}

/* =========================================
   体質改善の必要性（結論）セクション
   ========================================= */
.p-necessity {
    background-color: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #594739; /* 濃い茶色 */
    text-align: center;
}

.p-necessity__container {
    padding: 0 20px;
}

/* 導入テキスト */
.p-necessity__intro {
    font-size: 15px;
    line-height: 2.0;
    font-weight: 700;
    margin-bottom: 30px;
}
.u-mb-60 { margin-bottom: 60px; }

/* 赤文字＋赤波線 */
.c-text-red-wavy-big {
    color: #e60012;
    font-size: 22px;
    text-decoration: underline wavy #e60012;
    text-underline-offset: 5px;
    font-weight: 700;
}

/* メインメッセージ：体質改善 */
.p-necessity__big-message {
    margin-bottom: 60px;
}
.p-necessity__sub {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}
.p-necessity__main-title {
    font-size: 56px; /* かなり大きく */
    color: #ffbc66; /* オレンジ色 */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin: 5px 0;
}

/* キャッチエリア */
.p-necessity__catch {
    margin-bottom: 60px;
}
.p-necessity__catch-sub {
    font-size: 24px;
    font-weight: 700;
    color: #594739;
    margin-bottom: 5px;
}
.p-necessity__catch-main {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #594739;
}
/* ピンクの巨大文字 */
.c-text-pink-huge {
    color: #F5AAA7; /* ピンク */
    font-size: 48px;
    margin: 0 5px;
}
.p-necessity__catch-main .small {
    font-size: 24px;
    color: #594739;
}

/* 白抜き文字（妊娠しやすい体へ） */
.p-necessity__catch-outline {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff; /* 文字色は白 */
    /* 茶色の縁取りを影で表現 */
    text-shadow: 
        1px 1px 0 #594739, -1px -1px 0 #594739, 
        -1px 1px 0 #594739, 1px -1px 0 #594739,
        2px 2px 0 #594739; /* 少し太く見せる */
    letter-spacing: 0.1em;
}

/* クロージングエリア */
.p-necessity__closing {
    margin-bottom: 20px;
}
.p-necessity__closing-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #594739;
}
/* 茶色の波線下線 */
.c-text-underline-wavy {
    text-decoration: underline wavy #594739;
    text-underline-offset: 6px;
}

/* 院名ブランドボックス */
.p-necessity__brand {
    display: inline-block;
    background-color: #F5AAA7; /* ピンク背景 */
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.p-necessity__closing-last {
    font-size: 28px;
    font-weight: 700;
    color: #594739;
}

/* =========================================
   よくある質問 セクション (FAQ)
   ========================================= */
.p-faq {
    background-color: #FFFFFF;
    padding-bottom: 60px;
}

/* 見出しエリア（ピンク） */
.p-faq__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-faq__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

.p-faq__container {
    padding: 0 20px;
    max-width: 640px;
    margin: 0 auto;
}

/* 各質問アイテム */
.p-faq__item {
    border-bottom: 1px solid #eeeeee;
}

/* 質問ボタン（トリガー） */
.p-faq__question {
    width: 100%;
    background: #fff;
    padding: 20px 40px 20px 0; /* 右paddingはアイコン分 */
    text-align: left;
    display: flex;
    align-items: flex-start; /* Qマークとテキストの上揃え */
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

/* Qマーク */
.c-faq-q {
    font-size: 20px;
    font-weight: 700;
    margin-right: 15px;
    line-height: 1.4;
    font-family: sans-serif; /* シンプルなフォント */
}

/* 質問テキスト */
.c-faq-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text-main);
}

/* プラス（＋）アイコン */
.c-faq-icon {
    position: absolute;
    right: 5px;
    top: 25px; /* 位置微調整 */
    width: 16px;
    height: 16px;
}
/* 横線 */
.c-faq-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
/* 縦線 */
.c-faq-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #333;
    transform: translateX(-50%);
    transition: transform 0.3s;
}

/* 開いた状態（クラスが付与されたとき） */
.p-faq__question.is-open .c-faq-icon::before {
    /* 横線はそのまま（回転させてもいいが、今回は縦線を消すことでマイナスにする手法） */
}
.p-faq__question.is-open .c-faq-icon::after {
    /* 縦線を90度回転させて横線と重ねる（あるいは透明にする） */
    transform: translateX(-50%) rotate(90deg); 
}

/* 回答エリア（初期状態は閉じる） */
.p-faq__answer {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
}

.p-faq__answer-inner {
    padding: 10px 0 30px 40px; /* Qの下あたりから文章開始 */
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* =========================================
   アクセス セクション
   ========================================= */
.p-access {
    background-color: #FFFFFF;
    padding-bottom: 60px;
}

/* 見出し（ピンク） */
.p-access__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-access__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

.p-access__container {
    padding: 0 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Google Map (レスポンシブ対応) */
.p-access__map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%; /* アスペクト比 4:3 */
    margin-bottom: 30px;
}

.p-access__map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 角丸 */
}

/* 住所・営業情報エリア */
.p-access__info {
    color: var(--color-text-main);
    text-align: left;
}

/* 住所 */
.p-access__address {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 営業時間などのリスト */
.p-access__data {
    font-size: 16px;
    line-height: 1.8;
}

.p-access__row {
    margin-bottom: 20px;
}

.p-access__row dt {
    font-weight: 700;
    display: block; /* スマホでは改行させる */
    margin-bottom: 5px;
}

.p-access__row dd {
    margin-left: 0;
    padding-left: 1em; /* 少し字下げ */
}

/* PCサイズでのレイアウト調整（横並びにする場合） */
@media screen and (min-width: 480px) {
    .p-access__row {
        display: flex;
        align-items: flex-start;
    }
    .p-access__row dt {
        width: 110px; /* ラベルの幅固定 */
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .p-access__row dd {
        padding-left: 0;
    }
}

/* =========================================
   最後に（メッセージ）セクション
   ========================================= */
.p-last-message {
    background-color: #FFFFFF;
    padding-bottom: 40px;
    color: var(--color-text-main);
    text-align: center;
}

/* 見出し（ピンク） */
.p-last-message__header {
    background-color: #F5AAA7;
    margin-bottom: 40px;
}
.p-last-message__header::after {
    border-color: #F5AAA7 transparent transparent transparent;
}

.p-last-message__container {
    padding: 0 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* 画像 */
.p-last-message__image img {
    width: 90%;
    max-width: 400px;
    height: auto;
    margin: 0 auto 30px;
    display: block;
}

/* メッセージ見出しエリア */
.p-last-message__headline-area {
    margin-bottom: 30px;
}

.p-last-message__sub {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.p-last-message__main {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

/* 「体の土台」ピンク背景ボックス */
.c-bg-pink-box {
    display: inline-block;
    background-color: #F5AAA7;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* 本文 */
.p-last-message__body {
    font-size: 15px;
    line-height: 2.0;
    text-align: left; /* 本文は左揃えで読みやすく */
    margin-bottom: 40px;
}
.p-last-message__body p {
    margin-bottom: 20px;
}

/* =========================================
   最終CTAエリア（調整）
   ========================================= */
.p-last-cta--final {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: #FFF9F9; /* 薄いベージュピンク背景 */
}

/* 赤文字強調 */
.c-text-red {
    color: #e60012;
    font-weight: 700;
}

/* =========================================
   フッター
   ========================================= */
.l-footer {
    background-color: #594739; /* 全体のテーマに合わせた濃い茶色 */
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.l-footer__copyright {
    font-size: 12px;
    opacity: 0.8;
}