/*
Theme Name: ito-kenso-lp
Theme URI: 
Author: ACMEE
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: ito-kenso-lp
Tags:
*/

/* コンテンツ幅のレスポンシブ化（2026-08-27方針変更、2026-08-31大幅改訂、
   同日夜さらに768px固定+5%パディング方針へ変更）
   画面幅にかかわらず常に768pxの1枚のカードに収める（769px以上での
   440pxへの切り替えは廃止）。各セクションの左右パディングは固定pxの
   spacingトークンではなく `5%` に統一し、カードが768pxいっぱいで
   コンテンツも比例して大きく見えるようにしている。

   各セクションは `align:full` を使っており、これはWPコアのCSSで
   `margin-left/right: calc(50% - 50vw)` によりビューポート基準で
   全幅ブレイクアウトする仕様。そのため `--wp--style--global--content-size`
   の上書きだけでは対応できず、`.alignfull` 自体の左右マージンを打ち消して
   カード幅に固定する必要がある。

   注意（2026-08-28修正）: `.alignfull` を無条件に上書きすると、セクション
   "内部"にネストされたalign:full要素（例: お約束セクションの写真）まで
   巻き込んでしまい、そちらは逆に親のpadding分だけ内側に詰まってスキマが
   生まれてしまう（ネスト要素は本来「親のpaddingだけ打ち消して全幅化」する
   のが正しい挙動で、「ビューポート基準で全幅化」ではない）。
   トップレベルのセクション（`.wp-site-blocks` の直接の子）だけに絞る。 */
html {
	background-color: var(--wp--preset--color--page-bg);
	/* 本文が約16pxになるよう全体の文字サイズを底上げ（2026-08-31）。
	   theme.jsonのfontSizesは全てrem指定なので、ルートのfont-sizeを
	   上げるだけで比率を保ったまま全体が拡大される。spacingトークンは
	   px指定のため影響を受けない（余白は従来どおり）。 */
	font-size: 123%;
}

body {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
	/* 日本語の改行位置がSafari(iOS)とChrome(Android)で異なり見た目がズレる問題の緩和。
	   line-break/word-breakの明示だけでは改行アルゴリズム自体の違い（エンジンごとの
	   禁則処理の差）は解消しないため、text-align:justifyで行の右端を強制的に
	   揃えて見た目のズレを吸収する（2026-08-31）。has-text-align-center/left/right等、
	   要素に明示的なtext-alignが付いているブロックはそちらが優先されるため影響なし。
	   最終行は自動でjustifyの対象外になるため単一行の見出し・ボタン等には影響しない。 */
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
	text-align: justify;
}

.wp-site-blocks > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* 固定CVバーは.wp-site-blocksの直接の子（.alignfull）でもあるため、
   直上の`.wp-site-blocks > .alignfull`ルールと詳細度(0,2,0)が同じになる。
   !important同士は詳細度で優劣が決まり、ソース順では決まらないため、
   セレクタを`.wp-site-blocks > .js-fixed-cv-bar`まで具体化して詳細度を
   揃えた上でソース順（後勝ち）で768pxを確実に効かせる（2026-08-30）。 */
.wp-site-blocks > .js-fixed-cv-bar {
	max-width: 768px !important;
}

/* セクション内部にネストされたalign:full要素（写真など）は、
   標準のブレイクアウト計算(calc(50% - 50vw))がbodyのカード化により
   狂うため使えない。代わりに親のpadding（5%）分だけを打ち消して
   全幅化する（2026-08-31: 親のパディングをpx固定から5%へ変更したため
   ここも%ベースに統一） */
.is-layout-constrained > .alignfull {
	margin-left: -5% !important;
	margin-right: -5% !important;
	width: calc(100% + 10%) !important;
	max-width: calc(100% + 10%) !important;
}

/* セクション装飾（?マーク等）が上下方向に画面外へはみ出せるよう、
   各セクション側ではoverflow:hiddenを使わない方針にした（2026-08-30）。
   代わりにページ全体でoverflow-x:hiddenを持ち、左右のはみ出しだけを
   吸収して横スクロールバーの発生を防ぐ。 */
html,
body {
	overflow-x: hidden;
}

/* セクション間の余白を除去（2026-08-27）
   theme.json の appearanceTools:true により blockGap（既定1.2rem）が
   ルート直下の全ブロック間に margin-top として自動適用されてしまう。
   各セクションは自前でpaddingを持っているため、この余白は不要かつ
   隣接セクションの背景色の境目に意図しない隙間（地の色のスリット）を
   作ってしまう。ルート直下の子要素に限定してmargin-topを打ち消す。 */
.wp-site-blocks > * {
	margin-top: 0 !important;
}

/* 固定CVバー（position:fixedはtheme.jsonのトークンで表現できないため直書き）
   ファーストビュー分スクロールするまでは非表示にし、フェード＋わずかな
   上昇でふわっと出現させる（JSは assets/js/fixed-cv.js で .is-visible を切替） */
.js-fixed-cv-bar {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(16px);
	z-index: 100;
	width: 100%;
	max-width: 768px;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.js-fixed-cv-bar.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.js-fixed-cv-bar {
		transition: opacity 0.2s ease;
		transform: translateX(-50%);
	}
	.js-fixed-cv-bar.is-visible {
		transform: translateX(-50%);
	}
}

/* 固定CVバーの分の余白は、bodyではなくフッター側のpadding-bottomで確保する
   （2026-08-27）。bodyに余白を持たせると、フッターの背景色がそこで終わって
   しまい、固定CVバーとの間に地の色（page-bg）のスキマが見えてしまうため。
   詳細は parts/footer.html のコメント参照。 */

/* アコーディオン（<details>/<summary>）共通のフォーカス調整（2026-08-27）
   <summary>はクリック時にブラウザ標準の青いフォーカスリングが出てしまう
   ため無効化し、キーボード操作時のみ配色に合わせたリングを表示する。 */
summary {
	outline: none;
}

summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-g);
	outline-offset: 2px;
	border-radius: 4px;
}

/* よくあるご質問セクション: 展開時にアイコンを回転させる（2026-08-27） */
#contact .faq-toggle-icon {
	transition: transform 0.2s ease;
}

#contact details[open] > summary .faq-toggle-icon {
	transform: rotate(180deg);
}

/* 選ばれる理由セクション「詳しく見る」: 展開時にアイコンを回転させる（2026-08-29） */
.details-toggle-icon {
	transition: transform 0.2s ease;
}

details[open] > summary .details-toggle-icon {
	transform: rotate(180deg);
}

/* 固定CVバーの2ボタンのホバーアクション */
.js-fixed-cv-bar a[href^="tel:"] {
	transition: filter 0.2s ease, transform 0.2s ease;
}

.js-fixed-cv-bar a[href^="tel:"]:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

.js-fixed-cv-bar a[href="#contact"] {
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.js-fixed-cv-bar a[href="#contact"]:hover {
	background-color: rgba(0, 69, 78, 0.08) !important;
	transform: translateY(-1px);
}

/* オレンジの電話CTAボタン（ヒーロー・お約束・お問い合わせの各セクション）
   共通ホバーアクション。固定CVバーの電話ボタンと同じ挙動に統一する（2026-08-27）。 */
a.has-cv-orange-background-color[href^="tel:"] {
	transition: filter 0.2s ease, transform 0.2s ease;
}

a.has-cv-orange-background-color[href^="tel:"]:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

/* 共通見出しスタイル: theme.json の typography は font-feature-settings を
   サポートしないため、詰め組み（palt）はCSSで直接指定する（design.md参照） */
h2.wp-block-heading {
	font-feature-settings: "palt" 1;
}

/* 見出しを画面幅に比例して拡大（2026-08-31）。theme.jsonのtypography.fluidは
   falseのままだが、h2/h3単体はclampで直接フルード化する。375px(スマホ最小)で
   従来サイズ(px)、768px(カード最大)で約1.3倍になるよう線形補間。
   px直書きなのはhtmlのfont-size:123%(rem拡大)と二重に掛け算されるのを
   避けるため。 */
h2.wp-block-heading {
	font-size: clamp(20px, 14.27px + 1.53vw, 26px);
}

h3.wp-block-heading {
	font-size: clamp(16px, 11.23px + 1.27vw, 21px);
}

/* 電話CTAボタン（ヒーロー・料金・お問い合わせセクション共通）の文字サイズを
   画面幅に比例させる（2026-08-31）。theme.jsonのfontSizeトークンを使わず
   px直書きだったため、html側のルートフォントサイズ底上げの影響を受けず
   他のテキストより相対的に小さく見えていた対処。375px→768pxで26px→34px、
   9px→11pxへ線形補間。 */
.phone-cta-number {
	font-size: clamp(26px, 18.4px + 2.04vw, 34px);
}

.phone-cta-caption {
	font-size: clamp(9px, 7.1px + 0.51vw, 11px);
}

/* Contact Form 7 フィールドのスタイル調整（Figmaデザインに準拠）
   ラベルの「(必須)」は wp-admin のフォームテンプレート側で
   <span class="cf7-required-badge">必須</span> に置換済み（2026-08-27）。 */
.wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* [submit]もCF7により<p>で自動的に囲まれ、上のルールが効いてしまう。
   直後の「入力は1分ほどで完了します。」との間隔が広くなりすぎるため、
   送信ボタンを含む<p>だけ下マージンを打ち消す（2026-08-31）。 */
.wpcf7-form p:has(.wpcf7-submit) {
	margin-bottom: 0;
}

.wpcf7-form label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.wpcf7-form label br {
	display: none;
}

.cf7-required-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--wp--preset--color--secondary-r);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: 2px;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: 14px;
}

.wpcf7-form-control.wpcf7-textarea {
	min-height: 120px;
	resize: vertical;
}

.wpcf7-form-control::placeholder {
	color: #aaa;
}

.wpcf7-form-control.wpcf7-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212121' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 6px;
	padding-right: 32px;
}

.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--sub-03);
}

input.wpcf7-form-control.wpcf7-submit {
	display: block;
	width: 100%;
	padding: 18px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--cv-orange);
	box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
}

input.wpcf7-form-control.wpcf7-submit:hover {
	opacity: 0.9;
}

/* ヘッダー：スクロール追従＋ハンバーガーメニュー（2026-08-30）
   開閉はJS不要のチェックボックスハック。.js-site-header内で
   input(checkbox) → nav.nav-panel が兄弟要素になっている必要がある。
   アンカーリンクが固定ヘッダーの下に隠れないよう、html側で
   scroll-padding-topを確保する（全セクションのidジャンプに効く）。 */
html {
	scroll-padding-top: 46px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.nav-toggle-input {
	display: none;
}

.nav-toggle-bar {
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

/* ハンバーガー→×アニメーション。checkboxはnav-panelと同じ
   .js-site-header直下の兄弟なので、間の行コンテナを`div`で挟んで
   子孫のバーまで一般兄弟結合子で届かせる（2026-08-30） */
.nav-toggle-input:checked ~ div .nav-toggle-bar:nth-of-type(1) {
	transform: translateY(9px) rotate(45deg);
}

.nav-toggle-input:checked ~ div .nav-toggle-bar:nth-of-type(2) {
	opacity: 0;
}

.nav-toggle-input:checked ~ div .nav-toggle-bar:nth-of-type(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.nav-panel {
	position: fixed;
	top: 46px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 768px;
	max-height: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	z-index: 49;
	transition: max-height 0.25s ease;
	box-sizing: border-box;
}

.nav-toggle-input:checked ~ .nav-panel {
	max-height: 480px;
}

.nav-panel a {
	display: block;
	padding: 14px 24px;
	border-bottom: 1px solid #eee;
	color: #212121;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.nav-panel a:last-child {
	border-bottom: none;
}

/* スマホ表示の文字間・改行の調整（2026-10-30）
   PC（カード幅768px）の見た目は変えず、スマホ幅のときだけ一般的な日本語の組み方にする。
   ・body の text-align:justify は、狭い幅だと行末の余りを文字間に割り振るため
     文字と文字の間が不自然に空く → 左揃えに戻す
   ・overflow-wrap:anywhere は flex 内の要素を最小幅まで縮め、STEP番号が
     「STE／P」「0／1」と折れる原因になる → はみ出す時だけ折り返す break-word に戻す
   ・親テーマ(twentytwentyfive)の text-wrap:pretty は、Safari(iOS)では右端に余白を
     残したまま早めに改行するため、通常の折り返しに戻す（body を付けて親テーマより優先）
   ・PC幅に合わせて入れている <br> は、スマホでは途中で折り返された上にさらに改行されて
     不自然になるため無効にする。フッターの住所・電話番号は改行位置を指定しているので対象外 */
@media (max-width: 767px) {
	body {
		text-align: start;
		overflow-wrap: break-word;
	}

	body :is(blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p) {
		text-wrap: wrap;
	}

	/* 「ご相談から施工までの流れ」のSTEP番号列は縮ませず、常に1行で表示する */
	.wp-block-group.is-vertical[style*="barlow-condensed"] {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.wp-site-blocks > :not(footer) .has-text-align-center.has-small-font-size br {
		display: none;
	}

	/* STEPの説明文と「4つの約束」の各項目は、本文サイズ（約16px）だと最後の1〜2文字だけが
	   次の行に落ちるため、主要なiPhone（幅390px以上）で1行に収まる14pxにする（2026-10-30） */
	.wp-block-group.is-vertical[style*="barlow-condensed"] ~ .wp-block-group p,
	#promise img[src*="check-circle"] + p {
		font-size: 14px !important;
	}

	/* 「こんなお悩みありませんか？」の各項目も同じ理由で縮める。STEP・約束より一回り大きく
	   見せている箇所なので、その差を残して15pxにする（幅390px以上で1行に収まる） */
	#worries p.has-body-lg-font-size {
		font-size: 15px !important;
	}
}