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

.top {
	margin: 40px auto 0;
	padding-bottom: 60px;
	position: relative;
}

.top h1{
	position: absolute;
	bottom:0;
	right: 0;
	font-size: 0.8em !important;
	font-weight: normal;
	color: #0D0D0D !important;
	border-bottom: none;
	padding:0;
}

.sec-ttl{
	display: block;
	margin: 60px auto 20px;
	text-align: center;
	font-family: "Kozuka Mincho Pro", "Kozuka Mincho Std", "小塚明朝 Pro R", "小塚明朝 Std R", "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	color: #11116e;
}
.sec-ttl + p{text-align: center;}
.top h2{
	font-weight: inherit;
	font-size: 30px;
	padding-left: 0 !important;
	border-left: none !important;
	background-color: inherit !important;
	color: #11116e !important;
}
section{
	margin: 20px 0;
}

.network-box dl{ 
	border: 1px solid #ccc;
	background-color: #ffffff;
	text-align: center;
}
.network-box dt{ 	
	background-color: #ccc;
}
.network-box dd{ 
	margin: 0 !important;
	padding: 10px;
}
.network-box .offices-img img{ width: 100%;}

.intervew-box .txt{
	position: relative;
}
.intervew-box .txt h3{
	background-color: #148b5d;	
	color: #fff;
	font-size: 1.2em;
	margin: 0 0 10px;
	padding: 10px;
	font-family: "Kozuka Mincho Pro", "Kozuka Mincho Std", "小塚明朝 Pro R", "小塚明朝 Std R", "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.intervew-box .txt h3 +p:first-letter{
	font-size: 2.0em;
}
.intervew-box .txt .link{
	background-color: #148b5d;
	padding: 5px 30px;
	border-radius: 16px;
	text-align: right;
}
.intervew-box .txt .link:hover{ opacity: 0.8;}
.intervew-box .txt .link a{
	position: relative;	
	color: #fff;
	padding-right: 5px
}
.intervew-box .txt .link a:after{
	position: absolute;
	content: "▼";
	transform: rotate( -90deg);
	-webkit-transform: rotate( -90deg);
	font-size: 0.6em;
	right: -15px;
    top: 2px;
}
.intervew-box .photo {
	position: relative;
}
.intervew-box .photo img{
	width: 100%;
}
.intervew-box .photo .cap{
	right: 0;
	position: absolute;
	background-color: rgba(20,139,93,0.6);
	text-align: center;
	font-family: "Kozuka Mincho Pro", "Kozuka Mincho Std", "小塚明朝 Pro R", "小塚明朝 Std R", "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.intervew-box .photo .cap .post{ font-size: 1.2em; padding-top:10px;}
.intervew-box .photo .cap .name{ font-size: 2.0em; padding-bottom:10px;}
.intervew-box .photo .cap .name-en{ 
	font-size: 2.2em;
	opacity: 0.6;
	width: 100%;
	color: #fff;
}


.news-box ul{
	border-top: 1px solid #11116e;
}
.news-box ul li{
	border-bottom: 1px solid #11116e;
	padding: 7px 10px;	
}
.news-box ul li time{
	margin:10px;
}
.news-box ul li a{
	text-decoration: underline;
	position: relative;
}
.news-box ul li a::after{
	position: absolute;
	content: "▼";
	transform: rotate( -90deg);
	-webkit-transform: rotate( -90deg);
	font-size: 0.6em;
	bottom: 4px;
	right: -12px;
}
.news-box ul li a:hover{
	text-decoration: none;
}

.service-box a{ opacity: inherit;}
.service-box li{
	box-sizing: border-box;
	display: table;
	border: 1px solid #11116e;
}

.service-box li.warehouse {
	background: url(../images/s-icn-warehouse-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.packing {
	background: url(../images/s-icn-packing-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.delivery {
	background: url(../images/s-icn-delivery-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.moving {
	background: url(../images/s-icn-moving-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.carcarrier {
	background: url(../images/s-icn-carcarrier-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.cargo {
	background: url(../images/s-icn-cargo-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.valuables {
	background: url(../images/s-icn-valuables-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}
.service-box li.insurance {
	background: url(../images/s-icn-insurance-off.png) no-repeat center 30px #fff;
	background-size: 100px;
}

.service-box li.warehouse:hover {
	background: url(../images/s-icn-warehouse-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.packing:hover {
	background: url(../images/s-icn-packing-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.delivery:hover {
	background: url(../images/s-icn-delivery-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.moving:hover {
	background: url(../images/s-icn-moving-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.carcarrier:hover {
	background: url(../images/s-icn-carcarrier-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.cargo:hover {
	background: url(../images/s-icn-cargo-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.valuables:hover {
	background: url(../images/s-icn-valuables-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li.insurance:hover {
	background: url(../images/s-icn-insurance-on.png) no-repeat center 30px #11116e;
	background-size: 100px;
}
.service-box li h3{ 
	color: #11116e;
	text-align: center;
	height: 50px;
	display: table-cell;
	vertical-align: middle;
	padding-top: 70px;
	padding-left: 0;
	border: none;
	font-weight: normal;
}
.service-box li h3 span{ 
	display: block;
}

.service-box li:hover h3{
	color: #fff;
}
.plan-box figure img{
	width: 100%;
}
.plan-box figure img:hover{
	opacity: 0.8;
}
.plan-box figcaption{
	padding: 15px 10px;
	text-align: center;
	border: 1px solid #148b5d;
	color: #148b5d;
	margin-top: 10px;
}
.plan-box a:hover figcaption{
	background-color: #148b5d;
	color: #fff;
}

@media screen and (min-width: 769px) {
	.top h2{
	display: inline;
	padding-right: 10px;
	}
	.top h2 + p{
	display: inline;
	font-size: 24px;
	}
	.network-box { position: relative;}
	.network-box .map-img{
	margin-top: 20px;
	z-index: -1;
	border: 1px solid #ccc;
	}
	.network-box .info-box{ 
	width: 300px;
	position: absolute;
	border: 1px solid #ccc;
	background-color: #ffffff;
	bottom: 0;
	right: 0;
	padding: 5px;
	box-sizing: border-box;
	margin: 10px;
	}
	.network-box .blank{
	position: absolute;
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	top:280px;
	left:290px;
	cursor: pointer;
	}
	.network-box .circle{
	position: absolute;
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	line-height: 18px;
	color: #11116e;
	font-size: 0.9em;
	}
	.network-box .circle:hover{
	opacity: inherit;
	background: #11116e;
	color: #fff;
	}
	.network-box .number01{
	top:280px;
	left:330px;
	}
	.network-box .number02{
	top:300px;
	left:330px;
	}
	.network-box .number03{
	top:290px;
	left:270px;
	}
	.network-box .number04{
	top:270px;
	left:270px;
	}
	.network-box .number05{
	top:265px;
	left:250px;
	}
	.network-box .number06{
	top:270px;
	left:230px;
	}
	.network-box .number07{
	top:210px;
	left:170px;
	}
	.network-box .number08{
	top:280px;
	left:300px;
	}
	.network-box .number09{
	top:340px;
	left:390px;
	}
	.network-box .main-street{
	color: #11116e;
	background: #ffffff;
	padding: 5px 3px 3px;
	line-height: 1.0;
	font-size: 0.9em;
	}
	.network-box .main-street.ken-o{
	position: absolute;
	top:400px;
	left:220px;
	}
	.network-box .main-street.kanetsu{
	position: absolute;
	top:300px;
	left:200px;
	}
	.network-box .main-street.joban{
	position: absolute;
	top:340px;
	left:436px;
	}
	.network-box .main-street.tohoku{
	position: absolute;
	top:250px;
	left:360px;
	}
	.network-box dl{ 
	width: 300px;
	position: absolute;
	bottom: 0;
	right: 0;
	display: none;
	margin: 10px;
	min-height: 140px;
	}
	.network-box dt{ 	
	padding: 10px;
	}
	.network-box .number01:hover + area + dl,
	.network-box .number02:hover + area + dl,
	.network-box .number03:hover + area + dl,
	.network-box .number04:hover + area + dl,
	.network-box .number05:hover + area + dl,
	.network-box .number06:hover + area + dl,
	.network-box .number07:hover + area + dl,
	.network-box .number08:hover + area + dl,
	.network-box .number09:hover + area + dl{
	display: block;
	}
	.intervew-box .txt{
	width: 48%;
	margin-right: 2%;
	float: left;
	}
	.intervew-box .txt .link{
	position: absolute;
	bottom: 0;
	right: 0;
	}
	.intervew-box .photo {
	width: 50%;
	float: right;
	position: relative;
	}
	.intervew-box .photo .cap{
	bottom: 20px;
	}

	.service-box ul{ 
	background: url(../images/btn-bg.jpg) no-repeat center;
	position: relative;
	width: 1020px;
	height: 700px;
	}
	.service-box li{
		width: 200px;
		height: 200px;
		margin: 0;
	}
	.service-box li.btn01{
	position: absolute;
	top: 10px;
	left: 410px;
	}
	.service-box li.btn02{
	position: absolute;
	top: 150px;
	right: 150px;
	}
	.service-box li.btn03{
	position: absolute;
	top: 410px;
	right: 150px;
	}
	.service-box li.btn04{
	position: absolute;
	bottom: 10px;
	right: 410px;
	}
	.service-box li.btn05{
	position: absolute;
	top: 410px;
	left: 150px;
	}
	.service-box li.btn06{
	position: absolute;
	top: 150px;
	left: 150px;
	}
	.service-box li h3{ 
	font-size: 1.3em;
	}
	.service-box li p span{ 
	font-size: 0.8em;
	}
	.plan-box figure{
		margin: 5px;
		width: 330px;
		float: left;
	}
}
@media screen and (max-width: 768px) {
	.top h2{
	margin: 10px 0
	}
	.top h2 + p{
	font-size: 20px;
	}
	.network-box p{ 
		text-align: center; 
		margin-bottom: 10px;
	}
	.network-box p.sp{
		padding: 10px;
		border: 1px solid #ccc;
		margin: 0 auto 5px;
		width: 80%;
	}
	.network-box p.more a{ display: block;}
	.network-box .map-img{
		max-width: 100%;
		height: auto;
	}
	.network-box .circle{ display: none;}
	.network-box dl{
		width: 96%;
		margin: 0 auto;
		position: relative;
	}
	.network-box .popup{
		cursor: pointer;
	}
	.network-box .offices-img {
		width: 100%;
	}
	.network-box .map-details-none {
    	display: none;
	}
	.network-box .map-close-btn{ 
		position: absolute;
		right: 3px;
		top: 3px;
		width: auto !important;
		height: auto !important;
	}
	.intervew-box .heightLine-box{ height: auto !important;}
	.intervew-box .txt p{ margin: 0 2%;}
	.intervew-box .txt .link{
	display: inline-block;
	float: right;
	margin-top: 20px;
	}
	.intervew-box .photo .cap{
	bottom: 5px;
	}
	.service-box li{
		width: 48%;
		height: 160px;
		margin: 1%;
		float: left;
		background-size: 50% !important;
	}
	.service-box li h3{ 
	font-size: 1.0em;
	}
	.service-box li p span{ 
	font-size: 0.6em;
	}
	.plan-box figure{ margin: 0 2% 20px;}
}