@charset "UTF-8";
/* ============================================
   コーティングトップ（coating）
   家風: coding-rules/style_guide.md 準拠
   ・色は直値／クラスは最小限（要素セレクタで辿る）
   ・立体影は filter:drop-shadow／CTAはhoverでfilter解除
   ・SPはファイル末尾に max-width:1079px で一括
   ・ベースは nagaoka_lp.css（2026-09-14 XD で改修）。
     ヘッダー(nav.lp_nav)・CV帯(section.cv)・a.btn・footer は coating_common.css 側
============================================ */

/* 共通 *******************/
/*本文の中央列（各セクション共通の内枠）*/
section.top_visual div.wrapper,
section.campaign div.wrapper,
section.coat_menu div.wrapper,
section.flow div.wrapper {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}
/*見出し（各セクション共通のベース。色はセクションごとに上書き）*/
h2.mds {
	margin: 0 0 24px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	color: #0B1B3A;
	text-align: center;
}
/*追従ナビからのページ内遷移時に固定ヘッダーへ潜り込まないための余白*/
section.campaign,
section.coat_menu,
section.flow,
section.works,
section.shop {
	scroll-margin-top: 90px;
}





/* シェル調整 *******************/
/*シェルヘッダーは本LPでは非表示（自前の全幅バーnav.lp_navに置き換え・殿指示 2026-07-23）*/
#header {
	display: none;
}
/*シェル既存の下部CTA帯（f-contact）は非表示。HTMLからも外した（裁定③ 2026-09-14）。CMS側で出力される場合の保険*/
section.f-contact {
	display: none;
}
/*旧フッター（#footer）向けの調整。フッターは新HTML（footer）に置き換えたため温存のみ
#footer div.pagetop div.sp-flex {
	display: none;
}
*/




/* top_visual *******************/
/*固定ヘッダー・ロゴに画像上端が食い込まないよう上に余白を取る*/
section.top_visual {
	padding: 88px 0 40px;
}
section.top_visual div.hero {
	position: relative;
}
section.top_visual div.hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
/*SP用画像はPCでは非表示（出し分けは自CSS内で行う）*/
section.top_visual div.hero img:last-of-type {
	display: none;
}
/*PCのみ画像右上に重ねるバッジチップ（2026-09-14 XD で撤去。復活時はHTMLのコメントを戻す）*/
section.top_visual div.badges {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	gap: 8px;
}
section.top_visual div.badges p {
	padding: 8px 16px;
	background: #fff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #0B1B3A;
}




/* campaign *******************/
/*20%OFF訴求のメインセクション*/
section.campaign {
	padding: 56px 0;
	background: #F4F8FF;
}
/*特典カード*/
section.campaign div.card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 860px;
	margin: 0 auto 32px;
	padding: 32px;
	background: #fff;
	border: 1px solid #D8E6FF;
	border-radius: 18px;
}
section.campaign div.card div.txt {
	flex: 1;
}
section.campaign div.card img {
	width: min(60vw, 260px);
	flex-shrink: 0;
	border-radius: 12px;
}
/*概要のdl（ラベルチップ＋本文）*/
section.campaign div.card dl {
	display: grid;
	grid-template-columns: 60px 1fr;
	row-gap: 12px;
	column-gap: 14px;
	align-items: start;
	margin: 0;
	font-size: 15px;
}
section.campaign div.card dt {
	padding: 3px 0;
	background: #0B63CE;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-align: center;
}
section.campaign div.card dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #0B1B3A;
}
section.campaign div.card dd b {
	font-size: 18px;
	font-weight: 900;
	color: #DE0010;
}




/* coat_menu *******************/
/*このセクションのみ内枠を1200pxへ拡張（カード4枚を横並びで窮屈にしないため）*/
section.coat_menu div.wrapper {
	max-width: 1200px;
}
/*「menu」はシェルCSSと衝突するため coat_menu*/
section.coat_menu {
	padding: 56px 0;
	background: #fff;
}
/*ブランドピル*/
section.coat_menu div.brand_pills {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}
section.coat_menu div.brand_pills p {
	margin: 0;
	padding: 6px 20px;
	background: #0B63CE;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
section.coat_menu p.lead {
	margin: 0 0 32px;
	font-size: 14px;
	color: #476087;
	text-align: center;
}
/*カードリスト（1リスト7枚をグリッドで上段3・下段4に配置。カード幅は全て同一）*/
section.coat_menu ul {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/*全カードは2トラックぶんの同一幅*/
section.coat_menu ul > li {
	grid-column: span 2;
}
/*上段のKeePer3枚は1トラックずらして中央寄せ*/
section.coat_menu ul > li:nth-of-type(1) {
	grid-column: 2 / span 2;
}
section.coat_menu ul > li:nth-of-type(2) {
	grid-column: 4 / span 2;
}
section.coat_menu ul > li:nth-of-type(3) {
	grid-column: 6 / span 2;
}
/*カード。価格ブロックを下端に揃えるため縦flex*/
section.coat_menu li {
	display: flex;
	flex-direction: column;
	padding: 20px 16px;
	background: #fff;
	border: 1px solid #D8E6FF;
	border-radius: 16px;
	text-align: center;
}
section.coat_menu li h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #0B1B3A;
}
section.coat_menu li img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 12px;
	border-radius: 8px;
}
/*特徴2行*/
section.coat_menu ul.feature {
	display: block;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
}
section.coat_menu ul.feature li {
	display: block;
	width: auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #476087;
	text-align: left;
}
section.coat_menu ul.feature li::before {
	content: "・";
}
/*価格ブロック（通常価格→20%OFF→差額。数字は全てテキスト）*/
section.coat_menu div.price {
	margin-top: auto;
	padding-top: 12px;
}
/*「（税込）」は塊のまま折り返す（括弧の途中で割らない）*/
section.coat_menu div.price small {
	white-space: nowrap;
}
section.coat_menu p.price_regular {
	margin: 0;
	font-size: 13px;
	color: #476087;
}
/*「通常価格」ラベルは独立行に*/
section.coat_menu p.price_regular span.label {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
}
/*打消しは数字のみ。「円〜（税込）」は右の塊に*/
section.coat_menu p.price_regular s {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	color: #0B1B3A;
	text-decoration: none;
}
section.coat_menu p.price_regular s span.num {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	text-decoration: line-through;
}
section.coat_menu p.price_regular span.unit {
	font-size: 12px;
}
section.coat_menu p.price_regular span.unit small {
	font-size: 10px;
}
/*下向き矢印＋20%OFFバッジ*/
section.coat_menu div.arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}
section.coat_menu div.arrow::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #1184FF;
}
section.coat_menu span.off_badge {
	display: inline-block;
	white-space: nowrap;
	padding: 4px 12px;
	background: #DE0010;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
/*割引後価格（特大数字＋右に「円〜（税込）」の縦組み塊。行高1で締める）*/
section.coat_menu p.price_sale {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	margin: 4px 0 0;
	line-height: 1;
	color: #DE0010;
}
section.coat_menu p.price_sale span.num {
	font-size: 50px;
	font-weight: 700;
}
/*「円〜」と「（税込）」はひと塊の縦組み（通常価格・割引後価格で共用）*/
section.coat_menu span.unit {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
	text-align: left;
	padding-bottom: 5px;
}
section.coat_menu p.price_sale span.unit {
	font-size: 14px;
	font-weight: 700;
}
section.coat_menu p.price_sale span.unit small {
	font-size: 11px;
}
/*差額チップ（黄マーカーでお得感）*/
section.coat_menu p.price_gap {
	margin: 8px 0 0;
}
section.coat_menu p.price_gap span {
	display: inline-block;
	padding: 2px 10px;
	background: #FFEE00;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #DE0010;
}
/*メニュー詳細を見る（赤ピル。挙動は a.btn と同じ＝hoverでopacity・XD注釈 2026-09-14）*/
section.coat_menu a.btn-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 238px;
	max-width: 100%;
	height: 38px;
	margin: 20px auto 0;
	background: #DE0010;
	border-radius: 19px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
section.coat_menu a.btn-3:hover {
	opacity: 0.8;
}
/* G'ZOXリアルガラスコーティングバナー */
section.coat_menu a.gzox_bnr {
	display: block;
	width: 1000px;
	margin: 20px auto 0;
}
section.coat_menu a.gzox_bnr img {
    width: 100%;
    height: auto;
}


/* flow *******************/
/*予約方法ステップ*/
section.flow {
	padding: 56px 0;
	background: #fff;
}
section.flow ul {
	display: flex;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
section.flow ul:first-of-type li {
	flex: 1;
	padding: 18px 16px;
	background: #F4F8FF;
	border-radius: 16px;
	text-align: center;
}
section.flow ul:first-of-type p.num {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 900;
	color: #0B63CE;
}
section.flow ul:first-of-type h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #0B1B3A;
}
section.flow ul:first-of-type li p {
	margin: 0;
	font-size: 13px;
	color: #476087;
}
/*注意事項（常時表示の小さな箇条書き）*/
section.flow ul.notes {
	display: block;
	margin: 0;
}
section.flow ul.notes li {
	position: relative;
	padding-left: 1.2em;
	font-size: 14px;
	line-height: 1.8;
	color: #476087;
}
section.flow ul.notes li::before {
	content: "・";
	position: absolute;
	left: 0;
}




/* works（施工事例） *******************/
/*施工事例（/works/ の最新4件・カード意匠は /works/ と同じ・2列）*/
section.works {
	padding: 0 0 56px;
	background: #fff;
}
section.works > h2.mds {
	margin-bottom: 40px;
}
/*カード2列（アーティクル：divが挟まる）*/
section.works > div > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px 24px;
	width: 800px;
	max-width: 100%;
	margin: 0 auto;
}
section.works > div > ul > li {
	width: 388px;
}
section.works li > a {
	display: block;
	background: #EFF6FF;
	border-radius: 10px;
	box-shadow: 3px 3px 6px rgb(0 0 0 / .16);
	overflow: hidden;
	color: #162F45;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
section.works li > a:hover {
	opacity: 0.8;
}
/*写真（4:3で切り抜き）*/
section.works li div.photo {
	aspect-ratio: 4 / 3;
}
section.works li div.photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*車名・コーティング名*/
section.works li div.txt {
	padding: 20px;
}
section.works li div.txt p {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
}
/*すべての施工事例を見る（紺ボタン。hoverは a.btn と同じ）*/
section.works > a.btn-2 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 440px;
	max-width: 100%;
	height: 72px;
	margin: 40px auto 0;
	background: #183482;
	border-radius: 36px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	filter: drop-shadow(0px 4px 0px #253257);
	transition: filter 0.3s ease, opacity 0.3s ease;
}
section.works > a.btn-2:hover {
	filter: none;
	opacity: 0.8;
}




/* shop（店舗情報・パートナー店舗） *******************/
/*AWAIRO トップ（newcss/top.css）の店舗情報を流用。色を #5094d6→#183482、#2258c3→#183482 に（XD注釈：カラーコードのみ変更）*/
section.shop {
	padding: 0 0 56px;
	background: #fff;
}
section.shop > h2.mds {
	margin-bottom: 40px;
}
/*店舗カード（カード内の文字は字間なし＝設計値）*/
section.shop > div.info {
	width: 680px;
	margin: 0 auto;
}
section.shop div.info > h3 {
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #183482;
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	line-height: 29px;
}
/*中身（PCは写真と地図を横並び）*/
section.shop div.info > div {
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #183482;
}
/*Googleマップ*/
section.shop div.info div.gmap {
	width: 288px;
	height: 177px;
}
section.shop div.info div.gmap iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
section.shop div.info div.photo {
	width: 288px;
	margin-bottom: 16px;
}
section.shop div.info div.photo img {
	display: block;
	width: 100%;
}
section.shop div.info p {
	width: 100%;
	margin-top: 4px;
	font-size: 16px;
	color: #3e3e3e;
	line-height: 24px;
}
/*営業時間*/
section.shop div.info p b {
    display: block;
    font-weight: 600;
    margin: 5px 0;
}
/* AWAIRO問い合わせエリア */
section.shop div.info .tel_area {
	width: 100%;
	margin: 30px auto 0;
}

section.shop div.info dl {
	width: 100%;
	margin-top: 15px;
	display: flex;
	align-items: center;
}
section.shop div.info dl > dd:nth-of-type(1) {
	margin-right: 10px;
}
/*営・休のバッジ（画像。文字は読み上げ用に残して透明に）*/
section.shop dl > dt {
	width: 22px;
	height: 22px;
	margin-right: 5px;
	flex-shrink: 0;
	background-image: url(../images/new_coating/shape_ei.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	font-size: 16px;
	color: transparent;
	line-height: 22px;
	text-align: center;
	overflow: hidden;
}
section.shop dl > dt:nth-of-type(2) {
	background-image: url(../images/new_coating/shape_kyu.png);
}
section.shop dl > dd {
	font-size: 16px;
	color: #3e3e3e;
	line-height: 24px;
}
/*ピル型ボタン（お問い合わせはこちら・TEL）：hoverで明るく（AWAIRO と同じ）*/
section.shop a.btn-4,
section.shop a.tel {
	width: 288px;
	height: 48px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #183482;
	border-radius: 24px;
	box-shadow: 0px 3px 6px rgb(0 0 0 / .16);
	text-decoration: none;
    pointer-events: auto;
}
section.shop a.btn-4:hover,
section.shop a.tel:hover {
	filter: brightness(1.15);
	box-shadow: 0px 0px 0px rgb(0 0 0 / .16);
}
section.shop a.btn-4 {
	border-color: #acc0c4;
	font-size: 18px;
	font-weight: 500;
	color: #4a4a4a;
	line-height: 26px;
	position: relative;
}
section.shop a.btn-4::after {
	content: '';
	width: 11px;
	height: 14px;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background-image: url(../images/new_coating/sankaku_right.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
section.shop a.tel {
	font-size: 20px;
	font-weight: 900;
	color: #183482;
	line-height: 29px;
}
section.shop a.tel::before {
	content: '';
	width: 24px;
	height: 24px;
	margin-right: 8px;
	background-image: url(../images/new_coating/tel_icon.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
/*お問い合わせはこちら*/
section.shop div.info a.btn-4 {
	margin-top: 30px;
}
section.shop > ul.notes {
	width: 680px;
	margin: 10px auto 0;
}
section.shop > ul.notes > li {
	padding-left: 12px;
	font-size: 12px;
	line-height: 20px;
	color: #4a4a4a;
	text-indent: -12px;
}
section.shop > ul.notes > li::before {
	content: '※';
}
/*パートナー店舗*/
section.shop > h3 {
	margin-top: 13px;
	font-size: 28px;
	font-weight: 500;
	color: #183482;
	line-height: 40px;
	letter-spacing: 0.05em;
	text-align: center;
}
section.shop > h3::after {
	content: '';
	width: 80px;
	height: 2px;
	margin: 20px auto 0;
	display: block;
	background: #183482;
	border-radius: 1px;
}
/*3店舗（アーティクル：divが挟まる）*/
section.shop > div > ul {
	width: 1060px;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between;
}
section.shop > div > ul > li {
	width: 320px;
	background: #fff;
	border: 1px solid #183482;
}
/*店名の帯（枠線の色と同じ帯なので、枠線の内側に置いてよい）*/
section.shop li > h4 {
	height: 45px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	background: #183482;
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	line-height: 29px;
}
section.shop li > div {
	padding: 14px 16px 20px;
}
section.shop li div.photo img {
	display: block;
	width: 100%;
}
section.shop li > div > p {
	margin-top: 6px;
	font-size: 16px;
	color: #3e3e3e;
	line-height: 24px;
}
/*Google口コミ評価*/
section.shop li > div > p.review {
	margin-top: 4px;
	color: #fc6361;
}
/*Googleマップを開く*/
section.shop li a.map {
	width: fit-content;
	margin-top: 4px;
	display: block;
	font-size: 16px;
	color: #1a4fb3;
	line-height: 24px;
	text-decoration: underline;
}
section.shop li a.map:hover {
	opacity: 0.8;
}
section.shop li dl {
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
section.shop li dl > dd {
	width: calc(100% - 27px);
}
section.shop li dl > dt:nth-of-type(2),
section.shop li dl > dd:nth-of-type(2) {
	margin-top: 4px;
}
/*TEL*/
section.shop li a.tel {
	margin-top: 20px;
}




/* faq（よくある質問） *******************/
/*/guide/ の「よくあるご質問」を流用。意匠は /guide/（rem）を px 化し、文字サイズは周りに合わせて一段小さく（殿指示 2026-09-14）*/
section.faq {
	padding: 0 0 56px;
	background: #fff;
}
section.faq > h2.mds {
	margin-bottom: 40px;
}
section.faq > ul {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
}
section.faq > ul > li {
	margin-bottom: 40px;
}
section.faq > ul > li:last-of-type {
	margin-bottom: 0;
}
/*質問（開閉ボタン）*/
section.faq li > div.q {
	padding: 21px 40px 14px 67px;
	background: #EFF6FF;
	border-radius: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #1E40AF;
	position: relative;
	cursor: pointer;
}
section.faq li > div.q::before {
	content: 'Q';
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 19px;
	left: 22px;
	padding-bottom: 2px;/*Oswald は字が下に沈むので少し上げる*/
	background: #1E40AF;
	font-family: "Oswald", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-align: center;
}
/*矢印（qa_arrow.png は上向き。閉じているときは反転して下向き）*/
section.faq li > div.q::after {
	content: '';
	width: 16px;
	height: 10px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(180deg);
	-webkit-transform: translateY(-50%) rotate(180deg);
	-ms-transform: translateY(-50%) rotate(180deg);
	background-image: url(../images/new_coating/qa_arrow.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}
/*開いているとき*/
section.faq li > div.q.is-open {
	border-radius: 10px 10px 0 0;
}
section.faq li > div.q.is-open::after {
	transform: translateY(-50%) rotate(0);
	-webkit-transform: translateY(-50%) rotate(0);
	-ms-transform: translateY(-50%) rotate(0);
}
/*回答*/
section.faq li > div.a {
	display: none;
	margin-top: 3px;
	padding: 21px 40px 21px 67px;
	background: #EFF6FF;
	border-radius: 0 0 10px 10px;
	position: relative;
}
section.faq li > div.a::before {
	content: 'A';
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 19px;
	left: 22px;
	padding-bottom: 2px;/*Oswald は字が下に沈むので少し上げる*/
	background: #162F45;
	font-family: "Oswald", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-align: center;
}
section.faq li > div.a > h3 {
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #162F45;
}
section.faq li > div.a > p {
	font-size: 16px;
	line-height: 2;
	color: #162F45;
}




/* sp_cv *******************/
/*SP追従の来店予約ボタンは下層でも使うため coating_common.css へ移設（2026-09-15）*/

/*PC/SP出し分け（768px切替の亜種。店舗情報の住所の改行に使用。AWAIRO と同じ）*/
.ipc2 {
	display: inline;
}
.bsp2 {
	display: none;
}

/*PC/SP出し分け（1079px用）*/
.bpc {
	display: block;
}
.bsp {
	display: none !important;
}

@media screen and (max-width: 1079px) {
*{}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*PC/SP出し分け（1079px用）*/
.bpc {
	display: none !important;
}
.bsp {
	display: block !important;
}



/* 共通 *******************/
h2.mds {
	font-size: 22px;
}
/*追従ナビからのページ内遷移時に固定ヘッダーへ潜り込まないための余白（SPは2段バーぶん多めに）*/
section.campaign,
section.coat_menu,
section.flow,
section.works,
section.shop {
	scroll-margin-top: 110px;
}




/* シェル調整 *******************/
/*追従の来店予約ボタンぶんのフッター下余白は coating_common.css 側（2026-09-15 移設）*/
/*旧フッターのSP追従バー（温存のみ。フッターは新HTMLに置き換え済み）
#footer div.pagetop {
	display: none;
}
*/




/* top_visual *******************/
/*SPも固定ヘッダーぶんの余白を取る*/
section.top_visual {
	padding: 106px 0 20px;
}
section.top_visual div.hero img:first-of-type {
	display: none;
}
section.top_visual div.hero img:last-of-type {
	display: block;
}
section.top_visual div.badges {
	display: none;
}




/* campaign *******************/
section.campaign {
	padding: 40px 0;
}
section.campaign div.card {
	flex-direction: column;
	padding: 24px;
}
section.campaign div.card img {
	width: min(50vw, 200px);
}




/* coat_menu *******************/
/*SPはflexの2列（2枚・2枚・2枚・最後の1枚のみ中央）*/
section.coat_menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
section.coat_menu li {
	width: calc((100% - 10px) / 2);
	padding: 12px;
}
section.coat_menu li:last-child {
	margin: 0 auto;
}
section.coat_menu li h3 {
	font-size: 14px;
}
section.coat_menu ul.feature li {
	font-size: 12px;
}
/*320px幅でもバッジがカードからはみ出さないよう縮める*/
section.coat_menu span.off_badge {
	padding: 3px 8px;
	font-size: 10px;
}
/*SPは数字を一段縮小（2列カードに収める）*/
section.coat_menu p.price_regular s span.num {
	font-size: min(6.5vw,30px);
}
section.coat_menu p.price_regular span.unit {
	font-size: 10px;
}
section.coat_menu p.price_regular span.unit small {
	font-size: 9px;
}
section.coat_menu p.price_sale span.num {
	font-size: min(8vw,50px);
}
section.coat_menu p.price_sale span.unit {
	font-size: 11px;
}
section.coat_menu p.price_sale span.unit small {
	font-size: 9px;
}
/*差額チップは割らずに縮小（320px幅対策）*/
section.coat_menu p.price_gap span {
	padding: 2px 6px;
	font-size: 12px;
	white-space: nowrap;
}
/*メニュー詳細を見る*/
section.coat_menu a.btn-3 {
	width: 92%;
	height: 28px;
	margin-top: 12px;
	font-size: 12px;
}
/* G'ZOXリアルガラスコーティングバナー */
section.coat_menu a.gzox_bnr {
	display: block;
	width: 100%;
	max-width: 460px;
	margin: 20px auto 0;
}



/* flow *******************/
section.flow ul:first-of-type {
	flex-direction: column;
	gap: 16px;
}




/* works（施工事例） *******************/
section.works > h2.mds {
	margin-bottom: 24px;
}
section.works > div > ul {
	width: 95%;
	max-width: 600px;
	gap: 30px 0;
}
section.works > div > ul > li {
	width: 49%;
}
section.works li > a {
	border-radius: 8px;
}
section.works li div.txt {
	padding: 10px;
}
section.works li div.txt p {
	font-size: 15px;
}
section.works li div.txt p:nth-of-type(2) {
	font-size: 14px;
}
section.works > a.btn-2 {
	width: 82%;
	max-width: 440px;
	height: 64px;
	margin-top: 24px;
	border-radius: 32px;
	font-size: 18px;
}




/* shop（店舗情報・パートナー店舗） *******************/
section.shop > h2.mds {
	margin-bottom: 24px;
}
section.shop > h3 {
	margin-top: 40px;
	font-size: 18px;
	line-height: 26px;
}
section.shop > h3::after {
	width: 50px;
	height: 1px;
	border-radius: 0.5px;
}
/* AWAIRO問い合わせエリア */
section.shop div.info .tel_area {
	margin: 20px auto 0;
}
section.shop div.info p {
	width: auto;
	margin: 4px 16px 0;
}

/*タブレット（769〜1079px）はPC寄せ。3店舗は入りきらなければ折り返して中央に（AWAIRO と同じ）*/
section.shop > div > ul {
	width: 96%;
	max-width: 1060px;
	flex-wrap: wrap;
	justify-content: center;
}
section.shop > div > ul > li {
	margin: 0 10px 30px;
}




/* faq（よくある質問） *******************/
section.faq > h2.mds {
	margin-bottom: 24px;
}
section.faq > ul {
	width: 95%;
	max-width: 600px;
}
section.faq > ul > li {
	margin-bottom: 20px;
}
section.faq li > div.q {
	padding: 14px 40px 14px 52px;
	font-size: 15px;
	line-height: 1.5;
}
section.faq li > div.q::before {
	top: 13px;
	left: 10px;
}
section.faq li > div.q::after {
	right: 14px;
}
section.faq li > div.a {
	padding: 14px 20px 14px 52px;
}
section.faq li > div.a::before {
	top: 13px;
	left: 10px;
}
section.faq li > div.a > h3 {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.5;
}
section.faq li > div.a > p {
	font-size: 14px;
	line-height: 1.8;
}




/* sp_cv *******************/
/*SP追従の来店予約ボタンは coating_common.css へ移設（2026-09-15）*/




}


/*■■■■■■■■■■■■■■ 768px以下（第二のブレイクポイント） ■■■■■■■■■■■■■■■■■■■*/
/*店舗情報エリアは 1079px 切替ではタブレットで大きすぎる／小さすぎるため、AWAIRO トップと同じ 768px で切り替える（殿指示 2026-09-07・XD注釈「AWAIRO と同様」）*/
@media screen and (max-width: 768px) {
*{}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* 共通 *******************/
.ipc2 {
	display: none;
}
.bsp2 {
	display: block;
}

/* shop（店舗情報・パートナー店舗） *******************/
section.shop > div.info {
	width: 86%;
	max-width: 600px;
}
section.shop div.info > h3 {
	padding-left: 15px;
	justify-content: flex-start;
}
/*中身：地図は枠いっぱい、その下は左右16pxの内側に*/
section.shop div.info > div {
	padding: 0 0 20px;
	display: block;
}
section.shop div.info div.gmap {
	width: 100%;
	height: auto;
	aspect-ratio: 320 / 200;
}
/*写真は1倍素材のため実寸（288px）まで。中央に置く*/
section.shop div.info div.photo {
	width: auto;
	max-width: 288px;
	margin: 14px auto 6px;
}
section.shop div.info p {
	width: auto;
	margin: 4px 16px 0;
}
section.shop div.info dl {
	width: auto;
	margin: 15px 16px 0;
	flex-wrap: wrap;
}
section.shop div.info dl > dd {
	width: calc(100% - 27px);
}
section.shop div.info dl > dd:nth-of-type(1) {
	margin-right: 0;
}
section.shop div.info dl > dt:nth-of-type(2),
section.shop div.info dl > dd:nth-of-type(2) {
	margin-top: 4px;
}
section.shop a.btn-4,
section.shop a.tel {
	width: 100%;
	max-width: 288px;
}
section.shop div.info a.btn-4 {
	width: calc(100% - 32px);
	margin-top: 20px;
}
section.shop > ul.notes {
	width: 86%;
	max-width: 600px;
}
/*3店舗は縦積み*/
section.shop > div > ul {
	width: 86%;
	max-width: 600px;
	margin-top: 20px;
	display: block;
}
section.shop > div > ul > li {
	width: 100%;
	margin: 0 0 30px;
}
section.shop > div > ul > li:last-of-type {
	margin-bottom: 0;
}
section.shop li div.photo {
	max-width: 288px;
	margin: 0 auto;
}

/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
}