@charset "utf-8";
/*=====================================
common
=====================================*/
html {font-size: 62.5%;}
body {font-size: 1.4em;}
#mainContent {width: 1062px;background: white;}
.eigo_compare {width: 1062px;color: #333333;margin: 0 auto;}
.eigo_compare * {box-sizing: border-box;}
.eigo_compare a {transition: .2s;}
.eigo_compare a:hover {opacity: .7;text-decoration: none;}
.eigo_compare figure {padding: 0;margin: 0;}
.eigo_compare_mv {margin: 45px 0 90px;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
=====================================*/
#hikaku{padding: 30px 42px 18px;background: #EFFFE9;}
.eigo_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: 410px;}
.searchTbl_hikaku td:nth-child(2) {width: 210px;}
.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 8px center; background-size: 34px;}
.searchTbl_hikaku td .format_hikakuBox {background: url(../images/keishiki_icon.png) no-repeat left 6px center; background-size: 36px;}
.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: 70px;
  cursor: pointer;
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
}
.searchTbl_hikaku td div .pref_hikakuvalue {position: relative;margin-left: 60px;width: 230px;}
.searchTbl_hikaku td div .pref_hikakuvalue::after {
	content: "";
  position: absolute;
  right: 0px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #32BBA9;
  border-right: 3px solid #32BBA9;
  transform: rotate(45deg);
}
.searchTbl_hikaku td div .area_hikakuvalue {margin-left: 0;}
.eigo_compare .pulldownArea {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
}
.eigo_compare .pulldownArea .areaInner {position: relative;}
.eigo_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;
}
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku:nth-child(2) {left: 410px;}
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku:nth-child(3) {left: 620px;}
/*------ プルダウン　セル設定 ------*/
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 ul{height: 430px;overflow: scroll;}
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku ul.cate li,
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail ul li,
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 ul li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  color: #100F0F;
}
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku ul.cate li:hover,
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail ul li:hover,
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 ul li:hover {background: #32BBA9;color: white;}
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail,
.eigo_compare .pulldownArea .areaInner .listwrap_hikaku .detail2 {border-left: 1px solid #C7C7C7;}
/*=====================================
Search from location
=====================================*/
.eigo_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;}
/*==============================
検索結果
==============================*/
.eigo_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;
  margin-bottom: 8px;
  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;}
.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;
}
.eigo_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: #3AABD2;border: 1px solid #3AABD2;}
.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;}
.detail_area .eigo_scl_name {font-size: 26px;font-weight: bold;}
.detail_area .branch {font-size: 18px;font-weight: bold;margin-bottom: 19px;}
.flag_dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.flag_dl dt {width: 60px;color: #00A4D4;font-size: 12px;}
.flag_dl dd {width: calc(100% - 60px);position: relative;bottom: 4px;}
.flag_dl dd span {
  background: #3AABD2;
  border-radius: 2px;
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 7px;
}
.detail_area .notes {color: #464646;font-size: 14px;}
.img_area {width: 140px;margin-top: 10px;}
.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 */
.oc_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%);
}
.oc_check_btn p {
  font-size: 24px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  color: #FFB300 !important;
}
.oc_check_btn p:nth-child(1) {
  width: 80px;
  padding-right: 22px;
  border-right: 2px solid #FFB300;
  text-align: right;
}
.oc_check_btn p:nth-child(1).full {border-right: 2px solid #fff;}
.oc_check_btn p:nth-child(2) {flex: 1;position: relative;text-align:center;}
.oc_check_btn p:nth-child(2)::after {
  content: "▶";
  color: white;
  position: absolute;
  right: 26px;
  top: 5px;
  font-size: 17px;
}
.oc_check_btn.full {background: #FFB300;}
.oc_check_btn.full p {color: white !important;}
.oc_check_btn.full p:nth-child(1) {border-right-color: white;}
.oc_check_btn.more {border: 1px solid #FFFFFF;background: #000000;}
/*==============================
比較
==============================*/
.slide_wrap {position: relative;padding: 0 31px;}
.tx_ctr {text-align: center;}
ul.eigo_compare_vert {display: flex;height: 900px;overflow-y: auto;}
ul.eigo_compare_vert a {transition: .2s;}
ul.eigo_compare_vert a:hover {text-decoration: none;opacity: .7;}
ul.eigo_compare_vert > li {
  width: calc(20% - 31px * 4 / 5);
  color: #333;
  font-size: 16px;
  margin-right: 31px;
  height: max-content;
}
ul.eigo_compare_vert > li:nth-child(5) {margin-right: 0;}
ul.eigo_compare_vert figure {margin: 0;padding: 0;overflow: hidden;}
ul.eigo_compare_vert figure img {width: 100%;height: 100%;}
ul.eigo_compare_vert .bdr_btm {border-bottom: 1px solid #707070;}
ul.eigo_compare_vert .eigo_head {
  border-radius: 5px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px solid #32BBA9;
}
ul.eigo_compare_vert .eigo_head figure {border-radius: 5px 5px 0 0;height: 121px;}
ul.eigo_compare_vert .eigo_head .scl_txt {padding: 16px 5px 10px;background: white;border-radius: 0 0 5px 5px;}
ul.eigo_compare_vert .eigo_head .scl_name {font-weight: bold;margin-bottom: 8px;}
ul.eigo_compare_vert .eigo_head .branch {font-size: 12px;}
.detail_cell .term {
  background: #C0E9E4;
  font-size: 12px;
  text-align: center;
  padding: 3px 5px 2px;
  margin: 20px 0 10px;
}
.detail_cell .description p {
  font-size: 12px;
  line-height: 19px;
  height: 188px;
  overflow: hidden;
  margin-bottom: 10px;
}
.detail_cell .description a {display: block;margin: 0 auto;text-align: center;}
ul.flag_ul {display: flex;justify-content: space-between;flex-wrap: wrap;}
ul.flag_ul li {
  width: calc(50% - 1px);
  background: #3AABD2;
  border-radius: 2px;
  text-align: center;
  color: white;
  padding: 4px 0;
  margin-bottom: 2px;
}
ul.flag_ul li.no {background: #D4D4D4;}
ul.flag_ul.teacher li {width: 100%;}
.detail_cell .traffic {
  background: url(../images/traffic_icon.png) no-repeat center top 10px;
  margin-top: 20px;
  padding-top: 60px;
  border-top: 1px solid #707070;
}
.detail_cell .how_to_get {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 5px;
}
.detail_cell .learn_info {
  color: #00C2FF;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
}
/*----- modal -----*/
#modal {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(170,170,170,.19);
  width: 100vw;
  height: 100vh;
  z-index: 999;
}
#modal * {box-sizing: border-box;text-decoration: none;}
#modal p {color: #333;}
.modal_cnt {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 670px;
}
.modal_cnt_inner {
  font-size: 16px;
  line-height: 24px;
  background: white;
  padding: 94px 74px 117px;
  position: relative;
  overflow: auto;
  max-height: 676px;
  border-radius: 18px;
}
#modal .close_btn {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}