@charset "utf-8";

/* ==========================================================================
   1. Newsページ・Shop Infoとの統一（背景・全体幅）
   ========================================================================== */
.contact-main-section {
    background-color: #f8f6e7;
    padding-top: 0px !important;    /* パンくずの下の余白を60pxに統一 */
    padding-bottom: 0 !important; 
}

.contact-container {
    max-width: 973px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    padding-top: 0 !important; /* ここも0にします */
}

/* ==========================================================================
   2. 導入文（電話番号・営業時間）の調整
   ========================================================================== */
.contact-intro {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 80px;
    color: #3b2004;
}

/* 「お電話または〜」の行間 */
.contact-intro p:first-child {
    line-height: 2.2 !important;
}

/* 電話番号：色は他と統一、フォントはNewsの日付と同じFutura PT */
.contact-intro .tel {
    display: block;
    font-size: 32px;
    font-weight: 500;
    color: #3b2004 !important;
    font-family: "futura-pt", sans-serif !important;
    letter-spacing: 0.05em;
    /* 上下の余白：3番目の数字(10px)を大きくすると営業時間との間が広がります */
    margin: 30px 0 10px 0 !important;
    line-height: 1.0 !important;
}

/* 「TEL」の文字だけを小さくする設定 */
.contact-intro .tel span {
    font-size: 16px; /* ★ここで高さを調整（数字の半分くらい） */
    font-weight: 500;
    /* 数字よりも少しだけ上に上げたい場合は、↓を有効にして調整してください */
    /* transform: translateY(-2px); */
}

.contact-intro .time {
    font-size: 14px;
    color: #3b2004;
    line-height: 1.8 !important;
}

/* ==========================================================================
   3. フォーム全体のレイアウト
   ========================================================================== */
.contact-form {
    max-width: 973px;
    margin: 0 auto;
}

.form-item {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

/* 左側の項目名：240pxの幅の中で「必須」を右揃えにする */
.form-item > label {
    width: 240px;
    font-size: 14px;
    font-weight: 500;
    color: #3b2004;
    padding-top: 10px;
    flex-shrink: 0;
    letter-spacing: 0.1em;
    
    /* 必須ラベルを右に寄せるための設定 */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-right: 60px; /* 入力欄との隙間 */
    box-sizing: border-box !important;
}

/* 必須ラベルのデザイン */
.required {
    background-color: #3b2004;
    color: #ffffff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   4. 入力エリア（名前・メール・住所など）
   ========================================================================== */
.form-inputs {
    flex: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 通常の入力欄とテキストエリア */
.form-inputs input:not([type="checkbox"]),
.form-inputs textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #3b2004;
    background-color: #ffffff;
    font-size: 16px;
    color: #3b2004;
    box-sizing: border-box;
}

/* ★お名前欄（姓・名）の長方形の幅を調整 */
.name-field {
    /* 画像のイメージに合わせて、全幅の30%程度に設定（お好みで 25%〜35% で調整してください） */
    width: 30% !important; 
    box-sizing: border-box !important;
}

/* 2つの入力欄の並びを「左詰め」にする */
.form-inputs {
    flex: 1;
    display: flex;
    /* 2つの箱の間の隙間。画像に合わせてもう少し広げたい場合はここを 20px 等に変更 */
    gap: 50px; 
    flex-wrap: wrap;
    
    /* 画像は左に寄っているので left または flex-start に */
    justify-content: flex-start !important; 
}

/* ==========================================================================
   5. お問い合わせ項目（チェックボックス）
   ========================================================================== */
.form-inputs .check-list {
    flex: none;
    width: 100%;
    display: block;
    padding-top: 10px;
}

/* 選択肢のラベル：左詰めに戻し、文字と四角を整列 */
.check-list label {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #3b2004 !important;
    cursor: pointer;
    padding-right: 0 !important;
}

.check-list input[type="checkbox"] {
    margin: 0 10px 0 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   6. 送信ボタン（反転アニメーション適用）
   ========================================================================== */
.form-submit {
    text-align: center !important;
    margin-top: 60px !important;
}

/* ボタンそのものへのスタイル（詳細度を高めています） */
/* 最終調整：ボタン幅の強制指定 */
.wpcf7-form .my-new-submit-btn {
    width: 300px !important;       /* 目標の幅 */
    max-width: 300px !important;  /* これでどんな指示も無視します */
    
    padding: 12px 0 !important;
    background-color: #ffffff !important;
    color: #3b2004 !important;
    border: 1px solid #3b2004 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    
    /* 中央配置の維持 */
    display: block !important;
    margin: 0 auto !important;
}

/* ホバー時の反転設定 */
.wpcf7-form .my-new-submit-btn:hover {
    background-color: #3b2004 !important;
    color: #ffffff !important;
    border: 1px solid #3b2004 !important;
    transform: none !important; /* 動きを封印 */
}

/* 古い設定を無効化（重要） */
.form-submit button, .contact-btn {
    background-color: #ffffff !important;
    color: #3b2004 !important;
    border: 1px solid #3b2004 !important;
    transition: none !important;
}

/* ==========================================================================
   7. 送信ボタン下の区切り線
   ========================================================================== */
.contact-bottom-line {
    /* コンテンツ幅を他と合わせる（news-list-container等と同じ） */
    max-width: 973px;
    width: 100%;
    margin: 190px auto 0 !important;
    margin-bottom: 0px; 
    
    margin-left: auto;
    margin-right: auto;
    
    border-top: 1px solid #d1cfc0;
    height: 0;
}

/* スマホ版レイアウトを確実に強制適用 */
@media screen and (max-width: 767px) {
    /* フォーム全体のflex設定を強制リセット */
    .wpcf7-form .form-item, 
    .contact-form .form-item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }
}