@charset "utf-8";

/*----------------------------------------------
	Overall settings
-----------------------------------------------*/
body{
	min-width: 1100px;
	font-family: "Noto Sans JP", sans-serif;
	color: #3C3F43;
	text-align: center;
}
body.ovh{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}
a{
	color: #3C3F43;
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
}
a:hover{
	opacity: .6;
	text-decoration: none;
}

em{
	display: inline-block;
	padding: 0 .5em;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	background: #c00;
}
.underline{
	text-decoration: underline;
}
/* font */
.gothic{
	font-family: "Noto Sans JP", sans-serif;
}
.calsans{
	font-family: "Cal Sans", sans-serif;
}
.mincho{
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}
/* bg */
.bg-white{
	background: #fff;
}
.bg-blue{
	background: #0C4592;
}
.bg-orange{
	background: #e97714;
}
.bg-gray{
	background: #F5F5F5;
}
/* color */
.f-white{
	color: #fff;
}
.f-red{
	color: #c00;
}
.f-blue{
	color: #0C4592;
}
/* anchor */
.anchorwrap{ position: relative;}
.anchorwrap .anchor{ position: absolute; top: -100px;}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	body{
		min-width: inherit;
		font-size: 3.73vw;
	}
	a:hover{
		opacity: 1;
	}
	/* anchor */
	.anchorwrap .anchor{ top: -70px;}
	
	em{
		font-size: 3.73vw;
	}
}
@media screen and (max-width: 350px){
	html{
		font-size: 50%;
	}
}



/*----------------------------------------------
	header
-----------------------------------------------*/
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1100px;
	height: 80px;
	padding: 0 3%;
	background: rgba(255, 255, 255, .95);
	z-index: 999;
}
#header-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 998;
}
header h1{
	width: 280px;
}
header .spmenu{
	display: none;
}
header ul{
	display: flex;
	align-items: center;
	width: 700px;
	white-space: nowrap;
}
header ul li{
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1.5;
}
header ul li>a{
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	height: 80px;
	padding: 0 .5em;
	color: #0C4592;
	position: relative;
}
header ul li>a:hover{
	opacity: 1;
}
header ul li>a:after{
	display: block;
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5px;
	width: 50px;
	height: 4px;
	opacity: 0;
	transition: .2s;
	visibility: hidden;
	background: #0C4592;
}
header ul li>a:hover:after,
header ul li.open>a:after{
	bottom: 0;
	opacity: 1;
	visibility: visible;
}
header ul li>a span{
	display: block;
	width: 100%;
}
header ul li>a small{
	display: block;
	width: 100%;
	color: #3C3F43;
	font-size: 13px;
	font-weight: bold;
}
header ul li>a:hover span,
header ul li>a:hover small{
	color: #0C4592;
}
header ul li.contact{
	margin-left: 2em;
}
header ul li.contact a{
	width: 30px;
	padding: 0;
}
header ul li.contact a:hover{
	opacity: .5;
}
header ul li.contact a:hover:after{
	opacity: 0;
}
header ul li.ac .sub{
	display: none;
	position: absolute;
	left: 0;
	top: 80px;
	width: 100%;
	border-top: 1px solid #C7D4E5;
	background: rgba(255, 255, 255, .98);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
}
/*header ul li.ac:hover .sub{
	display: block;
}*/
header ul li.ac .sub .wrap{
	display: flex;
	padding-top: 30px;
	padding-bottom: 30px;
}
header ul li.ac .sub .wrap p{
	width: 200px;
}
header ul li.ac .sub .wrap p a{
	display: block;
	background: #0C4592;
}
header ul li.ac .sub .wrap p a span{
	display: block;
	padding: 0 1em;
	color: #fff;
	line-height: 40px;
	text-align: left;
	background: url("../img/arrow-right-white.svg") right 1em center no-repeat;
}
header ul li.ac .sub .wrap ul{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	width: auto;
	flex: 1;
	white-space: nowrap;
}
header ul li.ac .sub .wrap ul li{
	margin-left: 40px;
	width: 200px;
	text-align: left;
}
header ul li.ac .sub .wrap ul li a{
	display: block;
	height: auto;
	line-height: 40px;
	position: static;
	background: url("../img/arrow-right.svg") right .5em center no-repeat;
	border-bottom: 1px solid #0C4592;
}
header ul li.ac .sub .wrap ul li a:hover{
	opacity: 1;
	color: #0C4592;
	background-color: #eee;
}
header ul li.ac .sub .wrap ul li a:after{
	display: none;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	header{
		min-width: inherit;
		height: 60px;
		transition: all .2s;
	}
	.open header{
		background: rgba(255, 255, 255, .95);
	}
	header h1{
		width: 250px;
	}
	header .spmenu{
		display: block;
	}
	header .spmenu{
		position: relative;
		width: 57px;
		height: 57px;
		cursor: pointer;
	}
	header .spmenu span{
		display: inline-block;
		position: absolute;
		left: 50%;
		width: 30px;
		height: 2px;
		background: #0C4592;
		transform: translateX(-50%);
		transition: all .5s;
	}
	header .spmenu span{
		display: inline-block;
		transition: all .5s;
	}
	header .spmenu span:nth-of-type(1){
		top: 20px;
	}
	header .spmenu span:nth-of-type(2){
		top: 28px;
	}
	header .spmenu span:nth-of-type(3){
		bottom: 19px;
		width: 16px;
		margin-left: 7px;
	}
	header .spmenu.active span:nth-of-type(1){
		transform: translate(-12px, 8px) rotate(-315deg);
	}
	header .spmenu.active span:nth-of-type(2){
		opacity: 0;
	}
	header .spmenu.active span:nth-of-type(3){
		transform: translate(-12px, -8px) rotate(315deg);
		width: 30px;
		margin-left: 0;
	}
	header nav{
		display: none;
		position: absolute;
		left: 0;
		top: 60px;
		width: 100%;
		padding: 5vw 10vw 7vw;
		background: rgba(255, 255, 255, .95);
		box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
	}
	header ul{
		display: block;
		width: auto;
	}
	header ul li{
		font-size: 5.33vw;
	}
	header ul li>a{
		display: block;
		height: auto;
		padding: .7em 0;
		text-align: left;
	}
	header ul li>a:hover{
		opacity: 1;
	}
	header ul li>a:after{
		display: none;
	}
	header ul li>a span{
		display: inline-block;
		width: auto;
	}
	header ul li>a small{
		display: inline-block;
		width: auto;
		font-size: 3.73vw;
		margin-left: 1em;
	}
	header ul li>a:hover span{
		color: inherit;
	}
	header ul li>a:hover small{
		color: #3C3F43;
	}
	header ul li.contact{
		margin-left: 0;
		padding-top: 3vw;
		text-align: center;
	}
	header ul li.contact a{
		width: 10vw;
		padding: 0;
		margin: 0 auto;
	}
	header ul li.contact a:hover{
		opacity: 1;
	}
	header ul li.contact a:hover:after{
		opacity: 0;
	}
	header ul li.contact a img{
		width: 10vw;
	}
	header ul li.ac{
		position: relative;
	}
	header ul li.ac .acbtn{
		display: inline-block;
		position: absolute;
		right: 0;
		top: 2vw;
		width: 11vw;
		height: 11vw;
		background: #0C4592;
		border-radius: 50%;
		cursor: pointer;
	}
	header ul li.ac .acbtn:before,
	header ul li.ac .acbtn:after{
		display: inline-block;
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
	}
	header ul li.ac .acbtn:before{
		width: 5vw;
		height: 2px;
	}
	header ul li.ac .acbtn:after{
		width: 2px;
		height: 5vw;
	}
	header ul li.ac .acbtn.open:after{
		opacity: 0;
	}
	header ul li.ac .sub{
		display: none;
		position: static;
		width: auto;
		border-top: none;
		background: #eee;
		box-shadow: none;
	}
	header ul li.ac:hover .sub{
		display: none;
	}
	header ul li.ac .sub .wrap{
		display: block;
		padding-top: 5vw;
		padding-bottom: 5vw;
	}
	header ul li.ac .sub .wrap p{
		width: auto;
	}
	header ul li.ac .sub .wrap p a{
		font-size: 4.26vw;
		line-height: 3;
	}
	header ul li.ac .sub .wrap p img{
		display: none;
	}
	header ul li.ac .sub .wrap p a span{
		display: block;
		line-height: 2.5;
		background-position: right .5em center !important;
		background-size: 1.8vw auto !important;
		background-color: inherit !important;
	}
	header ul li.ac .sub .wrap ul{
		display: block;
	}
	header ul li.ac .sub .wrap ul li{
		margin-left: 0;
		width: auto;
	}
	header ul li.ac .sub .wrap ul li a{
		padding: 0 1em;
		font-size: 4.26vw;
		line-height: 2.5;
		background-size: 1.8vw auto !important;
		background-color: inherit !important;
	}
	header ul li.ac .sub .wrap ul li a:hover{
		opacity: 1;
		color: #0C4592;
		background-color: #eee;
	}
	header ul li.ac .sub .wrap ul li a:after{
		display: none;
	}
}



/*----------------------------------------------
	section
-----------------------------------------------*/

section{}
.wrap{
	clear: both;
	box-sizing: content-box;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

/* ttl */
.pagettl{
	padding-top: 150px;
	padding-bottom: 70px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: .1em;
}
.pagettl span{
	display: block;
	font-size: 65px;
	line-height: 1.3;
	font-weight: normal;
	letter-spacing: .15em;
}
.pagettl span::first-letter{
	color: #DF0516;
}
.pagettl.news{
	background: url("../img/pagettl-news.jpg") center / cover no-repeat;
}
.pagettl.aboutus{
	background: url("../img/pagettl-aboutus.jpg") center / cover no-repeat;
}
.pagettl.service{
	background: url("../img/pagettl-service.jpg") center / cover no-repeat;
}
.pagettl.feature{
	background: url("../img/pagettl-feature.jpg") center / cover no-repeat;
}
.pagettl.news{
	background: url("../img/pagettl-news.jpg") center / cover no-repeat;
}
.pagettl.contact{
	background: url("../img/pagettl-contact.jpg") center / cover no-repeat;
}
.pagettl.safety{
	background: url("../img/pagettl-safety.jpg") center / cover no-repeat;
}
.ttl1{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	position: relative;
}
.ttl1:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 100%;
	height: 1px;
	background: #ccc;
}
.ttl1 .txt{
	display: inline-block;
	padding-right: 1em;
	background: #fff;
	position: relative;
}
.ttl1 .calsans{
	display: block;
	font-size: 50px;
	font-weight: normal;
	letter-spacing: .15em;
	padding-top: .4em;
}
.ttl1 .calsans::first-letter{
	color: #df0516;
}
.ttl1.t-center{
	text-align: center;
}
.ttl1.t-center:before{
	display: none;
}
.ttl1.t-center .txt{
	padding-right: 0;
	background: none;
}
.ttl2{
	padding-left: 1.5em;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	position: relative;
}
.ttl2:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 1em;
	height: 4px;
	background: #D7DFEB;
}
.ttl3{
	text-align: center;
	margin-bottom: 3em;
}
.ttl3 strong{
	display: inline-block;
	padding: .2em 0 .2em 100px;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
}
.ttl3.transportation strong{
	background: url(../img/ttl3-ic1.svg) left center / 80px auto no-repeat;
}
.ttl3.safekeeping strong{
	background: url(../img/ttl3-ic2.svg) left center / 80px auto no-repeat;
}
.ttl3.logistics strong{
	background: url(../img/ttl3-ic3.svg) left center / 80px auto no-repeat;
}
.ttl3 strong span{
	display: block;
	color: #8E9DB2;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
}
.ttl4{
	padding-left: 1em;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	position: relative;
}
.ttl4:after{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .5em;
	height: .5em;
	background: #0C4592;
}
.ttl5{
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
/* btn */
.btn1{
	display: inline-block;
	padding-right: 3em;
	padding-bottom: .2em;
	font-weight: bold;
	border-bottom: 1px solid #0C4592;
	position: relative;
}
.btn1:hover{
	opacity: 1;
	color: #0C4592;
}
.btn1:after{
	display: inline-block;
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1.31em;
	height: 1.43em;
	background: url("../img/ic-btn1.svg") center bottom / cover no-repeat;
}
.btn1:hover:after{
	opacity: 0;
	animation: btn1ani .5s ease forwards;
}
@keyframes btn1ani{
	0%{
		right: 1.5em;
		opacity: 0;
	}
	50%{
		opacity: .4;
	}
	100%{
		right: 0;
		opacity: 1;
	}
}
.btn2{
	display: block;
	width: 250px;
	margin-top: 1.2em;
	padding: 1em;
	text-align: center;
	border: 1px solid #0C4592;
}
.btn2 img{
	width: 22px;
	margin-right: .5em;
}
.btn2:hover{
	opacity: 1;
	background: #ccc;
}
.btn3{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	padding: .5em;
	margin: 0 1em;
	color: #fff;
	text-align: center;
	background: #0C4592;
	border: 2px solid #0C4592;
}
.btn3:hover{
	opacity: 1;
	color: #0C4592;
	background: #fff;
}
.btn4{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	padding: .5em;
	margin: 0 1em;
	color: #fff;
	text-align: center;
	background: #666;
	border: 2px solid #666;
}
.btn4:hover{
	opacity: 1;
	color: #666;
	background: #fff;
}
/* pnav */
.pnav{
	padding: 15px 5% 80px;
	font-size: 14px;
	text-align: left;
}
.pnav li{
	display: inline-block;
	vertical-align: top;
}
.pnav li:not(:last-child):after{
	display: inline-block;
	content: "＞";
	margin: 0 .3em;
}
/* lead */
.lead1{
	margin-bottom: 1em;
	font-size: 22px;
	font-weight: 500;
}
/* anchor */
.anchor{
	position: relative;
}
.anchor .anchorid{
	position: absolute;
	top: -100px;
}
/* cmn-contact */
.cmn-contact{
	padding: 70px 0;
	background: url("../img/cmn-contact-bg.jpg") center / cover no-repeat;
}
.cmn-contact .links{
	display: flex;
	justify-content: space-between;
}
.cmn-contact .links a{
	display: block;
	padding: .8em;
	width: 48.5%;
	font-weight: 500;
	line-height: 1.2;
	background: #fff;
	border-radius: 10px;
}
.cmn-contact .links a:hover{
	opacity: 1;
	background: #999;
}
.cmn-contact .links a span.tel{
	display: inline-block;
	padding-left: 55px;
	font-size: 40px;
	font-weight: normal;
	letter-spacing: .05em;
	background: url(../img/ic-tel.svg) left center no-repeat;
}
.cmn-contact .links a:nth-child(2){
	padding: 2.5em .8em .8em;
}
.cmn-contact .links a span.mail{
	display: inline-block;
	margin-top: .5em;
	padding-left: 50px;
	font-size: 26px;
	font-weight: bold;
	background: url(../img/ic-contact.svg) left center / 34px auto no-repeat;
}
.cmn-contact .links a small{
	vertical-align: top;
	color: #666;
	font-size: 14px;
}
/* table */
.table1{
	width: 100%;
	font-size: 16px;
	background: #fff;
	border-top: 1px solid #D9D9D9;
}
.table1 th{
	line-height: 1.5;
	padding: 1em;
	background: #eee;
	border-bottom: 1px solid #D9D9D9;
}
.table1 td{
	padding: 1em 2em;
	border-bottom: 1px solid #D9D9D9;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	/* ttl */
	.pagettl{
		padding-top: calc(60px + 7vw);
		padding-bottom: 7vw;
		font-size: 3.73vw;
	}
	.pagettl span{
		font-size: 9.6vw;
		line-height: 1;
	}
	.ttl1{
		font-size: 3.73vw;
	}
	.ttl1 .calsans{
		font-size: 9.6vw;
	}
	.ttl2{
		font-size: 6.4vw;
	}
	.ttl2:before{
		height: 4px;
	}
	.ttl3 strong{
		padding: .2em 0 .2em 2.5em;
		background-size: 2em auto !important;
		font-size: 8vw;
	}
	.ttl3 strong span{
		font-size: 3.2vw;
	}
	.ttl4{
		font-size: 5.33vw;
	}
	/* btn */
	.btn2{
		width: auto;
		padding: .5em;
	}
	.btn2 img{
		width: 1.3em;
	}
	.btn2:hover{
		background: none;
	}
	.btn3{
		max-width: inherit;
		margin: 0 0 1em;
		padding: 1em;
	}
	.btn3:hover{
		color: #fff;
		background: #0C4592;
	}
	.btn4{
		max-width: 10em;
		margin: 0 0 1em;
	}
	.btn4:hover{
		color: #fff;
		background: #666;
	}
	/* pnav */
	.pnav{
		padding: .5em 5% 2em;
		font-size: 3.2vw;
	}
	/* lead */
	.lead1{
		font-size: 5.33vw;
	}
	/* cmn-contact */
	.cmn-contact{
		padding: 15vw 0 10vw;
	}
	.cmn-contact .links{
		display: block;
	}
	.cmn-contact .links a{
		padding: .8em;
		width: auto;
		margin-bottom: 1em;
	}
	.cmn-contact .links a span.tel{
		padding-left: 12vw;
		font-size: 9.6vw;
		background-size: 9vw auto;
	}
	.cmn-contact .links a span.mail{
		margin: .5em 0;
		padding-left: 9vw;
		font-size: 6.4vw;
		background-size: 7vw auto;
	}
	.cmn-contact .links a small{
		vertical-align: top;
		color: #666;
		font-size: 12px;
	}
}



/*----------------------------------------------
	footer
-----------------------------------------------*/
footer{
	padding: 50px 0;
	background: #f4f4f4;
}
footer .pagetop{
	position: fixed;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	background: url(../img/pagetop.svg) center / cover no-repeat;
	cursor: pointer;
}
footer .wrap{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	position: relative;
}
footer .about{
	width: 300px;
	font-size: 16px;
}
footer .about dt{
	width: 250px;
	margin-bottom: 1.5em;
}
footer .fnav{
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
footer .fnav dl{
	margin-left: 2em;
}
footer .fnav dl a{
	color: #0C4592;
}
footer .fnav dl dt{
	margin-bottom: .3em;
	font-weight: bold;
}
footer .fnav dl dd{
	padding-left: 1em;
	font-size: 16px;
	background: url("../img/arrow-right.svg") left center no-repeat;
}
footer .copy{
	width: 100%;
	font-size: 14px;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	footer{
		padding: 15vw 0 10vw;
	}
	footer .wrap{
		display: block;
	}
	footer .about{
		width: auto;
		font-size: 14px;
	}
	footer .about dt{
		width: 70%;
		margin-bottom: 1em;
	}
	footer .fnav{
		display: block;
		padding: 10vw 0 5vw;
		position: relative;
	}
	footer .fnav dl{
		width: 50%;
		margin-left: 0;
	}
	footer .fnav dl:nth-child(3){
		position: absolute;
		left: 50%;
		top: 10vw;
	}
	footer .fnav dl dd{
		font-size: 3.73vw;
		background-size: 1.8vw auto !important;
	}
	footer .fnav dl dd:last-child{
		margin-bottom: .7em;
	}
	footer .copy{
		font-size: 3.2vw;
	}
}



























/*--------------------------------------------------------------------------
	Sub-page settings
---------------------------------------------------------------------------*/
/*--------------------------
	/
---------------------------*/
.top1{
	overflow: hidden;
	position: relative;
}
.top1 figure{
	height: 550px;
	background: url("../img/top1-img.jpg") center right / cover no-repeat;
	transform: scale(1.1);
	animation: top1img 5s ease .2s forwards;
}
@keyframes top1img{
	0%{ transform: scale(1.1);}
	100%{ transform: scale(1);}
}
.top1 .bgline{
	position: absolute;
	left: -5%;
	top: calc(50% + 80px);
	width: 0;
	height: 200px;
	transform: rotate(-3deg) translateY(-50%);
	background: #A2BFD5;
	mix-blend-mode: multiply;
	animation: top1bg 2s ease forwards;
}
@keyframes top1bg{
	0%{
		width: 0;
	}
	100%{
		width: 110%;
	}
}
.top1 .txt{
	position: absolute;
	left: 50%;
	top: calc(50% + 80px);
	width: 640px;
	opacity: 0;
	white-space: nowrap;
	overflow: hidden;
	transform: translate(-320px, -50%);
	animation: top1txt 2s ease 1.3s forwards;
}
@keyframes top1txt{
	0%{
		width: 0;
		opacity: 1;
	}
	100%{
		width: 640px;
		opacity: 1;
	}
}
@keyframes top1txt-sp{
	0%{
		width: 0;
		opacity: 1;
	}
	100%{
		width: 96vw;
		opacity: 1;
	}
}
.top1 .txt img{
	min-width: 640px;
}
.top1 .scroll{
	position: absolute;
	right: 3%;
	bottom: 0;
	width: 40px;
	height: 120px;
}
.top1 .scroll:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 120px;
	background: #fff;
	animation: top1scroll 2s infinite;
}

@keyframes top1scroll{
	0%{
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50%{
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	51%{
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100%{
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
.top1 .scroll span{
	color: #fff;
	letter-spacing: .05em;
	writing-mode: vertical-rl;
}
.top2{
	display: flex;
	flex-wrap: wrap;
	padding: 50px 5% 70px;
}
.top2 h2{
	width: 200px;
	font-size: 50px;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1;
	text-align: left;
	border-right: 1px solid #ccc;
}
.top2 h2::first-letter{
	color: #df0516;
}
.top2wrap{
	flex: 1;
	padding-left: 50px;
	margin-bottom: 1em;
	text-align: left;
}
.top2wrap dl{
	display: flex;
}
.top2wrap dl:not(:last-of-type){
	margin-bottom: 2em;
}
.top2wrap dl dt{
	width: 7em;
	font-size: 16px;
	letter-spacing: .05em;
}
.top2wrap dl dd{
	display: flex;
	align-items: center;
}
.top2wrap dl dd span{
	display: inline-block;
	width: 12em;
	color: #fff;
	font-size: 12px;
	line-height: 2.3;
	text-align: center;
}
.top2wrap dl dd a{
	display: inline-block;
	margin-left: 1.5em;
}
.top2wrap dl dd a:hover{
	text-decoration: underline;
}
.top2 .btn{
	width: 100%;
	text-align: right;
}
.top3{
	display: flex;
	flex-direction: row-reverse;
}
.top3 figure{
	width: 45%;
	background: url("../img/top3-img.jpg") center / cover no-repeat;
}
.top3wrap{
	width: 55%;
	padding: 0 40px 50px 5%;
	text-align: left;
}
.top4{
	padding: 100px 0;
	color: #fff;
	background: url("../img/top4-bg.jpg") center bottom / cover no-repeat fixed;
}
.top4 ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.top4 ul li{
	margin-bottom: 2.5%;
}
.top4 .t-right{
	font-size: 14px;
	padding-top: .5em;
}
.top5{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 80px 5%;
	position: relative;
}
.top5wrap{
	flex: 1;
	padding: 0 40px 0 0;
}
.top5 ul{
	width: 550px;
}
.top5 ul li{
	margin-bottom: 10px;
}
.top5 ul li a{
	display: flex;
	align-items: center;
	background: #EDF2F7;
}
.top5 ul li a div{
	width: 60%;
	padding: 20px 20px 20px 120px;
	text-align: left;
}
.top5 ul li a.box1 div{
	background: url("../img/top5-ic1.svg") left 20px center no-repeat;
}
.top5 ul li a.box2 div{
	background: url("../img/top5-ic2.svg") left 20px center no-repeat;
}
.top5 ul li a.box3 div{
	background: url("../img/top5-ic3.svg") left 20px center no-repeat;
}
.top5 ul li a div .ttl{
	margin-bottom: .5em;
	font-size: 20px;
	line-height: 1.2;
}
.top5 ul li a div .ttl span{
	color: #5F6F85;
	font-size: 13px;
	letter-spacing: .05em;
}
.top5 ul li a div .txt{
	line-height: 1.4;
}
.top5 ul li a figure{
	width: 40%;
}
.top6{
	padding-top: 100px;
	padding-bottom: 100px;
	background: #F4F4F4;
	position: relative;
}
.top6 .bg1{
	position: absolute;
	top: 0;
	left: 50%;
	width: 25vw;
	height: 100%;
	background: #0C4592;
	opacity: 0;
	z-index: 1;
}
.top6 .bg2{
	position: absolute;
	top: 0;
	left: 50%;
	width: 25vw;
	height: 100%;
	background: #006BB7;
	opacity: 0;
	z-index: 1;
}
.top6 .bg3{
	position: absolute;
	top: 0;
	left: 80%;
	width: 7vw;
	height: 100%;
	background: #006BB7;
	opacity: 0;
	z-index: 1;
}
.top6.animated .bg1{
	animation: top6bg1 1.2s ease .5s forwards;
}
@keyframes top6bg1{
	0%{
		opacity: 0;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		left: 0;
		width: 15vw;
		opacity: 1;
	}
}
.top6.animated .bg2{
	animation: top6bg2 1.2s ease .8s forwards;
}
@keyframes top6bg2{
	0%{
		opacity: 0;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		left: 18vw;
		width: 15vw;
		opacity: 1;
	}
}
.top6.animated .bg3{
	animation: top6bg3 1.2s ease .9s forwards;
}
@keyframes top6bg3{
	0%{
		opacity: 0;
	}
	30%{
		opacity: .8;
	}
	50%{
		opacity: 1;
	}
	100%{
		left: 36vw;
		width: 3vw;
		opacity: 1;
	}
}
.top6wrap{
	display: flex;
	flex-direction: row-reverse;
}
.top6wrap figure{
	width: 45%;
	background: url("../img/top6-img.jpg") center / cover no-repeat;
	position: relative;
	z-index: 2;
}
.top6wrap div{
	width: 55%;
	padding: 0 5% 0 40px;
	text-align: left;
}
.top6wrap div .ttl1 .txt{
	background: #F4F4F4;
}
.top7{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 70px;
	padding-bottom: 70px;
}
.top7wrap{
	width: 55%;
	padding: 30px 40px 30px 5%;
	text-align: left;
}
.top7wrap ul{
	display: flex;
	flex-wrap: wrap;
}
.top7wrap ul li{
	width: 50%;
}
.top7wrap ul li a{
	display: block;
	padding: 0 2em 0 .5em;
	line-height: 60px;
	background: url("../img/arrow-right.svg") right 1em center no-repeat;
	border-bottom: 1px solid #C7C7C7;
}
.top7wrap ul li a:hover{
	opacity: 1;
	background: url("../img/arrow-right.svg") right 1em center no-repeat #eee;
}
.top7wrap ul li.full{
	width: 100%;
}
.top7wrap ul li.full a{
	font-size: 18px;
	font-weight: bold;
}
.top7img{
	width: 45%;
	max-width: 850px;
	aspect-ratio: 660 / 500;
	position: relative;
}
.top7img figure{
	position: absolute;
	width: calc(100% / 3);
	aspect-ratio: 660 / 500;
}
.top7img figure.img1{
	left: 0;
	opacity: 0;
}
.animated .top7img figure.img1{
	animation: top7img1 1s ease .7s forwards;
}
@keyframes top7img1{
	0%{
		opacity: 0;
		bottom: -50px;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		bottom: 50px;
	}
}
@keyframes top7img1-sp{
	0%{
		opacity: 0;
		bottom: -5vw;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		bottom: 5vw;
	}
}
.top7img figure.img2{
	left: calc(100% / 3);
	bottom: 0;
	opacity: 0;
}
.animated .top7img figure.img2{
	animation: top7img2 1s ease .7s forwards;
}
@keyframes top7img2{
	0%{
		opacity: 0;
		bottom: 50px;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		bottom: -50px;
	}
}
@keyframes top7img2-sp{
	0%{
		opacity: 0;
		bottom: 5vw;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		bottom: -5vw;
	}
}
.top7img figure.img3{
	right: 0;
	top: 0;
	opacity: 0;
}
.animated .top7img figure.img3{
	animation: top7img3 1s ease .7s forwards;
}
@keyframes top7img3{
	0%{
		opacity: 0;
		top: 20px;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		top: -80px;
	}
}
@keyframes top7img3-sp{
	0%{
		opacity: 0;
		top: 5vw;
	}
	30%{
		opacity: .6;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		top: -12vw;
	}
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.top1{
		height: auto;
		aspect-ratio: 1000 / 1333;
	}
	.top1 figure{
		height: auto;
		aspect-ratio: 1000 / 1333;
	}
	.top1 .bgline{
		top: calc(45% + 60px);
		height: 30vw;
		animation: top1bg 1.5s ease forwards;
	}
	.top1 .txt{
		top: calc(45% + 60px);
		width: 96vw;
		transform: translate(-48vw, -50%);
		animation: top1txt-sp 2s ease 1.3s forwards;
	}
	.top1 .txt img{
		min-width: 96vw;
	}
	.top1 .scroll{
		width: 10.66vw;
		height: 32vw;
		right: 1%;
	}
	.top1 .scroll:before{
		height: 32vw;
	}
	.top2{
		display: block;
		padding: 10vw 5vw;
	}
	.top2 h2{
		width: auto;
		font-size: 9.6vw;
		border-right: none;
		margin-bottom: 1em;
	}
	.top2wrap{
		padding-left: 0;
	}
	.top2wrap dl{
		display: block;
	}
	.top2wrap dl:not(:last-of-type){
		margin-bottom: 1em;
	}
	.top2wrap dl dt{
		float: left;
		width: 6.5em;
		font-size: 3.73vw;
	}
	.top2wrap dl dd{
		display: inline;
	}
	.top2wrap dl dd span{
		font-size: 3.2vw;
		margin-bottom: .5em;
	}
	.top2wrap dl dd a{
		display: inline-block;
		margin-left: 0;
	}
	.top3{
		display: block;
		align-items: center;
		flex-direction: row-reverse;
	}
	.top3 figure{
		width: auto;
		height: 50vw;
	}
	.top3wrap{
		width: auto;
		padding: 15vw 5vw 15vw;
	}
	.top4{
		padding: 15vw 0;
	}
	.top4 ul{
		flex-wrap: wrap;
	}
	.top4 ul li{
		width: 48%;
		margin-bottom: 4vw;
	}
	.top4 ul li.half{
		width: auto;
	}
	.top4 .t-right{
		font-size: 3.73vw;
		padding-top: 0;
	}
	.top5{
		padding: 15vw 5vw;
	}
	.top5wrap{
		padding: 0 0 10vw;
	}
	.top5 ul{
		width: auto;
	}
	.top5 ul li{
		width: auto;
		margin-bottom: 5vw;
	}
	.top5 ul li a{
		display: block;
		background: #EDF2F7;
	}
	.top5 ul li a div{
		width: auto;
		padding: 6vw 0 6vw 27vw;
		background-size: 15vw !important;
		background-position: left 7vw center !important;
	}
	.top5 ul li a div .ttl{
		font-size: 5.33vw;
	}
	.top5 ul li a div .ttl span{
		font-size: 3.46vw;
	}
	.top5 ul li a figure{
		width: auto;
	}
	.top6{
		padding: 15vw 0 0;
	}
	.top6 .bg1,
	.top6 .bg2,
	.top6 .bg3{
		display: none;
	}
	.top6wrap{
		display: block;
	}
	.top6wrap figure{
		width: auto;
		height: 50vw;
	}
	.top6wrap div{
		width: auto;
		padding: 0 5vw 15vw;
		position: relative;
		z-index: 3;
	}
	.top7{
		display: block;
		padding: 0 0 10vw;
	}
	.top7wrap{
		width: auto;
		padding: 15vw 5vw 20vw;
	}
	.top7wrap ul li a{
		line-height: 3.5;
		background-size: 1.8vw auto !important;
		background-position: right 5vw center !important;
		background-color: #fff !important;
	}
	.top7wrap ul li.full a{
		font-size: 4.26vw;
	}
	.top7img{
		width: auto;
		height: 80vw;
		max-width: inherit;
		aspect-ratio: inherit;
		position: relative;
	}
	.top7img figure{
		aspect-ratio: inherit;
		height: 80vw;
	}
	.animated .top7img figure.img1{
		animation: top7img1-sp 1s ease .2s forwards;
	}
	.animated .top7img figure.img2{
		animation: top7img2-sp 1s ease .2s forwards;
	}
	.animated .top7img figure.img3{
		animation: top7img3-sp 1s ease .2s forwards;
	}
}



/*--------------------------
	news/
---------------------------*/
.news1{
	display: flex;
	justify-content: space-between;
	text-align: left;
	margin-bottom: 100px;
}
.news1 .leftcol{
	width: 73%;
}
.news1 .leftcol .writer{
	display: flex;
	display: none;
	align-items: center;
	float: right;
	color: #666;
	font-size: 16px;
	margin-left: 30px;
}
.news1 .leftcol .writer img{
	width: 40px;
	height: 40px;
	margin-right: .5em;
	border-radius: 50%;
	object-fit: cover;
	overflow: hidden;
	border: 1px solid #ccc;
}
.news1 .leftcol .date{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
	margin-bottom: 1em;
	color: #666;
	font-size: 16px;
	letter-spacing: .05em;
}
.news1 .leftcol .tag{
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 1.3em;
	overflow: hidden;
}
.news1 .leftcol .tag span{
	display: inline-block;
	vertical-align: middle;
	width: 12em;
	color: #fff;
	font-size: 12px;
	line-height: 2.3;
	text-align: center;
}
.news1 .leftcol h2{
	margin-bottom: 1em;
	padding-left: 1.4em;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.5;
	position: relative;
}
.news1 .leftcol h2:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: 1em;
	height: .1em;
	background: #D7DFEB;
}
.news1 .leftcol p{
	margin-bottom: 0em;
}
.news1 .leftcol p a{
	color: #0C4592;
	text-decoration: underline;
}
.news1 .leftcol p a:hover{
	text-decoration: none;
}
.news1 .leftcol figure{
	margin-bottom: 3em;
}

.news1 .leftcol h3 {
    margin: 1em 0;
    font-size: 26px;
    font-weight: 500;
}
.news1 .leftcol h4 {
    margin: 1em 0;
    font-size: 24px;
    font-weight: 500;
}
.news1 .leftcol em{
    font-style: italic;
		display: initial;
		padding: initial;
		color:initial;
		font-size:inherit;
		font-weight: initial;
		background: initial;
}

.news_list_item {
  border-bottom: 1px solid #e6e8eb;
  padding: 2rem 0;
}
.news_list_meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.news_list_date p {
  width: 7em;
  font-size: 16px;
  letter-spacing: .05em;
}
.badge {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  padding: 0.5em 0.75em;
}
.news_list_text a {
  text-decoration: underline;
}
.news_list_item dd {
  margin-inline-start: 0;
  margin-top: 1rem;
}
.news1 .rightcol{
	width: 22%;
}
.news1 .rightcol h3{
	font-size: 20px;
	border-bottom: 3px solid #3D69A6;
}
.news1 .rightcol ul{
	margin-bottom: 2em;
}
.news1 .rightcol ul li{
	border-bottom: 1px solid #ccc;
}
.news1 .rightcol ul li a{
	display: block;
	padding: .8em .5em;
	font-size: 16px;
	line-height: 1.5;
}
.news1 .rightcol ul li a:hover{
	opacity: 1;
	background: #eee;
}
.news1 .rightcol ul li a span{
	letter-spacing: .05em;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.news1{
		display: block;
		margin-bottom: 15vw;
	}
	.news1 .leftcol{
		width: auto;
		margin-bottom: 15vw;
	}
	.news1 .leftcol .writer{
		font-size: 3.2vw;
		margin-left: 0;
	}
	.news1 .leftcol .writer img{
		width: 8vw;
		height: 8vw;
		margin-right: .5em;
	}
	.news1 .leftcol .date{
		margin-right: .5em;
		margin-bottom: 8vw;
		font-size: 3.73vw;
	}
	.news1 .leftcol .tag{
		margin-bottom: 8vw;
	}
	.news1 .leftcol .tag span{
		font-size: 3.2vw;
	}
	.news1 .leftcol h2{
		font-size: 6.4vw;
	}
	.news1 .leftcol p{
		margin-bottom: 0em;
	}
	.news1 .leftcol p a{
		color: #0C4592;
		text-decoration: underline;
	}
	.news1 .leftcol p a:hover{
		text-decoration: none;
	}
	.news1 .leftcol figure{
		margin-bottom: 3em;
	}
	.news1 .rightcol{
		width: auto;
	}
	.news1 .rightcol h3{
		font-size: 5.33vw;
	}
	.news1 .rightcol ul li a{
		padding: 1em 0;
		font-size: 3.73vw;
	}
	.news1 .rightcol ul li a:hover{
		background: none;
	}
  .news_list_meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}



/*--------------------------
	about/
---------------------------*/
.about1{
	display: flex;
	flex-wrap: wrap;
}
.about1 li{
	width: 32%;
	margin-right: 2%;
	margin-bottom: 1em;
}
.about1 li:nth-child(3n){
	margin-right: 0;
}
.about1 li a{
	display: block;
	background: #EDF2F7;
}
.about1 li a div{
	padding: 30px 10px 20px 110px;
	text-align: left;
}
.about1 li a.message div{
	background: url("../img/about1-message.svg") left 20px center / 70px auto no-repeat;
}
.about1 li a.philosophy div{
	background: url("../img/about1-philosophy.svg") left 20px center / 70px auto no-repeat;
}
.about1 li a.profile div{
	background: url("../img/about1-profile.svg") left 20px center / 70px auto no-repeat;
}
.about1 li a.history div{
	background: url("../img/about1-history.svg") left 20px center / 70px auto no-repeat;
}
.about1 li a.location div{
	background: url("../img/about1-location.svg") left 20px center / 70px auto no-repeat;
}
.about1 li a div .ttl{
	margin-bottom: .5em;
	font-size: 20px;
	line-height: 1.2;
}
.about1 li a div .ttl span{
	color: #5F6F85;
	font-size: 13px;
	letter-spacing: .05em;
}
.about1 li a div .txt{
	line-height: 1.4;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.about1{
		display: block;
	}
	.about1 li{
		width: auto;
		margin-bottom: 5vw;
	}
	.about1 li a div{
		padding: 5vw 5vw 3vw 22vw;
		background-size: 15vw!important;
	}
	.about1 li a div .ttl{
		font-size: 5.33vw;
	}
	.about1 li a div .ttl span{
		font-size: 3.46vw;
	}
}



/*--------------------------
	message/
---------------------------*/
.message1{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 5em;
}
.message1 figure{
	width: 40%;
	padding: 1em 0 0 1em;
	position: relative;
}
.message1 figure:before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 80%;
	height: 80%;
	background: #0C4592;
}
.message1 figure img{
	position: relative;
}
.message1 div{
	width: 55%;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.message1{
		display: block;
		margin-bottom: 3em;
	}
	.message1 figure{
		width: 70%;
		margin: 0 auto 3em;
	}
	.message1 div{
		width: auto;
	}
}



/*--------------------------
	philosophy/
---------------------------*/
.philosophy1{
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.5;
}
.philosophy2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.philosophy2 li{
	padding: .1em 0 0 .5em;
	margin: 0 .25em .5em;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: .5em;
	background: #eee;
}
.philosophy3{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.philosophy3 li{
	padding-left: 1.5em;
	margin-bottom: 1em;
	font-weight: bold;
	position: relative;
}
.philosophy3 li:before{
	content: "－";
	position: absolute;
	left: 0;
	top: 0;
	color: #0C4592;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.philosophy1{
		font-size: 8vw;
	}
	.philosophy2 li{
		font-size: 8vw;
	}
	.philosophy3 li{
		font-size: 4.26vw;
	}
}



/*--------------------------
	profile/
---------------------------*/
.profile1{
	width: 100%;
	border-top: 1px solid #D9D9D9;
}
.profile1 th{
	width: 14em;
	padding: 1em;
	background: #eee;
	border-bottom: 1px solid #D9D9D9;
}
.profile1 td{
	padding: 1em 2em;
	border-bottom: 1px solid #D9D9D9;
}
.profile2 iframe{
	width: 100%;
}
.profile3{
	display: flex;
	justify-content: space-between;
}
.profile3 li{
	width: 23%;
}
.profile3 li a{
	display: block;
	background: #eee;
}
.profile3 li a span{
	display: block;
	padding: .2em 0 .2em 2em;
	background: url(../img/arrow-right.svg) left 1em center / .45em auto no-repeat;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.profile1 th{
		display: block;
		width: auto;
		padding: .5em 1em;
		border-bottom: none;
	}
	.profile1 td{
		display: block;
		padding: .5em 1em 1em;
	}
	.profile2 iframe{
		height: 60vw;
	}
	.profile3 th{
		display: block;
		width: auto;
		padding: .5em 1em;
		border-bottom: none;
	}
	.profile3 td{
		display: block;
		padding: .5em 1em;
	}
	.profile3 iframe{
		height: 50vw;
	}
	.profile3{
		flex-wrap: wrap;
	}
	.profile3 li{
		width: 48%;
		margin-bottom: 1em;
	}
}



/*--------------------------
	history/
---------------------------*/
.history1 li{
	position: relative;
	padding-left: 300px;
}
.history1 li:before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 1em;
	width: 2em;
	height: 2em;
	background: #0C4592;
	border-radius: 50%;
	z-index: 1;
}
.history1 li .bar{
	display: block;
	content: "";
	position: absolute;
	left: .5em;
	top: 1.5em;
	width: 1em;
	height: calc(100% + 1.5em);
	background: #ddd;
	animation: historybar 1s ease .2s forwards;
	opacity: 0;
}
@keyframes historybar{
	0%{ height: 0; opacity: .2;}
	100%{ height: calc(100% + 1.5em); opacity: 1;}
}
.history1 li:last-child .bar{
	animation: historybar-last 1s ease .2s forwards;
}
@keyframes historybar-last{
	0%{ height: 0; opacity: .2;}
	100%{ height: calc(100% - 1.5em); opacity: 1;}
}
.history1 li .year{
	position: absolute;
	left: 0;
	top: 0;
	padding-left: 130px;
	font-size: 60px;
	line-height: 1.1;
}
.history1 li .year:after{
	display: block;
	content: "";
	position: absolute;
	left: .5em;
	top: .6em;
	width: 70px;
	height: 2px;
	background: #0C4592;
}
.history1 li .box{
	display: flex;
	padding: 1em;
	background: #f5f5f5;
	margin-bottom: 1em;
}
.history1 li .box .txt{
	flex: 1;
}
.history1 li .box .txt span{
	display: inline-block;
	padding: 0 .5em;
	margin-bottom: .5em;
	color: #fff;
	font-weight: bold;
	background: #26B9DE;
}
.history1 li .box figure{
	width: 35%;
	margin-left: 1em;
}
.history2{
	display: flex;
	justify-content: space-between;
}
.history2 li{
	width: 19%;
}
.history2 li a{
	display: block;
	padding: .5em .5em .5em 0;
	color: #0C4592;
	text-align: center;
	background: url(../img/arrow-bottom.svg) right .5em center no-repeat;
	border: 1px solid #0C4592;
}
.history2 li a:hover{
	opacity: 1;
	background-color: #ddd;
}
.history2 li.active a{
	color: #fff;
	background: #0C4592;
}
.history2 li.active a:hover{
	background-color: #0C4592;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.history1 li{
		padding-left: 2.5em;
	}
	.history1 li:before{
		width: 1.5em;
		height: 1.5em;
	}
	.history1 li .bar{
		left: .3em;
		width: .9em;
	}
	.history1 li .year{
		position: static;
		padding-left: .5em;
		margin-bottom: .2em;
		font-size: 10.6vw;
	}
	.history1 li .year:after{
		width: .6em;
		height: .05em;
	}
	.history1 li .box{
		line-height: 1.5;
	}
	.history1 li .box figure{
		width: 35%;
	}
	.history2{
		flex-wrap: wrap;
	}
	.history2 li{
		width: 48.5%;
		margin-bottom: 3%;
	}
}



/*--------------------------
	location/
---------------------------*/
.location1{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3em;
}
.location1 li{
	width: 18.5%;
}
.location1 li a{
	display: block;
	padding: .5em;
	color: #fff;
	text-align: center;
	background: url(../img/arrow-bottom-white.svg) right 1em center no-repeat #0C4592;
	border: 1px solid #0C4592;
}
.location1 li a:hover{
	opacity: 1;
	color: #0C4592;
	background: url(../img/arrow-bottom.svg) right 1em center no-repeat #fff;
}
.location2{
	margin-bottom: 5em;
}
.location2 .ttlbox{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.location2 .ttlbox .iconlist{
	display: flex;
	margin-bottom: 1em;
}
.location2 .ttlbox .iconlist li{
	margin-left: .5em;
}
.location2 .ttlbox .iconlist li img{
	display: block;
	margin: 0 auto .5em;
}
.location2 .ttlbox .iconlist li span{
	display: none;
}
.location2 .box{
	display: flex;
	justify-content: space-between;
}
.location2 .box figure{
	width: 45%;
}
.location2 .box .rightcol{
	width: 50%;
}
.location2 .box .rightcol table{
	width: 100%;
	font-size: 16px;
	border-top: 1px solid #D9D9D9;
}
.location2 .box .rightcol table th{
	width: 7em;
	line-height: 1.5;
	padding: 1em 0;
	border-bottom: 1px solid #D9D9D9;
}
.location2 .box .rightcol table td{
	padding: 1em 0;
	border-bottom: 1px solid #D9D9D9;
}
.location2 .box .rightcol table td a.telnumber{
	display: inline-block;
	padding-left: 1.5em;
	margin: 0 .5em;
	background: url(../img/ic-tel2.svg) left center no-repeat;
}
.location2 .box .rightcol table td .soukolist{
	display: flex;
	flex-wrap: wrap;
	padding-top: .5em;
}
.location2 .box .rightcol table td .soukolist a{
	display: inline-block;
	min-width: 10em;
	font-size: 16px;
	padding: .2em 1.5em .2em 1em;
	margin: 0 .5em .5em 0;
	text-align: center;
	background: url("../img/arrow-right.svg") right .5em center no-repeat;
	border: 1px solid #0C428C;
}
.location2 .box .rightcol table td .soukolist a:hover{
	opacity: 1;
	background-color: #ddd;
}
.location2 .box .rightcol table td .soukolist a small{
	font-size: 14px;
}
.location3{
	margin-bottom: 5em;
}
.location3 .ttlbox{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.location3 .ttlbox .iconlist{
	display: flex;
	margin-bottom: 1em;
	text-align: center;
}
.location3 .ttlbox .iconlist li{
	margin-left: .5em;
}
.location3 .ttlbox .iconlist li img{
	display: block;
	margin: 0 auto .5em;
}
.location3 .ttlbox .iconlist li span{
	display: none;
}
.location3 .photolist{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 2em;
}
.location3 .photolist img{
	width: 31%;
	margin-bottom: 3%;
}
.location3 table{
	width: 100%;
}
.location3 table.topline{
	border-top: 1px solid #D9D9D9;
}
.location3 table th{
	width: 210px;
	padding: 1em 0;
	border-bottom: 1px solid #D9D9D9;
}
.location3 table td{
	padding: 1em 0;
	border-bottom: 1px solid #D9D9D9;
}
.location3 table td a.telnumber{
	display: inline-block;
	padding-left: 1.5em;
	margin: 0 .5em;
	background: url(../img/ic-tel2.svg) left center no-repeat;
}
.location3 table td .soukolist{
	display: flex;
	flex-wrap: wrap;
	padding-top: .5em;
}
.location3 table td .soukolist a{
	display: inline-block;
	min-width: 10em;
	font-size: 16px;
	padding: .2em 1.5em .2em 1em;
	margin: 0 .5em .5em 0;
	text-align: center;
	background: url("../img/arrow-right.svg") right .5em center no-repeat;
	border: 1px solid #0C428C;
}
.location3 table td .soukolist a:hover{
	opacity: 1;
	background-color: #ddd;
}
.location3 table td .soukolist a small{
	font-size: 14px;
}
.location3 .iconlist2{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.location3 .iconlist2 li{
	display: flex;
	align-items: center;
	width: 32.5%;
	min-height: 3.5em;
	margin-right: 1.25%;
	margin-bottom: 1.25%;
	padding: .8em 2em;
	background: #eee;
}
.location3 .iconlist2 li:nth-child(3n){
	margin-right: 0;
}
.location3 .iconlist2 li img{
	width: 40px;
	margin-right: 1em;
}
.location3 .iconlist2 li span{
	display: block;
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
}
.location3 .map iframe{
	width: 100%;
	height: 400px;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.location1{
		flex-wrap: wrap;
		margin-bottom: 2em;
	}
	.location1 li{
		width: 48.5%;
		margin-bottom: .5em;
	}
	.location1 li a{
		padding: .2em;
		background-size: .7em auto;
	}
	.location2 .ttlbox{
		display: block;
	}
	.location2 .ttlbox .iconlist{
		display: flex;
		margin-bottom: 2em;
	}
	.location2 .ttlbox .iconlist li{
		margin-left: 0;
		margin-right: .5em;
	}
	.location2 .ttlbox .iconlist li img{
		display: block;
		margin: 0 auto .5em;
	}
	.location2 .box{
		display: block;
	}
	.location2 .box figure{
		width: auto;
	}
	.location2 .box .rightcol{
		width: auto;
	}
	.location2 .box .rightcol img{
		width: 49%;
	}
	.location2 .box .rightcol table th{
		display: block;
		width: auto;
		padding: 1em 0 0;
		border-bottom: none;
	}
	.location2 .box .rightcol table td{
		display: block;
		padding: .5em 0 1em;
	}
	.location2 .box .rightcol td a.telnumber{
		background-size: 4.5vw auto;
	}
	.location2 .box .rightcol td .soukolist a{
		font-size: 3.73vw;
		background-size: 1.8vw auto;
	}
	.location2 .map iframe{
		width: 100%;
		height: 80vw;
	}
	.location3 .ttlbox{
		display: block;
	}
	.location3 .ttlbox .iconlist{
		display: flex;
		margin-bottom: 1em;
		text-align: center;
	}
	.location3 .ttlbox .iconlist li{
		margin-left: 0;
		margin-right: .5em;
	}
	.location3 .ttlbox .iconlist li img{
		width: 8vw;
	}
	.location3 .ttlbox .iconlist li span{
		display: none;
	}
	.location3 .photolist{
		margin-bottom: 1em;
	}
	.location3 .photolist img{
		width: 47%;
		margin-bottom: 6%;
	}
	.location3 table th{
		display: block;
		width: auto;
		padding: 1em 0 0;
		border-bottom: none;
	}
	.location3 table td{
		display: block;
		padding: .5em 0 1em;
	}
	.location3 table td a.telnumber{
		background-size: 4.5vw auto;
	}
	.location3 table td .soukolist a{
		font-size: 3.73vw;
		background-size: 1.8vw auto;
	}
	.location3 table td .soukolist a:hover{
		background-color: #fff;
	}
	.location3 table td .soukolist a small{
		font-size: 3.2vw;
	}
	.location3 .iconlist2{
		display: block;
	}
	.location3 .iconlist2 li{
		width: auto;
		height: auto;
		min-height: 4.5em;
		margin-right: 0;
		margin-bottom: .5em;
		padding: .5em 2em;
		background: #eee;
	}
	.location3 .iconlist2 li:nth-child(3n){
		margin-right: 0;
	}
	.location3 .iconlist2 li img{
		width: 10.66vw;
	}
	.location3 .iconlist2 li span{
		font-size: 3.73vw;
	}
	.location3 .map iframe{
		height: 60vw;
	}
}



/*--------------------------
	service/
---------------------------*/
.service1 ul{
	display: flex;
	justify-content: space-between;
}
.service1 ul li{
	width: 32%;
	margin-bottom: 10px;
}
.service1 ul li a{
	display: block;
	background: #EDF2F7;
}
.service1 ul li a div{
	padding: 20px 20px 20px 120px;
	text-align: left;
}
.service1 ul li a.box1 div{
	background: url("../img/top5-ic1.svg") left 20px center no-repeat;
}
.service1 ul li a.box2 div{
	background: url("../img/top5-ic2.svg") left 20px center no-repeat;
}
.service1 ul li a.box3 div{
	background: url("../img/top5-ic3.svg") left 20px center no-repeat;
}
.service1 ul li a div .ttl{
	margin-bottom: .5em;
	font-size: 20px;
	line-height: 1.2;
}
.service1 ul li a div .ttl span{
	color: #5F6F85;
	font-size: 13px;
	letter-spacing: .05em;
}
.service1 ul li a div .txt{
	line-height: 1.4;
}
.service2{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3em;
}
.service2 li{
	width: 32%;
}
.service2 li a{
	display: block;
	padding: .5em;
	color: #0C4592;
	text-align: center;
	background: url(../img/arrow-right.svg) right 1em center no-repeat;
	border: 1px solid #0C4592;
}
.service2 li a:hover{
	opacity: 1;
	background-color: #ddd;
}
.service2 li.active a{
	color: #fff;
	background: #0C4592;
}
.service2 li.active a:hover{
	background-color: #0C4592;
}
.service3{
	display: flex;
	align-content: center;
}
.service3 dl{
	width: 55%;
	padding-right: 5%;
	padding-bottom: 2em;
	text-align: right;
}
.service3 dl dt{
	display: inline-block;
	margin-bottom: 1em;
	width: 100%;
	max-width: 500px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
}
.service3 dl dd{
	display: inline-block;
	width: 100%;
	max-width: 500px;
	text-align: left;
}
.service3 figure{
	flex: 1;
}
.service3 figure.transportation{
	background: url(../img/service2-transportation.jpg) center / cover no-repeat;
}
.service3 figure.safekeeping{
	background: url(../img/service2-safekeeping.jpg) center / cover no-repeat;
}
.service3 figure.logistics{
	background: url(../img/service2-logistics.jpg) center / cover no-repeat;
}
.service4{
	padding-top: 80px;
	padding-bottom: 80px;
}
.service4 .box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
.service4 .box dl{
	width: 55%;
	text-align: left;
}
.service4 .box dl dt{
	margin-bottom: .5em;
	padding-left: 1em;
	font-size: 24px;
	font-weight: 500;
	position: relative;
}
.service4 .box dl dt:after{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: .5em;
	height: .5em;
	background: #0C4592;
}
.service4 .box figure{
	width: 40%;
}
.service5{
	display: flex;
	flex-wrap: wrap;
	padding-top: 80px;
	padding-bottom: 80px;
}
.service5 dl{
	width: 50%;
	text-align: left;
}
.service5 dl dt,
.service6 dl dt{
	font-size: 24px;
	font-weight: 500;
}
.service5 dl dd,
.service6 dl dd{
	padding-left: 1em;
	position: relative;
}
.service5 dl dd:after,
.service6 dl dd:after{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .9em;
	width: .4em;
	height: .4em;
	background: #0C4592;
	border-radius: 50%;
}
.service6{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.service6 dl{
	width: 45%;
	text-align: left;
}
.service6 figure{
	width: 50%;
	text-align: left;
}
.reservation1{
	padding-top: 4em;
	padding-bottom: 5em;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.service1 ul{
		display: block;
	}
	.service1 ul li{
		width: auto;
		margin-bottom: 5vw;
	}
	.service1 ul li a{
		display: block;
		background: #EDF2F7;
	}
	.service1 ul li a div{
		width: auto;
		padding: 6vw 0 6vw 27vw;
		background-size: 15vw !important;
		background-position: left 7vw center !important;
	}
	.service1 ul li a div .ttl{
		font-size: 5.33vw;
	}
	.service1 ul li a div .ttl span{
		font-size: 3.46vw;
	}
	.service2{
		display: block;
		margin-bottom: 3em;
	}
	.service2 li{
		width: auto;
		margin-bottom: .8em;
	}
	.service2 li a:hover{
		background-color: #fff;
	}
	.service3{
		display: block;
	}
	.service3 dl{
		width: auto;
		padding: 0 5% 2em;
		text-align: left;
	}
	.service3 dl dt{
		max-width: inherit;
		font-size: 5.33vw;
	}
	.service3 dl dd{
		max-width: inherit;
	}
	.service3 figure{
		background: none;
	}
	.service4{
		padding-top: 15vw;
		padding-bottom: 5vw;
	}
	.service4 .box{
		display: block;
		margin-bottom: 3em;
	}
	.service4 .box dl{
		width: auto;
		margin-bottom: 1em;
	}
	.service4 .box dl dt{
		font-size: 5.33vw;
	}
	.service4 .box figure{
		width: auto;
	}
	.service5{
		display: block;
		padding-top: 10vw;
		padding-bottom: 10vw;
	}
	.service5 dl{
		width: auto;
		margin-bottom: 1em;
	}
	.service5 dl dt,
	.service6 dl dt{
		font-size: 5.33vw;
	}
	.service6{
		display: block;
	}
	.service6 dl{
		width: auto;
		margin-bottom: 2em;
	}
	.service6 figure{
		width: auto;
		margin-bottom: 2em;
	}
}



/*--------------------------
	feature/
---------------------------*/
.feature1 li{
	height: 100vh;
	padding: 100px 5%;
	text-align: left;
}
.feature1 li.img1{
	background: url(../img/feature1-img1.jpg) center / cover no-repeat fixed;
}
.feature1 li.img2{
	background: url(../img/feature1-img2.jpg) center / cover no-repeat fixed;
}
.feature1 li.img3{
	background: url(../img/feature1-img3.jpg) center / cover no-repeat fixed;
}
.feature1 li.img4{
	background: url(../img/feature1-img4.jpg) center / cover no-repeat fixed;
}
.feature1 li.img5{
	background: url(../img/feature1-img5.jpg) center / cover no-repeat fixed;
}
.feature1 li.img6{
	background: url(../img/feature1-img6.jpg) center / cover no-repeat fixed;
}
.feature1 li img{
	float: left;
	margin-right: 2em;
}
.feature1 li p{
	display: flex;
	align-items: center;
	height: 230px;
	padding: 1em 2em;
	color: #fff;
	overflow: hidden;
	background: rgba(0,0,0,.5);
}
.feature1 li:nth-child(5) p,
.feature1 li:nth-child(6) p{
	height: 200px;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.feature1 li{
		padding: 15vw 5%;
		background-attachment: scroll!important;
	}
	.feature1 li img{
		float: none;
		margin-right: 0;
		margin-bottom: 1em;
		width: 50%;
	}
	.feature1 li:nth-child(5) img,
	.feature1 li:nth-child(6) img{
		width: 100%;
	}
	.feature1 li p{
		display: block;
		height: auto!important;
	}
}



/*--------------------------
	contact/
---------------------------*/
.contact1{
	padding: 40px;
	background: #eee;
}
.contact1 a{
	display: inline-block;
	padding-left: 55px;
	font-size: 60px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	background: url(../img/ic-tel.svg) left center no-repeat;
}
.contact1 p{
	padding-top: .5em;
	font-size: 16px;
	line-height: 1.5;
}
.contact2{
	width: 100%;
	text-align: left;
	border-top: 1px solid #ccc;
}
.contact2 th{
	width: 16em;
	padding: 1em 0;
	border-bottom: 1px solid #ccc;
	position: relative;
}
.contact2 th em{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.contact2 td{
	padding: 1em;
	border-bottom: 1px solid #ccc;
}
.contact2 td input::placeholder{
	color: #0C4592;
	opacity: .4;
}
.contact2 td .error{
	padding-top: .5em;
	color: #c00;
	font-size: 14px;
	font-weight: 500;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.contact1{
		padding: 2em 0 1.5em;
	}
	.contact1 a{
		padding-left: 12vw;
		font-size: 10.66vw;
		background-size: 9vw auto;
	}
	.contact1 p{
		font-size: 3.73vw;
	}
	.contact2{
		font-size: 16px;
	}
	.contact2 th{
		display: block;
		width: auto;
		padding: 1em 0 0;
		border-bottom: none;
	}
	.contact2 td{
		display: block;
		padding: .5em 0 1em;
		border-bottom: 1px solid #ccc;
	}
	.contact2 td select{
		width: 100%;
	}
	.contact2 td .error{
		padding-top: .5em;
		color: #c00;
		font-size: 14px;
		font-weight: 500;
	}
}



/*--------------------------
	safety/
---------------------------*/
.safety1{
	display: flex;
	justify-content: space-between;
}
.safety1 figure{
	width: 35%;
}
.safety1 p{
	width: 60%;
}
.safety2 li a{
	display: inline-block;
	padding: .7em 1em .7em 3em;
	margin-bottom: .5em;
	line-height: 1.5;
	background: #eee;
	position: relative;
}
.safety2 li a img{
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.safety1{
		display: block;
	}
	.safety1 figure{
		width: auto;
		margin-bottom: 1.5em;
	}
	.safety1 p{
		width: auto;
	}
	.safety2 li a{
		display: inline-block;
		padding: .7em 1em .7em 3em;
		margin-bottom: .5em;
		line-height: 1.5;
		background: #eee;
		position: relative;
	}
	.safety2 li a img{
		position: absolute;
		left: 1em;
		top: 50%;
		transform: translateY(-50%);
	}
}



/*--------------------------
	faq/
---------------------------*/
.faq1{
	text-align: left;
	position: relative;
}
.faq1 dt{
	padding: .8em 4em;
	line-height: 1.7;
	background: #eee;
	position: relative;
	cursor: pointer;
}
.faq1 dt:before{
	display: inline-block;
	content: "Q";
	position: absolute;
	left: 1.5em;
	top: .7em;
	color: #0C4592;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}
.faq1 dt span{
	display: inline-block;
	position: absolute;
	right: 2em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5em;
	height: 1.5em;
	background: #0C4592;
	border-radius: 50%;
}
.faq1 dt span:before{
	display: inline-block;
	content: "";
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translate(50%,-50%);
	width: .8em;
	height: 1px;
	background: #fff;
}
.faq1 dt span:after{
	display: inline-block;
	content: "";
	position: absolute;
	right: calc(50% + 1px);
	top: 50%;
	transform: translate(50%,-50%);
	width: 1px;
	height: .8em;
	background: #fff;
}
.faq1 dt.active span:after{
	display: none;
}
.faq1 dd{
	display: none;
	color: #0C4592;
	padding: 1em 0 1em 4em;
	position: relative;
}
.faq1 dd:before{
	display: inline-block;
	content: "A";
	position: absolute;
	left: 1.5em;
	top: 1em;
	color: #0C4592;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.faq1 dt{
		padding: .6em 3em;
	}
	.faq1 dt:before{
		left: .8em;
		top: .4em;
		font-size: 5.33vw;
	}
	.faq1 dt span{
		right: 1em;
	}
	.faq1 dd{
		padding: 1em 0 1em 3em;
	}
	.faq1 dd:before{
		left: .8em;
		top: 1em;
		font-size: 5.33vw;
	}
}
/* pager */
.pager{
	clear: both;
	text-align: center;
	margin-bottom: 50px;
}
.pager li{
	display: inline-block;
	margin: 0 5px;
}
.pager li a{
	display: block;
	line-height: 2;
	width: 2em;
	color: #fff;
	font-size: 16px;
	background: #0C4592;
	border: 1px solid #0C4592;
}
.pager li.active a{
	color: #0C4592;
	background: #fff;
	border: 1px solid #0C4592;
}

@media screen and (max-width:768px){
	/* pager */
	.pager li a{
		font-size: 14px;
	}
}