@charset "utf-8";
/*
	Last Update:2021/05/10
	Auther: okada
*/

/*===================================================================
	#service
===================================================================*/
.service_unit {}
.service_unit .image { position:relative; }
.service_unit .image:after { content:""; position:absolute; bottom:0; width:1px; height:1px; border-bottom:30px solid #fff; border-top:30px solid transparent; }
.service_unit .image:not(._right):after { right:0; border-right:30px solid #fff; border-left:30px solid transparent; }
.service_unit .image._right:after { left:0; border-left:30px solid #fff; border-right:30px solid transparent; }
.service_unit .text { padding-left:15px; padding-right:15px; }
.service_unit .text .line { position:relative; border-top:2px solid #ddd; }
.service_unit .text .line:after { position: absolute; content:""; display: block; border-top: solid 3px #114FA2; top: -1px; width:25%; max-width:200px; }
.service_unit .text .hl { font-weight:bold; }
.service_unit .text .hl .num { color:#114FA2; display: block; font-size:1.55em; }
.service_unit .text .hl .title { font-weight:bold; font-size:2em; }
.service_unit .text .hl .title a { display:inline-block; line-height:100%; }
.service_unit .text .hl .title a:after { content:"\f054"; color:#114FA2; margin-left:20px; font-size:0.65em; display:inline-block; padding:0 0 5px; vertical-align:middle; }
body.pc .service_unit .text .hl .title a:hover { color:#114FA2; }

.service_unit:before { position: absolute; left: 0; width:100%; text-align:center; font-family:"Anton", sans-serif; z-index: 10; line-height:120%; color:#54A3CA; opacity:0.2; font-weight:bold; white-space:nowrap; }
.service_unit._1:before { content:"Charter Transportation"; }
.service_unit._2:before { content:"Cooperative Distribution"; }
.service_unit._3:before { content:"Third-Party Logistics"; }
.service_unit._4:before { content:"Container Transport"; }
	@media (max-width: 575px){
		.service_unit:before { font-size:3em; bottom:0.5em; }
		.service_unit .text .line { padding-top:30px; margin-bottom:30px; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.service_unit:before { font-size:4em; bottom:0.25em; }
		.service_unit .text .line { padding-top:30px; margin-bottom:30px; }
	}
	@media (min-width: 768px){
		.service_unit:before { font-size:7em; bottom:10px; }
		.service_unit .text .line { padding-top:50px; }
	}
	@media (min-width:1200px){
		.service_unit .text:not(._left) { padding-right:calc((100vw - 1200px) / 2); }
		.service_unit .text._left { padding-left:calc((100vw - 1200px) / 2); }
	}

.service_main { position:relative; }
.service_main:before { position: absolute;  font-family:"Anton", sans-serif; z-index: 10; line-height:120%; color:#54A3CA; opacity:0.2; font-weight:bold; white-space:nowrap; }
#charter .service_main:before { content:"Charter Transportation"; }
#joint .service_main:before { content:"Cooperative Distribution"; }
#servive_3pl .service_main:before { content:"Third-Party Logistics"; }
#warehousing .service_main:before { content:"Storage & Warehouse"; }
	@media (max-width: 575px){
		.service_main:before { font-size:3em; right:0; bottom:0.5em; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.service_main:before { font-size:4.5em; right:0; bottom:0; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		.service_main:before { font-size:5.15em; right:0; bottom:-0.15em; }
	}
	@media (min-width: 992px) and (max-width:1199px){
		.service_main:before { font-size:6.5em; right:0; bottom:-0.15em; }
	}
	@media (min-width:1200px){
		.service_main { padding-left:calc((100vw - 1200px) / 2); }
		.service_main:before { font-size:7em; right:15px; bottom:-0.15em; }
	}

.tbl_1 { width:100%; }
.tbl_1 tr > * { vertical-align:middle; }
.tbl_1 thead th { background:#114fa2; color:#fff; font-weight:bold; padding:10px 0; text-align:center; }
.tbl_1 tbody tr > * { border:1px solid #ccc; }
.tbl_1 tbody th { background:#F5F5F5; }
	@media (max-width: 575px){
		.tbl_1 tbody tr > * { padding:15px 10px; }
		.tbl_1 tbody tr td { text-align:left; }
	}
	@media (min-width: 576px){
		.tbl_1 tbody tr > * { padding:15px 0; text-align:center; }
	}

.service_detail_wrapper { position:relative; }
.service_detail_wrapper .service_bg { position:fixed; left:0; width:100%; z-index:-1; }
.service_detail_wrapper .service_bg img { width:100%; }
	@media (max-width: 399px){
		.service_detail_wrapper { padding-top:100px; }
		.service_detail_wrapper .service_bg { top:60px; }
	}
	@media (min-width: 400px) and (max-width: 575px){
		.service_detail_wrapper { padding-top:140px; }
		.service_detail_wrapper .service_bg { top:40px; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.service_detail_wrapper { padding-top:180px; }
		.service_detail_wrapper .service_bg { top:3vw; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		.service_detail_wrapper { padding-top:240px; }
		.service_detail_wrapper .service_bg { top:0; }
	}
	@media (min-width: 992px){
		.service_detail_wrapper { padding-top:350px; }
	}
	@media (min-width: 992px) and (max-width:1199px){
		.service_detail_wrapper .service_bg { top:-4.5vw; }
	}
	@media (min-width:1200px) and (max-width:1439px){
		.service_detail_wrapper .service_bg { top:-12vw; }
	}
	@media (min-width:1440px) and (max-width:1599px){
		.service_detail_wrapper .service_bg { top:-20vw; }
	}
	@media (min-width:1600px) and (max-width:1919px){
		.service_detail_wrapper .service_bg { top:-25vw; }
	}
	@media (min-width:1920px){
		.service_detail_wrapper .service_bg { top:-30vw; }
	}



/*===================================================================
	#contact
===================================================================*/
#contact .contact_unit { border:5px solid #114FA2; margin-bottom:20px; }
#contact .contact_unit a { display:block; background: url(../image/contents/contact/back.png) no-repeat right bottom; }
#contact .contact_unit .title { padding:5px 0px 10px 60px; color: #114FA2; font-weight: bold; }
#contact .contact_unit._1 .title { background: url(../image/contents/contact/i1.png) no-repeat center left / 50px auto; }
#contact .contact_unit._2 .title { background: url(../image/contents/contact/i2.png) no-repeat center left / 50px auto; }
#contact .contact_unit._3 .title { background: url(../image/contents/contact/i3.png) no-repeat center left / 50px auto; }
#contact .contact_unit._4 .title { background: url(../image/contents/contact/i4.png) no-repeat center left / 50px auto; }
#contact .contact_unit._7 .title { background: url(../image/contents/contact/i7.png) no-repeat center left / 50px auto; }
@media (max-width: 575px){
		#contact .contact_unit a { padding:15px 20px; background-size:contain; }
		#contact .contact_unit .title { font-size:1.25em; }
		#contact_other { padding-left:0; padding-right:0; }
	}
	@media (min-width: 576px){
		#contact .contact_unit a { padding:30px 50px; background-size:auto 90%; }
		#contact .contact_unit .title { font-size:1.5em; }
	}

#body .box { box-shadow:0 0 3px rgba(0,0,0,0.2); border-radius:10px; padding:20px; }
#body a.box { display:block; font-weight:bold; font-size:1.25em; line-height:140%; }
#body a.box img { margin-right:15px; }
body.pc #body a.box:hover { color:#114fa2; }
#body .flat_box { padding:20px 30px; }
	@media (max-width: 575px){
		#body .flat_box { padding:20px 15px; }
	}

.tbl_form { width:100%; }
.tbl_form tr > * { vertical-align:middle; padding:15px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.tbl_form tbody th { background:#F5F5F5; }
.tbl_form tbody th label { display:inline-block; width:100%; position:relative; }
.tbl_form tbody th label .need { position:absolute; top:0; right:0; }
	@media (max-width: 575px){
		.tbl_form,
		.tbl_form tbody,
		.tbl_form tr,
		.tbl_form tr > * { display:block; width:100%; }
	}
a:link.contact_agree { text-decoration: underline; }

#contact_form .contact_ul { list-style: disc; list-style-position: inside; }
#contact_form .contact_ul li { color: #114FA2; }
#contact_form .contact_ul li span { color: #000; }


/*===================================================================
	#offices
===================================================================*/
article + article .offices_unit { border-top:10px solid #F5F5F5; }
	@media (max-width: 575px){
		.offices_unit .tbl_1 tbody th { width:100px; }
	}


/*===================================================================
	#branches
===================================================================*/
.tbl_2 { width:100%; }
.tbl_2 tr > * { vertical-align:middle; }
.tbl_2 tbody tr > * { padding:30px 20px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.tbl_2 tbody th { background:#F7F9FA; color:#027EEE; text-align:center; }
	@media (max-width: 575px){
		.tbl_2 tbody tr > * { padding:20px 10px; }
		.tbl_2 tbody th { width:100px; }
	}
	@media (min-width: 576px){
		.tbl_2 tbody tr > * { padding:30px 20px; }
		.tbl_2 tbody th { width:180px; }
	}

.branches_vehicle {}
.branches_vehicle dl { background:#f5f5f5; margin-bottom:15px; }
.branches_vehicle dt { background:#BEDDF9; text-align:center; }
.branches_vehicle dd { background:#f5f5f5; }
	@media (max-width: 575px){
		.branches_vehicle dt { padding:10px 0; }
		.branches_vehicle dd { padding:10px 7px; font-size:0.85em; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		.branches_vehicle dt { padding:10px 0; }
		.branches_vehicle dd { padding:10px 7px; }
	}
	@media (min-width: 768px){
		.branches_vehicle dl { display:table; width:100%; }
		.branches_vehicle dl > * { display:table-cell; vertical-align:middle; }
		.branches_vehicle dt { width:120px; }
		.branches_vehicle dd { padding:10px; }
	}


/*===================================================================
	#company
===================================================================*/
.photo_link_unit { position:relative; }
.photo_link_unit a { display:block; color:#fff; }
.photo_link_unit .photo {}
.photo_link_unit .text { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; padding:10px; }
.photo_link_unit .text .disp_tbl { border:1px solid #fff; }
.photo_link_unit .text .main { font-weight:bold; font-size:2.25em; }

.branches_link_unit { margin-bottom:30px; }
.branches_link_unit .photo { margin-bottom:10px; }
.branches_link_unit .text { text-align:center; }

.photo_unit { position:relative; margin-bottom:30px; }
.photo_unit figcaption { position:absolute; bottom:0; left:0; padding:5px 10px; }

.history_list { position:relative; margin:20px 0; overflow:hidden; }
.history_list:before { content:""; position:absolute; top:5px; width:1px; height:100%; border-left:1px solid #114fa2; }
.history_list .era { margin-bottom:30px; }
.history_list .era > span { display:inline-block; border-radius:30px; position:relative; left:-35px; width:70px; text-align:center; }
.history_list .unit { display:table; width:100%; margin-bottom:30px; }
.history_list .unit > * { display:table-cell; vertical-align:top; line-height:130%; }
.history_list .unit .hl { position:relative; text-align:right; color:#114fa2; }
.history_list .unit .hl:after { content:"●"; font-size:15px; color:#114fa2; position:absolute; right:-0.5em; top:0; }
.history_list .unit + .era { margin-top:50px; }
	@media (max-width: 575px){
		.history_list:before { left:95px; }
		.history_list .era { padding-left:95px; }
		.history_list .unit { font-size:0.9em; }
		.history_list .unit .hl { width:95px; padding-right:15px; }
		.history_list .unit .text { padding-left:15px; }
	}
	@media (min-width: 576px){
		.history_list:before { left:150px; }
		.history_list .era { padding-left:150px; }
		.history_list .unit .hl { width:150px; padding-right:30px; }
		.history_list .unit .text { padding-left:30px; }
	}

#sunqcom {}
.sunqcom_list { position:relative; }
.sunqcom_list:before { content:""; position:absolute; bottom:0; left:0; width:100%; height:70vw; max-height:400px; background:#edf6fa; }
.sunqcom_list > .center { position:relative; z-index:2; }
.sunqcom_list > .center:before { position:absolute; bottom:0; left:0; width:100%; z-index:-1; color:#fff; opacity:0.6; line-height:0.85em; font-family:"Anton", sans-serif; }
.sunqcom_list._1 > .center:before { content:"1"; }
.sunqcom_list._2 > .center:before { content:"2"; }
.sunqcom_list._3 > .center:before { content:"3"; }
	@media (max-width: 575px){
		.sunqcom_list:before { min-height:400px; }
		.sunqcom_list > .center:before { font-size:400px; }
	}
	@media (min-width: 576px){
		.sunqcom_list > .center:before { font-size:500px; }
	}


/*===================================================================
	#news
===================================================================*/
#news_detail {}
.news_files { margin-top:50px; }
.news_files + .news_files { margin-top:10px; }
.news_files a { color:#114fa2; }
body.pc .news_files a:hover { text-decoration:underline; }



/*===================================================================
	#solution
===================================================================*/
.solution_cat_unit { margin-bottom:35px; }
.solution_cat_unit a { display:block; box-shadow:0 0 5px rgba(0,0,0,0.2); }
.solution_cat_unit .photo {}
.solution_cat_unit .text { position:relative; display:table; width:100%; }
.solution_cat_unit .text:after { content:"\f054"; position:absolute; top:calc(50% - 0.5em); right:10px; color:#114FA2; }
.solution_cat_unit .text .disp_td { padding:15px; }

.case_img_slide { width:100%; max-width:850px; margin: 0 auto; }
#solution_case #case_image .img_back { padding-top:50%; }
#solution_case #case_image_thumbnail { margin-left:-5px; margin-right:-5px; }
#solution_case #case_image_thumbnail .img_back { padding-top:50%; margin:10px 5px; }
	@media (min-width: 576px) and (max-width: 991px){
		.case_img_slide { padding:0 50px;
	}