@charset "UTF-8";
/* CSS Document */

/******************************************************

PC設定 1200px以上の場合に適用

*******************************************************/

/* カラートークン */
:root{
	--color-primary:#349ea7;
	--color-primary-dark:#267880;
	--color-primary-deep:#16444a;
	--color-primary-pale:#edf6f7;
	--color-cta:#f0b429;
	--color-cta-dark:#d99e13;
	--color-navy:#26384a;
	--color-sand:#f6efe2;
	--color-line:#06c755;
	--color-line-dark:#05a849;
	--color-text:#22333a;
	--color-text-sub:#5c6d73;
	--color-border:#d9e4e5;
	--color-bg:#ffffff;
	--color-bg-alt:#f5f9f9;
	--color-white:#ffffff;
}

/* 全体設定 */
html{
	scroll-behavior:smooth;
	scroll-padding-top:80px;
}

body{
	font-family:'Noto Sans JP',sans-serif;
	color:var(--color-text);
	background:var(--color-bg);
	font-size:16px;
	line-height:1.9;
	-webkit-font-smoothing:antialiased;
}

a{
	color:var(--color-primary-dark);
	transition:color .2s,background .2s,opacity .2s;
}

a:hover{
	color:var(--color-primary);
}

p{
	line-height:1.9;
}

img{
	max-width:100%;
	display:block;
}


/* PC/SP 出し分け */
.pc{ display:block; }
.sp{ display:none; }


/* セクションの上下パディング（全コンテンツセクション共通） */
.container{
	padding:120px 0;
}

.container--alt{
	background:var(--color-bg-alt);
}


/* コンテンツ幅 */
.wrapper{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 20px;
}

.wrapper_small{
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding:0 20px;
}


/* 共通見出し */
.sec-head{
	text-align:center;
	margin-bottom:44px;
}

.sec-head__en{
	display:block;
	color:var(--color-primary);
	font-family:'Noto Sans JP',sans-serif;
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	margin-bottom:8px;
}

.h2{
	font-family:'Hiragino Mincho ProN','Noto Serif JP',serif;
	font-size:28px;
	font-weight:600;
	line-height:1.5;
}

.h2__bar{
	display:block;
	width:48px;
	height:3px;
	background:var(--color-primary);
	margin:18px auto 0;
}

.sec-head__lead{
	margin-top:16px;
	color:var(--color-text-sub);
	font-size:15px;
}


/* 共通ボタン */
.btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font-weight:700;
	text-align:center;
	border-radius:4px;
	padding:17px 32px;
	font-size:16px;
	border:none;
	cursor:pointer;
	line-height:1.5;
	transition:background .2s,color .2s,opacity .2s;
}

.btn__icon{
	flex-shrink:0;
	width:20px;
	height:20px;
}

.btn--primary{
	background:var(--color-primary);
	color:var(--color-white);
}

.btn--primary:hover{
	background:var(--color-primary-dark);
	color:var(--color-white);
}

.btn--line{
	background:var(--color-line);
	color:var(--color-white);
}

.btn--line:hover{
	background:var(--color-line-dark);
	color:var(--color-white);
}

.btn--outline{
	background:var(--color-white);
	color:var(--color-primary-dark);
	border:2px solid var(--color-primary);
}

.btn--outline:hover{
	background:var(--color-primary-pale);
	color:var(--color-primary-dark);
}

.btn:focus-visible{
	outline:2px solid var(--color-primary);
	outline-offset:2px;
}


/* header */
.header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	background:var(--color-white);
	border-bottom:1px solid var(--color-border);
	z-index:100;
}

.header__in{
	display:flex;
	align-items:center;
	gap:16px;
	height:72px;
	padding:0 1.5%;
}

.header__logo-img{
	height:50px;
	width:auto;
}

.header__right{
	display:flex;
	align-items:center;
	gap:16px;
}

.header__tel{
	text-align:right;
}

.header__tel-num{
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	gap:6px;
	font-size:20px;
	font-weight:700;
	color:var(--color-text);
	line-height:1.3;
	white-space:nowrap;
}

.header__tel-num svg{
	color:var(--color-primary);
	flex:none;
}

.header__tel-hours{
	font-size:11px;
	color:var(--color-text-sub);
	line-height:1.4;
}

.header__cta{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--color-primary);
	color:var(--color-white);
	font-weight:700;
	font-size:14px;
	padding:13px 24px;
	border-radius:4px;
	white-space:nowrap;
}

.header__cta:hover{
	background:var(--color-primary-dark);
	color:var(--color-white);
}


/* global-nav（右寄せ：TEL・受付時間のすぐ左に配置） */
.global-nav{
	margin-left:auto;
}

.global-nav__box{
	display:flex;
	gap:28px;
}

.global-nav__link{
	font-size:14px;
	font-weight:500;
	color:var(--color-text);
	padding:8px 0;
	border-bottom:2px solid transparent;
	white-space:nowrap;
}

.global-nav__link:hover{
	color:var(--color-primary-dark);
	border-bottom-color:var(--color-primary);
}


/* cta（無料査定バンド・共通） */
.cta{
	background:#2c4258;
	padding:56px 20px;
	text-align:center;
}

.cta__inner{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:32px;
	max-width:1120px;
	margin:0 auto;
}

.cta__staff-wrap{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	flex:none;
}

.cta__staff{
	width:140px;
	height:140px;
	border-radius:50%;
	background:var(--color-white);
	object-fit:cover;
	object-position:center top;
}

.cta__staff-note{
	font-size:11px;
	color:rgba(255,255,255,.7);
}

.cta__msg{
	color:var(--color-white);
	font-weight:700;
	font-size:20px;
	margin-bottom:24px;
	line-height:1.7;
}

.cta__btns{
	display:flex;
	flex-direction:row;
	justify-content:center;
	gap:12px;
}

.cta__btns .btn{
	min-width:280px;
}


/* footer */
.footer{
	position:relative;
	background:var(--color-navy);
	color:var(--color-white);
	padding:90px 0;
	overflow:hidden;
}

.footer__bg{
	position:absolute;
	inset:0;
	background:url("/img/common/bg_footer.jpg") center 35% / cover no-repeat;
}

.footer__overlay{
	position:absolute;
	inset:0;
	background:rgba(10,18,26,.65);
	pointer-events:none;
}

.footer__in{
	position:relative;
	padding:0 1.5%;         /* ヘッダー(.header__in)と左右位置を合わせる */
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:20px;
	text-align:left;
}

.footer__brand{
	font-weight:600;
	font-size:15px;
}

.footer__logo{
	height:40px;
	width:auto;
}

.footer__nav{
	display:flex;
	flex-direction:row;
	gap:24px;
}

.footer__nav-link{
	color:var(--color-white);
	font-size:13px;
}

.footer__nav-link:hover{
	color:var(--color-cta);
}

.footer__copy{
	font-size:12px;
	color:rgba(255,255,255,.6);
	width:100%;
	margin-top:8px;
	text-align:left;
}




/******************************************************

タブレットの設定 960px~1199pxの場合に適用

*******************************************************/
@media screen and (max-width: 1199px){

	.cta__inner{ max-width:900px; }

	/* header：グロナビ右寄せで右側が窮屈になるため詰める */
	.header__in{ gap:12px; }

	.header__logo-img{ height:42px; }

	.global-nav__box{ gap:18px; }

	.global-nav__link{ font-size:13px; }

	.header__tel-num{ font-size:18px; }

	.header__tel-hours{ font-size:10px; white-space:nowrap; }

	.header__cta{ font-size:13px; padding:11px 14px; }

}




/******************************************************

タブレットの設定 768px~959pxの場合に適用

*******************************************************/
@media screen and (max-width: 959px){

	html{ scroll-padding-top:64px; }

	.container{ padding:90px 0; }

	.h2{ font-size:25px; }

	.sec-head{ margin-bottom:36px; }

	/* header：global-navをドロワーへ切り替え */
	.header__in{
		height:64px;
		padding:0 68px 0 16px; /* 右は固定ハンバーガーの逃げ */
	}

	.header__logo-img{ height:44px; }

	.global-nav{ display:none; }

	.header__cta{
		font-size:13px;
		padding:11px 14px;
	}

	/* cta */
	.cta__inner{
		flex-direction:column;
		gap:16px;
		max-width:520px;
	}

	.cta__msg{ font-size:19px; }

	/* footer */
	.footer__in{
		flex-direction:column;
		align-items:center;
		text-align:center;
	}

	.footer__copy{ text-align:center; }

}




/******************************************************

SPの設定 767px以下の場合に適用

*******************************************************/
@media screen and (max-width: 767px){

	.pc{ display:none; }
	.sp{ display:block; }

	/* PCで16pxのテキストはSPで14pxにする（基本ルール／フォーム入力欄は除く） */
	body{ font-size:14px; }
	.btn{ font-size:14px; }

	.container{ padding:60px 0; }

	.h2{ font-size:22px; }

	.sec-head{ margin-bottom:28px; }

	.sec-head__lead{ font-size:14px; }

	/* header：SPはロゴが大きいためCTAは畳み、ハンバーガー＋FV/ドロワーのCTAへ集約 */
	.header__logo-img{ height:38px; }

	.header__tel{ display:none; }

	.header__cta{ display:none; }

	/* cta */
	.cta{ padding:44px 20px; }

	.cta__staff{
		width:120px;
		height:120px;
	}

	.cta__msg{ font-size:18px; }

	.cta__btns{
		flex-direction:column;
		max-width:420px;
		margin:0 auto;
	}

	.cta__btns .btn{ min-width:0; }

	/* footer */
	.footer{ padding:70px 0; }

	.footer__logo{ height:34px; }

	/* SPはフッターメニュー非表示（個人情報保護方針はドロワーへ集約） */
	.footer__nav{ display:none; }

}