@charset "UTF-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP";
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
main {
  position: relative;
  margin: 0 auto;
}
a {
  text-decoration: none;
  img {
    transition: all .3s ease;
  }
  &:hover {
    img {
      opacity: .7 !important;
    }
  }
}
.main_container {
  padding-top: 80px;
  margin: 0 auto;
  img {
    vertical-align: top;
    width: 100%;
  }
}
button, input, select, textarea{
	border: solid 1px #CCC;
}

/*----------------------------------------------
　共通
----------------------------------------------*/
/*header*/
.page_header {
  position: fixed;
  top: 0;
  left: calc(50% - (960px / 2));
  z-index: 9000;
  max-width: 960px;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #544c40;
}
/*main*/
.top_visual {
  background-color: #f7f2eb;
}
.benefit {
  background-color: #e6b9a8;
}
/*main*/
.slider {
  overflow: hidden;
  padding-top: 1em;
}

.swiper-slide a {
  display: block;
}

.main_container .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: auto;
  top: 0;
}
.main_container .swiper-pagination-bullet{
	background: #b1b1b1;
}
.main_container .swiper-pagination-bullet-active{
	background: #e6b9a8;
}


.btn_reserve{
	display: block;
	text-align: center;
}
/*form*/
.reserve_form {
  margin: 5em 0;
}
.copyright {
  display: block;
  text-align: center;
  padding: 1em;
  margin: 0;
}
/*----------------------------------------------
　PC
----------------------------------------------*/
@media screen and (min-width: 900px) {
  /*main*/
  main {
    max-width: 960px;
  }
  .btn_reserve img {
    width: 800px;
  }
  .page_header {
    padding: 1em 2em 1em 3em;
    img {
      height: auto;
      margin-right: 1em;
    }
  }
}
/*----------------------------------------------
　スマホ
----------------------------------------------*/
@media screen and (max-width: 899px) {
  .page_header {
    left: 0;
  }
  /*main*/
  main {
    width: 100%;
  }
  /*header*/
  .page_header {
    padding: 1em;
    img {
      width: auto;
      height: 18px;
    }
    div img {
      width: auto;
      height: 30px;
      margin-left: .5em;
      margin-bottom: -3px;
    }
  }
  .btn_reserve img {
    width: 90%;
  }
}
@media screen and (max-width: 569px) {
  .main_container {
    padding-top: 60px;
  }
  /*ここからPC表示処理*/
  .pc_header {
    display: none;
  }
  @media screen and (min-width:900px) {
    /*　画面サイズが900pxからはここを読み込む　*/
    .wrap {
      display: flex;
      width: 100%;
    }
    .main_container {
      width: 960px;
      order: 2;
    }
    .pc_header {
      display: block;
      order: 3;
      width: calc((100% - 960px) / 2);
      .inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: url(images/pc_header_bg.png) left center no-repeat scroll;
        background-size: auto 100%;
        border-left: double 6px #eda7a9;
        .title {
          display: none;
        }
        .list {
          display: none;
        }
      }
    }
  }
  @media screen and (min-width:1400px) {
    /*　画面サイズが1400pxからはここを読み込む　*/
    .main_container {
      padding-top: 0;
    }
    .page_header {
      display: none;
    }
    .wrap {}
    .pc_header {
      position: relative;
      .inner {
        padding: 2em;
        .title {
          display: block;
          margin: 0 auto 1em 0;
          padding: 0;
        }
        .list {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 1em;
          margin: 0;
          padding: 0;
          li {
            margin: 0;
            padding: 0;
          }
        }
      }
    }
    .pc_footer {
      .inner {
        padding: 2em;
        .title {
          display: block;
          margin: 0 0 0 auto;
          padding: 0;
        }
      }
    }
  }
}

/*----------------------------------------------
　フォーム
----------------------------------------------*/
@media screen and (min-width: 641px){
.reserve_form form {
	width: 800px;
	margin: 0px auto 0px auto;
	}
.reserve_form form h3 {
	font-size: 24px;
	letter-spacing: 0.2em;
	margin: 50px 0px 40px 0px;
	text-align: center;
	}

.reserve_form form .off {
	margin: 0px auto 0px auto;
	position: relative;
	}

.reserve_form form ol dl {
	width: 100%;
	display: table-row;
	}

.reserve_form form ol dt {
	width: 200px;
	font-weight: bold;
	padding: 20px 0px 20px 0px;
	display: table-cell;
	vertical-align: middle;
	}

.reserve_form form ol dl:first-child dt {
	padding: 50px 0px 20px 0px;
	}

.reserve_form form ol dt span {
	background: #cc0000;
	font-size: 12px;
	color: #ffffff;
	margin: 0px 10px 0px 0px;
	padding: 2px 5px;
	text-align: center;
	}

.reserve_form form ol dt span.any {
	background: #aaaaaa;
	}

.reserve_form form ol dd {
	width: 600px;
	padding: 20px 0px 20px 0px;
	display: table-cell;
	}

.reserve_form form ol dl:first-child dd {
	padding: 50px 0px 20px 0px;
	}

.reserve_form form ol dd label {
	margin: 0px 0px 10px 0px;
	display: block;
	}

.reserve_form form ol dd span {
	font-size: 12px;
	color: #cc0000;
	margin: 10px 0px 0px 0px;
	padding-left: 1em;
	text-indent: -1em;
	display: block;
	}

.reserve_form form ol dd select {
	padding: 10px;
	}

.reserve_form form ol dd input[type="text"],
.reserve_form form ol dd input[type="email"],
.reserve_form form ol dd input[type="tel"] {
	width: 300px;
	padding: 10px;
	}

.reserve_form form ol dd textarea {
	width: 100%;
	font-size: 14px;
	padding: 10px;
	}

.reserve_form form .cond {
	margin: 20px 0px 20px 0px;
	}

.reserve_form form ol .send {
	width: 250px;
	background: #ffcc00;
	font-size: 24px;
	font-weight: bold;
	line-height: 50px;
	color: #111111;
	margin: 30px 0px 100px 0px;
	cursor: pointer;
	border:solid 2px #000;
	}

.reserve_form form .tel {
	width: 100%;
	margin: 0px 0px 100px 0px;
	text-align: center;
	}

.reserve_form form .tel h3 {
	font-size: 18px;
	letter-spacing: 0.2em;
	margin: 0px 0px 20px 0px;
	text-align: center;
	}

.reserve_form form .tel p {
	background: url(images/fre02.png) no-repeat left;
	background-size: 26px auto;
	font-size: 21px;
	letter-spacing: 0.1em;
	line-height: 18px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 31px;
	display: inline-block;
	}

.reserve_form form .priv {
	font-size: 12px;
	text-align: center;
	}

.reserve_form form .sit {
	text-align: center;
	}

.reserve_form form .sit h4 {
	font-size: 18px;
	margin: 0px 0px 20px 0px;
	}

.reserve_form form .sit ul {
	width: 100%;
	border-top: 1px #dddddd solid;
	border-right: 1px #dddddd solid;
	border-left: 1px #dddddd solid;
	display: table;
	}

.reserve_form form .sit ul:last-child {
	border-bottom: 1px #dddddd solid;
	}

.reserve_form form .sit li {
	width: 100%;
	background: #f6f6f6;
	line-height: 40px;
	display: table-cell;
	}

.reserve_form form .sit dl {
	width: 100%;
	background: #ffffff;
	border-top: 1px #dddddd solid;
	font-size: 12px;
	display: table;
	}

.reserve_form form .sit dl:last-child {
	border-top: 1px #dddddd dashed;
	}

.reserve_form form .sit ul dt,
.reserve_form form .sit ul dd {
	width: calc(100% / 8);
	border-right: 1px #dddddd solid;
	display: table-cell;
	}

.reserve_form form .sit ul dt:last-child,
.reserve_form form .sit ul dd:last-child {
	border: none;
	}

.reserve_form form .sit ul dd {
	font-weight: bold;
	}
}

@media screen and (max-width: 640px){
.reserve_form form {
	width: 90%;
	margin: 0px 5% 0px 5%;
	}

.reserve_form form h3 {
	font-size: 21px;
	letter-spacing: 0.1em;
	margin: 0px 0px 40px 0px;
	text-align: center;
	}

.reserve_form form ol dt {
	width: 100%;
	font-weight: bold;
	margin: 20px 0px 10px 0px;
	float: left;
	}

.reserve_form form ol dl:first-child dt {
	margin: 40px 0px 10px 0px;
	}

.reserve_form form ol dt span {
	background: #cc0000;
	font-size: 12px;
	color: #ffffff;
	margin: 0px 10px 0px 0px;
	padding: 2px 5px;
	text-align: center;
	}

.reserve_form form ol dt span.any {
	background: #aaaaaa;
	}

.reserve_form form ol dd {
	width: 100%;
	}

.reserve_form form ol dd label {
	margin: 0px 0px 10px 0px;
	display: block;
	}

.reserve_form form ol dd span {
	color: #cc0000;
	margin: 10px 0px 0px 0px;
	padding-left: 1em;
	text-indent: -1em;
	display: block;
	}

.reserve_form form ol dd select {
	width: 100%;
	font-size: 16px;
	margin: 5px 0px 0px 0px;
	padding: 10px;
	}

.reserve_form form ol dd input[type="text"],
.reserve_form form ol dd input[type="email"],
.reserve_form form ol dd input[type="tel"] {
	width: 100%;
	font-size: 16px;
	padding: 10px;
	}

.reserve_form form ol dd textarea {
	width: 100%;
	font-size: 16px;
	padding: 10px;
	}

.reserve_form form .cond {
	margin: 20px 0px 10px 0px;
	}

.reserve_form form ol .send {
	width: 100%;
	background: #ffcc00;
	font-size: 21px;
	font-weight: bold;
	line-height: 50px;
	color: #111111;
	margin: 20px 0px 50px 0px;
	cursor: pointer;
	}

.reserve_form form .tel {
	width: 100%;
	margin: 0px 0px 50px 0px;
	text-align: center;
	}

.reserve_form form .tel h3 {
	font-size: 18px;
	letter-spacing: 0.2em;
	margin: 0px 0px 20px 0px;
	text-align: center;
	}

.reserve_form form .tel p {
	background: url(img/fre02.png) no-repeat left;
	background-size: 26px auto;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 18px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 31px;
	display: inline-block;
	}

.reserve_form form .priv {
	text-align: center;
	}

.reserve_form form .sit {
	margin: 0px 0px 50px 0px;
	text-align: center;
	}

.reserve_form form .sit h4 {
	font-size: 16px;
	margin: 0px 0px 10px 0px;
	}

.reserve_form form .sit ul {
	width: 100%;
	border-top: 1px #dddddd solid;
	border-right: 1px #dddddd solid;
	border-left: 1px #dddddd solid;
	display: table;
	}

.reserve_form form .sit ul:last-child {
	border-bottom: 1px #dddddd solid;
	}

.reserve_form form .sit li {
	width: 100%;
	background: #f6f6f6;
	line-height: 40px;
	display: table-cell;
	}

.reserve_form form .sit dl {
	width: 100%;
	background: #ffffff;
	border-top: 1px #dddddd solid;
	font-size: 12px;
	display: table;
	}

.reserve_form form .sit dl:last-child {
	border-top: 1px #dddddd dashed;
	}

.reserve_form form .sit ul dt,
.reserve_form form .sit ul dd {
	width: calc(100% / 8);
	border-right: 1px #dddddd solid;
	display: table-cell;
	}

.reserve_form form .sit ul dt:last-child,
.reserve_form form .sit ul dd:last-child {
	border: none;
	}

.reserve_form form .sit ul dd {
	font-weight: bold;
	}

}