@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:welfareページ用のcss.tmp-user/head-insert.phpへの記述を忘れないこと！*/
:root{
	--graph-h:40px;
}


.dl_welfare > dt{font-weight:400;color:var(--color_green);}
.dl_welfare > dd{padding-bottom:1rem!important;margin-bottom:1rem!important;border-bottom:1px solid var(--bs-border-color);}
[class^="photo_side_"]{
   position:absolute;
   width:46%;
  max-width:800px;
  height:100%;
	min-height:400px;
 display:block;
}
.photo_side_welfare01,.photo_side_poppo01{
   top:0;
   left:54%;
 background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/photo_program_01-min.jpg');
 background-size:cover;
 background-position:center left;
}
.photo_side_poppo01{
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/photo_side_poppo01.jpg');
}
.photo_side_welfare02,.photo_side_poppo02{
   top:0;
   left:0;
 background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/photo_program_02-min.jpg?ver=202505');
 background-size:cover;
 background-position:center center;
}
.photo_side_poppo02{
	background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/photo_side_poppo02.jpg');
}

#poppo_interview::after,#poppo_photo_bottom::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: -80px;
	top: -100px;
	opacity: 0.1;
	z-index:-1;
	 transform-origin: 50% 50%; /* 回転の基準を中央に */
	animation: rotate-icons-odd 3s infinite steps(1, end);
}
#poppo_photo_bottom::after {
	left:auto;
	right:100px;
    top: auto;
	bottom:0;
	animation: rotate-icons-even 3s infinite steps(1, end);
}
.bgimage_space{
	min-height:500px;
}

/*graph*/
.bar-graph-wrap {
  position: relative;
  height:var(--graph-h);
  overflow: hidden;
  margin-bottom:4px;
}
.bar-graph-wrap .graph {
  height: var(--graph-h);
  position: absolute;
  top:0;	
  left: 0;
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  opacity: 0;
}
.bar-graph-wrap .graph.is-show {animation: graphAnim 2.5s forwards;}
.bar-graph-wrap .graph.male {background:var(--color_male);}
.bar-graph-wrap .graph.female {background: var(--color_female);}
@keyframes graphAnim {
  0% {
	  opacity: 1; 
	  transform: translateX(-100%);
  }
  100% {
	  opacity: 1; 
	  transform: translateX(0);
  }
}

/************************************
** 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*/	
 .photo_side_poppo01,.photo_side_poppo02{
	 	position:static;
		width:100%;
	    min-height:0;
		height:auto;
		padding-top: 66.7%;
		margin-bottom:2rem;
	}
	.photo_side_welfare01,.photo_side_welfare02{
		position:static;
		width:100%;
		max-width:none;
		 min-height:0;
		height:auto;
		padding-top: 66.7%;
		margin-bottom:2rem;
	}	
}
@media screen and (max-width:767.9px) {/*md: sp*/	
	#poppo_interview::after,#poppo_photo_bottom::after {width:70vw;height:70vw;}
	.bgimage_space{	min-height:200px;}
	
	
}

@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){
}