/* =========================================================
   商品詳細ページ：お問い合わせポップアップのスタイル統一
   ========================================================= */

/* 1. ポップアップ全体の箱をクラシカルに（二重線） */
.fs-c-modal--inquiry .fs-c-modal__inner {
    background-color: #ffffff !important;
    border: 1px solid #d4c6b5 !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(94, 76, 65, 0.2) !important;
    padding: 30px 25px !important;
    position: relative;
}

/* 内側の二重線 */
.fs-c-modal--inquiry .fs-c-modal__inner::before {
    content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px;
    border: 1px solid #d4c6b5; pointer-events: none; z-index: 10;
}

/* 2. ヘッダー（タイトル）と閉じるボタン */
.fs-c-modal--inquiry .fs-c-modal__header {
    text-align: center !important;
    border-bottom: 1px solid #f0e9e1 !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    font-size: 1.2rem !important;
    color: #5e4c41 !important;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif !important; /* 明朝体で上品に */
    font-weight: normal !important;
    display: block !important;
    position: relative; z-index: 20;
}
.fs-c-modal--inquiry .fs-c-modal__close {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    z-index: 20 !important;
}

/* 3. お問い合わせ対象の商品情報エリア */
.fs-c-modal--inquiry .fs-c-inquiryProduct {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    padding: 15px !important;
    background-color: #fcfaf5 !important; /* 淡い背景でまとめる */
    border: 1px solid #e8e2da !important;
    position: relative; z-index: 20;
}
.fs-c-modal--inquiry .fs-c-inquiryProduct__productImage {
    width: 60px !important;
    flex-shrink: 0;
}
.fs-c-modal--inquiry .fs-c-inquiryProduct__productName {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #5e4c41 !important;
    line-height: 1.4 !important;
}

/* 4. 入力フォームのレイアウト */
.fs-c-modal--inquiry .fs-c-inputTable {
    width: 100% !important;
    position: relative; z-index: 20;
}
.fs-c-modal--inquiry .fs-c-inputTable th,
.fs-c-modal--inquiry .fs-c-inputTable td {
    display: block !important; /* 見出しと入力欄を縦積みにする */
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
}
.fs-c-modal--inquiry .fs-c-inputTable th {
    margin-bottom: 8px !important;
}
.fs-c-modal--inquiry .fs-c-inputTable__label {
    font-size: 0.95rem !important;
    color: #5e4c41 !important;
}

/* 必須マークを落ち着いた赤色に */
.fs-c-modal--inquiry .fs-c-requiredMark {
    color: #bf4d4d !important;
    font-size: 1rem !important;
    margin-left: 5px;
    font-weight: normal !important;
}
.fs-c-modal--inquiry .fs-c-inputTable td {
    margin-bottom: 20px !important;
}

/* 入力枠（テキスト・テキストエリア）の装飾 */
.fs-c-modal--inquiry input[type="text"],
.fs-c-modal--inquiry input[type="tel"],
.fs-c-modal--inquiry textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #d4c6b5 !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    color: #5e4c41 !important;
    background-color: #ffffff !important;
    border-radius: 0 !important; /* 角丸を消してクラシカルに */
    transition: border-color 0.3s;
}
.fs-c-modal--inquiry textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* 入力中（フォーカス時）は枠線を濃い茶色に */
.fs-c-modal--inquiry input[type="text"]:focus,
.fs-c-modal--inquiry input[type="tel"]:focus,
.fs-c-modal--inquiry textarea:focus {
    border-color: #5e4c41 !important;
    outline: none !important;
}

/* 5. プライバシーポリシー同意チェックボックス */
.fs-c-modal--inquiry .fs-c-privacyPolicyAgreeField {
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    position: relative; z-index: 20;
}
.fs-c-modal--inquiry input[type="checkbox"] {
    accent-color: #5e4c41 !important; /* ギラつく青をブランドカラーの茶色へ */
    width: 16px; height: 16px;
    cursor: pointer;
    vertical-align: middle;
}
.fs-c-modal--inquiry .fs-c-checkbox__label {
    font-size: 16px !important;
    color: #5e4c41 !important;
    cursor: pointer;
    vertical-align: middle;
}
.fs-c-modal--inquiry .fs-c-checkbox__label a {
    color: #8c7b70 !important;
    text-decoration: underline !important;
}
.fs-c-modal--inquiry .fs-c-checkbox__label a:hover {
    color: #5e4c41 !important;
}

/* 6. お問い合わせ内容を送るボタン（茶色） */
.fs-c-modal--inquiry .fs-c-buttonContainer--sendInquiry {
    text-align: center !important;
    position: relative; z-index: 20;
}
.fs-c-modal--inquiry .fs-c-buttonContainer--sendInquiry button {
    display: block !important;
    width: 100% !important;
    background-color: #5e4c41 !important;
    color: #ffffff !important;
    border: 1px solid #5e4c41 !important;
    padding: 15px 0 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
}

/* ホバーで白背景・茶文字に反転 */
.fs-c-modal--inquiry .fs-c-buttonContainer--sendInquiry button:hover {
    background-color: #ffffff !important;
    color: #5e4c41 !important;
}