@charset "utf-8";
@import url(common.css);
/* CSS Document */

html{
	overflow-x:hidden;
}
body{
	margin: 0px;
	font-family: 'Noto Serif JP', serif;
}
p{
	margin-block-start: 0em;
    margin-block-end: 0em;
}
h2{
	margin-block-start: 0;
    margin-block-end: 0;
}
h2 span, h3 span, h4 span, p span, th span, td span{
	display: inline-block;
}
h3{
	text-align: center;
	font-size:25px;
	letter-spacing:0.5em;
	margin-block-end: 0.5em;
}
input{
	font-family: 'Noto Serif JP', serif;
}

/*ヘッダー*/
header {
    width: 100%;
	background-color: #d8d8d8;
}
#index header {
	background-color: #d8d8d8;
}
header .header_width {
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
header .header_img {
    width: 160px;
    height: auto;
    padding: 10px;
}
header .header_img img {
    width: 100%;
}
header nav {
    margin-left: auto;
    height: 100%;
}
header nav ul {
    display: flex;
}
header nav ul li {
    padding: 0.8em 1em 0.8em 1em;
    font-size: 17px;
    list-style-type: none;
}
header nav ul li a {
    text-decoration: none;
    color: #000;
	transition: 0.8s;
}

header nav ul li a:hover {
    opacity: 0.6;
}
header p {
    border-left: 1px solid #fff;
    padding-left: 1em;
    font-size: 21px;
    color: #fff;
    letter-spacing: 1px;
}
header p a {
    text-decoration: none;
    color: #fff;
}
header p span {
    font-size: 14px;
}

/*タイトル*/
#title{
	width: 100%;
	background-color: #eee;
}
#title .title{
	text-align: center;
}
#title .title h2{
	font-size:23px;
	padding-bottom: 1.5em;
	padding-top: 1.5em;
	letter-spacing:0.5em;
}


/*フォーム*/
input{
	font-size:16px;
}
textarea{
	font-size:16px;
}
.from{
	margin-bottom: 5rem;
}
.from #formWrap p{
	margin-bottom: 2em;
	text-align: center;
}
.from #formWrap p.button{
	margin-top: 1em;
}

/*フッター*/
footer{
	margin-bottom: 2rem;
}
footer .footer{
	max-width: 1000px;
	margin: 0 auto;
}
footer .footer .flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer .footer .flex .box{
}
footer .footer .flex .box ul{
	padding-inline-start: 0;
}
footer .footer .flex .box ul li{
	list-style-type: none;
	margin-bottom: 0.3em;
	font-size:18px;
}
footer .footer .flex .box1 ul li:first-of-type, footer .footer .flex .box2 ul li:first-of-type{
	font-weight: bold;
	margin-bottom: 0.7em;
}
footer .footer .flex .box ul li a{
	text-decoration: none;
	color: #000;
	transition: 0.4s;
}
footer .footer .flex .box ul li a:hover{
	opacity: 0.7;
}
footer .footer .flex .box3 ul li{
	font-weight:bold;
	margin-bottom: 0.7em;
}

.copylight{
	text-align: center;
	margin-bottom: 1em;
}

/*トップページ*/
#info{
	width: 100vw;
	height: 100vh;
	position: relative;
}
#top_main{
	width:550px;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translateY(-50%);
	transform : translate(-50%,-50%);
}
#top_main img{
	width:100%;
}

/*採用ページ*/
table#content1{
	width: 700px;
	margin: 5rem auto;
	border-collapse: collapse;
}
table#content1 tbody{
	width:100%;
	vertical-align:top;
}
table#content1 tbody tr{
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
}
table#content1 tbody tr th{
	width:15%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	font-weight:normal;
}
table#content1 tbody tr td{
	width:83%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}
#recruit .img{
	width:700px;
	margin: 3rem auto;
}
#recruit .img img{
	width:100%;
}

/*サブナビ*/
nav#sub {
	width: 100%;
	margin-bottom: 3rem;
	margin-top: 3rem;
}
nav#sub ul {
    display: flex;
	justify-content: center;
	align-items: center;
	padding-inline-start: 0;
}
nav#sub ul li {
	text-align: center;
    padding: 0.3em 1em;
	width: 150px;
    font-size: 16px;
    list-style-type: none;
	border-left:1px solid #000;
}
nav#sub ul li:last-of-type {
	border-right:1px solid #000;
}
nav#sub ul li a {
    text-decoration: none;
    color: #000;
	transition: 0.6s;
}
nav#sub ul li a:hover {
    opacity: 0.6;
}

/*各ページメイン*/
body #main{
	margin:3rem auto;
}
body #main h3{
	color:#8c8c8c;
	font-size:18px;
}
body #main h4{
	font-size:18px;
	line-height: 1.5em;
}
body #main p{
	line-height: 1.6em;
}

/*企業情報メイン*/
#info #main{
	width:1000px;
}
#info #main .content{
	margin-top: 3rem;
	margin-bottom: 3rem;
}
#info #main .h3{
	border-left:1px solid #8c8c8c;
	border-right:1px solid #8c8c8c;
}
#info #main h3{
	width:100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	position: relative;
	top:-12.5px;
}
#info #main h3:before, #info #main h3:after{
    border-top: 1px solid #8c8c8c;
    content: "";
	flex-grow: 1;
}
#info #main h3:before{
    margin-right: 1rem;
}
#info #main h3:after{
    margin-left: 1rem;
}

#info #main h4{
	letter-spacing: 0.5em;
	margin-block-start: 2em;
    margin-block-end: 0.5em;
}
#info #main #content1{
	text-align: center;
}
#info #main #content2 .flex{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}
#info #main #content2 .flex .photo{
	width: 20%;
}
#info #main #content2 .flex .photo img{
	width: 100%;
}
#info #main #content2 .flex .text{
	width: 50%;
	margin-left: 2em;
}
#info #main #content2 .flex .text p{
	width:100%;
	line-height: 1.8em;
}
#info #main #content3 table{
	width: 700px;
	margin: 3rem auto 5rem auto;
	border-collapse: collapse;
}
#info #main #content3 table tbody{
	width:100%;
	vertical-align:top;
}
#info #main #content3 table tbody tr{
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
}
#info #main #content3 table tbody tr th{
	width:23%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	font-weight:normal;
}
#info #main #content3 table tbody tr td{
	width:75%;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
}

/*事業内容*/
#about #main #content1, #about #main #content2, #about #main #content3{
	padding-bottom: 2rem;
}
#about #main #content1 .h3{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#about #main #content1 .h3 .img{
	width:130px;
}
#about #main #content1 .h3 .img img{
	width:100%;
}
#about #main #content1 .h3 .text{
	width:760px;
	margin-left: 20px;
}
#about #main #content1 .h3 .text h3{
	text-align: left;
	width: 100%;
}
#about #main #content1 h3.h3_sp{
	display: none;
}
#about #main #content1 .h3 .text p{
	font-size:14px;
	width:100%;
}
#about #main #content1 .h3 .text p span.p_sp{
	display: none;
}

#about #main .con{
	width:100%;
	margin-bottom: 3rem;
	margin-top:3rem;
}
#about #main .con .flex{
	display: flex;
	align-items: center;
}
#about #main .con .flex2{
	flex-flow: row-reverse;
}
#about #main .con .flex .img{
	width:50%;
}
#about #main .con .flex .img img{
	width:100%;
	vertical-align: bottom;
}
#about #main .con .flex .text{
	width:48%;
}
#about #main .con .flex1 .text{
	margin-left: 1.5em;
}
#about #main .con .flex2 .text{
	flex-flow: row-reverse;
	width: 33%;
}
#about #main .con .flex .text h4{
	color:#8c8c8c;
	margin-block-start:0;
    margin-block-end: 1em;
}
#about #main .con .flex .text p{
}

@media screen and (min-width:1001px) {
    header #drawer_wrapper {
        display: none;
    }
}

@media screen and (max-width:1000px) {
#index header {
	background-color: #d8d8d8;
}
    header .pc_nav {
        display: none;
    }
    header .header_width {
        max-width: auto;
        margin: auto;
        display: block;
        text-align: center;
        height: auto;
    }
    header .header_img {
        margin: 0;
        /*width:50%;*/
		padding: 15px;
    }
    header .header_img img {
        width: 100%;
    }
    header nav {
        margin-left: auto;
    }
    header nav ul {
        display: block;
        padding-inline-start: 0px;
        justify-content: space-between;
    }
    header nav ul li {
        padding: 0.8em 1em 0.8em 1em;
        font-size: 17px;
    }
    header p {
        border-left: none;
        padding-left: 0em;
        font-size: 18px;
        margin-block-start: 0em;
        margin-block-end: 0em;
    }
    header p span {
        font-size: 12px;
    }	
	
/*フッター*/
footer .footer{
	max-width: 85vw;
}

/*各ページメイン*/
body #main h3{
	font-size:18px;
}
body #main h4{
	font-size:18px;
}
body #main p{
	font-size: 16px;
}
	
/*企業情報メイン*/
#info #main{
	width:85vw;
}
#info #content1 h4{
	margin-block-start: 2em;
    margin-block-end: 0.5em;
}
	
/*事業内容ページ*/
#about #main .con .flex .text h4{
	font-size:16px;
}
#about #main .con .flex .text p{
	font-size:14px;
}
}

@media screen and (max-width:768px) {
/*トップページ*/
#index{
	width: 100vw;
	height: 100vh;
	position: relative;
}
#top_main{
	width: 75vw;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translateY(-50%);
	transform : translate(-50%,-50%);
}
#top_main img{
	width:100%;
}	
	
/*採用ページ*/
table#content1{
	width: 85vw;
	margin: 30px auto;
}
#recruit .img{
	width:85vw;
	margin: 30px auto;
	margin-bottom: 0;
}
	
/*企業情報メイン*/
#info #main #content2{
	width: 100%;
}
#info #main #content2 .flex{
	margin-top: 2rem;
}
#info #main #content2 .flex .photo{
	width: 150px;
	margin-bottom: 20px;
}
#info #main #content2 .flex .text{
	width: 100%;
	margin-left: 0;
	text-align:center; 
}
#info #main #content3 table{
	width: 75vw;
	margin: 5rem auto;
}
	
/*事業内容*/
#about #main #content1 .h3{
	display: block;
	text-align: center;
}
#about #main #content1 .h3 .img{
	margin: 20px auto;
}
#about #main #content1 .h3 .text{
	width:85vw;
	margin: 0 auto;
}
#about #main #content1 .h3 .text h3{
	text-align: center;
	width: 100%;
}
#about #main #content1 .h3 .text h3.h3_pc{
	display: none;
}
#about #main #content1 h3.h3_sp{
	display: inline;
}
#about #main #content1 .h3 .text p{
	font-size:14px;
	text-align: center;
}
#about #main #content1 .h3 .text p span.p_pc{
	display: none;
}
#about #main #content1 .h3 .text p span.p_sp{
	display: inline;
}

#about #main .con{
	width:100%;
	margin-bottom: 3rem;
	margin-top:3rem;
}
#about #main .con .flex{
	display: block;
}
#about #main .con .flex .img{
	width:100%;
	margin-bottom: 30px;
}
#about #main .con .flex .text{
	width:100%;
	text-align: center;
	margin-bottom: 50px;
}
#about #main .con .flex1 .text{
	margin-left: 0;
}
#about #main .con .flex2 .text{
	width: 100%;
}
#about #main .con .flex .text h4{
}
#about #main .con .flex .text p{
	line-height: 1.8em;
	width: 85vw;
	margin: 0 auto;
}
}

@media screen and (max-width:600px) {
#title .title h2{
	font-size:20px;
}
footer .footer .flex{
	display: block;
}
footer .footer .flex .box{
	width:100%;
	margin-bottom: 30px;
}
footer .footer .flex .box ul li{
	font-size:12px;
}
.copylight{
	text-align: left;
	width:85vw;
	margin: 0 auto;
	padding-bottom: 1em;
}
	
/*採用ページ*/
table#content1 tbody tr th{
	font-size: 14px;
}
table#content1 tbody tr td{
	font-size: 14px;
}
	
/*サブナビ*/
nav#sub {
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
	width: 85%;
	margin: 0 auto;
}
nav#sub ul li {
	width: 33%;
    font-size: 2.6vw;
	padding: 0.3em 0.5em;
}
	
/*各ページメイン*/
body #main h3{
	font-size:16px;
}
body #main h4{
	font-size:16px;
}
body #main p{
	font-size: 14px;
}
	
/*企業情報メイン*/
#info #content1 h4{
	margin-block-start: 2em;
    margin-block-end: 0.5em;
}
#info #main #content3 tbody tr th{
	font-size: 14px;
}
#info #main #content3 tbody tr td{
	font-size: 14px;
}
#info #main h3{
	top:-11px;
}
	
/*事業内容*/
#about #main #content1, #about #main #content2, #about #main #content3{
	padding-bottom:1rem;
}
}


@media screen and (max-width:400px) {
#title .title h2{
	font-size:16px;
	padding-bottom: 1.2em;
	padding-top: 1.2em;
}
h3{
	font-size:16px;
}
header .header_img {
        width: 40%;
}

/*フッター*/

small{
	font-size: 2vw;
}
	
/*採用ページ*/
table#content1{
	margin: 30px auto;
}
table#content1 tbody tr th{
	font-size: 12px;
}
table#content1 tbody tr td{
	font-size: 12px;
}
	
/*企業情報メイン*/
#info #main #content2 .flex .photo{
	width: 100px;
}
#info #main #content3{
	margin: 3rem auto;
}
#info #main #content3 tbody tr th{
	font-size: 12px;
}
#info #main #content3 tbody tr td{
	font-size: 12px;
}
	
/*事業内容*/
#about #main .con .flex .text p{
	font-size:12px;
}
}