/* ========================================
   お問い合わせフォームページ - Figma準拠
======================================== */

.fwd-page-contact {
    min-height: 100vh;
    background-color: #FCFCF2;
}

/* ナビゲーションメニュー - ヘッダーの下に配置 */
.fwd-page-contact .fwd-main-menu {
    position: static;
}

/* ナビゲーションメニュー */
.fwd-page-contact .fwd-nav {
    background: #000000;
    padding: 0;
}

.fwd-page-contact .nav-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

.fwd-page-contact .nav-item {
    flex: 1;
    text-align: center;
    border-bottom: 5px solid transparent;
    transition: all 0.3s ease;
}

.fwd-page-contact .nav-item.active {
    background: #333333;
    border-bottom-color: #a2000d;
}

.fwd-page-contact .nav-item a {
    display: block;
    padding: 20px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Zen Old Mincho', serif;
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.fwd-page-contact .nav-item:hover {
    background: #333333;
}

.fwd-page-contact .nav-item a:hover {
    opacity: 0.8;
}

.fwd-contact-page {
    background: #fcfcf2;
    min-height: 100vh;
    padding: 60px 0 100px;
}

.fwd-contact-page__inner {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 20px;
}

.fwd-contact-page__title {
    font-family: 'Zen Old Mincho', serif;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    margin: 0 0 40px 0;
}

.fwd-contact-page__description {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;
    margin-bottom: 40px;
}

.fwd-contact-page__description p {
    margin: 0;
}

.fwd-contact-page__description p:first-child {
    font-weight: 700;
}

.fwd-contact-form-notice {
    background: #efe4c5;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 40px;
    border-radius: 4px;
}

.fwd-contact-form-notice p {
    font-family: 'Zen Old Mincho', serif;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 20px 0;
}

.fwd-inquiry-type-select {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #ffffff;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    cursor: pointer;
}

/* フォームスタイル */
.fwd-contact-form {
    /* background: #ffffff; */
    padding: 40px;
    /* border: 1px solid #d9d9d9; */
    border-radius: 4px;
}

.fwd-form-required-note {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    color: #a2000d;
    margin: 0 0 30px 0;
}

.fwd-form-group {
    margin-bottom: 30px;
}

.fwd-form-group label {
    display: block;
    font-family: 'Zen Old Mincho', serif;
    font-size: 16px;
    font-weight: 900;
    color: #000000;
    margin-bottom: 8px;
}

.fwd-form-group label .required {
    color: #a2000d;
    margin-left: 4px;
}

.fwd-form-group input[type="text"],
.fwd-form-group input[type="email"],
.fwd-form-group input[type="tel"],
.fwd-form-group input[type="date"],
.fwd-form-group select,
.fwd-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
}

.fwd-form-group textarea {
    resize: vertical;
    min-height: 200px;
}

.fwd-form-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

/* フォーム行レイアウト */
.fwd-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.fwd-form-row--phone input,
.fwd-form-row--zip input {
    flex: 1;
    max-width: 120px;
}

/* 住所フィールド */
.fwd-form-row--address {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.fwd-form-row--address input {
    flex: 0 0 auto;
    max-width: 120px;
}

.fwd-form-label-inline {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
}

/* フォーム注釈 */
.fwd-form-note {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    margin: 8px 0 0 0;
}

.fwd-form-row--email input {
    flex: 1;
}

.fwd-form-row span {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #000000;
}

.fwd-form-col {
    flex: 1;
}

.fwd-form-full {
    width: 100%;
}

/* 商品選択フィールド */
.fwd-form-row--product {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.fwd-form-row--product .product-select {
    flex: 2;
}

.fwd-form-row--product .quantity-select {
    flex: 1;
    max-width: 150px;
}

.fwd-form-row--product .remove-product {
    padding: 8px 16px;
    background: #d32f2f;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.fwd-form-row--product .remove-product:hover {
    opacity: 0.9;
}

.product-item {
    margin-bottom: 12px;
}

/* 商品追加ボタン */
.fwd-btn-add {
    display: inline-block;
    position: relative;
    padding: 12px 40px;
    background: #a2000d;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Zen Old Mincho', serif;
    font-size: 16px;
    font-weight: 600;
    transition: opacity 0.3s ease;
    margin-top: 12px;
}

.fwd-btn-add::before {
    content: '+';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
}

.fwd-btn-add:hover {
    opacity: 0.9;
}

/* ラジオボタン */
.fwd-form-radio {
    display: flex;
    gap: 30px;
}

.fwd-form-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

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

/* フォームセクション */
.form-section {
    margin-bottom: 20px;
}

/* 配達希望日時の横並び */
.fwd-form-row--delivery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.fwd-form-row--delivery .fwd-form-col {
    flex: 1;
}

.fwd-form-row--delivery input[type="date"],
.fwd-form-row--delivery select {
    width: 100%;
    height: 46px;
    padding: 12px 16px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
}

.fwd-form-sublabel {
    display: block;
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #666666;
    margin-bottom: 6px;
}

/* ご注文上の留意点 */
.fwd-order-notice {
    padding: 20px;
    border-radius: 4px;
    margin-top: 20px;
}

.fwd-order-notice__title {
    font-family: 'Zen Old Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
}

.fwd-order-notice__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fwd-order-notice__list li {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
}

.fwd-order-notice__list li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #000000;
}

.fwd-order-notice__list li:last-child {
    margin-bottom: 0;
}

/* 送信ボタン */
.fwd-form-submit {
    text-align: center;
    margin-top: 40px;
}

.fwd-btn--submit {
    display: inline-block;
    width: 380px;
    max-width: 100%;
    padding: 16px 40px;
    background: #a2000d;
    color: #ffffff;
    font-family: 'Zen Old Mincho', serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    position: relative;
}

.fwd-btn--submit::after {
    content: '▶';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.fwd-btn--submit:hover {
    opacity: 0.9;
}

/* 成功・エラーメッセージ */
.fwd-form-success,
.fwd-form-error {
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
    text-align: center;
}

.fwd-form-success {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.fwd-form-error {
    background: #ffebee;
    border: 1px solid #f44336;
    color: #c62828;
}

.fwd-form-success p,
.fwd-form-error p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    margin: 0;
}

/* ========================================
   レスポンシブデザイン - モバイル（1024px以下）
======================================== */
@media (max-width: 1024px) {
    .fwd-contact-page {
        padding: 40px 0 60px;
    }

    .fwd-contact-page__title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .fwd-contact-page__description {
        font-size: 14px;
        line-height: 1.8;
    }

    .fwd-contact-form {
        padding: 20px 0;
    }

    .fwd-contact-form-notice {
        padding: 20px 15px;
        margin-bottom: 30px;
    }

    .fwd-contact-form-notice p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .fwd-inquiry-type-select {
        max-width: 100%;
    }

    /* フォーム共通 */
    .fwd-form-group {
        margin-bottom: 24px;
    }

    .fwd-form-group label {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* フォーム行: デフォルトは横並び維持 */
    .fwd-form-row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    /* 名前フィールド（姓・名）: 横並び維持、均等幅 */
    .fwd-form-row .fwd-form-col {
        flex: 1;
        min-width: 0;
    }

    /* 電話番号: 横並び維持、幅を均等に */
    .fwd-form-row--phone {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .fwd-form-row--phone input {
        flex: 1;
        max-width: none;
        min-width: 0;
    }

    .fwd-form-row--phone span {
        flex-shrink: 0;
        font-size: 14px;
    }

    /* 住所（郵便番号）: 横並び維持、レイアウト改善 */
    .fwd-form-row--address {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .fwd-form-row--address .fwd-form-label-inline {
        flex-shrink: 0;
        font-size: 13px;
    }

    .fwd-form-row--address input {
        flex: 1;
        max-width: 100px;
        min-width: 70px;
    }

    .fwd-form-row--address span {
        flex-shrink: 0;
    }

    /* メール: 横並び維持、幅を均等に */
    .fwd-form-row--email {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .fwd-form-row--email input {
        flex: 1;
        min-width: 0;
    }

    .fwd-form-row--email span {
        flex-shrink: 0;
        font-size: 14px;
    }

    /* 商品選択 */
    .fwd-form-row--product {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fwd-form-row--product .product-select,
    .fwd-form-row--product .quantity-select {
        max-width: 100%;
        width: 100%;
    }

    .fwd-form-row--product .remove-product {
        align-self: flex-start;
    }

    /* 配達希望日時 */
    .fwd-form-row--delivery {
        flex-direction: column;
        gap: 15px;
    }

    /* ラジオボタン */
    .fwd-form-radio {
        flex-direction: column;
        gap: 15px;
    }

    /* 送信ボタン */
    .fwd-btn--submit {
        width: 100%;
        font-size: 18px;
        padding: 14px 20px;
    }

    /* 留意点 */
    .fwd-order-notice {
        padding: 15px;
    }

    .fwd-order-notice__title {
        font-size: 13px;
    }

    .fwd-order-notice__list li {
        font-size: 12px;
        line-height: 1.6;
    }

    /* フォームヘッダー（必須項目 + ダミーボタン） */
    .fwd-contact-form > div[style*="display: flex"] {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* ========================================
   レスポンシブデザイン - 小型スマホ（480px以下）
======================================== */
@media (max-width: 480px) {
    .fwd-contact-page__title {
        font-size: 20px;
    }

    .fwd-contact-page__description {
        font-size: 13px;
    }

    /* iOSのズームを防ぐ */
    .fwd-form-group input[type="text"],
    .fwd-form-group input[type="email"],
    .fwd-form-group input[type="tel"],
    .fwd-form-group input[type="date"],
    .fwd-form-group select,
    .fwd-form-group textarea {
        font-size: 16px;
    }

    /* 電話番号: より小さい画面での調整 */
    .fwd-form-row--phone {
        gap: 6px;
    }

    .fwd-form-row--phone input {
        padding: 10px 8px;
    }

    /* 郵便番号: より小さい画面での調整 */
    .fwd-form-row--address input {
        max-width: 80px;
        padding: 10px 8px;
    }

    /* メール */
    .fwd-form-row--email {
        gap: 6px;
    }

    .fwd-form-row--email input {
        padding: 10px 8px;
    }
}

/* ========================================
   確認ページ
======================================== */

.fwd-contact-confirm {
    max-width: 750px;
    margin: 0 auto;
}

.fwd-contact-confirm__notice {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 40px;
}

.fwd-contact-confirm__notice p {
    margin: 0 0 12px 0;
}

.fwd-contact-confirm__notice p:first-child {
    font-weight: 700;
}

.fwd-confirm-section {
    margin-bottom: 40px;
}

.fwd-confirm-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
}

.fwd-confirm-row:first-child {
    border-top: 1px solid #e0e0e0;
}

.fwd-confirm-label {
    flex: 0 0 200px;
    font-family: 'Zen Old Mincho', serif;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    padding-right: 20px;
}

.fwd-confirm-value {
    flex: 1;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: #000000;
}

.fwd-confirm-value--message {
    white-space: pre-wrap;
}

/* レスポンシブ: 確認ページ（1024px以下） */
@media (max-width: 1024px) {
    .fwd-confirm-row {
        flex-direction: column;
        padding: 15px 0;
    }

    .fwd-confirm-label {
        flex: none;
        margin-bottom: 8px;
        padding-right: 0;
        font-size: 13px;
    }

    .fwd-confirm-value {
        padding-left: 0;
        font-size: 14px;
    }

    .fwd-contact-confirm__notice {
        font-size: 14px;
    }
}

/* レスポンシブ: 確認ページ（480px以下） */
@media (max-width: 480px) {
    .fwd-contact-confirm__notice {
        font-size: 13px;
    }

    .fwd-confirm-label {
        font-size: 12px;
    }

    .fwd-confirm-value {
        font-size: 13px;
    }
}