@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/*ADD:jobsページ用のcss.tmp-user/head-insert.phpへの記述を忘れないこと！*/

:root{
	--staff_title_h:3rem; /*interview staffタイトルの高さ*/
}


/*jobs親ページ*************************************************/
.jobs_title_photo{
	margin-top:-100px;
}

/*jobs子ページ*************************************************/
.entry-content{margin-top:0;}/*謎のトップの空白を消す*/
#jobs_header{
	height:100%;
	min-height:80vh;
	display:block;
}
#jobs_header::before{
	content:'';
	width:83vw;
	height:100%;
	border-radius:0 0 0 var(--border_round);
	background-color:black;
	display:block;
	position:absolute;
	top:0;
	right:0;
	z-index:-1;
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/nurse_top-min.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;	
}
body.nurs  #jobs_header::before{background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/nurse_top-min.jpg');}
body.carer  #jobs_header::before{background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/carer_top-min.jpg');}
body.rihab  #jobs_header::before{background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/rihab_top-min.jpg');}
#jobs_header h2{ margin-top:calc(var(--header_h) + 100px);}

.text_vertical{/*縦書き*/
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
}

/*SCHEDULE*/
#jobs_schedule::before{
	content:'';
	width:60vw;
	height:100%;
	display:block;
	background-color:var(--color_cream);
	border-radius:var(--border_round) 0 0 var(--border_round);
	position:absolute;
	top:0;
	right:0;
	z-index:-2;
}
#jobs_schedule::after{
	content:'';
	width:40vw;
	height:40vw;
	display:block;
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/icon_mark.svg');
	position:absolute;
	right:0;
	bottom:0;
	z-index:-1;
	opacity:0.7;
}

/*スクロールで画像が変わる*/
[id^=schedule_slider_]{
	width: 100%;
	aspect-ratio: 5 / 3;  /* heightを求める */
	display:block;
	background-color:/*var(--color_cream)*/#cccccc;
	border-radius:0 var(--border_round)  0 var(--border_round);
	overflow:hidden;
	position: sticky;
	position: -webkit-sticky;
	top:0;
}
[id^=schedule_slider_] > div {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
  position: absolute;
}

[id^=schedule_slider_] > div.active {
  visibility: visible;
  opacity: 1;
  position: relative;
}
/*suchedule:timeline*/
ul.timeline{padding:0 0 5rem 0;margin:0;}
ul.timeline dl{
  margin:0;
  padding-left:1rem;
  padding-bottom:1.5rem;
	flex: 1;
}
ul.timeline dt{
	/*height:1.6em;*/
	color:var(--color_red);
	font-weight:400;
	font-size:var(--fs_18);
	line-height:1.3;
	margin-bottom:0.25rem;
}
ul.timeline.type_green dt{color:var(--color_green);}
ul.timeline dd{
	padding:0;margin:0;
	line-height:1.5;
	 display:flex;
	flex-direction:column;
	font-size:var(--fs_14);
}
ul.timeline > li{
    position: relative;
    list-style: none;
     padding:0;
     margin:0;
	display:flex;
}
ul.timeline >  li::after{
	content:'';
	position: absolute;
	top:var(--timeline_top);
	left:calc( var(--timeline_left) - 5px);
	width:12px;
	height:12px;
	background: var(--bs-white);
	border : 2px solid var(--color_red);
	border-radius: 50%;
}
ul.timeline.type_green >  li::after{border : 2px solid var(--color_green);}
ul.timeline > li > .work_time {
	width:var(--timeline_left);
	padding-right:1rem;
	padding-top:0.25rem;
	font-family:var(--font_num2_name);
	color: var(--color_red);
	text-align:end;
	letter-spacing:-0.025rem;
}
ul.timeline.type_green > li > .work_time {color: var(--color_green);}
.vertical_line {
	position: absolute;
	left:var(--timeline_left);
	top:var(--timeline_top);
	width:2px;
	height:0;
	background: var(--color_red);
}
ul.timeline.type_green .vertical_line {background: var(--color_green);}

/*interview*/
#interview_nav a{
	position:relative;
	display:block;
	background-color:var(--color_red);
	font-size:var(--fs_18);
	color:var(--bs-white);
	border-radius:0 0 16px 0;
	padding:1rem 2rem 1rem 0.5rem;
	line-height:1.5;
}
#interview_nav.type_green a{background-color:var(--color_green);}
#interview_nav a .sub{
	background-color:var(--color_yellow);
	color:var(--color_red);
	font-size:0.75rem;
	padding:0 0.5rem;
	line-height:1.5;
	border-radius:10px 0 10px 0;
	position:absolute;
	top:-1em;
	left:0;
	font-family:var(--font_en_name);
	letter-spacing:0.02rem;
	transition: all 0.3s ease;
	width:9em; 
	white-space: nowrap;
}
#interview_nav.type_green a .sub{color:var(--color_green);}
#interview_nav a:hover .sub{
	width:100%;
}
#interview_nav a::before {
	content:'';
	display:block;
	width:1.5rem;
	height:1.5rem;
	background-color:var(--bs-white);
	border-radius:6px 0 6px 0;
	position:absolute;
	top: 50%;
    right:0.85rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#interview_nav a::after{
  font-family:var(--font_fa_name);
  content:'\f078';
  font-weight: 900;
	font-size:0.75rem;
  color:var(--color_red);
	position:absolute;
	top: 50%;
    right:1.25rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#interview_nav.type_green a::after{color:var(--color_green);}
[class^="interview_color_"]{
	position:relative;
	overflow:hidden;
}
.interview_color_yellow{background-color:var(--color_cream);}

[class^="interview_color_"]::after{
	content:'';
	width:45vw;
	height:45vw;
	display:block;
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/icon_mark_red.svg');
	position:absolute;
	left:-50px;
	bottom:-50px;
	overflow:hidden;
	opacity:0.1;
}
.interview_color_yellow::after{
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/icon_mark.svg');
	opacity:0.4;
}
.interview_color_green::after{
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/icon_mark_green.svg');
	opacity:0.2;
}

h4.staff_title{
	letter-spacing:0.2rem;
	position:relative;
	padding:0.25rem 0 0 2rem!important;
	border-bottom:1px solid var(--color_red);
	margin-right:calc( var(--staff_title_h) / 2);
	height:var(--staff_title_h);
}
.interview_color_green h4.staff_title,.interview_color_yellow.type_green h4.staff_title{border-bottom:1px solid var(--color_green);}
.staff_title::before{
	content:'';
	width:1.5rem;
	height:1.5rem;
	display:block;
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/icon_logomark.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.staff_title_num{
	font-family:var(--font_num2_name);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.5rem!important;
	font-weight:400;
	width :var(--staff_title_h);
	height:var(--staff_title_h);
	text-align:center;
	background-color:var(--color_red);
	color:var(--bs-white);
	border-radius:50%;
	position:absolute;
	right:calc( var(--staff_title_h) / 2 * -1);
	top :50%;
		transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.interview_color_green .staff_title_num,.interview_color_yellow.type_green .staff_title_num{background-color:var(--color_green);}

.staff_photo > img{
	border-radius:0 0 0 var(--border_round);
	overflow:hidden;
}
/*.staff_photo > .title,*/#jobs_schedule_bottom > .title{
	position:absolute;
	display:block;
	right:-2px;
	top:0;
	width:50%;
	height:auto;
	max-width:300px;
	z-index:1;
}
/*.staff_photo > .title > span,*/#jobs_schedule_bottom > .title > span{
  position:absolute;
  top: 50%;
  left:55%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
 overflow:hidden;
	white-space: nowrap;
	z-index:2;
}
/*QA*/
dl.dl_interview_qa > dt{
  position: relative;
  padding: 10px 20px;
  background-color: var(--color_red);
  color: var(--bs-white);
  border-radius:var(--border_round);
  font-weight:400;
  font-size:1.15rem;
	display:flex;
	align-items:center;
	margin-right:100px;
	line-height:1.5;
	z-index:2;
}
.interview_color_green dl.dl_interview_qa > dt{  background-color: var(--color_green);}
.interview_color_yellow dl.dl_interview_qa > dt{
	 background-color: var(--color_yellow);
	color:var(--cocoon-text-color);
}
dl.dl_interview_qa > dt::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 30px;
  top: -8px;
  border-left: 15px solid var(--color_red);
  border-top: 15px solid var(--color_red);
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.interview_color_green dl.dl_interview_qa > dt::before{  border-left: 15px solid var(--color_green);  border-top: 15px solid var(--color_green);}
.interview_color_yellow dl.dl_interview_qa > dt::before{
  border-left: 15px solid var(--color_yellow);
  border-top: 15px solid var(--color_yellow);
}

dl.dl_interview_qa > dt::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 40px;
  top: -15px;
  border-left: 15px solid var(--bs-white);
  border-top: 15px solid var(--bs-white);
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.interview_color_yellow dl.dl_interview_qa > dt::after{
  border-left: 15px solid var(--color_cream);
  border-top: 15px solid var(--color_cream);
}

dl.dl_interview_qa > dd{
  position: relative;
  padding: 30px;
  background-color: var(--color_cream);
  border-radius:var(--border_round);
  margin-left:100px;
  margin-top:-10px;
  margin-bottom:1rem;
  z-index:1;
  line-height:1.6;
  font-size:1.15rem;
}
.interview_color_yellow dl.dl_interview_qa > dd{
	background-color: var(--bs-white);
}
dl.dl_interview_qa > dd::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  right: 30px;
  top: -8px;
  border-left: 15px solid var(--color_cream);
  border-top: 15px solid var(--color_cream);
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.interview_color_yellow dl.dl_interview_qa > dd::before{
  border-left: 15px solid var(--bs-white);
  border-top: 15px solid var(--bs-white);
}
dl.dl_interview_qa > dd::after{
 content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  right: 40px;
  top: -15px;
  border-left: 15px solid var(--bs-white);
  border-top: 15px solid var(--bs-white);
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.interview_color_yellow dl.dl_interview_qa > dd::after{
  border-left: 15px solid  var(--color_cream);
  border-top: 15px solid var(--color_cream);
}


dl.dl_interview_qa > dt .q_num{
	color:var(--color_yellow);
	font-family:var(--font_num2_name);
	font-size:2rem;
	margin-right:0.5rem;
	white-space: nowrap;
	flex: 0 0 1.25em;
}
.interview_color_yellow dl.dl_interview_qa > dt .q_num{
	color:var(--color_red);
}
.interview_color_yellow.type_green dl.dl_interview_qa > dt .q_num{
	color:var(--color_green);
}


/************************************
** bootstrap:レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 1200px){

}
@media screen and (max-width: 1199.98px) { /*xl（ここからmobile-menu表示）*/

}
@media screen and (max-width:991.9px){/*lg*/	
	/*SCHEDULE*/
	#jobs_schedule::before{
		width:92vw;
		height:100%;
	}
	#jobs_schedule::after{
		width:60vw;
		height:60vw;
	}
}
@media screen and (max-width:767.9px) {/*md: sp*/	
	/*jobs-top*/
	body.carer  #jobs_header::before{background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/carer_top_sp-min.jpg');}
	
	/*interview*/
	[class^="interview_color_"]::after{
		width:70vw;
		height:70vw;
	}
	dl.dl_interview_qa > dt{margin-right:40px;}
	dl.dl_interview_qa > dd{margin-left:16px;padding: 30px 16px;}
}
@media screen and (max-width:575.9px){/*sm*/
}

/************************************
** cocoon:レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下 humbergerMenuの表示*/
@media screen and (max-width: 1023px){
}
/*834px以下*/
@media screen and (max-width: 834px){	
}
/*480px以下*/
@media screen and (max-width: 480px){
}