@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/



/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
/* メイン
	-------------------------*/
	.mainArea{
		position: relative;
        width: 100%;
	}
	.mainArea .textArea{
		width: 1200px;
		margin: 0 auto;
		position: relative;
		height: 500px;
	}
	.mainArea .textArea h2{
		position: absolute;
		background-color: rgba( 0, 0, 0, 0.4);
		border: 2px solid #fff;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 470px;
		height: 1.8em;
		margin: auto;
		box-sizing: border-box;
		font-size: 36px;
		line-height: 1.8em;
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
		font-weight: normal;
		color: #fff;
		text-align: center;
		letter-spacing: 5px;
	}
	.mainArea .textArea .category{
		position: absolute;
		width: 70px;
		left: 0;
		bottom: 0;
	}
	.mainArea .textArea .category img{
		width: 100%;
	}
	
	/* 段落
	-------------------------*/
	main .tit{
		color: #f07400;
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
		font-weight: normal;
	}
	section{
		margin-top: 120px;
		padding-bottom: 120px;
		position: relative;
		min-width: 1200px;
	}
	section h3{
		font-size: 200%;
		margin: 0 auto 120px;
	}
	section h3 img{
		width: 100%;
	}
	
	
	
	/*-----------------------------------
	 ページ別
	-----------------------------------*/
	
	
	/* 教育研修・福利厚生
	----------------------------------*/
	#recruit .mainArea{
		background: url("../img/mainimg.jpg") no-repeat top center;
		background-size: cover;
	}
	#recruit section .wrap{
		width: 1200px;
	}
	#recruit section .sec h3{
		border-left: 1px solid #333;
		border-right: 1px solid #333;
		width: 258px;
	}
	#recruit section .sec + .sec{
		margin-top: 160px;
	}
	#recruit section .sec h3{
		margin-bottom: 80px;
	}
	#recruit section .sec01 .container dl{
		background-color: #f3f3f3;
		box-sizing: border-box;
		padding: 45px auto;
		text-align: center;
		padding-bottom: 60px;
		margin-bottom: 30px;
	}
	#recruit section .sec01 .container dl dt{
		font-size: 143%;
		font-weight: bold;
		padding: 60px 0 40px;
		
	}
	#recruit section .sec01 .container dl dd{
	}
	#recruit section .sec01 .container img{
		width: 1090px;
	}
	
	#recruit section .sec02 .container .catch{
		width: 666px;
		margin: 0 auto 60px;
	}
	#recruit section .sec02 .container .catch img{
		width: 100%;
	}
	
	#recruit section .sec02 .container ul li{
		width: 580px;
		float: left;
		margin-bottom: 60px;
	}
	#recruit section .sec02 .container ul li:nth-child(even){
		float: right;
	}
	#recruit section .sec02 .container ul li dl dt img{
		width: 100%;
	}
	#recruit section .sec02 .container ul li dl dd.tit{
		text-align: center;
		font-size: 158%;
		letter-spacing: 5px;
		padding: 20px 0;
	}
	
	/* 募集要項
	----------------------------------*/
	#info .mainArea{
		background: url("../img/mainimg.jpg") no-repeat top center;
		background-size: cover;
	}
	#info section .sec h3{
		border-left: 1px solid #333;
		border-right: 1px solid #333;
		width: 258px;
	}
	#info section .sec + .sec{
		margin-top: 160px;
	}
	#info section .sec h3{
		margin-bottom: 80px;
	}
	#info section .sec .container{
		width: 745px;
		margin: 0 auto;
	}
	#info section .sec01 table{
		width: 100%;
		margin: 0 auto;
		text-align: left;
		font-size: 115%;
	}
	#info section .sec01 table tr th{
		color: #f07400;
		padding: 30px 0;
		width: 155px;
		vertical-align: top;
	}
	#info section .sec01 table tr td{
		padding: 30px 0;
		box-sizing: border-box;
	}
	#info section .sec01 table tr th,
	#info section .sec01 table tr td{
		border-top: 1px solid #dedede;
	}
	#info section .sec01 table tr:first-of-type th:first-of-type,
	#info section .sec01 table tr:first-of-type td{
		border-top: none;
	}
	#info section .sec01 table tr td dl + dl{
		margin-top: 20px;
	}
	#info section .sec01 table tr td ul li{
		font-size: 86%;
		position: relative;
		padding-left: 1em;
	}
	#info section .sec01 table tr td ul li:after{
		content: '';
		display: block;
		position: absolute;
		background-color: #4b3a71;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		top: 0.7em;
		left: 0;
	}
	#info section .sec02{
		background-color: #ffc000;
		padding: 90px 0;
	}
	#info section .sec02 .container ul li{
		background-color: #fff;
		text-align: center;
		position: relative;
		font-size: 143%;
		font-weight: bold;
		line-height: 4em;
	}
	#info section .sec02 .container ul li + li{
		margin-top: 44px;
	}
	#info section .sec02 .container ul li:after{
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 12px 0 12px;
		border-color: #000 transparent transparent transparent;
		bottom: -28px;
		left: 50%;
		margin-left: -12px;
	}
	#info section .sec02 .container ul li:last-of-type:after{
		display: none;
	}
	
	#info section .linkArea{
		text-align: center;
	}
	#info section .linkArea p {
		font-weight: bold;
		margin-bottom: 10px;
	}
	#info section .linkArea a{
		display: block;
		margin: 0 auto;
		width: 510px;
	}
	#info section .linkArea a img{
		width: 100%;
	}

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
	/* メイン
	-------------------------*/
	.mainArea{
		position: relative;
        width: 100%;
	}
	.mainArea .textArea{
		margin: 0 auto;
		position: relative;
		height: 50vh;
		padding: 0 5%;
	}
	.mainArea .textArea h2{
		position: absolute;
		background-color: rgba( 0, 0, 0, 0.4);
		border: 2px solid #fff;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 80%;
		height: 1.8em;
		margin: auto;
		box-sizing: border-box;
		font-size: 28px;
		line-height: 1.7em;
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
		font-weight: normal;
		color: #fff;
		text-align: center;
		letter-spacing: 1px;
	}
	.mainArea .textArea .category{
		position: absolute;
		width: 10%;
		left: 0;
		bottom: 0;
	}
	.mainArea .textArea .category img{
		width: 100%;
	}
	
	/* 段落
	-------------------------*/
	main .tit{
		color: #f07400;
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
		font-weight: normal;
	}
	section{
		margin-top: 60px;
		padding-bottom: 60px;
		position: relative;
	}
	section h3{
		font-size: 200%;
		margin: 0 auto 60px;
	}
	section h3 img{
		width: 100%;
	}
	
	
	
	/*-----------------------------------
	 ページ別
	-----------------------------------*/
	
	/* 教育研修・福利厚生
	----------------------------------*/
	#recruit .mainArea{
		background: url("../img/mainimg.jpg") no-repeat top center;
		background-size: cover;
	}
	#recruit section .sec h3{
		border-left: 1px solid #333;
		border-right: 1px solid #333;
		width: 60%;
	}
	#recruit section .sec + .sec{
		margin-top: 100px;
	}
	#recruit section .sec h3{
		margin-bottom: 40px;
	}
	#recruit section .sec01 .container img{
		width: 100%;
	}
	
	#recruit section .sec02 .container{
		width: 100%;
		margin: 0 auto;
	}
	#recruit section .sec01 .container dl{
		background-color: #f3f3f3;
		box-sizing: border-box;
		text-align: center;
		margin-bottom: 10px;
		padding: 20px;
	}
	#recruit section .sec01 .container dl dt{
		font-size: 129%;
		font-weight: bold;
		margin-bottom: 10px;
		line-height: 1.5;
		
	}
	#recruit section .sec01 .container dl dd{
	}
	#recruit section .sec01 .container img{
		width: 1090px;
	}
	
	#recruit section .sec02 .container .catch{
		width: 100%;
		margin: 0 auto 40px;
	}
	#recruit section .sec02 .container .catch img{
		width: 100%;
	}
	
	#recruit section .sec02 .container ul li{
		width: 100%;
		margin-bottom: 40px;
	}
	#recruit section .sec02 .container ul li dl dt img{
		width: 100%;
	}
	#recruit section .sec02 .container ul li dl dd.tit{
		text-align: center;
		font-size: 143%;
		letter-spacing: 5px;
		padding: 10px 0 5px;
	}
	
	 #recruit .scroll{
        position: relative;
		overflow-x: scroll;	
    }
	#recruit .scroll img{
		max-width: 700px;
	}

     #recruit .scroll::before {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.7);
        z-index: 1;
    }
    #recruit .scroll::after {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        content: "";
        width: 74px;
        height: 86px;
        background: url("../img/img_flick.png");
        background-size: cover;
        z-index: 1;	
    }
	#recruit .scroll.off::before ,
    #recruit .scroll.off::after {
        display: none;
    }
	
	
	/* 募集要項
	----------------------------------*/
	#info .mainArea{
		background: url("../img/mainimg.jpg") no-repeat top center;
		background-size: cover;
	}
	#info section .sec h3{
		border-left: 1px solid #333;
		border-right: 1px solid #333;
		width: 60%;
	}
	#info section .sec + .sec{
		margin-top: 60px;
	}
	#info section .sec h3{
		margin-bottom: 40px;
	}
	
	#info section .sec .container{
		padding: 0 5%;
	}
	#info section .sec01 table{
		width: 100%;
		margin: 0 auto;
		text-align: left;
	}
	#info section .sec01 table tr th{
		color: #f07400;
		font-size: 115%;
		padding: 0!important;
	}
	#info section .sec01 table tr td{
		box-sizing: border-box;
		border-bottom: 1px solid #dedede;
		font-size: 100%;
		margin-bottom: 20px;
		padding: 10px 0 20px!important;
	}
	#info section .sec01 table tr th,
	#info section .sec01 table tr td{
		display: block;
		width: 100%;
	}
	#info section .sec01 table tr:last-of-type td{
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#info section .sec01 table tr td dl + dl{
		margin-top: 20px;
	}
	#info section .sec01 table tr td ul li{
		font-size: 86%;
		position: relative;
		padding-left: 1em;
	}
	#info section .sec01 table tr td ul li:after{
		content: '';
		display: block;
		position: absolute;
		background-color: #4b3a71;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		top: 0.7em;
		left: 0;
	}
	#info section .sec02{
		background-color: #ffc000;
		padding: 60px 0;
	}
	#info section .sec02 .container ul li{
		background-color: #fff;
		text-align: center;
		position: relative;
		font-size: 100%;
		font-weight: bold;
		padding: 10px 0;
	}
	#info section .sec02 .container ul li + li{
		margin-top: 44px;
	}
	#info section .sec02 .container ul li:after{
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 12px 0 12px;
		border-color: #000 transparent transparent transparent;
		bottom: -28px;
		left: 50%;
		margin-left: -12px;
	}
	#info section .sec02 .container ul li:last-of-type:after{
		display: none;
	}
	
	#info section .linkArea{
		text-align: center;
	}
	#info section .linkArea p {
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	#info section .linkArea{
		padding: 0 5%;
	}
	#info section .linkArea a{
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	#info section .linkArea a img{
		width: 100%;
	}
	


	
}