@charset "utf-8";
/* CSS Document */

/*----------------------------------------


slide


----------------------------------------*/
#slide{
	position:relative;
	width:100%;
	min-width: 1200px;
	height:925px;
	z-index:1;
	background: linear-gradient(270deg, #f3d0cc, #d5b5e5, #cae6bd, #ede6a6, #a5eaf3, #b5e5cc);
	background-size: 600% 600%;
	-webkit-animation: slideL 35s ease infinite;
	-moz-animation: slideL 35s ease infinite;
	-o-animation: slideL 35s ease infinite;
	animation: slideL 35s ease infinite;
}
@-webkit-keyframes slideL {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes slideL {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-o-keyframes slideL {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes slideL {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
	
	
#slideL{
	position:absolute;
	width:51%;
	min-width: 600px;
	height:925px;
	z-index:1;
}

#slideR{
	position:absolute;
	top:0;
	right:0;
	width:51%;
	min-width: 600px;
}

#slideM{
	position:absolute;
	top:0;
	right:0;
	left:0;
	width:100%;
	text-align:center;
}


#slideR div,
#slideL div,
#slideM div{
	width:100%;
	height:925px;
}


/*----------------------------------------


article


----------------------------------------*/
article {
	position:absolute;
	top:450px;
	left:0;
	right:0;
	z-index:100;
	width:1200px;
	margin:0 auto;
	}

.cach{
	margin:0 auto;
	background:#6bc5d1;
	width:380px;
	padding:40px;
	color:#fff;
	z-index:100;
	font-size:24px;
	line-height:48px;
}

h3{
	font-family: 'Hind', sans-serif;
	letter-spacing:normal;
}
/*----------------------------------------


ニュース


----------------------------------------*/
.news{
	position:relative;
	margin:150px auto 0;
	padding:5px 0 15px;
	background:#fff;
	width:1200px;
}

.news h3{
	font-size:18px;
	padding:20px 0 0 0 !important;
	font-weight:400;
	border-bottom:#22211d 1px solid;
	margin:0 40px;
}

.news .newsBtn{
	position:absolute;
	background: url(../../images/arrowBluS.png) right 30px top 5px no-repeat;
	top:20px;
	right:40px;
	width:120px;
	font-size:12px;
	font-family: 'Hind', sans-serif;
	border-left:#22211d 1px solid;
	border-right:#22211d 1px solid;
}

.news .newsBtn a{
	display:block;
	padding:2px 0 4px 30px;
	border:none;
}

.news dl {
	width:1140px;
	margin:8px 30px 0 30px;
	overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.news dt {
    float:left;
 	font-family: 'Hind', sans-serif;
   width:80px;
    padding:3px 0 3px 15px;
    clear:both;
}

.news dd {
    padding:3px 25px 3px 110px;
}

.news dd a{
	border-bottom:#fff 2px solid;
}

.news dd a:hover{
	padding:0 0 3px;
	border-bottom:#f7fa15 2px solid;

}

/*----------------------------------------


魅力


----------------------------------------*/
.charm{
	position:relative;
	margin:20px 0;
	padding:5px 0 15px;
	background:url(../../images/top_images/3charmBg.gif) no-repeat top center;
	height:400px;
	width:100%;
	color:#fff;
}

.charm a,
.charm a:hover{
	color:#fff;
	border:none;
	opacity:1 !important;
  }

.charm img.ico {
  transition: 0.5s;
}

.charm a img,
.charm a:hover img{
	opacity:1 !important;
}

.charm a:hover img.ico{
	-moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

.charm h3{
	font-size:60px;
	padding:35px 0 0 0 !important;
	font-weight:400;
	margin:0 auto;
	text-align:center;
	line-height:36px;
}

.charm h3 span{
	display: block;
	font-size:16px;
}


.charm ul {
	display:table;
	border-spacing:20px 0;
	width:95%;
	margin:0 auto;
	padding:25px 0 0;
}

.charm li {
	display:table-cell;
	text-align:center;
	width:330px;
}

.charm h4 {
	font-size:18px;
	padding:15px 0;
}

.charm a:hover h4{
	font-size:18px;
	color:#f7fa15;
	padding:15px 0;
}

.charm ul a:hover p{
	color:#f7fa15;
}

/*----------------------------------------


スタッフ紹介


----------------------------------------*/
.staff{
	margin:320px auto 0;
	padding:15px 22px;
	width:1155px;
	background:#fff;
}

.staff a{
	border:none;
}

.staff img{
	width:230px;
}


.staff a:hover img{
}

.staff h3{
	background:url(../../images/top_images/ttlBg.gif) no-repeat center bottom;
	padding:20px 0 5px;
	font-size:36px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}

.staff h3 span{
	display: block;
	font-size:14px;
}

.staff h4 {
	padding:10px 0;
	height:50px;
}

.staff h4 span{
	font-weight: bold;
}

/*----------------------------------------


キャリアプラン


----------------------------------------*/
.w1200{
	margin:0 auto;
	padding:20px 0;
	width:1200px;
}

.carriere{
	float:left;
}

.personality{
	float:right;
}


.p50{
	margin:0 auto 0;
	width:546px;
	background:#fff;
	padding:15px 22px;
}

.p50 a{
	border:none;
}

.p50 h3{
	background:url(../../images/top_images/ttlBg.gif) no-repeat center bottom;
	padding:20px 0 5px;
	font-size:36px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}

.p50 h3 span{
	display: block;
	font-size:14px;
}

.p50 h4 {
	padding:10px 0;
}

.p50 .ph {
	padding:20px 0 15px;
}

.p50 p {
}	
	

/*----------------------------------------


RECRUIT


----------------------------------------*/
.recruit{
background: linear-gradient(271deg, #b8e6c9, #fbeab4, #f3d0cc);
background-size: 300% 300%;
-webkit-animation: recruitBg 11s ease infinite;
-moz-animation: recruitBg 11s ease infinite;
-o-animation: recruitBg 11s ease infinite;
animation: recruitBg 11s ease infinite;
}
@-webkit-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-o-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

.recruit .inner{
	width:1200px;
	margin:0 auto;
	padding:40px 0;
}

.recruit h3{
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	-ms-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	padding:20px 0 5px;
	font-size:36px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}

.recruit h3:before,
.recruit h3:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}
.recruit h3:before {
	margin-right: 1rem;
}
.recruit h3:after {
	margin-left: 1rem;
}


.recruit p {
	text-align:center;
	padding:30px 0;
}
	
/*----------------------------------------
ボタン
----------------------------------------*/
.btnForm{
	width:400px;
	text-align:center;
	margin:0 auto;
	font-weight:bold;
	font-size:22px;
}

.btnForm a{
	display:block;
	padding:15px 40px;
	background:#22211d;
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	color:#f6f915;
    box-shadow: 0 3px 0 #58564d, 0 6px 0 rgba(0,0,0,0.2);
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, 
	-webkit-transform 0.3s;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	border-bottom:none;
}


.btnForm a:hover {
  color: #f6f915;
  background-color: #22211d;
  box-shadow: 0 3px 0 #58564d, 0 3px 0px rgba(0,0,0,0.2);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  transition-duration: 0.1s;
	border-bottom:none;
	opacity:1;
  }


@media screen and (max-width: 768px) {
/*----------------------------------------


slide


----------------------------------------*/
#slide{
	position:relative;
	width:100%;
	height:auto;
	z-index:1;
	background: none;
	padding: 55px 0 0 0;
	min-width: auto;
}

	
#slideL,
#slideR{
	display: none;
}

#slideM{
	position:static;
	top:0;
	right:0;
	left:0;
	width:100% !important;
	text-align:center;
}

#slideM div{
	padding: 0;
	background: none !important;
	width:100% !important;
	height: auto;
}
	

#slideM div img{
	width:100% !important;
}


/*----------------------------------------


article


----------------------------------------*/
article {
	position:static;
	top:0;
	left:0;
	right:0;
	z-index:100;
	width:100%;
	margin:0 auto;
	}

.cach{
	margin:0 auto;
	background:#6bc5d1;
	width:380px;
	padding:40px;
	color:#fff;
	z-index:100;
	font-size:24px;
	line-height:48px;
}

h3{
	font-family: 'Hind', sans-serif;
	letter-spacing:normal;
}
/*----------------------------------------


ニュース


----------------------------------------*/
.news{
	position:relative;
	margin:0 auto 0;
	padding:5px 0 15px;
	background:#fff;
	width:100%;
}

.news h3{
	font-size:18px;
	padding:20px 0 0 0 !important;
	font-weight:400;
	border-bottom:#22211d 1px solid;
	margin:0 8%;
}

.news .newsBtn{
	position:static;
	background: none;
	top:0;
	right:0;
	width: 70%;
	font-size:16px;
	font-family: 'Hind', sans-serif;
	border-left:none;
	border-right:none;
	margin: 20px auto;
}

.news .newsBtn a{
	display:block;
	padding:10px 10px;
	border:none;
	background: #6bc5d1;
	color: #fff;
	text-align: center;
}

.news dl {
	width:84%;
	margin:0 auto;
	overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.news dt {
    float:none;
 	font-family: 'Hind', sans-serif;
   width:auto;
    padding:10px 0 5px;
    clear:both;
}

.news dd {
    padding:0 0 10px;
}

.news dd a{
	border-bottom:#fff 2px solid;
}

.news dd a:hover{
	padding:0 0 3px;
	border-bottom:#f7fa15 2px solid;

}

/*----------------------------------------


魅力


----------------------------------------*/
.charm{
	position:relative;
	margin:0 0;
	padding:30px 0 15px;
	background:url(../../images/top_images/3charmBg_sp.gif) no-repeat top center;
	background-size: cover;
	height:auto;
	color:#fff;
}

.charm a,
.charm a:hover{
	color:#fff;
	border:none;
	opacity:1 !important;
  }

.charm img.ico {
  transition: 0.5s;
	width: 35%;
	margin: 10px auto 0;
}

.charm a img,
.charm a:hover img{
	opacity:1 !important;
}

.charm a:hover img.ico{
	-moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

.charm h3{
	font-size:28px;
	background: url(../../images/top_images/charmTtlBg_sp.png) no-repeat center 10px;
	background-size: contain;
	padding:0 0 0 0 !important;
	font-weight:400;
	margin:0 auto;
	text-align:center;
	line-height:28px;
}

.charm h3 span{
	display: block;
	font-size:16px;
}


.charm ul {
	display:block;
	border-spacing:inherit;
	width:70%;
	margin:0 auto;
	padding:25px 0 0;
}

.charm li {
	display:block;
	text-align:center;
	width:100%;
	padding: 0 0 30px;
}

.charm h4 {
	font-size:18px;
	padding:10px 0;
}
	
.charm p {
	text-align: left;
}

.charm a:hover h4{
	font-size:18px;
	color:#f7fa15;
	padding:10px 0;
}

.charm ul a:hover p{
	color:#f7fa15;
}

/*----------------------------------------


スタッフ紹介


----------------------------------------*/
.staff{
	margin:5% 5% 0;
	padding:15px;
	width:auto;
	background:#fff;
}

.staff a{
	border:none;
}

.staff img{
	width:100%;
}


.staff a:hover img{
}

.staff h3{
	background:url(../../images/top_images/ttlBg.gif) no-repeat center bottom;
	padding:20px 0 0px;
	font-size:30px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}

.staff h3 span{
	display: block;
	font-size:14px;
}

.staff h4 {
	padding:10px 0 20px;
	height:auto;
	font-size: 13px;
	line-height: 16px;
}
	
.staff h4 span{
	display: block;
	font-weight: bold;
}

/*----------------------------------------


キャリアプラン


----------------------------------------*/
.w1200{
	margin:0 5% 5%;
	padding:20px 0;
	width:auto;
}

.carriere{
	float:none;
}

.personality{
	float:none;
}


.p50{
	margin:0 auto 5%;
	width:100%;
	background:#fff;
	padding:15px 0;
}

.p50 a{
	border:none;
}

.p50 h3{
	background:url(../../images/top_images/ttlBg.gif) no-repeat center bottom;
	padding:20px 0 0;
	font-size:30px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}

.p50 h3 span{
	display: block;
	font-size:14px;
}

.p50 h4 {
	padding:10px 0;
}

.p50 .ph {
	margin: 0 auto;
	padding:20px 15px 15px;
}

.p50 p {
	padding:0 15px 5px;
}	
	

/*----------------------------------------


RECRUIT


----------------------------------------*/
.recruit{
background: linear-gradient(271deg, #b8e6c9, #fbeab4, #f3d0cc);
background-size: 300% 300%;
-webkit-animation: recruitBg 11s ease infinite;
-moz-animation: recruitBg 11s ease infinite;
-o-animation: recruitBg 11s ease infinite;
animation: recruitBg 11s ease infinite;
}
@-webkit-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-o-keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes recruitBg {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

.recruit .inner{
	width:100%;
	margin:0 auto;
	padding:20px 8% 30px;
	box-sizing: border-box;
}

.recruit h3{
	padding:20px 0 0;
	font-size:30px;
	font-weight:400;
	margin:0 auto;
	text-align:center;
}


.recruit h3:before,
.recruit h3:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}
.recruit h3:before {
	margin-right: 1rem;
}
.recruit h3:after {
	margin-left: 1rem;
}


.recruit p {
	text-align:center;
	padding:20px 0;
}
	
/*----------------------------------------
ボタン
----------------------------------------*/
.btnForm{
	width:80%;
	text-align:center;
	margin:0 auto;
	font-weight:bold;
	font-size:18px;
}

.btnForm a{
	display:block;
	padding:10px 15px;
	background:#22211d;
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	color:#f6f915;
    box-shadow: 0 3px 0 #58564d, 0 6px 0 rgba(0,0,0,0.2);
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, 
	-webkit-transform 0.3s;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	border-bottom:none;
}


.btnForm a:hover {
  color: #f6f915;
  background-color: #22211d;
  box-shadow: 0 3px 0 #58564d, 0 3px 0px rgba(0,0,0,0.2);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  transition-duration: 0.1s;
	border-bottom:none;
	opacity:1;
  }



}