/* 生成物: muse-contact-D8.html から build_theme.py で分解。直接編集しない */
/* ═══════════════════════════════════════════════════════════
Contact — 行動の場
面の推移: 舞台(navy) → 純白(記入) → 薄面(実務) → navy(Footer)
明度が段階的に落ちて終点へ着く。フォームだけが最も明るい面に立つ。
開幕は About/Business と同一機構だが、縮尺だけ落とす(下記 --act)。
═══════════════════════════════════════════════════════════ */
/* ── 01 Inquiry: 純白。ページで最も明るい面 ── */
.fm{position:relative;z-index:6;background:#fff;
padding:clamp(76px,11vh,140px) var(--sec-x) clamp(84px,12vh,160px)}
.fm__in{max-width:var(--content-max);margin:0 auto}
/* 二層のテーゼ。英文=Sora 300/青、日本語=Noto Sans JP 700/墨。
Solutions と同じ語法で、ページが変わっても同じ文法で読める */
.fm__en{display:block;margin-top:clamp(18px,2.4vh,26px);
font-family:var(--fd);font-weight:300;
font-size:clamp(21px,2.3vw,36px);line-height:1.24;letter-spacing:-.01em;color:var(--bl)}
.fm__ja{margin-top:clamp(12px,1.6vh,18px);
font-family:var(--fj);font-weight:700;
font-size:clamp(17px,1.7vw,25px);line-height:1.62;letter-spacing:.01em;color:var(--ink)}
.fm__ja .--p{color:var(--bl)}
.fm__g{margin-top:clamp(40px,6vh,72px);
display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,25%,330px);
gap:clamp(34px,4.6vw,88px);align-items:start}
/* ── フォーム本体 ──
ラベルは日本語。プレースホルダを見出し代わりに使うと入力中に消えて
何の欄か分からなくなる。ラベルは常に残す。 */
/* 列は906pxまで開くが、フォーム本体はここで止める。
ラジオを2列に割ると1枚435pxになり、7文字の選択肢に対して面が間延びする。
760pxなら1枚376px。入力欄も1行が長くなりすぎない。 */
.fm__form{max-width:min(100%,760px)}
.fm__f{margin-top:clamp(22px,2.8vh,32px)}
.fm__f:first-child{margin-top:0}
.fm__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.fm__row .fm__f{margin-top:0}
.fm__l{display:flex;align-items:center;gap:9px;
font-family:var(--fj);font-weight:700;font-size:13.5px;letter-spacing:.03em;color:var(--ink)}
.fm__req,.fm__opt{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;
padding:2px 6px;line-height:1.5}
.fm__req{color:var(--bl);border:1px solid rgba(24,71,204,.32)}
.fm__opt{color:var(--muted);border:1px solid var(--line)}
.fm__hint{margin-top:7px;font-size:12px;line-height:1.85;color:var(--muted)}
/* CF7 は各コントロールを span.wpcf7-form-control-wrap で包む。
静的版でも同じ構造を持たせ、本番で組版が動かないようにする */
.wpcf7-form-control-wrap{display:block}
.fm__i,.fm__ta,.fm__sel{
display:block;width:100%;margin-top:10px;
font-family:var(--fj);font-size:15px;line-height:1.7;color:var(--ink);
background:var(--bg);border:1px solid var(--line);border-radius:0;
padding:13px 15px;
transition:border-color .2s ease,background .2s ease;
-webkit-appearance:none;appearance:none;outline:none}
.fm__ta{min-height:clamp(150px,20vh,220px);resize:vertical;line-height:1.95}
.fm__i:focus,.fm__ta:focus,.fm__sel:focus{border-color:var(--bl);background:#fff}
/* 実測 #8493B0 は面(--bg)上で2.76:1。--muted で5.23:1。
入力済みテキスト(--ink 16.28:1)とは十分に差が残る */
.fm__i::placeholder,.fm__ta::placeholder{color:var(--muted)}
.fm__i:focus-visible,.fm__ta:focus-visible,.fm__sel:focus-visible{outline:2px solid var(--bl);outline-offset:2px}
/* ご用件 —— 6択を最初に置く。訪問者が「自分の件を扱っているか」を
最初の一目で確認できる。選択肢は面で示し、選択済みだけ青の罫を持つ */
.fm__radios{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fm__radios .wpcf7-list-item{margin:0;display:block}
.fm__radios label{display:block;cursor:pointer;height:100%}
.fm__radios input{position:absolute;opacity:0;width:0;height:0}
.fm__radios .wpcf7-list-item-label{display:block;height:100%;
padding:13px 15px;background:var(--bg);border:1px solid var(--line);
font-family:var(--fj);font-size:13.5px;line-height:1.55;color:var(--sub);
transition:border-color .2s ease,color .2s ease,background .2s ease}
.fm__radios label:hover .wpcf7-list-item-label{border-color:rgba(24,71,204,.3);color:var(--ink)}
.fm__radios input:checked+.wpcf7-list-item-label{
background:#fff;border-color:var(--bl);color:var(--ink);font-weight:700;
box-shadow:inset 3px 0 0 var(--bl)}
.fm__radios input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--bl);outline-offset:2px}
/* 同意 —— 個人情報の取扱いへの参照。チェックは実体のある四角で示す */
.fm__ok{margin-top:clamp(26px,3.4vh,38px);
border-top:1px solid var(--line);padding-top:clamp(20px,2.6vh,28px)}
.fm__ok .wpcf7-list-item{margin:0}
.fm__ok label{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
font-size:13px;line-height:1.8;color:var(--sub)}
.fm__ok input{flex-shrink:0;width:18px;height:18px;margin-top:2px;
accent-color:var(--bl);cursor:pointer}
.fm__ok a{color:var(--bl);text-decoration:underline;text-underline-offset:3px}
/* CF7 の [submit] は を吐くため、input に ::after は置けない。
矢印はラッパ側に絶対配置する。CF7 の spinner も submit の直後に入るので
ラッパは inline-flex にして、ボタンの隣に並ばせる。 */
.fm__subwrap{position:relative;display:inline-flex;align-items:center;
margin-top:clamp(24px,3.2vh,36px)}
.fm__sub{position:relative;display:inline-flex;align-items:center;min-height:56px;
padding:0 clamp(52px,5vw,68px) 0 clamp(26px,3vw,44px);
background:var(--bl);color:#fff;border:0;border-radius:0;cursor:pointer;
font-family:var(--fj);font-weight:600;font-size:clamp(14px,1.2vw,16px);letter-spacing:.04em;
-webkit-appearance:none;appearance:none;
transition:background .2s ease}
.fm__arr{position:absolute;right:clamp(24px,2.6vw,34px);top:50%;
transform:translateY(-50%);font-style:normal;color:#fff;pointer-events:none;
transition:transform .2s ease}
.fm__subwrap:hover .fm__sub{background:var(--bl2)}
.fm__subwrap:hover .fm__arr{transform:translate(4px,-50%)}
.fm__sub:focus-visible{outline:2px solid var(--bl);outline-offset:3px}
.fm__after{margin-top:clamp(16px,2vh,22px);font-size:12px;line-height:1.9;color:var(--muted)}
/* CF7 の出力(検証メッセージ / スピナー / 応答枠)。
既定の枠線と余白は面の設計に合わないので、ここで面の値に揃える */
.wpcf7-not-valid-tip{display:block;margin-top:7px;
font-family:var(--fj);font-size:12px;letter-spacing:.02em;color:#C22B2B}
.fm__i.wpcf7-not-valid,.fm__ta.wpcf7-not-valid{border-color:#C22B2B}
/* 応答枠は送信前・送信中は出さない。CF7既定CSSにも同じ規則があるが、
そちらが読めなかった場合に空の箱が残るので自前でも持つ */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7-response-output{margin:clamp(18px,2.4vh,24px) 0 0!important;
padding:14px 16px!important;border:0!important;border-left:3px solid var(--bl)!important;
background:var(--bg);font-family:var(--fj);font-size:13px;line-height:1.85;color:var(--ink)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-left-color:#C22B2B!important}
/* スピナーは流れから外す。ラッパ幅がボタン幅と一致しないと、
right 基準の .fm__arr がボタンの外側に出る */
.fm__subwrap .wpcf7-spinner{position:absolute;top:100%;right:0;margin:8px 0 0}
/* ── 別の窓口 ──
ここで受けない件を渡す。同格のカードで並べると入口が6つに割れるので、
本欄の脇に、罫だけの静かな行として置く。 */
.alt{border-top:1px solid var(--ink);padding-top:clamp(16px,2vh,22px)}
.alt__h{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.22em;
text-transform:uppercase;color:var(--muted)}
.alt__i{display:block;padding:clamp(16px,2.2vh,22px) 0;border-bottom:1px solid var(--line);
text-decoration:none}
.alt__i:first-of-type{margin-top:clamp(10px,1.4vh,14px);border-top:1px solid var(--line)}
.alt__t{display:block;font-family:var(--fj);font-weight:700;font-size:13.5px;
letter-spacing:.02em;color:var(--ink)}
.alt__d{display:block;margin-top:5px;font-size:12px;line-height:1.75;color:var(--muted)}
a.alt__i .alt__t::after{content:' ↗';font-size:11px;color:var(--bl);
display:inline-block;transition:transform .2s ease}
a.alt__i:hover .alt__t{color:var(--bl)}
a.alt__i:hover .alt__t::after{transform:translate(2px,-2px)}
.alt__tel{display:block;margin-top:6px;font-family:var(--fd);font-weight:600;
font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
a.alt__tel:hover{color:var(--bl)}
/* ── 02 Company: 一段落ちた面。実務の事実だけ ── */
.ci{position:relative;z-index:6;background:var(--bg);
padding:clamp(66px,9vh,110px) var(--sec-x) clamp(76px,11vh,140px)}
.ci__in{max-width:var(--content-max);margin:0 auto}
/* 値が短い4行なので、罫を1300pxまで引くと面が空く。値の実長に合わせて止める */
.ci__dl{max-width:min(100%,880px);
margin-top:clamp(24px,3.2vh,36px);border-top:1px solid var(--line)}
.ci__row{display:grid;grid-template-columns:clamp(120px,14vw,190px) minmax(0,1fr);
gap:clamp(14px,2vw,32px);
padding-block:clamp(15px,2.2vh,21px);border-bottom:1px solid var(--line)}
.ci__k{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);padding-top:3px}
.ci__v{font-family:var(--fj);font-size:14.5px;line-height:1.85;color:var(--ink)}
.ci__v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ci__v a:hover{color:var(--bl);border-bottom-color:var(--bl)}
.ci__more{display:inline-flex;align-items:center;gap:10px;
margin-top:clamp(22px,3vh,32px);min-height:44px;
font-family:var(--fj);font-weight:600;font-size:14px;
color:var(--bl);text-decoration:none;border-bottom:1px solid var(--bl)}
.ci__more em{font-style:normal;transition:transform .2s ease}
.ci__more:hover em{transform:translateX(4px)}
@media(max-width:900px){
/* ── Contact SP ── */
.fm__g{grid-template-columns:1fr;gap:clamp(40px,7vh,64px)}
.fm__row{grid-template-columns:1fr;gap:clamp(22px,2.8vh,32px)}
.fm__radios{grid-template-columns:1fr}
.fm__subwrap{width:100%}
.fm__sub{width:100%;justify-content:center}
.ci__row{grid-template-columns:1fr;gap:6px}
.ci__k{padding-top:0}
}