/* ===== 大洋電化 下層ページ共通CSS（mock_html 準拠 / base.css の後に読込） =====
about / subsidy / services一覧 / contact / faq で共有する部品。
トークンは base.css の :root、共通部品は .taiyo スコープ。 */
/* ページヘッダー帯（各下層ページ共通） */
.taiyo .phead{background:linear-gradient(150deg,#eef6fc,#e7f2fb 60%,#fce9d6);padding:var(--s8) var(--s5);text-align:center;border-bottom:3px solid var(--orange)}
.taiyo .phead .en{display:inline-block;color:var(--orange-cta);font-weight:800;letter-spacing:.2em;font-size:13px;margin-bottom:var(--s2)}
.taiyo .phead h1{font-size:32px;color:var(--navy);font-weight:900;margin-bottom:var(--s2)}
.taiyo .phead p{font-size:15px;color:var(--muted);font-weight:500;max-width:34em;margin:0 auto}
/* リード（中央寄せ説明。base.css の .lead-c と同義のエイリアス） */
.taiyo .lead{text-align:center;color:var(--muted);font-size:16px;max-width:34em;margin:0 auto var(--s6);font-weight:500}
/* prose（記事本文の最大幅） */
.taiyo .prose{max-width:760px;margin:0 auto}
.taiyo .prose p{margin-bottom:var(--s4);font-size:15.5px}
.taiyo .prose h2{font-size:22px;color:var(--navy);font-weight:900;margin:var(--s6) 0 var(--s3)}
/* グループ小見出し（■付き） */
.taiyo .grp{font-size:16px;font-weight:800;color:var(--navy);margin:var(--s6) 0 var(--s3);padding-left:var(--s3);border-left:5px solid var(--orange)}
/* box（囲み） */
.taiyo .box{background:#fff;border:2px solid var(--line);border-radius:16px;padding:var(--s5);margin-bottom:var(--s5)}
.taiyo .box.green{border-left:5px solid var(--green)}
.taiyo .box.orange{border-left:5px solid var(--orange)}
.taiyo .box h2{margin-top:0}
.taiyo .note{background:var(--cream2);border-radius:12px;padding:var(--s5);font-size:14px;color:var(--muted);margin-top:var(--s6)}
.taiyo .tag{display:inline-block;background:var(--orange-cta);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:12px;margin-bottom:var(--s2)}
/* テーブル（料金・補助の目安） */
.taiyo table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:14px;background:#fff;border-radius:10px;overflow:hidden}
/* 指示書#30：特大時のテーブル横スクロール保護は base.css に定義（サービス詳細は pages.css を読み込まないため全ページ共通の base.css で効かせる） */
.taiyo th{background:var(--navy);color:#fff;padding:9px 12px;text-align:left;font-size:14px}
.taiyo td{padding:9px 12px;border-bottom:1px solid var(--line)}
.taiyo tr:last-child td{border-bottom:none}
.taiyo td.price{color:var(--orange-cta);font-weight:800;text-align:right;white-space:nowrap}
/* 画像付きカード（サービス一覧・橋渡しカード） */
.taiyo .card{border-radius:20px;text-decoration:none;transition:.2s}
.taiyo a.card:hover{transform:translateY(-4px);border-color:var(--orange2);box-shadow:0 12px 28px rgba(19,69,110,.12)}
.taiyo .card .ph{aspect-ratio:4/3;overflow:hidden;background:#fdf6ea}
.taiyo .card .ph img{width:100%;height:100%;object-fit:cover}
.taiyo .card .b{padding:var(--s5);flex-grow:1;display:flex;flex-direction:column}
.taiyo .card h3{font-size:19px;color:var(--navy);margin-bottom:var(--s2);line-height:1.4}
.taiyo .card p{font-size:14.5px;color:var(--muted);flex-grow:1}
.taiyo .card .more{margin-top:var(--s3);color:var(--orange-cta);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;line-height:1.2}
/* 「くわしく」の矢印はCSS三角形で描画（文字グリフだと上寄りになるため）。align-items:centerで上下中央 */
.taiyo .card .more::after{content:"";width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent currentColor;flex:none;position:relative;top:.5px}
/* ===== 私たちのこと（三代のご紹介・資格） ===== */
.taiyo-about .gen{display:flex;gap:var(--s5);align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:18px;padding:var(--s5);margin-bottom:var(--s5)}
.taiyo-about .gen .gph{flex:0 0 96px;width:96px;height:96px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--sky),#dcebf8);display:flex;align-items:center;justify-content:center}
.taiyo-about .gen .gph img{width:100%;height:100%;object-fit:cover}
.taiyo-about .gen .gph span{color:var(--navy2);font-weight:900;font-size:14px;opacity:.6}
.taiyo-about .gen .gbody{min-width:0}
.taiyo-about .gen h3{font-size:19px;color:var(--navy);font-weight:900;margin-bottom:4px}
.taiyo-about .gen .grole{display:inline-block;background:var(--cream2);color:var(--muted);font-size:12px;font-weight:800;padding:2px 10px;border-radius:11px;margin-bottom:var(--s2)}
.taiyo-about .gen p{font-size:14.5px;color:var(--ink)}
.taiyo-about .quals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.taiyo-about .quals li{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--navy)}
.taiyo-about .shopinfo p{margin-bottom:var(--s2);font-size:15px;line-height:1.8}
.taiyo-about .shopinfo .si-name{font-size:18px;font-weight:900;color:var(--navy);margin-bottom:var(--s4)}
.taiyo-about .shopinfo a{color:var(--orange-cta);font-weight:800;text-decoration:none}
/* ===== 補助金（エリア別ブロック） ===== */
.taiyo-subsidy .area{background:#fff;border:2px solid var(--line);border-radius:18px;padding:var(--s5);margin-bottom:var(--s5)}
.taiyo-subsidy .area h3{font-size:19px;color:var(--navy);font-weight:900;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--line)}
.taiyo-subsidy .area .row{margin-bottom:var(--s3);font-size:14.5px}
.taiyo-subsidy .area .row b{color:var(--navy);display:block;font-size:15px;margin-bottom:2px}
.taiyo-subsidy .area .ext{display:inline-flex;align-items:center;gap:6px;color:var(--orange-cta);font-weight:800;text-decoration:none;font-size:14px}
.taiyo-subsidy .area .ext:hover{text-decoration:underline}
/* FAQカテゴリのジャンプリンク：先頭「▸」をCSS三角形で描画し上下中央に */
.taiyo-faq .ext.-jump{display:inline-flex;align-items:center;gap:6px;color:var(--orange-cta);font-weight:800;text-decoration:none}
.taiyo-faq .ext.-jump::before{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent currentColor;flex:none;position:relative;top:.5px}
.taiyo-faq .ext.-jump:hover{text-decoration:underline}
/* ===== FAQ ===== */
.taiyo-faq .qa{background:#fff;border:2px solid var(--line);border-radius:16px;padding:var(--s5);margin-bottom:var(--s5)}
.taiyo-faq .qa .q{display:flex;gap:var(--s3);font-size:17px;font-weight:900;color:var(--navy);line-height:1.6}
.taiyo-faq .qa .q::before{content:"Q";flex:none;width:28px;height:28px;background:var(--navy);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.taiyo-faq .qa .a{display:flex;gap:var(--s3);margin-top:var(--s4);font-size:15px;color:var(--ink);line-height:1.7}
.taiyo-faq .qa .a::before{content:"A";flex:none;width:28px;height:28px;background:var(--orange-cta);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900}
.taiyo-faq .qa .q span,.taiyo-faq .qa .a span{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
/* ===== お問い合わせ ===== */
.taiyo-contact .cta-choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s7)}
.taiyo-contact .choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:var(--s6) var(--s5);text-decoration:none;color:inherit}
.taiyo-contact .choice svg{width:40px;height:40px}
.taiyo-contact .choice.tel svg{fill:var(--orange)}
.taiyo-contact .choice.line svg{fill:var(--lg)}
.taiyo-contact .choice b{font-size:19px;color:var(--navy)}
.taiyo-contact .choice span{font-size:15px;color:var(--muted)}
.taiyo-contact .choice .num{font-size:24px;font-weight:900;color:var(--orange-cta)}
.taiyo-contact .formwrap{max-width:680px;margin:0 auto}
.taiyo-contact .formwrap .mw_wp_form{background:#fff;border:2px solid var(--line);border-radius:18px;padding:var(--s6)}
.taiyo-contact .formnote{font-size:14px;color:var(--muted);margin-top:var(--s4);text-align:center}
/* ===== 施工事例（一覧） ===== */
.taiyo-works .wfilter{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-bottom:var(--s7)}
.taiyo-works .wfilter a{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:22px;padding:8px 18px;text-decoration:none;color:var(--navy);font-weight:800;font-size:14px;transition:.15s}
.taiyo-works .wfilter a:hover,.taiyo-works .wfilter a.active{background:var(--orange-cta);border-color:var(--orange-cta);color:#fff}
.taiyo-works .wcard .ph.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),#dcebf8)}
.taiyo-works .wcard .ph.noimg svg{width:46px;height:46px;fill:var(--navy2);opacity:.5}
.taiyo-works .wcard .wmeta{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s2)}
.taiyo-works .wcard .wcat{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:11px}
.taiyo-works .wcard time{font-size:14px;color:var(--muted);font-weight:700}
.taiyo-works .empty{text-align:center;color:var(--muted);font-weight:700;padding:var(--s7) 0}
@media(max-width:820px){
.taiyo .phead{padding:var(--s6) var(--s5)}
.taiyo .phead h1{font-size:26px}
.taiyo-contact .cta-choices{grid-template-columns:1fr}
.taiyo-about .gen{flex-direction:column;align-items:center;text-align:center}
}
/* 関連導線セクション（.relnav）の余白は base.css に移動（サービス詳細はpages.css非読込のため全ページ共通のbase.cssで定義／指示書#24） */
/* ===== 有資格者ブロック（指示書#25） ===== */
.taiyo-about .qualify .qlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.taiyo-about .qualify .qlist li{padding-left:var(--s5);border-left:3px solid var(--orange);line-height:1.7}
.taiyo-about .qualify .qlist b{display:block;color:var(--navy);font-size:15.5px}
.taiyo-about .qualify .qlist span{font-size:14px;color:var(--muted)}
/* ===== インラインstyleから移設（指示書#28-H：見た目1px不変） ===== */
.taiyo .istory-img{ border-radius:20px; box-shadow:0 14px 30px rgba(19,69,110,.16); margin:0 auto var(--s6); width:100%; max-width:640px; }
.taiyo .shop-photo{ border-radius:16px; box-shadow:0 10px 24px rgba(19,69,110,.14); margin:0 0 var(--s5); width:100%; }
.taiyo-contact .choice.line .num{ color:var(--lg); }
.taiyo-contact .area-note{ text-align:center; color:var(--muted); font-size:14px; max-width:40em; margin:0 auto var(--s6); }
/* .prose h2 / .prose p（詳細度0,2,1）に打ち勝つよう、要素付き(0,2,1)＋ソース順で確実に適用（見た目1px不変） */
.taiyo h2.box-h{ color:var(--navy); font-size:20px; margin-bottom:var(--s3); } /* 旧インライン：.box内の小見出し。font-sizeを20pxに戻す（.prose h2の22pxに勝たせる） */
.taiyo p.enacted{ color:var(--muted); font-size:14px; margin-top:var(--s6); } /* privacy 制定日（.prose p の15.5pxに勝たせる） */
.taiyo-faq .faqcat{ margin:4px 14px 4px 0; }
/* ===== お問い合わせフォーム（MW WP Form）レイアウト整備・指示書#37 ===== */
/* --- 外枠：モバイルは内側余白を控えめに --- */
@media screen and (max-width:820px){
.taiyo-contact .formwrap .mw_wp_form{ padding:var(--s5); }
}
/* --- テーブル本体：はみ出し防止 --- */
.taiyo-contact .formwrap table{
width:100%; max-width:100%; border-collapse:collapse; table-layout:fixed;
}
.taiyo-contact .formwrap th,
.taiyo-contact .formwrap td{
word-break:normal; overflow-wrap:anywhere;
}
/* --- 入力欄の共通スタイル --- */
.taiyo-contact .formwrap input[type="text"],
.taiyo-contact .formwrap input[type="tel"],
.taiyo-contact .formwrap input[type="email"],
.taiyo-contact .formwrap input[type="number"],
.taiyo-contact .formwrap textarea,
.taiyo-contact .formwrap select{
width:100%;
box-sizing:border-box;
padding:12px 14px;
font-size:16px; /* iOSの自動ズーム防止（16px未満にしないこと） */
font-family:inherit;
line-height:1.6;
color:var(--ink);
background:#fff;
border:2px solid var(--line);
border-radius:10px;
}
.taiyo-contact .formwrap textarea{ min-height:140px; resize:vertical; }
.taiyo-contact .formwrap input:focus,
.taiyo-contact .formwrap textarea:focus,
.taiyo-contact .formwrap select:focus{
outline:3px solid var(--orange-cta); outline-offset:1px; border-color:var(--navy);
}
/* --- 電話番号・郵便番号などの分割入力：横並びで収める --- */
.taiyo-contact .formwrap .mwform-tel-field,
.taiyo-contact .formwrap .mwform-zip-field{
display:flex; align-items:center; gap:8px; width:100%;
}
.taiyo-contact .formwrap .mwform-tel-field input,
.taiyo-contact .formwrap .mwform-zip-field input{
width:100%; min-width:0; flex:1 1 0; text-align:center;
}
/* --- 必須バッジ（MW WP Form の 必須：1文字ずつ折れないようにバッジ化）指示書#37-2 --- */
.taiyo-contact .formwrap .req{
display:inline-block; vertical-align:middle; white-space:nowrap;
background:var(--orange-cta); color:#fff;
font-size:11px; font-weight:800; line-height:1;
padding:3px 7px; border-radius:6px; margin-left:6px;
}
/* --- ラジオ・チェックボックス --- */
.taiyo-contact .formwrap .mwform-radio-field,
.taiyo-contact .formwrap .mwform-checkbox-field{
display:inline-block; margin:0 var(--s4) var(--s2) 0;
}
/* --- 送信・確認ボタン --- */
.taiyo-contact .formwrap input[type="submit"],
.taiyo-contact .formwrap button[type="submit"]{
display:inline-flex; align-items:center; justify-content:center;
min-height:56px; padding:0 32px; margin:var(--s3) var(--s2) 0 0;
background:var(--orange-cta); color:#fff;
font-size:17px; font-weight:800; font-family:inherit;
border:none; border-radius:28px; cursor:pointer;
box-shadow:0 5px 0 #9e4711;
}
.taiyo-contact .formwrap input[type="submit"]:hover,
.taiyo-contact .formwrap button[type="submit"]:hover{ filter:brightness(1.05); }
/* --- エラーメッセージ --- */
.taiyo-contact .formwrap .error{
display:block; color:#c0392b; font-size:14px; font-weight:700; margin-top:6px;
}
/* --- デスクトップ：2列表示（ラベル列の幅を確保） --- */
@media screen and (min-width:821px){
.taiyo-contact .formwrap th{
width:30%; min-width:170px;
background:var(--navy); color:#fff;
text-align:left; vertical-align:top;
padding:var(--s4) var(--s4);
font-size:15px; font-weight:800;
border-bottom:2px solid #fff;
}
.taiyo-contact .formwrap td{
padding:var(--s4); vertical-align:top;
border-bottom:1px solid var(--line);
}
}
/* --- モバイル：縦積みに変換（ラベルを入力欄の上へ） --- */
@media screen and (max-width:820px){
.taiyo-contact .formwrap table,
.taiyo-contact .formwrap thead,
.taiyo-contact .formwrap tbody,
.taiyo-contact .formwrap tr,
.taiyo-contact .formwrap th,
.taiyo-contact .formwrap td{
display:block; width:100%; max-width:100%;
}
.taiyo-contact .formwrap tr{
margin-bottom:var(--s5); padding-bottom:var(--s5);
border-bottom:1px solid var(--line);
}
.taiyo-contact .formwrap tr:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.taiyo-contact .formwrap th{
background:transparent; color:var(--navy);
text-align:left; padding:0 0 var(--s3);
font-size:16px; font-weight:800; line-height:1.6;
white-space:normal; word-break:normal;
}
.taiyo-contact .formwrap td{ padding:0; border:none; }
.taiyo-contact .formwrap input[type="submit"],
.taiyo-contact .formwrap button[type="submit"]{
width:100%; margin:var(--s4) 0 0;
}
}
/* ===== お問い合わせページ：フォーム下の余白を詰める（指示書#37 追補）=====
contactは他ページと違い末尾にCTAバンドが無いため、
セクション下余白＋SWELL既定の #content 余白(約106px)が重なって下に大きな白い空白ができる。
contactページ限定で下方向の余白を圧縮する（他ページには影響しない）。 */
.taiyo-contact section{ padding-bottom: var(--s6); }
#body_wrap.page-template-page-contact #content{ margin-bottom: var(--s6); }
/* 補助金ページ 主役ボックス（指示書#41） */
.taiyo-subsidy .hilite{background:var(--sky);border:2px solid var(--navy);border-radius:18px;padding:var(--s5);margin:var(--s5) 0}
.taiyo-subsidy .hilite .badge{display:inline-block;background:var(--orange-cta);color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;padding:5px 14px;border-radius:999px;margin-bottom:var(--s3)}
.taiyo-subsidy .hilite h2.box-h{margin-top:0}
.taiyo-subsidy .hilite .hilite-list{list-style:none;padding:0;margin:var(--s3) 0}
.taiyo-subsidy .hilite .hilite-list li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2);font-size:15px;line-height:1.6}
.taiyo-subsidy .hilite .hilite-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--orange-cta)}
.taiyo-subsidy .hilite .hilite-list li b{color:var(--navy);display:inline-block;min-width:4.5em}
.taiyo-subsidy .hilite .hilite-note{background:#fff;border-radius:12px;padding:var(--s3) var(--s4);font-size:14.5px;margin:var(--s3) 0 0}
.taiyo-subsidy .hilite .ext{display:inline-flex;align-items:center;gap:6px;color:var(--orange-cta);font-weight:800;text-decoration:none;font-size:15px;margin-top:var(--s4)}
.taiyo-subsidy .hilite .ext:hover{text-decoration:underline}
/* 補助金ページ 上部の注意喚起バー（指示書#42） */
.taiyo-subsidy .alertbar{display:flex;gap:var(--s3);align-items:flex-start;background:#fff;border-left:5px solid var(--orange-cta);border-radius:12px;padding:var(--s4);margin:var(--s4) 0}
.taiyo-subsidy .alertbar-icon{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange-cta);color:#fff;font-weight:800;font-size:17px;line-height:26px;text-align:center;margin-top:2px}
.taiyo-subsidy .alertbar p{margin:0;font-size:15px;line-height:1.75}
.taiyo-subsidy .alertbar b{color:var(--navy)}