@charset "UTF-8";
/* ============================================================
LEDお問い合わせフォーム（Contact Form 7）専用スタイル
対象: CF7ショートコードを含むページ（functions.php で条件付き読み込み）
置き場所: テーマ直下 /wp-content/themes/tnet_theme/led-form.css
※ functions.php 内のインラインCSSから分離（2026-09-09）
画像パスはこのファイルからの相対指定なので img/arrow.svg でよい。
============================================================ */
.ledcf-steps{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 0 28px;font-size:13px;color:#aaa;flex-wrap:wrap}
.ledcf-steps .ledcf-step{padding:5px 16px;border-radius:999px;background:#f0f0f0;color:#999;font-weight:600}
.ledcf-steps .ledcf-step.is-active{background:#2b6cb0;color:#fff}
.ledcf-steps .ledcf-arrow{color:#ccc}
.ledcf-confirm-screen{margin:0 0 10px}
.ledcf-confirm-screen td{white-space:pre-wrap;word-break:break-word}
.ledcf-btn-row{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.ledcf-btn-row .button{margin:0}
/* テーマの .button は背景画像の矢印を right 1rem の位置（幅1.5rem）に置くが、
文字領域の右端は padding-right 2rem までしかなく、差の約8px分だけ
矢印が文字に重なる。右余白を広げて重なりを解消し、
縦位置もテーマの固定値(top 1.6rem)ではなく中央揃えにしている。
左右のボタンで余白を左右対称にすることで、
ボタン幅と矢印の余白が自動的に揃う。 */
.ledcf-btn-row .button{background-position:right 1.1rem center!important;padding-left:2.2rem!important;padding-right:3.2rem!important}
/* 「修正する」は前の画面へ戻る操作なので、右向き矢印を消して
左側に左向きの矢印を置く。矢印の形を送信ボタンと揃えるため、
テーマと同じ画像を水平反転（scaleX(-1)）して使う。 */
/* 【重要・詳細度】1つ上の .ledcf-btn-row .button はクラス2つ、
.ledcf-btn-back はクラス1つなので、!important 同士でも
.ledcf-btn-row .button の左右padding（左2.2rem／右3.2rem）が勝ってしまい、
「修正する」の左余白が広がらず、左端の矢印と文字が重なっていた。
そのため .ledcf-btn-row .button.ledcf-btn-back（クラス3つ）まで
詳細度を上げて確実に上書きする。セレクタを短くしないこと。 */
.ledcf-btn-row .button.ledcf-btn-back{background-color:#8a8a8a!important;color:#fff!important;border-color:transparent!important}
.ledcf-btn-row .button.ledcf-btn-back{background-image:none!important;position:relative;padding-left:3.2rem!important;padding-right:2.2rem!important}
/* 矢印画像はこのCSSファイルからの相対パス。テーマ直下に置く前提。 */
.ledcf-btn-back::before{content:"";position:absolute;left:1.1rem;top:50%;width:1.5rem;height:1.5rem;margin-top:-0.75rem;background-image:url(img/arrow.svg);background-repeat:no-repeat;background-position:center center;background-size:1.5rem auto;transform:scaleX(-1)}
.ledcf-btn-row .button.ledcf-btn-back:hover{background-color:#12325b!important}
.ledcf-complete{text-align:center;padding:40px 10px}
.ledcf-complete .ledcf-check{width:56px;height:56px;line-height:56px;border-radius:50%;background:#2f9e44;color:#fff;font-size:28px;margin:0 auto 18px;display:block}
.ledcf-complete h3{margin:0 0 14px;font-size:20px}
.ledcf-complete p{margin:0;color:#444;line-height:1.8}
.ledcf-fail-msg{display:none;background:#fdecea;color:#c0392b;border:1px solid #f5c6c1;border-radius:4px;padding:14px 16px;margin-bottom:20px;font-size:14px}
.ledcf-email-mismatch{display:none;color:#c0392b;font-size:13px;margin-top:4px}
/* 以下2行は他のCF7フォームに影響させないため、JSが付与する
.ledcf-form-active クラス配下に限定している。特にresponse-outputの
非表示は、無限定だと将来CF7化する一般問い合わせフォームで
エラーメッセージが一切出なくなるため注意。 */
.ledcf-form-active .wpcf7-list-item{display:inline-block;margin:0 14px 8px 0}
.ledcf-form-active .wpcf7-response-output{display:none}
/* --- 入力欄のレイアウト調整 ---
テーマ側の #contact .control .mwform-tel-field .input.herf は
max-width:calc(50% - 18px - 2rem) の引き算で姓・名を横並びにする指定だが、
CF7では input が span.wpcf7-form-control-wrap に包まれ、
ショートコード間の改行も空白として入るため、この幅計算が破綻して折り返す。
そのため横並びは幅計算に依存しない flex で組み直している。
あわせて .control 自体も flex にしている。ショートコードを改行して書くと
内に空白テキストノードが残り、テーマの p{line-height:2} によって
高さのある行ボックスが作られて入力欄の上に余白ができるため。
flex では空白だけのテキストノードはボックスを作らないので、これが解消する。
また table td{vertical-align:middle} と table td p:last-child{margin-bottom:0}
の組み合わせで、補足文の有無により入力欄の上下位置がずれるため余白も揃える。 */
.ledcf-form-active td .control{margin:0;line-height:1;display:flex;flex-direction:column}
.ledcf-form-active td .control.ledcf-name-row{flex-direction:row;flex-wrap:wrap;gap:8px 16px;align-items:center}
.ledcf-form-active .ledcf-name-item{display:flex;align-items:center;gap:8px;flex:1 1 45%;min-width:180px}
.ledcf-form-active .ledcf-name-item .wpcf7-form-control-wrap{flex:1 1 auto;min-width:0}
.ledcf-form-active .ledcf-name-item .input{width:100%;max-width:none;margin:0}
.ledcf-form-active .ledcf-name-item .label_txt{flex:0 0 auto;white-space:nowrap}
.ledcf-form-active td .help{margin:6px 0 0;line-height:1.6}
/* CF7の自動整形により
直後の改行が
に変換され、
flexの子要素として16px分の高さを持ってしまうため非表示にする。
（.help 内の
は意味があるので、.control 直下のみを対象にする） */
.ledcf-form-active td .control > br{display:none}
/* 見出しと入力欄の高さを揃える。
テーマの table td{vertical-align:middle} のままだと、補足文の有無で
セル内容の高さが変わり、見出しと入力欄の位置が行ごとにずれる。
上揃えにしたうえで、見出しの行高を入力欄の高さ(36px)に合わせている。 */
.ledcf-form-active table.sp-block > tbody > tr > th,
.ledcf-form-active table.sp-block > tbody > tr > td{vertical-align:top}
.ledcf-form-active table.sp-block > tbody > tr > th .label{line-height:36px;margin:0}
/* CF7の自動整形は
の中の |