@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

html { font-size: 62.5%; }

body{
	font: 1.7rem/1.6 'M PLUS Rounded 1c','Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif, serif;
	font-weight: 600;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #333333;
	background: #fff;
}

a{ color: #0066ff; text-decoration: none; }
a:hover, .active{ text-decoration: underline; }
a:active, a:focus,input:active, input:focus{outline:0;}

.text-right{ text-align: right; }
.text-center{ text-align: center; }

.img-fruid{ max-width: 100%; }


table.table-reqruit,table.table-company,.table-contact{ margin-top: 4rem; width: 100%; max-width: 100%; }
table.table-reqruit,{ margin-bottom: 4rem; }
table.table-reqruit th,table.table-reqruit td,table.table-company th,table.table-company td{ padding: 0.5em; border-bottom: 1px solid #383A94; }


#contact{ margin: 8rem auto; }
.table-contact{ margin-bottom: 2rem; }
.table-contact th,.table-contact td{ padding: 1.5rem 0.8rem; border-bottom: 1px solid #383A94; }

#contact textarea{ padding: 0.5rem; width: 100%; max-width: 100%; }
#contact input{ padding: 0.5rem; }
#contact [type=submit], #contact [type=reset]{ width: 100px; cursor: pointer; }
#contact [type=submit]{
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: #0d6efd;
    color: #fafafa;
    border: 1px solid #0a58cc;
    border-radius: 0.25rem;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.required{ color: #e60012; }

/* ヘッダー
------------------------------------------------------------*/
#header{ width: 100%; background: #fff;	text-align: center; }
#header h1{	padding-top: 30px; }



.left-colum {	width: 50%;}
.right-colum { width: 50%;}

#mainnav a{ color: #3C32B4;	clear: both;}
#mainnav li{ margin: 10px 0;}
#mainnav a.btn-mail{ padding: 0.4em 1.5em; display: block; background: #383A94; color: #fafafa; }
#mainnav a.btn-mail:before{ margin-right: 5px; font-family: 'Font Awesome 5 Free';content:"\f0e0"; }
.slider{
  margin: 0px auto;
  width: 100%;
  background: #3C32B4;
}
.slider img{
  height: auto;
  width: 100%;
  max-width: 1280px;
	margin: 0px auto -10px;
}

/* フッター
------------------------------------------------------------*/
#footer{
	padding: 50px 0; background: #3C32B4;
	color: #fff; text-align: center; font-weight: 500;
}

.footer_title{ font-size: 2.5rem;  }

.footer_nav{
	margin: 0 auto;
}

#footer a{
  color: #fff;
	clear: both;
}

#footer ul{
	width: 100%;
	margin: 0 auto;
}

#footer li{
	margin: 10px 5px;
	display: inline-block;
  text-align: center;	
}

.copyright{ clear: both; text-align: center; font-size: 0.85em; }

,/* 共通
------------------------------------------------------------*/

img{ max-width: 100%; height: auto;}

section{
	clear:both;
}

section h2{
	width: 100%;
	height: autopx;
	margin: 0 auto;
	font-size: 22px;
	font-weight:normal;
	text-align: center;
}

section h2 img{
	max-width: 1200px;
}

section h2 span {
	font-weight: bold;
	background: #fff;
	padding: 0 80px;
}

section h3{
	color: #3C32B4;
  width: 100%;
  border-bottom: 2px solid #3C32B4;
  margin: 30px auto 5px;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap
}


.inner{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 30px;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  margin: 10px;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -24px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/* SEC01
------------------------------------------------------------*/

.contents-guide {
	width: 100%;
	height: auto;
	margin: 70px auto 0;
	text-align: center;
	background-color: #3C32B4;
  border-top: 0.5em solid #3C32B4;
}

/* SEC02 
------------------------------------------------------------*/

.col3 img{	margin: 0 auto; display: block; 	}

.col3 li{	border: 2px solid #3C32B4; line-height: 2.0;}

.col3 input{	display: none;}

.col3 label{
  display: block;
  
  border-bottom: none;
}

.col3 h4{
	padding: 0 5%;
	font-size: 2.2rem;
	font-weight: 400;
	background: #3C32B4;
	color: #fff;
	text-align: center;
	text-align-last: justify;
}

.col3 div{
  border-top: none;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  transition: 2s;
}

.col3 div p{
	font-size: 1.5rem;
	line-height: 1.4;
  padding: 10px;
  text-align-last: justify;
  text-align-last: auto;
}

.btn-work-details{
	margin: 0.5rem;
	padding: 0.5rem;
  color: #ffffff;
  background-color: #3554bd;
  border-radius: 10px;
  border-bottom: 5px solid #273e8c;
  cursor:pointer;
  font: 1.5rem/1.6 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif, serif;
}

.btn-work-details:before{ content: '▼'; }

.btn-work-details:hover{
  color: #ffffff;
  background: #3C32B4;
  border-bottom: 5px solid #2b2480;
}

.col3 input[type=checkbox]:checked + label + div { display: block; max-height: 100vh;}

.contents-box{
	display: block;
  padding: 0 14px;
  margin: 30px 0px;
  border: 2px solid #3C32B4;
}

.contents-box h2{
	width: 100%;
	height: 100%;
	margin: 10px auto;
	color: #fff;
	font-weight: 500;
  background: #3C32B4;
}

.inner-box{	padding: 10px; }

.inner-box span,.inner-box2 span{	font-size: 16px;	font-weight: 400;}

.inner-box ul{	margin: 10px 0;}

.inner-box li{
	background: linear-gradient(transparent 60%, #FFFF99 0%);
  display: inline;
  /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
  padding: 0 2px 4px;
}


.contents-box2{
	display: block;
  padding: 0 14px;
  margin: 50px 0px 0;
  border: 2px solid #64AA44;
}

.contents-box2 h2{
	width: 100%;
	height: 100%;
	margin: 10px auto;
	color: #fff;
	font-weight: 500;
  background: #64AA44;
}

.inner-box2{ margin-bottom: 1rem; padding: 2rem; flex-flow: nowrap; justify-content: space-around; align-items: center; background: #64AA44; }
.inner-box2.reverse{ flex-flow: row-reverse; }
.rec-box2-desc{ padding: 0 0 0 2rem;  color: #ffffff; font: 2.8rem/1.6 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif, serif;font-weight: 500; }
.inner-box2.reverse .rec-box2-desc{ padding: 0 2rem 0 0; }
.rec-box2-photo img{ margin: 0 auto; display: block; text-align: center; }



/* SEC03
------------------------------------------------------------*/
.inner {	display: flex;}

#gallery li{
	float: left;
	width: calc(100% / 3);
	line-height: 0;
}

#gallery img{
	width: 100%;
	height: auto;
}

#sec02{
	padding: 0 !important;
}

#sec02 p{
	color: #000;
	/*text-align: justify;*/
}

.comment_area{
	background-color: rgba(255, 255, 255, 0.7);
  padding: 30px;
	border-radius: 13px;
}

#sec02 .comment_name{
	font-family: serif;
	text-align: right;
}

#sec02 .comment_name span{ font-size: 22px; }

#sec04_02{
	background: url(../images/backimage.png) repeat 0 0 fixed;
	background-size: auto;
	-webkit-background-size: auto;
	text-align: center;
	padding: 40px 20%;
	color: #fff;
}

#sec04_2 li p{
	padding: 0 30px;
}

#sec04_02 img{
	width: 100％;
	min-width: 250px;
	height: auto;
}

.company_pfofile{
	margin-top: 50px;
}

.staff_voice ul{
  width: 100%;
  background: #3C32B4;
}
 
.staff_voice ul li{
	padding: 3rem 50px 0;
	display: flex;
	align-items: center;
	color: #fff;
}
.staff_voice ul li:last-child{ padding-bottom: 3.5rem; }


.staff_voice ul li:nth-child(even){
	flex-direction: row-reverse;
}

.staff_voice ul li:nth-child(even) .txt{
	padding-right: 10px;
}
 
.staff_voice ul li:nth-child(odd) .txt{
	padding-left: 10px;
}

.photo, .txt{
	box-sizing: border-box;
}

.photo{
	width: 30%;
}

.txt{	width: 70%;	line-height: 1.3;	text-align: justify;
	font: 1.5rem/1.8 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif, serif;
}
.txt span{
	font-size: 20px;
	font-weight: 400;
  line-height: 30px;
}

.btn,
a.btn,
button.btn {
	width: 100%;
  height: 75px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}


a.btn_contact{
  color: #000;
  background-color: #3C32B4;
  border-bottom: 5px solid #160e79;

}

a.btn_contact:hover{
  margin-top: 3px;
  color: #000;
  background: #3C32B4;
  border-bottom: 2px solid #160e79;
}

.col4{
	text-align: center;
	margin: 40px 0;
}

.col4 li{
		display: inline-block;
		width: 48%;
		margin: 10px 5px;
}


/* SEC04
------------------------------------------------------------*/
#sec04 p{
	margin-bottom: 5px;
}

.col2 {
	margin: 0 auto;
}

.col2 li{
	display: inline-block;
	width: 100%;
	margin: 0 auto;
}

.col2 li img{
	width: 100%;
}

#sns img{
	padding: 35px 10px 5px 0;
}

#sns a:hover img{
	opacity: .8;
}

#map{
	position: relative;
	height: 400px;
	overflow: hidden;
	z-index: 0;
}

#map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 400px !important;
	border: 0;
}




/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
	}
	.container{ margin: 0 auto; width: 1024px; }
}

@media only screen and (max-width: 1199px){
	.container .row{ padding: 0 1.6rem; }
}

	

@media only screen and (min-width: 800px){
	.sp{ display: none !important; }
	body{
	}

	#mainlogo{ display: flex; }
	
  a#menu{	display:none; }	

	.panel{	display:block !important; }

	#mainnav li{ padding: 10px 25px; border-right: 2px solid #3C32B4; display: inline-block; font-size: 1.8rem;	}
	#mainnav li:first-child{ border-left: 2px solid #3C32B4; }

	.footer_title{ margin-bottom: 0.5em; width: 40%; float: left; }
	.footer_nav{ margin-bottom: 0.5em; width: 60%; float: left; }

	/* SEC02
	-----------------*/
	.inner-box2{ display: flex; }
	.rec-box2-desc,.rec-box2-photo{ width:50% ; }
	
	
	/* SEC03
	-----------------*/
	.col3{		margin: 0 auto;text-align: center;	}

	.col3 li{
		display: inline-block;
		width: 32%;
    padding: 0px 0px 10px;
		margin-bottom: 1rem;
		vertical-align: top;
		text-align: left;
	}
	
  #footer{ padding: 30px 0 40px; }
}


@media only screen and (min-width: 641px){
	.col2 li{		width: 60%;		vertical-align: top;	}
	.col2 li:first-child{		width: 37%;		padding-right: 2%;	}

}

@media only screen and (max-width: 640px){
	.innerS{		width: 94%;		padding-bottom: 0px;	}
	.col3 li{		line-height: 1.7;	}
	.col3 img{		margin: 0 auto;	}
	.col3 .img{		padding: 30px;		margin-bottom: 20px;	}
	#gallery li{		float: none;		width: 100%;	}
	#map iframe{		width: 96% !important;		left: 2%;
	}
	#sec04_02{		padding: 20px;	}
	.slider {
    margin: 0px auto;
    width: 100%;
    background: #3C32B4;
    top: 40px;
  }

	section h3 {    margin: 0px auto 5px;  }

  .contents-box2 {  	margin: 10px 0;  }

  .company_pfofile{  	margin: 10px 0;  }
}

@media only screen and (max-width: 799px){
	.pc{ display: none; }
	.container{  max-width: 100%; }

	#header{position: fixed; top: 0; width: 100%; height: 60px;	z-index: 500;	}
	
	#headerWrap{
		position: relative;
		width: 100%;
		height: 40px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	
	#header h1{	padding-top: 10px;	}
	#header h1 img{	margin-top: 3px;	max-height: 45px;	width: auto !important;	}

	#mainlogo{ height: 60px; }
	#menuWrap{ position: absolute; width: 80px; right: 0; top: -45px; z-index: 1000;}

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 35px;
  	margin: 0 15px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 60%;
  	right: 0;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{  	margin-top: -7px;	}
	#menuBtn:after{  	margin-top: 5px;	}

	a#menu .close{  	background: transparent;	}
	a#menu .close:before, a#menu .close:after{  	margin-top: 0;	}
	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);	}

	.panel{		width: 100%;		display: none;		overflow: hidden;		position: relative;		z-index: 100;	}

	.nav_wrap nav ul{ display: table; width: 100%; height: 100%;}

	.left-colum { width: 80%; text-align: left;}

	#mainnav{ position: absolute; top: 50px; width: 100%; text-align: right; z-index:500;	}

	#mainnav ul{		border-bottom: 1px solid #ccc;		background: #fff;		text-align: left;	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 600;
	}

	#mainnav li a:before{		display: block;		content: "";		position: absolute;		top: 50%;		left: 5px;		width: 6px;		height: 6px;		margin: -4px 0 0 0;		border-top: solid 2px #000;		border-right: solid 2px #000;		-webkit-transform: rotate(45deg);		transform: rotate(45deg);	}
	#mainnav li a.btn-mail{ margin: 1rem; padding: 1rem 3.5rem; border-radius: 10px; }
	#mainnav li a.btn-mail:before{ top: 30%; left: 1.3rem; border: none; -webkit-transform: rotate(0);	transform: rotate(0); }
	#mainnav li a.btn-mail:hover{ text-decoration: none; background: #3554bd; }
	.slider{ top:60px }
	
	.col3 li{
		margin: 10px auto 0 auto;
		display: block;
	}
	section h2{
		margin: 0 auto 20px;
	}
	section h2 span {
		padding: 0 30px;
	}
	.col4 li{
		width: 98%;
	}
	.staff_voice ul li{
		flex-direction: column;
		padding: 0 30px;
		align-items: center;
		color: #fff;
	}
	.staff_voice ul li:nth-child(even){
		flex-direction: column;
	}
	.staff_voice ul li:nth-child(even) .txt,
	.staff_voice ul li:nth-child(odd) .txt{
		padding: 0px;
	}
	.photo, .txt{
		box-sizing: border-box;
	}
	.photo{
		width: 50%;
		margin-top: 10px;
	}
	.txt{
		width: 100%;
		text-align: justify;
	}
	.staff_voice ul li:last-child{
		padding-bottom: 20px;
	}
	.txt span{
	  text-align: center;
	}
	section h3{
		font-size: 20px;
	}

	.rec-box2-desc{ margin-bottom: 3%; padding: 0; font-size: 2rem; }
	.inner-box2.reverse .rec-box2-desc{ padding: 0; }
	.rec-box2-photo{ margin: 3% auto; }
	.table-contact th,.table-reqruit th{ width: 100px; }
	.required{ display: block; }

}