@font-face { font-family: 'Montserrat'; src: url('//www.zenrin.co.jp/lp/cls/fonts/Montserrat-Bold.ttf'); }

#logistics .PC { display: block; }
#logistics .SP { display: none; }

/* --  common  -------------------------------------- */

#logistics #bnr .inner,
#logistics #about .inner,
#logistics #problem .inner, 
#logistics #service .inner, 
#logistics #feature .inner, 
#logistics #price .inner, 
#logistics #flow .inner, 
#logistics #recommend .inner, 
#logistics #contact .inner,.contact_wrapper .inner { padding: 6.25rem 0; max-width: 1245px; margin: 0 auto; }
.contact_wrapper { margin-top: 60px; }
#logistics #feature, #recommend { background: #e8f4f6; }
#logistics .title,.contact_wrapper .title { text-align: center; }
#logistics .title span.subtitle,.contact_wrapper .title span.subtitle { font-family: 'Montserrat'; font-size: 24px; font-weight: bold; padding: 0 0 10px; color: #299e96; display: inline-block; }
#logistics .title h2,.contact_wrapper .title h3{ font-size: 2.75rem; line-height: 140%; }
#logistics .title h2 span { font-size: 2.75rem; color: #333; border-bottom: 3px solid #299e96; padding-bottom: 3px; }
#logistics #content { padding: 0 0 70px; }

#tab-navigation { display: none; }
.tab-panel-wrapper { padding-top: 0; }

/*   about  -------------------------------------- */

#logistics #about { text-align: center; }
#logistics #about .inner { padding-top:0; }
#logistics #about .elem-heading-lv2 .elem-heading-lv2__heading-container {padding-top: 0;}
#logistics #about .elem-heading-lv2 .elem-heading-lv2__heading-container::before { display: none; }
#logistics #about h2 { font-weight: 700; font-size:3rem; }
#logistics #about h2 span { background: linear-gradient(transparent 74%, #B3E5FE 74%) }
#logistics #about .elem-paragraph p { font-size:1.25rem; color: #333; margin: 16px; }
#logistics #about .elem-txt-list--horizontal .elem-txt-list__item { margin-left: 1.8rem; font-size:1.25rem; }
#logistics #about .elem-btn--center.elem-btn--larger { margin: 6rem 16px 0; }
#logistics #about .elem-btn--larger[data-content=decoration] .elem-btn__container { padding:1.25rem; }

/*   problem  -------------------------------------- */
#logistics #problem .background_glay { background: url(/product/category/img/iot_logistics/problem/bg.jpg) no-repeat center center / cover; }
#logistics #problem .background_skyblue { background: #e8f4f6; position: relative; }

#logistics #problem .prob_inner { padding: 100px 0 0; }
#logistics #problem .prob_inner .elem-heading-lv2 .elem-heading-lv2__heading-container::before { display: none; }
#logistics #problem .prob_inner h2 { font-weight: 700; text-align: center; font-size: 2.25rem; }
#logistics #problem .prob_inner h2 span { border-bottom: 3px solid #299e96; font-size: 2.25rem; }

#logistics #service .elem-heading-lv3 { margin-top:4rem; }
#logistics #service .elem-heading-lv3 .elem-heading-lv3__heading-container::before { display: none; }
#logistics #service .elem-heading-lv3 .elem-heading-lv3__heading-container { padding-left: 0; }
#logistics #service h3 { background-color: #0f837b; color: #fff; border-radius: 6px; text-align: center; padding: 6px 0; font-size: 1.75rem; }
#logistics #service h3 span.sub-title { display: block; font-size: 1rem; text-align: center; }

#logistics #problem .prob_inner:last-child { padding: 70px 0 100px; }

#logistics #problem .first_content ul { padding: 72px 0 30px; display: flex; position: relative; }
#logistics #problem .first_content li { text-align: center; font-weight: bold; padding: 0 32px; position: relative; width: calc(100% / 3); }
#logistics #problem .first_content li p { padding: 30px 0; font-size: 20px; }
#logistics #problem .first_content li h3 { display: block; position: absolute; top: -27px; left: 0; right: 0; }
#logistics #problem .first_content li h3 img { width: 180px; height: auto; }
#logistics #problem .child_content { padding: 52px 0 0; display: flex; justify-content: space-evenly; align-items: flex-end; }
#logistics #problem .child_content img { width: 49%; }
#logistics #problem .background_skyblue { position: relative; }
#logistics #problem .background_skyblue:after {
	content: '';
	background: url(/product/category/img/iot_logistics/problem/buttom_parts.png);
	width: 295px;
	height: 52px;
	position: absolute;
	top: 25px;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}

/*   service  -------------------------------------- */

#logistics #service .content ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 50px 0 0; }
#logistics #service .content li { width: 280px; margin: 0 15px 25px; box-shadow: 5px 5px 11px 4px #eaeaea; border-radius: 0 0 15px 15px;  -webkit-border-radius: 0 0 10px 10px; position: relative; }
#logistics #service .content li p.note { width: 110%; position: absolute; bottom: -65px; left: 50%; right: 50%; transform: translate(-50%, -50%); }

#logistics #service .content .text h3 { font-size: 24px; text-align: center; padding: 25px 0 20px; position: relative; }
#logistics #service .content .text h3:after {
	content: '';
	width: 40px;
	height: 2px;
	background: #299e96;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}
#logistics #service .content .text p { width: 210px; max-height: 130px; padding: 25px 0; margin: 0 auto; line-height: 200%; font-weight: bold; }
#logistics #service .content .text .btn { padding: 40px 0; text-align: center; }

#logistics #service .content .text .btn a {
	position: relative;
	color: #299e96;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #299e96;
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	padding: 12px 50px;
}
#logistics #service .content .text .btn a:after {
	content: url(/product/category/img/iot_logistics/service/arrow.png);
	display: inline-block;
	width: 6px;
	height: 9px;
	position: absolute;
	top: 25%;
	right: 10%;
}

#logistics #service .content p.note { font-size: 12px; font-weight: bold; text-align: right; padding: 20px 25px 0 0; }

/*   feature  -------------------------------------- */

#logistics #feature .content { padding: 45px 2px 0; }
#logistics #feature .content li { display: flex; flex-wrap: wrap; justify-content: center; }
#logistics #feature .content li:nth-of-type(even) { flex-direction: row-reverse; } 
#logistics #feature .content li .data { padding: 30px 60px; width: 620px; }
#logistics #feature .content li .data h3 { font-size: 1.88rem; padding: 16px 0; }
#logistics #feature .content li .data p { font-weight: bold; width: 490px; }

/*   price  -------------------------------------- */

#logistics #price { background: url(/product/category/img/iot_logistics/price/bg.jpg) no-repeat center center / cover; }
#logistics #price .short_title { color: #fff; }
#logistics #price .content { padding: 75px 0 0; }
#logistics #price .content .first { width: 600px; margin: 0 auto; background: #fff; border-radius: 15px;  -webkit-border-radius: 15px; position: relative; }
#logistics #price .content .first .short_title {
	background: #324fad;
	width: 460px;
	height: 50px;
	margin: 0 auto;
	text-align: center;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}
#logistics #price .content .short_title h4 { font-size: 20px; line-height: 50px; }
#logistics #price .content .first p { color: #324fad; font-size: 70px; text-align: center; line-height: 100%; padding: 40px 0 0; }
#logistics #price .content .first p span { font-size: 30px; font-weight: bold; }
#logistics #price .content .first p.note { font-size: 20px; font-weight: bold; padding: 0 0 30px; }
#logistics #price .content .first p.note span { color: #000; font-size: 12px; }
#logistics #price .content .plus { position: relative; padding: 40px 0; }
#logistics #price .content .plus:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 50px;
	background: #fff;
}
#logistics #price .content .plus:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 4px;
	background: #fff;
}

#logistics #price .content .other ul { display: flex; justify-content: center; padding: 25px 0 0; }
#logistics #price .content .other li {
	width: 370px;
	background: #fff;
	margin: 12px;
	text-align: center;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	position: relative;
}

#logistics #price .content .other li .short_title {
	width: 240px;
	height: 50px;
	margin: 0 auto;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}
#logistics #price .content .other li .short_title h4 { line-height: 50px; }
#logistics #price .content .other p { padding: 50px 0 0; font-size: 60px; line-height: 100%; }
#logistics #price .content .other p span { font-size: 30px; font-weight: bold; }
#logistics #content #price .content .other p.note { font-size: 12px; color: #1b1b1b; font-weight: bold; padding: 0 0 30px;}

#logistics #price .content .other li.red .short_title { background: #ff4c4a; }
#logistics #price .content .other li.red p { color: #ff4c4a; }
#logistics #price .content .other li.green .short_title { background: #38b931; }
#logistics #price .content .other li.green p { color: #38b931; }
#logistics #price .content .other li.orange .short_title { background: #ffad10; }
#logistics #price .content .other li.orange p { color: #ffab10; }

/*   flow  -------------------------------------- */

#logistics #flow .content .img { padding: 50px 0 0; text-align: center; }
#logistics #flow .content ul.parent { display: flex; justify-content: center; padding: 90px 0 0; }
#logistics #flow .content li.parent {
	width: 250px;
	height: 310px;
	box-shadow: 5px 5px 11px 4px #eaeaea;
	padding: 110px 0 0;
	margin: 0 26px;
	position: relative;
	text-align: center;
}
#logistics #flow .content li.parent img { position: absolute; top: 0; left: 50%; right: 50%; transform: translate(-50%, -50%); }
#logistics #flow .content li.parent h3 { font-size: 19px; position: relative; padding: 0 0 16px; margin-bottom: 16px; }
#logistics #flow .content li.parent h3:after {
	content: '';
	width: 40px;
	height: 2px;
	background: #299e96;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
}

#logistics #flow .content li.parent ul { display: flex; flex-direction: column; padding: 15px 20px 0 50px; }
#logistics #flow .content li.parent ul li { text-align: left; list-style: disc; font-weight: bold; }
#logistics #flow .content .btn { padding: 80px 0 0; text-align: center; }
#logistics #flow .content .btn a {
	position: relative;
	background: #299e96;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 25px 125px;
	border-radius: 40px; 
	-webkit-border-radius: 40px;
}
#logistics #flow .content .btn a:after { content: url(/product/category/img/iot_logistics/flow/arrow.png); width: 9px; height: 15px; position: absolute; top: 25%; right: 7%; }

/*   recommend  -------------------------------------- */

 #logistics #recommend .content { padding: 50px 0 0; }
#logistics #recommend .content table th:first-child { background: #69bbb5; height: 50px; }
#logistics #recommend .content table th {
	font-size: 18px;
	text-align: center;
	background: #9dd6d2;
	color: #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #c9c9c9;
	
}
#logistics #recommend .content table td:first-child { width: 240px; height: 140px; text-align: center; background: #edf4f3; }
#logistics #recommend .content table { border-collapse: separate; }
#logistics #recommend .content table td:first-child { border-left: 1px solid #c9c9c9; }
#logistics #recommend .content table td {
	width: 330px;
	background: #fff;
	border-right: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
	position: relative;
	font-weight: bold;
	padding: 20px;
}
#logistics #recommend .content table td.none span { display: block; height: 1px; width: 30px; border-bottom: 1px solid #000; margin: 0 auto; }
#logistics #recommend .content table td span { padding: 10px 0 0; display: block; font-size: 11px; line-height: 160%; }

/*   contact  -------------------------------------- */

#logistics #contact, .contact_wrapper { background: url(/product/category/img/iot_logistics/contact/bg.jpg) no-repeat center center / cover; }

#logistics #contact .content p,.contact_wrapper .content p{ font-size: 24px; font-weight: bold; color: #fff; text-align: center; padding: 50px 0; }
#logistics #contact .content .btn,.contact_wrapper .content .btn{ padding: 23px 0 0; text-align: center; }
#logistics #contact .content .btn a,.contact_wrapper .content .btn a{
	padding: 30px 230px;
	background: #ffa014;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	border-radius: 40px; 
	-webkit-border-radius: 40px;
	position: relative;
}

#logistics #contact .content .btn a:before,.contact_wrapper .content .btn a:before{
	content: url(/product/category/img/iot_logistics/contact/mail.png);
	width: 26px;
	height: 18px;
	position: absolute;
	top: 30%;
	left: 32%;
}
#logistics #contact .content .btn a:after,.contact_wrapper .content .btn a:after{
	content: url(/product/category/img/iot_logistics/contact/arrow.png);
	width: 9px;
	height: 15px;
	position: absolute;
	top: 30%;
	right: 12%;
}

.merit { margin: 0 16px 32px; font-size: 1.125rem; color: #333 !important; }
.merit li { margin-bottom: 8px; }
.merit li span { color: #333 !important; }
.merit .elem-txt-list .elem-txt-list__item>div::before { background: #009e96; }
.back-to-logi .elem-txt-list--column-4>div { max-width: 100%; }

@media screen and (max-width: 1050px){
	#logistics #flow .content .img img { padding: 0 !important; width: 80%; }
	#logistics #flow .content li.parent { margin: 5px; }
	#logistics #flow .content li.parent img { width: 100px; height: 100px; }
	#logistics #flow .content li.parent h3 { font-size: 16px; }
	#logistics #flow .content li.parent ul li { font-size: 12px; }
}

/* ////  mobile  ////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 768px){
	#logistics #content { padding: 0 0 60px; }

	#logistics .PC { display: none; }
	#logistics .SP { display: block; }

	#logistics #bnr .inner,
	#logistics #movie .inner,
	#logistics #problem .inner,
	#logistics #service .inner,
	#logistics #feature .inner,
	#logistics #price .inner,
	#logistics #flow .inner,
	#logistics #recommend .inner,
	#logistics #contact .inner,.contact_wrapper .inner { padding: 3.75rem 16px; max-width: none; margin: 0 auto; }
	#logistics .title span.subtitle,.contact_wrapper .title span.subtitle{ padding: 0 0 5px; font-size: 16px; }
	#logistics .title h2 { font-size: 2rem; }
	#logistics .title h2 span { font-size: 2rem; }

	#logistics #about h2 { font-size: 2rem; }
	#logistics #about .elem-txt-list--horizontal .elem-txt-list__item { margin-left:0; }

	#logistics { min-width: 0; }

	#logistics .elem-paragraph p, #logistics .elem-btn__holder { font-size: 1.18rem; }
	#logistics #service .elem-btn .elem-btn__container { max-width: 100%; }

	/*   problem  -------------------------------------- */

	#logistics #problem .first_content li img, #logistics #problem .first_content li h3 img, #logistics #problem .child_content img { width: 100%; height: auto; }
	#logistics #problem .first_content li h3 { top: -5px; width: 170px; margin: 0 auto; }
	#logistics #problem .first_content ul { padding: 40px 0 0; flex-direction: column; }
	#logistics #problem .first_content ul:after { content: ''; }
	#logistics #problem .first_content li { padding: 20px 0; width: 100%; }
	#logistics #problem .first_content li:last-child { padding-bottom: 0; }
	#logistics #problem .first_content li p { padding: 15px 0 30px; font-size: 16px; }
	#logistics #problem .first_content li:last-child p { padding-bottom: 0; }
	#logistics #problem .child_content { text-align: center; flex-direction: column; }
	#logistics #problem .child_content img:first-child { padding-bottom: 30px; }
	#logistics #problem .child_content img { width: 100%; height: auto; padding: 0 25px; }
	
	#logistics #problem .sec_content { padding: 90px 16px 0; }
	#logistics #problem .prob_inner:last-child { padding: 0 0 60px; }
	#logistics #problem .background_glay { background: #d7d6dc; position: relative; }	
	#logistics #problem .background_skyblue:after { display: none; }
	#logistics #problem .bottom_parts { z-index: 5; position: absolute; bottom: -77px; left: 50%; right: 50%; transform: translate(-50%, -50%); }
	#logistics #problem .prob_inner h2,#logistics #problem .prob_inner h2 span { font-size: 2rem; }

	/*   service  -------------------------------------- */
	
	#logistics #service .content ul { flex-direction: column; align-items: center; padding: 40px 0 20px; }
	#logistics #service .content li { width: 100%; margin: 0 0 50px; }
	#logistics #service .content li:last-child { margin: 0 0 20px; }
	#logistics #service .content li img { width: 100%; }
	#logistics #service .content p.note { width: 350px; margin: 0 auto; text-align: center; padding: 0; }
	#logistics #service .content .text h3 { font-size: 20px; }
	#logistics #service .content .text p { width: 300px; height: 170px; font-size: 16px; line-height: 170%; }
	#logistics #service .content .text .btn { padding: 0 0 40px; }
	#logistics #service .content .text .btn a { padding: 15px 90px; font-size: 14px; }
	#logistics #service h3 { font-size:1.68rem; }
	
	/*   feature  -------------------------------------- */
	
	#logistics #feature .content li { display: block; padding: 0 0 30px; width: 100%; margin: 0 auto; }
	#logistics #feature .content li:nth-of-type(even) { flex-direction: column; }
	#logistics #feature .content li:last-child { padding-bottom: 0; }
	#logistics #feature .content li .data { padding: 30px 0 0; width: 100%; }
	#logistics #feature .content li img { width: 100%; height: auto; }
	#logistics #feature .content li .data img { width: 80px; }
	#logistics #feature .content li .data p { width: auto; font-size: 1.18rem; }
	#logistics #service .content li p.note { bottom: -50px;}
	
	/*   price  -------------------------------------- */
	
	#logistics #price .content .first { width: 340px; }
	#logistics #price .content .first .short_title { width: 250px; }
	#logistics #price .content .other ul { flex-direction: column; align-items: center; padding: 0; }
	#logistics #price .content .other li { margin: 30px 0; width: 350px; }
	#logistics #price .content .other li:last-child { margin-bottom: 0; }
	#logistics #price .content .first p { font-size: 45px; }
	#logistics #price .content .first p.note { font-size: 18px; }
	#logistics #price .content .other p { font-size: 35px; padding: 40px 0 5px; }
	#logistics #price .content .other p span { font-size: 20px; }
	#logistics #price .content .short_title h4 { font-size: 18px; }
	#logistics #content #price .content .other p.note { padding: 0 0 25px; }
	
	/*   flow  -------------------------------------- */
	
	#logistics #flow .content ul.parent {
		background: url(/product/category/img/iot_logistics/flow/parts_line_sp.png) no-repeat left 120px;
		background-size: auto 86%;
		flex-direction: column;
		align-items: center;
		padding: 30px 0 0 100px;
		position: relative;
		max-width: 500px;
		margin: 0 auto;
	}
	
	#logistics #flow .content li.parent { width: 100%; margin: 30px 0; height: 240px; padding: 60px 0 0; }
	#logistics #flow .content li.parent img { width: 80px; height: 80px; }
	#logistics #flow .content .btn { padding: 40px 0 0; }
	#logistics #flow .content .btn a { padding: 16px 60px; font-size: 18px; }
	#logistics #flow .content li.parent h3 { font-size: 20px; }
	#logistics #flow .content li.parent ul li { font-size: 16px; }
	
	/*   recommend  -------------------------------------- */
	#logistics #recommend table { width: 1000px; }
	#logistics #recommend .content { overflow: auto; }
	#logistics #recommend .content table td { padding: 15px; font-size: 14px; }
	
	/*   contact  -------------------------------------- */
	#logistics #contact .content p,.contact_wrapper .content p{ font-size: 16px; }
	#logistics #contact .content .btn a,.contact_wrapper .content .btn a{ padding: 15px 100px; font-size: 18px; }
	#logistics #contact .content .btn a:before,.contact_wrapper .content .btn a:before{ top: 23%; left: 21%; }
	#logistics #contact .content .btn a:after,.contact_wrapper .content .btn a:after{ top: 23%; right: 8%; }
}