/* ==========================================================
お問い合わせページ
========================================================== */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;padding:38px 0 0;align-items:start}
/* 用件の選択（ラジオをカードで） */
.purpose{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 34px}
.purpose input{position:absolute;opacity:0;pointer-events:none}
.purpose label{
display:flex;flex-direction:column;gap:7px;padding:18px 16px;border-radius:9px;cursor:pointer;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);position:relative;
transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.purpose label:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.purpose label .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#9C7A34;
background:none;border:1px solid rgba(196,166,108,.5)}
.purpose label b{font-family:var(--serif-jp);font-weight:600;font-size:13px;color:var(--ink-strong)}
.purpose label span{font-size:10.5px;line-height:1.7;color:var(--ink-mute)}
.purpose input:checked + label{
border-color:var(--gold);box-shadow:0 6px 20px rgba(140,110,55,.18),inset 0 0 0 1px var(--gold)}
.purpose input:checked + label::after{
content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;
background:linear-gradient(135deg,#B18F51,#8C6C34)}
.purpose input:focus-visible + label{outline:2px solid var(--gold);outline-offset:3px}
/* フォーム */
.form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field > label{display:flex;align-items:center;gap:9px;font-family:var(--serif-jp);font-weight:600;
font-size:12.5px;letter-spacing:.05em;color:var(--ink-strong)}
.tag-req,.tag-opt{font-size:9.5px;letter-spacing:.08em;padding:3px 8px;border-radius:2px;font-weight:400}
.tag-req{background:#8C6C34;color:#fff}
.tag-opt{background:#F1ECE1;color:var(--ink-mute)}
.field .hint{font-size:10.5px;color:var(--ink-mute);line-height:1.7}
.field input,.field select,.field textarea{
font-family:var(--sans);font-size:14px;color:var(--ink-strong);letter-spacing:.03em;
padding:14px 16px;border-radius:7px;border:1px solid var(--line);background:#fff;
transition:border-color .3s,box-shadow .3s;width:100%}
.field textarea{min-height:150px;line-height:1.9;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#B6AB99}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,170,110,.18)}
.field.is-err input,.field.is-err textarea,.field.is-err select{border-color:#C0563E;box-shadow:0 0 0 3px rgba(192,86,62,.12)}
.field .err{display:none;align-items:center;gap:6px;font-size:11px;color:#B14C35}
.field.is-err .err{display:flex}
.field.is-ok > label::after{content:"";width:13px;height:7px;border-left:1.6px solid #6E9E63;
border-bottom:1.6px solid #6E9E63;transform:rotate(-45deg);margin-left:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* 任意項目の折りたたみ */
.more-fields{border:1px solid var(--line);border-radius:9px;background:#FDFBF6;overflow:hidden}
.more-fields summary{
display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer;list-style:none;
font-size:12.5px;letter-spacing:.05em;color:var(--gold-deep);position:relative}
.more-fields summary::-webkit-details-marker{display:none}
.more-fields summary::after{content:"";position:absolute;right:18px;width:8px;height:8px;
border-right:1.5px solid var(--gold-soft);border-bottom:1.5px solid var(--gold-soft);
transform:rotate(45deg);transition:transform .4s var(--ease)}
.more-fields[open] summary::after{transform:rotate(-135deg)}
.more-fields .inner{padding:4px 18px 20px;display:flex;flex-direction:column;gap:20px}
/* 同意 */
.agree{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.85;color:#5A4B39}
.agree input{width:18px;height:18px;margin-top:3px;accent-color:#8C6C34;flex:none}
.agree a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
/* 送信 */
.submit-row{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:6px}
.submit-row .btn{width:100%;justify-content:center;padding:18px 20px;font-size:14px}
.btn[disabled]{opacity:.42;pointer-events:none;box-shadow:none}
.submit-note{font-size:10.5px;color:var(--ink-mute);text-align:center;line-height:1.8}
/* 入力状況 */
.progress-form{
display:flex;align-items:center;gap:12px;padding:0 2px 16px;
font-size:11.5px;color:var(--ink-mute);letter-spacing:.04em}
.progress-form .bar{flex:1;height:4px;border-radius:99px;background:#EDE5D6;overflow:hidden}
.progress-form .bar i{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,#C4A570,#8A6B33);transition:width .5s var(--ease)}
.progress-form b{font-weight:600;color:var(--gold-deep);font-variant-numeric:tabular-nums}
/* サイド */
.cside{position:sticky;top:86px;display:flex;flex-direction:column;gap:20px}
/* 罫線で区切った一続きの表示 */
.cbox{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0;box-shadow:none}
.cside{gap:22px}
.cside > .cbox:first-child{border-top:0;padding-top:0}
.cbox h3,.cbox .cbox-t{display:flex;align-items:center;gap:9px;font-family:var(--serif-jp);font-weight:600;font-size:13px;
letter-spacing:.06em;color:var(--ink-strong);margin:0 0 14px}
.cbox h3 svg,.cbox .cbox-t svg{color:var(--gold)}
.cbox p{margin:0;font-size:11.5px;line-height:1.9;color:var(--ink-mute)}
.cbox .lead-time{display:flex;align-items:baseline;gap:7px;margin:0 0 10px}
.cbox .lead-time b{font-family:var(--sans);font-weight:600;font-size:30px;font-variant-numeric:tabular-nums;color:#7A5C29}
.cbox .lead-time span{font-size:12px;color:var(--ink-strong)}
.cbox .line-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;
padding:13px 16px;border-radius:6px;font-size:12.5px;color:#fff;
background:linear-gradient(150deg,#3FD97B,#06C755 46%,#04A445);
box-shadow:0 4px 14px rgba(5,150,65,.28);transition:transform .35s var(--ease),box-shadow .35s}
.cbox .line-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(5,150,65,.34)}
.cbox ul{list-style:none;margin:0;padding:0}
.cbox li{border-top:1px solid var(--line-soft)}
.cbox li:first-child{border-top:0}
.cbox li a{display:block;padding:11px 0;font-size:11.5px;line-height:1.7;color:#5A4B39;transition:color .3s}
.cbox li a:hover{color:var(--gold-deep)}
/* サンクス */
.thanks{padding:130px 0 0;text-align:center;position:relative}
.thanks .mark{width:96px;height:96px;border-radius:50%;margin:0 auto 28px;display:grid;place-items:center;
background:none;border:1px solid rgba(196,166,108,.5);box-shadow:none;
animation:pop .7s var(--ease) both}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.thanks .mark svg{color:#8A6B33}
.thanks h1{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3vw,36px);letter-spacing:.05em;
line-height:1.55;margin:0 0 18px;
background:linear-gradient(104deg,#231A0D,#3C2C12 46%,#5E4720 82%,#6B5124);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.thanks .lead-t{font-family:var(--serif-jp);font-size:13.5px;line-height:2.1;color:#5A4B39;margin:0 auto 34px;max-width:34em}
.thanks .recap{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border-radius:8px;
background:linear-gradient(180deg,#FDFBF6,#F9F4EA);border:1px solid var(--line);font-size:12px;color:#5A4B39}
.thanks-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
@media(max-width:1080px){
.cwrap{grid-template-columns:1fr;gap:38px}
.cside{position:static;flex-direction:row;flex-wrap:wrap}
.cside > *{flex:1 1 280px}
.reply3{grid-template-columns:1fr}
}
@media(max-width:720px){
/* 縦積み時は内容の高さで収める */
.cside{flex-direction:column;gap:0}
.cside > *{flex:0 0 auto}
.cbox{padding:22px 0 0}
.cbox:first-child{padding-top:0}
.cbox p:last-child{margin-bottom:0}
.purpose{grid-template-columns:1fr}
/* 横並びにすると見出しが途中で折れるため、アイコンだけ左に置いて右は2段に積む */
.purpose label{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 14px;align-items:center;padding:15px 44px 15px 16px}
.purpose label .ic{grid-row:1/3;align-self:center;justify-self:start}
.purpose label b{grid-column:2}
.purpose label span{grid-column:2}
.purpose input:checked + label::after{top:50%;transform:translateY(-50%);right:16px}
.row2{grid-template-columns:1fr;gap:20px}
.thanks{padding:104px 0 0}
}
/* ==========================================================
ご送信後の流れ（横並びのステップ）
========================================================== */
/* 見出しと左端を揃えた2カラム */
.flow-h{
list-style:none;margin:30px 0 0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:0 60px;position:relative
}
.flow-h li{position:relative;padding-top:34px}
/* 各ステップの上に伸びる罫線 */
.flow-h li::before{
content:"";position:absolute;left:0;right:0;top:15px;height:1px;
background:linear-gradient(90deg,var(--gold-soft),rgba(200,170,110,.28))
}
/* ステップ間の矢印 */
.flow-h li+li::after{
content:"";position:absolute;left:-38px;top:10px;width:10px;height:10px;
border-top:1.2px solid var(--gold-soft);border-right:1.2px solid var(--gold-soft);
transform:rotate(45deg)
}
.flow-h .fh-mark{
position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
display:grid;place-items:center;background:var(--cream);
border:1px solid var(--gold-soft)
}
.flow-h .fh-no{
font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;
font-variant-numeric:tabular-nums;color:var(--gold-deep)
}
.flow-h .fh-body{padding-left:0}
.flow-h h3{
font-family:var(--serif-jp);font-weight:600;font-size:15.5px;letter-spacing:.04em;
color:var(--ink-strong);margin:0 0 10px;line-height:1.6
}
.flow-h p{margin:0;font-size:12.5px;line-height:2;color:var(--ink-mute);max-width:30em}
.flow-h .fh-term{
display:inline-block;margin-top:13px;font-size:10.5px;letter-spacing:.06em;color:var(--gold-deep);
background:#F7F1E4;border:1px solid rgba(200,170,110,.3);border-radius:99px;padding:4px 12px
}
@media(max-width:860px){
.flow-h{grid-template-columns:1fr;gap:0}
.flow-h li{padding-top:26px}
.flow-h li+li{margin-top:26px}
.flow-h li+li::after{left:10px;top:-16px;transform:rotate(135deg)}
}
/* ==========================================================
Contact Form 7
==========================================================
プラグインは、指定したマークアップの内側に span を挟んで出力します。
その差を吸収して、上の元のデザインがそのまま当たるようにします。
========================================================== */
.wpcf7{margin:0}
/* フォーム全体を .form と同じ縦並びにする */
.wpcf7 .wpcf7-form{display:flex;flex-direction:column;gap:22px}
/*
CF7 は改行を と
に自動変換する。
そのままだと項目の中に余分な段落と改行が入り、高さがずれるため無効化する。
*/
.wpcf7 .wpcf7-form p{margin:0;display:contents}
.wpcf7 .wpcf7-form p:empty{display:none}
.wpcf7 .field br,
.wpcf7 .row2 br,
.wpcf7 .agree br{display:none}
/* 注意書きの改行は残す */
.wpcf7 .submit-note br{display:inline}
.wpcf7 .hidden-fields-container{display:none}
/* 送信ボタン下の注意書きは段落のまま扱う */
.wpcf7 .submit-row p.submit-note{display:block}
/* rows 属性ではなく、こちらの高さを使う */
.wpcf7 .field textarea{height:150px}
/*
が挟まるため .field > label が当たらない。同じ体裁を当て直す */
.wpcf7 .field label{
display:flex;align-items:center;gap:9px;
font-family:var(--serif-jp);font-weight:600;font-size:12.5px;letter-spacing:.05em;
color:var(--ink-strong);line-height:1.95
}
/* --- 用件のカード --- */
.wpcf7 .kp-fieldset{border:0;padding:0;margin:0 0 -22px;min-width:0}
.wpcf7 .kp-legend{
font-family:var(--serif-jp);font-weight:600;font-size:13px;letter-spacing:.05em;
color:var(--ink-strong);margin:0 0 14px;padding:0
}
/* プラグインが挟む2つの span をまたいでグリッドを効かせる */
.wpcf7 .purpose{display:block;margin:0 0 34px}
.wpcf7 .purpose .wpcf7-form-control-wrap{display:block}
.wpcf7 .purpose .wpcf7-radio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wpcf7 .purpose .wpcf7-list-item{display:block;margin:0;min-width:0}
.wpcf7 .purpose input{position:absolute;opacity:0;pointer-events:none}
/* label が input を包む形なので、元の「input:checked + label」を再現する */
.wpcf7 .purpose label{
display:flex;flex-direction:column;gap:7px;padding:18px 16px;border-radius:9px;cursor:pointer;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);position:relative;height:100%;
box-sizing:border-box;
transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)
}
.wpcf7 .purpose label:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.wpcf7 .purpose .ic{
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#9C7A34;
background:none;border:1px solid rgba(196,166,108,.5)
}
.wpcf7 .purpose .wpcf7-list-item-label{
font-family:var(--serif-jp);font-weight:600;font-size:13px;color:var(--ink-strong);
display:block;line-height:1.95
}
.wpcf7 .purpose .kp-note{font-size:10.5px;line-height:1.7;color:var(--ink-mute);display:block}
.wpcf7 .purpose .wpcf7-list-item:has(input:checked) label{
border-color:var(--gold);box-shadow:0 6px 20px rgba(140,110,55,.18),inset 0 0 0 1px var(--gold)
}
.wpcf7 .purpose .wpcf7-list-item:has(input:checked) label::after{
content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;
background:linear-gradient(135deg,#B18F51,#8C6C34)
}
.wpcf7 .purpose .wpcf7-list-item:has(input:focus-visible) label{outline:2px solid var(--gold);outline-offset:3px}
/* 入力状況の下余白（元は HTML 側の指定） */
.wpcf7 .progress-form{margin-bottom:2px}
/* --- 入力欄 --- */
/* プラグインが span で包むので、その中の入力欄にも同じ体裁を当てる */
/* span の中で textarea が行内要素として扱われ、下に余白が出るのを消す */
.wpcf7 .field .wpcf7-form-control-wrap{display:block}
.wpcf7 .field textarea,
.wpcf7 .field input,
.wpcf7 .field select{display:block;vertical-align:top}
.wpcf7 .field input,.wpcf7 .field select,.wpcf7 .field textarea{
font-family:var(--sans);font-size:14px;color:var(--ink-strong);letter-spacing:.03em;
padding:14px 16px;border-radius:7px;border:1px solid var(--line);background:#fff;
transition:border-color .3s,box-shadow .3s;width:100%
}
.wpcf7 .field textarea{min-height:150px;line-height:1.9;resize:vertical}
.wpcf7 .field input::placeholder,.wpcf7 .field textarea::placeholder{color:#B6AB99}
.wpcf7 .field input:focus,.wpcf7 .field select:focus,.wpcf7 .field textarea:focus{
outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,170,110,.18)
}
.wpcf7 .field select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#A8874C 50%),linear-gradient(135deg,#A8874C 50%,transparent 50%);
background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
/* --- 同意 --- */
/*
CF7 は [acceptance] の文言を label の中に入れて出力する。
元のデザインの .agree（横並び・チェック18px）をそのまま再現するため、
プラグインが挟む span を素通りさせ、label を .agree として扱う。
*/
.wpcf7 .agree .wpcf7-form-control-wrap,
.wpcf7 .agree .wpcf7-acceptance,
.wpcf7 .agree .wpcf7-list-item{display:block;margin:0}
/* 元は .agree 自体が label。同じ体裁になるよう label 側に当てる */
.wpcf7 .agree{display:block}
.wpcf7 .agree label{
display:flex;align-items:flex-start;gap:9px;cursor:pointer;
font-family:var(--sans);font-weight:400;font-size:12.5px;line-height:1.85;
letter-spacing:.045em;color:#5A4B39
}
.wpcf7 .agree .wpcf7-list-item-label{display:block;font-size:12.5px;line-height:1.85}
.wpcf7 .agree input[type=checkbox]{
width:18px;height:18px;margin-top:3px;accent-color:#8C6C34;flex:none
}
.wpcf7 .agree a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
/* --- 送信ボタン --- */
/* 送信ボタン（元の .btn + .btn--fill + .submit-row .btn と同じ） */
.wpcf7 .submit-row{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:6px}
.wpcf7 .submit-row input[type=submit]{
display:inline-flex;align-items:center;justify-content:center;gap:14px;width:100%;
padding:18px 20px;border:0;border-radius:4px;cursor:pointer;line-height:1.95;
font-family:var(--sans);font-size:14px;letter-spacing:.1em;color:#fff;
background:linear-gradient(135deg,#B18F51,#8C6C34);
box-shadow:0 6px 20px rgba(138,107,51,.26);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s
}
.wpcf7 .submit-row input[type=submit]:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(138,107,51,.34)}
.wpcf7 .submit-row input[type=submit]:disabled{opacity:.42;pointer-events:none;box-shadow:none}
.wpcf7 .submit-row p{margin:0;width:100%;position:relative}
.wpcf7 .wpcf7-spinner{position:absolute;margin-left:10px}
/* 送信ボタンの矢印（元のデザインに合わせる） */
.wpcf7 .submit-row p::after{
content:"";position:absolute;left:50%;top:50%;pointer-events:none;
width:20px;height:1px;background:#fff;opacity:.9;
transform:translate(calc(-50% + 88px),-50%)
}
.wpcf7 .submit-row:has(input:disabled) p::after{opacity:.42}
/* --- エラーと完了 --- */
.wpcf7 .wpcf7-not-valid-tip{
display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#B14C35;line-height:1.7
}
.wpcf7 .wpcf7-not-valid{border-color:#C0563E !important;box-shadow:0 0 0 3px rgba(192,86,62,.12) !important}
.wpcf7 .wpcf7-response-output{
margin:0;padding:14px 18px;border-radius:9px;
font-size:12px;line-height:1.9;border:1px solid var(--line)
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{background:#FBF1EC;border-color:#E2C3B6;color:#8C4A32}
.wpcf7 form.sent .wpcf7-response-output{background:#F1F7F1;border-color:#C7DCC7;color:#3C6B44}
@media(max-width:860px){
.wpcf7 .purpose .wpcf7-radio{grid-template-columns:1fr}
}