/**
 * WordPressサイト構築LP（固定ページテンプレート「LP」lp-landing.html）だけで使うCSS
 *
 * 2026-10-06 作り直し：見た目の大部分は、管理画面のパネル（theme.json のプリセット）と
 * ブロックスタイル（is-style-*。assets/css/*-decor.css・list-bubbles.css・group-marquee.css・group-carousel.css ほか）に移した。
 * このファイルに残っているのは、テンプレート側の部品だけ：
 * - 本文の外枠（main）の余白リセットと、文節で折り返す指定（スマホだけの改行・単語の途中で折り返さない、を文章を変えずに寄せる）
 * - 固定の相談入口（パターン hpcode/lp-fixed-cta）。画面に固定する・×で閉じる・相談の大きいボタンが見えている間は隠す（lp.js）
 *
 * 読み込むのは、テンプレート lp-landing を割り当てたページだけ（フロントとエディタ）。functions.php 参照。
 */

/* ---------- 本文の外枠 ---------- */
.lp-main {
	margin-block-start: 0;
}

/* 固定の相談入口を一式閉じた形（lp-fixed-close-all）で、× のあとフォーカスを受け取る main に枠を出さない（tabindex="-1" でフォーカスだけ受け取る） */
.lp-main:focus {
	outline: none;
}

/* セクション（全幅のグループ）同士の間は空けない。上下の余白は各セクションのパネルで持つ */
.lp-main .wp-block-post-content > * {
	margin-block: 0;
}

/* 文節の途中で折り返さない（Chrome / Edge）。文章を変えずに、スマホでの改行位置を寄せる */
:is(.lp-main, .editor-styles-wrapper) :is(h1, h2, h3, p, li, summary) {
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* 改行は PC だけ（トップ改修 2026-10-08）：ブロックに追加 CSS クラス「lp-br-pc」を付けると、文中の改行（Shift+Enter）をスマホでは無視して1行に流す。
   デザイン版の <br class="pc-only"> と同じ。文章は変えない。段落・見出しのパネルに無いので CSS */
@media (max-width: 767px) {
	.lp-br-pc br { display: none; }
}

/* トップ（2026-10-08）：幅いっぱいにした「メールアイコン」のボタン（スマホの FV・サービスのカード）で、アイコンと文字をボタンの中央に置く。
   「メールアイコン」のスタイルは文字を左に寄せたままなので（LP のスマホの FV も同じ）、LP の見た目を変えないよう、いまはトップだけ */
.home .lp-main .wp-block-button.is-style-icon-mail .wp-block-button__link {
	justify-content: center;
}

/* 横並び（flex）の中の「番号（丸）」と画像は縮めない（2026-10-07 無料診断LP）。隣の箱の文章が長いと、丸がつぶれ、アイコンが小さくなるため。
   大きさはパネル（文字の大きさ・画像の幅）で決まる。パネルの「幅（固定）」は flex-basis だけで、縮むのは止められないので CSS。
   LP 全体のグループに追加 CSS クラス「lp-keep-shape」を付けたときだけ効く（静的サイト化LP 557 の SP の流れも同じ理由で丸がつぶれているが、
   付けると見た目が変わるので、付けるかは CEO 判断。付けていない LP の見た目は変わらない） */
.lp-keep-shape .is-layout-flex > :is(p.is-style-number-circle, .wp-block-image) {
	flex-shrink: 0;
}

/* ---------- 固定の相談入口（パターン hpcode/lp-fixed-cta）：はにわまん＋吹き出し＋ボタン ---------- */
/* 本文に「lp-no-fixed」を付けたページ（申し込みフォームなど）では、固定の相談入口を出さない（フォームに重ならないように・2026-10-09）。
   ページ ID ではなく本文のクラスで判定するので、本番でも同じに効く */
body:has(.lp-main .lp-no-fixed) .lp-fixed {
	display: none;
}

/* PC：右下。本番は右下に reCAPTCHA のバッジが出るので、その上に置く */
.lp-fixed {
	position: fixed;
	z-index: 30;
	right: 24px;
	bottom: calc(90px + env(safe-area-inset-bottom, 0px));
	/* 上の段（はにわまん＋吹き出し）とボタンの左右の端をそろえる（第9段階）。ボタンの幅が基準。
	   280px では吹き出しの文字（14px×12字）が窮屈なので、ボタンも上の段も同じ 300px に広げた */
	width: 300px;
	margin: 0;
	animation: lp-fixed-in 0.35s ease-out;
}

.lp-fixed[hidden] {
	display: none;
}

@keyframes lp-fixed-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.lp-fixed > * {
	margin: 0;
}

.lp-fixed .lp-fixed__talk {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	margin-bottom: -14px;
}

.lp-fixed__talk[hidden] {
	display: none;
}

/* グループ（flow）の既定の上余白を消す。× は位置がずれるので特に */
.lp-fixed .lp-fixed__talk > * {
	margin: 0;
}

.lp-fixed__img {
	flex: none;
	/* はにわまん（ヘッドセット付き・576×640。第9段階で差し替え）。前の画像より縦長で余白が無いので、
	   見た目の大きさが前（96px 四方）とほぼ同じになる幅にした（PC 84px／SP 50px） */
	width: 84px;
	pointer-events: none;
}

.lp-fixed__img img {
	display: block;
	width: 100%;
	height: auto;
}

/* 吹き出し：はにわまんのセリフ。しっぽは左（はにわまんの口のほう）を向く */
.lp-fixed .lp-fixed__bubble {
	position: relative;
	margin-bottom: 34px;
	padding: 10px 16px;
	border-radius: 22px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card-strong);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	/* 残りの幅いっぱいに広げて、吹き出しの右端をボタンの右端にそろえる（文字は中央） */
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}

.lp-fixed__bubble::after {
	content: "";
	position: absolute;
	left: -5px;
	bottom: 12px;
	width: 12px;
	height: 12px;
	background: inherit;
	transform: rotate(45deg);
}

/* ×（lp.js が作る） */
.lp-fixed__close {
	position: absolute;
	top: -6px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.lp-fixed__close:hover {
	background-color: var(--wp--preset--color--gray);
}

.lp-fixed .wp-block-buttons {
	position: relative;
	display: block;
}

.lp-fixed__button,
.lp-fixed__button .wp-block-button__link {
	display: flex;
	justify-content: center;
	width: 100%;
}

.lp-fixed__button .wp-block-button__link {
	/* 色は LP 全体の色（セクションスタイル）に合わせる。値は lp.js が LP 全体のグループから写す */
	background-color: var(--wp--preset--color--lp-accent);
	color: var(--wp--preset--color--base);
	padding: 16px 24px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base), var(--wp--preset--shadow--card-strong);
}

.lp-fixed__button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--lp-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
	.lp-fixed { animation: none; }
}

/* ---------- チェックの数のバッジ（無料診断LP・2026-10-07）----------
   lp.js が、本文にリストのスタイル「チェック欄（押せる）」があるときだけ、相談のボタンの角に付ける（.lp-check-badge）。
   ボタンの右上の角に、アクセント色の丸に白い数字・白いふち（警告の赤にはしない）。ほかの LP には付かない */
.lp-has-check-badge {
	position: relative;
	overflow: visible;
}

.lp-check-badge {
	position: absolute;
	top: -12px;
	right: -10px;
	/* 縦横のそろった丸にする（2026-10-09）。box-sizing が content-box のままだと、
	   min-width 32 ＋ 左右の余白 16 ＋ ふち 6 ＝ 横 54px・縦 38px の横長の楕円になっていた。
	   border-box にして、min-width・height の 32px にふち・余白を含め、32×32 の丸にする */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 3px solid var(--wp--preset--color--base);
	border-radius: 100px;
	background: var(--wp--preset--color--lp-accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--en);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: var(--wp--preset--shadow--card-strong);
}

.lp-check-badge[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.lp-check-badge.is-bump { animation: lp-check-bump 0.4s ease-out; }
}

@keyframes lp-check-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	65% { transform: scale(0.92); }
	100% { transform: scale(1); }
}

/* 読み上げだけのお知らせ（lp.js の「3個 当てはまりました」） */
.lp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* スマホ（theme.json viewport.mobile 767px） */
@media (max-width: 767px) {
	/* 最後のボタンの見出し（斜線の吹き出しの中）：「まずは、お話を／お聞かせください」の位置で折り返す。文章は変えず、幅だけで寄せる */
	.lp-main .wp-block-group.is-style-balloon > h2 { max-width: 8.4em; }

	/* 固定の相談入口：下中央寄り。右の 84px は reCAPTCHA のバッジのために空ける */
	.lp-fixed { right: 84px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(250px, calc(100vw - 96px)); }
	.lp-fixed .lp-fixed__talk { margin-bottom: -10px; padding-right: 0; }
	.lp-fixed__img { width: 50px; }
	.lp-fixed .lp-fixed__bubble { margin-bottom: 22px; padding: 7px 12px; font-size: 13px; }
	.lp-fixed__bubble::after { bottom: 9px; }
	.lp-fixed__close { top: auto; right: -34px; bottom: 24px; }
	.lp-fixed__button .wp-block-button__link { padding: 16px; }
	.lp-check-badge { top: -10px; right: -8px; min-width: 28px; height: 28px; font-size: 15px; }

	/* 固定の相談入口がコピーライトに重ならないよう、黒い帯を下に伸ばす（フッターのパーツはそのまま）
	   前提：parts/footer.html の最後の帯（背景 contrast のグループ）。フッターの作りを変えたら、ここも見直す。
	   !important は、その帯のパネルの余白（インラインの padding）に勝つため */
	:is(.page-template-lp-landing, .home) .wp-site-blocks > footer > .has-contrast-background-color:last-child {
		padding-bottom: calc(30px + 120px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* トップ（2026-10-08 デザイン版 v21）：固定の相談入口を最後まで出すので、1280px 未満の PC・タブレットでも、
   フッターのリンクと重ならないようコピーライトの帯を下に伸ばす（LP の作りは変えない） */
@media (min-width: 768px) and (max-width: 1279px) {
	.home .wp-site-blocks > footer > .has-contrast-background-color:last-child {
		padding-bottom: calc(30px + 170px) !important;
	}
}