/* =========================================================
   フォームCSS改修（安全・レイアウト固定版）
   ========================================================= */

/* フォーム全体の枠幅と中央寄せ */
form,
#enquete-main,
.enquete_area {
   max-width: 720px !important;
   margin: 0 auto !important;
   font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
   color: #333333 !important;
}

/* 入力欄の見出しテキスト装飾 */
.form-head-styled {
   display: block !important; /* inline-block から block に変更して横幅いっぱい使えるようにする */
   font-size: 14px !important;
   font-weight: bold !important;
   color: #333333 !important;
   margin-bottom: 8px !important;
   line-height: 1.6 !important; /* 行間を整えてバッジとの上下位置を綺麗に保つ */
}

/* 必須・任意バッジ */
.badge-req {
   display: inline-block !important;
   background-color: #ba4823 !important;
   /* 朱茶色 */
   color: #ffffff !important;
   font-size: 10px !important;
   font-weight: normal !important;
   padding: 2px 6px !important;
   border-radius: 2px !important;
   margin-left: 6px !important;
   vertical-align: middle !important;
}

.badge-opt {
   display: inline-block !important;
   background-color: #7d7d7d !important;
   color: #ffffff !important;
   font-size: 10px !important;
   font-weight: normal !important;
   padding: 2px 6px !important;
   border-radius: 2px !important;
   margin-left: 6px !important;
   vertical-align: middle !important;
}

/* 入力枠（インプットボックス）の共通デザイン */
input[type="text"],
input[type="email"],
input[type="tel"],
select {
   /* width: 100% !important; */
   max-width: 380px !important;
   height: 38px !important;
   padding: 6px 12px !important;
   margin-top: 4px !important;
   margin-bottom: 8px !important;
   border: 1px solid #c8c8c8 !important;
   border-radius: 3px !important;
   font-size: 13px !important;
   color: #333333 !important;
   box-sizing: border-box !important;
   background-color: #ffffff !important;
}

/* フォーカス時の色 */
input[type="text"]:focus,
select:focus,
textarea:focus {
   border-color: #1a3160 !important;
   outline: none !important;
}

/* プレースホルダーの文字色 */
::placeholder {
   color: #a0a0a0 !important;
   font-size: 12px !important;
}

/* 名前欄の横並び（姓・名 / せい・めい） */
input[name*="name1"],
input[name*="kana1"] {
   width: 48% !important;
   margin-right: 2% !important;
   display: inline-block !important;
}

input[name*="name2"],
input[name*="kana2"] {
   width: 48% !important;
   display: inline-block !important;
}

/* 住所欄の縦一列化 */
select[name*="pref"],
input[name*="address1"],
input[name*="address2"],
input[name*="address3"] {
   display: block !important;
   width: 100% !important;
   max-width: 380px !important;
}

/* 備考欄（textarea） */
textarea {
   width: 100% !important;
   /* max-width: 440px !important; */
   height: 120px !important;
   padding: 8px 12px !important;
   border: 1px solid #c8c8c8 !important;
   border-radius: 3px !important;
   font-size: 12px !important;
   line-height: 1.5 !important;
   box-sizing: border-box !important;
   resize: vertical !important;
}

/* 区切り線の付与 */
hr,
.border_line {
   border: none !important;
   border-bottom: 1px solid #e0dad3 !important;
   margin: 15px 0 !important;
}

/* 【変更後】確認画面へ進む（送信）ボタン */
input[type="submit"],
button[type="submit"] {
   display: block !important;
   width: 220px !important;
   height: 48px !important;
   margin: 30px auto 60px auto !important; /* 下余白を60pxに指定 */
   background-color: #1a3160 !important;
   color: #ffffff !important;
   font-size: 15px !important;
   font-weight: bold !important;
   border: none !important;
   border-radius: 4px !important;
   cursor: pointer !important;
}

/* =========================================================
   インラインスタイル(style="width:53px")強制作用CSS
   ========================================================= */

/* 前半（3桁：ANS2_1） */
input[name="ANS2_1"],
input[name*="zip1"] {
   width: 120px !important;
   max-width: 120px !important;
   min-width: 120px !important;
   display: inline-block !important;
   padding: 6px 12px !important;
   box-sizing: border-box !important;
   text-align: left !important;
}

/* 後半（4桁：ANS2_2） */
input[name="ANS2_2"],
input[name*="zip2"] {
   width: 150px !important;
   max-width: 150px !important;
   min-width: 150px !important;
   display: inline-block !important;
   padding: 6px 12px !important;
   box-sizing: border-box !important;
   text-align: left !important;
}

/* ハイフン（-）の前後余白調整 */
.custom-zip-hyphen,
input[name*="zip"]+span,
input[name*="zip"]~text {
   margin: 0 6px !important;
   font-weight: bold;
   color: #666;
}

/* =========================================================
   電話番号入力欄の幅拡張・左揃えCSS
   ========================================================= */

/* 1つ目・2つ目・3つ目の電話番号入力欄（ANS4_1, ANS4_2, ANS4_3 等に対応） */
input[name*="ANS4_"],
input[name*="tel"] {
   width: 120px !important;
   max-width: 120px !important;
   min-width: 120px !important;
   display: inline-block !important;
   padding: 6px 12px !important;
   box-sizing: border-box !important;
   text-align: left !important;
   /* 左揃え */
}

/* ハイフン前後の中央配置調整 */
input[name*="ANS4_"]+span,
input[name*="tel"]+span {
   margin: 0 4px !important;
   font-weight: bold;
   color: #666;
}

/* メールアドレス・その他の1行入力欄は広めの幅を維持 */
input[name*="mail"],
input[name*="address"] {
   width: 100% !important;
   max-width: 380px !important;
}

/* =========================================================
   休業案内バナー：親要素の幅拡張＆完全中央寄せCSS
   ========================================================= */

/* 画像を包む外側の親div全体を画面幅いっぱい（100%）に拡張 */
div:has(> .vacation-banner-wrapper),
div:has(> img[src*="2608_kyuuka1000.jpg"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
}

/* ラッパー要素の幅と中央揃え */
.vacation-banner-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    text-align: center !important;
    display: block !important;
}

/* 画像本体を左右中央配置 */
img[src*="2608_kyuuka1000.jpg"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* フッターエリアの中央寄せ */


/* =========================================================
   「確認」ボタン下のフッター・案内エリア中央寄せCSS
   ========================================================= */

/* セクション全体の親枠を画面（フォーム）の中央に配置 */
.enquete-section .footer_area,
#footer_haisou {
    width: 100% !important;
    max-width: 1000px !important; /* 他のフォーム幅に合わせて綺麗に収まる最大幅 */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* お支払い・配送案内テーブル自体を中央配置 */
#footer_haisou table.footer1 {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 最下部のサイトマップ等のテキストリンクを中央揃え */
#footer_haisou > p,
.footer_area > p {
    text-align: center !important;
    margin-top: 1.5em !important;
    margin-bottom: 1em !important;
}

/* =========================================================
   フッター案内エリア内の「必須」バッジ非表示指定
   ========================================================= */

/* フッター内の「必須」バッジ自体を非表示 */
#footer_haisou .badge-req,
.footer_area .badge-req {
    display: none !important;
}

/* 「必須」を包んでいるスタイル枠がある場合も一緒に非表示 */
#footer_haisou .form-head-styled,
.footer_area .form-head-styled {
    display: none !important;
}

/* アンケート（チェックボックス）の整列設定 */
input[type="checkbox"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 2px 6px 4px 0 !important;
    float: none !important;
}

/* 備考欄テキストボックス下の注意書き */
.bikou-note-under {
    margin-top: 8px !important;
    font-size: 13px !important;
    /* color: #666666 !important; */
    line-height: 1.6 !important;
}

/* チェックボックス同士の余白と行間の調整 */
input[type="checkbox"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 6px 8px 6px 0 !important; /* 上下に少し余白をプラス */
    float: none !important;
}

/* 改行（br）自体の高さを広げて行間（上下の余白）にゆとりを持たせる */
.enquete-chk-br {
    content: "" !important;
    display: block !important;
    margin-bottom: 10px !important; /* 行同士の空き具合（上下間隔）をここで微調整できます */
}




/* =========================================================
   フォーム枠とフッターエリアの間の余白設定
   ========================================================= */
.enquete-section .footer_area,
#footer_haisou,
.footer_area {
    margin-top: 50px !important; /* フッターの上に50pxの余白を強制的に設ける */
}






/* ==========================================
   スマートフォン表示のみ適用（PCへの影響を防ぐ）
========================================== */
@media (max-width: 768px) {
    /* スマホ時のみ：通常の入力欄と備考欄の幅・余白・位置を完全に揃える */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* padding: 10px 12px !important; */
        border: 1px solid #cccccc !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    /* スマホ時のみ：備考欄（textarea）特有の調整 */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
        display: block !important;
    }
}