/*　common　============================================================*/

.mt50 {margin-top: 50px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt100 {margin-top: 100px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}
.maxlength {width: 100% !important;}
.w150 {width: 150px !important;}
.w315 {width: 315px !important;}
.w700 {width: 700px !important;}
.full_width {width: 100%;}
.txt_ctr {text-align: center;}
.fl {float: left;}
.facility_info * {
  color: #333;
  box-sizing: border-box;
}
.search_sec *{color: #000000;}
.facility_info a {transition: .2s;}
.facility_info a:hover {text-decoration: none; opacity: .8;}
.facility_info h2 {
  font-size: 24px;
  font-weight: bold;
  word-break: break-all;
  color: #333;
}
.facility_info h2.blue_h2 {
  font-size: 20px;
  color: #003992;
  margin-bottom: 10px;
}
.facility_info h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.facility_info h3.blue_h3 {color: #003992;}
/*.facility_info table {width: 980px;}*/
.facility_info table th {font-weight: normal;}
.facility_info table th,
.facility_info table td {
  word-break: break-word;
}
.facility_info .campus-link {
  display: block;
  color: #003992;
  font-size: 16px;
}

.disabled-link {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}
.favorite:not(.preview) {cursor: pointer;}

.back_to_mypage {
  margin: 0 auto;
  width: 250px;
  display: block;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #003992;
  background: white;
  color: #003992;
  font-weight: bold;
  transition: .2s linear;
}
.back_to_mypage:hover {
  opacity: .7;
  color: #003992 !important;
}

/*　top　============================================================*/

.narrow_content {width: 980px !important; margin: 0 auto;}
dl.campus_outline {
  border: 1px solid #707070;
  padding: 50px 50px 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1.7;
}
dl.campus_outline dt, dl.campus_outline dd {color: #707070; font-weight: bold; font-size: 16px;}
dl.campus_outline dt {width: 120px; position: relative;}
dl.campus_outline dt::after {
  content: "";
  position: absolute;
  right: 0;
  top: 5px;
  border-right: 1px solid #707070;
  width: 0;
  height: 14px;
}
dl.campus_outline dd {width: calc(100% - 120px); padding-left: 20px; word-break: break-all;}
.inquiry_box {background: #eff3ff; padding: 40px 70px;}
.inquiry_box.bottom {padding-bottom: 60px;}
.inquiry_box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 80px;
  color: white;
  background: #ff8800;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0 auto;
}
.popup_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}
.popup_inquiry {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px 30px;
  border-radius: 6px;
  text-align: center;
  min-width: 280px;
}
.popup_inquiry button {
  margin-top: 10px;
  padding: 6px 16px;
}
.facility_tbl tr:not(:first-child) {border-bottom: 1px solid #ccc;}
.facility_tbl th {
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  padding: 5px 0;
  background: #eff3ff;
  color: #333;
  line-height: 1.3;
}
.facility_tbl th + th {
  border-left: 4px solid white;
}
.facility_tbl th:nth-child(2),.facility_tbl th:nth-child(3) {width: 175px;}
.facility_tbl th:nth-child(n+4) {width: 90px;}
.facility_tbl th span {font-size: 14px; color: #333;}
.facility_tbl td {
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
  word-break: break-all;
  vertical-align:middle;
}
.facility_tbl td:nth-child(1) {text-align: left;}
.facility_tbl td.facility_name {color: #3e5299; display: flex; align-items: center;}
.facility_tbl td.facility_name input[type="checkbox"] {margin-right: 15px;}
.facility_tbl td.facility_name .photo {
  width: 90px;
  margin-right: 15px;
  width: 91px;
  height: 68px;
}
.facility_tbl td.facility_name .photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.facility_tbl td.facility_name .favorite {width: 26px;}
.facility_tbl td.facility_name .favorite img {width: 100%;}
.facility_tbl a {flex: 1; margin-right: 10px; color: #3e5299; font-size: 16px;}
.result_area .facility_tbl a {font-weight: bold;}
.text_area {font-size: 16px; line-height: 1.9; word-break: break-all; color: #333;}
.notice {color: #FF0000 !important;}
.contact_ttl {
  color: #3e5299;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.contact_info {font-size: 18px; word-break: break-all; color: #333;}

/*　detail　============================================================*/

.topArea {display: flex; justify-content: space-between;}
.inquiry_btn {
  position: relative;
  display: flex;
  align-items: center;
}
.inquiry_btn .favorite #favorite-btn {width: 37px; height: 37px;}
.inquiry_btn a {
  display: flex;
  width: 250px;
  height: 60px;
  align-items: center;
  justify-content: center;
  color: white;
  background: #ff8800;
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
}
.slideArea {height: 300px;}
.bxslider img {width: 100%; height: 100%; object-fit: cover;}
.bx-wrapper .bx-controls-direction a {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.sliderArea .bx-wrapper .bx-next {right: 0;}
.sliderArea .bx-wrapper .bx-prev {left: 0;}
.bx-wrapper .bx-prev::after, .bx-wrapper .bx-next::after {
  width: 12px;
  height: 12px;
  top: 14px;
}
ul.equipment {
  display: flex;
  flex-wrap: wrap;
}
ul.equipment li {margin-right: 4px; margin-bottom: 4px;}
ul.equipment li img {height: 40px;}
.outline_tbl {width: 100%;}
.outline_tbl *,
.rent_price_tbl *,
.cancel_fee * {color: #000000;}

.outline_tbl th, .outline_tbl td {border: 1px solid #ccc; vertical-align: middle; font-size: 16px;}
.outline_tbl *:empty {border: none; background: none;}
.outline_tbl th {
  text-align: center;
  background: #f8f8f8;
  padding: 8px 0;
  width: 80px;
  height: 70px;
}
.outline_tbl td {padding: 15px; width: 246px !important;}
/*dl.rental_fee {font-size: 20px; font-weight: bold; align-items: baseline;}*/
dl.rental_fee > div {display: flex;}
dl.rental_fee > div + div {margin-top: 8px;}
dl.rental_fee dt {width: 150px; color: #000; font-size: 16px;}
dl.rental_fee .price {width: 74px; text-align: right; font-size: 16px; color: #333;}
dl.rental_fee .note {font-size: 14px; margin-left: 40px; color: #000;}
.rent_price_tbl th, .rent_price_tbl td {padding: 10px; border: 1px solid #ccc; font-size: 16px;}
.rent_price_tbl th {background: #f8f8f8; width: 400px;}
.facility_info h3.price {position:absolute}
.rent_price {margin-left: 70px;}
.rent_price span {display: inline-block;}
.rent_price .left {font-size: 13px; font-weight: bold; width: 70px;}
.rent_price .center {font-size: 20px; font-weight: bold; width: 120px; text-align: right;}
.rent_price .right {font-size: 10px; margin-left: 30px;}
.per_day {font-weight: normal; font-size: 13px;}
.rent_price_tbl td {padding-left: 20px;}
.rent_price_tbl caption {text-align: right; padding-bottom: 3px; font-size: 14px;}
.floor_plan div {
  position: relative; 
  border: 1px solid #ccc; 
  padding: 15px 20px;
  width: fit-content;
}
.floor_plan div::before {
  content: "";
  background: url(/../assets/plus_icon.png) no-repeat;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.photo_area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.photo_area div {
  width: 236px;
  height: 177px;
}
.photo_area div img {
  object-fit: contain;
  width: 100%;
  height: 100%
}
.photo_area.floor div {
  width: 480px;
  height: 296px;
  box-shadow: 0 3px 6px #00000029;
  border: 1px solid #707070;
  position: relative;
}
.enlargeBtn {
  display: block;
  width: 27px;
  height: 27px;
  background: #707070;
  position: absolute;
  top: 12px;
  right: 14px;
  border-radius: 50%;
}
.enlargeBtn::before, .enlargeBtn::after {
  content: "";
  position: absolute;
  display: block;
}
.enlargeBtn::before {
  top: 12px;
  left: 5px;
  border-bottom: 3px solid white;
  width: 17px;
}
.enlargeBtn::after {
  top: 5px;
  left: 12px;
  border-left: 3px solid white;
  height: 17px;
}
#imageOverlay .overlay-inner {
  background: #fff;
  max-width: 800px;
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#imageOverlay .overlay-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#closeImageOverlay {
  display: block;
  width: 27px;
  height: 27px;
  padding: 0;
  background: #707070;
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  border-radius: 50%;
}
#closeImageOverlay::before, #closeImageOverlay::after {
  content: "";
  position: absolute;
  display: block;
  transform: rotate(45deg);
}
#closeImageOverlay::before {
  top: 12px;
  left: 5px;
  border-bottom: 3px solid white;
  width: 17px;
}
#closeImageOverlay::after {
  top: 5px;
  left: 12px;
  border-left: 3px solid white;
  height: 17px;
}
.text_area.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
  justify-content: space-between;
}
.text_area.spec p {width: calc(50% - 20px); display: flex;}
.text_area.spec p .items {width: fit-content;}
.text_area.spec p .description {flex: 1;}
ul.caution {
  display: flex;
  flex-wrap: wrap;
}
ul.caution li {margin: 0 20px 5px 0;}
ul.caution li img {height: 40px;}
.slide_items .slide_item {margin-right: 4px; margin-left:4px; height: 240px; width: 320px;}
.slick-slide img {width: 100%; height: 100%; object-fit: contain;}
.prev-arrow,
.next-arrow {
  display: block;
  width: 25px;
  height: 25px;
  background: rgba(115, 115, 115, .65);
  border-radius: 3px;
  transition: all .3s ease;
  cursor: pointer;
  position:absolute;
  top: calc(50% - 10px);
  z-index: 1;
}
.prev-arrow {
  transform: rotate(180deg);
  margin-right: 20px;
  left: 4px;
}
.next-arrow {right: 4px;}
.prev-arrow::before,
.next-arrow::before{
  position:absolute;
  content: "";
  width:8px;
  height:8px;
  border-right: 3px solid #FFF;
  border-top: 3px solid #FFF;
  top:0;
  bottom:0;
  left: -5px;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}
.slide_items.is-preview .prev-arrow,
.slide_items.is-preview .next-arrow {
  pointer-events: none !important;
}
.slide_items.is-preview .slick-list {
  touch-action: none;
  pointer-events: none;
}
.previewArea {margin-top: 20px;}
.previewArea ul {margin-bottom: 20px;}
.previewArea ul li {
  display: inline-block;
  width: 160px;
  margin-bottom: 5px;
}
table.cancel_fee {width: auto;}
table.cancel_fee th, table.cancel_fee td {
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 10px 20px;
}
table.cancel_fee th {background: #f8f8f8;}

/*　facility top　============================================================*/

#mainContent {width: 1200px; padding-bottom: 100px;}
.rental_head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 40px 0 10px;
}
.rental_head > :last-child {margin-left: auto;}
.rental_head .more_facility_btn {
  border: 1px solid #003992;
  color: #003992;
  transition: .2s;
  margin-left: 30px;
  padding: 2px 10px;
  font-size: 13px;
}
.rental_head .more_facility_btn:hover {
  opacity: .5;
  text-decoration: none;
}
.rental_head #button_box a + a {margin-left: 24px;}
ul.breadcrumb {display: flex; margin-left: 12px;}
ul.breadcrumb li {position: relative; margin-right: 25px;}
ul.breadcrumb li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(-45deg);
  position: absolute;
  right: -12px;
  top: 6px;
}
ul.breadcrumb li:last-child::after {
  content: none;
}
ul.breadcrumb li img {vertical-align: baseline;}
ul.breadcrumb li a, ul.breadcrumb li span {font-size: 10px; color: #000;}
ul.breadcrumb li a:hover {text-decoration: none;}
.breadcrumb-title {
  display: inline-block;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.search_wrap {
  background: #f7f7f7;
  padding: 30px 80px 20px;
}
.search_wrap .inner {position: relative;}
.search_table {
  display: flex;
  justify-content: space-between;
  border: 1px solid #C7C7C7;
  background: white;
  border-radius: 2px;
}
.search_table > div {
  position: relative;
  margin: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.search_table .area_cell {
  /*border-right: 1px solid #003992;*/
  /* width: 240px; */
  width: 100%;
  background: url(../images/search_icon1.png) no-repeat left 20px center;
  background-size: 27px auto;
  padding-left: 60px;
}
.search_table .num_cell {
  flex: 1;
  background: url(../images/search_icon2.png) no-repeat left 45px center;
  background-size: 35px auto;
  padding-left: 100px;
}
.search_table .bubble {
  position: absolute;
  top: -24px;
  left: 20px;
  background: #003992;
  font-size: 10px;
  width: 35px;
  text-align: center;
}
.search_table .num_cell .bubble {left: 44px;}
.search_table .bubble span {
  position: relative;
  color: white;
}
.search_table .bubble span::after {
  content: "";
  position: absolute;
  border: 5px solid transparent;
  border-top-color: #003992;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-left-width: 4px;
  border-right-width: 4px;
}
.search_table div div {color: #333;}
.search_btn {
  display: block;
  background: #003992 url(../images/search_icon.png) no-repeat right 10px center / 18px auto;
  width: 80px;
  border-radius: 0 2px 2px 0;
  color: white;
  padding: 12px 20px 9px 14px;
  font-size: 16px;
  font-weight: bold;
}
.search_btn:hover {color: white;}
.pulldownArea {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
}
.pulldownArea .areaInner .listwrap {
  position: absolute;
  border: 1px solid #C7C7C7;
  border-top: none;
  top: 0;
  background: white;
  display: flex;
  box-shadow: 2px 2px 2px #c7c7c7;
}
.pulldownArea .areaInner .listwrap:nth-child(1) {left: 0;}
.pulldownArea .areaInner .listwrap:nth-child(2) {left: 240px;}
.pulldownArea .areaInner .listwrap ul.cate li, .pulldownArea .areaInner .listwrap .detail ul li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
}
.pulldownArea .areaInner .listwrap .detail {
  border-left: 1px solid #C7C7C7;
}
.pulldownArea .areaInner .listwrap ul.cate li:hover, .pulldownArea .areaInner .listwrap .detail ul li:hover {
  background: #003992;
  color: white;
}
.facility_info .section_h2 {
  color: #003992;
  text-align: center;
  font-size: 30px;
  margin-bottom: 40px;
}
.areaMap {
  background: url(https://school.js88.com/oc2021/map.gif) no-repeat center top;
  position: relative;
  height: 500px;
  width: 752px;
  margin: 0 auto;
}
.areaMap > ul {position: absolute;width: 160px;overflow: hidden;}
.areaMap ul li ul li {float: left;margin-right: 15px;}
.areaMap ul li ul li a {font-size: 14px; color: #333;}
/*========== pref position ==========*/
.areaMap > ul:nth-child(1) {top: 10px;right: 10px;}
.areaMap > ul:nth-child(2) {top: 130px;right: 80px;}
.areaMap > ul:nth-child(3) {top: 230px;right: 60px;}
.areaMap > ul:nth-child(4) {top: 70px;left: 270px;width: 120px;}
.areaMap > ul:nth-child(5) {top: 180px;left: 240px;width: 120px;}
.areaMap > ul:nth-child(6) {bottom: 120px;left: 400px;width: 120px;}
.areaMap > ul:nth-child(7) {bottom: 20px;left: 260px;width: 140px;}
.areaMap > ul:nth-child(8) {top: 120px;left: 30px;}
.areaMap > ul:nth-child(9) {bottom: 130px;left: 0;width: 130px;}
/*========== pref colour ==========*/
.areaMap > ul p {
  margin-bottom: 10px;
  width: 100%;
  font-size: 14px;
  position: relative;
}
.areaMap > ul p::before,
.areaMap > ul p::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid transparent;
  right: 0;
}
.areaMap > ul p::before {width: 20px;bottom: 10px;}
.areaMap > ul p::after {width: 6px;bottom: 12px;transform: rotate(45deg);}
.areaMap > ul:nth-child(1) p {border-bottom: 3px solid #F59795;width: 100px;}
.areaMap > ul:nth-child(1) p a {color: #F59795;}
.areaMap > ul:nth-child(2) p {border-bottom: 3px solid #F9A75D;}
.areaMap > ul:nth-child(2) p a {color: #F9A75D;}
.areaMap > ul:nth-child(3) p {border-bottom: 3px solid #D4E05A;}
.areaMap > ul:nth-child(3) p a {color: #D4E05A;}
.areaMap > ul:nth-child(4) p {border-bottom: 3px solid #FFDE4E;}
.areaMap > ul:nth-child(4) p a {color: #FFDE4E;}
.areaMap > ul:nth-child(5) p {border-bottom: 3px solid #A9DBF7;}
.areaMap > ul:nth-child(5) p a {color: #A9DBF7;}
.areaMap > ul:nth-child(6) p {border-bottom: 3px solid #9CD19C;}
.areaMap > ul:nth-child(6) p a {color: #9CD19C;}
.areaMap > ul:nth-child(7) p {border-bottom: 3px solid #61A9C9;}
.areaMap > ul:nth-child(7) p a {color: #61A9C9;}
.areaMap > ul:nth-child(8) p {border-bottom: 3px solid #F9B9F7;}
.areaMap > ul:nth-child(8) p a {color: #F9B9F7;}
.areaMap > ul:nth-child(9) p {border-bottom: 3px solid #C797C4;}
.areaMap > ul:nth-child(9) p a {color: #C797C4;}
/* arrow colour */
.areaMap > ul:nth-child(1) p::before, .areaMap > ul:nth-child(1) p::after {border-color: #F59795;}
.areaMap > ul:nth-child(2) p::before, .areaMap > ul:nth-child(2) p::after {border-color: #F9A75D;}
.areaMap > ul:nth-child(3) p::before, .areaMap > ul:nth-child(3) p::after {border-color: #D4E05A;}
.areaMap > ul:nth-child(4) p::before, .areaMap > ul:nth-child(4) p::after {border-color: #FFDE4E;}
.areaMap > ul:nth-child(5) p::before, .areaMap > ul:nth-child(5) p::after {border-color: #A9DBF7;}
.areaMap > ul:nth-child(6) p::before, .areaMap > ul:nth-child(6) p::after {border-color: #9CD19C;}
.areaMap > ul:nth-child(7) p::before, .areaMap > ul:nth-child(7) p::after {border-color: #61A9C9;}
.areaMap > ul:nth-child(8) p::before, .areaMap > ul:nth-child(8) p::after {border-color: #F9B9F7;}
.areaMap > ul:nth-child(9) p::before, .areaMap > ul:nth-child(9) p::after {border-color: #C797C4;}

.num_note {text-align: center; color: #000;}
.list_inner {padding: 0 80px;}
.num_wrap {display: flex; justify-content: space-between;}
ul.by_num {
  width: calc(50% - 8px);
  height: 220px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 120px 15px 15px;
}
ul.by_num.type1 {background-image: url(../images/num_bg1.png);}
ul.by_num.type2 {background-image: url(../images/num_bg2.png);}
ul.by_num li {
  background: rgba(255,255,255,.8);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  height: 40px;
  cursor: pointer;
}
ul.by_num li:hover, ul.by_size li:hover {opacity: .8;}
ul.by_num li:nth-child(-n+4) {width: 122px;}
ul.by_num li:nth-child(-n+3) {margin-bottom: 8px;}
ul.by_num li:nth-child(5) {width: 244px;}
ul.by_size {display: flex; flex-wrap: wrap;}
ul.by_size li {margin: 12px 12px 0 0; cursor: pointer;}
ul.by_size li:nth-child(-n+4) {margin-top: 0;}
ul.by_size li:nth-child(4n) {margin-right: 0;}

ul.room_num_list {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  margin: 0 auto;
}
ul.room_num_list li {width: 310px;margin: 35px 35px 0 0;}
ul.room_num_list li:nth-child(3n) {margin-right: 0;}
ul.room_num_list li:nth-child(-n+3) {margin-top: 0;}
ul.room_num_list img {width: 100%;}

/*　search result　============================================================*/

.result_wrap {display: flex; align-items: flex-start;}
.result_wrap.no_side_menu {justify-content: center;}
.search_sec {
  border: 1px solid #E5E5E5;
  box-shadow: 2px 2px 4px #c7c7c7;
  width: 288px;
  padding: 15px 20px 40px;
  font-size: 12px;
  color: #000000;
}

.search_sec section {border-bottom: 1px solid #C7C7C7; padding: 20px 0;}
.search_sec .title {margin-bottom: 20px; font-size: 16px;}
.search_sec .title span {font-weight: bold; font-size: 20px;}
dl.area_st {display: flex; flex-wrap: wrap; margin: 15px 0 0 4px; font-size: 14px;}
dl.area_st dt {width: 70px; font-weight: bold;}
dl.area_st dd {flex: 1; position: relative; cursor: pointer;}
dl.area_st dt, dl.area_st dd {margin-top: 15px;}
dl.area_st dt:first-of-type, dl.area_st dd:first-of-type {margin-top: 0;}
dl.area_st dd::after {
  content: "";
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(-45deg);
  position: absolute;
  right: 5px;
  top: 7px;
}
.search_sec select {
  width: 100%;
  padding: 5px;
  cursor: pointer;
  border: 1px solid #707070;
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.selectWrap2 {position: relative;}
.selectWrap2::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(-45deg);
  width: 3px;
  height: 3px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

.search_sec select:invalid {color: #999;}
.search_sec select:focus {outline: none;}
.search_sec select option { color: #333;}
.search_sec .flex {display: flex; align-items: center; justify-content: space-between;}
.search_sec .flex select {width: 108px;}
.search_sec .duration {font-size: 14px;}
.search_sec .duration select {width: 160px;}
.search_sec .flex.min_max select:first-child::after {content: "～";} 
.non_flex label {display: flex; margin-bottom: 8px; align-items: center; font-size: 14px;}
input[type="radio"] {margin-right: 5px; accent-color: #003992; width: 15px; height: 15px; margin-bottom: 2px;}
input[type="checkbox"] {width: 15px; height: 15px;}
.search_sec .btn_p {text-align: center; font-size: 14px; margin-bottom: 10px;}
.search_sec .submit_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #003992;
  color: white;
  font-size: 16px;
  font-weight: bold;
  height: 50px;
  border-radius: 30px;
}

.result_area {/*width: 980px; margin-left: 30px;*/}
.result_area section {border-bottom: 1px solid #000000; padding: 30px 0;}
.result_area.no_border section { border-bottom: none;}
.result_area section:first-child {padding: 0 0 15px;}
.result_area .result_ttl {font-weight: bold; font-size: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; color: #333;}
.result_area .result_ttl .view_more {
  display: block;
  background: #003992;
  color: white;
  font-size: 14px;
  padding: 7px;
  width: 250px;
  text-align: center;
  align-self: flex-start;
  flex-shrink: 0;
}
.result_area .result_ttl p {
  word-break: break-all;
  text-align-last: left;
  margin-right: 1em;
  color: #333;
}
.result_area .hit_num {color: #333;}
.result_area .hit_num span {font-size: 20px; font-weight: bold; color: #333;}
.result_area .total_num {text-align: right; color: #333;}
dl.campus_info {display: flex; flex-wrap: wrap;}
dl.campus_info dd + dt, dl.campus_info dd + dt + dd {margin-top: 10px;}
dl.campus_info dt {width: 40px; text-align: left;}
dl.campus_info dt img {width: 20px;}
dl.campus_info dd {width: calc(100% - 40px); line-height: 1.8;}
.result_area .facility_tbl th:nth-child(1) {width: 290px;}
.result_area .facility_tbl th:nth-child(n+2):nth-child(-n+3) {width: 110px;}
.result_area .facility_tbl th:nth-child(n+4):nth-child(-n+6){width: 100px;}
.result_area .facility_tbl th:last-child {width: 40px;}
.facility_tbl .heart_td {position: relative; font-size: 22px; color: #ccc; cursor: pointer;}
.facility_tbl .heart_td.on {color: #ff8383;}
.facility_tbl .heart_td::before {
  content: "";
  position: absolute;
  right: 6px;
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.result_area .facility_tbl .top_tr {position: relative;}
.result_area .facility_tbl td.fav_cell {width: 26px;}
.result_area .facility_tbl .favorite img {
  width: 26px;
}
.result_area .facility_tbl .top_tr .note {
  position: absolute;
  top: 3px;
  color: #ff0000;
  font-size: 10px;
  transform: scale(.9);
}
.result_area a.all_btn {
  display: block;
  width: 260px;
  padding: 2px;
  text-align: center;
  font-weight: bold;
  border: 2px solid #003992;
  color: #003992;
  font-size: 13px;
  margin: 0 auto;
}

/* ページング */
.paging-area {margin-top: 20px;}
ul.pager {display: table;margin: 0 auto;}
ul.pager li:not(.prev):not(.next):not(.mid) {width: 32px;}
ul.pager li:not(.mid) {border-top: 1px solid #C7C7C7;border-bottom: 1px solid #C7C7C7;}
ul.pager li {text-align: center;float: left;line-height: 15px;}
ul.pager li.on {
  border-bottom: 4px solid #3e5299;
  box-sizing: border-box;
  height: 30px;
  width: 31px;
  padding: 7px 0 6px;
  font-size: 13px;
}
ul.pager li a {
  display: block;
  color: #333;
  font-size: 13px;
  padding: 7px 0 6px;
}
ul.pager li.page{border-left:1px solid #C7C7C7;border-right:1px solid #C7C7C7;}
ul.pager li.page + li.page{border-left:0;border-right:1px solid #C7C7C7;}
ul.pager li.prev {margin-right: 10px;}
ul.pager li.next {width: auto; margin: auto; margin-left: 10px;}
ul.pager li.prev a,
ul.pager li.next a{padding: 7px 8px 6px 9px;}
ul.pager li.mid{padding: 7px 10px 6px;}
ul.pager li.prev,
ul.pager li.lastpage,
ul.pager li.next{border: 1px solid #C7C7C7;}

/*　footer　============================================================*/

footer {padding: 0 100px;}
.upper_footer {
  padding-top: 50px;
  border-top: 2px solid #003992;
  display: flex;
  justify-content: space-between;
}
.upper_footer .links {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-right: 100px;
}
.links dl {width: 33.3333%; font-size: 11px;}
.links dl dt {
  color: #003992;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
}
.links dl dd {margin-bottom: 3px;}
.links dl dd + dt {margin-top: 18px;}
.links dl dd a {color: #000; font-size: 12px;}
.upper_footer .privacy {
  width: 300px;
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  padding-bottom: 25px;
  margin-right: 30px;
}
.upper_footer .privacy img {width: 95px !important; height: auto !important;}
.lower_footer {text-align: center;}
.lower_footer .copyright {font-size: 11px;margin-top: 20px;}

/*　newmember　============================================================*/

.txtctr {text-align: center;}
.formArea, .loginBox, .proc_payment_select {background: white; padding: 30px 0 90px;}
.formArea * {line-height: 1.5;}
.innerBox01 {width: 760px; margin: 0 auto;}
.formArea .ttl {margin-bottom: 32px;}
.formArea .ttl span, .loginBox .ttl span, .proc_payment_select .ttl span {
  font-size: 28px;
  font-weight: bold;
  color: #000;
}
.innerBoxatt {padding: 0 40px 40px 0;}
.formArea.pw {padding: 70px 70px 100px;}
.formArea .pdg40 {margin: 40px 0 80px;}
.formArea .cellWrap {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  justify-content: normal;
}
.formArea .cellWrap.newmember {justify-content: inherit;}
.cellWrap .label {
  width: 25%;
  font-size: 16px;
  text-align: left;
  color: #000;
}
.formArea .txtctr a {text-decoration: underline;}
.cellWrap input[type="email"], .cellWrap input[type="text"], .cellWrap input[type="password"] {
  border: 1px solid #E1E1E1;
  padding: 20px 30px;
  font-size: 16px;
  outline: none;
  background: #FFF;
  height: 70px;
}
.cellWrap input[type="email"], .cellWrap input[type="text"], .cellWrap input[type="password"] {
  width: calc(100% - 25%);
}
/*.formArea button {margin: 50px auto; display: block;}*/
.formArea a.lnkBtn {
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  color: white;
  font-size: 17px;
  font-weight: bold;
  box-shadow: 1px 1px 3px 1px rgba(0,0,0,.3);
  width: 320px;
}
.formArea button[type="submit"], .formArea input[type="submit"], .formArea button[type="submit"].pass_btn {
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 5px;
  text-align: center;
  color: white;
  background: #32BBAB;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 3px 3px 3px #00000029;
  transition: .2s;
  width: 380px;
  height: 60px;
}
.formArea a:hover, .formArea button:hover, .formArea input[type="submit"]:hover {opacity: .7; color: white;}
.formArea .policy_box a:hover {color: inherit;}
.formArea .btn01 {width: 400px;}


/*.formArea.memberForm, .formArea.loginBox {
  width: 840px;
  margin: 0 auto
}
.formArea.memberForm .ttl, .formArea.loginBox .ttl {
  margin-bottom: 25px;
}*/
.formArea.memberForm .ttl span {
  font-size: 28px;
}
.formArea.memberForm .innerBox01 {
  padding: 0;
  /*border: 1px solid #E1E1E1;*/
}
.formArea.memberForm .cellWrap {
  margin: 0;
  border: 1px solid #E1E1E1;
}
.formArea.memberForm .cellWrap:not(:last-of-type) {
  border-bottom: none;
}
.formArea.memberForm .cellWrap:last-of-type {
  border-bottom: 1px solid #E1E1E1;
  margin-bottom: 20px;
}
.formArea.memberForm .last-cell {border-bottom: 1px solid #E1E1E1 !important;}
.formArea.memberForm .cellWrap .label {
  width: 200px;
  min-width: 200px;
  padding: 40px 15px;
  font-size: 16px;
  font-weight: normal;
}
/*.formArea.loginBox .cellWrap .label {width: 200px;}*/
.formArea.memberForm .cellWrap .label_sub {
  width: 60px;
  font-size: 16px;
  line-height: 50px;
}
.formArea.memberForm .cellWrap_inner {
  padding: 40px 20px;
  border-left: 1px solid #E1E1E1;
}
.formArea.memberForm .cellWrap .cellWrap_row {
  display: flex;
  margin-bottom: 10px;
}
.formArea.memberForm .cellWrap .cellWrap_row input[type="text"] {
  width: 200px;
}
.formArea.memberForm .cellWrap .withTxt {
  width: calc(100% - 190px);
  padding: 40px 20px;
  border-left: 1px solid #E1E1E1;
}
.formArea.memberForm .cellWrap .withTxt2 {
  margin-right: 10px;
}
.formArea.memberForm .cellWrap_box {
  display: flex;
}
.formArea.memberForm .cellWrap input[type="email"], .formArea.memberForm .cellWrap input[type="text"], .formArea.memberForm .cellWrap input[type="password"] {
  border: 1px solid #E1E1E1;
  background: #fff;
}
.formArea.memberForm .withTxt input[type="date"], .formArea.memberForm .withTxt select {
  border: 1px solid #E1E1E1;
  font-size: 16px;
}
.content-text {
	line-height: 28px;
  font-size: 16px;
  margin-bottom: 42px;
  color: #000;
}


/*　login　============================================================*/

.formArea p.label {color: #000;}
.formArea .login_btn {text-align: center;}
.formArea .forget {text-align: right; margin-right: 20px;}
.formArea .otherlinks, .formArea .withTxt {padding-left: 25%;}
.formArea .otherlinks p + p, .formArea .withTxt p + p {margin-top: 6px;}
.formArea .otherlinks a {font-size: 16px; line-height: 28px; color: #000;}
.formArea .otherlinks a:hover {color: initial;}
#new_create_pass .innerBox01 .withTxt input[type="password"] {width: 100%;}
.input_note {
	color: #333 !important;
	font-size: 12px;
  line-height: 20px;
}

/* common */
.box-errors {
  padding: 20px;
  border: 1px solid #E60013;
  color: #E60013;
  background: #fffafa;
  margin-bottom: 30px;
 }
.box-errors p {
  margin-bottom: 5px;
  color: #E60013;
}

/*=============== メッセージ詳細 ===============*/
.cmnBtn {
    border-radius: 5px;
    padding: 12px 0;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    display: inline-block;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: bold;
    border: none;
    width: 100%;
}
.btn01 {
    background: #F78C14;
}
.cmnBtn[type=submit], .cmnBtn[type=button] {
    padding: 8px 0;
}
.btnArea2 .cmnBtn {
    margin-right: 10px;
    min-width: 135px;
}
.msgWrap {
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 30px 30px 30px 0;
  margin-bottom: 21.5px;
  border-bottom: 1px solid #333;
}

.send_date{
 font-size:12px;
 position:relative;
 left:70px;
 margin-bottom: 9px;
}

.scl_icon_title .scl_icon{
    width: 70px;
    height: 70px;
    margin-right:15px;
}

.msg-profile-img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

ul.chat li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

ul.chat li div.scl_msg_content * + * {
  margin-top: 10px;
}

ul.chat li.student{
  justify-content: right;
}

ul.chat li.scl{
  justify-content: left;
}

ul.chat li.student > div:first-child{
    margin-top: auto;
    margin-right: 20px;
}

ul.chat li.scl > div:last-of-type,
ul.chat li.student > div:last-child {
  width: 18%;
  text-align: left;
}

ul.chat li.scl > div:last-of-type,
ul.chat li.student > div:last-child {
  width: 78%;
}

ul.chat li.scl > div:last-of-type,
ul.chat li.student > div:last-child {
  background: #EFF3FF;
  padding: 15px;
  line-height: 1.4;
  position: relative;
  word-break: break-all;
  width: 510px;
  font-size: 14px;
  line-height: 24px;
}

ul.chat li.student > div:last-child {
  background: #FFF8D6;
  width: 480px;
}

ul.chat li.scl > div:last-of-type p::before,
ul.chat li.student > div:last-child::before {
  position: absolute;
  top: 20px;
  content: "";
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-width: 12px;
  border-bottom-width: 12px;
}

ul.chat li.scl > div:last-of-type p::before {
  left: -40px;
  border-right-color: #EFF3FF;
}
ul.chat li.scl > div:last-of-type figure img {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 10px;
}

ul.chat li.scl .scl_icon {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
ul.chat li.scl .scl_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.chat li.student > div:last-child::before {
  right: -40px;
  border-left-color: #FFF8D6;
}

ul.chat li a.paylink, ul.chat li a.pdf_link {color:#0091d5;}

.scl_time{    
    margin-top: auto;
    margin-left: 20px;
}

ul.chat .btn-update-read {
  margin-top: 10px;
  display: block;
}
#msg-list #loader {
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('/spinner.gif') no-repeat center center rgba(0, 0, 0, 0.2);
  z-index: 10000;
  overflow: auto;
}
a.pdf_link {
  word-break: break-all;
  color: blue;
}

.sendArea .cellWrap {
  margin-bottom: 25px;
}

.sendArea label {
  width: 100px;
  vertical-align: top;
  line-height: 2;
}

.sendArea .fileUp {
  border: 1px solid #ccc;
  width: 660px;
  padding: 20px;
}

.sendArea .fileUp button {
  margin: 0;
  display: inline-block;
  vertical-align: top;
}

.sendArea .fileUp p {
  margin-left: 30px;
  display: inline-block;
  color: #aaa
}

.sendArea input[type="text"] {
  width: 660px;
}

.sendArea .image-input {
  height: auto;
  max-height: 200px;
  width: auto;
  max-width: 100%;
}

.btnArea.inline.msg {
  width: 60%;
  justify-content: space-between;
}

.btnArea.inline.msg input {
  min-width: 150px;
  width: 150px;
  padding: 12px 0;
}

div.notice p {
  line-height: 1.6;

}
main#top ul.menuList li:nth-child(2),
main#top ul.menuList li:nth-child(5),
main#top ul.menuList li:nth-child(8){
  margin-left: 2.75%;
  margin-right: 2.75%;
}

.read-button {
    float:right;
    margin-right:auto;
    padding: 2px 6px;
    border-radius: 5px;
}

.read-button.orange {
    background: #ff9d00;
    color: #ffffff;
}

.read-button.blue {
    background: #47A0F4;
    color: #ffffff;
}

.msg_ttl_text {
  color:#003992;
}
.date_divider {
  font-size:12px;
  position: relative;
  left: 70px;
  margin-bottom: 9px;
}
.msg_input_label {
  color:#333;
  margin-bottom: 10px;
}
.scl_msg_content {
  margin-left:20px;
}

.auto_send{
 background: #ececec !important;
}

ul.chat li.scl > div:last-of-type.auto_send p::before{
 border-right-color: #ececec !important;
}

/* mypage history slist ============================================================*/
#history_slist {
  width: 80%;
  margin: 0 auto;
}
.page_title {
  margin-bottom: 30px;
  padding: 2px 16px;
  border-left: 5px solid #E8E8E8;
  font-size: 18px;
  font-weight: bold;
}
.slist_box,
.slist_box th,
.slist_box td {
  border: 1px solid #E8E8E8;
  border-collapse: collapse;
}
.slist_box {
  margin-bottom: 20px;
  font-size: 14px;
}
.slist_box td {
  padding: 7px 15px;
}
.slist_box td.slist_item2 {
  border-right: none;
}
.slist_box td.slist_item3 {
  border-left: none;
}
.slist_box .slist_name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 10px;
}
.slist_box .button_cancel {
  display: block;
  padding: 5px 30px;
  border: 1px solid #C8C8C8;
  border-radius: 5px;
  background: #FFFFFF;
  color: #C8C8C8;
  font-size: 12px;
}
.slist_box .bg_ivory {
  background: #F8F8F0;
}
.slist_box .button_jump {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  background: #C8C8C8;
  text-align: center;
  color: #FFFFFF;
}
.slist_box .issue {
  margin: 5px 0;
  padding: 5px;
  width: 100%;
  border: 1px solid #E8E8E8;
  font-size: 14px;
}
.slist_box .status {
  font-size: 18px;
  text-align: center;
}
.slist_box .pay_status {
  padding: 3px;
  border: 2px solid #E8E8E8;
  font-weight: bold;
  text-align: center;
}
.slist_box .payment_date {
  font-size: 14px;
  text-align: center;
}
.slist_box .amount_box {
  font-size: 14px;
}
.slist_box .amount_box th {
  text-align: center;
}
.slist_box .amount_box td {
  text-align: right;
}
.receipt_window label {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.receipt_window label div {
  width: 100px;
  text-align: left;
}
.receipt_window #close-modal-btn {
  width: 100px;
  cursor: pointer;
  border: 1px solid #555;
  outline: none;
  border-radius: 5px;
  text-align: center;
  padding: 8px 10px;
  background: #C7C7C7;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 30%);
  transition: .2s;
  margin-right: 10px;
}
.receipt_window #close-modal-btn:hover {
  background: #e0e0e0;
}
.receipt_window #close-modal-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #999, 0 1px 2px rgb(0 0 0 / 20%);
  background: #f0f0f0;
}
.receipt_window #issue-modal-btn {
  width: 100px;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 5px;
  text-align: center;
  padding: 8px 10px;
  color: white;
  background: #58C6E6;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 30%);
  transition: .2s;
}
.receipt_window #issue-modal-btn:hover {
  background: #7dd7f0;
}
.receipt_window #issue-modal-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #3ba8c7, 0 1px 2px rgb(0 0 0 / 30%);
  background: #9fe3f6;
}
table.items th {
  font-size: 14px;
  padding: 8px 0;
}

/* newmember set password ============================================================*/

.new_newmember .withTxt input[type="text"], .new_newmember .withTxt input[type="password"] {width: 320px;}
.new_newmember .withTxt input[type="radio"] {transform: scale(1.5);}
.new_newmember .withTxt label + input[type="radio"] {margin-left: 15px;}
.new_newmember .withTxt input[type="date"], .new_newmember .withTxt select {
  cursor: pointer;
  border: 2px solid #cdcdcd;
  padding: 7px;
  font-size: 15px;
  width: 320px;
  height: 50px;
}
.new_newmember .withTxt input[type="date"]:focus, .new_newmember .withTxt select:focus {outline: none !important;}
.new_newmember button[type="submit"]:hover {color: white;}
.confirm_area {padding: 60px 200px 90px;}
.confirm_area p {font-size: 16px; margin-bottom: 15px;}
.confirm_area p span {width: 10em; display: inline-block;}
.confirm_area .btn01 {
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  color: white;
  background: #003992;
  font-size: 17px;
  font-weight: bold;
  box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 30%);
  transition: .2s;
  display: block;
  width: 320px;
  margin: 30px auto 0;
  transition: .2s;
}
.confirm_area .btn01:hover {opacity: .7;}

/* message detail ============================================================*/

.scl_icon_title{display:flex;}

.scl_icon_title p{
    font-size: 16px;
    font-weight: bold;
    position: relative;
    top: 20px;
}

.msg_detail_sec,.quit_confirm {padding: 0 0px 40px;}
.msg_detail_sec .sendArea .fileUp button {
  border-radius: 5px;
  padding: 5px 20px;
  color: #1481CC;
  cursor: pointer;
  font-weight: bold;
  background-color: #fff;
  border: 1px solid #1481CC;
}
.msg_detail_sec #message_title {width: 700px; margin-top: 5px;}
.msg_detail_sec input[type="text"], .msg_detail_sec textarea {
  border: 1px solid #ccc;
  padding: 12px;
  outline: none;
  margin-bottom: 15px;
  font-size: 16px;
  resize: none;
}
.msg_detail_sec .sendMsg {display: flex; justify-content: flex-end;}
.msg_detail_sec .sendMsg .message-send {
  color: red;
  display: none;
  margin-right: 10px;
  padding-top: 18px;
}
.msg_detail_sec .sendMsg a {width: 180px; font-size: 25px; font-weight: normal; padding: 7px; background: #32BBA9;}
.msg_detail_sec .sendMsg a:hover {color: white;}

.message_photo_float_item {
  max-width: 300px !important;
  max-height: 300px !important;
  width: auto !important;
  height: auto !important;
}

/* quit_confirm ============================================================*/

.quit_button_area {
  display: flex;
  width: 60%;
  margin: 0 auto;
  justify-content: space-around;
}
.quit_button_area .cancel_btn, .quit_button_area input[type="submit"] {
  height: 60px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 2px 2px 3px #ccc;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quit_button_area .cancel_btn {
  background: #C7C7C7;
  color: white;
  width: 200px;
}
.quit_button_area input[type="submit"] {
  background: #32BBA9;
  color: white;
  width: 280px;
  border: none;
  transition: .2s;
}
.quit_button_area input[type="submit"]:hover {opacity: .8;}

.require {
  color: red;
}

/*　mypage, message　============================================================*/

figure {margin: 0;}
.mypage_btn {position: relative;}
.mypage_btn span {
  position: absolute;
  top: -14px;
  left: 22px;
  width: 20px;
  height: 20px;
  background: #FF0000;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.facility_info.mypage {border-top: 1px solid #707070; padding-top: 50px;}
.menu_sec {width: 220px; min-height: 600px;}
.mypage_area {flex: 1; margin-left: 40px;}
.menu_sec .user_name {
  font-size: 16px;
  color: #000;
  font-weight: bold;
}
ul.menu_ul {border-top: 1px solid #707070; margin: 25px 0;}
ul.menu_ul li {
  height: 60px;
  border-bottom: 1px solid #707070;
  font-size: 16px;
  color: #000;
  position: relative;
}
ul.menu_ul li.on {background: #EFF3FF; font-weight: bold;}
ul.menu_ul li.new span {
  position: absolute;
  right: 50px;
  width: 20px;
  height: 20px;
  background: #FF0000;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
ul.menu_ul li::after {
  content: "";
  position: absolute;
  top: 27px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #707070;
  border-right: 1px solid #707070;
  transform: rotate(-45deg);
}
ul.menu_ul li a {display: block; padding: 20px 10px;}
.quit {font-size: 12px;}
.mypage_ttl {color: #000; font-size: 28px; font-weight: bold; margin-bottom: 32px;}
.my_facility {
  border: 1px solid #C7C7C7;
  box-shadow: 0 5px 5px #51515129;
  display: flex;
  justify-content: space-between;
  padding: 19px;
  margin-bottom: 40px;
}
.my_facility .detail {flex: 1; margin-right: 20px;}
.my_facility .outline {display: flex; justify-content: space-between; margin-bottom: 20px;}
.my_facility figure {margin-right: 24px; width: 150px; height: 112px;}
.my_facility figure.room_fig {width: 150px; height: 112px;}
.my_facility figure.room_fig img {object-fit: cover; width: 100%; height: 100%;}
.bold {font-weight: bold;}
.my_facility .txt {flex: 1; font-size: 18px;}
.my_facility .txt .campus_name {color: #000;}
.my_facility .room_name {color: #003992; word-break: break-all;}
.my_facility .date {font-size: 16px; color: #000;}
table.fee, table.status_tbl {border-collapse: separate; border-spacing: 10px 0;position: relative;right: 10px;}
table.fee th, table.fee td, table.status_tbl th, table.status_tbl td {font-size: 16px; text-align: center; padding: 6px 0; color: #000;}
table.fee th {background: #EFF3FF; width: 155px;}
table.status_tbl th {background: #E1F7E1; width: 114px;}
table.status_tbl th:empty {background: transparent;}
table.status_tbl th.tentative {background: #45AFFF; color: white;}
table.status_tbl th.available {background: white; color: #FF0000; border: 1px solid #707070;}
table.status_tbl th.done {background: #003992; color: white;}
table.status_tbl td a {color: #0091d5;}
table.status_tbl {width: auto;}
.my_facility .status_area {width: 153px;}
.status_area .status, .select_pay_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: bold;
}
.status_area .status {
  height: 115px;
  color: white;
  font-size: 22px;
  padding-top: 6px;
}
.status.paid {background: #003992;}
.status.tentative {background: #AACBFF;}
.status.rejected {background: #C7C7C7;}
.status span {font-size: 16px;}
.status.paid span {color: white;}
.status.tentative span {color: #FF0000;}
.status.tentative2 {background: #4FB3FF;}
.status_area dl.bill dt {text-align: center; margin-bottom: 5px;}
.selectWrap {position: relative;}
.selectWrap select {
  outline: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 5px 15px;
  border: 1px solid #707070;
  color: #333;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
}
.selectWrap::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 17px;
  border: 7px solid transparent;
  border-top-color: #707070;
  border-left-width: 5px;
  border-right-width: 5px;
}
.select_pay_btn {
  border: 1px solid #FF8800;
  border-radius: 8px;
  height: 70px;
  color: #FF8800;
  font-size: 16px;
  box-shadow: 3px 3px 3px #0000004D;
}
ul.message_ul {width: 700px;}
ul.message_ul li {
  border-bottom: 1px solid #707070;
  padding: 10px 66px;
  display: flex;
  align-items: center;
  position: relative;
}
ul.message_ul li figure {width: 70px; height: 70px; border-radius: 50%; overflow: hidden;}
ul.message_ul li figure img {width: 100%; height: 100%; object-fit: contain;}
ul.message_ul li .msg-arrow {
  flex: 1;
  margin-left: 20px;
}
ul.message_ul .scl_name, ul.message_ul .msg {
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
ul.message_ul .scl_name {font-size: 16px; font-weight: bold;}
ul.message_ul .msg {font-size: 14px;}
ul.message_ul .msg_num {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  font-size: 16px;
  font-weight: bold;
  background: #FF0000;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.read-more-btn {
  cursor: pointer;
  color: #003992;
  margin-left: 1em;
}

.read-more-btn:hover {
  opacity: 0.8;
}

.mypage_area h2 {
  font-size: 20px;
  font-weight: bold;
  color: #003992;
  margin-bottom: 20px;
}

.ml0 {margin-left: 0px;}

.facility_img_thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* kiyaku, privacy_policy, cancel_policy ============================================================*/
.kiyaku_wrapper {
    padding: 0 80px 80px;
}
.kiyaku_wrapper .fw6 {
    font-weight: 600;
}
.kiyaku_topttl {
    margin-bottom: 10px;
    padding: 0 20px;
    font-size: 2rem;
    font-weight: 600;
}
.transaction_content .kiyaku_topttl {padding: 0;}
.kiyaku_lead {
    margin-bottom: 20px;
    padding: 0 20px;
}
.kiyaku_contents {
    border-top: 1px solid #ccc;
}
.kiyaku_inner {
    padding: 20px;
}
.kiyaku_wrapper .chapter {
    font-size: 1.5rem;
    font-weight: 600;
}
.kiyaku_wrapper .art {
    font-weight: 600;
}
.kiyaku_wrapper ol {
    padding: 10px 0 10px 20px;
}
.kiyaku_wrapper .parentheses {
  list-style: none;
  counter-reset: number;
}
.kiyaku_wrapper ol .parentheses {
    padding: 10px 0;
}
.kiyaku_wrapper .parentheses li {
  position: relative;
  padding-left: 40px;
}
.kiyaku_wrapper .parentheses li::before {
  counter-increment: number;
  content: '（' counter(number) '）';
  position: absolute;
  left: 0;
}
.kiyaku_wrapper .az {
  list-style-type: lower-latin;
}

/* contents_tokusyouhou ============================================================*/
section.transaction_content table {
  margin: 15px 0 20px;
  font-size: 16px;
}
section.transaction_content th,
section.transaction_content td {
  border: 1px solid #bfbfbf;
  text-align: left;
  padding: 10px;
  vertical-align: middle;
}
section.transaction_content th {
  background: #FFFFF4;
  width: 28%;
  font-weight: bold;
}

/* payment ============================================================*/
.proc_payment h3.ttl {
  border-left: 6px solid #003992;
  padding: 3px 10px;
  color: #000;
  margin-bottom: 32px;
  line-height: 22px;
  font-size: 28px;
}
.proc_payment h3.ttl span {
  font-size: 28px;
  color: #000;
  padding-right: 2px;
}
.proc_payment section.feeSec .divWrap p {
  margin-bottom: 0;
}
.proc_payment .feeTotal {
  text-align: center;
  font-size: 18px;
  position: relative;
  letter-spacing: 3px;
  margin: 30px 0 50px;
}
.proc_payment .feeTotal::before {
  content: "合計金額";
  position: absolute;
  left: 0;
  top: 5px;
}
.proc_payment .feeTotal span {
  font-size: 33px;
}
.proc_payment .divWrap {
  border: 1px solid #ccc;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  font-size: 16px;
}
.proc_payment .divWrap.last,
.proc_payment .divWrap:last-child {
  border-bottom: 1px solid #ccc;
}
.proc_payment .divWrap.subTotal {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.proc_payment .divWrap.subTotal:last-child {
  border-bottom: 1px solid #ccc;
  margin-bottom: 50px;
}
.proc_payment .divWrap > p:nth-child(odd) {
  width: 90%;
}
.proc_payment .divWrap > p:nth-child(even) {
  width: 10%;
  text-align: right;
  position: relative;
}
.proc_payment .divWrap > p:last-child span {
  position: absolute;
  left: 0;
}
.proc_payment .discount {
  padding: 20px 0;
}
.proc_payment .divWrap.howToPay > div:first-child p {
  padding: 20px 0 0 25px;
}
.proc_payment .divWrap.howToPay > div:first-child p img {
  width: 300px;
}
.proc_payment .fontRed {
  color: #E15515;
}
.proc_payment .divWrap.howToPay ul li {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 16px
}
.checkList.radio label {
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  display: inline-block;
  margin-right: 20px;
}
.proc_payment .checkList.radio label input {
  width: 18px;
  height: 18px;
  border: 1px solid #666;
  margin-left: -25px;
}
span.how_to_pay {
  position: relative;
  top: -3px;
}
.proc_payment .buttonArea {
  width: 420px;
  display: flex;
  margin: 30px auto;
  justify-content: space-between;
}
.proc_payment .buttonArea a,
.proc_payment .buttonArea button {
  margin-right: 0px;
  position: relative;
  font-size: 20px;
  padding: 16px;
  height: 60px;
}
.proc_payment .buttonArea a:hover {color: white;}
.proc_payment .btn01 {
  background: #32BBA9;
  width: 248px;
}
.proc_payment .btn02 {
  background: #C7C7C7;
  width: 154px;
}
/*.proc_payment .buttonArea .btn01::before, .proc_payment .buttonArea .btn01::after {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  border: 2px solid transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: rotate(-45deg);
  top: 34%;
}
.proc_payment .buttonArea .btn02::before, .proc_payment .buttonArea .btn02::after {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  border: 2px solid transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: rotate(135deg);
  top: 50%;
  margin-top: -.5em;
}
.proc_payment .buttonArea .btn01::before {
  right: 20px;
}
.proc_payment .buttonArea .btn01::after {
  right: 30px;
}
.proc_payment .buttonArea .btn02::before {
  left: 35px;
}
.proc_payment .buttonArea .btn02::after {
  left: 25px;
}*/
.error {
  color: #D00010;
  margin-top: 15px;
}

/* form ============================================================*/
.formWrap {margin: 0 auto; width: 762px;}
.ttl {font-size: 28px; font-weight: bold;}
.flex {display: flex; align-items: center;}
.flex span.ymd {padding: 0 13px;}
.common_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #32BBAB;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 14px;
  box-shadow: 3px 3px 3px #00000029;
  color: white !important;
}
.common_btn.login_btn {width: 240px;}
.formWrap section {display: none;}
.formWrap section.current {display: block;}
.formWrap section .ttl {font-size: 20px;color: #333;margin: 30px 0;position: relative;font-weight: bold;}
.formWrap table {width: 100%;border-top: 1px solid #E1E1E1;font-size: 14px;color: #464646;}
.formWrap table tr {border-left: 1px solid #E1E1E1;border-right: 1px solid #E1E1E1;border-bottom: 1px solid #E1E1E1;}
.formWrap table th, .formWrap table th p, .formWrap table td * {
  font-size: 16px;
  color: #000;
}
.formWrap table th {
  width: 180px;
  border-right: 1px solid #E1E1E1;
  font-weight: normal;
  padding: 38px 20px;
  vertical-align: top;

}
.formWrap table td {
  padding: 25px 35px;
  position: relative;
  width:580px;
}
.formWrap table tr.name td {padding: 25px 23px;}
.formWrap table .year select {width: 167px;}
.formWrap table .month select,
.formWrap table .date select {width: 106px;}
.formWrap table .address.post_cd input {width: 97px;}
.formWrap table .address select {width: 123px;}
.formWrap table .address .label {display: inline-block; width: 104px;}
.formWrap table tr.date_of_use td {padding: 25px 27px;}
.formWrap table th.required p {position: relative;}
.formWrap table th.required p::after {
  position: absolute;
  right: -10px;
  content: "必須";
  color: #ff0000;
  border: 1px solid #ff0000;
  padding: 3px 5px;
  font-size: 10px;
  margin-left: 5px;
  line-height: 1;
}
.formWrap label {cursor: auto;}
.formWrap .name_cell,
.formWrap table .address,
.formWrap .icon {display: flex; align-items: center;}
.formWrap .name_cell label {display: inline-block; width: 40px; font-size: 16px;}
.formWrap .date label {display: inline-block; width: 30px; text-align: center;}
.formWrap .addr_td > div {display: flex; align-items: center;}
.formWrap .addr_td > div + div {margin-top: 14px;}
.formWrap .addr_td > div label {width: 100px !important; font-size: 16px;}
.formWrap .addr_td > div #newmember_city_name, .formWrap .addr_td > div #newmember_chouiki {width: 315px;}
.formWrap .name_cell input {width:199px;}
.formWrap .name_cell input + label {margin-left:20px;}
.formWrap .name_cell + .name_cell {margin-top: 18px;}
.formWrap .address + .address {margin-top: 14px;}
.formWrap .icon .preview {width: 55px; height: 55px; margin-right: 19px;}
.formWrap .icon .preview img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.formWrap .icon .upload-btn {
  border: 1px solid #707070;
  border-radius: 3px;
  line-height:21px;
  padding: 4px 36px 4px 13px;
  background: url(../images/camera_icon.png) no-repeat right 10px center;
}
.formWrap .facility {font-weight: bold;}
.formWrap table .ok::before,
.formWrap table .ng::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  border-radius: 50%;
}
.formWrap table .ok::before {background: #0A14FF;}
.formWrap table .ng::before {background: #D71010;}
.formWrap table .name_cell.ok::before,table .name_cell.ng::before {right: 0;}
.formWrap table .ok::after,
.formWrap table .ng::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  font-size: 10px;
  color: white;
}
.formWrap table .ok::after {content: "OK";}
.formWrap table .ng::after {content: "NG";}
.formWrap table .name_cell.ok::after,table .name_cell.ng::after {right: 4px;}
.formWrap table td span.edit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  color: #0A14FF;
  font-size: 13px;
  border: 1px solid #0A14FF;
  padding: 4px 4px 2px;
  border-radius: 2px;
  cursor: pointer;
}
.formWrap input[type="text"],
.formWrap input[type="number"],
.formWrap input[type="tel"],
.formWrap input[type="email"],
.formWrap input[type="password"],
.formWrap input[type="date"],
.formWrap input[type="time"],
.formWrap select,
.formWrap textarea {
  border: 1px solid #cecece;
  padding: 10px 13px;
  font-size: 15px;
  border-radius: 3px;
  height: 45px;
}
.formWrap input[type="date"],
.formWrap input[type="time"] {padding: 10px;}

.formWrap textarea {width: 493px; height:90px;}
.formWrap input::placeholder {color: #C7C7C7;}
.formWrap input:-ms-input-placeholder {color: #C7C7C7;}
.formWrap input::-ms-input-placeholder {color: #C7C7C7;}
.formWrap div.wrapLoginButton {
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.formWrap a.forgotPassword{position: absolute;right: 0;color: initial;}
.s_short {width: 106px !important;}
.short {width: 165px !important;}
.middle {width: 200px !important;}
.large {width: 493px !important;}
.formWrap .btnLabel {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding-left: 30px;
  display: inline-block;
}
label.btnLabel {min-width: 100px;}
label.btnLabel input.radioBtn[type=radio],
label.chkbox_label input {appearance: none;display: none;}
label.btnLabel span::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  border: 1px solid #707070;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 1;
}
label.btnLabel input:checked + span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  display: block;
  width: 13px;
  height: 13px;
  background: #0A14FF;
  border-radius: 50%; 
  z-index: 2;
}
.next {width: 380px;margin: 75px auto;}
.procedure_text{
    max-width: 1060px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    word-break: break-all; 
}
.mypage_inner {
  width: 840px;
  margin: 50px auto 60px;
}
.confirm_tbl {
  border: 1px solid #E1E1E1;
  font-size: 14px;
  color: #464646;
  margin-bottom: 50px;
}
.confirm_tbl tr {border-bottom: 1px solid #E1E1E1;}
.confirm_tbl th {padding: 25px 20px !important;}
.confirm_tbl td {padding: 25px 23px !important;}
.confirm_tbl th {
  width: 180px;
  border-right: 1px solid #E1E1E1;
}
.confirm_tbl td .confirm_tbl {margin-bottom: 0;}
.confirm_tbl td .confirm_tbl td, .confirm_tbl td .confirm_tbl th {padding: 20px 25px !important;}
.btnArea {text-align: center;}
.btnArea a {
  display: block;
  background: #C7C7C7;
  width: 236px;
  height: 50px;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  padding: 12px;
  font-size: 20px;
  box-shadow: 3px 3px 3px #00000029;
  color: white;
  margin: 0 auto;
}
.header-text {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 32px;
}
.new_image_btn span {
  border: 1px solid #707070;
  border-radius: 3px;
  display: flex;
  height: 29px;
  width: 147px;
  align-items: center;
  padding-left: 13px;
  background: url(/images/camera_icon.png) no-repeat right 11px center/18px;
  font-size: 14px !important;
}
#clear-btn{font-size: 14px !important; cursor: pointer;}
.profile-img {display: flex;}
.img_cell {
  width: 55px;
  height: 55px;
  margin-right: 20px;
}
.profile_icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
#newmember_company_name, #newmember_city_name, #newmember_chouiki, #newmember_mail, #newmember_busyo_name {
  width:315px;
}
.cancel.policy_h2 {
  color: #000;
  margin-bottom: 20px;
  font-size: 18px;
}
.formWrap .price_list_table {width: 510px !important;}
.formWrap .price_list_table .price_contents {width: 470px !important;}
.formWrap .price_list_table td.num {width: 37% !important;}
.formWrap .price_list_table td.price {width: 25% !important;}
.formWrap .price_list_table th, .formWrap .price_list_table td {
  padding: 6px;
}
.formWrap .price_list_table th {
  width: 35px;
  vertical-align: middle;
  padding: 5px 10px;
}
.formWrap .price_list_table td {
  padding-left: 20px;
  width: auto !important;
  word-break: break-all;
}
.ttl_bdr th, .ttl_bdr td {
  border: 1px solid #E1E1E1;
}
.ttl_bdr span {font-size: 11px !important;}
.formWrap .price_list_table input[type="number"] {
  height: 30px;
  width: 90px;
}
.sum_tr th {
  border-right: none !important;
  text-align: right;
  padding-right: 20px !important;
}