@charset "UTF-8";

h2{
	font-size:22px;
	font-size:2.2rem;
}
h2 span{
	display:block;
	color:rgba( 248,182,43,.3 );
	font-size:60px;
	font-size:6.0rem;
	line-height:1;
	font-family: 'Prompt', sans-serif;
}

.more{
	padding:5px 20px;
	border:1px #fff solid;
	text-align:center;
	color:#fff;
	transition: all .3s ease;
}
.more::after{
	content: "\e901";
	margin-left:1em;
	display:inline-block;
	font-size:10px;
	font-family: 'icomoon';
	transform: scale(0.6);
}
.more:hover{
	color:#1f526b;
	background:#fff;
}

/*========/ メイン /========*/
#TitleBlock{ width:100%; text-align:center; color:#fff; position: relative; }
#TitleBlock div{ width:100%; position: absolute; top:40%; }
#TitleBlock div h1{ margin-bottom:15px; font-size: 3.5vw; font-weight:400; }
#TitleBlock div p{ margin-bottom:15px; font-size: 1.3vw; font-weight:700; }

@media screen and (max-width: 950px) {
	#TitleBlock{  text-align:left; color:#000; }
	#TitleBlock > p img{ width:100%; }
	#TitleBlock div{ width:96%; margin:30px auto 0; position: relative; top:0; }
	#TitleBlock div h1{ display:none; }
	#TitleBlock div p{ font-size:16px; font-size:1.6rem; font-weight:400; }
}
/*========/ サービス案内 /========*/
#service{
	margin:80px 0 130px;
	padding-bottom:5%;
	position: relative;
}
#service h2{
	max-width:1230px;
	margin:0 auto;
	padding-left:40px;
}
#service::after{
	content:"";
	width:681px;
	height:100%;
	display:block;
	background:#f8f8f8;
	position: absolute;
	top:90px;
	right:0;
	z-index:-1;
}
#service > div{ margin:50px 10px 0 ;display:flex; }
#service div a{
	width:calc( 100% / 5 - 3px );
	display:block;
	color:#fff;
}
#service div a:hover section{
	background:rgba( 0,112,192,1.0 );
}
#service div a + a{ margin-left:3px; }
#service section{
	height:85%;
	padding:50% 20px 0;
	border:1px #1f526b solid;
	color:#fff;
	background:#1f526b;
	position: relative;
	transition: all .3s ease;
}
#service a:nth-child(2n) section{ background:#002060; }
#service section p{
	width:93%;
	box-shadow: 0px 8px 16px -2px rgba(10,10,10,.7), 6px 7px 9px 1px rgba(10,10,10,0.25);
	position: absolute;
	top:-10px;
	left:-3px;
}
#service section dt{
	margin-bottom:10px;
	font-size:20px;
	font-size:2.0rem;
}
#service section .more{
	width:calc( 100% - 80px );
	display:block;
	position: absolute;
	bottom:20px;
}
#service a:hover section .more{
	color: #1f526b;
	background: #fff;
}

/*ミタトランスポートサービス*/
.mts #service{
	margin:80px 0 ;
	padding-bottom:20px;
	position: relative;
}
.mts #service::after{
	content:"";
	width:681px;
	height:90%;
	display:block;
	background:#f8f8f8;
	position: absolute;
	top:90px;
	right:0;
	z-index:-1;
}
.mts #service div{
	max-width: 1230px;
	margin: 50px auto 0;
	padding-left: 40px;
}
.mts #service div a{
	width:100%;
}
.mts #service section{
	padding:50px 20px 0;
	height:auto;
	display:flex;
	align-items: flex-start;
}
.mts #service section p{
	width:auto;
	max-width:435px;
	min-width:220px;
	box-shadow: 0px 8px 16px -2px rgba(10,10,10,.7), 6px 7px 9px 1px rgba(10,10,10,0.25);
	position: relative;
	top:-70px;
	left:-30px;
}
.mts #service section dl{ margin-bottom:30px; }
.mts #service section .more{
	width: calc( 7em + 40px );
	margin-top:20px;
	display:block;
	position: relative;
	bottom:0;
}

@media screen and (max-width: 970px) {
	#service{
		margin:80px 0 0px;
		padding-bottom:5%;
	}
	#service::after{ width:80%; height:90%; }
	#service > div{ display:block; }
	#service div a{
		width: 100% ;
		display:block;
		color:#fff;
	}
	#service div a + a{ margin:20px 0 0 0; }
	#service section{ height:auto; padding:20px 20px 20px 32%; }
	#service section p{
		width:30%;
		min-width:150px;
		display:block;
	}
	#service section .more{
		width:calc( 7em + 40px );
		margin-top:10px;
		display:block;
		position: relative;
		bottom:0;
	}
}
@media screen and (max-width: 640px) {
	#service h2{
		padding-left:20px;
	}

	.mts #service section{
		padding:50px 20px 0;
		height:auto;
		display:block;
	}
	.mts #service section dl{ margin-top:-40px; }
	.mts #service section p{ min-width:auto; }
}
@media screen and (max-width: 530px) {
	#service div a + a{ margin:10px 0 0 0; }
	#service section{ padding:20px; text-align:center; }
	#service section p{ margin:0 auto; position: relative; }
	#service section .more{ margin:10px auto 0; }
}


/*========/ 見田工作株式会社の起源 /========*/
#history{ position: relative; }
#history::after{
	content:"";
	width:60%;
	height:70%;
	display:block;
	background:#f8f8f8;
	position: absolute;
	bottom:-40px;
	right:0;
	z-index:-1;
}
#history > div{
	max-width:1278px;
	margin:0 auto;
	display:flex;
	align-items: center;
}
#history > div > div{ margin:40px 45px; }
#history > div > div p{
	margin:40px 0 0 0;
	line-height:2.0;
}
#history > div > p{ min-width:50%; }
#history > div > p img{ box-shadow: 0px 8px 16px -2px rgba(10,10,10,.1), 6px 7px 9px 1px rgba(10,10,10,0.15); }

@media screen and (max-width: 640px) {
	#history{ overflow:hidden; }
	#history::after{ height:83%; bottom:0; }
	#history > div{ display:block; position: relative; }
	#history > div > div{ margin:20px }
	#history > div > p img{ box-shadow: none; }
}


/*========/ MITA CSR /========*/
#csr{
	max-width:1198px;
	margin:80px auto 0;
	padding:0 40px;
}
#csr h2 + p{ margin:40px 0 10px; }
#csr section{ display:flex; align-items: flex-end; position: relative; }
#csr section + section{ margin-top:60px; }
#csr section::after{
	content:"";
	width:75%;
	height:90%;
	display:block;
	background:#f8f8f8;
	position: absolute;
	bottom:-30px;
	right:0;
	z-index:-1;
}
#csr section > p{ min-width:346px; margin-right:50px; }
#csr section > p img{ box-shadow: 0px 8px 16px -2px rgba(10,10,10,.1), 6px 7px 9px 1px rgba(10,10,10,0.15); }
#csr section dt{
	margin-bottom:40px;
	color:#1f526b;
	font-size:20px;
	font-size:2.0rem;
}
#csr section .more{
	width:calc( 7em + 40px );
	margin:40px 0 15px;
	padding:10px 20px;
	display:block;
	border:1px #1f526b solid;
	text-align:center;
	color:#1f526b;
	transition: all .3s ease;
}
#csr section .more::after{
	content: "\e901";
	margin-left:1em;
	display:inline-block;
	font-size:10px;
	font-family: 'icomoon';
	transform: scale(0.6);
}
#csr section .more:hover{
	color:#fff;
	background:#1f526b;
}

@media screen and (max-width: 750px) {
	#csr section{ display:block; }
	#csr section > p{ width:70%; min-width:auto; margin-right:0; }
	#csr section dt{ margin:20px 0 10px; }
	#csr section .more{ margin-top:10px; }

}
@media screen and (max-width: 650px) {
	#csr{ padding:0 20px; }
}


/*========/ 採用情報 /========*/
#recruit{
	margin-top:100px;
	padding:35px 0;
	text-align:center;
	color:#fff;
	background:url( ../img/recruit-bg.jpg) no-repeat 0 30% / cover;
	position: relative;
}
#recruit *{ position: relative; }

#recruit::before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	background:rgba( 31,82,107,.7 );
	position: absolute;
	top:0;
	left:0;
}
#recruit h2{ 
	font-size:30px;
	font-size:3.0rem;
	font-weight:400;
}
#recruit h2 span{ color:rgba( 255,255,255,.4 ); font-weight:700; }
#recruit .more{
	width:calc( 7em + 40px );
	margin:30px auto 0;
	padding:10px 20px;
	display:block;
	border:1px #f8b62b solid;
	text-align:center;
	color:#f8b62b;
	transition: all .3s ease;
}
#recruit .more::after{
	content: "\e901";
	margin-left:1em;
	display:inline-block;
	font-size:10px;
	font-family: 'icomoon';
	transform: scale(0.6);
}
#recruit .more:hover{
	color:#1f526b;
	background:#f8b62b;
}


/*========/ ニュース&トピックス /========*/
#topics{
	max-width:1198px;
	margin:80px auto 0;
	padding:0 40px;
}
#topics h2{ margin-bottom:50px; }
#topics section{ display:flex; align-items: flex-start; position: relative; }
#topics section + section{ margin-top:60px; }
#topics section::after{
	content:"";
	width:75%;
	height:90%;
	display:block;
	background:#f8f8f8;
	position: absolute;
	bottom:-30px;
	right:0;
	z-index:-1;
}
#topics section > p{ width:346px; min-width:346px; max-width:346px; margin-right:50px; }
#topics section > p img{ width:100%; box-shadow: 0px 8px 16px -2px rgba(10,10,10,.1), 6px 7px 9px 1px rgba(10,10,10,0.15); }
#topics section dl{ margin-top:70px; }
#topics section dt{
	margin-bottom:.5em;
	font-size:16px;
	font-size:1.6rem;
}
#topics section .topics,
#topics section .news { margin:3px 0 5px; }
#topics section .topics a{
	padding:3px 10px;
	display:inline;
	color:#fff;
	background:#1f526b;
}
#topics section .news a{
	padding:3px 10px;
	display:inline;
	color:#fff;
	background:#0070c0;
}
#topics section .topics a:hover,
#topics section .news a:hover { background:#f8b62b; }

#topics section .title{
	margin:.5em 0;
	height:1.5em;
	overflow:hidden; 
	font-size:17px;
	font-size:1.7rem;
	font-weight:700;
}
#topics section dd > div{ height:3em; font-size:14px; font-size:1.4rem; overflow:hidden; }
#topics section dd a {
	margin-top:1.5em;
	display:block;
}
#topics .more{
	width:calc( 7em + 40px );
	margin:70px auto 15px;
	padding:10px 20px;
	display:block;
	border:1px #002060 solid;
	text-align:center;
	color:#002060;
	transition: all .3s ease;
}
#topics .more::after{
	content: "\e901";
	margin-left:1em;
	display:inline-block;
	font-size:10px;
	font-family: 'icomoon';
	transform: scale(0.6);
}
#topics .more:hover{
	color:#fff;
	background:#002060;
}
@media screen and (max-width: 750px) {
	#topics section{ display:block; }
	#topics section > p{ width:70%; min-width:auto; margin-right:0; }
	#topics section dl{ margin-top:20px; }

}
@media screen and (max-width: 650px) {
	#topics{ padding:0 20px; }
}