@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:recent-graduatesページ用のcss.tmp-user/head-insert.phpへの記述を忘れないこと！*/
:root{
	--graph-h:40px;
	--label-w:14rem;
	--fukidashi-h:70px;
}
#guraduates_top{
margin-top:6rem;
margin-bottom:3rem;
}
.bg_bottom_gray::after{
content:'';
width:100%;
height:100%;
position:absolute;
left:0 ;
top:2rem;
display:block;
z-index:-1;
opacity: 1;
background-image: var(--bs-gradient)!important;
background-color: rgba(var(--bs-light-rgb) ,1);
}
.photo_side_graduates01{
	position:absolute;
	width:46%;
	max-width:800px;
	height:100%;
	min-height:400px;
	display:block;
   top:0;
   left:0;
 background-image:url('https://tensuikai.or.jp/recruitment/wp-content/uploads/photo_program_01-min.jpg');
 background-size:cover;
 background-position:center center;
}
/*fukidashi*/
.fukidashi_area{
	width:100%;
	height: calc(var(--fukidashi-h) * 3.8);
}
.fukidashi_area > span{
	display:inline-block;
	padding:8px 1rem;
	position:absolute;
}
.fukidashi_area > span:nth-child(1){
	left:0;top:calc(var(--fukidashi-h) * 0.3);
}
.fukidashi_area > span:nth-child(2){
	left:22%;top:0;
}
.fukidashi_area > span:nth-child(3){
	left:auto;right:0 ;top:calc(var(--fukidashi-h) * 0.6);
}
.fukidashi_area > span:nth-child(4){
	left:5%;top:calc(var(--fukidashi-h) * 1.7);
}
.fukidashi_area > span:nth-child(5){
	left:35%;top:calc(var(--fukidashi-h) * 1.6);
}
.fukidashi_area > span:nth-child(6){
	left:auto;right:10% ;top:calc(var(--fukidashi-h) * 2.1);
}
.fukidashi_area > span:nth-child(7){
	left:15%;top:calc(var(--fukidashi-h) * 3);
}

.fukidashi_area  span.fukidashi_item {
position: relative;
	display:flex;
	align-items:center;
	height:var(--fukidashi-h);
	padding: 20px 30px;
	background-color: var(--color_male);
	color:var(--bs-white);
	border-radius: var(--border_round);
	font-weight: 400;
	line-height: 1.2;
	z-index: 2;
}
.fukidashi_area  span.fukidashi_item.female{background-color: var(--color_female);}
.fukidashi_area span.fukidashi_item::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_male);
border-top: 15px solid var(--color_male);
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.fukidashi_area span.fukidashi_item.female::before {
	border-left: 15px solid var(--color_female);
	border-top: 15px solid var(--color_female);
}
.fukidashi_area span.fukidashi_item::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-light);
border-top: 15px solid var(--bs-light);
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
}


/*graph*/
.bar-graph-wrap {
  display: flex;
  margin-bottom:6px;
}
.option_label {
	font-size:1.15rem;
	width:var(--label-w);
	flex-shrink: 0;
	letter-spacing:-0.05em;
	line-height:1.2;
	display:flex;
	align-items:center;
}
.graph-wrapper {
  position: relative;
  flex: 1;
}
.graph-bar {
  --bar-rate: 1;
  height: var(--graph-h);
	background:var(--color_male);
  border-radius: 0 0 4px 4px;
  transform: scaleX(0);
  transform-origin: left;
	opacity:0;
}
.graph-bar.is-show {
	 animation: barGrow 2s forwards;
}
.graph-label {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-white);
}

@keyframes barGrow {
  to {
	  opacity: 1; 
    transform: scaleX(var(--bar-rate));
  }
}


/************************************
** 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_graduates01{
		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*/
	#guraduates_top{margin-top:2rem;}
	.fukidashi_area{height:auto;}
	.fukidashi_area > span{ position:static;}
	
	/*graph*/
	.bar-graph-wrap { flex-direction:column;}
	.option_label { width: 100%;}
}

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