.wpcf7 {
margin: 0 auto;
width: min(1280px, 100%);
text-align: left;
}
.contact-form {
margin: 4em auto 0;
padding: 45px 30px;
background-color: #fdfcfa;
border-radius: 8px;
}
.form-item {
margin-bottom: 25px;
}
.form-item label {
display: block;
font-weight: 500;
color: #4e4a46;
font-size: 14px;
letter-spacing: 0.08em;
transition: color 0.3s ease;
}
.required {
display: inline-block;
font-size: 10px;
padding: 2px 10px;
border-radius: 0;
color: #ffffff;
margin-left: 12px;
vertical-align: middle;
background-color: #c5a880;
font-weight: normal;
letter-spacing: 0.05em;
transition: background-color 0.3s ease;
}
.name-flex {
display: flex;
gap: 20px;
}
.name-field {
flex: 1; 
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px;
    border: 1px solid #e2ded8;
    background-color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    color: #4e4a46;
    margin-top: .8em;
    transition:
        border-color .4s ease,
        background-color .4s ease,
        box-shadow .4s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border-color: #c5a880;
background-color: #faf8f5; 
box-shadow: 0 0 6px rgba(197, 168, 128, 0.15);
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #c5a880;
    background-color: #faf8f5;
    box-shadow: 0 0 6px rgba(197, 168, 128, 0.15);
}

/* ==========================================================================
   2. エラーメッセージ・バリデーション関連
   ========================================================================== */
.contact-form .form-submit {
text-align: center;
width: 100%;
margin-top: 45px;
}
.wpcf7 button[type="submit"],
.wpcf7 button[type="button"] {
display: inline-block;
margin: 0;
min-width: 260px;
width: auto;
background-color: var(--Key-color);
color: var(--white-color);
border: none;
padding: 18px 70px;
font-size: 14px;
font-family: "Noto Serif JP", serif;
font-weight: 700;
letter-spacing: 0.15em;
border-radius: 3px;
cursor: pointer;
transition: background-color .3s ease, opacity .3s ease;
}
.wpcf7 button[type="submit"]:hover,
.wpcf7 button[type="button"]:hover {
opacity: .7;
background-color: var(--font-color);
}
button[type="button"].wpcf7cp-cfm-edit-btn{
background-color: #ecebe9 !important;
color: #6e6a66 !important;
border:none;
}
button[type="button"].wpcf7cp-cfm-edit-btn:hover {
opacity: .7;
background-color: #cac7c0 !important;
border-color: #cac7c0 !important;
color: var(--white-color) !important;
}
@media screen and (max-width: 560px) {
.contact-form .form-submit {
display: block !important;
width: 100% !important;
padding: 0 !important;
}
button[type="submit"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 auto !important;
padding: 18px 20px !important;
font-size: 15px !important;
}
button.wpcf7cp-cfm-edit-btn, 
button.wpcf7cp-cfm-submit-btn,
button[type="button"].wpcf7cp-cfm-edit-btn {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 0 auto !important;
padding: 18px 20px !important;
font-size: 15px !important;
}
}
div.wpcf7cp-btns {
justify-content:center;
}
[data-name="your-last-name"] .wpcf7-not-valid-tip::after { content: "お名前(姓)を入力してください。"; }
[data-name="your-first-name"] .wpcf7-not-valid-tip::after { content: "お名前(名)を入力してください。"; }
[data-name="your-email"] .wpcf7-not-valid-tip::after { content: "メールアドレスを入力してください。"; }
[data-name="your-message"] .wpcf7-not-valid-tip::after { content: "メッセージ本文を入力ください。"; }
.wpcf7 form.invalid .form-item label {
color: #a85d53 !important;
}
.wpcf7 form.invalid .form-item label .required {
background-color: #aa4d41 !important;
}
.wpcf7 form.invalid input:not([type="submit"]).wpcf7-not-valid,
.wpcf7 form.invalid textarea.wpcf7-not-valid {
border-color: #a85d53 !important;
background-color: #fffaf9 !important; 
}
.wpcf7 form .wpcf7-response-output,
div.wpcf7-response-output,
.wpcf7-response-output {
border: 1px solid transparent !important;
background-color: transparent !important;
color: transparent !important;
padding: 16px 20px !important;
margin: 35px auto 0 auto !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
div.wpcf7-response-output.wpcf7-validation-errors {
border: 1px solid #a85d53 !important;
background-color: #fffaf9 !important;
color: #a85d53 !important;
transition: all 0.3s ease;
}
@media screen and (max-width: 898px) {
.contact-form {
padding:0!important;
}
.name-flex {
flex-direction: column;
gap: 0;
}
}
@media screen and (max-width: 898px) {
body.page-id-19 .doubleBorder,
body.page-id-24 .doubleBorder,
body.page-id-26 .doubleBorder {
min-height:600px;
}
body.page-id-19 .contact-form,
body.page-id-24 .contact-form{
width: 90%;
padding: 0;
background-color:none;
border-radius: 8px;
}
body.page-id-24 .contact-form-confirm .back-button {
min-width: 230px !important;
}
}
/* ============================================
   お問い合わせ確認画面
   ============================================ */
.contact-form-confirm {
font-size: 18px !important;
}
.contact-form-confirm .form-item,
.contact-form-confirm .name-flex {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #aa4d41; 
}
.contact-form-confirm label,
.contact-form-confirm .form-item,
.contact-form-confirm .name-field {
color: #aa4d41 !important;
}
.contact-form-confirm label p, .contact-form-confirm .form-item p, .contact-form-confirm .name-field p {
color: var(--font-color) !important;
}
.contact-form-confirm input[type="text"],
.contact-form-confirm input[type="email"],
.contact-form-confirm textarea {
border: none !important; 
background: transparent !important;
box-shadow: none !important;
pointer-events: none;
height: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
resize: none !important;
font-size: 18px !important;
font-weight: 500 !important; 
font-family: inherit !important;
color: var(--font-color) !important; 
}
.contact-form-confirm .name-flex {
display: flex;
gap: 20px;
}
.contact-form-confirm .name-field {
flex: 1;
border: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
}
.contact-form, 
.wpcf7,
.contact-form table,
.contact-form td,
.contact-form th {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
/* ============================================
   サンクスページ（送信完了画面）のデザイン
   ============================================ */
.thanksTitle {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--font-color) !important; 
line-height: 1.8 !important;
margin: 0 auto 1em !important;
width: min(650px, 100%);
}
@media screen and (max-width: 600px) {
.thanksTitle {
text-align:left;
}
}
.thanks-txt {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.8 !important;
margin: 0 auto 1em !important;
text-align: left !important;
width: min(650px, 100%);
}
/* ============================================
   Confirm Plus 確認画面デザインのカスタマイズ
   ============================================ */
body.page-id-19 .doubleBorder {
padding-top:0;
min-height:900px;
}
#wpcf7cpcnf table,
#wpcf7cpcnf tbody {
display: block !important;
width: 100% !important;
border: none !important;
background: none !important;
}
#wpcf7cpcnf tr {
display: inline-block !important;
width: 100% !important;
box-sizing: border-box;
border-bottom: 1px solid #c28876 !important; 
padding: 20px 0 15px 0 !important;
margin-bottom: 15px !important;
font-weight: 600 !important;
}
#wpcf7cpcnf tr:nth-child(1),
#wpcf7cpcnf tr:nth-child(2) {
width: 50% !important;
}
#wpcf7cpcnf th {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 0 !important;
margin: 0 0 5px 0 !important;
border: none !important;
background: none !important;
}
#wpcf7cpcnf td {
display: block !important;
width: 100% !important;
padding: 0 !important;
border: none !important;
background: none !important;
}
#wpcf7cpcnf td p {
font-size: 16px !important;
color: var(--font-color) !important;
font-weight: 500 !important;
margin: 0 !important;
line-height: 1.5 !important;
position: relative !important;
word-break: break-all !important; 
overflow-wrap: break-word !important;
}
div#wpcf7cpcnf tr td p::before {
content: "姓：";
position: absolute !important;
top: -1.5em !important;
left: 0 !important;
width: 100% !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #aa4d41 !important; 
}
div#wpcf7cpcnf tr:nth-child(2) td p::before {
content: "名：";
}
div#wpcf7cpcnf tr:nth-child(3) td p::before {
content: "メールアドレス：";
}
div#wpcf7cpcnf tr:nth-child(4) td p {
padding-top: 1.5em;
}
div#wpcf7cpcnf tr:nth-child(4) td p::before {
content: "メッセージ本文：";
top: 0em !important;
}
#wpcf7cpcnf tr:nth-child(4) td {
display: block !important;
width: 100% !important;
max-height: 300px !important;
overflow-y: auto !important;
border: 1px solid #e2ded8;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px !important;
box-sizing: border-box !important;
}
@media screen and (max-width: 767px) {
#wpcf7cpcnf tr:nth-child(4) td {
max-height: 250px !important;
}
}
#wpcf7cpcnf tr:nth-child(4) td::-webkit-scrollbar {
width: 6px;
}
#wpcf7cpcnf tr:nth-child(4) td::-webkit-scrollbar-thumb {
background-color: #c28876;
border-radius: 3px;
}
@media screen and (max-width: 767px) {
#wpcf7cpcnf tr:nth-child(1),
#wpcf7cpcnf tr:nth-child(2) {
width: 100% !important;
margin-right: 0 !important;
}
}
.message_from{
font-size: 12px !important;
color: #a85d53 !important;
font-weight: 500 !important;
letter-spacing: 0.05em;
padding-top:.5em;
padding-left:1em;
}
@media screen and (max-width: 700px) {
.message_from{
display: block;
padding-left:0;
}
}
.wpcf7-not-valid-tip {
padding-top:.3em;
color: #aa4d41!important;
font-size: 14px!important;
}