/* ===================================================== */
/*   トップページ・初めての方へ・当院について・院長紹介・よくある質問・アクセス・お問い合わせ   */
/* ===================================================== */

/* ------------------------------
   トップページ
------------------------------ */
/* ------------------------------
   画像スライドショー
------------------------------ */
.hero-slideshow {
    position: relative;
    min-height: 600px;
    /* ← ここで最小高さ600pxを指定 */
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.slide-content {
    background-repeat: repeat;
    /* 背景画像を繰り返して表示 */
    padding: 20px 40px;
    width: auto;
    max-width: 80%;
    color: var(--primary-color);
    position: absolute;
    left: 40px;
    bottom: 80px;
    text-align: left;
    margin: 0;
    white-space: nowrap;
    z-index: 1;
}

.slide-content h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 42px;
    margin-bottom: 10px;
    display: block;
    color: white;
    text-shadow:
        0 0 2px var(--primary-color-dark),
        0 0 8px var(--primary-color-dark),
        0 0 10px var(--primary-color-dark);
    margin: 0;
}



/* ------------------------------
   各セクション：お知らせ一覧
------------------------------ */
.news {
    background-color: var(--white);
    /* 背景色を設定#fef9f1 */
}

.news-list {
    max-width: 1000px;
    /* 幅を広げる */
    margin: 0 auto 40px;
    /* 下の項目との幅 */
    max-height: 350px;
    /* 高さを少し増やす */
    overflow-y: auto;
    /* 縦方向のスクロールを有効化 */
    padding: 30px;
    /* 内側の余白 */
    padding-right: 40px;
    /* スクロールバー分の余白を調整 */
    border-radius: 20px;
    /* 角を丸くする */
    background-color: var(--section-background-color);
}

.news-item {
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.news-date {
    font-size: 1.1em;
    color: #555;
    margin-right: 15px;
}

.news-category {
    font-size: 1.0em;
    padding: 3px 10px;
    background-color: var(--primary-color-dark);
    color: #fff;
    border-radius: 15px;
    margin-right: 15px;
}

.news-title {
    font-size: 1.2em;
    font-weight: 0;
    color: #7b605c;
    margin: 0;
    margin-bottom: 0px;
    /* 説明文との間隔を追加 */
}

.news-title a {

    text-decoration: none;
    transition: color 0.3s;
}

.news-title a:hover {
    color: var(--primary-color);
}

/* 説明文用のスタイル（新規追加） */
.news-content {
    font-size: 1.0em;
    color: #555;
    line-height: 1.6;
    margin-top: 8px;
}

.news-content p {
    margin: 0 0 0px 0;
}

.news-content p:last-child {
    margin-bottom: 0;
}

/* スクロールバーのスタイリング */
.news-list::-webkit-scrollbar {
    width: 8px;
}

.news-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}

.news-list::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* Firefox向けのスクロールバースタイル */
.news-list {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 #f1f1f1;
}

/* ------------------------------
   各セクション：診療時間
------------------------------ */
.hours {
    padding: 40px 0;
    background-color: var(--section-background-color);
}

.hours-table {
    max-width: 1000px;
    margin: 0 auto 40px;
    /* 下の項目との幅 */
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

.schedule-table thead th {
    background-color: var(--primary-color);
    color: white;
    padding: 25px 20px;
    text-align: center;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.schedule-table thead th:last-child {
    border-right: none;
}

.time-header {
    background-color: var(--primary-color-dark) !important;
    min-width: 180px;
}

.schedule-table tbody td {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
}

.schedule-table tbody td:last-child {
    border-right: none;
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.time-slot {
    background-color: white;
    font-weight: 600;
    color: #333;
    text-align: center !important;
}

.available {
    color: #28a745;
    font-weight: bold;
    font-size: 20px;
}

.closed {
    color: #dc3545;
    font-weight: bold;
    font-size: 20px;
}

.hours-notes {
    padding: 30px;
    background-color: white;
    border-top: 1px solid #e9ecef;
}

.hours-notes p {
    margin: 2px 0;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

.holiday-info {
    margin-top: 20px !important;
    padding-top: 15px;
    border-top: 1px solid #5f82a5;
}

.holiday-info strong {
    color: #555;
    font-weight: 600;
}

/* ------------------------------
   当院の特徴
------------------------------ */
.features {
    padding: 40px 0;
    background: white;

}

/* 特徴リスト - 縦並びに変更 */
.features-list {
    display: flex;
    padding: 0 0px;
    /* 左右の余白 */
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 40px;
    /* 下の項目との幅 */
}

.feature-item {
    display: flex;
    flex-direction: row;
    /* 横方向に変更：画像→説明文 */
    align-items: center;
    background: #fef9f1;
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: fit-content;
}

/* 偶数番目の逆向き設定を削除 */
.feature-item:nth-child(even) {
    flex-direction: row;
    /* 統一 */
}

/* 特徴画像 - 左側に配置 */
.feature-image {
    flex: 0 0 300px;
    /* 固定幅に変更 */
    margin-right: 30px;
    /* 右マージンを追加 */
    order: 1;
    /* 左側に配置 */
}

.feature-image img {
    width: 100%;
    height: 200px;
    /* 高さを少し下げて統一感を出す */
    object-fit: cover;
    border-radius: 15px;
}

/* 特徴コンテンツ - 右側に配置 */
.feature-content {
    flex: 1;
    padding: 0;
    order: 2;
    /* 右側に配置 */
}

/* ポイントバッジ */
.point-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
    position: relative;
}

/* 特徴タイトル */
.feature-title {
    font-size: 1.6rem;
    /* サイズを少し小さく調整 */
    color: var(--first-color);
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    line-height: 1.3;
}

/* 特徴説明 */
.feature-description {
    font-size: 1rem;
    /* サイズを少し小さく調整 */
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ハイライト */
.feature-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.highlight-tag {
    background: var(--primary-color-dark);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ------------------------------
   診療内容
------------------------------ */
.services {
    padding: 40px 0;
    background-color: #fef9f1;
}

.services-grid {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.service-item {
    text-decoration: none;
    /* transition: transform 0.3s ease; */
    pointer-events: none;
}

/* カード風デザインに変更 */
.service-circle {
    background: white;
    border: 2px solid var(--primary-color);
    padding: 20px 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* アイコンは非表示に */
.service-icon {
    display: none;
}

.service-name {
    color: #555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* ホバー効果 */
.service-item:hover .service-circle {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}



/* ここから下はアイコンver */

/*
.services {
    padding: 40px 0;
    background-color: #fef9f1;
}

.services-grid {
    max-width: 1000px;
    margin: 0 auto;
}

.service-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.service-item {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-circle {
    width: 180px;
    height: 180px;
    background: var(--primary-color-dark);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.service-circle:hover {
    transform: scale(1.05);
}

.service-icon {
    margin-bottom: 15px;
}

.service-icon img {
    width: 50px;
    height: 50px;
    filter: brightness(0) invert(1);
}

.service-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 0 10px;
}

*/


/* ------------------------------
   アクセス
------------------------------ */
.access {
    padding: 40px 0;
    background-color: #ffffff;
}

.access-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto 40px;
    /* 下の項目との幅 */
    align-items: start;
}

/* クリニック情報 */
.access-info {
    color: #555;
    display: flex;
    flex-direction: column;
}

.clinic-info {
    background: #fef9f1;
    padding: 40px;
    border-radius: 12px;
}

/* 追加する部分 */
.clinic-logo {
    margin-bottom: 10px;
    text-align: center;
}

.clinic-logo-image {
    height: 80px;
    width: auto;
    max-width: 100%;
}


.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* アイコン */
.info-item i {
    color: var(--primary-color);
    font-size: 20px;
    width: 30px;
    margin-right: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-text {
    flex: 1;
}

.info-text p {
    margin: 0;
    line-height: 1.6;
    color: #555;
    font-size: 16px;
}

.address {}

.phone {

    font-size: 18px;

}

.transport,
.parking {}

/* 地図エリア */
.access-map {
    display: flex;
    flex-direction: column;
}

.map-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.map-note {
    margin-top: 15px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* ===================================================== */
/*   スマホ版レスポンシブデザイン（768px以下）                 */
/* ===================================================== */

/* スマホの画面サイズ（横幅768px以下）の時だけ、この中のデザインを使う */
@media screen and (max-width: 768px) {

    /* ------------------------------
       画像スライドショー
    ------------------------------ */
    /* トップの大きな画像の高さを最低でも400pxにする */
    .hero-slideshow {
        min-height: 400px;
        margin-top: 0;
        /* 上の余白をなくす */
    }

    /* スライドショーの文字を入れる箱の位置と大きさを調整 */
    .slide-content {
        left: 20px;
        /* 左から20pxの位置に配置 */
        bottom: 40px;
        /* 下から40pxの位置に配置 */
        padding: 15px 20px;
        /* 箱の中の余白を設定 */
        max-width: 90%;
        /* 横幅は画面の90%まで */
    }

    /* スライドショーの文字の大きさを20pxにして、改行できるようにする */
    .slide-content h2 {
        font-size: 20px;
        line-height: 1.3;
        /* 行の高さを文字の1.3倍にする */
        white-space: normal;
        /* 文字が長い時は改行する */
    }

    /* 2枚目のスライド画像だけ右寄りのクローバーが見えるように調整 */
    .hero-slideshow .slide:nth-child(2) .slide-img {
        object-position: 60% center;
    }

    /* ------------------------------
       お知らせ
    ------------------------------ */
    /* お知らせセクションの上下の余白を30pxにする */
    .news {
        padding: 30px 0;
    }

    /* お知らせ一覧の箱の設定 */
    .news-list {
        max-height: 300px;
        /* 高さは最大300pxまで */
        padding: 20px 15px;
        /* 箱の中の余白 */
        padding-right: 20px;
        /* 右側の余白（スクロールバーのため） */
        margin-bottom: 30px;
        /* 下の余白 */
    }

    /* それぞれのお知らせの上下の余白を15pxにする */
    .news-item {
        padding: 15px 0;
    }

    /* 日付やカテゴリーを入れる箱を折り返せるようにする */
    .news-meta {
        flex-wrap: wrap;
        /* 横に入りきらない時は下に折り返す */
        gap: 8px;
        /* 要素同士の間隔を8pxにする */
    }

    /* 日付の文字を少し小さくする（元の0.9倍） */
    .news-date {
        font-size: 0.9em;
        margin-right: 10px;
        /* 右側に10pxの余白 */
    }

    /* カテゴリーのタグを小さくする */
    .news-category {
        font-size: 0.85em;
        /* 文字の大きさ */
        padding: 2px 8px;
        /* タグの中の余白 */
        margin-right: 10px;
        /* 右側の余白 */
    }

    /* お知らせのタイトルの設定 */
    .news-title {
        font-size: 1.0em;
        /* 文字の大きさ */
        width: 100%;
        /* 横幅いっぱいに広げる */
        margin-top: 8px;
        /* 上に8pxの余白 */
    }

    /* お知らせの説明文を小さくする */
    .news-content {
        font-size: 0.9em;
        margin-top: 8px;
    }

    /* ------------------------------
       診療時間
    ------------------------------ */
    /* 診療時間の表の外枠 */
    .hours-table {
        margin-bottom: 30px;
        overflow-x: visible;
        /* 横スクロールを無効にする */
    }

    /* 表全体を画面幅に合わせる */
    .schedule-table {
        min-width: auto;
        /* 最小幅600pxの制限を解除 */
        width: 100%;
        /* 画面幅100%に広げる */
        font-size: 12px;
        /* 全体の文字サイズを12pxに */
    }

    /* 表のヘッダー（曜日の行）を小さく */
    .schedule-table thead th {
        padding: 10px 3px;
        /* 上下10px、左右3pxでコンパクトに */
        font-size: 16px;
        /* ヘッダーの文字も12px */
    }

    /* 「診療時間」の列幅を狭く */
    .time-header {
        min-width: 80px;
        /* 120px → 80pxに縮小 */
    }

    /* 表の中身のセルも小さく */
    .schedule-table tbody td {
        padding: 10px 3px;
        /* 上下10px、左右3pxでコンパクトに */
    }

    /* 時間帯の文字を小さく */
    .time-slot {
        font-size: 14px;
        /* 時間の文字を11pxに */
        white-space: nowrap;
        /* 改行させない */
    }

    /* ○と／はやや大きめに（見やすさ重視） */
    .available,
    .closed {
        font-size: 14px;
        /* 診療記号は14pxで見やすく */
    }

    /* 注意書き部分も調整 */
    .hours-notes {
        padding: 15px;
        /* 余白を15pxに */
    }

    .hours-notes p {
        font-size: 11px;
        /* 注意書きは11pxに */
        margin: 3px 0;
        /* 行間を狭く */
        line-height: 1.5;
        /* 読みやすい行間 */
    }


    /* ------------------------------
       当院の特徴
    ------------------------------ */
    /* 特徴セクションの上下の余白 */
    .features {
        padding: 30px 0;
    }

    /* 特徴リストの項目同士の間隔を20pxにする */
    .features-list {
        gap: 20px;
        margin-bottom: 30px;
    }

    /* それぞれの特徴を縦並びにする（画像が上、説明が下） */
    .feature-item {
        flex-direction: column;
        /* 縦方向に並べる */
        padding: 20px;
        /* 箱の中の余白 */
    }

    /* 偶数番目（2番目、4番目など）も同じ縦並びにする */
    .feature-item:nth-child(even) {
        flex-direction: column;
    }

    /* 特徴の画像の設定 */
    .feature-image {
        flex: none;
        /* サイズを固定 */
        width: 100%;
        /* 横幅いっぱいに広げる */
        margin-right: 0;
        /* 右の余白をなくす */
        margin-bottom: 20px;
        /* 下に20pxの余白 */
        order: 1;
        /* 表示順を1番目にする */
    }

    /* 画像の高さを200pxに統一 */
    .feature-image img {
        width: 100%;
        height: 200px;
    }

    /* 特徴の説明文を2番目に表示 */
    .feature-content {
        order: 2;
    }

    /* 特徴のタイトルを小さくする */
    .feature-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    /* 特徴の説明文を小さくする */
    .feature-description {
        font-size: 0.9rem;
        line-height: 1.6;
        /* 行の高さを1.6倍に */
        margin-bottom: 15px;
    }

    /* ハイライトタグ同士の間隔を5pxにする */
    .feature-highlights {
        gap: 5px;
    }

    /* ハイライトタグを小さくする */
    .highlight-tag {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    /* ------------------------------
       診療内容
    ------------------------------ */
    .services {
        padding: 30px 0;
    }

    .services-grid {
        padding: 0 15px;
    }

    .services-grid::before {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .service-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }

    .service-circle {
        padding: 15px 10px;
        min-height: 70px;
    }

    .service-name {
        font-size: 14px;
    }

    /* ------------------------------
       ここから下はアイコンver 診療内容（12個の病気のアイコン）
    ------------------------------ */
    /*
    .services-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;  
        padding: 0 4vw;  
    }
    
    .service-row {
        display: contents;
    }
    
    .service-item {
        width: 46%;  
        display: flex;
        justify-content: center;
    }
    */

    /*
    /* 画面幅に応じて自動でサイズ調整 */
    /* 画面幅の35%か160pxの小さい方 */
    /*
    .service-circle {
        
        width: min(40vw, 160px);  
        height: min(40vw, 160px);
    }
    */



    /* ------------------------------
       アクセス
    ------------------------------ */
    /* アクセスセクションの設定 */
    .access {
        padding: 30px 0;
        padding-bottom: 10px;
        /* 下に100pxの余白（画面下の固定ボタンに隠れないように） */
    }

    /* 地図と情報を縦並びにする */
    .access-content {
        grid-template-columns: 1fr;
        /* 1列にする（縦並び） */
        gap: 30px;
        /* 要素同士の間隔 */
        margin-bottom: 30px;
    }

    /* クリニック情報の箱の余白を調整 */
    .clinic-info {
        padding: 25px 20px;
    }

    /* ロゴを小さくする */
    /* 追加する部分 */
    .clinic-logo {
        margin-bottom: 10px;
        text-align: center;
    }

    .clinic-logo-image {
        height: 60px;
        width: auto;
        max-width: 100%;
    }

    /* 住所や電話番号などの項目の設定 */
    .info-item {
        margin-bottom: 20px;
        padding: 10px 0;
    }

    /* アイコン（地図マークなど）を小さくする */
    .info-item i {
        font-size: 18px;
        width: 25px;
        margin-right: 15px;
    }

    /* 住所などの文字を14pxにする */
    .info-text p {
        font-size: 14px;
    }

    /* 電話番号を16pxにする */
    .phone {
        font-size: 16px;
    }

    /* 地図の高さを300pxにする */
    .map-container {
        height: 400px;
    }

    /* 地図の下の注意書きを小さくする */
    .map-note {
        font-size: 12px;
        margin-top: 10px;
    }

    /* ------------------------------
       フッター用の下部余白
    ------------------------------ */
    /* ページ全体の下に70pxの余白（画面下の固定ボタンのため） */
    body {
        padding-bottom: 70px;
    }

    /* スクロールバーを細くする（5px） */
    .news-list::-webkit-scrollbar {
        width: 5px;
    }

    /* タッチデバイス向けの調整 */
    /* アイコンをタップした時に少し小さくなる効果 */
    .service-item:active {
        transform: scale(0.95);
        /* 95%の大きさになる */
    }

    /* タップした時の青い枠を消す */
    .feature-item {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ------------------------------
  トップページ終了
------------------------------ */
/* ------------------------------
   初めての方へページ専用スタイル
------------------------------ */
/* ヒーローセクション */
.first-visit-hero {
    background: white;
    padding: 60px 0;
    text-align: center;
}

.hero-content {

    margin: 0 auto;
}

.page-main-title {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #7b605c;
    margin-bottom: 20px;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    text-align: left;
    /* ← これを追加 */
}

/* 予約方法セクション */
.booking-methods-section {
    background-color: #fff;
    padding: 60px 0;
}

.booking-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.booking-method-card {
    background: #fef9f1;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.booking-method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.booking-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
}

.phone-icon {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
}

.web-icon {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.method-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #7b605c;
    margin-bottom: 20px;
}

.phone-info {
    margin-top: 15px;
}

.phone-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #4CAF50;
    margin-bottom: 10px;
}

.phone-number i {
    font-size: 1.1rem;
}

.booking-hours {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
}

.web-booking-container {
    margin-top: 15px;
}

.web-booking-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.web-booking-button:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3);
}

.booking-note {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* 受診に必要なものセクション */
.requirements-section {
    background-color: #fef9f1;
    padding: 60px 0;
}

.requirements-list {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.requirement-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.requirement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.requirement-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7b7b, #ff6b6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.requirement-card:nth-child(2) .requirement-icon {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.requirement-card:nth-child(3) .requirement-icon {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.requirement-info {
    flex: 1;
}

.requirement-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #7b605c;
    margin-bottom: 15px;
}

.requirement-description {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 診療の流れセクション */
.flow-section {
    background-color: #fff;
    padding: 60px 0;
}

.flow-timeline {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.flow-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #ff7b7b, #2196F3);
    transform: translateX(-50%);
    z-index: 1;
}

.flow-item {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
}

.flow-item:nth-child(even) {
    flex-direction: row-reverse;
}

.flow-item:nth-child(even) .flow-content {
    text-align: right;
}

.flow-step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7b7b, #ff6b6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 4px 15px rgba(255, 123, 123, 0.3);
}

.flow-content {
    width: 45%;
    background: #fef9f1;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flow-item:nth-child(even) .flow-content {
    margin-left: 0;
    margin-right: 0;
}

.flow-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.flow-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.flow-item:nth-child(even) .flow-icon {
    margin-left: auto;
    margin-right: 0;
}

.flow-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #7b605c;
    margin-bottom: 15px;
}

.flow-description {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.flow-note {
    color: #999;
    font-size: 0.85rem;
    margin-top: 10px;
}

/* 安心メッセージセクション */
.reassurance-section {
    background: linear-gradient(135deg, #fef9f1 0%, #f8f3e8 100%);
    padding: 80px 0;
    text-align: center;
}

.reassurance-content {
    max-width: 800px;
    margin: 0 auto;
}

.reassurance-title {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #7b605c;
    margin-bottom: 25px;
    line-height: 1.4;
}

.reassurance-text {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

.contact-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.phone-contact {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
}

.phone-contact:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.web-contact {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.web-contact:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-main-title {
        font-size: 2rem;
    }

    .page-subtitle {
        font-size: 1rem;
    }

    .booking-methods-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .booking-method-card {
        padding: 30px 20px;
    }

    .requirement-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .flow-timeline::before {
        left: 30px;
    }

    .flow-item {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .flow-item:nth-child(even) .flow-content {
        text-align: left;
    }

    .flow-step-number {
        left: 30px;
        transform: none;
    }

    .flow-content {
        width: calc(100% - 80px);
        margin-left: 80px;
    }

    .flow-item:nth-child(even) .flow-content {
        margin-left: 80px;
        margin-right: 0;
    }

    .flow-icon {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .reassurance-title {
        font-size: 1.6rem;
    }

    .contact-actions {
        flex-direction: column;
        align-items: center;
    }

    .contact-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .first-visit-hero {
        padding: 40px 0;
    }

    .booking-methods-section,
    .requirements-section,
    .flow-section {
        padding: 40px 0;
    }

    .reassurance-section {
        padding: 60px 0;
    }

    .booking-method-card {
        padding: 25px 15px;
    }

    .requirement-card {
        padding: 20px;
    }

    .flow-content {
        padding: 20px;
    }
}

/* ------------------------------
   初めての方へページ専用スタイル終了
------------------------------ */
/* ==========================================================================
   当院について専用ページ
   ========================================================================== */
.about {
    padding: 40px 0;
    background: white;
}

/* 特徴リスト - 縦並びに変更 */
.about__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 40px;
    /* 下の項目との幅 */
}

.about__item {
    display: flex;
    flex-direction: row;
    /* 横方向に変更：画像→説明文 */
    align-items: center;
    background: #fef9f1;
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: fit-content;
}

/* 偶数番目の逆向き設定を削除 */
.about__item:nth-child(even) {
    flex-direction: row;
    /* 統一 */
}

/* 特徴画像 - 左側に配置 */
.about__image {
    flex: 0 0 300px;
    /* 固定幅に変更 */
    margin-right: 30px;
    /* 右マージンを追加 */
    order: 1;
    /* 左側に配置 */
}

.about__image img {
    width: 100%;
    height: 200px;
    /* 高さを少し下げて統一感を出す */
    object-fit: cover;
    border-radius: 15px;
}

/* 特徴コンテンツ - 右側に配置 */
.about__content {
    flex: 1;
    padding: 0;
    order: 2;
    /* 右側に配置 */
}

/* 特徴タイトル */
.about__title {
    font-size: 1.6rem;
    /* サイズを少し小さく調整 */
    color: var(--first-color);
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    line-height: 1.3;
}

/* 特徴説明 */
.about__description {
    font-size: 1rem;
    /* サイズを少し小さく調整 */
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ハイライト */
.about__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.about__highlight-tag {
    background: var(--primary-color-dark);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 768px) {

    /* 特徴セクションの上下の余白 */
    .about {
        padding: 0px 0px 50px 0px;
    }

    /* 特徴リストの項目同士の間隔を20pxにする */
    .about__list {
        gap: 20px;
        margin-bottom: 30px;
    }

    /* それぞれの特徴を縦並びにする（画像が上、説明が下） */
    .about__item {
        flex-direction: column;
        /* 縦方向に並べる */
        padding: 20px;
        /* 箱の中の余白 */
    }

    /* 偶数番目（2番目、4番目など）も同じ縦並びにする */
    .about__item:nth-child(even) {
        flex-direction: column;
    }

    /* 特徴の画像の設定 */
    .about__image {
        flex: none;
        /* サイズを固定 */
        width: 100%;
        /* 横幅いっぱいに広げる */
        margin-right: 0;
        /* 右の余白をなくす */
        margin-bottom: 20px;
        /* 下に20pxの余白 */
        order: 1;
        /* 表示順を1番目にする */
    }

    /* 画像の高さを180pxに統一 */
    .about__image img {
        width: 100%;
        height: 200px;
    }

    /* 特徴の説明文を2番目に表示 */
    .about__content {
        order: 2;
    }

    /* 特徴のタイトルを小さくする */
    .about__title {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    /* 特徴の説明文を小さくする */
    .about__description {
        font-size: 0.9rem;
        line-height: 1.6;
        /* 行の高さを1.6倍に */
        margin-bottom: 15px;
    }

    /* ハイライトタグ同士の間隔を5pxにする */
    .about__highlights {
        gap: 5px;
    }

    /* ハイライトタグを小さくする */
    .about__highlight-tag {
        font-size: 0.75rem;
        padding: 4px 10px;
    }


}


/* ==========================================================================
   当院について専用ページ終了
   ========================================================================== */
/* ==========================================================================
   医師紹介専用ページ
   ========================================================================== */
.doctor {
    padding: 40px 0;
    background-color: var(--white);
}

/* ==========================================================================
   医師リスト
   ========================================================================== */
.doctor-list {
    padding: 0 40px;
    /* 左右余白のみ */
    max-width: 1200px;
    margin: 0 auto;
}

/* 医師間の間隔 */
.doctor-item+.doctor-item {
    margin-top: 40px;
    padding-top: 0px;
}

/* ==========================================================================
   医師アイテム
   ========================================================================== */
.doctor-item {
    /* background-color: var(--section-background-color); */
    border-radius: 20px;
    overflow: hidden;
}

/* ==========================================================================
   各ブロック共通スタイル
   ========================================================================== */
.doctor-item__block {
    padding: 20px 0px;
}

/* メッセージブロック（写真＋メッセージ） */
.doctor-item__block--message {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* メッセージブロック内の見出しを非表示 */
.doctor-item__block--message .doctor-item__heading {
    display: none;
}

/* ==========================================================================
   写真エリア
   ========================================================================== */
.doctor-item__photo-wrapper {
    flex-shrink: 0;
    width: 300px;
}

.doctor-item__photo {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
}

/* 写真プレースホルダー */
.doctor-item__photo--placeholder {
    width: 100%;
    height: 400px;
    background-color: var(--white);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.doctor-item__photo--placeholder::after {
    content: "準備中";
    color: #555;
    font-size: 18px;
    font-weight: 500;
}

/* 名前・役職エリア */
.doctor-item__identity {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

.doctor-item__role {
    font-size: 24px;
    color: #666;
    font-weight: 600;
    margin-bottom: 0;
}

.doctor-item__name {
    font-size: 24px;
    color: #666;
    font-weight: 700;
    line-height: 1.4;
}

/* ==========================================================================
   メッセージエリア
   ========================================================================== */
.doctor-item__message {
    flex: 1;
}

/* ==========================================================================
   略歴・資格
   ========================================================================== */
.doctor-item__heading {
    font-size: 28px;
    font-weight: bold;
    color: var(--section-color);
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 8px solid var(--primary-color);
    position: relative;
}


.doctor-item__text {
    color: #555;
    line-height: 1.8;
    font-size: 16px;
}

.doctor-item__text p {
    margin-bottom: 16px;
}

.doctor-item__text p:last-child {
    margin-bottom: 0;
}

/* リストスタイル */
.doctor-item__text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.doctor-item__text ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    line-height: 1.8;
}

.doctor-item__text ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--doctor-accent-color);
    font-size: 20px;
    line-height: 1.4;
}

/* ==========================================================================
   空メッセージ(医師が一人も登録されていない状態)
   ========================================================================== */
.doctor-list__empty {
    text-align: center;
    padding: 100px 20px;
    background-color: white;
    border-radius: 20px;
}

.doctor-list__empty-message {
    color: #555;
    font-size: 18px;
    font-weight: 500;
}

/* ==========================================================================
   レスポンシブ対応（スマートフォン）
   ========================================================================== */
@media (max-width: 768px) {

    /* 医師紹介ページ全体の上下左右の余白 */
    .doctor {
        padding: 0px 0px 50px 0px;
    }

    /* 医師一覧を表示するエリアの左右余白 */
    .doctor-list {
        padding: 0 0px;
    }

    /* 2人目以降の医師の上に空白を作る（1人目と2人目の間のスペース） */
    .doctor-item+.doctor-item {
        margin-top: 32px;
        padding-top: 32px;
    }

    /* 各ブロック（メッセージ、略歴、資格）の内側の余白を16ピクセルにする */
    .doctor-item__block {
        padding: 16px 0px;
    }

    /* PC版では横並びの写真とメッセージを、スマホでは縦並びにする */
    .doctor-item__block--message {
        flex-direction: column;
        gap: 16px;
    }

    /* 医師の写真を画面幅いっぱいに広げる（最大300ピクセルまで） */
    .doctor-item__photo-wrapper {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* 医師の写真の高さを300ピクセルに固定 */
    .doctor-item__photo,
    .doctor-item__photo--placeholder {
        height: 300px;
    }

    /* 名前・役職エリア */
    .doctor-item__identity {
        margin-top: 12px;
    }

    /* 役職（院長など） */
    .doctor-item__role {
        font-size: 20px;
    }

    /* 医師の名前 */
    .doctor-item__name {
        font-size: 20px;
    }

    /* メッセージを表示するエリアを画面幅いっぱいにする  */
    .doctor-item__message {
        width: 100%;
    }

    /* 「略歴」「資格」などの見出しの文字サイズと余白を設定 */
    .doctor-item__heading {
        font-size: 24px;
        margin-bottom: 16px;
        padding-left: 16px;
    }

    /* 見出しの左側の縦線のサイズ（使わない場合は削除OK） */
    .doctor-item__heading::before {
        width: 3px;
        height: 20px;
    }

    /* メッセージや略歴の本文の文字サイズと行間を設定 */
    .doctor-item__text {
        font-size: 16px;
        line-height: 1.7;
    }

    /* 段落と段落の間を12ピクセル空ける */
    .doctor-item__text p {
        margin-bottom: 12px;
    }

    /* 資格リストの各項目の設定 */
    .doctor-item__text ul li {
        padding-left: 20px;
        margin-bottom: 8px;
        font-size: 16px;
    }

    /* 医師情報を囲む白い枠の角を少し丸くする */
    .doctor-item {
        border-radius: 16px;
    }

    /* 写真の角も少し丸くする */
    .doctor-item__photo,
    .doctor-item__photo--placeholder {
        border-radius: 12px;
    }

    /* まだ医師がいない時に表示される「準備中」メッセージのデザイン */
    .doctor-list__empty {
        padding: 32px 16px;
        border-radius: 16px;
    }

    /* 「準備中」の文字サイズを16ピクセルにする */
    .doctor-list__empty-message {
        font-size: 16px;
    }
}

/* ==========================================================================
   印刷対応
   ========================================================================== */
@media print {
    .doctor {
        background-color: white;
        padding: 20px 0;
    }

    .doctor-item {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    .doctor-item+.doctor-item {
        margin-top: 30px;
        padding-top: 30px;
    }

    .doctor-item__photo {
        max-height: 200px;
    }
}

/* ------------------------------
   医師紹介専用ページ終了
------------------------------ */




/* フェードイン・フェードアウトのアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* フェードイン時のクラス */
.fade-in {
    animation: fadeIn 0.5s forwards;
}

/* フェードアウト時のクラス */
.fade-out {
    animation: fadeOut 0.5s forwards;
}

/* ------------------------------
   スムーズスクロール + 管理バー非表示
------------------------------ */
html {
    scroll-behavior: smooth;
}

#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}


-->

/* ================================================
   診療時間専用ページのスタイル
   ================================================ */
.page-clinic-hours {
    padding: 40px 0;
}

.page-clinic-hours__content {
    /* コンテンツラッパー */
    padding: 0px 0px;
}

.page-clinic-hours__table-section {
    max-width: 1000px;
    margin: 0 auto 40px;
    /* 下の項目との幅 */
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.page-clinic-hours__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
}

.page-clinic-hours__table thead th {
    background-color: var(--primary-color);
    color: white;
    padding: 25px 20px;
    text-align: center;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.page-clinic-hours__table thead th:last-child {
    border-right: none;
}

.page-clinic-hours__time-header {
    background-color: var(--primary-color-dark) !important;
    min-width: 180px;
}

.page-clinic-hours__table tbody td {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
}

.page-clinic-hours__table tbody td:last-child {
    border-right: none;
}

.page-clinic-hours__table tbody tr:last-child td {
    border-bottom: none;
}

.page-clinic-hours__time-slot {
    background-color: white;
    font-weight: 600;
    color: #333;
    text-align: center !important;
}

.page-clinic-hours__available {
    color: #28a745;
    font-weight: bold;
    font-size: 20px;
}

.page-clinic-hours__closed {
    color: #dc3545;
    font-weight: bold;
    font-size: 20px;
}

.page-clinic-hours__notes {
    padding: 30px;
    background-color: white;
    border-top: 1px solid #e9ecef;
}

.page-clinic-hours__note {
    margin: 2px 0;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

/* 重要な注意事項（★マーク付き）用のモディファイア */
.page-clinic-hours__note--highlight {
    color: #333;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-clinic-hours {
        padding: 0px 0px 50px 0px;
    }

    /* 診療時間の表の外枠 */
    .page-clinic-hours__table-section {
        margin-bottom: 30px;
        overflow-x: visible;
        /* 横スクロールを無効にする */
        border-radius: 8px;
    }

    /* 表全体を画面幅に合わせる */
    .page-clinic-hours__table {
        min-width: auto;
        /* 最小幅600pxの制限を解除 */
        width: 100%;
        /* 画面幅100%に広げる */
        font-size: 12px;
        /* 全体の文字サイズを12pxに */
    }

    /* 表のヘッダー（曜日の行）を小さく */
    .page-clinic-hours__table thead th {
        padding: 10px 3px;
        /* 上下10px、左右3pxでコンパクトに */
        font-size: 16px;
        /* ヘッダーの文字も12px */
    }

    /* 「診療時間」の列幅を狭く */
    .page-clinic-hours__time-header {
        min-width: 80px;
        /* 120px → 80pxに縮小 */
    }

    /* 表の中身のセルも小さく */
    .page-clinic-hours__table tbody td {
        padding: 10px 3px;
        /* 上下10px、左右3pxでコンパクトに */
    }

    /* 時間帯の文字を小さく */
    .page-clinic-hours__time-slot {
        font-size: 14px;
        /* 時間の文字を14pxに */
        white-space: nowrap;
        /* 改行させない */
    }

    /* ○と／はやや大きめに（見やすさ重視） */
    .page-clinic-hours__available,
    .page-clinic-hours__closed {
        font-size: 14px;
        /* 診療記号は14pxで見やすく */
    }

    /* 注意書き部分も調整 */
    .page-clinic-hours__notes {
        padding: 15px;
        /* 余白を15pxに */
    }

    .page-clinic-hours__note {
        font-size: 11px;
        /* 注意書きは11pxに */
        margin: 3px 0;
        /* 行間を狭く */
        line-height: 1.5;
        /* 読みやすい行間 */
    }
}

/* ================================================
   診療時間専用ページのスタイル終わり
   ================================================ */

/* ================================================
   診療内容専用ページのスタイル
   ================================================ */

/* ------------------------------
   PC版（パソコンで見た時のデザイン）
------------------------------ */

/* ページ全体の設定 */
.page-medical {
    /* 上下に60pxの余白を作る（ページが詰まって見えないように） */
    padding: 40px 0;
    /* これを設定しないとパンくずリストがヘッダーに埋まる */
}

/* カード風の診療内容リスト */
.page-medical__content {
    margin-top: 0px;
    padding: 0 40px;
    border-radius: 10px;
}

.page-medical__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.page-medical__item {
    text-decoration: none;
    pointer-events: none;
}

.page-medical__circle {
    background: white;
    border: 2px solid var(--primary-color);
    padding: 20px 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.page-medical__name {
    color: #555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* ホバー効果（将来リンクになった時用） */
.page-medical__circle:hover {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 見出し風の装飾を追加 */
.page-medical__content::before {
    content: "当院で対応可能な症状";
    display: block;
    text-align: center;
    font-size: 24px;
    color: #4a90e2;
    margin-bottom: 30px;
    font-weight: 600;
}


/* ここから下はアイコンver */
/* コンテンツ部分の設定 */
/*
.page-medical__content { 
    margin-top: 0px; 
} 
*/

/* 診療科目を入れる大きな箱の設定 */
/* 箱の最大幅を1000pxにする（大きすぎないように） */
/* 箱を画面の真ん中に配置する */
/*
.page-medical__grid {
    max-width: 1000px;  
    margin: 0 auto;
}


/* 横一列の設定（4つずつ並べる行） */
/* 中身を横並びにする */
/* 中身を真ん中に寄せる */
/* 診療科目同士の間を30px空ける */
/* 次の行との間を30px空ける */
/* 画面が狭い時は自動で次の行に移動する */
/*
.page-medical__row {   
    display: flex;    
    justify-content: center;   
    gap: 30px;    
    margin-bottom: 30px;   
    flex-wrap: wrap;
}
*/

/* 診療科目1つ1つのリンクの設定 */
/* リンクの下線を消す */
/* マウスを乗せた時の動きを0.3秒でなめらかにする */
/*
.page-medical__item {
    text-decoration: none; 
    transition: transform 0.3s ease;
}
*/

/* マウスを乗せた時の動き */
/* 5px上に浮き上がる */
/*
.page-medical__item:hover {    
    transform: translateY(-5px);
}
*/

/* 丸い円の設定 */
/* 円の大きさを180×180pxにする */
/* 背景色を濃い青色にする（病院のテーマカラー） */
/* 四角を完全な円にする */
/* 中身を縦に並べる */
/* 中身を上下左右の真ん中に配置 */
/* 位置の基準点にする（今は使ってないけど念のため） */
/* 円が大きくなる動きを0.3秒でなめらかにする */
/*
.page-medical__circle {
    
    width: 180px;
    height: 180px; 
    background: var(--primary-color-dark);    
    border-radius: 50%;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;    
    transition: all 0.3s ease;
}
*/

/* 円にマウスを乗せた時 */
/* 1.05倍（5%）大きくなる */
/*
.page-medical__circle:hover {  
    transform: scale(1.05);
}

/* アイコンを入れる場所の設定 */
/* アイコンと文字の間を15px空ける */
/*
.page-medical__icon {
    
    margin-bottom: 15px;
}

/* アイコン画像の設定 */
/* アイコンの大きさを50×50pxにする */
/* 黒い画像を白色に変える魔法のコード */
/*
.page-medical__icon img {
    width: 50px;
    height: 50px;   
    filter: brightness(0) invert(1);
}
*/
/* 診療科目の名前の設定 */
/* 文字を白色にする */
/* 文字の大きさを14pxにする */
/* 文字を太くする（はっきり見えるように） */
/* 文字を真ん中に配置 */
/* 行の高さを1.3倍にする（読みやすくする） */
/* 左右に10pxの余白（長い文字が円からはみ出ないように） */
/*
.page-medical__name {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    padding: 0 10px;
}


/* ------------------------------
   スマホ版（スマートフォンで見た時のデザイン）
   画面の幅が768px以下の時に適用される
------------------------------ */
@media (max-width: 768px) {

    /* 診療内容ページ全体の上下左右の余白をゼロにする */
    .page-medical {
        padding: 0px 0px 50px 0px;
    }

    /* コンテンツエリアの調整 */
    .page-medical__content {
        padding: 0px 0px;
        /* 左右に余白を追加 */
    }

    /* グリッドを2列に変更 */
    .page-medical__row {
        grid-template-columns: repeat(2, 1fr);
        /* 4列→2列 */
        gap: 15px;
        /* 間隔を少し狭く */
        margin-bottom: 15px;
    }

    /* カードのサイズ調整 */
    .page-medical__circle {
        padding: 15px 10px;
        /* パディングを小さく */
        min-height: 70px;
        /* 高さを確保 */
    }

    /* 文字サイズ調整 */
    .page-medical__name {
        font-size: 14px;
        /* 少し小さく */
    }

    /* 見出しの調整 */
    .page-medical__content::before {
        font-size: 18px;
        /* 見出しも小さく */
        margin-bottom: 20px;
    }
}


/* ここから下はアイコンver */
/*
    .page-medical__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
        padding: 0 4vw;
    }
    
    .page-medical__row {
        display: contents;
    }
    
    .page-medical__item {
        width: 46%;
        display: flex;
        justify-content: center;
    }
    
    .page-medical__circle {
        width: min(40vw, 160px);
        height: min(40vw, 160px);
    }
}

*/

/* ============================================
   アクセス専用ページ スタイル
   BEM記法準拠・PC版のみ
   ============================================ */

/* ============================================
   1. ベーススタイル
   ============================================ */
.page-access {
    padding: 40px 0;
    background-color: var(--white);
}


.page-access__content {}

/* ============================================
   3. セクション共通スタイル
   ============================================ */
.page-access__subtitle {
    font-size: 28px;
    font-weight: bold;
    color: #7b605c;
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 8px solid var(--primary-color);
    position: relative;
}


/* ============================================
   4. 地図セクション
   ============================================ */
.page-access__map-section {
    padding: 0 40px;
}

.page-access__map {
    width: 100%;
}

.page-access__map-container {
    width: 100%;
    height: 600px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.page-access__map-container iframe {
    width: 100%;
    height: 100%;
}

.page-access__map-note {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    text-align: center;
}

/* ============================================
   5. 所在地セクション
   ============================================ */
.page-access__location {
    padding: 40px;
    margin-bottom: 0px;
}

.page-access__location-content {
    margin: 0 auto;
    color: #555;
}

.page-access__address {
    font-size: 20px;
    font-style: normal;
    line-height: 1.8;
}

/* ============================================
   6. 最寄り駅セクション
   ============================================ */
.page-access__station {
    padding: 40px;
    margin-bottom: 0px;
    position: relative;
}

.page-access__station-list {
    list-style: none;
    /* ・を消す */
    padding: 0;
    margin: 0 auto;
}

.page-access__station-item {
    font-size: 20px;
    line-height: 1.8;
    color: #666;
}


/* ============================================
   7. 道順案内セクション
   ============================================ */
.page-access__route {
    padding: 40px;
    position: relative;
}

.page-access__route-description {
    text-align: center;
    color: #555;
    margin-bottom: 40px;
}

.page-access__route-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-access__route-step {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}

/* ステップ間の縦線 */
.page-access__route-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 60px;
    width: 2px;
    height: calc(100% - 20px);
    background-color: #ddd;
}

.page-access__step-number {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.page-access__step-content {
    flex: 1;
    padding-left: 30px;
    display: flex;
    align-items: flex-start;
}

.page-access__step-image {
     position: relative;
    overflow: hidden;
    background-color: #f5f5f5; /* 画像が読み込まれない場合の背景色 */
}

/* 準備中オーバーレイ */
.page-access__step-image::before {
    content: "準備中";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    color: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    z-index: 2;
  
}

.page-access__step-image img {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-access__step-description {
    padding-left: 30px;
    padding-top: 10px;
}

.page-access__step-description p {
    margin: 0;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* ============================================
   8. 初診の方へ（通知セクション）
   ============================================ */

/* 
   .page-access__notice {
    text-align: center;
    margin: 0px 0 40px;
}

.page-access__notice-content {
    display: inline-block;
}
*/

/* ボタンスタイル（左右に丸みのあるデザイン） */
/* 
.page-access__notice-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
*/
/* 
.page-access__notice-button:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
}
*/

/* ============================================
   9. ユーティリティ
   ============================================ */
/* アイコンの基本スタイル */
.page-access i[class^="fas"] {
    display: inline-block;
}

/* 印刷時の調整 */
@media print {
    .page-access {
        background-color: #fff;
    }

    .page-access__map-section,
    .page-access__location,
    .page-access__station,
    .page-access__route,
    .page-access__notice {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   アクセスページ スマホ版デザイン（画面幅768ピクセル以下）
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* アクセスページ全体の上下左右の余白 */
    .page-access {
        padding: 0px 0px 50px 0px;
    }

    /* ==========================================================================
       各セクション共通の設定
       ========================================================================== */

    /* 「所在地」「最寄り駅」などの見出しを小さくする */
    .page-access__subtitle {
        font-size: 24px;
        /* 28px → 24pxに小さく */
        margin-bottom: 20px;
        /* 下の余白を30px → 20pxに */
        padding-left: 16px;
        /* 左の余白を20px → 16pxに */
        border-left: 6px solid var(--primary-color);
        /* 縦線を8px → 6pxに細く */
    }

    /* ==========================================================================
       地図セクション
       ========================================================================== */

    .page-access__map-section {
        padding: 0 0px;
    }

    /* グーグルマップの高さをスマホ用に低くする */
    .page-access__map-container {
        height: 300px;
        /* 600px → 300pxに低く */
        border: 1px solid #e0e0e0;
        /* 枠線を2px → 1pxに細く */
    }

    /* 「地図をクリックすると拡大」の文字を小さくする */
    .page-access__map-note {
        font-size: 12px;
        /* 14px → 12pxに */
        margin-top: 8px;
        /* 上の余白を10px → 8pxに */
    }

    /* ==========================================================================
       所在地セクション  
       ========================================================================== */

    /* 所在地エリアの余白を調整（上下左右すべて16ピクセル） */
    .page-access__location {
        padding: 16px 0px;
        /* 40px → 16pxに */
        margin-bottom: 0px;
    }

    /* 住所の文字サイズを小さくする */
    .page-access__address {
        font-size: 16px;
        /* 20px → 16pxに */
        line-height: 1.7;
        /* 行間を少し狭く */
    }

    /* ==========================================================================
       最寄り駅セクション
       ========================================================================== */

    /* 最寄り駅エリアの余白を調整 */
    .page-access__station {
        padding: 16px 0px;
        /* 40px → 16pxに */
        margin-bottom: 0px;
    }

    /* 「日暮里駅 徒歩1分」などの文字サイズを小さくする */
    .page-access__station-item {
        font-size: 16px;
        /* 20px → 16pxに */
        line-height: 1.7;
        /* 行間を調整 */
    }

    /* ==========================================================================
       道順案内セクション
       ========================================================================== */

    /* 道順エリアの余白を調整 */
    .page-access__route {
        padding: 16px 0px;
        /* 40px → 16pxに */
    }

    /* 「クリニックまでの道順をご案内」の文字を小さくする */
    .page-access__route-description {
        font-size: 16px;
        /* 16px → 14pxに（元のサイズ不明なので推定） */
        margin-bottom: 24px;
        /* 下の余白を40px → 24pxに */
    }

    /* 各ステップ（1,2,3）の間隔を狭くする */
    .page-access__route-step {
        flex-direction: column;
        /* 横並び → 縦並びに変更 */
        margin-bottom: 32px;
        /* 40px → 32pxに */
    }

    /* ステップ番号（1,2,3の丸）を小さくする */
    .page-access__step-number {
        width: 40px;
        /* 50px → 40pxに */
        height: 40px;
        /* 50px → 40pxに */
        font-size: 18px;
        /* 20px → 18pxに */
        margin-bottom: 16px;
        /* 番号の下に余白を追加 */
    }

    /* ステップ間をつなぐ縦線の位置を調整 */
    .page-access__route-step:not(:last-child)::after {
        left: 20px;
        /* 25px → 20pxに（番号が小さくなったため） */
        top: 50px;
        /* 60px → 50pxに */
        width: 1px;
        /* 2px → 1pxに細く */
    }

    /* ステップの中身（写真と説明）のレイアウト変更 */
    .page-access__step-content {
        padding-left: 0;
        /* 左の余白をゼロに */
        flex-direction: column;
        /* 横並び → 縦並びに */
        width: 100%;
    }

    /* 道順の写真を画面幅に合わせる */
    .page-access__step-image {
        width: 100%;
        margin-bottom: 12px;
        /* 写真の下に余白 */
    }

    .page-access__step-image img {
        width: 100%;
        /* 画面幅いっぱいに */
        height: auto;
        /* 縦横比を保つ */
        max-height: 200px;
        /* 高さは最大200pxまで */
        object-fit: cover;
        /* 画像を枠内に収める */
    }

    /* 道順の説明文の余白を調整 */
    .page-access__step-description {
        padding-left: 0;
        /* 左の余白をゼロに */
        padding-top: 0;
        /* 上の余白をゼロに */
    }

    /* 道順の説明文の文字サイズを小さくする */
    .page-access__step-description p {
        font-size: 16px;
        /* 16px → 14pxに */
    }

    /* 縦線を完全に削除 */
    .page-access__route-step:not(:last-child)::after {
        display: none;
    }



    /* ==========================================================================
       初診の方へボタン
       ========================================================================== */

    /* ボタンエリアの余白を調整 */
    .page-access__notice {
        margin: 32px 16px;
        /* 上下32px、左右16pxの余白 */
    }

    /* ボタンをスマホ用に調整 */
    .page-access__notice-button {
        display: block;
        /* ブロック要素にして幅いっぱいに */
        width: 100%;
        /* 画面幅いっぱい */
        padding: 16px 20px;
        /* 上下16px、左右20pxの余白 */
        font-size: 16px;
        /* 文字サイズは変更なし */
        border-radius: 8px;
        /* 角丸を30px → 8pxに（医師ページと統一） */
    }

    /* ホバー効果を削除（スマホはタッチなので不要） */
    .page-access__notice-button:hover {
        transform: none;
        /* 浮き上がり効果を無効化 */
    }
}

/* ------------------------------
   アクセス専用ページ終了
------------------------------ */









/* 初めてのかたへ専用ページ */

.first-time-patients {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.7;
}

.first-time-patients .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 15px;
}

.first-time-patients .page-title {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.first-time-patients .intro-text {
    margin-bottom: 30px;
}

.first-time-patients .intro-text p {
    margin-bottom: 15px;
    font-size: 16px;
}

/* Info Box with Links */
.first-time-patients .info-box {
    background-color: #f5f9e8;
    padding: 25px 30px;
    border-radius: 5px;
    margin-bottom: 40px;
}

.first-time-patients .info-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.first-time-patients .info-box li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.first-time-patients .info-box li:before {
    content: "•";
    color: var(--primary-color);
    font-size: 22px;
    position: absolute;
    left: 0;
    top: -2px;
}

.first-time-patients .info-box a {
    text-decoration: none;
    color: #1a6eb3;
}

.first-time-patients .info-box a:hover {
    text-decoration: underline;
}

/* Sections */
.first-time-patients .section {
    margin-bottom: 60px;
}

.first-time-patients .section-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    color: #333;
}

/* 予約フロー全体の背景色 */
#reservation-flow {
    background-color: #e6f2fa;
    padding: 20px;
    border-radius: 5px;
}

/* 予約タイトル */
#reservation-flow .section-title {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 15px;
}

/* Reservation Flow */
/* 横並びの調整 */
.reservation-methods {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.reservation-method {
    width: 48%;
    /* 左右で均等に分割 */
}

.first-time-patients .reservation-method h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    border-left: 5px solid --primary-color;
    padding-left: 12px;
    color: #333;
    /* 予約方法のタイトルの色を統一 */
}

.first-time-patients .flow-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.first-time-patients .flow-step {
    display: flex;
    align-items: flex-start;
    background-color: #f5f5f5;
    padding: 12px 15px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 30px;
    /* 各ステップ間の間隔を確保 */
}

.first-time-patients .flow-step:after {
    content: "";
    position: absolute;
    bottom: -25px;
    /* 矢印の位置を少し下げる */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid var(--primary-color);
    /* 矢印の色を緑に変更 */
}

.first-time-patients .flow-step:last-child:after {
    display: none;
}

.first-time-patients .step-number {
    background-color: var(--primary-color);
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 左側のステップ番号とテキストスタイル */
.reservation-method.phone .step-number {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px;
    /* 数字を中央に配置するための微調整 */
}

.reservation-method.phone .step-content {
    font-size: 20px;
    /* 左側のテキストサイズを大きくする */
    line-height: 1.5;
    color: #333;
}

/* 右側のステップ番号とテキストスタイル */
.reservation-method.web .step-number {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px;
    /* 数字を中央に配置するための微調整 */
}

.reservation-method.web .step-content {
    font-size: 16px;
    /* 右側のテキストサイズ */
    line-height: 1.5;
    color: #333;
}

/* Content Box */
.first-time-patients .content-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
}

/* ==========================================================================
   お問い合わせ専用ページ
   ========================================================================== */

.contact {
    padding: 40px 0;
    background-color: var(--white);
}

.contact__form-wrapper {
    padding: 0 40px;
    /* 左右余白のみ */
    max-width: 1200px;
    margin: 0 auto;
}

/* ------------------------------
   注意書きエリア
------------------------------ */
.contact-notice {
    background-color: #fef9f1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    border: 1px solid #e0e0e0;
}

.contact-notice__text {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.contact-notice__link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.contact-notice__link:hover {
    text-decoration: underline;
}

/* ------------------------------
   フォームグループ（各項目の共通スタイル）
------------------------------ */
.form-group {
    margin-bottom: 30px;
}

.form-group__label {
    display: inline-block;
    font-size: 1.0em;
    font-weight: bold;
    margin-bottom: 8px;
    color: #7b605c;
}

/* 必須項目のラベル */
.form-group__label--required {
    position: relative;
}

.form-group__label--required::before {
    content: "必須";
    background-color: var(--logo-color);
    color: var(--white);
    font-size: 1.0em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-weight: normal;
}

/* 任意項目のラベル */
.form-group__label--optional {
    position: relative;
}

.form-group__label--optional::before {
    content: "任意";
    background-color: #999;
    color: var(--white);
    font-size: 1.0em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-weight: normal;
}

.form-group__input-wrapper {
    margin-top: 8px;

}

/* ------------------------------
   ラジオボタンのスタイル
------------------------------ */
.form-radio {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-radio label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.0em;
    color: #555;
    /*問い合わせ項目群の色 */
    font-weight: normal;
}

.form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
}

/* ------------------------------
   入力フィールドのスタイル
------------------------------ */
.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    background-color: var(--white);
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.form-input::placeholder {
    color: #999;
}

/* テキストエリア専用 */
.form-input--textarea {
    min-height: 120px;
    resize: vertical;
}

/* ------------------------------
   プライバシーポリシー同意部分
------------------------------ */
.form-privacy {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    /* 追加 */
}

/* Contact Form 7が生成するacceptanceフィールド用の修正 */
.form-privacy__acceptance {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-privacy__acceptance .wpcf7-list-item {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-privacy__acceptance .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.form-privacy__acceptance input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.form-privacy__acceptance .wpcf7-list-item-label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0;
}

.form-privacy__link {
    color: var(--primary-color);
    text-decoration: none;
}

.form-privacy__link:hover {
    text-decoration: underline;
}

/* ------------------------------
   送信ボタン
------------------------------ */
.form-submit {
    display: flex;
    justify-content: center;
    /* text-align: center から変更 */
    margin-top: 40px;
}

.form-submit__button {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 16px 60px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;

    /* 浮かせる効果を追加 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 影をつける */
    transform: translateY(0);
    /* 初期位置 */
}

.form-submit__button:hover {
    background-color: var(--primary-color-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    /* ホバー時により強い影 */
    transform: translateY(-2px);
    /* 少し上に浮く */
}

.form-submit__button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* クリック時は影を少し弱く */
}

/* Contact Form 7のスピナー（ローディング）を配置に影響させない */
.wpcf7-spinner {
    display: none !important;
}

/* ------------------------------
   Contact Form 7 エラーメッセージ
------------------------------ */
.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.wpcf7-validation-errors {
    background-color: #ffeaea;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.wpcf7-mail-sent-ok {
    background-color: #eafaf1;
    border: 1px solid #27ae60;
    color: #27ae60;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ==========================================================================
   お問い合わせ専用ページ スマートフォン用レスポンシブスタイル（768px以下）
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* ------------------------------
       お問い合わせセクション全体
    ------------------------------ */
    .contact {
        padding: 0px 0px 50px 0px;
        /* 上下の余白を削減 */
    }

    .contact__form-wrapper {
        padding: 0px 0px;
        /* 上下の余白を削減 */
    }

    /* コンテナの余白調整 */


    /* ------------------------------
       注意書きエリア
    ------------------------------ */
    .contact-notice {
        padding: 16px;
        /* パディングを削減 */
        margin-bottom: 24px;
        /* 下部マージンを削減 */
    }

    .contact-notice__text {
        font-size: 13px;
        /* フォントサイズを少し小さく */
        line-height: 1.7;
        /* 行間を少し広げて読みやすく */
    }

    /* ------------------------------
       フォームグループ
    ------------------------------ */
    .form-group {
        margin-bottom: 24px;
        /* 項目間の余白を削減 */
    }

    .form-group__label {
        font-size: 16px;
        /* ラベルのフォントサイズを調整 */
        margin-bottom: 6px;
    }

    /* 必須・任意バッジのサイズ調整 */
    .form-group__label--required::before,
    .form-group__label--optional::before {
        font-size: 11px;
        padding: 2px 5px;
        margin-right: 6px;
    }

    /* ------------------------------
       ラジオボタン
    ------------------------------ */
    .form-radio {
        gap: 10px;
        /* 項目間の余白を少し削減 */
    }

    .form-radio label {
        font-size: 16px;
        padding: 4px 0;
        /* タップエリアを確保 */
        min-height: 20px;
        /* タップしやすい高さを確保 */
        align-items: center;
    }

    .form-radio input[type="radio"] {
        width: 20px;
        /* 少し大きく */
        height: 20px;
        margin-right: 12px;
        flex-shrink: 0;
        /* サイズを固定 */
    }

    /* ------------------------------
       入力フィールド
    ------------------------------ */
    .form-input {
        font-size: 16px;
        /* iOSでのズーム防止 */
        padding: 14px 16px;
        /* タップしやすいパディング */
        min-height: 48px;
        /* 最小高さを確保 */
    }

    /* テキストエリアの高さ調整 */
    .form-input--textarea {
        min-height: 100px;
        /* スマホでは少し低く */
    }

    /* プレースホルダーの文字サイズ */
    .form-input::placeholder {
        font-size: 14px;
    }

    /* ------------------------------
       プライバシーポリシー
    ------------------------------ */
    .form-privacy {
        margin-bottom: 32px;
    }

    .form-privacy__checkbox {
        width: 20px;
        height: 20px;
        margin-top: 0;
        flex-shrink: 0;
    }

    .form-privacy__text {
        font-size: 13px;
        line-height: 1.5;
    }

    /* チェックボックスとテキストの配置調整 */
    .form-privacy__acceptance {
        align-items: center;
        /* 中央揃えに変更 */
        min-height: 44px;
        /* タップエリアを確保 */
    }

    /* ------------------------------
       送信ボタン
    ------------------------------ */
    .form-submit {
        margin-top: 32px;
    }

    .form-submit__button {
        width: 100%;
        /* 横幅いっぱいに */
        padding: 16px 20px;
        font-size: 16px;
        min-height: 48px;
        /* タップしやすい高さ */
        border-radius: 8px;
        /* 少し角丸を大きく */
    }

    /* ------------------------------
       エラーメッセージ
    ------------------------------ */
    .wpcf7-not-valid-tip {
        font-size: 12px;
        margin-top: 6px;
        line-height: 1.4;
    }

    .wpcf7-validation-errors,
    .wpcf7-mail-sent-ok {
        font-size: 14px;
        padding: 16px;
        margin-bottom: 16px;
        line-height: 1.5;
    }

    /* ------------------------------
       Contact Form 7のレスポンス出力
    ------------------------------ */
    .wpcf7 form.invalid .wpcf7-response-output,
    .wpcf7 form.unaccepted .wpcf7-response-output {
        font-size: 14px;
        padding: 12px 16px;
        margin: 16px 0;
    }
}

/* ==========================================================================
   プライバシーポリシーページ（パソコン用）
   ========================================================================== */

/* ==========================================================================
   ページ全体の設定
   ========================================================================== */
.privacy {
    padding: 40px 0;
    /* ページの上下に40ピクセルの余白を作る */
    background-color: var(--white);
    /* 背景を真っ白にする */
}

/* ==========================================================================
   文章を入れる箱の設定
   ========================================================================== */
.privacy__content {

    margin: 0 auto;
    /* 箱を画面の真ん中に置く */
    padding: 0 40px;
    /* 箱の左右に40ピクセルの余白（文字が端っこにくっつかないように） */
}

/* 最初の説明文を入れる場所 */
.privacy__intro {
    margin-bottom: 60px;
    /* 下に60ピクセルの空白を作る（次の文章と離すため） */
}

/* ==========================================================================
   各セクション（1つ1つの説明のまとまり）
   ========================================================================== */
.privacy__section {
    margin-bottom: 60px;
    /* 各セクションの下に60ピクセルの空白 */
}

/* 最後のセクションは下に空白いらない（ページの最後だから） */
.privacy__section:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   見出し（タイトル）のデザイン
   ========================================================================== */
/* 大きい見出し（1.個人情報の定義 等） */
.privacy__heading {
    font-size: 28px;
    /* 文字の大きさを28ピクセルにする */
    font-weight: bold;
    /* 文字を太くする */
    color: #7b605c;
    /* 文字の色を茶色にする */
    margin-bottom: 30px;
    /* 見出しの下に30ピクセルの空白 */
    padding-left: 20px;
    /* 左側に20ピクセルの余白（青い線との間） */
    border-left: 8px solid var(--primary-color);
    /* 左側に8ピクセルの太さの青い線を引く */
    line-height: 1.4;
    /* 行の高さを文字の1.4倍にする（2行になっても読みやすい） */
}

/* 小さい見出し（承諾無く使用する例） */
.privacy__subheading {
    font-size: 20px;
    /* 文字の大きさを20ピクセルにする */
    font-weight: bold;
    /* 文字を太くする */
    color: #555;
    /* 文字の色を濃いグレーにする */
    margin-bottom: 20px;
    /* 見出しの下に20ピクセルの空白 */
    margin-top: 40px;
    /* 見出しの上に40ピクセルの空白 */
}

/* 小見出しがある部分のまとまり */
.privacy__subsection {
    margin-bottom: 30px;
    /* 下に30ピクセルの空白 */
}

/* 最後の小見出し部分は下に空白いらない */
.privacy__subsection:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   普通の文章
   ========================================================================== */
.privacy__text {
    color: #4A4A4A;
    /* 文字の色をダークグレーにする（真っ黒より優しい） */
    line-height: 1.8;
    /* 行と行の間を1.8倍にする（読みやすくなる） */
    font-size: 18px;
    /* 文字の大きさを16ピクセルにする */
}

/* 段落（文章のまとまり）の設定 */
.privacy__text p {
    margin-bottom: 20px;
    /* 段落の下に20ピクセルの空白（次の段落と離す） */
}

/* 最後の段落は下に空白いらない */
.privacy__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   箇条書きリスト
   ========================================================================== */
.privacy__list {
    margin: 20px 0 0 0;
    /* 上に20ピクセルの空白、左右下は0 */
    padding-left: 20px;
    /* 左側に20ピクセルの余白（インデント） */
}

/* リストの各項目 */
.privacy__list li {
    position: relative;
    /* 点（・）を配置するための準備 */
    padding-left: 20px;
    /* 左側に20ピクセルの余白（点の分） */
    margin-bottom: 12px;
    /* 項目の下に12ピクセルの空白 */
    line-height: 1.8;
    /* 行の高さを1.8倍にする */
    color: #4A4A4A;
    /* 文字の色をダークグレーにする */
    font-size: 16px;
    /* 文字の大きさを16ピクセルにする */
}

/* 最後の項目は下に空白いらない */
.privacy__list li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   例文を入れる灰色の箱
   ========================================================================== */
.privacy__box {
    background-color: #f8f9fa;
    /* 箱の中を薄いグレーにする */
    border: 1px solid #e9ecef;
    /* 箱の周りに1ピクセルの薄いグレーの線 */
    border-radius: 8px;
    /* 角を8ピクセル分丸くする */
    padding: 20px;
    /* 箱の内側に20ピクセルの余白 */
}

/* 箱の中の文章 */
.privacy__box p {
    margin-bottom: 15px;
    /* 段落の下に15ピクセルの空白 */
    line-height: 1.8;
    /* 行の高さを1.8倍にする */
    color: #4A4A4A;
    /* 文字の色をダークグレーにする */
    font-size: 16px;
    /* 文字の大きさを16ピクセルにする */
}

/* 箱の中の最後の段落は下に空白いらない */
.privacy__box p:last-child {
    margin-bottom: 0;
}

/* 矢印（→）がある2番目の段落は少し右にずらす */
.privacy__box p:nth-child(2) {
    padding-left: 20px;
    /* 左に20ピクセルの余白を作る */
}

/* ==========================================================================
   リンク（クリックできる文字）
   ========================================================================== */
.privacy__link {
    color: #6B9BD1;
    /* リンクの色を青にする */
    text-decoration: underline;
    /* 下線を引く */
}

/* マウスを乗せた時のリンク */
.privacy__link:hover {
    color: #5580a8;
    /* 少し濃い青にする */
    text-decoration: none;
    /* 下線を消す */
}

/* 電話番号のリンク */
.privacy__link[href^="tel:"] {
    color: #6B9BD1;
    /* 電話番号も青にする */
    text-decoration: underline;
    /* 下線を引く */
}

/* マウスを乗せた時の電話番号リンク */
.privacy__link[href^="tel:"]:hover {
    color: #5580a8;
    /* 少し濃い青にする */
    text-decoration: none;
    /* 下線を消す */
}

/* ==========================================================================
   プライバシーポリシーページ スマホ版デザイン（画面幅768ピクセル以下）
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* アクセスページ全体の上下左右の余白をゼロにする */
    .privacy {
        padding: 0px 0px 0px 0px;
    }

    /* ==========================================================================
       文章を入れる箱の設定
       ========================================================================== */
    .privacy__content {
        padding: 0 16px;
        /* 左右の余白を40px → 16px*/
    }

    /* 最初の説明文を入れる場所 */
    .privacy__intro {
        margin-bottom: 32px;
        /* 下の余白を60px → 32pxに調整 */
        padding: 16px 0;
        /* 上下に16pxの余白を追加 */
    }

    /* ==========================================================================
       各セクション（1つ1つの説明のまとまり）
       ========================================================================== */
    .privacy__section {
        margin-bottom: 32px;
        /* セクション間の余白を60px → 32pxに */
        padding: 16px 0;
        /* 上下に16pxの余白を追加 */
    }

    /* 大きい見出し（1.個人情報の定義 等） */
    .privacy__heading {
        font-size: 24px;
        /* 28px → 24pxに小さく（アクセスページと同じ） */
        margin-bottom: 20px;
        /* 下の余白を30px → 20pxに */
        padding-left: 16px;
        /* 左の余白を20px → 16pxに */
        border-left: 6px solid var(--primary-color);
        /* 縦線を8px → 6pxに細く */
    }

    /* 小さい見出し（承諾無く使用する例） */
    .privacy__subheading {
        font-size: 18px;
        /* 20px → 18pxに小さく */
        margin-bottom: 16px;
        /* 下の余白を20px → 16pxに */
        margin-top: 24px;
        /* 上の余白を40px → 24pxに */
    }

    /* 小見出しがある部分のまとまり */
    .privacy__subsection {
        margin-bottom: 24px;
        /* 下の余白を30px → 24pxに */
    }

    /* ==========================================================================
       普通の文章（アクセスページと統一）
       ========================================================================== */
    .privacy__text {
        font-size: 16px;
        /* 18px → 16pxに小さく（アクセスページと統一） */
        line-height: 1.7;
        /* 行間を1.8 → 1.7に調整（スマホ向け） */
    }

    /* 段落（文章のまとまり）の設定 */
    .privacy__text p {
        margin-bottom: 16px;
        /* 段落間の余白を20px → 16pxに */
    }

    /* ==========================================================================
       箇条書きリスト
       ========================================================================== */
    .privacy__list {
        margin: 16px 0 0 0;
        /* 上の余白を20px → 16pxに */
        padding-left: 16px;
        /* 左のインデントを20px → 16pxに */
    }

    /* リストの各項目 */
    .privacy__list li {
        padding-left: 16px;
        /* 左の余白を20px → 16pxに */
        margin-bottom: 10px;
        /* 項目間の余白を12px → 10pxに */
        font-size: 16px;
        /* 文字サイズは16pxのまま（統一） */
        line-height: 1.7;
        /* 行間を1.8 → 1.7に調整 */
    }

    /* ==========================================================================
       例文を入れる灰色の箱
       ========================================================================== */
    .privacy__box {
        padding: 16px;
        /* 箱の内側の余白を20px → 16pxに */
        border-radius: 6px;
        /* 角丸を8px → 6pxに（少し小さく） */
        margin: 16px 0;
        /* 上下に16pxの余白を追加 */
    }

    /* 箱の中の文章 */
    .privacy__box p {
        margin-bottom: 12px;
        /* 段落間の余白を15px → 12pxに */
        font-size: 16px;
        /* 文字サイズは16pxのまま（統一） */
        line-height: 1.7;
        /* 行間を1.8 → 1.7に調整 */
    }

    /* 矢印（→）がある2番目の段落の左余白を調整 */
    .privacy__box p:nth-child(2) {
        padding-left: 16px;
        /* 左余白を20px → 16pxに */
    }

    /* ==========================================================================
       リンク（クリックできる文字）- スマホでタップしやすく調整
       ========================================================================== */
    .privacy__link {
        /* 基本スタイルはそのまま、ホバー効果は無効化 */
        display: inline-block;
        /* タップ領域を確保 */
        padding: 2px 4px;
        /* 少し余白をつけてタップしやすく */
        margin: 0 -4px;
        /* 余白の分だけマイナスマージン */
    }

    /* スマホではホバー効果を無効化 */
    .privacy__link:hover {
        color: #6B9BD1;
        /* ホバー時も通常の色のまま */
        text-decoration: underline;
        /* 下線はそのまま */
    }

}

/* ==========================================================================
   プリンターで印刷する時の設定
   ========================================================================== */
@media print {

    /* 印刷時の背景色を白にする（インクの節約） */
    .privacy {
        background-color: white;
        padding: 20px 0;
        /* 余白を少し小さくする */
    }

    /* 印刷時は横幅いっぱいに使う */
    .privacy__content {
        max-width: 100%;
    }

    /* 灰色の箱を印刷でも分かるようにする */
    .privacy__box {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
    }

    /* セクションが途中で切れないようにする */
    .privacy__section {
        page-break-inside: avoid;
        /* ページの途中で切らない */
    }
}