@charset "utf-8";

/* =============================================
	合格者占有率
============================================= */
/*****
合格者占有率
*****/
#rate_cont{
 margin: 4em auto;
 padding: 2em 0 4em 0;
 /*background-image: linear-gradient(165deg, #81170d 0%, #e04536 60%, #e95f51 80%, #81170d 100%);*/
}
.ttl_rate{
 font-size: 2.8rem;
 color: #f4d771;
 text-align: center;
 padding: 0.5em;
 margin-bottom: 1em;
 border-top: solid 2px #fff;
 border-bottom: solid 2px #000;
	background-image: linear-gradient(165deg, #81170d 0%, #e04536 60%, #e95f51 80%, #81170d 100%);
 /*background-image: linear-gradient(to right,#dfaf2b 0%, #fffcdb 20%, #c29b30 40%, #fffcdb 60%, #ffd700 80%, #eed68a 100%);
 text-shadow: 0 0 4px rgba(0,0,0,0.5);*/
}

.width_wrap{
/*  width: 94%;
 max-width: 970px; */
 margin: 0 auto;
}
.sub_ttl{
 font-size: 2rem;
 color: #fff;
}

.rate_area{
 display: flex;
 flex-wrap: wrap;
/*  width: 94%;
 max-width: 970px; */
 margin: 4em auto 0.5em auto;
 /*padding: 9em 0 7em 0;
 background-image: url("../img/rate_bar_top.png"), url("../img/rate_bar_bottom.png");
 background-repeat: no-repeat;
 background-position: center top, center bottom;*/
}
.rate_area *{
	box-sizing: border-box;
}
/***各個別の占有率枠***/
.rate_wrap{
 width: 32%;
 margin: 0 2% 2em 0;
 padding: 1em;
 border: solid 1px #b48a45;
 background-image: linear-gradient(to bottom,#dfaf2b 0%, #fffcdb 49%, #3e2100 51%, #eed68a 100%);
 box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.25);
 box-sizing: border-box;
}

.rate_inner{
 font-size: 1.4rem;
 text-align: center;
 padding: 0.5em;
 border: solid 1px #b48a45;
 background-color: #fff;
 box-sizing: border-box;
}
.rate_inner dl{
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 font-weight: bold;
 margin-bottom: 0.5em;
 padding-bottom: 0.5em;
 border-bottom: solid 2px #0070C0;
 position: relative;
}
.rate_inner dl::before{
 content: '';
 display: block;
 width: 52px;
 height: 52px;
 background-image: url("../img/mark_sakura.png");
 background-repeat: no-repeat;
 background-size: contain;
 position: absolute;
 top: -26px;
 left: -26px;
}
.rate_inner dl dt{
 flex-grow: 1;
 font-size: 1.4em;
 text-align: left;
 margin-left: 30px;
}
.rate_inner dl dd{
 flex-shrink: 0;
 font-size: 1.8em;
 text-align: right;
 color: #e04536;
}
.rate_inner dl dd::after{
 content: '%';
 display: inline;
 font-size: 0.65em;
}

/***各個別の占有率枠2023***/
.rate_single{
	font-size: 1.4rem;
	text-align: center;
	width: 32%;
 margin: 0 2% 2em 0;
 padding: 1em;
	background-image: url("../img/rate_single_bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.rate_univ{
	font-size: 1.5em;
	color: #000;
}

.occu{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	margin-top: 0.5em;
	padding: 0.5em 0;
	border-top: solid 2px #fff;
}
.occu dt{
	font-size: 1.4em;
	margin-right: 1em;
}
.occu dd{
	font-size: 2em;
	color: #e04536;
}
.occu dd::after{
	content: '%';
	display: inline;
	font-size: 0.65em;
}

.rate_nin{}
.rate_nin b{
	font-size: 1.25em;
}


/***キャプション***/
.rate_cap{
 /* width: 94%;
 max-width: 970px; */
 margin: 0 auto;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
 /*****
 合格者占有率
 *****/
 /***各個別の占有率枠***/
 .rate_wrap:nth-of-type(3n),
	.rate_single:nth-of-type(3n){
  margin: 0 0 2em 0;
 }
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
 /*****
 合格者占有率
 *****/
 #rate_cont{
  margin: 2em auto 0 auto;
 }
 .ttl_rate{
  font-size: 1.6rem;
 }
 .rate_area{
  display: block;
  margin: 2em auto 0.5em auto;
  padding: 2.5em 0 1.5em 0;
  background-size: auto 2em;
 }
 
 /***各個別の占有率枠***/
 .rate_wrap,
	.rate_single{
  width: 100%;
  margin: 0 auto 1em auto;
 }
	
	/***各個別の占有率枠2023***/
}