@charset "utf-8";

/*==============================
common
==============================*/
.ctr {text-align: center;}
.mt5 {margin-top: 5px !important;}
.mb5 {margin-bottom: 5px !important;}
.mt43 {margin-top: 43px !important;}
.mb45 {margin-bottom: 45px !important;}
.ml80{margin-left: 80px !important;}
.fz10{font-size: 10px !important;}
.fz16{font-size: 16px !important;}
#mainContent {width: 1062px;}
.topicpath {padding: 0 42px; margin-bottom:0;}
.corresp_search_mv {text-align: center;}
.corresp_search_h2 {
	color: #27BBEF;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  font-size: 40px;
}
.corresp_search * {box-sizing: border-box;}
.corresp_search a {transition: .2s;}
.corresp_search a:hover {text-decoration: none;opacity: .7;}
.search_result_not_found {height: 150px;}
#cartBar {display: none !important;}
/*==============================
Top
==============================*/
/*----- map　search  -----*/
.map_sec {
	background: url(/common_img/correspondence/map_bg.jpg) no-repeat left 15px top;
	padding-top: 50px;
	margin-bottom: 110px;
}
.mapArea {
  background: url(https://school.js88.com/oc2021/map.gif) no-repeat center top 40px/350px;
  height: 620px;
  width: 1040px;
  margin: 0 auto;
  position: relative;
}
.mapArea > ul {
	position: absolute;
	width: 160px;
	overflow: hidden;
}
.mapArea ul li ul li {
	float: left;
	margin-right: 12px;
}
.mapArea ul li ul li a {
	font-size: 15px;
	color: #333;
  font-family: "Zen Maru Gothic", serif;
}
.mapArea ul p a {
  font-family: "Zen Maru Gothic", serif;
	font-weight: bold;
	font-size: 14px;
}
/* pref position */
.mapArea > ul:nth-child(1) {top: 30px; right: 170px;}
.mapArea > ul:nth-child(2) {top: 160px; right: 230px;}
.mapArea > ul:nth-child(3) {top: 260px; right: 200px;}
.mapArea > ul:nth-child(4) {top: 110px; left: 420px; width: 120px;}
.mapArea > ul:nth-child(5) {top: 210px; left: 380px; width: 120px;}
.mapArea > ul:nth-child(6) {bottom: 210px; left: 540px; width: 120px;}
.mapArea > ul:nth-child(7) {bottom: 120px; left: 400px; width: 140px;}
.mapArea > ul:nth-child(8) {top: 150px; left: 180px;}
.mapArea > ul:nth-child(9) {bottom: 210px; left: 160px; width: 130px;}
/* pref position */
.mapArea > ul p {
	margin-bottom: 10px;
	width: 100%;
	font-size: 14px;
	position: relative;
}
.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 {border-bottom: 3px solid #F59795; width: 100px;}
.mapArea > ul:nth-child(1) p a {color: #F59795;}
.mapArea > ul:nth-child(2) p {border-bottom: 3px solid #F9A75D;}
.mapArea > ul:nth-child(2) p a {color: #F9A75D;}
.mapArea > ul:nth-child(3) p {border-bottom: 3px solid #D4E05A;}
.mapArea > ul:nth-child(3) p a {color: #D4E05A;}
.mapArea > ul:nth-child(4) p {border-bottom: 3px solid #FFDE4E;}
.mapArea > ul:nth-child(4) p a {color: #FFDE4E;}
.mapArea > ul:nth-child(5) p {border-bottom: 3px solid #A9DBF7;}
.mapArea > ul:nth-child(5) p a {color: #A9DBF7;}
.mapArea > ul:nth-child(6) p {border-bottom: 3px solid #9CD19C;}
.mapArea > ul:nth-child(6) p a {color: #9CD19C;}
.mapArea > ul:nth-child(7) p {border-bottom: 3px solid #61A9C9;}
.mapArea > ul:nth-child(7) p a {color: #61A9C9;}
.mapArea > ul:nth-child(8) p {border-bottom: 3px solid #F9B9F7;}
.mapArea > ul:nth-child(8) p a {color: #F9B9F7;}
.mapArea > ul:nth-child(9) p {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;}
/*----- word　search  -----*/
.multi_sec {
	background: #D9F1FF;
	position: relative;
	padding: 200px 111px 51px;
	margin-bottom: 58px;
}
.multi_sec .multi_img {
	position: absolute;
	top: -100px;
  left: 190px;
}
.corresp_word_search {
  height: 48px;
  display: flex;
}
.corresp_word_search input[type="text"] {
  flex: 1;
  padding: 12px 12px 12px 30px;
  border: 1px solid #C7C7C7;
  border-radius: 3px 0 0 3px;
  color: #333;
  font-size: 14px;
  outline: none;
}
.corresp_word_search input[type="text"]::placeholder {
  color: #C7C7C7;
  font-size: 18px;
}
#pass_search_btn {
  width: 102px;
  border-radius: 0 3px 3px 0;
  font-weight: bold;
  color: white;
  background: #01AFEC url(https://school.js88.com/common_img/scl_dai/glassicon.png) no-repeat right 15px top 15px/18px;
  font-size: 16px;
  padding: 14px 0 0 25px;
}
/*----- present  -----*/
.ht_present {
  margin-bottom: 170px;
}
.bnr_box {
  width: 930px;
  height: 220px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(/common_img/correspondence/ht_present_bg1.png), url(/common_img/correspondence/ht_present_bg2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
}
/*----- search list  -----*/
.more_sec {padding: 0 42px;}
.more_sec .corresp_search_h2 {
	position: relative;
	border-bottom: 2px solid #27BBEF;
}
.corresp_search_h2 .more_btn {
	width: 274px;
	height: 39px;
	border: 1px solid #707070;
	border-radius: 25px;
	position: absolute;
	right: 0;
	top: 15px;
	font-size: 16px;
	color: #27BBEF;
	font-weight: bold;
	background: url(/common_img/correspondence/arrow.png) no-repeat right 20px center;
	padding: 5px 0 0 35px;
}
ul.corresp_h_list {
	display: flex;
	flex-wrap: wrap;
}
ul.corresp_h_list li {
	width: calc(33.333% - 16px * 2 / 3);
	margin: 0 16px 16px 0;
	border-radius: 10px;
	box-shadow: 0 3px 6px #00000029;
	overflow: hidden;
}
ul.corresp_h_list li:nth-child(3n) {margin-right: 0;}
ul.corresp_h_list.list li {
	width: calc(50% - 24px * 2 / 3);
	margin: 0 17px 23px 0;
	padding: 15px 7px 5px 5px;
}
ul.corresp_h_list.list li:nth-child(2n) {margin-right: 0;}
ul.corresp_h_list li .img {height: 145px;}
ul.corresp_h_list li .img img {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
}
ul.corresp_h_list li .img_list {
	height: 145px;
	display: flex; 
	justify-content: space-between;
	align-items: center;
}
ul.corresp_h_list li .img_list .img_box {
	width: calc(33% - 10px);
	height: 100%;
	margin: 0 5px;
	display: flex;
	align-items: center;
}
ul.corresp_h_list li .img_list .img_box img {
	max-height: 100%;
	max-width: 100%;
	border-radius: 10px;
}
ul.corresp_h_list li .btm_area {
	padding: 10px 10px 14px;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
}
ul.corresp_h_list li .corresp_h_name {
	font-size: 18px;
	color: #373737;
	margin-bottom: 5px;
}
ul.corresp_h_list.list li .corresp_h_name {
	font-size: 20px;
	font-weight: bold;
	line-height: 28px;
}
ul.corresp_h_list li .btn_box.checkArea {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 10px;
	position: relative;
}
ul.corresp_h_list li .btn_box.checkArea .areaNm {
	position: absolute;
	right: 0;
	color: #333;
  font-size: 14px;
}
ul.corresp_h_list li .btn_box {
	overflow: hidden;
	margin-top: 12px;
}
ul.corresp_h_list li .btn_box a {
	width: 145px;
	height: 30px;
	border-radius: 5px;
	color: white;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.corresp_h_list li .cart_btn {
	background: #F19A17;
	border: 1px solid #F19A17;
}
ul.corresp_h_list li .inputsize {display: none;}
ul.corresp_h_list li .inputsize:checked + .cart_btn {
	background: white;
	color: #F19A17;
	position: relative;
}
ul.corresp_h_list li .cart_btn::before {content: "資料請求カートに追加";}
ul.corresp_h_list li .inputsize:checked + .cart_btn::before {content: "資料請求カートに追加済";}
ul.corresp_h_list li .oc_attend_btn {
	background: #3179B8;
	border: 1px solid #3179B8;
	margin-left: 10px;
}
/*==============================
Result
==============================*/
.corresp_result_h2 {
	font-size: 24px;
	font-weight: bold;
	color: #333;
	padding: 0 42px;
	margin-bottom: 22px;
}
.gray_bg {
	background: #F6F6F6;
	padding: 31px 42px 27px;
}
.gray_bg .inner {position: relative;}
.searchBox {
	display: flex;
	justify-content: space-between;
	margin-top: 0 !important;
	border-radius: 10px;
	background: white;
	border: 1px solid #C9C9C9;
}
.searchBox .pull{
	padding: 8px 0;
	line-height: 1;
}
.searchBox .pull:nth-child(1){width: 205px;}
.searchBox .pull:nth-child(2){flex: 1;}
.searchBox .areaItem,
.searchBox .typeItem {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	padding-left: 28px;
}
.searchBox .typeItem {
	border-left: 1px solid #00A4D4;
}
.searchBox .areaItem .bubble,
.searchBox .typeItem .bubble {
	position: absolute;
  top: -25px;
  left: 26px;
  background: #27BBEF;
  color: white;
  font-size: 11px;
  line-height: 1;
  padding: 3px;
  width: 41px;
  text-align: center;
}
.searchBox .areaItem .bubble span,
.searchBox .typeItem .bubble span {position: relative;}
.searchBox .areaItem .bubble span::after,
.searchBox .typeItem .bubble span::after {
	content: "";
  border: 4px solid transparent;
  border-top-color: #27BBEF;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}
.searchBox .areaItem .value,
.searchBox .typeItem .value {
	font-size: 14px;
	color: #100F0F;
	margin: 5px 0 0 16px;
}
.searchBtn {
	width: 89px;
	background: #27BBEF url(https://school.js88.com/common_img/scl_dai/glassicon.png) no-repeat right 15px top 15px/18px;
	border-radius: 0 10px 10px 0;
	font-size: 16px;
	color: white;
	padding: 13px 0 0 18px;
}
.searchBtn:hover {color: white;}
/*pull down*/
.pulldownArea {
  position: absolute;
  top: 100%;
  left: 10px;
  z-index: 100;
  width: 100%;
}
.pulldownArea .listwrap {
  position: absolute;
  border: 1px solid #C7C7C7;
  border-top: none;
  top: 0;
  background: white;
  display: flex;
  box-shadow: 0 3px 6px #00000029;
}
.pulldownArea .listwrap.typePull {
  left: 195px;
}
.pulldownArea .areaInner .listwrap ul.cate li,
.pulldownArea .areaInner .listwrap .detail ul li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
  color: #100F0F;
}
.pulldownArea .areaInner .listwrap ul.cate li:hover,
.pulldownArea .areaInner .listwrap .detail ul li:hover {
  background: #27BBEF;
  color: white;
}
.pulldownArea .areaInner .listwrap .detail {border-left: 1px solid #C7C7C7;}
.cart_hit_area {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cart_area {
	background: url(/common_img/correspondence/cart_bg.png) no-repeat;
	display: flex;
  font-family: "Zen Maru Gothic", serif;
}
.cart_area p {
	font-size: 18px;
  color: #333;
  padding-left: 50px;
}
.cart_area p span {font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.cart_area p .ikkatuCartNum {
	color: #FF0000;
	font-size: 26px;
	margin: 0 11px;
	font-weight: bold;
}
.cart_area .pamph_seikyu {
	background: #F19A17;
	color: white;
	font-size: 16px;
	width: 302px;
  height: 39px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}
.cart_hit_area .hit_num {
	color: #3E3E3E;
	font-size: 15px;
}
/*keyword*/
.gray_bg.narrow_h {padding: 20px 42px 16px;}
.word_search_wrap {
	display: flex;
	justify-content: space-between;
	height: 56px;
}
.word_search_wrap .hit_num {
	background: white;
	width: 160px;
	margin-right: 40px;
	padding: 12px 8px 8px;
	font-size: 15px;
	font-weight: bold;
	color: #333;
	line-height: 1.1;
}
.word_search_wrap .hit_num span {
	font-size: 30px;
	color: #FF0000;
}
.word_search_wrap .right_box {flex: 1;}
.word_search_wrap .right_box input[type="text"] {
  border: 1px solid #C9C9C9;
  border-radius: 10px 0 0 10px;
  outline: none;
  padding: 15px 20px;
  font-size: 14px;
  color: #100F0F;
	flex: 1;
}
.word_search_wrap .right_box p {
	color: #100F0F;
	font-size: 14px;
	margin-top: 8px;
}
/* pagenation */
ul.pagenation {
  display: table;
  margin: 0 auto;
}
ul.pagenation li:not(.prev):not(.next):not(.mid) {
  width: 33px;
}
ul.pagenation li:not(.mid) {
  border-top: 1px solid #C7C7C7;
  border-bottom: 1px solid #C7C7C7;
}
ul.pagenation li {
  text-align: center;
  float: left;
  height: 31px;
  color: #333;
  font-size: 16px;
}
ul.pagenation li.on {
  border-bottom: 3px solid #3E5299;
  height: 31px;
  padding: 4px 0 2px;
}
ul.pagenation li a {
  display: block;
  color: #333;
  font-size: 16px;
  padding: 4px 0 2px;
}
ul.pagenation li.page{
	border-left:1px solid #C7C7C7;
	border-right:1px solid #C7C7C7;
}
ul.pagenation li + li {border-left: none;}
ul.pagenation li.page + li.page{
	border-left:0;
	border-right:1px solid #C7C7C7;
}
ul.pagenation li.prev {margin-right: 14px;}
ul.pagenation li.next {margin-left: 14px;}
ul.pagenation li.prev, ul.pagenation li.next {width: 111px;}
ul.pagenation li.mid{padding: 7px 4px 6px;}
ul.pagenation li.prev,
ul.pagenation li.lastpage,
ul.pagenation li.next{border: 1px solid #C7C7C7;}

#typeSet{
  position: absolute;
  display: none;
  border: 2px solid #C1C1C1;
  border-radius: 4px;
}
#typeSet.bArea1{top:61px;left: 602px;display: block;}
#typeSet.bArea2{top:191px;left: 535px;display: block;}
#typeSet.bArea3{top:290px;left: 566px;display: block;}
#typeSet.bArea4{top:141px;left: 313px;display: block;}
#typeSet.bArea5{top:356px;left: 424px;display: block;}
#typeSet.bArea6{top:241px;left: 265px;display: block;}
#typeSet.bArea7{top:442px;left: 284px;display: block;}
#typeSet.bArea8{top:181px;left: 86px;display: block;}
#typeSet.bArea9{top:331px;left: 66px;display: block;}

#typeSet.area1{top:61px;left: 602px;display: block;}

#typeSet.area2{top:227px;left: 537px;display: block;}
#typeSet.area3{top:227px;left: 578px;display: block;}
#typeSet.area4{top:227px;left: 621px;display: block;}
#typeSet.area5{top:227px;left: 662px;display: block;}
#typeSet.area6{top:257px;left: 537px;display: block;}
#typeSet.area7{top:257px;left: 578px;display: block;}

#typeSet.area8{top:329px;left: 567px;display: block;}
#typeSet.area9{top:329px;left: 610px;display: block;}
#typeSet.area10{top:329px;left: 651px;display: block;}
#typeSet.area11{top:329px;left: 693px;display: block;}
#typeSet.area12{top:353px;left: 567px;display: block;}
#typeSet.area13{top:353px;left: 610px;display: block;}
#typeSet.area14{top:353px;left: 658px;display: block;}

#typeSet.area15{top:180px;left: 307px;display: block;}
#typeSet.area19{top:180px;left: 349px;display: block;}
#typeSet.area20{top:180px;left: 390px;display: block;}

#typeSet.area16{top:278px;left: 266px;display: block;}
#typeSet.area17{top:278px;left: 309px;display: block;}
#typeSet.area18{top:278px;left: 350px;display: block;}

#typeSet.area21{top:393px;left: 426px;display: block;}
#typeSet.area22{top:393px;left: 467px;display: block;}
#typeSet.area23{top:393px;left: 510px;display: block;}
#typeSet.area24{top:418px;left: 426px;display: block;}

#typeSet.area25{top:484px;left: 286px;display: block;}
#typeSet.area26{top:484px;left: 328px;display: block;}
#typeSet.area27{top:484px;left: 370px;display: block;}
#typeSet.area28{top:508px;left: 286px;display: block;}
#typeSet.area29{top:508px;left: 328px;display: block;}
#typeSet.area30{top:508px;left: 379px;display: block;}

#typeSet.area31{top:218px;left: 65px;display: block;}
#typeSet.area32{top:218px;left: 109px;display: block;}
#typeSet.area33{top:218px;left: 150px;display: block;}
#typeSet.area34{top:218px;left: 193px;display: block;}
#typeSet.area35{top:243px;left: 65px;display: block;}
#typeSet.area36{top:243px;left: 109px;display: block;}
#typeSet.area37{top:243px;left: 150px;display: block;}
#typeSet.area38{top:243px;left: 193px;display: block;}
#typeSet.area39{top:270px;left: 65px;display: block;}

#typeSet.area40{top:370px;left: 46px;display: block;}
#typeSet.area41{top:370px;left: 87px;display: block;}
#typeSet.area42{top:370px;left: 131px;display: block;}
#typeSet.area43{top:393px;left: 46px;display: block;}
#typeSet.area44{top:393px;left: 87px;display: block;}
#typeSet.area45{top:393px;left: 131px;display: block;}
#typeSet.area46{top:419px;left: 53px;display: block;}
#typeSet.area47{top:419px;left: 102px;display: block;}

#typeSet .typeArea {
  position: relative;
  display: inline-block;
  padding: 5px 0px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #d9f1ff;
}
#typeSet .typeArea:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 134px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 13px solid #C1C1C1;
}
#typeSet .typeArea:after {
  content: "";
  position: absolute;
  top: -22px;
  left: 134px;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 15px solid #d9f1ff;
}
#typeSet .typeArea .subType {
  display: flex;
}
#typeSet .typeArea .subType li {
  padding: 5px 25px 0 20px;
  width: 128px;
}
#typeSet .typeArea .subType li+ li {
  border-left: 2px solid #C1C1C1;
  padding: 5px 20px 0 25px;
}
#typeSet .typeArea .subType a {
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: bold;
}
.btm_area .typeArea{
  color: #27BBEF;
  border: 1px solid #27BBEF;
  font-weight: bold;
  padding: 2px 8px;
  width: 100px;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
}
/*==============================
通信制　本部リスト
==============================*/
.linkArea {
    margin-bottom: 34px;
}
.linkArea ul {
  display: flex;
  justify-content: center;
}
.linkArea ul li {
  position: relative;
  list-style-type: none;
  font-size: 40px;
  color: #27BBEF;
  font-family: "Zen Maru Gothic", serif;
  font-weight: bold;
  border-bottom: 2px solid #27BBEF;
}
.linkArea ul li:before{
  content: '';
  border: 15px solid transparent;
  border-top: 20px solid #27BBEF;
  position: absolute;
  top: 28px;
  left: -40px;
}
.linkArea ul li a {
  color: #27BBEF;
}