@charset "utf-8";

/*---------- common ----------*/
main {width: 980px;margin: 40px auto;padding-bottom: 130px;}
main * {color: #333;box-sizing: border-box;}
main a {transition: .2s;}
main a:hover {text-decoration: none;opacity: .8;}
.mv {margin-bottom: 140px;}
.topBtnArea {display: flex;justify-content: space-between;margin-bottom: 180px;}
section {margin-bottom: 180px;}
section .ttls {margin-bottom: 70px;}
section .ttls p {font-family: "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN","游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight: bold;text-align: center;}
section .ttl {font-size: 40px;margin-bottom: 20px;position: relative;}
section .ttl::before {content: "";display: inline-block;position: absolute;width: 100px;height: 120px;top: -60px;}
section.ss .ttl::before {background: url(/hp/images/kyoshin_icon1.png);left: 170px;}
section.kamoku .ttl::before {background: url(/hp/images/kyoshin_icon2.png);left: 0;}
section.photos .ttl::before {background: url(/hp/images/kyoshin_icon3.png);left: 80px;}
section.fee .ttl::before {background: url(/hp/images/kyoshin_icon4.png);left: 50px;}
section.recmd .ttl::before {content: none;}
section .ttls .sub {font-size: 18px;color: #005BAB;font-weight: initial;}
/*---------- 偏差値から大学を探す ----------*/
section.ss {margin-bottom: 120px;}
ul.ssList {display: flex;flex-wrap: wrap;}
ul.ssList li {margin-right: 20px;margin-bottom: 20px;text-align: center;}
ul.ssList li:nth-child(5n) {margin-right: 0;}
ul.ssList li a {width: 180px;height: 65px;font-size: 16px;display: block;padding-top: 20px;border: 1px solid #707070;}
ul.ssList li a:hover {color: #58C3E0;border: 1px solid #58C3E0;}
/*---------- 科目選択　入試科目一覧（2022年度入試） ----------*/
section.kamoku {margin-bottom: 130px;}
section.kamoku .flexWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
}
.flexWrap .flexCell {
	width: 300px;
	margin-bottom: 50px;
	margin-right: 40px;
	background: #F8F8F8;
}
.flexWrap .flexCell:nth-child(3n) {margin-right: 0;}
.flexWrap .flexCell .ichiran {
	text-align: center;
	position: relative;
	font-size: 20px;
	font-weight: bold;
	background: white;
	height: 50px;
}
.flexWrap .flexCell .ichiran::after {
	content: "";
	display: block;
	border-bottom: 2px dotted #1981E8;
	width: 4em;
	position: absolute;
	left: calc(50% - 2em);
	bottom: 13px;
}
.flexWrap .flexCell ul.rateList {
	padding: 40px 20px 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexWrap .flexCell ul.rateList li {
	width: 50%;
	margin-bottom: 18px;
	font-size: 16px;
}
/*---------- 写真・動画から大学・短大を探す ----------*/
section.photos .flexBox {display: flex;margin-bottom: 20px;align-items: flex-start;}
section.photos .flexBox div {width: 290px;margin-right: 14px;}
section.photos .flexBox ul.list2 {display: flex;flex-wrap: wrap;flex: 1;}
section.photos .flexBox ul.list2 li {width: 216px;text-align: center;margin: 0 13px 14px 0;}
section.photos .flexBox ul.list2 li:nth-child(3n) {margin-right: 0;}
section.photos .flexBox ul.list2 li a {
  padding: 5px 0;
  font-size: 16px;
  border: 1px solid #707070;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
section.photos .flexBox ul.list2 li a:hover {border-color: #58C3E0;color: #58C3E0;}
section.photos ul.photoList {display: flex;flex-wrap: wrap;}
section.photos ul.photoList li {width: 236px;margin-right: 11px;}
section.photos ul.photoList li:nth-child(4n) {margin-right: 0;}
section.photos ul.photoList li p {padding: 10px 0 20px;font-size: 14px;}
/*---------- 学費比較 －学費シミュレーション－ ----------*/
section.fee {margin-bottom: 140px;}
.simuttl {font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 25px;}
.expl {font-size: 15px;line-height: 26px;margin-bottom: 30px;padding: 0 90px;}
.simuArea {padding: 0 120px;}
.simuArea .nm {font-size: 16px;margin-bottom: 16px;}
.simuBox {
  border: 1px solid #C7C7C7;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  width: 700px;
}
.simuBox input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 13px 28px 11px;
  font-size: 17px;
  flex: 1;
}
.simuBox input:focus {outline: none;}
.simuBox ::placeholder {color: #C7C7C7;}
.simuBox a {background: #005BAB url(https://school.js88.com/common_img/scl_dai/glassicon.png) no-repeat center center/16px;width: 66px;}
.simuBox + .nm {margin-top: 20px;}
.boxBtn {
	display: block;
	width: 340px;
	height: 50px;
	border: 1px solid #707070;
	margin: 36px auto 0;
	text-align: center;
	font-size: 20px;
	padding-top: 10px;
}
.boxBtn:hover {color: #005BAB;border: 1px solid #005BAB;}
/*---------- オススメコンテンツ ----------*/
section.recmd {margin-bottom: 0;}
section.recmd .ttl {font-size: 36px;}
.linkBnrBox {display: flex;justify-content: space-between;}