/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");

/* H2
---------------------------------------------------------- */
#h2Hanger::after{ background-image: url("../img/jobsupport/bg_h2.jpg");}



/* Carrer Support
---------------------------------------------------------- */
.ritsu_hanger .wp-block-group__inner-container{	
	display: -webkit-box;
	display: flex;
  -webkit-box-align: center;
				align-items: center;
  -webkit-box-pack: justify;
				justify-content: center;
	flex-wrap: wrap;
}

.ritsu_item{
	position: relative;
	width: 250px;
	max-width: calc(50% - 20px);
	margin: 10px;
	padding-top: 230px;
	color: #fff;
	font-family: 'Noto Serif JP','游明朝',serif;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.ritsu_item > span {
	position: absolute;
	bottom: 50%;
	right: 50%;
	width: 100%;
	text-align: center;
	-webkit-transform: translate(50%,50%);
	-ms-transform: translate(50%,50%);
	transform: translate(50%,50%);
	font-weight: 700;
	line-height: 1.5em;
}

.ritsu_item > span strong{ font-size: 2.2rem;}

.ritsu_item.p90{
	width: 200px;
	padding-top: 180px;
	background-color: rgba(185,185,185,1.00);
}
.ritsu_item.p90 > span{	font-size: 1.2em;}
.ritsu_item.p90 > span strong{ font-size: 1.8rem;}

.ritsu_item.p100{	background-color: var(--subColor);}
.ritsu_item.p100 > span{	font-size: 1.4rem;}
.ritsu_item.p100 > span strong{ font-size: 2.8rem;}

@media screen and (max-width: 690px){
	.ritsu_item.p90{
		width: 120px;
		padding-top: 100px;
	}
	.ritsu_item.p90 > span{ font-size: 0.9rem;}
	.ritsu_item.p90 > span strong{ font-size: 1.3rem;}
	.ritsu_item.p100{
		width: 160px;
		padding-top: 130px;
	}
	.ritsu_item.p100 > span{ font-size: 1.0rem;}
	.ritsu_item.p100 > span strong{ font-size: 2.2rem;}
}


/* Graduate Voice
---------------------------------------------------------- */
.gv_hanger{
	width: 100vw;
	margin: 0 calc(50% - 50vw) 30px;
}

.gv_title{ padding: 5%;}

.gv_image{ margin-left: -30% !important;}
.gv_image figure{ margin: 0;}

.gv_hanger h3{
	padding: 0;
	text-align: left;
}
.gv_hanger h3::after{ display: none;}


@media screen and (max-width: 690px){	
	.gv_hanger{	flex-direction: column-reverse;}	
	.gv_title,.gv_image{
		width: 100%;
		margin: 0 !important;
	}
	.gv_title{ padding: 0 15px;}
	.gv_title h3 br{ display: none;}
}



/* Special Movie
---------------------------------------------------------- */
.sp_movie{
	width: width;
	max-width: 100%;
	margin: auto;
  aspect-ratio: 16 / 9;
}
.sp_movie iframe {
  width: 100%;
  height: 100%;
}