@charset "utf-8";
/* CSS Document */
.sp_view{
  display: none;
}
.school__area {
  background: #fff;
  padding-top:140px;
}
.school__area .wrap {
  width: 1060px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.school__area .wrap h2.offer__ver {
  text-align: center;
  font-size: 70px;
  font-weight: 900;
  margin: 0;
  line-height: 1.6;
}
.school__area .wrap .reco__col {
  font-size: 50px;
  font-weight: bold;
  background: #8E0000;
  text-align: center;
  color: white;
  margin: 10px 0 0;
  line-height: 1.5;
  position: relative;
}
.school__area .wrap .deco3 {
  width: 228px;
  position: absolute;
  left: -20px;
  bottom: 0;
}


.school{
  padding: 130px 0 20px;
}
.school .school_inner{
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.school .school_inner figure{
  width: 42%;
}
.school .school_inner .right_area{
  width: 58%;
}
.school .school_inner .right_area div{
  width: 100%;
  border-radius: 5px;
  background: #fff;
  opacity: 1;
  display: flex;
  padding: 15px;
  margin-bottom: 20px;
}
.school .school_inner .right_area .kanto{
  border: 1px solid #d55c6a;
}
.school .school_inner .right_area .chubu{
  border: 1px solid #de8b54;
}
.school .school_inner .right_area .kinki{
  border: 1px solid #dfb33f;
}
.school .school_inner .right_area .kyushu{
  border: 1px solid #a9c63f;
}

.school .school_inner .right_area h3{
  width: 25%;
  font-weight: 600;
  font-size: 16px;
}
.school .school_inner .right_area .kanto h3{
  color: #d55c6a;
}
.school .school_inner .right_area .chubu h3{
  color: #de8b54;
}
.school .school_inner .right_area .kinki h3{
  color: #dfb33f;
}
.school .school_inner .right_area .kyushu h3{
  color: #a9c63f;
}
.school .school_inner .right_area ul{
  width: 75%;
  display: flex;
  flex-wrap: wrap;
}
.school .school_inner .right_area ul li{
  width: 23%;
  border-radius: 20px;
  margin: 0 1% 10px;
  padding: 5px 2px;
  text-align: center;
}

.school .school_inner .right_area .kanto ul li{
  background: #FBEEF0;
}
.school .school_inner .right_area .chubu ul li{
  background: #FCF3ED;
}
.school .school_inner .right_area .kinki ul li{
  background: #FBF6EB;
}
.school .school_inner .right_area .kyushu ul li{
  background: #F5F8EB;
}
.school .school_inner .right_area a{
  display: block;
  text-decoration: none;
  position: relative;
  font-size: 14px; 
}
.school .school_inner .right_area a::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 35%;
}

.school h2{
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	color: #c8113d;
	margin-bottom: 60px;
}


.school_tab ul.tab{
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: -40px auto -3px;
  justify-content: space-between;
  position: relative;
  z-index: 9;
}
.school_tab ul.tab li{
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  background: #8E0000;
  width: calc(95% / 3);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  border-radius: 10px 10px 0 0;
  color: #fff;
}
.school_tab ul.tab li:last-child{
    margin: 0;
}
.school_tab ul.tab li:hover{
    color: #fff;
    font-weight: bold;
}
.school_tab ul.tab li.active{
  opacity: 1;
  background-color: #fff;
  font-size: 1.8rem;
  z-index: 2;
  border-radius: 10px 10px 0 0;
  border-top: 3px solid #8E0000;
  border-right: 3px solid #8E0000;
  border-left: 3px solid #8E0000;
  color:#8E0000;
}
/*
.school_tab ul.tab li.active::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    background: none;
    border: 10px solid transparent;
    border-top: 10px solid #2d4fbf;
    top: 100%;
    margin-left: -10px;
}
*/
.school_tab div.tab_box{
  clear: both;
  display: none;
  width: 100%;
  margin: -3px auto 0;
  max-width: 1240px;
  background: #fff;
  z-index: 1;
  position: relative;
  border:3px solid #8E0000;
  padding: 20px;
  border-radius: 20px;
}

.school_tab div.active {
    display: block;
}


.map-container {
    position: relative;
    display: inline-block;
}
#railway-map-kanto,
#railway-map-tokai,
#railway-map-kansai {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background-color:#fff;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    display: none;
    max-width: 250px;
    z-index: 10; 
    line-height: 1.4; 
    margin: 0; 
  border:2px solid #000;
  font-size: 12px;
  min-width: 250px;
}
.tooltip .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #000;
    background-color: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
.school_name {
    font-weight: bold;
    font-size:14px;
}
a.ml_link{
  font-weight: bold;
  color:#8E0000;
}
.station-area {
    cursor: pointer;
}
@media screen and (max-width: 720px) {
.pc_view{
  display: none;
}  
.sp_view{
  display: block;
}
.school_tab ul.tab{
  margin: 20px auto -3px;
}
.school_tab ul.tab {
  width: 80%;
}
.school_tab ul.tab li{
    font-size:1.2rem;
    width: calc(95% / 3);
    height: 50px;
    margin: 5px 0;
  line-height: 1.2;
  }
.school_tab ul.tab li.active{
  font-size: 12px;
  line-height: 1.2;
}
.school_tab ul.tab li.active::after {
  display: none;
  }
.school_tab ul.tab li:last-child {
  margin: 5px 0;
  line-height: 1.2;
  font-size: 12px;
}
.school_tab div.tab_box {
  width: 95%;
  margin: -8px auto 0;
  padding: 30px 20px 20px;
  border-radius: 10px;
}
.tab_box .sch_list h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
    border-bottom: 1px dotted #000;
    padding: 0 0 15px 0;
  }
.tab_box .sch_list h3.mp_n{
    margin-bottom: 0;
    border-bottom:none;
    padding: 0;
  }

/*
.tab_box .sch_list h3::after {
  position: absolute;
  top:0;
  right: 5px;
  content: "＋";
  font-size: 1.6rem;
  padding:5px 10px;
  text-align: center;
  cursor: pointer;
}

.tab_box .sch_list h3.active::after {
  content: "－";
}
*/
.tab_box .sch_list h3 i{
  font-size: 2.6rem !important;
  vertical-align: text-top;
}
.tab_box .sch_list div{
    display:none;
  margin: 10px;
  font-size: 1.2rem;
  line-height: 1.4;
}
.tab_box .sch_list div .ml_link{
    font-weight: bold;
  color: #8E0000;
}

.tab_box .sch_list ul li{
  font-size: 1.4rem;
  margin-bottom: 10px;
  border-bottom: 1px solid #EEE;
  padding: 0 0 10px;
}
.tab_box .sch_list ul li i{
    font-size: 1rem;
    margin-right: 7px;
  }

.tab_box > :not(:first-child) {
  display: block !important;
}
 .school__area{
    background: #fff;
    padding: 40px 10px 0;
  }

  .school__area .wrap h2.offer__ver {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  line-height: 1.6;
}
.school__area h2.offer__ver.ver2 {
    font-size: 22px;
  margin: 0 0 30px !important; 
  }
.school__area h2.offer__ver.ver2::before {
  left: 100%;
  width: 60px !important;
}
.school__area h2.offer__ver.ver2::after {
  right: 100%;
  width: 60px !important;
}
.school__area .wrap .deco3 {
    width: 88px !important;
    left: -18px;
  }
.school__area .wrap .reco__col {
  font-size: 16px;
  padding: 5px 0;
}
	.school {
	  padding: 20px 0;
	  background-size: cover;
	}
	
	.school .school_inner{
	  display: block;
	  width: 100%;
	  margin: 0 auto;
	}
	.school .school_inner figure {
	  width: 90%;
	  margin: 0 auto;
	}
	.school .school_inner figure img{
	  width: 100%;
	}
	.school .school_inner .right_area {
	  width: 80%;
	  margin: 0 auto;
	  border: none;
	}
	.school .school_inner .right_area .kanto,
	.school .school_inner .right_area .chubu,
	.school .school_inner .right_area .kinki,
	.school .school_inner .right_area .kyushu{
	  border:none;
	}
	.school .school_inner .right_area div{
	  width: 100%;
	  display: block;
	  border: none;
	  background: none;
	  padding: 0;
	  margin-bottom: 10px;
	}
	.school .school_inner .right_area h3{
	  border-radius: 5px;
	  text-align: left;
	  font-size: 15px;
	  padding: 15px 20px;
	  width: 100%;
	  position: relative;
	}
	.school .school_inner .right_area .kanto h3 {
	  color: #fff;
	  background: #d55c6a;
	}
	.school .school_inner .right_area .chubu h3 {
	  color: #fff;
	  background: #de8b54;
	}
	.school .school_inner .right_area .kinki h3 {
	  color: #fff;
	  background: #dfb33f;
	}
	.school .school_inner .right_area .kyushu h3 {
	  color: #fff;
	  background: #a9c63f;
	}
	.school .school_inner .right_area h3::after {
	  position: absolute;
	  top: 10px;
	  right: 5px;
	  content: "＋";
	  font-size: 14px;
	  padding: 5px 10px;
	  text-align: center;
	  cursor: pointer;
	}
	.school .school_inner .right_area h3.active::after {
	  content: "－";
	}
	
	.school .school_inner .right_area ul {
	  display: none;
	  width: 100%;
	  border-radius: 5px;
	  background: #fff;
	  border: 1px solid #d55c6a;
	  margin-top: 10px;
	  padding: 15px;
	  overflow: hidden;
	}
	.school .school_inner .right_area .kanto ul{
	  border: 1px solid #d55c6a;
	}
	.school .school_inner .right_area .chubu ul{
	  border: 1px solid #de8b54;
	}
	.school .school_inner .right_area .kinki ul{
	  border: 1px solid #dfb33f;
	}
	.school .school_inner .right_area .kyushu ul{
	  border: 1px solid #a9c63f;
	}
	
	.school .school_inner .right_area ul li {
	  width: 48%;
	  float: left;
	}
	.school .school_inner .right_area ul li:last-child{
	  margin:0;
	}

}