/* CSS Document */
* {	margin:0px;	padding:0px;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/*
=============================================================================================================================
次ページ見出し
=============================================================================================================================
*/

.nh1, .nh2, .nh3, .nh4{ width:100%; height:500px; position:relative; margin-bottom:4em;}

.nh1{ background:url(../img/nh1.jpg) no-repeat 50% 50%/cover;}
.nh2{ background:url(../img/nh2.jpg) no-repeat 50% 50%/cover;}
.nh3{ background:url(../img/nh3.jpg) no-repeat 50% 50%/cover;}
.nh4{ background:url(../img/nh4.jpg) no-repeat 50% 50%/cover;}

.nh1 div, .nh2 div, .nh3 div, .nh4 div{ position:absolute; bottom:0; padding-left:1%; color:#FFF; font-size:1.2em; width:100%;}
.nh1 div p:first-of-type, .nh2 div p:first-of-type, .nh3 div p:first-of-type, .nh4 div p:first-of-type{ font-size:10em; font-weight:bold; line-height:.85em; opacity:.8;}
.nh1 div p:first-of-type:first-letter, .nh2 div p:first-of-type:first-letter, .nh3 div p:first-of-type:first-letter, .nh4 div p:first-of-type:first-letter{ font-size:1.2em;}

section{ padding:2em 0;}

section div:first-of-type{
text-align: center;
margin-bottom: 3em;
margin-top: 2em;
color: #096;
font-size:1.5em;
}

table, table th, table td{ border-collapse:collapse;}
table th, table td{ padding:1em;}

section div:first-of-type span{
	display:block;
	font-size: 3em;
    font-family: 'Rubik', sans-serif;
	margin-left:0 !important;
	text-align:center !important;
	line-height:normal;
}


@media only screen and (max-width: 1000px) {
	
	.nh1, .nh2, .nh3, .nh4{ height:0; padding-top:50%;}
	
	}



@media only screen and (max-width: 600px) {
	
	body{ font-size:.8em;}
	.nh1 div p:first-of-type, .nh2 div p:first-of-type, .nh3 div p:first-of-type, .nh4 div p:first-of-type{ font-size:4em;}
	section div:first-of-type{ font-size:1em;}
	
	}

/*
=============================================================================================================================
会社概要
=============================================================================================================================
*/

.greeting, .gaiyo{ width:1200px; margin:0 auto;}

.greeting p{ width:90%; margin:0 auto 1em;}
.greeting p:first-of-type{ text-align:center; color:#096; margin-bottom:1em; font-family: 'Noto Serif JP', serif; font-size:1.6em;}
.greeting p:last-of-type{ text-align:right; font-family: 'Noto Serif JP', serif; font-weight:bold; margin-top:2em !important;}
.greeting p:last-of-type span{ font-size:1.4em;}

.gaiyo table, .gaiyo table th, .gaiyo table td{ border-top:1px solid #CCC; border-bottom:1px solid #CCC;}
.gaiyo table{ width:96%; margin:0 auto;}
.gaiyo table th{ font-weight:bold;}

.kyoka_bango br{ display:none;}

@media only screen and (max-width: 1300px) {
	
	.greeting, .gaiyo{ width:96%;}
	
	}

@media only screen and (max-width: 600px) {
	
	.gaiyo table th, .gaiyo table td{ padding:.5em;}
    .gaiyo table{ width:100%;}
	
	.greeting p:first-of-type{ font-size:1.2em;}
	.kyoka_bango br{ display:inherit;}
	
	}

/*
=============================================================================================================================
業務内容
=============================================================================================================================
*/

.descri{ position:relative; margin-bottom:4em;}
.descri p{ text-align:center;}

.work1, .work2, .work3, .work4{ width:100%; clear:both; position:relative;}
#work_a, #work_b, #work_c, #work_d{ position:absolute; padding-top:100px; display:block; bottom:0; left:0;}

.work1 article, .work2 article, .work3 article, .work4 article{ width:55%; height:500px; position:relative;}
.work1 article, .work3 article{ color:#FFF; background-color:#14A678; padding:40px 2% 0 5%; float:left;}
.work2 article, .work4 article{ padding:40px 5% 0 2%; float:right;}

.work1 article h4, .work2 article h4, .work3 article h4, .work4 article h4{ font-size:2em; margin-bottom:.8em; padding:.5em;}
.work1 article h4, .work3 article h4{ border-left:4px solid #FFF;}
.work2 article h4, .work4 article h4{ border-left:4px solid #0C9; color:#14A678;}

.work1 article ul li, .work2 article ul li, .work3 article ul li, .work4 article ul li{ list-style-type:disc; margin:0 0 1em 2em;}

.work1 figure, .work2 figure, .work3 figure, .work4 figure{ width:45%; height:500px;}
.work1 figure, .work3 figure{ float:right;}
.work2 figure, .work4 figure{ float:left;}

.work1 figure{ background:url(../img/work1.jpg) no-repeat 50% 50%/cover;}
.work2 figure{ background:url(../img/work2.jpg) no-repeat 50% 50%/cover;}
.work3 figure{ background:url(../img/work3.jpg) no-repeat 50% 50%/cover;}
.work4 figure{ background:url(../img/work4.jpg) no-repeat 50% 50%/cover;}

#work_a, #work_b, #work_c, #work_d{ display:block; clear:both;}

@media only screen and (max-width: 900px) {
	
	.work1 article, .work2 article, .work3 article, .work4 article{ width:100%; height:auto;}
    .work1 article, .work3 article{ padding:40px 5% 2em 5%; float:none; margin-bottom:-1em;}
    .work2 article, .work4 article{ padding:40px 5% 2em 5%; float:none;}
	
	.work1 figure, .work2 figure, .work3 figure, .work4 figure{ width:100%; height:0; padding-top:40%;}
    .work1 figure, .work3 figure{ float:none;}
    .work2 figure, .work4 figure{ float:none;}
	
	.work1 article h4, .work2 article h4, .work3 article h4, .work4 article h4{ font-size:1.6em; line-height:1.4em;}
	
	}


/*
=============================================================================================================================
採用情報
=============================================================================================================================
*/

.facilty{ width:1200px; margin:0 auto;}
.facilty p{ width:90%; margin:0 auto 1em;}

.facilty div:nth-of-type(2){ display:flex; flex-wrap:wrap; width:100%; margin:3em auto 2em;}
.facilty div:nth-of-type(2) article{ width:49%; margin-bottom:2em;}
.facilty div:nth-of-type(2) article:nth-of-type(even){ margin-left:2%;}

.facilty div:nth-of-type(2) article figure{ width:100%; height:0; padding-top:60%; margin-bottom:1em; position:relative;}

.facilty div:nth-of-type(2) article:nth-of-type(1) figure{ background:url(../img/fac_1.jpg) no-repeat 50% 50%/cover;}
.facilty div:nth-of-type(2) article:nth-of-type(2) figure{ background:url(../img/fac_2.jpg) no-repeat 50% 50%/cover;}
.facilty div:nth-of-type(2) article:nth-of-type(3) figure{ background:url(../img/fac_3.jpg) no-repeat 50% 50%/cover;}
.facilty div:nth-of-type(2) article:nth-of-type(4) figure{ background:url(../img/fac_4.jpg) no-repeat 50% 50%/cover;}

.facilty div:nth-of-type(2) article figure figcaption{ color:#FFF; font-weight:bold; font-size:1.1em; width:100%; padding:.4em 2%; background: rgba(20,166,120,0.8); position:absolute; bottom:0;} 

.recruitment{ width:1200px; margin:0 auto;}
.recruitment p{ text-align:center; margin-bottom:4em;}

.recruitment table, .recruitment table th, .recruitment table td{ border-top:1px solid #CCC; border-bottom:1px solid #CCC;}
.recruitment table th, .recruitment table td{ padding:2em 1em !important;}
.recruitment table{ width:96%; margin:0 auto;}
.recruitment table th{ font-weight:bold;}

.flow div:nth-of-type(2){ display:flex; flex-wrap:wrap; width:900px; margin:0 auto 2em;}

.flow div:nth-of-type(2) article{ width:31%; background-color:#096; border-radius:4px; padding:80px 0 10px; color:#FFF;}
.flow div:nth-of-type(2) article:nth-of-type(n+2){ margin-left:3.5%; position:relative;}
.flow div:nth-of-type(2) article:nth-of-type(n+2):before{ content:'▶'; position:absolute; left:-25px; top:45%; font-size:1.1em; color:#099;}

.flow div:nth-of-type(2) article:nth-of-type(1){ background:url(../img/flow_ic1.png) no-repeat 50% 10px, #099;}
.flow div:nth-of-type(2) article:nth-of-type(2){ background:url(../img/flow_ic2.png) no-repeat 50% 10px, #099;}
.flow div:nth-of-type(2) article:nth-of-type(3){ background:url(../img/flow_ic3.png) no-repeat 50% 10px, #099;}

.flow div:nth-of-type(2) article h4{ text-align:center; margin-bottom:.6em; font-size:1.2em; font-weight:bold;}
.flow div:nth-of-type(2) article p{ width:90%; margin:0 auto;}

.flow a{ color:#FFF; font-size:1.2em; background:#333; padding:.5em 2em; display:table; margin:0 auto;}

@media only screen and (max-width: 1300px) {
	
	.facilty, .recruitment{ width:96%;}
    .facilty p{ width:100%;}
	
}

@media only screen and (max-width: 1000px) {
	
	.flow div:nth-of-type(2){ width:96%;}
	.flow div:nth-of-type(2) article{ font-size:.9em;}
	.flow div:nth-of-type(2) article p{ width:96%;}
	.flow div:nth-of-type(2) article:nth-of-type(n+2):before{ font-size:.8em;}
		
}

@media only screen and (max-width: 600px) {
	
	.flow div:nth-of-type(2){ display:inherit; flex-wrap:inherit;}
	.flow div:nth-of-type(2) article{ width:90%; padding:80px 0 10px; margin:0 auto 3em; margin-bottom:1em;}
	.flow div:nth-of-type(2) article:nth-of-type(n+2):before{ content:'▼'; left:50%; top:-24%; font-size:.9em;}
		
}

/*
=============================================================================================================================
お問い合わせ
=============================================================================================================================
*/

.tel_p div:nth-of-type(2){ display:table; padding:2em 4em; margin:0 auto 2em; background-color:#74c8ac;}
.tel_p div:nth-of-type(2) a{ background:url(../img/t_tel.png) no-repeat 0 50%; padding:.8em 0 .8em 70px; color:#FFF; font-family: 'Noto Sans JP', sans-serif; font-weight:bold; font-size:2.8em; text-align:left; display:block; }

.form{ width:1200px; margin:0 auto;}
.form p{ width:90%; margin:0 auto 1em;}

.form_p{ padding:1.5em 1em 1em; font-weight:bold;}

.pp{ width:90%; margin:2em auto; overflow-x: hidden; overflow-x: auto; height:300px; padding:2em; border:1px solid #CCC;}
.pp h4{ font-size:1.2em; font-weight:bold; text-align:center; margin-bottom:1em;}
.pp ul li{ list-style-type:disc; margin:0 0 1em 2em;}
.pp p{ margin-bottom:1.5em; width:100% !important;}
.pp p span{ font-weight:bold;}
.pp div{ border:1px solid #999; padding:1em;}

@media only screen and (max-width: 1300px) {
	
	.form{ width:96%;}
    .form p{ width:96%;}
	
}

@media only screen and (max-width: 600px) {
	
	.tel_p div:nth-of-type(2) a{ background:url(../img/t_tel.png) no-repeat 0 50%/20% 75%; font-size:2em;}
	
}




.contact{ margin-top:4em; clear:both;}