@charset "utf-8";
/*=====================================
common
=====================================*/
html {font-size: 62.5%;}
body {font-size: 1.4em;}
#mainContent {width: 1062px;background: white;}
.jyuku_compare {width: 1062px;color: #333333;margin: 0 auto;}
.jyuku_compare * {box-sizing: border-box;}
.jyuku_compare a {transition: .2s;}
.jyuku_compare a:hover {opacity: .7;text-decoration: none;}
.jyuku_compare figure {padding: 0;margin: 0;}
.jyuku_compare_mv {margin: 45px 0 80px;text-align: center;}
.mb20 {margin-bottom: 20px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb70 {margin-bottom: 70px !important;}
.pc_inner {padding: 0 41px;}
/*=====================================
search box
=====================================*/
.searchArea {background: #EFFFE9;padding: 30px 42px 18px;}
.jyuku_compare .searchArea .inner {position: relative;}
.searchTbl_hikaku {
  width: 100%;
  border-collapse: separate;
  table-layout: fixed;
  border: 1px solid #C7C7C7;
  border-radius: 3px;
  background: white;
}
.searchTbl_hikaku td {border-right: none;padding: 5px 0;}
.searchTbl_hikaku td:first-child {border-radius: 3px 0 0 3px;width: 550px;}
.searchTbl_hikaku td:last-child {
  border-radius: 0 3px 3px 0;
  width: 89px !important;
  background: #32BBA9 url(https://school.js88.com/img/common/icon-search.png) no-repeat right 10px center;
}
.searchTbl_hikaku td:last-child a {
  display: block;
  color: white;
  font-size: 16px;
  padding: 5px 10px 5px 24px;
  text-decoration: none;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
}
.searchTbl_hikaku td > div  {display: flex;position: relative;}
.searchTbl_hikaku td:not(:first-child) > div {border-left: 1px solid #32BBA9;}
.searchTbl_hikaku td .area_hikakuBox{
	background: url(https://school.js88.com/oc2024/oc_icon02.png) no-repeat left 14px center; background-size: 29px;
  margin-left: 40px;
}
.searchTbl_hikaku td .target_hikakuBox {background: url(../images/taisho_icon.png) no-repeat left 10px center; background-size: 34px;}
.searchTbl_hikaku td p {position: absolute;top: -22px;left: 3px;}
.searchTbl_hikaku td .area_hikakuBox p {left: 5px;}
.searchTbl_hikaku td p span {
	color: white;
  display: block;
  text-align: center;
  width: 49px;
  line-height: 15px;
  padding-top: 1px;
  background: #32BBA9;
  font-size: 11px;
  position: relative;
}
.searchTbl_hikaku td p span::after {
	content: "";
  display: block;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #32BBA9;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 4px);
}
.searchTbl_hikaku td div div  {
	font-size: 14px;
  color: #100F0F;
  margin-left: 60px;
  cursor: pointer;
  height: 35px;
  display: flex;
  align-items: center;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  position: relative;
}
.searchTbl_hikaku td div div.target_hikakuvalue {width: 100%;}
.area_hikakuBox div + div::before {
  content: "";
  position: absolute;
  left: -60px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #32BBA9;
  border-right: 3px solid #32BBA9;
  transform: rotate(45deg);
}
.searchTbl_hikaku td div .pref_hikakuvalue {width: 140px;}
.searchTbl_hikaku td div .city_hikakuvalue {width: 160px;}
.searchTbl_hikaku td div .ward_hikakuvalue {width: 300px;}
.jyuku_compare .pulldownArea {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
}
.jyuku_compare .pulldownArea .areaInner {position: relative;}
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku {
  position: absolute;
  border: 1px solid #C7C7C7;
  border-top: none;
  top: 0;
  background: white;
  display: flex;
  box-shadow: 2px 2px 2px #C7C7C7;
}
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku:nth-child(2) {left: 550px;}
/*------ プルダウン　セル設定 ------*/
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku ul.cate li,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail ul li,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 ul li,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail3 ul li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  color: #100F0F;
}
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku ul.cate li:hover,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail ul li:hover,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 ul li:hover,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail3 ul li:hover {background: #32BBA9;color: white;}
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail2,
.jyuku_compare .pulldownArea .areaInner .listwrap_hikaku .detail3 {border-left: 1px solid #C7C7C7;}
/*=====================================
Search from location
=====================================*/
.jyuku_compare_h3 {
	text-align: center;
	color: #32BBA9;
	font-size: 40px;
  font-family: "Zen Maru Gothic", serif;
	font-weight: bold;
	margin-bottom: 40px;
}
.mapArea {background: url(https://school.js88.com/oc2021/map.gif) no-repeat center top;position: relative;height: 500px;}
.mapArea > ul {position: absolute;width: 160px;overflow: hidden;}
.mapArea ul li ul li {float: left;margin-right: 12px;}
.mapArea > ul:nth-child(2) ul li:nth-child(4n),
.mapArea > ul:nth-child(3) ul li:nth-child(4n),
.mapArea > ul:nth-child(4) ul li:nth-child(3n),
.mapArea > ul:nth-child(5) ul li:nth-child(3n),
.mapArea > ul:nth-child(6) ul li:nth-child(3n),
.mapArea > ul:nth-child(7) ul li:nth-child(6),
.mapArea > ul:nth-child(8) ul li:nth-child(4n) {margin-right: 0;}
.mapArea ul li ul li a {font-size: 15px;color: #333;font-family: "Zen Maru Gothic", serif;}
/*========== pref position ==========*/
.mapArea > ul:nth-child(1) {top: 10px;right: 170px;}
.mapArea > ul:nth-child(2) {top: 130px;right: 230px;}
.mapArea > ul:nth-child(3) {top: 230px;right: 210px;}
.mapArea > ul:nth-child(4) {top: 70px;left: 424px;width: 120px;}
.mapArea > ul:nth-child(5) {top: 180px;left: 400px;width: 120px;}
.mapArea > ul:nth-child(6) {bottom: 120px;left: 545px;width: 120px;}
.mapArea > ul:nth-child(7) {bottom: 20px;left: 410px;width: 140px;}
.mapArea > ul:nth-child(8) {top: 120px;left: 182px;}
.mapArea > ul:nth-child(9) {bottom: 140px;left: 168px;width: 130px;}
/*========== pref colour ==========*/
.mapArea > ul p {
	margin-bottom: 10px;
	width: 100%;
	font-size: 14px;
	position: relative;
	font-family: "Zen Maru Gothic", serif;
	font-weight: bold;
}
.mapArea > ul p::before,
.mapArea > ul p::after {
	content: "";
	position: absolute;
	border-bottom: 1px solid transparent;
  right: 0;
}
.mapArea > ul p::before {width: 20px;bottom: 10px;}
.mapArea > ul p::after {width: 6px;bottom: 12px;transform: rotate(45deg);}
.mapArea > ul:nth-child(1) p {color: #F59795;border-bottom: 3px solid #F59795;width: 100px;}
.mapArea > ul:nth-child(1) p a {color: #F59795;}
.mapArea > ul:nth-child(2) p {color: #F9A75D;border-bottom: 3px solid #F9A75D;}
.mapArea > ul:nth-child(2) p a {color: #F9A75D;}
.mapArea > ul:nth-child(3) p {color: #D4E05A;border-bottom: 3px solid #D4E05A;}
.mapArea > ul:nth-child(3) p a {color: #D4E05A;}
.mapArea > ul:nth-child(4) p {color: #FFDE4E;border-bottom: 3px solid #FFDE4E;}
.mapArea > ul:nth-child(4) p a {color: #FFDE4E;}
.mapArea > ul:nth-child(5) p {color: #A9DBF7;border-bottom: 3px solid #A9DBF7;}
.mapArea > ul:nth-child(5) p a {color: #A9DBF7;}
.mapArea > ul:nth-child(6) p {color: #9CD19C;border-bottom: 3px solid #9CD19C;}
.mapArea > ul:nth-child(6) p a {color: #9CD19C;}
.mapArea > ul:nth-child(7) p {color: #61A9C9;border-bottom: 3px solid #61A9C9;}
.mapArea > ul:nth-child(7) p a {color: #61A9C9;}
.mapArea > ul:nth-child(8) p {color: #F9B9F7;border-bottom: 3px solid #F9B9F7;}
.mapArea > ul:nth-child(8) p a {color: #F9B9F7;}
.mapArea > ul:nth-child(9) p {color: #C797C4;border-bottom: 3px solid #C797C4;}
.mapArea > ul:nth-child(9) p a {color: #C797C4;}
/* arrow colour */
.mapArea > ul:nth-child(1) p::before, .mapArea > ul:nth-child(1) p::after {border-color: #F59795;}
.mapArea > ul:nth-child(2) p::before, .mapArea > ul:nth-child(2) p::after {border-color: #F9A75D;}
.mapArea > ul:nth-child(3) p::before, .mapArea > ul:nth-child(3) p::after {border-color: #D4E05A;}
.mapArea > ul:nth-child(4) p::before, .mapArea > ul:nth-child(4) p::after {border-color: #FFDE4E;}
.mapArea > ul:nth-child(5) p::before, .mapArea > ul:nth-child(5) p::after {border-color: #A9DBF7;}
.mapArea > ul:nth-child(6) p::before, .mapArea > ul:nth-child(6) p::after {border-color: #9CD19C;}
.mapArea > ul:nth-child(7) p::before, .mapArea > ul:nth-child(7) p::after {border-color: #61A9C9;}
.mapArea > ul:nth-child(8) p::before, .mapArea > ul:nth-child(8) p::after {border-color: #F9B9F7;}
.mapArea > ul:nth-child(9) p::before, .mapArea > ul:nth-child(9) p::after {border-color: #C797C4;}
/*==============================
検索結果
==============================*/
.jyuku_compare_h2 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0 26px;
}
.hit_area {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
  border-bottom: 2px solid #32BBA9;
  padding-bottom: 3px;
}
.hit_area .check_notice {
	color: #32BBA9;
	font-size: 20px;
	font-weight: bold;
  font-family: "Zen Maru Gothic", serif;
}
.hit_area span.font_red {color: #E23E3E}
.hit_area span.font_red span {font-size: 29px;}
.hit_area .ttlNum {font-size: 15px;}
.block_list_box .list_box {
  border-radius: 10px;
  border: 2px solid #E5E5E5;
  padding: 20px 31px 20px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.block_list_box .parttime_list_box {
  border-radius: 10px;
  border: 2px solid #E5E5E5;
  padding: 18px 17px 9px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.jyuku_compare input {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
}
.chk_area {width: 30px;padding-top: 5px;}
.chk_area label {
	overflow: hidden;
  position: relative;
  width: 30px;
  height: 30px;
}
.chk_area label input[type="checkbox"] {appearance: none;display: none;}
.chk_area label span::before {
	content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  left: 0;
  z-index: 1;
  border: 1px solid #707070;
  border-radius: 2px;
}
.chk_area label input[type="checkbox"]:checked + span::before {background: #707070;border: 1px solid #707070;}
.chk_area label input[type="checkbox"]:checked + span::after {
	content: "";
  position: absolute;
  top: 0;
  left: 7px;
  display: block;
  width: 12px;
  height: 16px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
  z-index: 3;
}
.detail_area {flex: 1;padding-left: 42px;padding-right: 20px;}
.detail_area .jyuku_scl_name {font-size: 26px;font-weight: bold;}
.detail_area .catch {font-size: 12px;color: #000;margin-bottom: 26px;}
.flag_dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 13px;
}
.parttime_list_box .flag_dl {justify-content: unset;}
.flag_dl dt {width: 60px;color: #00A4D4;font-size: 12px;}
.flag_dl dd {width: calc(100% - 60px);position: relative;bottom: 4px;}
.flag_dl dd.parttime {
  bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  width: 573px;
  height: 55px;
}
.flag_dl dd span {
  background: #3AABD2;
  border-radius: 2px;
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 1px 10px;
  display: inline-block;
  margin-bottom: 4px;
}
.detail_area .notes {color: #464646;font-size: 14px;}
.parttime_list_box .notes {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 31
  -webkit-box-orient: vertical;
}
.img_area {width: 140px;margin-top: 10px;}
.parttime_list_box .img_area {width: 154px;}
.parttime_list_box .img_area figure {height: 105px;}
.parttime_list_box .img_area figure img {object-position: top;}
.img_area figure {text-align: center;margin-bottom: 14px;width: 140px;}
.img_area figure img {object-fit: cover;width: 100%;height: 100%;}
.img_area a {color: #04C2FF;font-size: 14px;font-weight: bold;}
/* pagenation */
ul.pagenation {display: table;margin: 0 auto;}
ul.pagenation li:not(.prev):not(.next):not(.mid) {width: 32px;}
ul.pagenation li:not(.mid) {border-top: 1px solid #C7C7C7;border-bottom: 1px solid #C7C7C7;}
ul.pagenation li {text-align: center;float: left;line-height: 15px;}
ul.pagenation li.on {
  border-bottom: 4px solid #32BBA9;
  box-sizing: border-box;
  height: 30px;
  width: 31px;
  padding: 7px 0 6px;
  font-size: 16px;
}
ul.pagenation li a {
  display: block;
  color: #333;
  font-size: 16px;
  padding: 7px 0 6px;
}
ul.pagenation li.page{border-left:1px solid #C7C7C7;border-right:1px solid #C7C7C7;}
ul.pagenation li.page + li.page{border-left:0;border-right:1px solid #C7C7C7;}
ul.pagenation li.prev {margin-right: 10px;}
ul.pagenation li.next {margin-left: 10px;}
ul.pagenation li.prev a,
ul.pagenation li.next a{padding: 7px 8px 6px 9px;}
ul.pagenation li.mid{padding: 7px 10px 6px;}
ul.pagenation li.prev,
ul.pagenation li.lastpage,
ul.pagenation li.next{border: 1px solid #C7C7C7;}
p.show_num {font-size: 12px;text-align: center;}
/* floating button */
.jyuku_check_btn {
  position: fixed;
  left: 50%;
  bottom: 10px;
  width:477px;
  height:67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #FFB300;
  border-radius: 7px;
  box-shadow: 0 2px 3px #00000029;
  background: #FFFFFF;
  transform: translateX(-50%);
}
.jyuku_check_btn p {
  font-size: 24px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  color: #FFB300 !important;
}
.jyuku_check_btn p:nth-child(1) {
  width: 160px;
  padding-right: 22px;
  border-right: 2px solid #FFB300;
  text-align: right;
}
.jyuku_check_btn p:nth-child(1).full {border-right: 2px solid #fff;}
.jyuku_check_btn p:nth-child(2) {flex: 1;position: relative;padding-left: 15px;}
.jyuku_check_btn p:nth-child(2)::after {
  content: "▶";
  color: white;
  position: absolute;
  right: 26px;
  top: 5px;
  font-size: 17px;
}
.jyuku_check_btn.full {background: #FFB300;}
.jyuku_check_btn.full p {color: white !important;}
.jyuku_check_btn.full p:nth-child(1) {border-right-color: white;}
.jyuku_check_btn.more {border: 1px solid #FFFFFF;background: #000000;}
/*==============================
比較
==============================*/
.slide_wrap {position: relative;}
ul.compare_shogakukin_vert{display:flex;overflow-y: auto;height: 900px;}
ul.compare_shogakukin_vert li {width: calc(20% - 26px * 4 / 5);margin-right:30px;}
ul.compare_shogakukin_vert li p{
  color:#333;
  font-size:12px;
  overflow: hidden;
  word-break: break-all;
}
.compare_name {
  border: 0.5px solid #32BBA9;
  height: 165px;
  border-radius: 5px;
  padding-top: 11px;
  padding-left: 11px;
  font-size: 16px;
  color: #32BBA9;
  font-weight: bold;
  position: relative;
}
.compare_name a {color: #32BBA9;}
.compare_name .tag {position: absolute;bottom: 11px;left: 11px;}
.compare_name .tag span {
  font-size: 13px;
  color: #333;
  background: #EFFFE9;
  padding: 1px;
  min-width: 97px;
  text-align: center;
  display: inline-block;
}
.compare_name .tag span + span {margin-top:5px;}
.compare_intro{
  background: #C0E9E4;
  margin: 20px 0 7px;
  padding: 5px 0 4px;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
}
.learn_more {
  text-align: center;
  display: block;
  font-size: 15px;
  color: #333;
  margin-top: 10px;
}
.learn_more:hover {text-decoration: none;color: #333;}
ul.compare_shogakukin_vert ul.icon {display: flex;flex-wrap: wrap;gap: 2px 2px;}
ul.compare_shogakukin_vert ul.icon li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  background: #D4D4D4;
  color: #fff;
  text-align: center;
  margin-right: 0px;
  line-height: 15px;
}
ul.compare_shogakukin_vert ul.icon li.on {background: #3AABD2;}
ul.compare_shogakukin_vert ul.target li {width: 27px;padding: 6px 0;}
ul.compare_shogakukin_vert ul.target li.sgt {width: 86px;margin-right: 80px;}
ul.compare_shogakukin_vert ul.feature li {width: 85px;height: 36px;}
#modal {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(170, 170, 170, .19);
  width: 100vw;
  height: 100vh;
  z-index: 999;
}
.modal_cnt {
  position: relative;
  top: 25vw;
  width: 670px;
  margin: auto;
}
.modal_cnt_inner {
  background: white;
  padding: 100px 74px 60px;
  overflow: auto;
  max-height: 250px;
  border-radius: 18px;
}
#modal .close_btn {
  position: absolute;
  display: block;
  top: 25px;
  right: 30px;
}
ul.compare_shogakukin_vert li {width: 172px;height: max-content;}
ul.compare_shogakukin_vert .compare_name {
  height: 205px;
  padding: 0;
  position: sticky;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 1;
}
ul.compare_shogakukin_vert .compare_name .scl_nm {
  margin: 8px 5px 10px 5px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}
ul.compare_shogakukin_vert .compare_name .shogakukin_nm {
  margin: 0 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
ul.compare_shogakukin_vert .compare_name .shogakukin_nm {
  margin: 0 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
ul.compare_shogakukin_vert figure {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  height: 145px;
  display: flex;
  align-items: center;
}
ul.compare_shogakukin_vert figure img {width: 100%;}
ul.compare_shogakukin_vert figure.noImage {
  height: 145px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #CBCBCB;
}
ul.compare_shogakukin_vert figure.noImage img {
  width: auto;
  width: 60px;
  object-fit: contain;
}
ul.compare_shogakukin_vert .gallery_cell .sub_img {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
ul.compare_shogakukin_vert .gallery_cell figure {border-radius: 5px;}
ul.compare_shogakukin_vert .gallery_cell .main_img figure {width: 172px;height: 172px;}
ul.compare_shogakukin_vert .gallery_cell .sub_img figure {width: 83px;height: 83px;}
ul.compare_shogakukin_vert .bdr_btm {border-bottom: 1px solid #707070;}
.addr_cell > div {padding-top: 50px;font-size: 12px;font-weight: bold;}
.addr_cell .addr {
  background: url(/images/oc_compare/addr03.png) no-repeat center top;
  margin-bottom: 13px;
}
.siryou_btn {
  background: #30b8a8;
  color: white !important;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
  height: 29px;
  display: inline-block;
  padding: 7px 17px 6px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}