@charset "UTF-8";
* { margin: 0px auto; padding:0px;  outline: none;}

html{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400; font-style: normal;
	letter-spacing: 0.07em; line-height: 1.8;
	font-size: 62.5%;	color:#333; background: #fff;
	height:100%;
}

.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.white{ color:#fff; }

img{ width:100%; }
a{ text-decoration: none;  }
h1{ color:#fff; font-size: 1.2rem; letter-spacing: 0.1em;}
h2{ display: inline-block; font-size: 2.4rem; line-height:1.2; font-weight: 300; margin:30px 0; padding-left: 5px;}
h2::before{ width:auto; display:block; font-size: 6.0rem; font-weight:100; color:#A4AABB; border-bottom: solid 1px; margin-left: -5px;}
h3{font-weight: 300; margin:20px 0; }

.text{ font-size: 1.6rem;}
.flex{ display: flex; flex-wrap: wrap; justify-content:space-between;}

section{ padding-top:50px; }
.menu_outer p:hover,.menu_outer p:active,.interview_outer a:hover,.interview_outer a:active{ opacity: 0.8; transition:0.6s; }
.about_menu a:hover,.about_menu a:active { background: #a6dfeb; transition:0.6s; }
.job_outer a:hover,.job_outer a:active { background: #eefcff; transition:0.6s; }
.workstyle_outer a:hover,.workstyle_outer a:active { background:#868fa9; transition:0.6s; }



/* ヘッダー */
.h_title{ position: absolute; top: 15px; left:15px; z-index:999;}

.menu{ width: 100%; height:80px; background: #4A5677; position: fixed; bottom: 0; z-index:999; }
.menu_outer{ display: flex; }
.menu_outer p{ width:25%; margin:8px auto; border-right: solid 1px #fff;}
.menu_outer p:last-child{ border-right: none;}
.menu_outer a{ display: block; width: 100%; height:100%; color:#fff; }
.menu_outer a span{ font-size:1.6rem; line-height: 1.5;}


.header_bg{
	position: fixed; top:0;
	height: 60px; width: 100%; margin:0; padding:0;
  background-color: #4A5677; z-index:98;
	}

/* メイン */
#topimg{ width:100%; height:165vw; max-height:625px; position: relative; padding-top:0;}
.maincopy{
	position:absolute;bottom:5%;
	z-index: 1; font-size:5.6rem; font-weight: 300; line-height: 1.2;
	letter-spacing: 0.1em; text-shadow: #333 1px 0 10px;
	}

.maincopy_bg{
	background: #4A5677; opacity: 0.5;
	position:absolute; bottom:0; width:100%; height:30%;
}

/* about */
#about{ background: #88DBED;}
#about h2::before{ content:'ABOUT'; }
#about h3{ font-size: 2.6rem; }
.about_menu{ width:95%; max-width:710px; padding-bottom: 50px;}
.about_menu a{
	display: block; width:45%; max-width: 160px;
	margin:10px auto; padding:10px 0;
	color:#fff; border: solid 3px #fff; border-radius: 30px;
}
.about_link img{ width:50%; }
.about_link p{ font-size: 1.4rem;}
.about_contents{ width:100%; padding:80px 0; margin:0;}
.about_contents .img_block{ width:20%; margin:20px auto; }
.about_contents .text_block p{ width:92%; margin:30px auto;}

#about01{ background: url(../images/sp_about_bgimg01.jpg) no-repeat center/cover; }
#about02{ background: url(../images/sp_about_bgimg02.jpg) no-repeat center/cover; }
#about03{ background: url(../images/sp_about_bgimg03.jpg) no-repeat center/cover; }
#about04{ background: url(../images/sp_about_bgimg04.jpg) no-repeat center/cover; }

/* walfare */
#walfare h2::before{ content:'WALFARE'; }
#walfare .flex{ width:100%; max-width: 750px;}
#walfare .flex_inner{	border: solid #4A5677 3px; width:45%; max-width: 235px; margin:10px auto; }
#walfare .flex_inner img{ border-bottom: solid #4A5677 3px; }
#walfare .flex_inner p{ font-size: 1.8rem; color:#4A5677; line-height: 1.4; margin:10px auto 20px; }
.walfare_shain h3,.walfare_all h3{ background:#4A5677; font-size:1.6rem ; width:40%; margin-left: 0; padding-left: 10px;}
.walfare_shain,.walfare_all{ width: 100%; max-width: 860px; margin:40px auto; padding-bottom: 50px;}

.walfare_Gmark{ background:#4A5677; position: relative; }
.walfare_Gmark .text_block{ width:100%; max-width:800px; }
.walfare_Gmark h3{ font-size: 2.2rem; margin:0; font-weight: bold; color:#4A5677;position: absolute; top:0; transform: translateY(-85%); -webkit- transform: translateY(-85%); }
.walfare_Gmark h3::before{ content:''; display: inline-block; width:2em; height:1.5em; padding-left:10px; background: url(../images/Gmark_icon.png) no-repeat bottom center/contain; transform: translateY(20%); -webkit- transform: translateY(20%);}
.walfare_Gmark p{ width:92%; padding:50px 0;}

/* interview */
#interview{ background: #88DBED; padding-bottom: 50px;}
#interview h2::before{ content:'INTERVIEW'; }

#interview .more{ width:100%; width:100%; max-width:800px;  margin-top: 80px; font-size:2.0rem; padding-left: 10px;}
#interview hr{ width:90%; max-width:600px; border-top:solid 1px #fff; border-bottom: none; margin-left: 0; margin-bottom: 100px;}

.video_outer{ width:93%; max-width:750px; margin: auto;}
.video_title{ font-size:1.8rem; font-weight: bold; line-height: 1.8; }
.video_inner{ width:100%; max-width:690px; height:53vw; max-height:390px;}
.video_inner iframe{ width:100%; height:100%; }

.interview_outer a{ display:block; position:relative;  width:100%; max-width:800px; height:30vw; max-height:215px; margin:30px auto; background:#4A5677;}
.interview_outer .text_block{ position:absolute; width:calc(70% - 10px); left:10px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.interview_outer .title{ font-size: 2.2rem; line-height: 1.4; }
.interview_outer .info{ font-size: 1.4rem; padding-left:2px;}
.interview_outer img{ position:absolute; left:70%; width:30%; height:100%; object-fit: cover;  }

/* search */
#search{ background: #F5F5F5; padding-bottom: 50px;}
#search h2::before{ content:'SEARCH'; }
#search h3{ background:#4A5677; font-size:1.6rem ; width:60%; max-width:230px; margin-left: 0; padding-left: 10px;}

.job_outer{ padding:20px 0 50px; width:100%; max-width:820px;}
.job_outer a{ display:block; width:100%; position:relative; height:55vw; margin:10px 0; background: #fff; color:#333;}
.job_outer img{ width:40%; height:100%; object-fit: cover; }
.job_outer .text_block{ position: absolute; left:44%; top:0; width:50%; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.job_outer .title{ font-size: 2.2rem; line-height: 1.2; margin-bottom: 10px; }
.job_outer .text{ font-size: 1.4rem; line-height: 1.5;  margin-bottom: 20px; }

.job_outer a::after{
	content:''; display: block; border: solid 3px #88DBED;
	position: absolute; z-index: 1; top:5px; left:5px; width:calc(100% - 15px); height:calc(100% - 15px);
}

.job_outer .link_text{
	background: #88DBED; padding:5px 20px;
	position: absolute; z-index: 1; bottom:5px; right:5px;
}
.job_outer .link_text::after{
	content:'〉';  position: absolute; right:0;
}

.workstyle_outer{ width:100%; max-width: 800px; margin:40px auto; }
.workstyle_outer a{
	display:block; width:97%; width:365px; height:70px; margin:10px auto;
	background:#A4AABB; font-size: 2.4rem; line-height: 70px;
	position: relative;
}
.workstyle_outer a::before{
	display: inline-block; content:'▲'; transform: rotate(90deg);
	position: absolute; left:10%;
}


/* フッター */
footer{ background:#4A5677; color:#fff; margin:0 auto; padding:20px 20px 100px; }
.copylight{ font-size: 1.2rem; letter-spacing: 0.1em; line-height: 1.5;}


.fade{  animation: fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  25% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}


/*-- PC&タブレット版表示CSS --*/
@media screen and (min-width:801px){
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }

	h1{ font-size: 1.4rem; }
	h2{ padding-left: 0; }
	h2::before{ font-size: 7.0rem; margin-bottom: 5px; }
	.h2_outer{ text-align: center;}

	.maincopy_bg{
		width:calc((100% - 950px) / 2 + 160px);
		height:100%; position:absolute; top:0; left:0;
	}

	.maincopy{ font-size:8.5rem; left:calc((100% - 950px) / 2);}

/* about */
	#about h3{ font-size: 3.0rem; }
	.about_menu{ margin:40px auto;}
	.about_inner{ display: flex; width:700px; height:400px;}
	.about_inner .img_block{ width:120px; position: relative;}
	.about_inner .text_block{ width:450px; margin:auto; }
	.about_contents img{ width:120px; position: absolute; top:100px; }
	.about_contents .text_block p{ width:100%; }
	.about_contents .text_block h3{ text-align: left;}

	#about01{ background: url(../images/pc_about_bgimg01.jpg) no-repeat center/cover; }
	#about02{ background: url(../images/pc_about_bgimg02.jpg) no-repeat center/cover; }
	#about03{ background: url(../images/pc_about_bgimg03.jpg) no-repeat center/cover; }
	#about04{ background: url(../images/pc_about_bgimg04.jpg) no-repeat center/cover; }

/* walfare */
	#walfare h3{ font-size: 2.0rem; }
	.walfare_shain,.walfare_all{ border:solid 1px #4A5677; padding-bottom: 20px; }
	.walfare_shain h3, .walfare_all h3{ margin-top: 0;  }
	.walfare_Gmark{ padding:40px; }
	.walfare_Gmark h3{ font-size: 2.6rem; }
	.walfare_Gmark h3::before{ width:2.5em; height:2em; padding-right:10px;}

	.walfare_shain{ margin-bottom: 80px; }
	.walfare_all{ margin-bottom: 150px; }

/* interview */
	#interview hr{ margin-bottom: 150px;}

	.video_title{ text-align: center; margin:20px auto; }
	.interview_outer .title{ font-size:3.0rem; }
	.interview_outer .info{ font-size: 1.8rem;}

/* search */
	#search{ padding-bottom: 80px; }
	#search h3{ font-size: 2.0rem; margin: 10px auto; text-align: center; }
	.job_outer a{ width:390px; height:210px;}

}

/*-- PC版表示CSS --*/
@media screen and (min-width:951px){
	/* ヘッダー*/
	.h_title{ position: fixed; top: 20px; left:calc((100% - 950px) / 2);}
	.menu{ display: block; width:420px; height:60px; top: 0px; left:calc((100% - 950px) / 2 + 550px); background: none; }
	.header_bg{ display: none; }

/* フッター */
	footer{ padding:30px 0 ; font-size: 1.4rem;  }

}

/*-タブレット版表示CSS-*/
@media screen and (min-width:561px) and (max-width:950px) {
	.sp_area,.sp_br{ display: none; }
	.pc_area{ display: block; }
	.maincopy_bg{	width:25%; height:100%; }
	.maincopy{ font-size:7rem; left:10px;}
	.header_bg{ display: none; }
	nav{ display: none;}
}

/*-スマホ版表示CSS-*/
@media screen and (max-width:560px){
	html{padding-bottom: 60px;}
	.pc_area,.pc_br{ display: none; }
	.sp_area{ display: block; }
	.header_bg{ display: none; }

	nav{ display: none;}
}

/* topのアニメーションの指定 */
.topbg { position: relative; width: 100%; height: 100%; }

.topbg img {
 position: absolute; top: 0; left: 50%;
 transform: translate(-50%, 0%);
 width: 100%; height: 100%;
 opacity: 0; object-fit: cover;
 animation :slideshow 20s linear infinite;
}

@keyframes slideshow{
 0%{ opacity: 0; }
 10%{ opacity: 1; }
 26%{ opacity: 1;}
 30%{ opacity: 0;}
 100%{ opacity: 0;}
}

.topbg img:nth-child(2){ animation-delay: 5s; }
.topbg img:nth-child(3){ animation-delay: 10s; }
.topbg img:last-child{ animation-delay: 15s; }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.4s ease-out;
	-ms-transform:translate(0, 30px);
	-ms-transition: all 0.4s ease-out;
 }

/* モーダル */
.modal{
	 display: none; height: 100vh;
	 position: fixed; overflow: auto;
	 top: 0; width: 100%; z-index:9997;
}
.modal__bg{
	 position: fixed; overflow: auto;
	 background: rgba(0,0,0,0.7);
	 height: 100vh; width: 100%;
	 z-index:9997;
}
.modal_content{
	position: relative;
	border:solid #929292 2px; background: #fff;
	width: 90%; top: 50px;
	z-index:9998; margin-bottom: 150px;

}
.modal_close{
	display: block; width:40px; height:40px; text-align: center;
	font-size:3rem; line-height: 40px; color:#929292; position: absolute;
	right:-10px; top:-10px; background: #fff; border-radius:50%;
	 z-index:9999;
}

.modal_content .text_block{ width:100%; height:100px; background:#4A5677;}
.modal_content .text_block .title{ font-size: 2.2rem; line-height: 1.2; padding:5px 10px;}
.modal_content .text_block .info{ font-size: 1.4rem; padding-left:2px; padding-left: 10px;}
.modal_content .img_block{ width:100%; height:150px; }
.modal_content .q_text{ font-size: 1.7rem; margin:15px 10px 10px; text-decoration: underline;}
.modal_content .a_text{ font-size: 1.4rem; margin:10px 10px; line-height: 1.5;}
.close_btn{ display:block; width:80px; font-size:1.6rem; color:#4A5677; border:solid 1px #4A5677; margin:50px 10px 10px auto;}
#interview01 .img_block{ background:url(../images/interview_staffimg01.jpg) no-repeat top center/cover;}
#interview02 .img_block{ background:url(../images/interview_staffimg02.jpg) no-repeat top center/cover;}
#interview03 .img_block{ background:url(../images/interview_staffimg03.jpg) no-repeat top center/cover;}
#interview04 .img_block{ background:url(../images/interview_staffimg04.jpg) no-repeat top center/cover;}

@media screen and (min-width:701px){
	.modal_content{ width: 650px; height:500px;	}
	.modal_content .text_block{ height:80px; }
	.modal_content .text_block .title{ font-size: 2.4rem; padding-top: 10px;}
	.modal_content .img_block{ width:200px; height:500px; position: absolute; right:0; top:0; z-index: 9998;}
	.modal_content .q_text{ width:400px; margin-left:20px; }
	.modal_content .a_text{ width:400px; margin-left:30px; }
	.close_btn{display: none;}
	#interview01 .img_block{ background:url(../images/pc_interview_staffimg01.jpg) no-repeat center/cover; }
	#interview02 .img_block{ background:url(../images/pc_interview_staffimg02.jpg) no-repeat center/cover; }
	#interview03 .img_block{ background:url(../images/pc_interview_staffimg03.jpg) no-repeat center/cover; }
	#interview04 .img_block{ background:url(../images/pc_interview_staffimg04.jpg) no-repeat center/cover; }
}