@charset "utf-8";
/* ============================================================================
   Bona フローリングメンテナンス LP  (/bona/)  専用スタイル
   2026-09-09 作成

   このページは元々 /service/ に置かれていた独立WordPress（LIQUID LP テーマ）
   だったものを本サイトへ統合したもの。本文が LIQUID LP と vk-blocks の
   独自クラスに依存しているため、必要な定義だけを移植したうえで、
   Diver 配下でも成立するようにデザインを組み直している。

   読み込みは page-lp.php テンプレートを使うページのみ（mu-plugin で制御）。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 変数
   --------------------------------------------------------------------------- */
:root {
	--lp-navy:        #14225c;   /* FV の濃紺 */
	--lp-blue:        #00407a;   /* コーポレートカラー */
	--lp-blue-light:  #0b6bbf;
	--lp-cream:       #fdf6e4;   /* FV の生成り */
	--lp-ink:         #1f2933;
	--lp-ink-soft:    #5a6672;
	--lp-line:        #dfe4ea;
	--lp-bg:          #f5f7f9;
	--lp-accent:      #e2a33c;
	--lp-max:         1080px;
	--lp-gap:         clamp(56px, 8vw, 112px);
}

/* ---------------------------------------------------------------------------
   1. LIQUID LP から移植した定義（元デザインの再現に必要な分のみ）
   --------------------------------------------------------------------------- */
/* ---- style.css より ---- */
/* ------------------------------------
// wp
------------------------------------ */
.aligncenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.alignright{
    float: right;
    margin-left: 1.5em !important;
    margin-bottom: 1em !important;
}
@media (max-width: 575.98px) {
.alignright{
        float: none;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ---- block.css より ---- */
.wp-block-quote, .wp-block-gallery, .wp-block-list, .wp-block-cover, .wp-block-file, .wp-block-video, .wp-block-button, .wp-block-columns, .wp-block-media-text, .wp-block-more, .wp-block-nextpage{
    margin-bottom: 2rem;
}
.wp-block-column{
    margin-bottom: 0;
}
.alignfull, .is-style-wide{
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    clear: both;
}
.wp-block-image.alignfull img{
    width: 100vw;
    max-width: initial;
}
.alignfull.wp-block-pullquote{
    margin-left: -50vw;
    margin-right: -50vw;
}
.is-cropped img{
    height: 100% !important;
}
.wp-block-gallery figcaption a{
    color: #fff !important;
}
.wp-block-button a, .wp-block-button__link{
    text-decoration: none;
}
@media (min-width: 576px) {
.wp-block-group.alignfull > div[class*="group"]{
		max-width: 540px;
	}
}
@media (min-width: 600px) {
.wp-block-column{
        flex-basis: 100%;
    }
}
@media (min-width: 768px) {
.wp-block-group.alignfull > div[class*="group"]{
		max-width: 720px;
	}
}
@media (min-width: 992px) {
.wp-block-group.alignfull > div[class*="group"]{
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
.wp-block-group.alignfull > div[class*="group"]{
		max-width: 1140px;
	}
}
.wp-block-group.alignfull > div[class*="group"]{
    width: 100%;
    padding: 2rem 15px 1rem 15px;
    margin: 0 auto;
}
/* color 00 */
.has-liquid-theme-color{
    color: #00a5d4;
}
.has-liquid-theme-background-color{
    background-color: #00a5d4;
}
.has-liquid-theme-background-color.is-style-blockbox{
    border-color: #00a5d4;
}
.has-liquid-dark-gray-color{
    color: #333333 !important;
}
.is-style-blockbox.has-background{
    background-color: transparent !important;
}
.is-style-stripe{
    position: relative;
    padding: 1rem !important;
    border: 0 none !important;
}
.is-style-stripe *{
    position: relative;
    z-index: 1;
}
.is-style-stripe > span{
    border: 0 none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.is-style-stripe:after{
    position: absolute;
    content: '.';
    color: transparent !important;
    display: block;
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
    background: -webkit-repeating-linear-gradient(-45deg, #0000001a, #0000001a 5px, transparent 5px, transparent 10px);
    background: repeating-linear-gradient(-45deg, #0000001a, #0000001a 5px, transparent 5px, transparent 10px);
    opacity: 0.5;
}
.is-style-balloon{
    position: relative;
    padding: 1rem !important;
    background-color: #f4f4f4;
    border-radius: 5px;
    border: 0 none !important;
}
.is-style-balloon > span{
    border: 0 none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.is-style-balloon:after{
    position: absolute;
    top: auto !important;
    left: 2rem !important;
    content: '.';
    width: 15px;
    height: 15px;
    color: transparent;
    background: inherit;
    bottom: -7px !important;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.is-style-largebutton, .is-style-largebutton .wp-block-button__link{
    display: block !important;
    border-radius: 0;
    font-size: large;
}
.is-style-largebutton .wp-block-button__link{
    position: relative;
}
.is-style-largebutton .wp-block-button__link:after{
    position: absolute;
    content: '.';
    color: transparent !important;
    display: block;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: 0;
    background-color: #0000001a;
}
.is-style-largebutton:hover .wp-block-button__link:after{
    background-color: #00000080;
}
/* ------------------------------------ */
/* LP */
/* ------------------------------------ */
.huwa, .huwa > li, .huwa > .wp-block-column{
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
	transform: translate(0, 40px);
	-moz-transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px);
	-o-transform: translate(0, 40px);
	-ms-transform: translate(0, 40px);
}
.huwa > li:nth-child(2), .huwa > .wp-block-column:nth-child(2){
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
}
.huwa > li:nth-child(3), .huwa > .wp-block-column:nth-child(3){
    transition: all 0.7s;
    -moz-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    -o-transition: all 0.7s;
    -ms-transition: all 0.7s;
}
.huwa > li:nth-child(4), .huwa > .wp-block-column:nth-child(4){
    transition: all 0.8s;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
}
.huwa_active, .huwa_active > li, .huwa_active > .wp-block-column{
	transform: translate(0,0) !important;
	-moz-transform: translate(0,0) !important;
	-webkit-transform: translate(0,0) !important;
	-o-transform: translate(0,0) !important;
	-ms-transform: translate(0,0) !important;
}
#editor .huwa, #editor .huwa > li, #editor .huwa > .wp-block-column{
	transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
	-ms-transform: none;
}
.lp .wp-block-cover{
    color: #fff;
}
.lp-cover{
    background-image: url(../images/noimage.png);
    font-weight: bold;
    overflow: hidden;
}
.lp-cover .wp-block-cover__inner-container{
    max-width: 1080px;
}
.lp-cover strong{
    color: initial;
    display: inline-block;
    background-color: #fff;
    padding: .2rem;
    margin: .2rem;
}
.lp-cover a{
    font-size: x-large;
    display: inline-block;
    border: 2px solid #fff;
    padding: .5rem 1rem;
    margin: 1rem;
    border-radius: 5px;
    text-decoration: none;
}
.lp-button .wp-block-button__link{
    border-radius: 5px !important;
}
.lp-button.is-style-squared a,
.lp-button.is-style-squared a:before,
.lp-button.is-style-squared a:after,
.lp-button.is-style-squared .wp-block-button__link{
    border-radius: 0px !important;
}
.wp-block-button a{
    text-decoration: none;
}
.head .wp-block-button{
    z-index: 99;
    text-align: right;
    margin: 0 !important;
}
.head .wp-block-button a,
.head .wp-block-button a:after,
.head .wp-block-button a:before{
    border-radius: 0 !important;
}
.head .wp-block-button .wp-block-button__link{
    padding: .5rem !important;
    font-size: small !important;
    letter-spacing: -0.1em;
    line-height: 1.2;
}
.lp-buttons .wp-block-column{
    margin: auto 10px;
}
.lp-item .wp-block-column{
    background-color: #fff;
    padding: 1rem;
    border: 1px solid rgba(119, 119, 119, 0.1);
    border-radius: 5px;
}
.lp-item .wp-block-image{
    margin: 2rem;
}
.lp-plan .wp-block-column{
    background-color: #fff;
    padding: 1rem;
}
.lp-faq{
    text-align: center;
}
.lp-faq .wp-block-column{
    background-color: #fff;
    padding: 0;
}
.lp-faq p{
    padding: 1rem;
}
.lp-faq .lp-faq-ttl{
    position: relative;
    padding: 1rem;
    border: 0 none;
    font-size: large;
}
.lp-faq .lp-faq-ttl-after{
    position: absolute;
    display: inline-block;
    top: 100%;
    left: 1rem;
    content: ' ';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 15px solid #ddd;
}
#editor .lp-faq .lp-faq-ttl:after{
    position: absolute;
    display: inline-block;
    top: 100%;
    left: 1rem;
    content: ' ';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 15px solid #ddd;
}
.lp-step .wp-block-column{
    position: relative;
    background-color: #fff;
    padding: 0;
    border: 1px solid rgba(119, 119, 119, 0.1);
    border-radius: 5px;
}
.lp-step .wp-block-column:after{
    position: absolute;
    content: '　';
    top: calc(50% - 1rem);
    right: -1.4rem;
    left: auto;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-color: #333;
    border-style: solid;
    border-width: 5px 5px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.lp-step .wp-block-column:last-child:after{
    display: none;
}
.lp-step p{
    padding: 0 1rem;
}
.lp-circle-item{
    display: inline-block;
    margin: 1rem !important;
    padding: 0 !important;
    width: 4rem;
    height: 4rem;
    line-height: 4rem !important;
    border-radius: 50%;
    font-size: x-large;
    letter-spacing: -0.05em;
}
.lp-banner .wp-block-column{
    margin: .5rem !important;
}
.lp-loop strong{
    display: none;
    color: #fff;
    background-color: transparent;
    border-bottom: 1px solid #fff;
}
#editor .lp-loop strong{
    display: block;
}
.lp-cover .container{
    position: relative;
    z-index: 1;
}
@media (max-width: 991.98px) {
.lp-cover .wp-block-cover__inner-container{
        max-width: 930px;
    }
}
@media (max-width: 781px) {
.lp-step .wp-block-column:after{
        display: none;
    }
.lp-buttons .wp-block-column .lp-button{
        float: none;
        text-align: center;
        margin: 0 auto 1rem auto !important;
    }
}
@media (max-width: 767.98px) {
.head .wp-block-button{
        display: none;
    }
.lp-cover .wp-block-cover-text, .lp-cover p{
        font-size: x-large;
    }
}

/* ---- bootstrap より ---- */
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}
.mt-3,.my-3{margin-top:1rem!important}
.mb-3,.my-3{margin-bottom:1rem!important}
.pr-2,.px-2{padding-right:.5rem!important}
.pl-2,.px-2{padding-left:.5rem!important}
.pt-3,.py-3{padding-top:1rem!important}
.pb-3,.py-3{padding-bottom:1rem!important}
.pt-5,.py-5{padding-top:3rem!important}
.pr-5,.px-5{padding-right:3rem!important}
.pb-5,.py-5{padding-bottom:3rem!important}
.pl-5,.px-5{padding-left:3rem!important}
/* ---------------------------------------------------------------------------
   2. ページの土台（テンプレート page-lp.php 用）
   --------------------------------------------------------------------------- */
body.lp-page {
	margin: 0;
	background: #fff;
	color: var(--lp-ink);
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.lp-page img { max-width: 100%; height: auto; }
body.lp-page a { color: var(--lp-blue-light); }

/* 本文は既定で中央寄せの読みやすい幅。alignfull だけ画面いっぱいに広げる。
   （旧テーマの 100vw トリックは横スクロールを生むため使わない） */
#lp-main { width: 100%; }
#lp-main > * {
	max-width: var(--lp-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
#lp-main > .alignfull,
#lp-main > .wp-block-cover.alignfull {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	left: auto;
	right: auto;
}

/* ---------------------------------------------------------------------------
   3. ファーストビューと帯（cover ブロック）
   --------------------------------------------------------------------------- */
#lp-main .wp-block-cover.lp-cover {
	background-image: none;          /* 移植元の noimage.png 参照を打ち消す */
	background-color: var(--lp-cream);
	align-items: center;
	justify-content: center;
	padding: 0;
}
/* FV は画面の高さに追従させる（1080px 固定だと小さい画面で間延びする） */
#lp-main > .wp-block-cover.lp-cover:first-child {
	min-height: min(1080px, 92vh) !important;
}
#lp-main .wp-block-cover.lp-cover .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}
#lp-main .wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--lp-max);
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
/* 帯状のカバー（2枚目以降）の見出しを引き締める */
#lp-main .wp-block-cover.lp-cover:not(:first-child) p {
	font-weight: 700;
	letter-spacing: .04em;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   4. セクションの余白と見出し
   --------------------------------------------------------------------------- */
#lp-main > .wp-block-columns,
#lp-main > .wp-block-heading,
#lp-main > h1, #lp-main > h2, #lp-main > h3,
#lp-main > p,
#lp-main > .wp-block-buttons,
#lp-main > .wp-block-contact-form-7-contact-form-selector {
	margin-top: 0;
	margin-bottom: 32px;
}
#lp-main > .wp-block-spacer { height: var(--lp-gap) !important; padding: 0; }

#lp-main h1, #lp-main h2, #lp-main h3 {
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	text-wrap: balance;
}
#lp-main h1 { font-size: clamp(24px, 3.4vw, 38px); }
#lp-main h2 { font-size: clamp(21px, 2.8vw, 31px); }
#lp-main h3 { font-size: clamp(17px, 2vw, 22px); }

/* 見出しスタイル「ストライプ」を、より締まった帯見出しに置き換える */
#lp-main .is-style-stripe {
	background: var(--lp-navy) !important;
	color: #fff !important;
	padding: 22px 28px !important;
	border-radius: 4px;
	text-align: center;
	position: relative;
}
#lp-main .is-style-stripe::before { content: none; }
#lp-main .is-style-stripe::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 18px; height: 18px;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}

/* 両端線の見出し（vk-blocks 由来）を自前で再現 */
#lp-main .is-style-vk-heading-both_ends {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--lp-navy);
}
#lp-main .is-style-vk-heading-both_ends::before,
#lp-main .is-style-vk-heading-both_ends::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--lp-blue));
}
#lp-main .is-style-vk-heading-both_ends::after { background: linear-gradient(90deg, var(--lp-blue), transparent); }

/* ---------------------------------------------------------------------------
   5. カラム・カード
   --------------------------------------------------------------------------- */
#lp-main .wp-block-columns { gap: clamp(20px, 3vw, 40px); }
#lp-main .wp-block-columns.shadow,
#lp-main .wp-block-column.shadow,
#lp-main p.shadow {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	box-shadow: 0 10px 30px -18px rgba(20,34,92,.45) !important;
}
#lp-main .px-5 { padding-left: clamp(20px, 3vw, 40px) !important; padding-right: clamp(20px, 3vw, 40px) !important; }
#lp-main .py-5 { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(24px, 3vw, 40px) !important; }

/* 施工工程（lp-step）を番号付きのカードに */
#lp-main .lp-step .wp-block-column {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	padding: 20px !important;
	box-shadow: 0 8px 24px -20px rgba(20,34,92,.5);
}
#lp-main .lp-step .wp-block-column::after {
	content: "";
	position: absolute;
	top: 50%; right: -1.05rem;
	width: 0; height: 0;
	border-left: 10px solid var(--lp-blue);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	transform: translateY(-50%);
	display: block;
}
#lp-main .lp-step .wp-block-column:last-child::after { content: none; }
@media (max-width: 781px) {
	#lp-main .lp-step .wp-block-column::after {
		top: auto; bottom: -1.05rem; right: 50%;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 10px solid var(--lp-blue);
		border-bottom: 0;
		transform: translateX(50%);
	}
}

/* 画像は角を丸めて統一感を出す */
#lp-main .wp-block-image img { border-radius: 8px; }
#lp-main .wp-block-cover .wp-block-image img { border-radius: 0; }

/* ---------------------------------------------------------------------------
   6. ボタン
   --------------------------------------------------------------------------- */
#lp-main .wp-block-button__link {
	background: var(--lp-blue);
	color: #fff;
	border-radius: 999px;
	padding: 16px 44px;
	font-weight: 700;
	letter-spacing: .06em;
	box-shadow: 0 12px 26px -14px rgba(0,64,122,.75);
	transition: transform .15s ease, background-color .15s ease;
	text-decoration: none;
}
#lp-main .wp-block-button__link:hover { background: var(--lp-blue-light); transform: translateY(-2px); }
#lp-main .wp-block-button__link:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   7. お問い合わせフォーム
   --------------------------------------------------------------------------- */
#lp-main .wp-block-contact-form-7-contact-form-selector {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	box-shadow: 0 18px 44px -30px rgba(20,34,92,.55);
	max-width: 860px;
}
#lp-main .contact7 dt { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
#lp-main .contact7 dd { margin: 0 0 24px 0; }
#lp-main .contact7 input[type="text"],
#lp-main .contact7 input[type="email"],
#lp-main .contact7 input[type="tel"],
#lp-main .contact7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	border: 1px solid #c8d0d8;
	border-radius: 6px;
	background: #fbfcfd;
	font-size: 16px;      /* iOS で拡大されないように 16px 以上 */
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#lp-main .contact7 input:focus,
#lp-main .contact7 textarea:focus {
	border-color: var(--lp-blue-light);
	box-shadow: 0 0 0 3px rgba(11,107,191,.15);
	outline: none;
	background: #fff;
}
#lp-main .btn_contact7 input[type="submit"] {
	background: var(--lp-blue) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 16px 40px !important;
	font-weight: 700;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
	box-shadow: 0 12px 26px -14px rgba(0,64,122,.75);
}
#lp-main .btn_contact7 input[type="submit"]:hover { background: var(--lp-blue-light) !important; transform: translateY(-2px); }

/* ---------------------------------------------------------------------------
   8. 本文中の HTML ブロック（会社概要テーブル・地図）
   --------------------------------------------------------------------------- */
#lp-main table.kaisha {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	overflow: hidden;
}
#lp-main table.kaisha th,
#lp-main table.kaisha td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--lp-line);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
}
/* .kaisha th の配色は 8.5 節で指定（ここで background だけ上書きすると
   移植元の color:#fff が残って白文字×淡色背景になり読めなくなる） */
#lp-main table.kaisha tr:last-child th,
#lp-main table.kaisha tr:last-child td { border-bottom: 0; }
#lp-main iframe { max-width: 100%; border: 0; border-radius: 10px; }

/* ---------------------------------------------------------------------------
   9. スクロールで浮かび上がる演出（旧テーマの .huwa 相当）
   JS が動く環境でのみ隠す。JS 無効時は最初から見えるようにしておく。
   --------------------------------------------------------------------------- */
html.lp-js #lp-main .huwa {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
}
html.lp-js #lp-main .huwa.is-revealed { opacity: 1; transform: none; }
html.lp-js #lp-main .huwa.is-revealed > .wp-block-column:nth-child(2) { transition-delay: .08s; }
html.lp-js #lp-main .huwa.is-revealed > .wp-block-column:nth-child(3) { transition-delay: .16s; }
html.lp-js #lp-main .huwa.is-revealed > .wp-block-column:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	html.lp-js #lp-main .huwa { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   10. フッターと固定CTAバー
   --------------------------------------------------------------------------- */
.lp-footer {
	background: var(--lp-navy);
	color: #cdd6e4;
	padding: 48px 20px calc(48px + 76px);   /* 固定CTAバーのぶん余白を足す */
	text-align: center;
	font-size: 14px;
	line-height: 2;
}
.lp-footer__inner { max-width: var(--lp-max); margin: 0 auto; }
.lp-footer__name { color: #fff; font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.lp-footer__addr, .lp-footer__tel { margin: 0; }
.lp-footer__tel a { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.lp-footer__nav { margin: 22px 0 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.lp-footer__nav a { color: #cdd6e4; text-decoration: none; }
.lp-footer__nav a:hover { color: #fff; text-decoration: underline; }
.lp-footer__copy { margin: 0; font-size: 12px; color: #8f9cb5; }

.lp-cta-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	display: flex;
	gap: 1px;
	background: rgba(20,34,92,.92);
	backdrop-filter: blur(6px);
	box-shadow: 0 -6px 24px -12px rgba(0,0,0,.5);
}
.lp-cta-bar a {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.35;
	transition: background-color .15s ease;
}
.lp-cta-bar__tel { background: #fff; color: var(--lp-navy); }
.lp-cta-bar__tel:hover { background: #eef2f8; }
.lp-cta-bar__label { font-size: 11px; letter-spacing: .08em; color: var(--lp-ink-soft); }
.lp-cta-bar__num { font-size: clamp(18px, 3.6vw, 24px); letter-spacing: .04em; }
.lp-cta-bar__form { background: var(--lp-accent); color: #21160a; font-size: clamp(14px, 2.6vw, 17px); }
.lp-cta-bar__form:hover { background: #eeb457; }
@media (min-width: 782px) {
	.lp-cta-bar { left: auto; right: 24px; bottom: 24px; border-radius: 12px; overflow: hidden; max-width: 520px; }
	.lp-cta-bar a { padding: 14px 24px; }
}

/* パララックス（background-attachment: fixed）は iOS で効かず表示が崩れるため、
   タッチ端末と狭い画面では通常の背景に戻す */
@media (max-width: 781px), (hover: none) {
	#lp-main .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll !important;
		background-size: cover !important;
	}
}

/* ===========================================================================
   11. 表示調整（2026-09-09 実機確認後）
   実際の表示で見つかった読みにくさ・崩れをまとめて補正する。
   本文（投稿データ）側は触らず、見た目だけをここで整える方針。
   =========================================================================== */

/* --- 11.1 見出し帯の配色を統一 -----------------------------------------
   本文には #0d04b9（青紫）・#0d729e（青緑）・#505b5d（灰）・#066690 が
   インラインで混在しており、ページ全体の色数が多く散らかって見えていた。
   ブランドの紺／青の2色に寄せ、文字は必ず白にして可読性を確保する。      */
#lp-main .wp-block-heading[style*="background-color:#0d04b9"],
#lp-main .wp-block-heading[style*="background-color:#505b5d"],
#lp-main h1[style*="background-color:#0d04b9"],
#lp-main h2[style*="background-color:#0d04b9"],
#lp-main h2[style*="background-color:#505b5d"],
#lp-main h3[style*="background-color:#0d04b9"] {
	background-color: var(--lp-navy) !important;
}
#lp-main .wp-block-heading[style*="background-color:#0d729e"],
#lp-main .wp-block-heading[style*="background-color:#066690"],
#lp-main h2[style*="background-color:#0d729e"],
#lp-main h2[style*="background-color:#066690"],
#lp-main h3[style*="background-color:#0d729e"],
#lp-main h3[style*="background-color:#066690"] {
	background-color: var(--lp-blue) !important;
}
/* 色付きの帯の中は白抜き（テーマ由来の淡い文字色を打ち消す） */
#lp-main [class*="has-background"][style*="background-color:#"],
#lp-main .wp-block-heading[style*="background-color:#"] {
	color: #fff !important;
}
#lp-main [class*="has-background"][style*="background-color:#"] *,
#lp-main .wp-block-heading[style*="background-color:#"] * {
	color: inherit !important;
}
/* 定義が失われている LIQUID LP のパレットクラスを補う */
#lp-main .has-liquid-theme-color { color: var(--lp-blue) !important; }
#lp-main .has-liquid-dark-gray-color { color: var(--lp-ink) !important; }
#lp-main .has-liquid-theme-background-color { background-color: var(--lp-blue) !important; color: #fff !important; }
/* 帯の中で上のパレットが当たっても白抜きを優先する */
#lp-main .wp-block-heading[style*="background-color:#"].has-liquid-theme-color,
#lp-main .wp-block-heading[style*="background-color:#"] .has-liquid-theme-color { color: #fff !important; }

/* --- 11.2 カードのはみ出しを解消 ---------------------------------------
   .shadow を付けたカラムブロックに余白指定が無く、本文がカードの下端から
   はみ出していた。カード自体に余白を持たせ、内側の要素が縮めるようにする。 */
#lp-main .wp-block-columns.shadow,
#lp-main .wp-block-column.shadow,
#lp-main p.shadow {
	padding: clamp(24px, 3vw, 40px) !important;
	overflow: visible;
}
#lp-main .wp-block-columns.shadow.px-5,
#lp-main .wp-block-columns.shadow.py-5 { padding: clamp(24px, 3vw, 40px) !important; }
#lp-main .wp-block-column { min-width: 0; }
#lp-main .wp-block-column.is-vertically-aligned-center { align-self: center; }
/* カード内の段落が大きすぎて窮屈だったので上限を設ける */
#lp-main .wp-block-columns.shadow p[style*="font-size:28px"] { font-size: clamp(17px, 2.1vw, 23px) !important; }

/* --- 11.3 「左に細い文章＋右に画像多数」を読みやすく ---------------------
   1行が20文字前後で折り返して読みづらかったため、文章側の最低幅を確保し、
   画像側はきれいなグリッドに整える。幅が足りない場合は縦積みに切り替える。 */
@media (min-width: 900px) {
	#lp-main .wp-block-columns > .wp-block-column:has(> p),
	#lp-main .wp-block-columns > .wp-block-column:has(> .wp-block-paragraph) {
		min-width: 360px;
	}
}
@media (max-width: 899px) {
	#lp-main .wp-block-columns { flex-wrap: wrap !important; }
	#lp-main .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}
/* 本文の行長と行間（読み物として成立する幅に） */
#lp-main .wp-block-column > p { max-width: 42em; line-height: 2; }
/* 注釈の小さい文字が薄すぎたので濃さを上げる */
#lp-main .wp-block-column > p[style*="font-size:1"],
#lp-main small { color: var(--lp-ink-soft); }

/* --- 11.4 縦の余白（表・地図・フッターが密着していた） -------------------- */
#lp-main > table,
#lp-main > iframe,
#lp-main > center,
#lp-main > div:not(.wp-block-cover):not(.wp-block-columns):not(.wp-block-spacer):not(.wp-block-buttons) {
	margin-top: 32px;
	margin-bottom: 56px;
}
#lp-main > *:last-child { margin-bottom: clamp(48px, 7vw, 88px); }
#lp-main center { display: block; }
#lp-main center iframe { display: block; margin: 0 auto; max-width: 100%; }

/* --- 11.5 会社概要テーブル ------------------------------------------------ */
#lp-main table.kaisha {
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 10px 30px -22px rgba(20,34,92,.5);
}
#lp-main table.kaisha th {
	width: 30%;
	background-color: var(--lp-navy) !important;
	color: #fff !important;
	font-weight: 700;
	vertical-align: top;
	border-color: rgba(255,255,255,.14);
}
#lp-main table.kaisha td {
	background: #fff;
	color: var(--lp-ink);
	border-color: var(--lp-line);
}
#lp-main table.kaisha td a { color: var(--lp-blue-light); text-decoration: underline; }
@media (max-width: 767px) {
	/* 移植元のCSSがスマホで block 表示にするため、見出し行を帯として見せる */
	#lp-main table.kaisha th { width: auto; border-radius: 6px 6px 0 0; }
	#lp-main table.kaisha td { border-radius: 0 0 6px 6px; margin-bottom: 14px; }
}

/* --- 11.6 固定CTAバーの文字切れ ------------------------------------------ */
.lp-cta-bar a {
	min-height: 62px;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.lp-cta-bar__form {
	font-size: clamp(13px, 2.2vw, 16px);
	line-height: 1.3;
	padding-left: 14px;
	padding-right: 14px;
}
@media (min-width: 782px) {
	.lp-cta-bar { max-width: 560px; }
	.lp-cta-bar__form { white-space: nowrap; }
}

/* --- 11.7 ギャラリーの体裁（LP内） --------------------------------------- */
#lp-main .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
#lp-main .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
}
#lp-main .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
@media (max-width: 599px) {
	#lp-main .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   12. 冒頭セクションの作り直しと、帯セクションの演出
   =========================================================================== */

/* --- 12.1 見出し帯とカードを一体のパネルにする -------------------------
   帯とカードが別々に浮いていて、間の余白と card 内の空きが噛み合わず
   バランスが悪かった。帯を「見出し部」、カードを「本文部」として
   ひと続きのパネルに見せる。                                             */
#lp-main .is-style-stripe {
	background: linear-gradient(135deg, #14225c 0%, #22347f 100%) !important;
	color: #fff !important;
	padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 44px) !important;
	border-radius: 12px 12px 0 0;
	text-align: center;
	letter-spacing: .05em;
	margin-bottom: 0 !important;
	box-shadow: 0 -2px 0 rgba(255,255,255,.06) inset;
}
/* 装飾の三角は位置がずれて見えたので廃止 */
#lp-main .is-style-stripe::before,
#lp-main .is-style-stripe::after { content: none !important; }

/* 帯の直後のカードは上を四角にして帯と接続する */
#lp-main .is-style-stripe + .wp-block-columns.shadow,
#lp-main .is-style-stripe + .wp-block-columns {
	margin-top: 0 !important;
	border-radius: 0 0 12px 12px !important;
	border-top: 0 !important;
	box-shadow: 0 18px 40px -28px rgba(20,34,92,.55) !important;
}

/* 冒頭カードの中身。文章を主役にし、機材写真は添え物のサイズに抑える */
#lp-main .is-style-stripe + .wp-block-columns .wp-block-column > p {
	font-size: clamp(17px, 2.2vw, 24px) !important;
	line-height: 1.95;
	font-weight: 500;
	margin: 0;
	max-width: 34em;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-image img {
	max-height: 260px;
	width: auto;
	margin-inline: auto;
}
#lp-main .is-style-stripe + .wp-block-columns > .wp-block-column {
	align-self: center;
	padding-block: clamp(6px, 1vw, 14px);
}

/* --- 12.2 帯セクション（カバー）の演出 ---------------------------------- */
#lp-main .wp-block-cover.lp-cover { position: relative; overflow: hidden; }

/* 写真の上に薄いグラデーションを敷いて文字を読みやすくする */
#lp-main .wp-block-cover.lp-cover:not(:first-child)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20,34,92,.06) 0%, rgba(20,34,92,.22) 100%);
}
#lp-main .wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* 背景写真をゆっくり寄せる（Ken Burns）。動きを抑える設定では止める */
#lp-main .wp-block-cover.lp-cover .wp-block-cover__image-background {
	transform-origin: 60% 50%;
	will-change: transform;
	animation: lp-kenburns 22s ease-in-out infinite alternate;
}
@keyframes lp-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.12); }
}

/* 帯の見出し文字を締める */
#lp-main .wp-block-cover.lp-cover p[style*="font-size:48px"] {
	font-size: clamp(22px, 4.2vw, 46px) !important;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	margin: 0;
}

/* --- 12.3 蛍光ペンのラインが左から伸びる演出 ---------------------------
   vk_highlighter はインラインの背景グラデーション。JS が動く環境でだけ
   幅 0 から伸ばす。動かない環境では最初から引かれた状態にする。          */
html.lp-js #lp-main .huwa .vk_highlighter {
	background-repeat: no-repeat !important;
	background-size: 0% 100% !important;
	transition: background-size 1.1s cubic-bezier(.22,.61,.36,1) .3s;
}
html.lp-js #lp-main .huwa.is-revealed .vk_highlighter {
	background-size: 100% 100% !important;
}

/* --- 12.4 動きを減らす設定への配慮 -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#lp-main .wp-block-cover.lp-cover .wp-block-cover__image-background { animation: none; transform: none; }
	html.lp-js #lp-main .huwa .vk_highlighter { background-size: 100% 100% !important; transition: none; }
}

/* --- 12.5 ファーストビューを画面の高さいっぱいに ------------------------
   背景は 1920x1080 (16:9)。画面比率によって左右が切れるが、
   ロゴは中央寄りに配置されているため 50% 50% で中心を保つ。
   svh はモバイルのアドレスバー分を除いた実効高さ（未対応環境は vh で代替）。 */
#lp-main > .wp-block-cover.lp-cover:first-child {
	min-height: 100vh !important;
	min-height: 100svh !important;
	padding: 0;
}
#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
	background-position: 50% 50% !important;
	background-size: cover !important;
}
/* （縦長画面で 78svh に縮める指定は 14.2 で作り直したため削除） */

/* --- 12.6 冒頭カードの上余白を詰める --------------------------------------
   機材写真（260px）が本文より背が高く、縦中央揃えの本文が下がって
   上に大きな空きができていた。写真を小さくして高さ差を縮め、
   カードと段落の余白も整理する。 */
#lp-main .is-style-stripe + .wp-block-columns {
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px) !important;
	align-items: center;
}
#lp-main .is-style-stripe + .wp-block-columns > .wp-block-column {
	padding-block: 0;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-image {
	margin: 0;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-image img {
	max-height: 175px;
}
/* Bootstrap の my-3（上下 1rem）が効いて余白が重なっていた分を打ち消す */
#lp-main .is-style-stripe + .wp-block-columns .wp-block-column > p.my-3 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* --- 12.7 FAQ（アコーディオン） ------------------------------------------ */
#lp-main .lp-faq { display: grid; gap: 12px; }
#lp-main .lp-faq-item {
	background: #fff;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px -22px rgba(20,34,92,.5);
	overflow: hidden;
}
#lp-main .lp-faq-item > summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 52px 18px 22px;
	font-weight: 700;
	color: var(--lp-navy);
	position: relative;
	line-height: 1.7;
	transition: background-color .15s ease;
}
#lp-main .lp-faq-item > summary::-webkit-details-marker { display: none; }
#lp-main .lp-faq-item > summary:hover { background: #f4f7fb; }
#lp-main .lp-faq-item > summary:focus-visible { outline: 3px solid var(--lp-blue-light); outline-offset: -3px; }
#lp-main .lp-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 22px; top: 50%;
	width: 11px; height: 11px;
	border-right: 2px solid var(--lp-blue);
	border-bottom: 2px solid var(--lp-blue);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
#lp-main .lp-faq-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
#lp-main .lp-faq-item[open] > summary { background: #f4f7fb; }
#lp-main .lp-faq-item > p {
	margin: 0;
	padding: 4px 22px 22px;
	color: var(--lp-ink);
	line-height: 2;
	border-top: 1px solid var(--lp-line);
	padding-top: 18px;
}

/* --- 12.8 冒頭カードのバランス調整（12.6 の上書き） ----------------------
   写真を 175px まで縮めたら今度は小さすぎて右側が間延びした。
   写真は 210px 程度で存在感を保ち、本文とベースラインを揃える。 */
#lp-main .is-style-stripe + .wp-block-columns {
	padding: clamp(26px, 3vw, 38px) clamp(22px, 3.4vw, 44px) !important;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-image img {
	max-height: 210px;
	width: auto;
	display: block;
	margin-inline: auto;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-column > p {
	font-size: clamp(16px, 1.9vw, 20px) !important;
	line-height: 2;
	max-width: none;
}
/* 段落どうしの間隔（1文目と2文目）を適度に */
#lp-main .is-style-stripe + .wp-block-columns .wp-block-column > p + p { margin-top: 1.2em !important; }

/* --- 12.9 FAQ の幅揃えと開閉アニメーション -------------------------------
   グループブロックの is-layout-constrained が子要素に margin-inline:auto を
   与えており、グリッド内では「内容幅に縮んで中央寄せ」になって幅がバラついていた。 */
#lp-main .lp-faq {
	display: grid;
	gap: 12px;
	justify-items: stretch;
	max-width: 860px;
	margin-inline: auto;
}
#lp-main .lp-faq > .lp-faq-item,
#lp-main .lp-faq > * {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	box-sizing: border-box;
}

/* 開閉アニメーション（高さと不透明度を JS が制御する） */
#lp-main .lp-faq-item > p {
	overflow: hidden;
	transition: height .28s ease, opacity .24s ease;
}
@media (prefers-reduced-motion: reduce) {
	#lp-main .lp-faq-item > p { transition: none; }
}

/* --- 12.10 冒頭カードの上部の空きを解消（12.8 の上書き） ------------------
   カード上端と本文の間に大きな空きができていた原因は、
   写真(210px)と本文(約110px)の高さ差 100px を align-items:center が
   上下に 50px ずつ振り分けていたため。
   LP の導入文なので本文を主役のサイズまで引き上げ、写真と釣り合わせる。 */
#lp-main .is-style-stripe + .wp-block-columns {
	padding: 30px clamp(22px, 3.4vw, 44px) !important;
	align-items: center;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-column > p {
	font-size: clamp(17px, 2.1vw, 23px) !important;
	line-height: 1.85;
	font-weight: 500;
}
#lp-main .is-style-stripe + .wp-block-columns .wp-block-image img {
	max-height: 195px;
}
/* 段の高さが揃わない場合でも上端の空きが目立たないよう、上下の振り分けを抑える */
@media (min-width: 782px) {
	#lp-main .is-style-stripe + .wp-block-columns > .wp-block-column:first-child { align-self: center; }
	#lp-main .is-style-stripe + .wp-block-columns > .wp-block-column:last-child  { align-self: center; }
}

/* --- 12.11 実測にもとづく最終調整 ---------------------------------------
   ブラウザで実寸を測って判明した2点を補正する。

   (a) 冒頭カード: 高さ274px に対し中身が283px あり、最終行の下端が
       9px はみ出していた（行の descender 分）。下余白を足して収める。

   (b) 文章＋ギャラリーの段: 文章側 707px に対しギャラリー側は 333px しか
       なく、右下に大きな空白ができていた。3列(193px)を2列にすると
       画像が約290pxに拡大し、ギャラリー高も約680pxとなって高さが揃う。 */

#lp-main .is-style-stripe + .wp-block-columns {
	padding-top: 32px !important;
	padding-bottom: 44px !important;
}

#lp-main .wp-block-column .wp-block-gallery.has-nested-images {
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (max-width: 899px) {
	/* 縦積みに切り替わる幅では、横に広く使えるので3列に戻す */
	#lp-main .wp-block-column .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 599px) {
	#lp-main .wp-block-column .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- 12.12 施工工程セクションの矢印と写真 --------------------------------
   矢印: 移植元の .lp-step .wp-block-column:after が四方にボーダーを持つ
         「くの字」だったため、私の三角指定と混ざって右側に 5px の
         ボーダーが残り、蝶ネクタイ状になっていた。全ボーダーを一度
         打ち消してから右向き三角だけを引き直す。
   写真: カラム幅 360px（内側 283px）に対して 200px しか使っておらず
         小さく見えたため、カラム幅いっぱいに広げる。 */
#lp-main .lp-step .wp-block-column::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	right: -19px !important;
	left: auto !important;
	bottom: auto !important;
	width: 0 !important;
	height: 0 !important;
	background: none !important;
	border: 0 solid transparent !important;
	border-left-width: 12px !important;
	border-left-style: solid !important;
	border-left-color: var(--lp-blue) !important;
	border-top-width: 9px !important;
	border-bottom-width: 9px !important;
	border-right-width: 0 !important;
	border-radius: 0 !important;
	transform: translateY(-50%) !important;
	display: block !important;
}
#lp-main .lp-step .wp-block-column:last-child::after { display: none !important; }

/* スマホでは下向きに */
@media (max-width: 899px) {
	#lp-main .lp-step .wp-block-column::after {
		top: auto !important;
		bottom: -19px !important;
		right: 50% !important;
		border-left-width: 9px !important;
		border-left-style: solid !important;
		border-left-color: transparent !important;
		border-right-width: 9px !important;
		border-right-style: solid !important;
		border-right-color: transparent !important;
		border-top-width: 12px !important;
		border-top-style: solid !important;
		border-top-color: var(--lp-blue) !important;
		border-bottom-width: 0 !important;
		transform: translateX(50%) !important;
	}
}

/* 工程写真をカラム幅いっぱいに */
#lp-main .lp-step .wp-block-column .wp-block-image { margin: 0 0 14px; }
#lp-main .lp-step .wp-block-column .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	border-radius: 8px;
}

/* --- 12.13 問い合わせ直前の帯を読みやすく -------------------------------
   「ご気軽にご相談ください」が #0475a5（中間の青）の 19.2px で、
   明るい写真の上では埋もれていた。問い合わせへの導入なので、
   濃紺・太字・大きめにして視線を集める。 */
#lp-main .wp-block-cover.lp-cover p[style*="color:#0475a5"],
#lp-main .wp-block-cover.lp-cover p[style*="color: #0475a5"] {
	color: #14225c !important;
	font-size: clamp(22px, 3.4vw, 36px) !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-shadow: 0 1px 10px rgba(255,255,255,.85), 0 2px 20px rgba(255,255,255,.6) !important;
}
/* この帯だけ写真を白側に寄せて文字を浮かせる */
#lp-main .wp-block-cover.lp-cover:has(p[style*="color:#0475a5"])::after {
	background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.55) 100%) !important;
}

/* ===========================================================================
   13. 仕上げ（2026-09-10）
   =========================================================================== */

/* --- 13.2 見出し帯の段（装飾画像が幅を取りすぎていた） --------------------
   左カラム 334px を装飾画像1枚が占め、帯が 668px に収まって
   右にずれて見えていた。画像を小さな添え物にして帯を広く使う。 */
@media (min-width: 900px) {
	#lp-main > .wp-block-columns:has(> .wp-block-column .wp-block-heading) > .wp-block-column:not(:has(.wp-block-heading)) {
		flex: 0 0 150px !important;
		max-width: 150px;
		align-self: flex-end;
	}
	#lp-main > .wp-block-columns:has(> .wp-block-column .wp-block-heading) > .wp-block-column:has(.wp-block-heading) {
		flex: 1 1 auto !important;
		max-width: none;
	}
}
/* 3カード（見出しが全カラムにある段）はこの対象から外す。
   ただし広い画面に限る。狭い画面では WordPress 標準の
   flex-basis:100%（縦積み）を邪魔してはいけない。 */
@media (min-width: 900px) {
	#lp-main > .wp-block-columns.lp-step > .wp-block-column,
	#lp-main > .wp-block-columns.has-4-columns > .wp-block-column {
		flex: 1 1 0 !important;
		max-width: none;
	}
}

/* --- 13.3 濃色の帯に乗るマーカーを整理 -----------------------------------
   Refresh / Recoat / Renovation の見出しは白文字に黄色のマーカーが
   重なって視認性が落ちていた。濃色背景の中では下線に置き換える。 */
#lp-main [style*="background-color:#"] .vk_highlighter,
#lp-main .has-background .vk_highlighter {
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: inset 0 -2px 0 rgba(255, 241, 0, .9);
	padding-bottom: 2px;
}


/* ===========================================================================
   14. ファーストビュー（整理して書き直し）
   ---------------------------------------------------------------------------
   背景画像 bona0012.png は「左が生成り／右が濃紺、境目に生成りの円があり
   その中に Three Frontier と Bona のロゴ」という構成。
   ロゴはおよそ画像幅の 45% の位置にある。

   ・広い画面 : 左の生成り面が広く空くので、そこに濃紺の文字を置く。
                膜は不要で、背景がそのまま見える。
   ・狭い画面 : 画像が切り取られて文字を置ける余白が無くなる。
                膜で覆うと背景（ロゴ）が見えなくなり本末転倒なので、
                最初の 2 秒は背景だけを見せ、そのあと膜と文字を
                ふわっと重ねる。
   =========================================================================== */

#lp-main > .wp-block-cover.lp-cover:first-child { position: relative; }

#lp-main .lp-fv-lead {
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .04em;
	margin: 0 0 16px;
}
#lp-main .lp-fv-sub {
	font-size: clamp(13px, 1.6vw, 16px) !important;
	line-height: 1.9;
	letter-spacing: .05em;
	margin: 0 0 28px;
}
#lp-main .lp-fv-btns { display: flex; gap: 12px; }
#lp-main .lp-fv-btns .wp-block-button__link {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
#lp-main .lp-fv-btn-main .wp-block-button__link {
	background: var(--lp-accent);
	color: #21160a;
	font-size: clamp(14px, 1.6vw, 16px);
	padding: 15px 30px;
}
#lp-main .lp-fv-btn-main .wp-block-button__link:hover { background: #eeb457; }
#lp-main .lp-fv-btn-tel .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	font-size: clamp(15px, 1.8vw, 18px);
	padding: 13px 28px;
	letter-spacing: .08em;
}

/* ---- 広い画面：生成り面に濃紺で置く（背景はそのまま見える） ---- */
@media (min-width: 1200px) {
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		max-width: none;
		margin-inline: 0;
		padding: 0 0 0 clamp(40px, 6vw, 120px);
	}
	/* ロゴ（画像幅の約45%）に触れない幅に収める */
	#lp-main .lp-fv-lead,
	#lp-main .lp-fv-sub,
	#lp-main .lp-fv-btns { max-width: min(440px, 30vw); }
	#lp-main .lp-fv-lead { font-size: clamp(34px, 3.6vw, 56px) !important; color: var(--lp-navy) !important; }
	#lp-main .lp-fv-sub  { color: #3d4a6b !important; }
	#lp-main .lp-fv-btns { flex-direction: column; align-items: flex-start; }
	#lp-main .lp-fv-btns .wp-block-button { width: 290px; }
	#lp-main .lp-fv-btn-tel .wp-block-button__link { color: var(--lp-navy); }
	#lp-main .lp-fv-btn-tel .wp-block-button__link:hover { background: rgba(20,34,92,.08); }
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
		background-position: 50% 50% !important;
		object-position: 50% 50% !important;
	}
}

/* ---- 狭い画面：背景を2秒見せてから文字を重ねる ---- */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		max-width: 100%;
		padding: 0 22px 92px;
		text-align: center;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(20,34,92,.30) 0%, rgba(20,34,92,.72) 100%);
	}
	#lp-main .lp-fv-lead {
		font-size: clamp(28px, 7.6vw, 42px) !important;
		color: #fff !important;
		text-shadow: 0 3px 18px rgba(0,0,0,.45);
	}
	#lp-main .lp-fv-sub {
		color: rgba(255,255,255,.92) !important;
		text-shadow: 0 2px 12px rgba(0,0,0,.45);
	}
	#lp-main .lp-fv-lead, #lp-main .lp-fv-sub { text-align: center !important; }
	#lp-main .lp-fv-btns { flex-direction: column; align-items: center; }
	#lp-main .lp-fv-btns .wp-block-button { width: min(300px, 80vw); }
	#lp-main .lp-fv-btn-tel .wp-block-button__link { color: #fff; }
	#lp-main .lp-fv-btn-tel .wp-block-button__link:hover { background: rgba(255,255,255,.16); }
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
		background-position: 62% 50% !important;
		object-position: 62% 50% !important;
	}
}

@keyframes lp-fv-appear {
	to { opacity: 1; transform: none; }
}

/* 動きを減らす設定では最初から表示する */
@media (prefers-reduced-motion: reduce) {
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container,
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* --- 14.1 狭い画面：ロゴを活かして文字は下に置く -------------------------
   画像が縦長に切り取られるとロゴが画面中央に来るため、そこへ文字を
   重ねると両方とも見づらい。文字を下部に寄せ、膜も下半分だけに掛けて
   上半分（ロゴ）はそのまま見せる。 */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child {
		align-items: flex-end !important;
		justify-content: center !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding: 0 22px 104px;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		background: linear-gradient(180deg,
			rgba(20,34,92,0)   0%,
			rgba(20,34,92,.15) 34%,
			rgba(20,34,92,.68) 60%,
			rgba(20,34,92,.90) 100%) !important;
	}
	#lp-main .lp-fv-sub { margin-bottom: 22px; }
}

/* --- 14.2 狭い画面：文字ブロックを詰めてロゴとの重なりを避ける -----------
   実測で文字ブロックが 453px あり、FV を 78svh(702px) に縮めていたため
   下寄せにしてもロゴ帯（画面中央）まで食い込んでいた。
   FV を全高に戻したうえで文字を詰め、下 1/3 に収める。 */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child {
		min-height: 100svh !important;
	}
	#lp-main .lp-fv-lead {
		font-size: clamp(26px, 6.8vw, 36px) !important;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	#lp-main .lp-fv-sub {
		font-size: 12.5px !important;
		line-height: 1.75;
		margin-bottom: 16px;
	}
	#lp-main .lp-fv-btns { gap: 9px; }
	#lp-main .lp-fv-btn-main .wp-block-button__link { padding: 13px 24px; font-size: 14px; }
	#lp-main .lp-fv-btn-tel  .wp-block-button__link { padding: 11px 24px; font-size: 16px; }
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding-bottom: 96px;
	}
	/* 膜は下側だけ。ロゴのある中央から上はそのまま見せる */
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		background: linear-gradient(180deg,
			rgba(20,34,92,0)   0%,
			rgba(20,34,92,0)   46%,
			rgba(20,34,92,.55) 66%,
			rgba(20,34,92,.90) 100%) !important;
	}
}

/* --- 14.3 文字の背後だけ膜を少し早く立ち上げる -------------------------- */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		background: linear-gradient(180deg,
			rgba(20,34,92,0)   0%,
			rgba(20,34,92,0)   38%,
			rgba(20,34,92,.42) 52%,
			rgba(20,34,92,.74) 68%,
			rgba(20,34,92,.92) 100%) !important;
	}
}

/* --- 14.4 狭い画面のFVを作り直す（切り取らずに全体を見せる） -------------
   16:9 の画像を縦長の画面に cover で敷くと、左右が大きく切り取られて
   ロゴが欠け、どこを写しても文字と競合していた。
   contain にして画像を丸ごと上部に置き、余白は濃紺で埋める。
   文字はその下の濃紺の上に置くので、膜も影も要らず確実に読める。 */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child {
		background-color: var(--lp-navy) !important;
		min-height: 100svh !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: 50% 22% !important;
		object-fit: contain !important;
		object-position: 50% 22% !important;
		animation: none !important;   /* 全体表示なのでズームは掛けない */
	}
	/* 濃紺の上に置くので膜は不要 */
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		background: none !important;
	}
	#lp-main .lp-fv-lead {
		color: #fff !important;
		text-shadow: none;
		font-size: clamp(27px, 7.2vw, 38px) !important;
	}
	#lp-main .lp-fv-sub {
		color: rgba(255,255,255,.85) !important;
		text-shadow: none;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding-bottom: 92px;
	}
}

/* --- 14.5 狭い画面のFVの比率と、帯の文字の折り返し ----------------------
   (a) contain で全体を見せると、縦長画面では画像が横帯（画面幅×約56%）に
       なる。FV を画面いっぱいにすると帯が小さく見えるので、高さを 72svh に
       抑えて画像の占める割合を上げ、続きのコンテンツも早く見えるようにする。
   (b) 帯の見出しが「…生まれ変わ／ります」と割れていたので、
       文節で折り返すようにする。 */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child {
		min-height: 72svh !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
		background-position: 50% 14% !important;
		object-position: 50% 14% !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding-bottom: 84px;
	}
	/* 帯の見出しは文節で折り返す */
	#lp-main .wp-block-cover.lp-cover p,
	#lp-main .wp-block-heading {
		word-break: keep-all;
		overflow-wrap: anywhere;
		line-break: strict;
	}
}

/* --- 14.6 狭い画面のFVを作り直す（最終方針） -----------------------------
   16:9 の背景画像を 9:19 の画面に収める方法を一通り試したが、
     ・cover  → 左右が大きく切れてロゴが欠け、文字とも競合する
     ・contain→ 帯が小さくなりロゴが判読できない
   いずれも成立しなかった。ブランドのロゴは本文（Bona施工加盟店の節）に
   改めて出てくるため、FV では無理に見せず、濃紺の面に言葉を置く。
   結果として文字が最も読みやすく、表示も速い。 */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child {
		min-height: 68svh !important;
		background: linear-gradient(160deg, #1b2c73 0%, #14225c 55%, #0f1a48 100%) !important;
		align-items: center !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__image-background {
		display: none !important;
	}
	#lp-main > .wp-block-cover.lp-cover:first-child::after { background: none !important; }
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding: 0 24px 76px;
	}
	#lp-main .lp-fv-lead {
		font-size: clamp(30px, 8.6vw, 42px) !important;
		line-height: 1.35;
		margin-bottom: 14px;
	}
	#lp-main .lp-fv-sub {
		font-size: 13px !important;
		margin-bottom: 26px;
	}
	/* 濃紺の面に細い金色の線を引いて締める */
	#lp-main .lp-fv-lead::after {
		content: "";
		display: block;
		width: 54px;
		height: 3px;
		background: var(--lp-accent);
		border-radius: 2px;
		margin: 18px auto 0;
	}
}

/* 中央揃えに対して下余白が大きく、上下のバランスが崩れていたので詰める
   （固定CTAバーは position:fixed で本文の流れには影響しない） */
@media (max-width: 1199px) {
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		padding: 0 24px 28px;
	}
}

/* --- 14.7 狭い画面のFVに奥行きと動きを与える ----------------------------
   写真を使わないぶん、PC版の背景にある「生成りの円」をCSSで再現して
   ブランドの意匠を引き継ぐ。加えてフローリングを想起させる細い斜線を
   ごく薄く敷き、文字は順に立ち上げる。すべて描画のみで画像は増やさない。 */
@media (max-width: 1199px) {
	/* 生成りの円（PC版の背景と同じモチーフ）を画面外にはみ出させて配置 */
	#lp-main > .wp-block-cover.lp-cover:first-child::before {
		content: "";
		position: absolute;
		z-index: 0;
		width: 148vw;
		height: 148vw;
		right: -66vw;
		top: -34vw;
		border-radius: 50%;
		background: radial-gradient(circle at 34% 34%,
			rgba(253,246,228,.20) 0%,
			rgba(253,246,228,.07) 52%,
			rgba(253,246,228,0)   72%);
		pointer-events: none;
	}
	/* 床板を思わせる細い斜線。主張しない濃さに留める */
	#lp-main > .wp-block-cover.lp-cover:first-child::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: repeating-linear-gradient(112deg,
			rgba(255,255,255,.05) 0 1px,
			rgba(255,255,255,0)   1px 30px) !important;
		mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 78%, transparent 100%);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 78%, transparent 100%);
	}
	#lp-main > .wp-block-cover.lp-cover:first-child .wp-block-cover__inner-container {
		position: relative;
		z-index: 2;
	}

	/* 文字は上から順に立ち上げる */
	#lp-main .lp-fv-lead  { animation: lp-rise .85s cubic-bezier(.22,.61,.36,1) .15s both; }
	#lp-main .lp-fv-sub   { animation: lp-rise .85s cubic-bezier(.22,.61,.36,1) .38s both; }
	#lp-main .lp-fv-btns  { animation: lp-rise .85s cubic-bezier(.22,.61,.36,1) .56s both; }
	/* 金の罫線は左右に伸びる */
	#lp-main .lp-fv-lead::after {
		width: 0;
		animation: lp-rule .7s cubic-bezier(.22,.61,.36,1) .75s forwards;
	}

	/* 見出しに少しだけ字間と陰影を足して締める */
	#lp-main .lp-fv-lead {
		letter-spacing: .06em;
		text-shadow: 0 10px 30px rgba(0,0,0,.28);
	}
	#lp-main .lp-fv-sub { letter-spacing: .08em; }
	#lp-main .lp-fv-btn-main .wp-block-button__link {
		box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
	}
}

@keyframes lp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@keyframes lp-rule {
	from { width: 0; }
	to   { width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	#lp-main .lp-fv-lead, #lp-main .lp-fv-sub, #lp-main .lp-fv-btns { animation: none !important; opacity: 1 !important; transform: none !important; }
	#lp-main .lp-fv-lead::after { animation: none !important; width: 54px !important; }
}