@charset "utf-8";
/* ########################################### */
/* ##  共通スタイル  ## */
/* ########################################### */
html {
  scroll-behavior: smooth;
}
body {
  background-color: #FFFFF7;
  padding-top: 70px;
  /* font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media only screen and (min-width:992px) {
  body{
    padding-top: 170px;
  }
}
@media only screen and (min-width:576px) and (max-width:991px) {
  body{
    padding-top: 90px;
  }
}
@media only screen and (max-width:575) {
  body{
    padding-top: 70px;
  }
}

hr {
  background-color: #ffffff;
  border: dotted 2px #82AFB7;
}
.form-control, .form-select {
  background-color: #fff9ff;
}
/* ########################################### */
/* ##  To Top  ## */
/* ########################################### */
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 85px;
  background: #fff;
  border: solid 2px #00a7db;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #00a7db;
  border-right: 3px solid #00a7db;
  transform: translateY(20%) rotate(-45deg);
}
/* ########################################### */
/* ##  To Top  ## */
/* ########################################### */
/* 追従メニュー */
.float-footer-wrap {
  display: none;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: #ffffff;
  width: 100%;
  padding: 10px;
  text-align: center;
  z-index: 2;
}

/* ヘッダーの小さい文字 */
.header_lead {
  /* background-image: url(../img/header_lead_bg.jpg); */
  background-color: #f5f5f5;
  border-bottom: 1px solid #f0f0f0;
  font-size: 10px;
  padding: 2px;
}
.navbar_bg {
  background-color: #FFFFF7;
}
.nav_btn {
  padding: 10px 4px 7px 4px;
  color: #666666;
}
h1.page_title {
  padding: 0px 0px 5px 35px;
  font-size: 24px;
  font-weight: bold;
  background-image: url(../Images/mbs_icon2.png);
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px dotted #82AFB7;
  margin-bottom: 10px;
}
.page_section {
  padding: 0px 0px 5px 35px;
  font-size: 24px;
  font-weight: bold;
  background-image: url(../Images/icon_c01.png?date=241016);
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px dotted #E69EBF;
  margin-bottom: 10px;
}
.page_section_kids {
  padding: 0px 0px 5px 35px;
  font-size: 24px;
  font-weight: bold;
  background-image: url(../Images/icon_c02.png?date=20241016);
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px dotted #EABE80;
  margin-bottom: 10px;
}
.page_section_adult {
  padding: 0px 0px 5px 35px;
  font-size: 24px;
  font-weight: bold;
  background-image: url(../Images/icon_c03.png?date=241016);
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px dotted #6BAC79;
  margin-bottom: 10px;
}
.page_section1 {
  padding: 0px 0px 5px 35px;
  font-size: 18px;
  font-weight: bold;
  background-image: url(../Images/mbs_icon.png);
  background-repeat: no-repeat;
  background-size: 28px;
  border-bottom: 2px dotted #ffb3da;
  margin-bottom: 10px;
}
.lgtext {
  font-size: 18px;
  font-weight: 600;
  color: #f67c7c;
}
.footer_bg0 {
  color: #333333;
  background-color: #f0f8ff;
}
.footer_bg {
  color: #ffffff;
  background-color: #b0c4de;
}
.footer_bg a{
  color: #ffffff;
  display: inline-block;
  margin: 3px 5px;
}
.float-footer-wrap{
  display: none;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: #f0f0f0;
  width: 100%;
  padding:10px;
  text-align: center;
  z-index: 2;
}
.errmsg {
  font-size: 12px;
  color: darkred;
  text-align: right;
  margin: 0;
  padding: 2px 2px 2px 2px;
}
.marker{
  background: linear-gradient(transparent 60%, #ffff66 60%);
}
a.hmenu {
  color: #333333;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 5px 5px;
  border-bottom: 5px solid #ffffff;
}
a.hmenu:hover {
  background-color: #f0f8ff;
}
a.menu_line_0 { border-bottom: 5px solid #f0f0f0;}
a.menu_line_1 { border-bottom: 5px solid #f14c36;}
a.menu_line_2 { border-bottom: 5px solid #04cbc9;}
a.menu_line_3 { border-bottom: 5px solid #e9ed1c;}
a.menu_line_4 { border-bottom: 5px solid #fe7baf;}
a.menu_line_5 { border-bottom: 5px solid #a37fbd;}
/* ########################################### */
/* ##  menu  ## */
/* ########################################### */
.crayon_menu .nav-link{
  border-right: 1px dotted #ff92cb80;
  /* font-size: 0.9rem; */
  /* margin-right: 5px; */
}
/* ########################################### */
/* ##  card  ## */
/* ########################################### */
.card-header {
  font-size: clamp(15px,2vw,19px);
}
.card-text {
  font-size: clamp(14px,1.5vw,16px);
}
.card_pink {border: 1px solid #E69EBF;}
.card_pink .card-header {
  background-color: #E69EBF;
  font-weight: 400;text-align: center;
  color: #fff;}
/* ########################################### */
.card_blue {border: 1px solid #7EAFD7;}
.card_blue .card-header {
  background-color: #7EAFD7;
  font-weight: 400;text-align: center;
  color: #fff;}
/* ########################################### */
.card_green {border: 1px solid #89C29E;}
.card_green .card-header {
  background-color: #89C29E;
  font-weight: 400;text-align: center;
  color: #fff
}
/* ########################################### */
.card_orange {border: 1px solid #EABE80;}
.card_orange .card-header {
  background-color: #EABE80;
  font-weight: 400;text-align: center;
  color: #fff;}
/* ########################################### */
.card_red {border: 1px solid #E48584;}
.card_red .card-header {
  background-color: #E48584;
  font-weight: 400;text-align: center;
  color: #fff;}
/* ########################################### */
.card_yellow {border: 1px solid #E3D565;}
.card_yellow .card-header {
  background-color: #E3D565;
  font-weight: 400;text-align: center;
  color: #fff;}
/* ########################################### */
/* .card_purple {border: 1px solid #947EB5;} */
.card_purple .card-header {
  background-color: #947EB5;
  font-weight: 400;text-align: center;
  color: #fff}
/* ########################################### */
.card_mint {border: 1px solid #82AFB7;}
.card_mint .card-header {
  background-color: #82AFB7;
  font-weight: 400;text-align: center;
  color: #fff}

  .card_mint h6 {
  color: #5e8a92;
}

/* ########################################### */
/* ##  button  ## */
/* ########################################### */
.btn_regular {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 22px;
  font-size: clamp(12px,2vw,16px);
  font-weight: bold;
  line-height: 125%;
}
.btn-ol_course01 {
  color: #D0739E;
  border: #D0739E 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course01:hover {
  background-color: #D0739E;
  border-color: #D0739E;
  color: #fff;
}
.btn-ol_course02 {
  color: #D36464;
  border: #D36464 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course02:hover {
  background-color: #D36464;
  border-color: #D36464;
  color: #fff;
}
.btn-ol_course04 {
  color: #6BAC79;
  border: #6BAC79 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course04:hover {
  background-color: #6BAC79;
  border-color: #6BAC79;
  color: #fff;
}
.btn-ol_course05 {
  color: #DDA75A;
  border: #DDA75A 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course05:hover {
  background-color: #DDA75A;
  border-color: #DDA75A;
  color: #fff;
}
.btn-ol_course06 {
  color: #715898;
  border: #715898 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course06:hover {
  background-color: #715898;
  border-color: #715898;
  color: #fff;
}
.btn-ol_course07 {
  color: #5168AB;
  border: #5168AB 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course07:hover {
  background-color: #5168AB;
  border-color: #5168AB;
  color: #fff;
}
.btn-ol_course08 {
  color: #6198C4;
  border: #6198C4 2px solid;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}
.btn-ol_course08:hover {
  background-color: #6198C4;
  border-color: #6198C4;
  color: #fff;
}

.btn-outline-info:hover {
  color: #fff;
}
.btn-outline-primary:hover {
  color: #fff;
}
.btn-outline-success:hover {
  color: #fff;
}

.month {
  font-weight: bold;
  color: #fff;
}
.month_header {
  padding: 10px 20px;
  color: #333333;
  background-color: #d0739e;
}
.month_header_kids {
  padding: 10px 20px;
  color: #333333;
  background-color: #DDA75A;
}
.month_header_adult {
  padding: 10px 20px;
  color: #333333;
  background-color: #6BAC79;
}
.month_box {
  border: 1px solid #d0739e50;
}
.month_box_kids {
  border: 1px solid #dda65a4a;
}
.month_box_adult {
  margin: 0px;
  padding: 5px 0px;
  border: 1px solid #6bac7950;
}

.course_header_bg {
  position: relative;
  padding: 1rem 2rem calc(1rem + -5px);
  background: #E69EBF;
  font-size: 20px;
}
.course_header_line {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  border: 3px solid #f4cfe0;
}
.course_header_bg_kids {
  position: relative;
  padding: 1rem 2rem calc(1rem + -5px);
  background: #EABE80;
  font-size: 20px;
}
.course_header_line_kids {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  border: 3px solid #f5edbd;
}
.course_header_bg_adult {
  position: relative;
  padding: 1rem 2rem calc(1rem + -5px);
  background: #89C29E;
  font-size: 20px;
}
.course_header_line_adult {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  border: 3px solid #ccf0c6;
}


@media screen and (max-width: 767px) {
  .customer_img {
    text-align: start;
  }
  .mainvisual {
    display:none
  }
  .clubmember{
    display:none
  }
}
@media screen and (max-width: 991px) {
  .mainvisual {
    margin-top: 12px;
  }
}
@media screen and (max-width: 812px) {
  .mainvisual {
    margin-top: 5px;
  }
}
@media screen and (min-width: 768px) {
  .mainvisual_small {
    display:none
  }
}