@charset "UTF-8";

:root {
  --main-color: #4e99d7;
  --sub-color: #ac9756;
  --link-color: #4e99d7;
}

body {
  font-family: 'Noto Sans JP', "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #434343;
  min-width: 1300px;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: bottom;
  max-width: 100%;
	height: auto;
}

.pagetop {
  border-radius: 2px;
  cursor: pointer;
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 40px;
  right: 24px;
  z-index: 9999;
}

.pagetop:hover {
  opacity: .6;
}

.cf:after {
  display: block;
  content: "";
  clear: both;
}

.clear {
  clear: both;
}

/* ==========================================================================

  00. common
  01. header
  02. gnav
  03. footer
  04. low-common-design(low only)
  05. menu
  06. reservebanner (low only)

  09.multi-class

  10. 404 error

========================================================================== */
/*
       00. common
========================================================================== */
.noto_sans {
  font-family: 'Noto Sans JP', sans-serif;
}

.noto_serif {
  font-family: 'Noto Serif JP', sans-serif;
}

/*
       01. header
========================================================================== */
.head,
.head ul,
.head li,
.head a,
.head span,
.head i,
.head div,
.head section {
  box-sizing: border-box;
}

.head img {
  max-width: 100%;
}

.head {
  position: absolute;
  z-index: 10;
  width: 100%;
  min-width: 1300px;
  padding: 22px 0 0;
  font-size: clamp(calc(15px * 0.93), calc((15 / 1400) * 100vw), calc(15px * 1.5));
}

.head::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background-color: #8fd1f4;
}

.head_ttl {
  position: relative;
  z-index: 3;
  text-align: right;
  font-size: 12px;
  color: #3e3e3e;
  margin: 0 1em 0 0;
}

.head_logo {
  position: absolute;
  z-index: 5;
  width: clamp(calc(347px * 0.93), calc((347 / 1400) * 100vw), calc(347px * 1.5));
  width: 23.13em;
  left: clamp(calc(15px * -0.93), calc((15 / 1400) * (-1) * 100vw), calc(15px * -1.5));
  left: -1em;
  top: clamp(calc(18px * -0.93), calc((18 / 1400) * (-1) * 100vw), calc(18px * -1.5));
  top: -1.2em;
}

.head_logo img {
  aspect-ratio: 1/1;
}

.head_info {
  position: absolute;
  z-index: 0;
  width: 13.87em;
  min-height: 4em;
  top: 2.6em;
  left: 18.1em;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("../images/common/head_info_bg.png");
}

.head_info p {
  color: #fff;
  text-align: right;
  padding-right: 1.4em;
  height: 1.64em;
  line-height: 1.7em;
}

.head_info p + p {
  margin-top: 0.8em;
}

/* --------------------------- side */
.side {
  position: fixed;
  z-index: 999;
  right: 0;
  top: 50px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 0 16px rgba(176, 176, 176, 0.11);
}

.side::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #fef1c6 0, #feeec0 100%);
  opacity: 0.94;
}

.side a {
  display: block;
  padding: 2.6em .9em 2.6em .9em;
  font-family: 'San Fransisco', 'Helvetica', 'Arial', 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  color: #4e99d7;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: .1em;
  background-image: url("../images/common/cmn_ico_pc.png"), url("../images/common/cmn_ico_arrow.png");
  background-position: 50% 22px, 50% calc(100% - 25px);
  background-size: 30px auto, 9px auto;
  background-repeat: no-repeat;
  transition: 0.3s;
  position: relative;
  z-index: 3;
}

.side a:hover {
  opacity: 0.7;
}

/*
       02. gnav
========================================================================== */
.gnav,
.gnav nav,
.gnav ul,
.gnav li,
.gnav a,
.gnav span,
.gnav i,
.gnav div {
  box-sizing: border-box;
}

.gnav img {
  max-width: 100%;
  vertical-align: middle;
}

.gnav {
  position: relative;
  z-index: 5;
  padding: 24px 0;
}

.gnav ul {
  margin: 0 auto;
  width: calc((1280 / 1400) * 100%);
  min-width: 1260px;
  max-width: 1400px;
  display: flex;
  justify-content: stretch;
  align-items: center;
}

.gnav li {
  flex: 1;
  text-align: center;
  position: relative;
}

.gnav li:nth-of-type(1):before,
.gnav li::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 60%;
  top: 20%;
  background-color: #8f8a84;
}

.gnav li:nth-of-type(1):before {
  left: 0;
}

.gnav li::after {
  right: 0;
}

.gnav li a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  display: block;
  transition: 0.3s;
  padding: 5px 0;
}

.gnav li a span {
  width: 100%;
  display: block;
}

.gnav li a span i {
  display: block;
  text-align: center;
  letter-spacing: 0.2em;
}

.gnav li a span i:nth-of-type(1) {
  font-size: 14.53px;
  margin-bottom: 0.5em;
}

.gnav li a span i:nth-of-type(2) {
  font-size: 10px;
}

.gnav li.current a,
.gnav li a:hover {
  opacity: 0.7;
}

/*
     03. footer
========================================================================== */
.gmap,
.gmap ul,
.gmap li,
.gmap a,
.gmap span,
.gmap i,
.gmap div,
.foot,
.foot p,
.foot ul,
.foot li,
.foot a,
.foot span,
.foot i,
.foot div,
.foot section,
.foot nav {
  box-sizing: border-box;
}

.gmap img,
.foot img {
  max-width: 100%;
}

/* --------------------------- foot top */
.foot_top {
  padding: 0;
}

.foot_seo {
  width: 1100px;
  margin: 36px auto 56px;
  font-size: 13px;
  line-height: 1.38;
}

.gmap {
  width: 100%;
}

.gmap iframe {
  width: 100%;
  min-height: 429px;
  aspect-ratio: 1400 / 429;
  vertical-align: top;
  border: 0 none;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* --------------------------- foot bottom */
.foot_btm {
  position: relative;
  background-color: #f4fbff;
  padding: 44px 0 10px;
}

.foot_inr {
  position: relative;
  z-index: 2;
  margin: 0 auto 20px;
  width: calc((1280/1400) * 100%);
  min-width: 1260px;
  max-width: 1300px;
}

.foot_set {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* --------------------------- foot info */
.foot_info {
  width: 580px;
}

.foot_logo {
  width: 355px;
  margin: 0 auto 30px -10px;
}

.foot_logo img {
  aspect-ratio: 355 / 64;
}

.foot_btn {
  width: 221px;
  float: right;
  margin: -5px 18px 0 0;
  box-shadow: 4px 4px 4px rgba(200, 200, 200, 0.35);
}

.foot_btn a {
  position: relative;
  display: block;
  padding: 12px 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #4e99d7;
  background-color: #ffeaa8;
  background-repeat: no-repeat;
  background-size: 9px auto, 26px auto;
  background-position: calc(100% - 10px) 50%, 10px 50%;
  background-image: url("../images/common/cmn_ico_arrow.png"), url("../images/common/cmn_ico_pc.png");
  text-decoration: none;
}

.foot_tel {
  margin: 0 0 30px;
  color: #5c5950;
  font-size: 30.17px;
  font-weight: bold;
  letter-spacing: 0.06em;
  padding-left: 1em;
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: 0 60%;
  background-image: url("../images/common/cmn_ico_tel.png");
}

.foot_accs {
  font-size: 18px;
  color: #505050;
  padding-left: 1.2em;
  margin: 0 0 18px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 17px auto;
  background-image: url("../images/common/foot_ico_train.png");
}

.foot_addr {
  font-size: 15px;
  padding: 0 0 0 1.8em;
  margin: 0 0 24px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 17px auto;
  background-image: url("../images/common/foot_ico_addr.png");
}

.foot_addr span {
  display: block;
  margin-bottom: 10px;
}

.foot_addr a {
  display: inline-block;
  color: #319dd2;
  padding: 0 1.6em 0.3em 0.5em;
  border-bottom: 1px solid #319dd2;
  background-repeat: no-repeat;
  background-size: 6px auto;
  background-position: calc(100% - 8px) 50%;
  background-image: url("../images/common/cmn_ico_arrow.png");
  text-decoration: none;
}

/* --------------------------- foot time table */
.foot_timetable {
  width: 100%;
  border-collapse: collapse;
  line-height: 1;
  margin-bottom: 0.6em;
  color: #2e2e2e;
}

.foot_timetable tr {
  border-bottom: 1px solid #aaaaaa;
}

.foot_timetable th,
.foot_timetable td {
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
}

.foot_timetable th {
  width: 30%;
  font-weight: normal;
}

.foot_timetable td {
  width: calc((68% - 2em) / 7);
}

.foot_timetable thead th,
.foot_timetable thead td {
  background-color: #888888;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  padding: 0.6em 0;
}

.foot_timetable tbody th,
.foot_timetable tbody td {
  padding: 0.8em 0;
}

.foot_timetable tbody th i {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5em;
  font-size: 8px;
  line-height: 1;
}

.foot_timetable tbody td {
  font-size: 9px;
  color: #606060;
}

.foot_tt_note {
  margin-right: 0.5em;
  color: #585858;
  text-align: right;
}

/* --------------------------- foot nav */
.foot_nav {
  position: relative;
  width: 638px;
}

.foot_nav ul {
  border-bottom: 1px dashed #a0a0a0;
  padding: 2em 0 2em 1.5em;
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8em 1em;
}

.foot_nav ul:nth-of-type(1) {
  border-top: 1px dashed #a0a0a0;
}

.foot_nav ul:nth-of-type(2),
.foot_nav ul:nth-of-type(3) {
  grid-template-columns: repeat(2, 1fr);
}

.foot_nav ul:nth-of-type(3) {
  padding: 2.6em 0 2.6em 1.5em;
}

.foot_nav ul li {
  padding: 0 0 0 1.2em;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 5px auto;
  background-image: url("../images/common/foot_dot.png");
}

.foot_nav ul:nth-of-type(1) li:nth-of-type(3) {
  grid-column: 3 / 5;
}

.foot_nav ul:nth-of-type(1) li:nth-of-type(2),
.foot_nav ul:nth-of-type(1) li:nth-of-type(5) {
  margin-left: -2em;
}

.foot_nav ul:nth-of-type(2) li:nth-of-type(10) {
  grid-column: 1 / 3;
}

.foot_nav ul:nth-of-type(3) li:nth-of-type(2) {
  grid-column: 2 / 4;
}

.foot_nav ul:nth-of-type(4) li:nth-of-type(2) {
  margin-left: -2em;
}

.foot_nav a {
  color: #434343;
}

.foot_humanity {
  margin: 2em 0 0.5em;
  text-align: right;
}

.foot_humanity img {
  aspect-ratio: 80 / 60;
}

/* --------------------------- copyright */
.foot_copyright {
  text-align: right;
  color: #292929;
  font-size: 13px;
}

/*
     04. low-common-design(low only)
 ========================================================================== */
.pc-contents {
  width: 1200px;
  margin: 0px auto;
  margin-bottom: 150px;
}

.left-contents {
  width: 319px;
  float: left;
}

.right-contents {
  width: 800px;
  float: right;
}

.low-kv-container {
  margin: 0 0 40px 0;
  padding: 83px 0 0 0;
}

.mainPhoto {
  position: relative;
  padding: 64px 1.714% 3.643% 5.143%;
  box-sizing: content-box;
  background: url(../images/common/kv_bg.png)no-repeat bottom center/100%;
}

.mainPhoto img {
  width: 100%;
  box-shadow: -8px 9px 36px 0px rgba(93, 125, 142, 0.35);
}

/*
       05. menu
========================================================================== */
.sidemenu {
  background: linear-gradient(to right, #8fd1f4 211px, transparent 211px) no-repeat top center/100% 404px;
  padding: 54px 0 0 36px;
  margin-bottom: 46px;
  position: relative;
}

.sidemenu h2 {
  width: 21px;
  position: absolute;
  top: 14px;
  left: 10px;
}

.sidemenu ul {
  background: #FFFFFF;
  border: 1px solid #8fd1f4;
  padding: 31px 15px 40px 19px;
}

.sidemenu li {
  border-bottom: 1px dashed #8fd1f4;
}

.sidemenu li + li {
  margin-top: 26px;
}

.sidemenu li a {
  font-size: 15px;
  line-height: 25px;
  background: url(../images/common/menu_arw.png)no-repeat left center/7px;
  display: inline-block;
  padding-left: 1em;
  white-space: nowrap;
}

.sidemenu li a .bracket {
  margin: 0 -0.5em;
}

.sidebnr {
  width: 260px;
  margin: 0 auto;
}

.sidebnr li:nth-child(2) {
  margin: 23px 0 0 0;
}

.sidebnr li:nth-child(3) {
  margin: 16px 0 0 -12px;
  width: 272px;
}

/*
     06. reservebanner (low only)
========================================================================== */
.counseling {
  margin: 180px 0 0 0;
}

.counseling img {
  max-width: 100%;
}

.counseling .cs_box {
  padding: 4px;
  border: 1px solid #c3c4c4;
  margin-top: 40px;
}

.counseling .cs_box .inr {
  border: 1px solid #4e99d7;
  background: url("../images/common/cs_bg.jpg") no-repeat top center/cover;
  padding: 203px 0 34px 34px;
}

.counseling .cs_box .cs_btn {
  margin: 0 0 29px;
  width: 235px;
  box-shadow: 2.237px 3.316px 10px 0px rgba(200, 200, 200, 0.35);
  border-radius: 5px;
}

.counseling .cs_box .cs_tel {
  width: 235px;
  margin: 0 0 30px;
}

.counseling .cs_box .cs_tel .ttl {
  font-size: 13px;
  line-height: 22px;
  height: 21px;
  background: #5b5b5b;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 18px;
}

.counseling .cs_box .cs_tel .num {
  font-size: 27px;
  line-height: 1em;
  font-weight: 600;
  letter-spacing: 2px;
  background: url(../images/common/cs_tel_icon.png)no-repeat left 2px center/13px;
  padding-left: 27px;
  color: #5b5b5b;
  height: 23px;
}

.counseling .cs_add {
  font-size: 15px;
  line-height: 1.6em;
  margin: -5px 0;
}

/* reserve */
.rsv_box {
  margin-top: 120px;
  background-color: #f4fbff;
  position: relative;
}

.rsv_box .rsv .inr {
  background-color: #d9f1ff;
  position: relative;
}

.rsv_box .rsv_lead {
  padding: 10px 200px 10px 30px;
  color: #fff;
  font-size: 30px;
  line-height: 1.1;
  background: #4e99d7;
}

.rsv_box .rsv_lead i {
  font-size: 20px;
}

.rsv_box .rsv_lead em {
  color: #fff6c2;
}

.rsv_box .rsv_lead em i {
  font-size: 36px;
}

.rsv_box .rsv_fig {
  background-color: rgba(255, 255, 255, .98);
  aspect-ratio: 1/1;
  box-shadow: 7px 5px 16px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 136px;
  top: -30px;
  right: 21px;
  border-radius: 50%;
}

.rsv_box .rsv_fig img {
  width: 60%;
}

.rsv_box .rsv_set {
  padding: 30px;
  display: flex;
  justify-content: space-between;
  gap: 0 20px;
}

.rsv_box .rsv_join {
  padding: 30px 20px 20px 20px;
  text-align: center;
  background-color: #fff6c2;
  border-radius: 16px;
  box-shadow: 0 0 3px rgba(182, 182, 182, 0.22);
  flex: 1 1 0;
}

.rsv_box .rsv_join a {
  display: block;
  margin: 0 auto 10px auto;
  width: 284px;
}

.rsv_box .rsv_join a img {
  aspect-ratio: 284 / 77;
}

.rsv_box .rsv_join a + p {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  color: #da413b;
	visibility: hidden;
}

.rsv_box .rsv_join_num {
  display: inline-block;
}

.rsv_box .rsv_join_num > span {
  line-height: 0.9;
}

.rsv_box .rsv_join_num > span:nth-of-type(1) {
  display: block;
  text-align: left;
  font-size: 30px;
}

.rsv_box .rsv_join_num > span:nth-of-type(2) {
  font-style: italic;
  font-size: 142.93px;
}

.rsv_box .rsv_join_num > span:nth-of-type(3) {
  font-size: 40px;
}

.rsv_box .rsv_lst {
  margin-top: 20px;
  font-size: 15px;
  flex: 1 1 0;
}

.rsv_box .rsv_lst li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.4em;
}

.rsv_box .rsv_lst li::before {
  content: "●";
  display: block;
  position: absolute;
  color: #4e99d7;
  left: 0;
  top: 0.3em;
  line-height: 1;
}

.rsv_box .rsv_lst em {
  display: inline-block;
  padding: 3px 2px 1px 2px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  background: #f47d79;
}

.low-rsv-banner {
  width: 409px;
}

.low-rsv-banner img {
  aspect-ratio: 409 / 340;
}

.rsv_box .rsv_join .WRshow {
	visibility: visible;
}

/*
  09. multi-class
========================================================================== */
/* clearfix */
.cf::after {
  display: block;
  content: '';
  clear: both;
}

.clear {
  clear: both;
}

/* fade */
.fade {
  transition: .3s ease-in-out;
}

.fade:hover {
  opacity: .5;
}

/* link */
.p-link {
  color: var(--link-color);
  text-decoration: underline;
  margin: 0 1px;
  transition: .3s ease-in-out;
}

.p-link:hover {
  opacity: .5;
}

/* font */
.gothic {
  font-family: 'San Fransisco', 'Helvetica', 'Arial', 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.mincho {
  font-family: 'Times New Roman', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
}

/* テキスト */
.bold {
  font-weight: bold;
}

.txt130 {
  font-size: 130%;
}

.txt120 {
  font-size: 120%;
}

.txt110 {
  font-size: 110%;
}

.txt90 {
  font-size: 90%;
}

.txt80 {
  font-size: 80%;
}

.or {
  color: #fc9b2a;
}

.re {
  color: #FF373A;
}

i.fas,
i.far {
  margin: 0 5px;
}

.nowrap {
  white-space: nowrap !important;
}

.underline {
  text-decoration: underline;
}

/* 画像 */
.img-border {
  box-sizing: border-box;
  padding: 4px;
  max-width: 100%;
  border: 1px solid #ccc;
  background: #fff;
}

.img-right {
  float: right;
  margin: 0 0 10px 15px;
  max-width: 300px;
}

.img-left {
  float: left;
  margin: 0 15px 10px 0;
  max-width: 300px;
}

/* object-fit */
.object-fit-img {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

/* flex */
.flex {
  display: flex;
}

.flex img {
  max-width: 100%;
  height: auto;
}

.fdC {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.justC {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-base {
  align-items: baseline;
}

.fx_grow_1 {
  flex: 1 0 auto;
}

/* align */
.center {
  text-align: center;
}

.alignR {
  text-align: right !important;
}

.alignL {
  text-align: left !important;
}

.vAlignM {
  vertical-align: middle !important;
}

.vAlignT {
  vertical-align: top !important;
}

.vAlignB {
  vertical-align: bottom !important;
}

/* display */
.dispB {
  display: block;
}

.dispI {
  display: inline;
}

.dispFr {
  display: flow-root;
}

/* 余白 */
.p10 {
  padding: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pr10 {
  padding-right: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb60 {
  margin-bottom: 60px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr15 {
  margin-right: 15px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

/* 非表示 */
.pc-none {
  display: none !important;
}
