/* --- style.css --- */

/* 1. サイト全体の基本設定（色とフォント） */
body {
    color: #444444 !important;
    /* 明朝体の指定（Windows/Mac両対応） */
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "VM Mincho", serif;
	
	padding-bottom: 160px; /* 固定メニューの高さ分だけ余白を空ける */
}

/* フォームのパーツも明朝体を継承させる設定 */
input, textarea, select, button {
    font-family: inherit; /* 親要素（body）のフォントを引き継ぐ */
}

/* 1. 全体の body 指定は削除し、セクション内のみフォント指定などを適用 */
#reservation-section {
    background-color: #FEFCEF;
    /* 前回調整した余白設定（上は0か適宜調整、下は60px） */
	padding: 60px 0 60px 0;
	position: relative;
    /* フォント設定をここに移動 */
    /*font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/
    color: #444444; /* 文字色もここで定義 */
}

#reservation-section::before {
    content: "";
    position: absolute;
    
    /* --- PC向けの基本設定（高さ100px） --- */
    top: -70px;
    left: 0;
    width: 100%;
    height: 110px;
    
    /* SVG画像 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100'%3E%3Cpath d='M -454.4 50 Q -374.4 50 -294.4 25 Q -134.4 -25 25.6 25 Q 105.6 50 185.6 50 Q 265.6 50 345.6 25 Q 505.6 -25 665.6 25 Q 745.6 50 825.6 50 Q 905.6 50 985.6 25 Q 1145.6 -25 1305.6 25 Q 1385.6 50 1465.6 50 L 1280 100 L 0 100 Z' fill='%23fefcef'%3E%3C/path%3E%3C/svg%3E");
    
    /* ★変更点1：波を2つ並べる設定 */
    background-size: 100% 100px; /* 横は50%、縦は100px */
    background-repeat: repeat-x; /* 横方向に繰り返す */
    background-position: center bottom;
    z-index: 1;
}

/* 2. すべてのクラスの頭に #reservation-section を付与して限定 */
#reservation-section .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #FEFCEF;
    //box-shadow: 0 0 10px rgba(0,0,0,0.1);
	box-sizing: border-box; /* レイアウト崩れ防止 */
	position: relative;
    z-index: 2;
}

#reservation-section .container2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #fefefe;
    //box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-sizing: border-box; /* レイアウト崩れ防止 */
}

#reservation-section .section-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #444444;
}

#reservation-section .intro-text {
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
    font-size: 14px;
}
#reservation-section .intro-text .highlight {
    border-bottom: 1px solid #444444;
}

/* フォームテーブル周り */
#reservation-section .form-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #444444;
    border-bottom: none;
	margin-bottom: 30px;
	background: #fefefe;
}

#reservation-section .form-table th, 
#reservation-section .form-table td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    vertical-align: top;
    font-size: 14px; /* LPの他の文字サイズと喧嘩しないよう明示 */
}

#reservation-section .form-table th {
    background-color: #f5f5f5;
    width: 25%; 
    font-weight: normal;
}

/* バッジ */
#reservation-section .badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    color: #fff;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}
#reservation-section .badge.required { background-color: #e67e22; border: none; }
#reservation-section .badge.optional { background-color: #fff; color: #e67e22; border: 1px solid #e67e22; }

/* 入力パーツ */
#reservation-section .input-text {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* はみ出し防止 */
}
#reservation-section .input-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

#reservation-section .date-group {
    margin-bottom: 10px;
}
#reservation-section .note {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    line-height: 1.4;
}

/* 診療時間表 */
#reservation-section .hours-table-wrap {
    margin-top: 20px;
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
}
#reservation-section .hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
}
#reservation-section .hours-table th, 
#reservation-section .hours-table td {
    border: 1px solid #ddd;
    padding: 5px;
}
#reservation-section .small {
    font-size: 11px;
    text-align: right;
    display: block;
}

/* 送信ボタンエリア */
#reservation-section .submit-area {
    text-align: center;
}
#reservation-section .btn-submit {
    background-color: #e67e22;
    color: #fff;
    border: none;
    padding: 15px 60px;
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.3s;
    border-radius: 4px; /* ボタンが四角すぎないように少し丸める */
}
#reservation-section .btn-submit:hover {
    opacity: 0.8;
}
#reservation-section .btn-back {
    background-color: #ccc;
    margin-right: 10px;
}

/* ラベルのスタイル（ラジオボタン周り） */
#reservation-section label {
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
}

/* 確認画面用の上書きスタイル */
/* confirm.phpでもIDで囲っているのでこれらも適用されます */
#reservation-section .confirm-table th { background: #fff; color: #888; border: none;}
#reservation-section .confirm-table td { border: none; font-weight: bold; }
#reservation-section .confirm-container { padding-top: 50px; text-align: center;}

/* スマホ対応 */
@media (max-width: 600px) {
    #reservation-section .form-table th, 
    #reservation-section .form-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #reservation-section .form-table th {
        background: #eee;
        font-weight: bold;
	}
//	#reservation-section::before {
        /* スマホでは高さを半分（50px）にして被りを防ぐ */
//        height: 200px;
        //top: 10px; /* 高さにあわせて位置も調整 */
        //background-size: 50% 50px; /* 背景サイズも高さ50pxに合わせる */
  //  }
}

/* --- アクセス（地図）セクション用のスタイル --- */
#access-section {
    padding: 60px 0;
    background-color: #fff; /* 背景色は白にしています */
	color: #444444;
}

#access-section .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    /* 予約フォームと幅を合わせます */
    box-sizing: border-box; 
}

#access-section .section-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    color: #444444;
}

/* 地図をレスポンシブ（スマホ対応）にする設定 */
#access-section .map-wrap {
    width: 100%;
    text-align: center; /* 地図を中央寄せ */
}

#access-section iframe {
    width: 100%; /* 幅を親要素いっぱいに広げる */
    max-width: 800px; /* パソコンで広がりすぎないように制限 */
    height: 450px; /* 高さは維持 */
    display: block;
    margin: 0 auto; /* 中央配置 */
}

/* --- よくあるご質問（FAQ）の余白調整 --- */

/* 1. 大見出し（「矯正治療について」などの青い線の帯） */
#faq .accordion-group > button {
    /* 元は py-5 (20px) */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* 2. 質問のQ（クリックする部分） */
#faq .accordion-item button {
    /* 元は py-3 (12px) */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 3. 回答のA（開いたときの中身） */
#faq .accordion-content .text-sm.leading-loose {
    /* 元は pb-4 (16px) */
    padding-bottom: 10px !important;
    /* 上の余白も少し詰めたい場合は以下を調整 */
    padding-top: 0 !important; 
}

#reservation-section .form-table tr:last-child th,
#reservation-section .form-table tr:last-child td {
    border-bottom: none;
}

/* --- アクセスセクション（地図）の上部を波状にする --- */

#access-section {
    position: relative; /* 波の配置の基準にします */
    z-index: 10; /* 前のセクションより上に表示されるようにします */
}

#access-section::before {
    content: "";
    position: absolute;
    
    /* PC設定：高さ100px */
    top: -70px; 
    left: 0;
    width: 100%;
    height: 120px;
    
    /* ★波の色を「白（%23ffffff）」に変更したSVG画像 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100'%3E%3Cpath d='M -454.4 50 Q -374.4 50 -294.4 25 Q -134.4 -25 25.6 25 Q 105.6 50 185.6 50 Q 265.6 50 345.6 25 Q 505.6 -25 665.6 25 Q 745.6 50 825.6 50 Q 905.6 50 985.6 25 Q 1145.6 -25 1305.6 25 Q 1385.6 50 1465.6 50 L 1280 100 L 0 100 Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
    
    background-size: 100% 100px; /* 波を2つ並べる */
    background-repeat: repeat-x;
    background-position: center bottom;
    z-index: 1;
}

/* --- 画面下部固定メニュー（スティッキーフッター） --- */
#sticky-footer-menu {
    position: fixed;   /* 画面に固定 */
    bottom: 0;         /* 一番下に配置 */
    left: 0;
    width: 100%;       /* 横幅いっぱい */
    z-index: 9999;     /* 他の要素より手前に表示 */
    
    background-color: #f0fbf9; /* 全体の背景色（薄いミント色） */
    border-top: 1px solid #ddd; /* 上に薄い線 */
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* 影をつけて浮き上がらせる */
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", serif; /* 明朝体 */
}

.sticky-menu-container {
    max-width: 600px; /* PCで見ても横に広がりすぎないように制限 */
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}

/* タイトル */
.menu-title {
    font-size: 16px;
    color: #444;
    margin: 0 0 8px 0;
    font-weight: bold;
}

/* ボタンを横並びにするエリア */
.menu-buttons {
    display: flex;
    gap: 10px; /* ボタン同士の隙間 */
    justify-content: center;
    margin-bottom: 5px;
}

/* ボタン共通設定 */
.btn-sticky {
    flex: 1; /* 2つのボタンを均等な幅にする */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 文字とアイコンを左右に配置 */
    padding: 8px 15px;
    text-decoration: none;
    color: #fff;
    border-radius: 4px; /* 角を少し丸く */
    transition: opacity 0.3s;
}
.btn-sticky:hover {
    opacity: 0.9;
}

/* 左：電話ボタン */
.btn-tel {
    background-color: #555555; /* 濃いグレー */
}

/* 右：Web予約ボタン */
.btn-web {
    background-color: #3bbcb3; /* 水色 */
}

/* ボタンの中身（テキスト部分） */
.btn-content {
    display: flex;
    flex-direction: column; /* 縦並び */
    text-align: left;
    font-family: sans-serif; /* ボタン内の文字はゴシック体が見やすい */
}

.label-small {
    font-size: 10px;
    line-height: 1.2;
}

.label-large {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
}

/* アイコン */
.btn-sticky .icon {
    font-size: 20px;
    margin-left: 5px;
}

/* 下部の注釈 */
.menu-note {
    font-size: 10px;
    color: #666;
    margin: 0;
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 400px) {
    .menu-title { font-size: 14px; }
    .label-large { font-size: 13px; }
    .btn-sticky { padding: 8px 10px; }
}