@charset "UTF-8";
/* ============================================
   コーティングサイト共通（coating_common）
   家風: coding-rules/style_guide.md 準拠
   ・色は直値／クラスは最小限（要素セレクタで辿る）
   ・立体影は filter:drop-shadow／CTAはhoverでfilter解除
   ・SPはファイル末尾に max-width:1079px で一括
   ・トップ（coating.html）と下層で共用する部品だけを置く：
     nav.lp_nav（ヘッダー）／section.cv（CV帯）／a.btn（CTAボタン）／footer
   ・body・p・a などの下地は書かない（下層の旧本文に効くため）
============================================ */

/* lp_nav *******************/
/*ヘッダー（全幅固定バー。ロゴ左・ページ内リンク右。nagaoka_lp から移設）*/
nav.lp_nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	background: #fff;
	box-shadow: 0px 2px 8px rgb(11 27 58 / .08);
}
nav.lp_nav div.inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
	padding: 0 24px;
}
nav.lp_nav a.logo img {
	display: block;
	width: 180px;
	height: auto;
}
nav.lp_nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
nav.lp_nav ul a {
	font-size: 14px;
	font-weight: 700;
	color: #0B1B3A;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
nav.lp_nav ul a:hover {
	opacity: 0.8;
}




/* cv *******************/
/*紺帯の強化CVエリア（nagaoka_lp から移設。店舗名の行は 2026-09-14 XD で撤去）*/
section.cv {
	padding: 64px 0;
	background: #183482;
	text-align: center;
}
section.cv div.wrapper {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}
section.cv h2.mds {
	margin: 0 0 16px;
	font-size: min(6vw, 32px);
	font-weight: 900;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}
section.cv h2.mds span.off {
	color: #FFEE00;
}
section.cv p {
	max-width: 640px;
	margin: 0 auto 32px;
	font-size: 15px;
	line-height: 1.8;
	color: #fff;
}
/*店舗名の行（旧 nagaoka_lp。復活時はここを戻す）
section.cv p.shop {
	max-width: none;
	margin: 16px 0 0;
	font-size: 13px;
	color: #fff;
}
*/




/* ボタン共通 *******************/
/*CTAボタン（campaign・cv共通。hoverはfilter解除＋opacityのみ。沈み込み・アニメは付けない）*/
a.btn {
	display: block;
	width: 320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #F97316;
	border: none;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	line-height: 60px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	filter: drop-shadow(0px 4px 0px #C2410C);
	transition: filter 0.3s ease, opacity 0.3s ease;
}
a.btn:hover {
	filter: none;
	opacity: 0.8;
}
/*cvセクションはより大きいサイズで表示*/
section.cv a.btn {
	width: 440px;
	font-size: 22px;
	line-height: 72px;
}




/* footer *******************/
/*フッター（旧 #footer をクラス無しで組み直し。サイトマップ一覧は撤去し「洗車はこちらから」バナーを追加・2026-09-14 XD）*/
footer {
	padding-top: 60px;
	text-align: center;
}
/*ロゴ*/
footer p.logo {
	width: 221px;
	margin: 0 auto 29px;
}
footer p.logo a {
	display: block;
}
footer p.logo img {
	display: block;
	width: 100%;
}
/*キャッチ（新潟市・三条市・長岡市で…）*/
footer > p.catch {
	margin: 0 0 45px;
	font-size: 16px;
	line-height: 1.5;
	color: #162F45;
}
footer > p.catch br {
	display: none;
}
/*洗車はこちらから＋AWAIROバナー*/
footer div.sensha p {
	font-size: 28px;
	font-weight: 500;
	line-height: 40px;
	letter-spacing: 0.05em;
	color: #183482;
}
footer div.sensha a {
	display: block;
	width: 600px;
	max-width: 100%;
	margin: 10px auto 0;
	box-shadow: 0px 3px 6px rgb(0 0 0 / .16);
	transition: box-shadow 0.3s ease, opacity 0.3s ease;
}
/*hoverで影が消えて若干白っぽく（XD注釈）*/
footer div.sensha a:hover {
	box-shadow: 0px 0px 0px rgb(0 0 0 / .16);
	opacity: 0.8;
}
footer div.sensha a img {
	display: block;
	width: 100%;
}
/*グループ各サイトへのリンク（旧 #footer .group は 160rem＝画面幅の83%。px 化に伴い %＋上限で同じ見え方に）*/
footer div.ft_menu {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 15px 48px;
	width: 84%;
	max-width: 1600px;
	margin: 40px auto 60px;
	padding-top: 40px;
	border-top: 1px dashed #1E40AF;
	text-align: left;
}
footer div.ft_menu a {
	font-size: 14px;
	line-height: 1.5;
	color: #162F45;
}
footer div.ft_menu a::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	background-image: url(../images/new_coating/ico_blank.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}
/*プライバシーマーク*/
footer div.privacy {
	width: 126px;
	margin: 0 auto 32px;
}
footer div.privacy a {
	display: block;
}
footer div.privacy img {
	display: block;
	width: 100%;
}
/*コピーライト帯*/
footer p.copy {
	padding: 12px 10px 13px;
	background: #1E40AF;
	font-size: 13px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}





/* sp_cv（SP追従の来店予約ボタン） *******************/
/*PCでは出さない。SPは末尾のSPブロックで表示（最初は隠し、目印を過ぎたら .is-active でふわっと表示：js/coating_floating_btn.js）*/
div.sp_cv {
	display: none;
}




/* 下層共通パーツ（rem のまま・旧 /css/common.css から移設 2026-09-15） *******************/
/*裁定②（2026-09-14）：ページタイトル帯 .inpage-header とパンくず .topicpath は旧定義を rem のまま移す（下層は base_style.css の rem 土台に乗っているため）*/
/*英数字用フォント*/
.eisu {
	font-family: Arial,sans-serif;
}
/*ページタイトル帯*/
.inpage-header {
	width: 100%;
	position: relative;
	z-index: 1;
}
.inpage-header.top {
	display: none;
}
.inpage-header .imgwrap {
	width: 156rem;
	height: 40rem;
	max-width: 100%;
	margin-left: auto;
	margin-right: 0;
}
.inpage-header .imgwrap .bg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}
.inpage-header .tit {
	position: absolute;
	color: #fff;
	left: 50%;
	top: 55%;
	transform: translateX(-50%);
	font-size: 4.6rem;
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 700;
	text-align: center;
	z-index: 1;
	line-height: 1.2;
}
.inpage-header .tit .en {
	font-family: "Oswald", serif;
	text-transform: uppercase;
	font-size: 16rem;
	color: rgba(255, 255, 255, 0.2);
	position: absolute;
	left: 50%;
	top: -0.8em;
	transform: translateX(-50%);
	display: block;
	white-space: nowrap;
	pointer-events: none;
}
/*固定ヘッダー（nav.lp_nav 64px）の下から帯を始める（追加 2026-09-15。旧ヘッダーは絶対配置で帯に重ねていた）*/
.inpage-header.inpage {
	margin-top: 64px;
}
/*パンくず*/
.topicpath {
	width: 120rem;
	max-width: 100%;
	margin: 2.8rem auto 10rem;
	display: flex;
	flex-wrap: wrap;
	line-height: 1.4;
}
.topicpath .items {
	display: block;
	color: #162F45;
	font-size: 1.5rem;
	font-weight: 400;
}
.topicpath .items::after {
	content: "/";
	margin: 0 0.5rem;
}
.topicpath .items:last-of-type::after {
	display: none;
}
.topicpath .items.now {
	pointer-events: none;
}




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




/* lp_nav *******************/
/*SPは2段バー（上段ロゴ・下段リンク等分）*/
nav.lp_nav div.inner {
	flex-wrap: wrap;
	height: auto;
	padding: 0;
}
nav.lp_nav a.logo {
	padding: 10px 14px;
}
nav.lp_nav a.logo img {
	width: 140px;
}
nav.lp_nav ul {
	width: 100%;
	gap: 0;
	border-top: 1px solid #D8E6FF;
}
nav.lp_nav ul li {
	flex: 1;
}
nav.lp_nav ul a {
	display: block;
	padding: 10px 0;
	font-size: 11px;
	text-align: center;
}
nav.lp_nav ul li + li a {
	border-left: 1px solid #D8E6FF;
}




/* cv *******************/
section.cv {
	padding: 40px 0;
}




/* ボタン共通 *******************/
a.btn {
	width: 92%;
	line-height: 64px;
}
section.cv a.btn {
	width: 92%;
	font-size: 18px;
	line-height: 64px;
}




/* footer *******************/
/*追従の来店予約ボタンにフッター最下部が隠れないよう逃げを取る*/
footer {
	padding-top: 52px;
	padding-bottom: 90px;
}
footer p.logo {
	margin-bottom: 40px;
}
footer > p.catch {
	padding: 0 10px;
	margin: 0 0 26px;
	font-size: 14px;
}
footer > p.catch br {
	display: inline;
}
footer div.sensha p {
	font-size: 18px;
	line-height: 26px;
}
footer div.sensha a {
	width: 80%;
	max-width: 600px;
	margin-top: 5px;
}
/*リンクは縦並び・中央*/
footer div.ft_menu {
	display: block;
	width: 100%;
	margin: 30px auto 38px;
	padding-top: 0;
	border-top: none;
	text-align: center;
}
footer div.ft_menu a {
	display: block;
	margin-bottom: 8px;
}
footer div.ft_menu a:last-of-type {
	margin-bottom: 0;
}
footer div.privacy {
	width: 87px;
	margin-bottom: 60px;
}




/* sp_cv（SP追従の来店予約ボタン） *******************/
/*画面下部に固定。最初は隠し、目印（.js-floating_trigger）を過ぎたら .is-active でふわっと表示*/
div.sp_cv {
	display: block;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10000;
	width: 100%;
	padding: 10px 12px 14px;
	background: rgb(255 255 255 / .92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
div.sp_cv.is-active {
	opacity: 1;
	visibility: visible;
}
div.sp_cv a {
	display: block;
	width: 100%;
	background: #F97316;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	line-height: 56px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	filter: drop-shadow(0px 3px 0px #C2410C);
}




}


/*■■■■■■■■■■■■■■ 767px以下（下層共通パーツ・旧 common.css と同じ切替） ■■■■■■■■■■■■■■■■■■■*/
/*.inpage-header と .topicpath は rem のまま移したため、SP の切替も旧 common.css と同じ 767px（＋横向き 896px）で行う（base_style.css の rem 土台と同じ境界）*/
@media screen and (max-width: 767px), (max-width: 896px) and (orientation: landscape) {
*{}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* 下層共通パーツ *******************/
.inpage-header {
	overflow: hidden;
}
.inpage-header.top {
	display: none;
}
.inpage-header .imgwrap {
	width: 100%;
	height: auto;
	aspect-ratio: 39/10;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6rem;
}
/*固定ヘッダー（SPの nav.lp_nav は2段で約89px）の下から帯を始める（追加 2026-09-15。旧は 6rem＝60px の白帯ぶん）*/
.inpage-header.inpage {
	margin-top: 0;
}
.inpage-header.inpage .imgwrap {
	margin-top: 90px;
}
.inpage-header .tit {
	font-size: 2rem;
	width: 100%;
	top: 60%;
}
.inpage-header .tit .en {
	font-size: 4.6rem;
	top: -0.4em;
}
.topicpath {
	width: 100%;
	margin: 2rem auto 5rem;
	padding: 0 1rem;
}
.topicpath .items {
	font-size: 1.4rem;
}

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