@charset "UTF-8";


.contact-container {
    max-width: 960px; /* デザインに合わせて調整 */
    margin: 40px auto;
    background-color: #fff;
    padding: 0; /* 全体的なpaddingは削除し、セクションやrowで制御 */
    border-radius: 0; /* デザインに合わせた角丸なし */
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif; /* フォントをコンテナに適用 */
    color: #333;
    line-height: 1.6;
}

/* 各セクションの見出し (お客様の情報を記入してください, お問い合わせの詳細な内容を記入してください) */
.form-section h3 {
    background-color: #555; /* 濃いグレーの背景 */
    color: #fff; /* 白抜き文字 */
    text-align: center; /* 中央揃えに修正 */
    font-size: 1.2em; /* デザインに合わせる */
    font-weight: normal; /* 太さを抑える */
    padding: 15px 30px; /* パディングを調整 */
    margin-top: 0; /* 上部マージンをなくす */
    margin-bottom: 0; /* 下部マージンをなくす */
}

.form-row {
    /* form-row自体はFlexboxとして設定しない */
    position: relative; /* 子要素の配置用 */
}

/* form-row内のpタグにFlexboxを適用し、横並びを制御 */
.form-row p {
    display: flex; /* Flexboxで横並び */
    align-items: center; /* 項目名と入力フィールドを縦方向中央揃え */
    padding: 25px 30px; /* 上下のパディングを調整 (PC版約50px余白) */
    border-bottom: 1px dashed #ddd; /* 項目ごとの点線 */
    margin: 0; /* pタグのデフォルトマージンを削除 */
    gap: 20px; /* ラベルと入力フィールド間の隙間 */
}

/* 各form-section内の最後のform-rowのpタグには点線を引かない */
.form-section .form-row:last-of-type p {
    border-bottom: none;
}

/* labelの後に挿入される<br>タグを非表示にする */
.form-row p br {
    display: none;
}

/* Contact Form 7の<label>はデフォルトで生成されるため、直接スタイルを当てます */
.form-row p label { /* pタグの子要素として指定 */
    flex: 0 0 160px; /* 項目名の幅を固定、デザインに合わせて調整 */
    font-weight: normal; /* デザインに合わせて太さをなくす */
    color: #333; /* 文字色を調整 */
    display: flex; /* 「必須」をラベル内に配置するため */
    align-items: center; /* 「必須」とラベルを縦方向中央揃え */
    font-size: 1em;
    padding-right: 0; /* 余計なパディングを削除 */
    margin-right: 0; /* 余計なマージンを削除 */
    white-space: nowrap; /* テキストが改行しないように */
}

.required {
    /* 赤枠線に赤文字 */
    border: 1px solid #e74c3c;
    color: #e74c3c;
    background-color: transparent; /* 透明な背景 */
    padding: 4px 10px; /* パディングを大きく (デザインに合わせる) */
    border-radius: 0; /* 角丸なし */
    font-size: 0.85em; /* フォントサイズを大きく (デザインに合わせる) */
    margin-left: 8px; /* ラベルとの間隔 */
    white-space: nowrap;
    line-height: 1; /* 行の高さを調整 */
    display: inline-block; /* パディングが正しく適用されるように */
}

/* Contact Form 7が生成するinput, select, textareaタグをラップするspanにスタイルを適用 */
.form-row p span.wpcf7-form-control-wrap { /* pタグの子要素として指定 */
    flex-grow: 1; /* 残りのスペースを埋める */
    max-width: 400px; /* デフォルトの入力フィールドの最大幅 */
    display: block !important; /* 強制的にブロック要素にする (Flexアイテムとして正しく振る舞うため) */
    width: auto !important; /* Flexアイテムとして機能させるため */
}

/* 特定の入力フィールドの幅を調整 */
/* メールアドレス */
.form-row p span[data-name="your-email"] { /* セレクタをさらに具体的に */
    max-width: none !important; /* 最大幅の制限を強制的に解除 */
    flex-grow: 1 !important; /* 残りのスペースを全て埋める、強制適用 */
}
/* お問い合わせ詳細 */
.form-row p span[data-name="your-message"] { /* セレクタをさらに具体的に */
    max-width: none !important; /* 最大幅の制限を強制的に解除 */
    flex-grow: 1 !important; /* 残りのスペースを全て埋める、強制適用 */
}

/* Contact Form 7が生成するinput, select, textareaタグに直接スタイルを適用 */
.form-row p input.wpcf7-text, /* pタグの子要素として指定 */
.form-row p input.wpcf7-email,
.form-row p input.wpcf7-tel,
.form-row p select.wpcf7-select,
.form-row p textarea.wpcf7-textarea {
    flex-grow: 1; /* 親のspan内で残りのスペースを埋める */
    padding: 10px 12px; /* パディングを調整 */
    border: 1px solid #ccc;
    border-radius: 3px; /* デザインに合わせて少し角丸 */
    font-size: 0.95em; /* フォントサイズを調整 */
    box-sizing: border-box;
    width: 100% !important; /* 親のspanの幅いっぱいに広がるように、強力に適用 */
    height: auto; /* 高さを自動調整 */
}

/* プレースホルダーのスタイル */
.form-row p input.wpcf7-text::placeholder,
.form-row p input.wpcf7-email::placeholder,
.form-row p input.wpcf7-tel::placeholder {
    color: #aaa;
    font-size: 0.9em; /* プレースホルダーのフォントサイズ調整 */
}

.form-row p textarea.wpcf7-textarea {
    min-height: 120px; /* 高さを調整 */
    resize: vertical;
}

/* selectタグのデフォルトの矢印を非表示にし、カスタム矢印を適用 */
.form-row p select.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23777%22%20d%3D%22M192%20256L64%20128v256l128-128z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center; /* 矢印の位置調整 */
    background-size: 10px; /* 矢印のサイズ調整 */
    padding-right: 30px; /* 矢印との重なりを防ぐ */
}

/* Contact Form 7のバリデーションメッセージ用スタイル */
div.wpcf7-response-output {
    margin: 1em 30px; /* 左右にパディング */
    padding: 0.8em 1em;
    border: 2px solid #00a0d2;
    font-size: 1em;
    line-height: 1.5;
    text-align: center;
}

div.wpcf7-response-output.wpcf7-validation-errors {
    border-color: #f7e6e6;
    background-color: #ffebe8;
    color: #c00;
}
div.wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: #c9d7be;
    background-color: #dff0d8;
    color: #468847;
}

/* 個人情報取り扱いセクション */
.privacy-policy-section {
    background-color: #fff; /* 白背景 */
    padding: 0; /* セクション全体のパディングは削除、内部要素で調整 */
    margin-top: 30px; /* 上部マージン */
    text-align: center;
}

/* 個人情報セクションの見出し */
.privacy-policy-section .section-title { /* HTML上はpタグだが、見出しとして扱う */
    background-color: #555; /* 濃いグレーの背景 */
    color: #fff; /* 白抜き文字 */
    font-size: 1.2em; /* デザインに合わせる */
    font-weight: normal; /* 太さをなくす */
    padding: 15px 30px; /* パディングを調整 */
    margin-bottom: 40px; /* 下部にマージン */
    text-align: center; /* 中央揃えに修正 */
}

/* プライバシーポリシーのメインテキスト */
.privacy-text {
    line-height: 1.7;
    margin: 0 30px 0; /* 左右にパディング、下部マージンは削除 */
    text-align: center; /* 中央寄せ */
}

/* HTML構造に基づいたテキストの調整 */
.privacy-policy-section > p:nth-of-type(2) { /* "ご入力いただいたお客様の情報は..." のpタグ */
    border-top: none !important; /* 強制的に点線を削除 */
}
.privacy-policy-section > p:nth-of-type(3) { /* "個人情報の取り扱いへの同意確認" のpタグ */
    margin-bottom: 20px; /* 同意チェックボックスとの間隔 */
}

/* 「個人情報の取り扱いへの同意事項」とチェックボックスのエリア */
.privacy-agreement { /* このdivは不要なFlexbox指定を削除 */
    /* display: flex; を削除 */
    /* flex-direction: column; を削除 */
    /* justify-content: center; を削除 */
    /* align-items: center; を削除 */
    margin: 0 30px 30px; /* 左右にマージン、下部にマージン */
    padding: 0; /* パディングを削除 */
    /* border-top/bottomも削除。直接の子pタグで制御 */
}

/* 同意確認チェックボックスをラップするpタグに点線と中央揃えを適用 */
.privacy-agreement p {
    display: flex !important; /* Flexboxで中央揃え */
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 0 !important; /* 上下のパディング */
    margin: 0 !important; /* pタグのデフォルトマージンを削除 */
    width: 100% !important; /* 親要素の幅いっぱいに広げる */
}

/* Contact Form 7のacceptanceショートコードが生成するラベルとチェックボックスにスタイルを適用 */
.privacy-agreement .wpcf7-list-item {
    margin: 0 !important; /* デフォルトマージンをリセット */
    padding: 0 !important; /* デフォルトパディングをリセット */
    list-style: none !important; /* リストスタイルを削除 */
    text-align: center !important; /* 中央揃え */
}

.privacy-agreement .wpcf7-list-item-label { /* acceptanceショートコードが生成するラベル */
    font-size: 1em !important;
    display: inline-flex !important; /* チェックボックスとラベルを横に並べる */
    align-items: center !important;
    cursor: pointer !important;
    color: #333 !important; /* 文字色を調整 */
}

/* チェックボックスそのもののスタイル */
.privacy-agreement input.wpcf7-acceptance {
    margin-right: 8px !important; /* チェックボックスとテキストの間隔 */
    transform: scale(1) !important; /* サイズは調整しない */
    cursor: pointer !important;
    width: auto !important; /* 自動幅 */
    height: auto !important; /* 自動高さ */
}

.form-submit-row { /* 送信ボタンのラッパー */
    text-align: center !important;
    margin-top: 0 !important; /* 上部マージンを調整 */
}

/* Contact Form 7が生成するsubmitボタンにスタイルを適用 */
.form-submit-row input.wpcf7-submit {
    display: inline-block !important;
    width: 200px !important; /* 幅を調整 */
    padding: 12px 25px !important; /* パディングを調整 */
    background-color: #fff !important; /* 白背景 */
    color: #555 !important; /* 文字色 */
    border: 1px solid #888 !important; /* グレー枠線 */
    border-radius: 3px !important; /* 角丸を調整 */
    font-size: 1.05em !important; /* フォントサイズ */
    cursor: pointer !important;
    transition: all 0.3s ease !important; /* ホバーアニメーション */
}

.form-submit-row input.wpcf7-submit:hover {
    background-color: #f2f2f2 !important; /* ホバー時の背景色 */
    border-color: #555 !important; /* ホバー時の枠線色 */
    color: #333 !important; /* ホバー時の文字色 */
}

/* ========================================================== */
/* スマートフォン向けレスポンシブデザイン */
/* ========================================================== */
@media (max-width: 768px) {
    .contact-container {
        margin: 20px auto !important;
        padding: 0 !important; /* スマートフォン向けに全体パディングを削除 */
        box-shadow: none !important; /* スマートフォンでは影をなくす */
        border-radius: 0 !important;
    }

    .form-section h3 {
        font-size: 1.1em !important;
        padding: 12px 20px !important;
        margin-bottom: 0 !important; /* マージンを調整 */
    }

    .form-row p { /* form-row内のpタグにFlexboxを適用し、縦並びにする */
        flex-direction: column !important; /* 項目名が上で入力フィールドが下 */
        align-items: flex-start !important; /* 左寄せ */
        gap: 5px !important; /* 隙間を小さく */
        padding: 15px 20px !important; /* スマートフォン向けにパディングを調整（上下を狭く）、!importantで強制適用 */
        margin: 0 !important; /* pタグのデフォルトマージンを削除 */
    }

    /* 各セクションの最後のform-rowのpタグには点線を引かない */
    .form-section .form-row:last-of-type p {
        border-bottom: none !important;
    }

    .form-row p br { /* スマートフォンではbrタグを非表示 */
        display: none !important;
    }

    .form-row p label { /* pタグの子要素として指定 */
        flex: 0 0 auto !important; /* スマートフォンではflex-basisをautoに！ */
        width: 100% !important; /* 幅を100%に */
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        font-size: 0.95em !important;
        white-space: normal !important; /* スマートフォンでは改行を許可！ */
    }

    .required {
        margin-left: 5px !important; /* 間隔を調整 */
        padding: 2px 6px !important; /* スマートフォン向けにパディングを調整 */
        font-size: 0.75em !important; /* スマートフォン向けにフォントサイズを調整 */
    }

    /* Contact Form 7が生成するinput, select, textareaタグをラップするspanにスタイルを適用 */
    .form-row p span.wpcf7-form-control-wrap { /* pタグの子要素として指定 */
        width: 100% !important; /* スマートフォンで幅いっぱいに、強制適用 */
        max-width: none !important; /* スマートフォンではmax-widthを解除 */
        display: block !important;
    }

    .form-row p input.wpcf7-text, /* pタグの子要素として指定 */
    .form-row p input.wpcf7-email,
    .form-row p input.wpcf7-tel,
    .form-row p select.wpcf7-select,
    .form-row p textarea.wpcf7-textarea {
        width: 100% !important; /* 入力フィールドの幅を100%に、強制適用 */
        padding: 8px 10px !important; /* スマートフォン向けにパディングを調整 */
        font-size: 0.9em !important;
    }

    /* selectタグのカスタム矢印の位置調整 */
    .form-row p select.wpcf7-select {
        background-position: right 8px center !important;
        background-size: 9px !important;
        padding-right: 25px !important;
    }

    .form-row p textarea.wpcf7-textarea {
        min-height: 100px !important; /* スマートフォン向けに高さを調整 */
    }

    .privacy-policy-section {
        padding: 0 !important; /* 全体パディングは削除 */
        margin-top: 30px !important;
    }

    .privacy-policy-section .section-title {
        font-size: 1.1em !important;
        padding: 12px 20px !important;
        margin-bottom: 25px !important; /* 下部マージンを調整 */
    }

    .privacy-text {
        font-size: 0.9em !important;
        margin: 0 20px 15px !important; /* 下部マージンを調整 */
    }

    /* privacy-textの直後のpタグ（"ご入力いただいたお客様の情報は..."）の点線を削除 */
    .privacy-policy-section > p:nth-of-type(2) {
        border-top: none !important; /* スマートフォンでも強制的に点線を削除 */
        margin-bottom: 25px !important; /* 余白を調整 */
    }

    .privacy-agreement {
        padding: 0 !important; /* privacy-agreement自体からはpaddingを削除 */
        margin: 0 20px 20px !important; /* 左右にマージン、下部にマージン */
    }
    
    /* privacy-agreement内のpタグを調整 */
    .privacy-agreement p:first-of-type {
        flex-direction: column !important; /* 同意事項のテキストとチェックボックスを縦並びにする */
        align-items: center !important; /* 中央揃え */
        gap: 10px !important; /* 隙間を調整 */
        padding: 15px 0 !important; /* スマートフォン向けにパディングを調整、!importantで強制適用 */
    }


    .privacy-agreement .wpcf7-list-item-label {
        font-size: 0.95em !important;
    }

    .form-submit-row {
        padding-bottom: 30px !important;
        margin-top: 0 !important; /* 上部マージンを調整 */
    }

    .form-submit-row input.wpcf7-submit {
        width: 90% !important; /* ボタンも幅90%に */
        padding: 10px 20px !important;
        font-size: 1em !important;
    }
}

/* さらに小さいスマートフォン向け (任意) */
@media (max-width: 480px) {
    .contact-container {
        margin: 15px auto !important;
    }

    .form-section h3 {
        font-size: 1em !important;
        padding: 10px 15px !important;
    }

    .form-row p { /* form-row内のpタグを調整 */
        padding: 12px 15px !important; /* スマートフォン向けにパディングを調整、!importantで強制適用 */
        gap: 4px !important;
    }

    .form-row p label { /* pタグの子要素として指定 */
        font-size: 0.85em !important;
    }

    .required {
        font-size: 0.65em !important;
        padding: 1px 4px !important;
    }

    .form-row p input.wpcf7-text, /* pタグの子要素として指定 */
    .form-row p input.wpcf7-email,
    .form-row p input.wpcf7-tel,
    .form-row p select.wpcf7-select,
    .form-row p textarea.wpcf7-textarea {
        font-size: 0.85em !important;
        padding: 7px 8px !important;
    }

    .form-row p select.wpcf7-select {
        background-position: right 6px center !important;
        background-size: 8px !important;
        padding-right: 20px !important;
    }

    .form-row p textarea.wpcf7-textarea {
        min-height: 80px !important;
    }

    .privacy-policy-section {
        padding: 0 !important;
        margin-top: 25px !important;
    }

    .privacy-policy-section .section-title {
        font-size: 1em !important;
        padding: 10px 15px !important;
        margin-bottom: 20px !important;
    }

    .privacy-text {
        font-size: 0.8em !important;
        margin: 0 15px 15px !important;
    }
    .privacy-policy-section > p:nth-of-type(2) {
        margin-bottom: 20px !important; /* 余白を調整 */
    }

    .privacy-agreement {
        padding: 0 !important;
        margin: 0 15px 15px !important; /* スマートフォンでも左右マージンを適用 */
    }

    .privacy-agreement p:first-of-type {
        padding: 10px 0 !important;
    }

    .privacy-agreement .wpcf7-list-item-label {
        font-size: 0.85em !important;
    }

    .form-submit-row {
        padding-bottom: 25px !important;
        margin-top: 0 !important;
    }

    .form-submit-row input.wpcf7-submit {
        width: 90% !important;
        padding: 8px 15px !important;
        font-size: 0.9em !important;
    }
}
.wpcf7-spinner {
    display: block!important;
}
.doui label {
    padding: 15px 50px;
    border: 1px solid #ccc;
    display:inline-block;
}

form.wpcf7-form input[type="submit"] {
    margin: 30px 0 50px 0;
}