/*
Theme Name: HOUTOKU OKINAWA
Theme URI: https://houtoku-okinawa.co.jp/
Author: KODACHI
Description: 株式会社ホウトク沖縄 オリジナルテーマ（太陽光発電・蓄電池・エコキュート・カーポート）
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: houtoku
*/

/* ページごとのデザインCSSは assets/css/ にあります。ここはWordPress化で追加した分だけです。 */

/* 管理バー表示中（ログイン時）のヘッダー位置 */
@media screen and (min-width:600px){.admin-bar .hd{top:46px}.admin-bar .mn{top:46px}}
@media screen and (min-width:783px){.admin-bar .hd{top:32px}.admin-bar .mn{top:32px}}

/* ページ送り */
.pgn .dots{background:none!important;border-color:transparent!important;color:var(--t)!important}
.pgn a:hover{border-color:var(--gd)}

/* 施工実績ギャラリー（リンク付き） */
.wkg a{display:block}

/* コラムのカテゴリ（選択中） */
.cats a[aria-current]{background:var(--gd);border-color:var(--gd);color:#000!important}

/* Instagram 公式埋め込み */
.ig-embeds{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:28px;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.ig-embeds .instagram-media{flex:0 0 min(326px,84%)!important;width:min(326px,84%)!important;min-width:0!important;max-width:none!important;margin:0!important;scroll-snap-align:center;border-radius:14px!important;background:#fff}

/* 投稿・施工実績の詳細 */
.entry{line-height:1.9}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ac,var(--gold))}
.entry-meta span{padding:3px 10px;border:1px solid currentColor;border-radius:999px;font-size:11px}
.entry-place{margin-top:10px;font-size:14px;font-weight:700}
.entry-eye{margin-top:20px}
.entry-eye img{width:100%;height:auto;border-radius:18px;display:block}
.entry-body{margin-top:26px;font-size:15px}
.entry-body>*+*{margin-top:1.2em}
.entry-body h2{margin-top:2em;padding-bottom:10px;border-bottom:2px solid var(--gd);font-size:21px;line-height:1.5;font-weight:900}
.entry-body h3{margin-top:1.8em;padding-left:12px;border-left:4px solid var(--gd);font-size:18px;line-height:1.5;font-weight:900}
.entry-body h4{margin-top:1.6em;font-size:16px;font-weight:900}
.entry-body a{color:var(--ac,var(--gold));text-decoration:underline}
.entry-body img{max-width:100%;height:auto;border-radius:12px}
.entry-body ul,.entry-body ol{padding-left:1.4em}
.entry-body li+li{margin-top:.4em}
.entry-body blockquote{padding:14px 18px;border-left:3px solid var(--gd);background:rgba(127,127,127,.08);border-radius:0 12px 12px 0}
.entry-body table{width:100%;border-collapse:collapse;font-size:13.5px}
.entry-body th,.entry-body td{padding:10px;border:1px solid var(--ln,var(--line));text-align:left;vertical-align:top}
.entry-body figure{margin-left:0;margin-right:0}
.entry-body figcaption{margin-top:6px;font-size:12px;opacity:.7}
.entry-body iframe{max-width:100%}
.entry-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;font-size:13px;font-weight:700}
.entry-back{margin-top:32px}

/* Contact Form 7（デザインのフォームに合わせる。CF7標準CSSは読み込まない） */
.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;word-wrap:normal!important}
.wpcf7 .hidden-fields-container,.wpcf7-display-none{display:none}
.wpcf7-form-control-wrap{display:block;position:relative}
.ff .chips .wpcf7-form-control{display:flex;flex-wrap:wrap;gap:8px}
.ff .chips .wpcf7-list-item{margin:0}
.ff .chips .wpcf7-list-item label{display:block;margin:0;position:relative}
.ff .chips input{position:absolute;opacity:0;width:1px;height:1px}
.ff .chips .wpcf7-list-item-label{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:500 13px var(--jp);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ff .chips input:checked+.wpcf7-list-item-label{background:var(--gd);color:#000;border-color:var(--gd)}
.ff .chips input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--gd);outline-offset:2px}
.ff .agree{margin-top:14px;font-size:13px;line-height:1.7}
.ff .agree.first{margin-top:24px}
.ff .agree .wpcf7-list-item{margin:0}
.ff .agree label{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:400}
.ff .agree input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--gd)}
.ff input.sub{display:block;-webkit-appearance:none;appearance:none}
.ff .wpcf7-spinner{display:none}
.ff .wpcf7-not-valid-tip{display:block;margin-top:6px;color:#f0a3a3;font-size:12px;font-weight:700}
.ff .wpcf7-not-valid{border-color:#f0a3a3!important}
.wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:14px 16px;border:1px solid var(--gline);border-radius:12px;font-size:13.5px;line-height:1.8;color:var(--gold)}
.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.failed .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{color:#f0a3a3;border-color:#f0a3a3}
.grecaptcha-badge{visibility:hidden}

/* 下層ページのタイトル帯の見出しは54px（固定ページは全て page-template-default になるため明示）
   投稿・施工実績の詳細だけは長いタイトルでもヒーローに収まるように小さくする */
.page .sh-hero h1{font-size:54px;line-height:1.16}
.single .sh-hero h1{font-size:clamp(24px,6.6vw,30px);line-height:1.45}

/* 施工実績の詳細：施工情報の表・施工写真一覧（クリックで拡大） */
.entry-works .entry-spec{margin-top:22px}
.entry-photos-h{display:flex;align-items:baseline;gap:10px;margin-top:44px;font-size:20px;font-weight:900}
.entry-photos-h small{font:500 12px var(--en);letter-spacing:.12em;opacity:.6}
.entry-photos{margin-top:18px}

/* ギャラリー一覧ページ（3カラム） */
#gallery .wkg{margin-top:30px}
.gl-intro{margin-top:18px}
#gallery .pgn{margin-top:28px}

/* ギャラリー一覧のカテゴリ絞り込み */
.gl-cats{margin-top:22px}

/* ------------------------------------------------------------
 * 本文（pテキスト）の文字サイズ：全ページ共通で16px（2026-10-13）
 * 英字ラベル・パンくず・STEP番号・※注記・写真キャプション・保証バッジ・
 * カードの施工場所・フッター住所/コピーライトは、デザインの強弱のため除外
 * ------------------------------------------------------------ */
.col p:not(.k-en):not(.en):not(.crumb):not(.gl-lab):not(.lx-lbl):not(.kn-lbl):not(.st):not(.fl-step):not(.cap):not(.bp-rec):not(.bp-wr):not(.bp-nt):not(.pl):not(.ft-copy):not(.ft-giant):not(.ft-addr):not(.note):not(.rq-note):not(.ec-note):not(.lu-note):not(.wk-note):not(.ba-meta):not(.entry-meta):not(.lb-ct):not(.kj){font-size:16px}

/* スマホの軽量化（2026-10-13）：描画負荷の高いすりガラス効果・光のラインの発光ぼかしを外す */
@media (max-width:859px){
	*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
	.sp-glw{filter:none!important;opacity:.35}
}

/* プライバシーポリシー（見積フォームのモーダル） */
.ff .agree .pp-open{color:var(--gd);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.ff .agree .pp-open:hover{text-decoration:none}
html.pp-lock{overflow:hidden}
.pp-modal{padding:0;border:0;background:transparent;width:min(640px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 48px);margin:auto;color:#0b0b0d}
.pp-modal::backdrop{background:rgba(0,0,0,.6)}
.pp-in{position:relative;max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:44px 28px 32px;background:#fff;font-family:var(--jp)}
.pp-h{font-size:20px;font-weight:900;line-height:1.5;padding-bottom:14px;border-bottom:2px solid #0b0b0d}
.pp-body{margin-top:20px;font-size:14px;line-height:1.95;color:#222}
.pp-body p,.pp-body ul,.pp-body ol,.pp-body address{margin-top:14px;font-size:14px}
.pp-body ul.pp-meta{list-style:none;padding:0;color:#555;font-size:13px}
.pp-body p{font-size:15px!important}
.pp-body ol{font-size:15px}
.pp-body ol{padding-left:1.4em}
.pp-body ol li+li{margin-top:8px}
.pp-body address{font-style:normal;padding:14px 16px;background:#f4f4f4}
.pp-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:none;font-size:26px;line-height:1;color:#0b0b0d;cursor:pointer}
.pp-close{display:block;margin:26px auto 0;padding:12px 40px;border:1px solid #0b0b0d;background:#fff;color:#0b0b0d;font:700 14px var(--jp);cursor:pointer}
.pp-close:hover{background:#0b0b0d;color:#fff}

/* 下層ページ：コンテンツの左右余白40px・本文14px／行間32px（2026-10-14） */
body:not(.home) .col .sec,body:not(.home) .col .pg{padding-left:40px!important;padding-right:40px!important}
body:not(.home) .col .sh-hero .crumb{left:40px}
body:not(.home) .col .sh-hero .copy{left:40px;right:40px}
body:not(.home) .col .fw-stage{padding-left:40px!important;padding-right:40px!important}
body:not(.home) .col .fw-rail{left:18px}
body:not(.home) .col .gl-grid{margin-left:-40px;margin-right:-40px}
body:not(.home) .col .wkg{margin-left:-40px;margin-right:-40px}
body:not(.home) .col .ct-sec .k-mq{margin-left:-40px;margin-right:-40px}
body:not(.home) .col p:not(.k-en):not(.en):not(.crumb):not(.gl-lab):not(.lx-lbl):not(.kn-lbl):not(.st):not(.fl-step):not(.cap):not(.bp-rec):not(.bp-wr):not(.bp-nt):not(.pl):not(.ft-copy):not(.ft-giant):not(.ft-addr):not(.note):not(.rq-note):not(.ec-note):not(.lu-note):not(.wk-note):not(.ba-meta):not(.entry-meta):not(.lb-ct):not(.kj){font-size:14px;line-height:32px}
body:not(.home) .col .os-ph .ex,body:not(.home) .col .bp-ft li{font-size:14px}
body:not(.home) .col .m-h2{font-size:40px}
body:not(.home) .col .m-h2 span{display:inline-block}
/* 下層ページ：h1タイトルを中央に・説明文なし（2026-10-14） */
body:not(.home) .col .sh-hero .copy{top:50%;bottom:auto;transform:translateY(-50%);text-align:center}
body:not(.home) .col .sh-hero .sub{display:none}
/* 動的ページのh1セクションは高さ300px（2026-10-15） */
body.ht-dyn .sh-hero{height:300px}
body.ht-dyn .col .sh-hero .copy{top:calc(50% + 30px)}
/* 施工実績詳細：写真スライダー＋サムネイル（2026-10-15） */
.ws{margin:0 0 28px}
body:not(.home) .col .ws{margin-left:-40px;margin-right:-40px}
.ws-main{position:relative}
.ws-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ws-track::-webkit-scrollbar{display:none}
.ws-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;padding:0;border:0;background:#161618;cursor:zoom-in}
.ws-slide img{display:block;width:100%;height:100%;object-fit:cover}
.ws-pv,.ws-nx{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;padding:0 0 3px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ws-pv{left:10px}.ws-nx{right:10px}
.ws-pv svg,.ws-nx svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ws-pv,.ws-nx{padding:0;background:rgba(0,0,0,.55)}
.ws-ct{position:absolute;right:10px;bottom:10px;margin:0!important;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff!important;font:500 12px/1.6 var(--en)!important}
.ws-th{display:flex;gap:6px;overflow-x:auto;padding:8px 40px 2px;scrollbar-width:none}
.ws-th::-webkit-scrollbar{display:none}
.ws-th button{flex:0 0 64px;height:64px;padding:0;border:2px solid transparent;background:#161618;opacity:.55;cursor:pointer;transition:opacity .2s,border-color .2s}
.ws-th button.on{opacity:1;border-color:var(--gd)}
.ws-th img{display:block;width:100%;height:100%;object-fit:cover}
/* ESTIMATE見出し「まずは無料で / お見積もり」を2行に保つ（2026-10-15） */
.ct-sec .k-h2{white-space:nowrap}
@media (max-width:389px){.ct-sec .k-h2{font-size:40px!important}}
@media (max-width:349px){.ct-sec .k-h2{font-size:34px!important}}
/* 固定ページのh1は1行に収める（2026-10-15）※記事詳細など動的ページは除く */
body:not(.home):not(.single):not(.ht-dyn) .col .sh-hero h1{white-space:nowrap;font-size:clamp(30px,calc((min(100vw,430px) - 80px) / 7.2),54px)}
/* INSTAGRAM欄（TOPと静的ページのESTIMATE上で共通・2026-10-15） */
.ig-sec{background:var(--bg3,#121214);padding-left:0;padding-right:0}
.ig-sec .hd3{padding:0 24px}
.ig-rows{margin-top:34px;display:flex;flex-direction:column;gap:8px}
.ig-rows .k-mq{overflow:hidden;white-space:nowrap;display:flex}
.ig-rows .k-mq .tr{display:flex;flex:0 0 auto;animation:kmq 38s linear infinite}
.ig-rows .k-mq.rev .tr{animation-direction:reverse}
@keyframes kmq{to{transform:translateX(-100%)}}
.ig{position:relative;flex:0 0 auto;width:132px;aspect-ratio:9/16;margin-right:8px;border-radius:16px;overflow:hidden;background:#161618}
.ig img{width:100%;height:100%;object-fit:cover}
.ig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6))}
.ig .pl{position:absolute;left:10px;bottom:10px;z-index:1;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;color:#fff}
.ig-sec .acts{padding:0 24px;margin-top:32px;display:flex;flex-direction:column;gap:10px}
body:not(.home) .col .ig-sec{padding-left:0!important;padding-right:0!important}
body:not(.home) .col .ig-sec .hd3,body:not(.home) .col .ig-sec .acts,body:not(.home) .col .ig-sec .ig-embeds{padding-left:40px;padding-right:40px}
@media (prefers-reduced-motion:reduce){.ig-rows .k-mq .tr{animation:none}}
body:not(.home) .col .ig-sec .k-h2{white-space:nowrap;font-size:clamp(26px,calc((min(100vw,430px) - 80px) / 8.6),40px)}
body:not(.home) .col .ig-sec .k-pill{white-space:nowrap;font-size:14px;letter-spacing:0}
@media (max-width:389px){body:not(.home) .col .ig-sec .k-pill{font-size:12.5px}}
@media (max-width:349px){body:not(.home) .col .ig-sec .k-pill{white-space:normal}}