/*--------------------------------
recruit
--------------------------------*/
body,html {overflow-x: hidden;}
body#recruit header{
position:absolute;
padding-top:0px;
}
body#recruit header.fixed,
body.page header{
position:fixed;
background:rgba(0,0,0,0.6);
padding:0px 0 10px 0;
}
body#recruit header h1{
line-height:1;
	font-size:1rem;
}
body#recruit header.fixed h2{
display:none;
}
#mainvisual .metaslider .caption-wrap {
	position: absolute;
	top:0;
	left: 0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
	background-image: url(../img/overlay.png);
	color: #fff;
	text-align:center;
	width: 100%;
	line-height: 1.4em;
	z-index:2;
}
#mainvisual .metaslider .caption-wrap article {
	position: absolute;
	top:20%;
	left: 0;
	width:100%;
	text-align:center;
	line-height:1.6;
	text-shadow: 1px 2px 3px #313131;
}
#mainvisual .metaslider .caption-wrap article h2{
	font-weight:700;
}
#mainvisual .metaslider .caption-wrap article .arrow{
	display:block;
	width:100%;
	text-align:center;
	margin:20px auto;
	width:80px;
}
#mainvisual .metaslider .caption-wrap article .arrow img{
	display:block;
	margin:0 auto;
}
header{
	background:rgba(0,0,0,0.6);
}

header h1.logo.recruit{
	padding:12px 10px;
	line-height:1;
	font-size:1em;
	margin:0;
}
body#recruit header h2{
	font-size:1.0rem;
	color:#000;
	font-weight:700;
	line-height:0;
	padding:12px 0;
	margin:0;
}
.recruitTitle{
	position:relative;
	text-align:center;
	font-size:4.5rem;
	color:#e0f2eb;
	font-weight:700;
	margin:20px 0;
}
.recruitTitle h2{
	position:absolute;
	top:45%;
	width:100%;
	text-align:center;
	font-size:2rem;
	color:#008951;
	font-weight:700;
}
.innerHover{
	position:relative;
}
.innerHover .overlay{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
}
.innerHover img{
	width:100%;
	vertical-align:bottom;
}
.innerHover:hover img{
	opacity:0.7;
}
.innerHover article{
	position:absolute;
	top:25%;
	left:5%;
	width:100%;
}
.innerHover article h3{
	color:#FFF;
	font-weight:700;
	font-size:1.6rem;
}
.innerHover.center article{
	left:0;
}
.innerHover.center article h3{
	text-align:center;
}
.innerHover article h3 span{
	display:block;
}
@media(max-width:60em){	
body#recruit header h2{
	font-size:1.2rem;
}
.recruitTitle{
	font-size:2.5rem;
}
.recruitTitle h2{
	font-size:1.3rem;
}
.innerHover article{
	width:100%;
	top:10%;
	left:0;
	text-align:center;
	
	padding:0;
	margin:0;
}

.innerHover article h3{
	font-size:1.2rem;
	line-height:1.4;
}
}

/*subpage*/
.titleWrapper{
	position:relative;
	text-align:center;
}

@media (max-width: 700px) {
.titleWrapper {
	margin-top:30px;
	position:relative;
	text-align:center;
	}
}

.titleWrapper h1{
	position:absolute;
	top:45%;
	width:100%;
	text-align:center;
	font-size:1.8rem;
	color:#FFF;
	font-weight:400;
	text-shadow:1px 2px 3px #808080;
}
.titleWrapper h1 span{
	display:block;
	font-size:0.4em;
	font-weight:700;
}
.catchWrapepr{
	padding:6vh 1vh;
	text-align:center;
	font-weight:700;
	color:#008b55;
	font-size:1.3rem;
	letter-spacing:2px;
}

.bgGray{
	background:#fff;
}
.bgGray.padding{
	padding:5vh 0 5vh;
}
.flex-wrapper.oneday{
	margin-bottom:30px;
}
.flex-wrapper .image　img{
	width: 100%;
  height: 100%;
	object-fit: contain; /* この一行を追加するだけ！ */
}
.flex-wrapper .text .inner{
	padding:30px 15px;
}
.buttonGroup.three li {
    list-style: none;
    width: 27%;
    margin: 3%;
    border: 2px solid #FFF;
	color:#fff;
    text-align: center;
    padding: 0px;
    font-size: 14px;
	max-width:100%;
	height: auto;
}

.Group.three li {
    list-style: none;
    width: 48%;
    margin: .5%;
    border: 2px solid #fff;
    text-align: center;
	color:#fff;
    padding: .3rem;
    font-size: 15px;
}

h2.name{
	display:inline-block;
	font-weight:700;
	font-size:1.4rem;
}
h2.time{
	display:inline-block;
	font-weight:700;
	font-size:1.5rem;
}
h4.subtitle{
	font-size:1.2rem;
	color:#008b55;
	border:none;
	padding:0;
}
.oneday .tabs-title>a {
    color: #FFF;
	background:#008b55;
	padding:0;
	margin-right:0px;
}
.oneday .tabs-title>a:hover {
    color: #FFF;
	background:#008b55;
}
.oneday .tabs-title>a:focus,.oneday .tabs-title>a[aria-selected=true] {
	background:#008b55;
    color: #FFF;
	padding:0;
	 outline: 0;
}

.pc {
	display: block !important;
}
.sp {
	display: none !important;
}

@media only screen and (max-width: 640px) {
.pc {
	display: none !important;
	}
.sp {
	display: block !important;
	}
}

.titleWrapper article{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.titleWrapper article .onbutton{
		position:absolute;
		display:inline-block;
		padding:2px 5px;
	font-size:0.7rem;
	font-weight:bold;
		background:rgba(0,0,0,0.6);
}
.titleWrapper article .onbutton a{
		color:#FFF;
}
.titleWrapper article .onbutton01{
	position:absolute;
		top:15%;
		left:30%;
}
.titleWrapper article .onbutton02{
	position:absolute;
		top:55%;
		left:10%;
}
.titleWrapper article .onbutton03{
	position:absolute;
		top:70%;
		left:25%;
}
.titleWrapper article .onbutton04{
	position:absolute;
		top:20%;
		left:50%;
}
.titleWrapper article .onbutton05{
	position:absolute;
		top:40%;
		left:80%;
}
.titleWrapper article .onbutton06{
	position:absolute;
		top:70%;
		left:70%;
}


@media ( min-width : 700px ) {

.timeline > li {
  overflow: hidden;
  margin: 0;
  position: relative;
}

.timeline {
  width: 100%;
  float: left;
  padding-left: 20px;
  position: relative;
}
.timeline-content {
  width: 100%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-left: 30px;
}
.timeline-content:before {
  content: '';
  width: 19px;
  height: 19px;
  background: #6fc173;
  position: absolute;
  left: 12px;
  top: 8px;
  border-radius: 100%;
}
}





/*---------------------------------
  footer
---------------------------------*/
#recruit-footer h2{
	font-size:1rem;
	margin:20px 0;
	line-height:1.5;
}
#recruit-footer .menu .button,#recruit-footer .menu a {
    font-size:0.85rem;
	color:#222;
	padding:0.5em 1em 0.5em 0;
}
#recruit-footer ul#menu-recruit{
	margin:20px 0;
}
body.page-template-page-recruit #footer{
	background:#FFF;
}
@media(max-width:40em){	
	.flex-wrapper figure{
		width:100%;
		height:430px;
	}
}
@media(max-width:36em){	
	.flex-wrapper figure{
		width:100%;
		height:390px;
	}
}
@media(max-width:32em){	
	.flex-wrapper figure{
		width:100%;
		height:340px;
	}
}
@media(max-width:28em){	
	.flex-wrapper figure{
		width:100%;
		height:300px;
	}
}
@media(max-width:24em){	
	.flex-wrapper figure{
		width:100%;
		height:280px;
	}
}
@media(max-width:20em){	
	.flex-wrapper figure{
		width:100%;
		height:220px;
	}
}

@media(min-width:40em){	
.flex-wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	max-width:64em;
	margin:0 auto;
}
.flex-wrapper.reverse{
	flex-flow: row-reverse
}
.flex-wrapper .image{
	width:30%;
}
.flex-wrapper.oneday .image{
	width:40%;
}
.flex-wrapper.thumb .image{
	width:25%;
}
.flex-wrapper .text{
	width:67%;
}
.flex-wrapper.oneday .text{
	width:57%;
}
.flex-wrapper.thumb .text{
	width:72%;
}
.titleWrapper h1{
	top:40%;
	font-size:3rem;
}
.titleWrapper article{
		position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.titleWrapper article .onbutton{
	font-size:0.9rem;
	padding:2px 20px;
}
.titleWrapper article .onbutton a{
		color:#FFF;
}
.titleWrapper article .onbutton01{
	position:absolute;
		top:15%;
		left:30%;
}
.titleWrapper article .onbutton02{
	position:absolute;
		top:55%;
		left:10%;
}
.titleWrapper article .onbutton03{
	position:absolute;
		top:70%;
		left:25%;
}
.titleWrapper article .onbutton04{
	position:absolute;
		top:20%;
		left:50%;
}
.titleWrapper article .onbutton05{
	position:absolute;
		top:40%;
		left:80%;
}
.titleWrapper article .onbutton06{
	position:absolute;
		top:70%;
		left:70%;
}
}