@charset "UTF-8";

/*全体共通*/
:root, html{ font-size: 10px; }
*, ::before, ::after{ box-sizing: border-box; }
html, body{ width: 100%; height: 100%; margin: 0; }
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat Subrayada';
  font-style: normal;
  font-weight: 700;
  src: url('../font/montserrat-subrayada-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
	--max-width: 900px;
  --c-base: #1E2C5C;
/*  --c-main: #2E3131;*/
  --c-key: #033490;
/*	--c-sub: #E50012;*/
  --c-accent: #D60F1F;
/*	--c-accent-dark: #D60F1F;*/
  --ff-main: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --ff-en: 'Montserrat Subrayada', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --ff-serif:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro', serif;
  position: relative;
  width: 100%;
  overflow-x: hidden;
	font-family: var(--ff-main);
	font-size: 1.6rem;
	font-weight: 500;
  -webkit-text-size-adjust: 100%;
  color: #131B38;
}
/* 一旦コメントアウト */
body.userAgent-pc{
	cursor: none;
}
/* IE表示用のCSS　*/
@media all and (-ms-high-contrast:none){
	body {font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;}
}
.cntBox p{
	letter-spacing: 0.02em;
	line-height: 2;
}
.cntBox h3{
	font-size: 3rem;
		line-height: 1.6;
}
@media screen and (max-width: 899px) {
	.cntBox h3{
		font-size: 2.4rem;
		line-height: 1.6;
	}
}
@media screen and (max-width: 480px) {
	.cntBox p{
		font-size: 1.4rem;
	}
	.cntBox h3{
		font-size: 1.8rem;
		line-height: 1.6;
	}
}
a{
	display: inline-block;
	cursor: pointer;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}
a:hover{
	cursor: pointer;
}
img, svg{
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}
label{
	cursor: pointer;
}
input, textarea{
	outline: none;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
}
::placeholder{
	color: #B8B8B8;
}

.ff-bold{ font-family: var(--ff-main); font-weight: 700; }
.ff-en{ font-family: var(--ff-en); font-weight: 700; }
.ff-en-treat{ font-family:var(--ff-en-treat); font-weight: 700; text-orientation: sideways;}
.ff-serif{ font-family: var(--ff-serif); font-weight: 600; }
.ff-serif-b{ font-family: var(--ff-serif); font-weight: 700; }
/* .ff-worksans{ font-family: WorkSans, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;; } */
.c-red{ color: #D60F1F !important; }
.c-white{ color: #fff !important; }
.c-yellow{ color: #ffff00 !important; }
.c-blue{ color: #033490 !important; }
.c-pink{ color: #ff7987 !important; }
.center{ text-align: center !important; }
.ta-l{ text-align: left !important; }
.ta-r{ text-align: right !important; }
.bold{ font-weight: bold !important; }
.thin{ font-weight: 100 !important; }
.nowrap{ white-space: nowrap; }
.c-b-glay{ background-color:#F5F5F5; }


.overflow-ellipsis{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-justify{
  text-justify: inter-ideograph;
  text-align: justify;
  text-align-last: left;
}

.under{ border-bottom: 1px solid #888; }
.img-cover{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-contain{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.d-ib{ display: inline-block!important; }
.d-f{ display: flex!important; }
.d-f-c{ display: flex!important; flex-flow: column;}
.d-g{ display: grid!important; }
.justify-center{ display: flex; justify-content: center; }
.hidden{ display: none!important; }

body.userAgent-pc a[href^="tel:"]{
	pointer-events: none;
}

.h-color a, a.h-color, .h-color-light a, a.h-color-light{
	transition: color .3s;
}
.h-opacity a, a.h-opacity{
	transition: opacity .3s;
}
.h-color a:hover, a.h-color:hover{
	color: var(--c-accent);
}
.h-color-light a:hover, a.h-color-light:hover{
	color: var(--c-accent-light);
}
.h-opacity a:hover, a.h-opacity:hover{
	opacity: .6;
}

/* ヘッダー */
header{
	background: #fff;
	padding-left: 2.5%;
  height: 110px;
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
  box-shadow: 0 3px 10px rgba(90,90,90,.1);
  padding: 10px 0;
}
header > div{
	width: 90%;
	margin: 0 auto;
}
header .header-menu > div{
	flex:1;
}
header .header-menu,header .header-menu h1{
	font-size: 1.4rem;
	color: var(--c-key);
	font-weight: bold;
	margin-bottom: 5px;
}
header .header-menu{
	justify-content: space-between;
	margin-bottom: 12px;
}
p.license{
	font-weight: bold;
	color: var(--c-key);
	font-size: 1.1rem;
	border: 1px solid var(--c-key);
	border-radius: 3px;
	display: inline-block;
	padding: 2px 8px;
	width: ;
}
header #headerLogo{
	text-align: center;
}
header .cta-btn-wrapper{
	text-align: right;
	gap: 10px;
	justify-content: end;
}
header .cta-btn.cta-tel span{
line-height: 0.8;
}
header .header-nav{
	justify-content: center;

}
header .header-nav ul{
	gap: 50px;
}

@media(hover: hover) {
	header .header-nav ul li a:hover{
		color: var(--c-key);
	}
}

@media screen and (max-width: 1099px) {
	header .header-nav ul{
		gap: 50px;
	}
	header .cta-btn.cta-tel a{
		width: 200px;
	}

}
@media screen and (max-width: 899px) {
	header{
		height: 80px;
	}
	header nav{
		width: 80%;
		background: #F2F3F5;
		height: 100vh;
		transform: translateX(200%);
		padding: 80px 5% 50px;
		position: absolute;
		top: 0;
		box-shadow: -2px 0 8px rgba(88,88,88,.2);
		transition: .3s;
	}
	header #nav_sp.active nav{
		transform: translateX(20%);
		transition: -webkit-transform .5s .2s;
		transition:transform .5s .2s;
		z-index: 2;
	}
	header .title{
/*		text-align: center;*/
	margin-bottom: 50px;
	}
	header .title h1{
		font-size: 2rem;
		font-weight: 700;
		color: var(--c-key);
		line-height: 1.6;
		margin-bottom: 10px;
	}
	header .title .license{
		font-size: 1.5rem;
	}
	header .sp-menu{
		gap: 5vh;
		font-weight: 700;
		font-size: 1.8rem;
	}
	header .cta-btn-wrapper{
		margin-top: 40px;
		gap: 20px;
		text-align: left;
	}
	header .cta-btn.cta-tel a,header .cta-btn.cta-contact a,header .cta-btn.cta-line a{
		width: 90%;
		max-width: 350px;
		height: 60px;
	}
	header .nav-overlay{
		opacity: 0;
		pointer-events: none;
	}
  header #nav_sp.active .nav-overlay{
  	width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    margin: auto;
    background: rgba(3, 52, 144, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all .3s;
    opacity: 1;
    z-index: 1;
	}
	#navBtn{
		width: 40px;
		height: 40px;
		position: absolute;
		right: 20px;
		top: 20px;
		border-radius: 3px;
		border: 1px solid var(--c-key);
		background: #fff;
		box-shadow: 0 2px 5px rgba(142,142,142,.2);
		z-index: 100;
	}
	#navBtn span{
		width: 80%;
		height: 2px;
		background: var(--c-key);
		transition: all .2s;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}
	#navBtn span:first-child{
		top: 10px;
	}	
	#navBtn span:nth-child(2){
		top: 18px;
	}
	#navBtn span:last-child{
		bottom: 10px;
	}
	#navBtn.open span{
		width: 90%;
		left: 5px;
	}
	#navBtn.open span:nth-child(2){
		opacity: 0;
		transform: translateX(100%);
	}
	#navBtn.open span:first-child{
		transform: rotate(30deg);
		transform-origin:left top;
	}
	#navBtn.open span:last-child{
		transform: rotate(-30deg);
		transform-origin:left bottom;
	}
}
@media screen and (max-width: 480px) {
	header{
		height: 55px;
	}
	header #headerLogo img{
		height: 40px;
	}
	header nav{
		padding: 60px 5% 50px;
	}
	header .title{
		margin-bottom: 30px;
	}
	header .title h1{
		font-size: 1.8rem;
	}
	header .title .license{
		font-size: 1.3rem;
	}
	header .sp-menu{
		gap: 4vh;
		font-size: 1.6rem;
	}

	#navBtn{
		top: 8px;
	}
}

/*フッター*/
footer{
	text-align: center;
	padding-top: 50px;
}
footer .footerTop{
	line-height: 1.6;
	letter-spacing: 0.02em;
}
footer .footerInfo{
  width: 410px;
  margin: 10px auto 30px;
}
footer .footerInfo .address{
	text-align: left;
	margin-bottom: 10px;
}
footer .footerInfo .address span{
	background: var(--c-base);
	border-radius: 3px;
	width: 80px;
	display: inline-block;
	color: #fff;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
}
footer .footerInfo .license{
	width: 210px;
	margin: 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
}
footer .footerBottom{
	align-items: center;
	margin: 30px;
}
footer .footerBottom .footer-nav{
	gap: 50px;
	margin-bottom: 20px;
}
footer .footerBottom .cta-btn-wrapper{
	gap: 30px;
}
footer .footerBottom .cta-btn-wrapper .cta-btn.cta-tel{
	margin-top: 8px;
}
footer .copylight{
	line-height: 50px;
	height: 50px;
	border-top: 2px solid #fff;
	color: #B3B8C1;
}


@media(hover: hover) {
	footer ul.footer-nav  li a:hover{
		color: var(--c-key);
	}
}


@media screen and (max-width: 899px) {
	header .cta-btn-wrapper.sp-f-cta{
    position: absolute;
    top: 80px;
    margin-top: 0;
    width: 100%;
    gap: 0;
    left: 0;
	}
	header .cta-btn-wrapper.sp-f-cta .cta-btn{
		flex: 1;
	}
	header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-tel a, header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-contact a,header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-line a{
		width: 100%;
		border-radius: 0;
		align-items: center;
		justify-content: center;
		display: flex;
		max-width: 100%;
	}
	header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-tel a img{
		max-width: 240px;
	}
	header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-tel a{
		background: linear-gradient(180deg, #033490 25%, #1e2c5c 75%);
		color: #fff;
	}
}
@media screen and (max-width: 480px) {
	header .cta-btn-wrapper.sp-f-cta{
		top: 55px;
	}
	header .cta-btn.cta-tel a img{
		max-width: 240px;
		}	
	header .cta-btn.cta-contact a{
		font-size: 1.6rem;
	}
	header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-tel a, header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-contact a,header .cta-btn-wrapper.sp-f-cta .cta-btn.cta-line a{
		height: 45px;
	}
	footer .footerInfo p{
		font-size: 1.4rem;
	}
	footer .footerInfo{
		width: 370px;
	}
	footer .footerInfo .address span{
		font-size: 1.1rem;
		margin-right: 3px;
		width: 70px;
	}
	footer .footerInfo .license{
		font-size: 1.2rem;
		width: 190px;
		padding: 0 8px;
	}
}


/*トップへ戻るボタン*/
#topReturn{
	position: fixed;
	right: 30px;
	bottom: 30px;	
	transition: .2s;
	opacity: 0;
	pointer-events: none;
	transition: all .2s;
	z-index: 102;
}
#topReturn.active{
	opacity: 1;
	pointer-events: auto;
}
#topReturn a{
	background: #fff;
	box-shadow: 0 3px 8px rgba(90,90,90,.3);
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
#topReturn a span{
	width: 15px;
	height: 15px;
	border-left: 2px solid var(--c-key);
	border-top: 2px solid var(--c-key);
	transform: rotate(45deg);
	margin-bottom: -5px;
}
@media(hover: hover) {
	#topReturn:hover{
		transform: translateY(-5px);
	}
}
@media screen and (max-width: 899px) {
	#topReturn a{
		width: 50px;
		height: 50px;
	}
	#topReturn a span{
		width: 15px;
		height: 15px;
	}
}
@media screen and (max-width: 480px) {
	#topReturn{
		right: 15px;
	}
	#topReturn a{
		width: 40px;
		height: 40px;
	}
	#topReturn a span{
		width: 10px;
		height: 10px;
	}
}

/*CTAボタン*/
.cta-btn.cta-tel a{
	width: 230px;
	height: 55px;
	color: var(--c-key);
	border: 1px solid var(--c-key);
	text-align: center;
	border-radius: 5px;
	background: #fff;
	padding-top: 3px;
}
.cta-btn.cta-tel span{
	display: block;
	font-size: 1.2rem;
	font-weight: 300;
}
.cta-btn.cta-tel{
	width: 100%;
	font-size: 30px;
}

.cta-btn.cta-contact a,.cta-btn.cta-line a{
	width: 165px;
	height: 55px;
	background: linear-gradient(to bottom, #e50012 0%,#d60f1f 100%); 
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.7rem;
	font-weight:700;
	padding-right: 10px;
	border-radius: 5px;
	box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.cta-btn.cta-line a{
	background: #02cc02;
	gap: 5px;
}

.cta-btn-wrapper.footer a{
	width: 326px;
	height: 80px;
	flex-flow: column;
	font-weight: 700;
	font-size: 2.2rem;
	align-items: center;
	padding-top: 5px;
	gap: 5px;
	justify-content: center;
	display: flex;
}
.cta-btn-wrapper.footer .cta-tel a{
	gap: 0;
	border: 2px solid var(--c-key);
}
.cta-btn-wrapper.footer .cta-line a{
	background: none;
	box-shadow: none;
}
.cta-btn-wrapper.footer a span{
/*	display: block;*/
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 0.1rem;
}

@media(hover: hover) {
	.cta-btn a:hover{
		transition: .2s opacity;
		opacity: .5;
	}
}

@media screen and (min-width: 600px) {
	.cta-btn.cta-tel a{
		pointer-events: none;
	}
}

/*CTAボックス*/
.cta-box h3{
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 30px;
}
.cta-box p{
	text-align: center;
	line-height: 1.8;
}
.cta-box .cnt{
	margin-top: 40px;
	justify-content: center;
	gap: 50px;
	padding: 40px 5% 50px;
	margin-bottom: 50px;
}
.cta-box .cnt > div{
	text-align: center;
}
.cta-box .cnt > div h4{
	font-size: 2.3rem;
	font-weight: 700;
	padding-bottom: 15px;
	position: relative;
	margin-bottom: 20px;
}
.cta-box .cnt > div.telBox h4{
	margin-bottom: 30px;
}
.cta-box .cnt > div h4::after{
	content:'';
	width: 55px;
	height: 2px;
	background: var(--c-base);
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 3px;
}
.cta-box .cta-btn a {
  width: 326px;
  height: 80px;
  flex-flow: column;
  font-weight: 700;
  font-size: 2.2rem;
  align-items: center;
  padding-top: 5px;
  gap: 5px;
  justify-content: center;
  display: flex;
}
.cta-box .cta-tel a{
	gap: 0;
 	border: 2px solid var(--c-key);
}
.cta-box .cta-btn.cta-contact a  span{
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
}
@media screen and (max-width: 899px) {
	.cta-box h3{
		font-size:2rem;	
		margin-bottom: 20px;
	}
	.cta-box p{
		font-size: 1.4rem;
	}
	.cta-box .cnt{
		flex-flow: column;
		padding: 30px 5%;
		gap: 30px;
		margin-bottom: 0;
	}
	.cta-box .cta-btn a{
		width: 100%;
	}
	.cta-box .cnt > div h4{
		font-size: 2rem;
		margin-bottom: 15px;
		padding-bottom:10px;
	}
}
@media screen and (max-width: 480px) {
	.cta-box .cta-btn a{
		font-size: 2rem;
	}
}



/* ボタンデザイン */
.cnt-btn{
	display: flex;
	justify-content: center;
}
.cnt-btn a{
	width: 300px;
	height: 60px;
	background: var(--c-key);
	border-radius: 5px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	position: relative;
}
.cnt-btn a::after{
	content: '';
	background: url(../img/arrow_w.png)center/100% no-repeat;
	position: absolute;
	width: 14px;
	height: 14px;
	right: 25px;
}
.cnt-btn.truck{
	width: 170px;
	height: 45px;
	background: var(--c-key);
	border-radius: 5px;
	color: #fff;
	display: flex;
	align-items: center;
	font-weight: 700;
	position: relative;
	font-size: 1.3rem;
	justify-content: start;
	padding-left: 15px;
}
.cnt-btn.truck::after{
	content: '';
	background: url(../img/arrow_w.png)center/100% no-repeat;
	position: absolute;
	width: 10px;
	height: 10px;
	right: 12px;
}
.cnt-btn.back-btn{
	margin-bottom: 50px;
}
.cnt-btn.back-btn a::after{
	right: auto;
	left:20px;
	transform: rotate(180deg);
}
.cnt-btn.cta-sub a{
	background: #fff;
	border: 2px solid var(--c-key);
	color: var(--c-key);
	width: 250px;
}
.cnt-btn.cta-sub a::after{
	content: '';
	background: url(../img/arrow_b.png)center/100% no-repeat;
}



@media(hover: hover) {
	.cnt-btn a:hover{
		transition: .2s opacity;
		opacity: .5;
		cursor: pointer;
	}
}
@media screen and (max-width: 899px) {
	.cnt-btn.back-btn{
		margin-bottom: 0;
	}
}
@media screen and (max-width: 480px) {
	.cnt-btn a{
		font-size: 1.5rem;
	}
}



/* 見出しデザイン */
.title-style h2{
	font-size: 3rem;
	font-weight: 700;
	color: var(--c-key);
	text-align: center;
	display: inline-block;
	position: relative;
	margin: 60px 0;
}
.title-style h2::before,.title-style h2::after{
	content: '';
	width: 70px;
	height: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.title-style h2::before{
	background: url(../img/title_deco_before.png) center / contain no-repeat;
	left: -78px;
}
.title-style h2::after{
	background: url(../img/title_deco_after.png) center / contain no-repeat;
	right: -78px;
}
.title-style02{
	background: var(--c-base);
	color: #fff;
	font-size: 3.3rem;
	display: inline-block;
	padding: 3px 10px 5px 10px;
	font-weight: 700;
}

.h-deco.ff-en{
	font-size: 150px;
	writing-mode: vertical-rl;
	color: #F7F7F7;
	position: absolute;
	left: -10px;
	top: 0;
	letter-spacing: -0.05em;
}
section.c-b-glay .h-deco.ff-en{
	color: #fff;
}
.subpage .h-deco.ff-en{
	top: 110px;
}
@media screen and (max-width: 899px) {
	section::after,section::before{
		display: none;
	}
	.h-deco.ff-en{
		left: -25px;
		font-size: 100px;
	}
	.title-style h2{
		margin-top: 30px;
		margin-bottom: 30px;
		font-size: 2rem;
	}
	.title-style h2::before, .title-style h2::after{
		width: 50px;
	}
	.title-style h2::before {
		left: -58px;
	}
	.title-style h2::after {
		right: -58px;
	}
	.subpage .h-deco.ff-en{
		top: 140px;
	}
	.title-style02{
		font-size: 2rem;
	}
}
@media screen and (max-width: 480px) {
	.title-style h2{
		margin: 0 auto 30px;
	}
	.subpage .h-deco.ff-en{
		top: 100px;
	}
}

/* 共通 */
.mainBox{
	width: 100%;
	overflow-x: 100%;
	padding-top: 110px;
}
section{
	position: relative;
}
section::before{
	content: '';
	height: 100%;
	width: 15px;
	background: #F7F7F7;
	left: 0;
	top:0;
	position: absolute;
}
section::after{
	content: '';
	height: 100%;
	width: 8px;
	background: #F7F7F7;
	left: 22px;
	top: 0;
	position: absolute;
}
section.c-b-glay::before,section.c-b-glay::after{
	background: #fff;
}
section > div{
	padding: 50px 5%;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 1;
	position: relative;
}

section:first-child{
	padding-top: 175px;
}
section:last-child{
	padding-bottom: 100px;
}
section.max{
	width: 100%;
	max-width: 100%;
}

/* box-style */
section div.box-style{
	box-shadow: 0 3px 8px rgba(90,90,90,.3);
	border-radius: 5px;
	background: #fff;
	border-top: 9px solid var(--c-base);
}
/* box-style02 */
section div.box-style02{
	border-radius: 5px;
	border:1px solid #D3D3D3;
	flex: 1;
	text-align: center;
	font-weight:700;
}
section div.box-style02 > span{
	display: block;
	background: #F2F3F5;
	border-bottom: 1px solid #D3D3D3;
	border-radius: 5px 5px 0 0;
	padding:3px 0;
}
section div.box-style02 > p{
	justify-content: center;
	align-items: center;
	height: calc(100% - 22px);
}


@media screen and (max-width: 899px) {
	.mainBox{
		padding-top: 110px;
	}
	.mainBox.single{
		padding-top: 140px;
	}
	section{
		padding: 40px 0;
	}
	section:first-child{
		padding-top: 120px;
	}
	section:last-child{
		padding-bottom: 80px;
	}
	section div.box-style{
		border-top: 6px solid var(--c-base);
	}

}
@media screen and (max-width: 480px) {
	.mainBox{
		padding-top: 100px;
	}
	.mainBox.single{
		padding-top:90px;
	}
	section{
		padding: 25px 0;
	}
	section:first-child{
		padding-top: 100px;
	}
	section:last-child{
    padding-bottom: 40px;
	}
	section > div{
		padding: 50px 0;
	}
}

/* table-style */
.table-style{
	border: 1px solid #CDD1DB;
}
.table-style tr{
	width: 100%;
	border-top: 1px solid #CDD1DB;
}
.table-style th{
	width: 30%;
	background: #F2F3F5;
	padding: 15px;
	font-size: 1.5rem;
	border-left: 1px solid #CDD1DB;
	line-height: 1.6;
}
.table-style td{
	width: 70%;
	padding: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
}

.table-style.two-column th{
	width: 10%;
	min-width: 160px;
}
.table-style.two-column td{
	width: 40%;
}
.table-style td.inspection{
	position: relative;
}
.table-style td.inspection a{
	position: absolute;
	right: 30px;
	color: var(--c-key);
	font-size: 1.4rem;
	font-weight: 700;
	border-bottom: 1px solid var(--c-key);
	margin-left: 5px;
}
.table-style td.inspection a::after{
	content:'';
	background: url('../img/link.svg') center / 100% no-repeat;
	width: 12px;
	height: 14px;
	position: absolute;
	right: -18px;
	top: 4px;
}
.table-style td.inspection.inactive a{
	display: none;
}
@media(hover: hover) {
	.table-style td.inspection a:hover{
		transition: .2s opacity;
		opacity: .5;
		cursor: pointer;
	}
}
@media screen and (max-width: 899px) {
	.table-style.two-column th{
		min-width: 110px;
	}
	.table-style th{
		font-size: 1.3rem;
		padding: 15px 10px;
	}
	.table-style td{
		font-size: 1.3rem;
		padding: 15px 10px;
	}
	.table-style td.inspection a{
		font-size: 1.2rem;
		margin-left: 10px;
		display: block;
		position: relative;
		right: auto;
		width: 72px;
		margin-left: 0;
	}
}
@media screen and (max-width: 480px) {
	.table-style.two-column th{
		min-width: 70px;
	}
	.table-style th,.table-style td{
		padding: 10PX 5PX;
		font-size: 1.1rem;
	}
	.table-style td.inspection a{
		font-size: 1.1rem;
		width: 66px;
	}
}


@media screen and (max-width: 395px) {
	.table-style td.inspection a{
		margin-left: 0;
	}

}

/* 下層ページFV/タイトル */
.subpage .search-area{
	position: relative;
	width: 100%;
	bottom: 0;
	margin-top: 30px;
}
.subpage h1{
	font-size: 3.5rem;
	font-weight: 700;
}
@media screen and (max-width: 899px) {
	.subpage h1{
		font-size: 2.8rem;
	}
}
/*絞り込み検索機能*/
.search-area{
	border:1px solid #BABABA;
	box-shadow: 0 3px 8px rgba(90,90,90,.3);
	border-radius: 5px;
	background: #fff;
	width: 90%;
	max-width: 1080px;
	height: 180px;
	position: absolute;
	left:0;
	right: 0;
	margin: auto;
	bottom: -30px;
	padding: 20px;
	z-index: 1;
}
.search-area h2{
	font-size: 2.2rem;
	color: var(--c-key);
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom:1px solid #D3D3D3;
}
.search-area .search-form{
	margin-top: 20px;
}
.search-area .search-form > form{
	display: flex;
	gap: 10px;
	margin-bottom: 0;
}
.search-area .search-form > form > div{
	flex: 1;
	flex-wrap: nowrap;
}
.search-area .search-form > form p{
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: 5px;
}
.search-area .search-form > form select{
	background: #EDEDED;
	padding: 15px 15px;
	width: 100%;
	border-radius: 5px;
	color: #333;
	font-size: 1.4rem;
	height: auto;
}
.search-area .search-form > form select.is-empty{
  color: #aaa;
}
.search-area .search-form submit{
	width: 170px;
	border-radius: 5px;
	background-color: var(--c-key);
	display: flex;
	flex-flow: column;
	align-items: center;
	color: #fff;
	gap: 5px;
	justify-content: center;
}
.search-area .search-form > form #mileage{
	position: relative;
}
.search-area .search-form > form #mileage select{
	width: 80%;
}
.search-area .search-form > form #mileage::after{
	content:'以内';
	font-size: 1.5rem;
	position: absolute;
	bottom: 0;
	margin-left: 5px;
	color: #888;
}

.search-area .search-form .vkfs:where(:not(.vkfs__layout--min)) .vkfs__outer-wrap:not([class*=vkfs__outer-wrap--col]){
	flex-basis: calc(25% - .8rem);
}
.search-area .search-form .vkfs .btn[type=submit]{
	width: 100px;
}
.search-area .search-form .vkfs__label-name{
	font-size: 1.2rem;
	margin-bottom: 10px;
}
.search-area .search-form .vkfs .btn[type=submit]{
    height: 55px;
    margin-top: 20px;
    width: 120px;
    border-radius: 5px;
    background-color: var(--c-key);
    text-align: center;
    color: #fff;
    padding: 0;
}

.search-area .search-form .vkfs__outer-wrap.mileage{
	position: relative;
}
.search-area .search-form .vkfs__outer-wrap.mileage select{
	width: calc(100% - 30px);
}
.search-area .search-form .vkfs__outer-wrap.mileage::after{
	content:'以内';
	font-size: 1.3rem;
	position: absolute;
	bottom: 0;
	margin-left: 5px;
	color: #888;
	right: 0;
}

@media(hover: hover) {
	.search-area .search-form submit:hover{
		transition: .2s opacity;
		opacity: .5;
		cursor: pointer;
	}
}


@media screen and (max-width: 899px) {
	.search-area{
		height: auto;
		bottom: -220px;
	}

	.search-area .search-form > form{
		margin-bottom: 0!important;
		gap: 0;
		flex-flow: column;
	}

	.search-area .search-form > form > div{
		display: flex;
		align-items: center;
		flex-flow: column;
	}
	.search-area .search-form .vkfs:where(:not(.vkfs__layout--min)) .vkfs__outer-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
	}
	.search-area .search-form .vkfs__label-name{
		margin-bottom: 0;
	}
	.search-area .search-form .vkfs__label-name{
		width: 80px;
		font-size: 1.2rem;
	}
	.search-area .search-form > form select{
		padding: 10px;
		flex: 1;
	}
	.search-area .search-form > form select.is-empty{
		flex:1;
	}
	.search-area .search-form .vkfs .btn[type=submit]{
		width: 100%;
		flex-flow: row;
		padding: 10px 0;
		margin-top: 15px;
	}
	.search-area .search-form .vkfs__outer-wrap.mileage::after{
		bottom: -16px;
		font-size: 1.2rem;
	}
	.search-area h2{
		display: none;
	}
}
@media screen and (max-width: 480px) {
	.search-area{
		bottom: -180px;
	}
	.search-area h2{
		font-size: 1.8rem;
	}
	.search-area .search-form{
		margin-top: 0;
	}
}

/*走行距離 上限下限選択項目*/
/* 元の数値入力欄は非表示 */
.search-area .search-form > form input[type="number"], .wp-block-vk-filter-search-pro-custom-field-search-pro .vkfs__input-wrap--range{
  display: none;
}

/* 代替プルダウンの見た目 */
.ssj-mileage-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ssj-mileage-select {
  min-width: 130px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #ccd5dd;
  border-radius: 4px;
  background: #fff;
}

.ssj-mileage-sep,
.ssj-mileage-unit {
  white-space: nowrap;
  font-size: 1.2rem;
}

@media screen and (max-width: 899px) {
	.wp-block-vk-filter-search-pro-custom-field-search-pro .vkfs__label-name-inner{
		width: 80px;
	}
}
@media screen and (max-width: 480px) {
	.ssj-mileage-select-wrap{
		gap: 5px;
	}
	.ssj-mileage-select {
	  min-width: 80px;
	}	
}

/* ページネーション */
.page-nav > .wrap{
	justify-content: center;
	gap: 20px;
	align-items: center;
}
.page-nav > .wrap .page-numbers{
	width: 35px;
	text-align: center;
	font-weight: 700;
	font-size: 2rem;
	font-family: "Helvetica Neue" , Helvetica;
	padding-top: 4px;
	padding-bottom: 6px;
	color: #B1B6C1;
}
.page-nav > .wrap .page-numbers.dots{
	font-size: 1.6rem;
}
.page-nav > .wrap span.page-numbers.current{
	color: #131B38;
	border-bottom: 2px solid #131B38;
}
.page-nav > .wrap a.prev,.page-nav > .wrap a.next{
	background: #131B38;
	padding: 6px 15px;
	color: #fff;
	font-size: 1.4rem;
	width: auto;
	border-radius: 5px;
	font-weight: 700;
}
.page-nav > .wrap a.button.inactive{
	background: #B1B6C1;
}

@media(hover: hover) {
	.page-nav > .wrap a.page-numbers:hover{
		color: #131B38;
		transition: 0.2s;
	}
	.page-nav > .wrap a.prev:hover,.page-nav > .wrap a.next:hover{
		opacity: 0.5;
		transition: 0.2s;
		color: #fff;
	}
}
@media screen and (max-width: 890px) {
	.page-nav > .wrap{
		gap: 12px;
	}
	.page-nav > .wrap .page-numbers{
		width: 25px;
		font-size: 1.8rem;
	}
	.page-nav > .wrap a.prev,.page-nav > .wrap a.next{
		padding: 6px 10px;
	}
}
@media screen and (max-width: 480px) {

}

/* 合計台数 */
.total{
	margin: 20px 0 5px;
}
.total div{
	font-size: 1.4rem;
	font-weight: 700;
}
.total div span{
	margin: 0 10px;
	font-size: 3.4rem;
	font-family: "Helvetica Neue" , Helvetica;
	vertical-align: -2px;
}

/*トラックカテゴリ*/
.truck-cate li,.service-cate li{
	border: 1px solid var(--c-key);
	border-radius: 3px;
	margin-right: 5px;
	padding: 2px 5px;
	font-size: 1.3rem;
	color: var(--c-key);
	font-weight: 700;
}
.truck-cate li.new{
	background:var(--c-key);
	color:#fff;
}

/* お問い合わせ */
#contact{
	background: url(../img/contact_bg.png) center / cover no-repeat;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	padding: 50px 5%;
}
#contact .cntTitle{
	margin-bottom: 40px;
}
#contact .cntDesc {
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: center;
}
#contact .cntBox{
	margin: 60px auto 30px;
	display: flex;
	justify-content: center;
	gap: 2.5%;
}
#contact .cntBox .cnt{
	text-align: center;
	padding: 30px 5%;
	border: 1px solid #fff;
}
#contact .cntBox .cnt h3{
	font-size: 2.5rem;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
}
#contact .cntBox .cnt p{
	font-size: 1.5rem;
}
#contact .cntBox .cnt .cnt_btn{
	margin: 30px auto 0;
}
@media screen and (max-width: 899px) {
	#contact .cntDesc{
		text-align: left;
	}
	#contact .cntBox{
		flex-flow: column;
		gap: 30px;
    margin: 40px auto 30px;
    max-width: 500px;
	}
}
@media screen and (max-width: 480px) {
	#contact{
		padding: 30px 5%;
	}
	#contact .cntDesc{
		font-size: 1.4rem;
	}
	#contact .cntBox .cnt p{
		font-size: 1.3rem;
		letter-spacing: -0.02em;
	}
	#contact .cntBox{
    margin: 30px auto 0px;
    gap: 20px;
	}
	#contact .cntBox .cnt{
		padding: 30px 15px;
	}
	#contact .cntBox .cnt h3{
		font-size: 1.8rem;
	}
	#contact .cntBox .cnt p{
		font-size: 1.4rem;
		line-height: 1.8;
	}
	#contact .cntBox .cnt .cnt_btn{
    margin: 30px auto 0;
	}
}


/* パンくずリスト */
.breadcrumbs{
	padding-top: 50px;
}
.breadcrumbs ul{
	display: flex;
	flex-wrap: wrap;
	row-gap: 5px;
}
.breadcrumbs ul li{
	margin-left: 5px;
	margin-right: 10px;
	position: relative;
	font-size: 1.3rem;
	color: #B1B6C1;
}
.breadcrumbs ul li::before{
	content: '＞';
	margin-right: 8px;
	}
.breadcrumbs ul li:first-child{
	margin-left: 0;
}
.breadcrumbs ul li:first-child::before{
	display: none;
}
@media screen and (max-width: 480px) {
	.breadcrumbs{
		padding-top: 20px;
	}
}

/* 個別ページ */
section.single > div{
	padding-top: 0;
}
section.single .breadcrumbs{
	padding-top: 20px;
}
section.single .title-box{
	margin-top: 40px;
}
section.single .title-box h1{
	line-height: 1.6;
	margin-bottom: 20px;
}
section.single .title-box .truck-title{
	margin-top: 20px;
}
section.single .title-box .truck-title .tag-new{
	margin-bottom: 0;
}

/* PC */
@media (min-width: 900px){
	.tab{ display: none !important; }
	.sp{ display: none !important; }
	.tab-sp{ display: none !important; }

	.pc_pl-0{ padding: 0 !important; }
	.pc_pr-0{ padding: 0 !important; }
}
/* TAB */
@media screen and (max-width: 899px) and (min-width: 481px) {
	.pc{ display: none !important; }
	.sp{ display: none !important; }
	.pc-sp{ display: none !important; }

	.tab_pl-0{ padding: 0 !important; }
	.tab_pr-0{ padding: 0 !important; }
}
/* SP */
@media screen and (max-width: 480px) {
	.pc{ display: none !important; }
	.tab{ display: none !important; }
	.pc-tab{ display: none !important; }

	.sp-pl-0{ padding: 0 !important; }
	.sp-pr-0{ padding: 0 !important; }

	.sp_fs-14{ font-size: 14px !important; }
	.sp_fs-16{ font-size: 16px !important; }
	.sp_fs-18{ font-size: 18px !important; }
}