@charset "utf-8";
/* CSS Document */
.header_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width: 350px;
  height: auto;
  z-index: 100;
}

.info h2 {
  font-size: 16px;
  font-weight: 600;
  color: #00adaf;
  line-height: 1;
  display: block;
  margin-top: 50px;
  text-align: center;
}
.info p {
  font-size: 14px;
  margin-top: 20px;
  padding: 0 20px;
  text-align: center;
}
.info p span{
  font-weight: 600;
}
@media(min-width: 1040px) {
  .info h2 {
    font-size: 18px;
    margin-top: 70px;
  }
  .info p {
    font-size: 16px;
  }
  .info_br {
    display: none;
  }
}
.line hr {
  border: none;
  border-top: dotted 5px #fff209;
  margin: 50px 30px 0;
}
@media(min-width: 1040px) {
  .line hr {
    margin-top: 70px;
  }
}

.about {
  margin-top: 50px;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}
.about .wrapper {
  background-image: url("../images/sankaku_about.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right 45px bottom -20px;
}
.about::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 3000/315;
  background-image: url("../images/bg_01.png");
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 1px;
  transform: translateY(100%);
}
.about_bg {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 50px;
}
.about_bg img {
  width: 100%;
}
.about_pc {
  display: none;
}
.about h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  line-height: 1;
  display: block;
  margin-top: 15%;
  text-align: center;
}
.about span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
  line-height: 1;
}
.about p {
  margin-top: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.about_image01 {
  display: block;
  width: 100%;
}
.about_image-top {
  position: relative;
  width: 61%;
  height: auto;
  max-width: 355px;
  margin-bottom: 70px;
}
.about_image-top::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 141/81;
  background-image: url("../images/about.png");
  background-size: 70%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -36%;
  right: -50%;
}
.about_image {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
  transform: translateY(40%);
}
.about_image02 {
  width: 40%;
  height: auto;
  max-width: 255px;
}
.about_image03 {
  width: 40%;
  height: auto;
  max-width: 255px;
  margin: 0 2.6% -6.6% 0;
}
@media(min-width: 580px) {
  .about h2 {
    font-size: 34px;
  }
  .about h2 span {
    font-size: 20px;
  }
  .about p {
    font-size: 18px;
  }
}
@media(min-width: 1040px) {
  .about {
    margin-top: 100px;
    max-height: 600px;
  }
  .about h2 {
    font-size: 48px;
    margin-top: 50px;
    text-align: left;
  }
  .about h2 span {
    font-size: 24px;
  }
  .about p {
    text-align: left;
    margin-top: 40px;
  }
  .about .wrapper {
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right 60px bottom 50px;
  }
  .about_image-top {
    max-width: 400px;
    margin-right: 80px;
  }
  .about_image01 {
    width: 400px;
    height: 400px;
  }
  .about_image02, .about_image03 {
    max-width: 300px;
  }
  .about_image {
    transform: translateY(0%);
  }
  .about_top {
    display: flex;
  }
  .about_sp {
    display: none;
  }
  .about_pc {
    display: inline;
  }
}
.open {
  padding: calc(80 / 375 * 100%) 20px 0;
  background-color: #f39c60;
  position: relative;
  z-index: 9;
}
.open .wrapper {
  background-image: url("../images/sankaku_open.png");
  background-size: 65%;
  background-position: bottom -40px right 60px;
  background-repeat: no-repeat;
}
.open::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 3000/313;
  background-image: url("../images/bg_02.png");
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 1px;
  transform: translateY(100%);
}
.open h2 {
  margin-top: 40px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
}
.open h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #e72e56;
}
.open p span {
  font-size: 15px;
  font-weight: 600;
}
.open p {
  font-size: 14px;
  margin: 30px 0 50px;
}
.open img {
  width: 68%;
  height: auto;
  max-width: 450px;
  display: block;
  margin-left: auto;
}
.open_image {
  position: relative;
  z-index: 1;
  transform: translateY(50%);
}
.open_image::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 157/70;
  background-image: url("../images/open_space.png");
  background-repeat: no-repeat;
  background-size: 60%;
  position: absolute;
  top: -70px;
}
@media(min-width: 580px) {
  .open_br {
    display: none;
  }
}
@media(min-width: 1040px) {
  .open {
    max-height: 1000px;
    padding-top: 300px;
  }
  .open .wrapper {
    background-size: 60%;
  }
  .open h2 {
    font-size: 48px;
  }
  .open h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .open p {
    font-size: 18px;
    margin-top: 50px;
  }
  .open p span {
    font-size: 20px;
  }
  .open img {
    max-width: 550px;
  }
  .open_image {
    transform: translateY(25%);
  }
  .open_image::before {
    max-width: 700px;
  }
}
.glamping {
  padding: calc(70 / 375 * 100%) 20px 0;
  background-color: #fed600;
  position: relative;
  z-index: 8;
}
.glamping .wrapper {
  background-image: url("../images/sankaku_glamping.png");
  background-size: 60%;
  background-position: bottom left 50px;
  background-repeat: no-repeat;
}
.glamping::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 3000/315;
  background-image: url("../images/bg_03.png");
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 2px;
  transform: translateY(100%);
}
.glamping h2 {
  margin-top: 40px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
}
.glamping h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #e83b2b;
}
.glamping span {
  font-size: 15px;
  font-weight: 600;
}
.glamping p {
  font-size: 14px;
  margin: 30px 0 50px;
}
.glamping img {
  width: 100%;
  display: block;
  margin-right: auto;
}
.glamping_image {
  width: 68%;
  height: auto;
  max-width: 450px;
  position: relative;
  z-index: 1;
  transform: translateY(50%);
}
.glamping_image::before {
  content: "";
  display: block;
  width: 70%;
  aspect-ratio: 300/211;
  background-image: url("../images/glamping_room02.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -70%;
  right: -45%;
}
@media(min-width: 580px) {
  .glamping_br {
    display: none;
  }
}
@media(min-width: 1040px) {
  .glamping {
    max-height: 1000px;
    padding-top: 300px;
  }
  .glamping .wrapper {
    background-position: bottom -30px left 50px;
  }
  .glamping h2 {
    font-size: 48px;
  }
  .glamping h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .glamping p {
    font-size: 18px;
    margin-top: 50px;
  }
  .glamping p span {
    font-size: 20px;
  }
  .glamping img {
    max-width: 550px;
  }
  .glamping_image {
    max-width: 550px;
  }
  .glamping_image::before {
    top: -50%;
    right: -70%;
  }
}
.cafebar {
  padding: calc(70 / 375 * 100%) 20px 0;
  background-color: #404855;
  position: relative;
}
.cafebar .wrapper {
  background-image: url("../images/sankaku_cafebar.png");
  background-size: 65%;
  background-position: bottom -10px right 55px;
  background-repeat: no-repeat;
}
.cafebar::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 3000/313;
  background-image: url("../images/bg_04.png");
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 1px;
  transform: translateY(100%);
}
.cafebar h2 {
  margin-top: 40px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
}
.cafebar h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #ea5e7f;
}
.cafebar span {
  font-size: 15px;
  font-weight: 600;
}
.cafebar p {
  font-size: 14px;
  color: #f3f6d4;
  margin: 30px 0 50px;
}
.cafebar img {
  width: 68%;
  height: auto;
  max-width: 450px;
  display: block;
  margin-left: auto;
}
.cafebar_image {
  position: relative;
  z-index: 1;
  transform: translateY(45%);
}
.cafebar_image::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 530px;
  aspect-ratio: 188/86;
  background-image: url("../images/cafebar.png");
  background-repeat: no-repeat;
  background-size: 55%;
  position: absolute;
  top: -80px;
  left: 10px;
}
@media(min-width: 580px) {
  .cafebar_br {
    display: none;
  }
}
@media(min-width: 1040px) {
  .cafebar {
    max-height: 1000px;
    padding-top: 300px;
  }
  .cafebar .wrapper {
    background-size: 60%;
    background-position: bottom -40px right 55px;
  }
  .cafebar h2 {
    font-size: 48px;
  }
  .cafebar h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .cafebar p {
    font-size: 18px;
    margin-top: 50px;
  }
  .cafebar p span {
    font-size: 20px;
  }
  .cafebar img {
    max-width: 550px;
  }
  .cafebar_image::before {
    max-width: 600px;
  }
}
.kids-info {
  padding: calc(80 / 375 * 100%) 20px 0;
}
.kids-info h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  margin-top: 20px;
}
.kids-info h2 span {
  font-size: 24px;
  font-weight: 600;
  font-family: "Arial";
  font-style: italic;
}
.kids-info p {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
}
.kids-info ul {
  font-size: 14px;
  margin-top: 30px;
}
@media(min-width: 1040px) {
  .kids-info {
    margin-top: 300px;
    padding-top: 0;
  }
  .kids-info ul {
    margin-top: 50px;
  }
  .kids-info h2 {
    font-size: 48px;
  }
  .kids-info h2 span {
    font-size: 36px;
  }
  .kids-info p {
    font-size: 24px;
  }
  .kids-info ul li {
    font-size: 18px;
  }
}
.menu {
  margin-top: 50px;
  padding: 0 20px;
}
.menu h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
}
.menu h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
}
.menu img {
  display: none;
}
.menu ul {
  margin-top: 30px;
}
.menu ul li {
  margin-bottom: 10px;
}
.menu ul li h3 {
  font-size: 15px;
  color: #333;
  font-style: normal;
  font-weight: 600;
}
.menu p {
  font-size: 14px;
  margin: 10px 0 15px;
}
.menu p span {
  font-size: 12px;
  font-weight: 600;
  color: #e83b2b;
}
.menu_morning {
  background-image: url("../images/morning.png");
  background-position: bottom right;
  background-size: auto 75px;
  background-repeat: no-repeat;
}
.menu_lunch {
  background-image: url("../images/lunch.png");
  background-position: bottom right;
  background-size: auto 70px;
  background-repeat: no-repeat;
}
.menu_cafe {
  background-image: url("../images/cafe.png");
  background-position: bottom right;
  background-size: auto 50px;
  background-repeat: no-repeat;
}
.menu_drink {
  background-image: url("../images/drink.png");
  background-position: bottom 20px right 10px;
  background-size: auto 70px;
  background-repeat: no-repeat;
}
.menu_button {
  display: block;
  margin: 0 auto;
  padding: 25px 0;
}
.menu_button a {
  background: #eb613d;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 130px;
  padding: 5px 15px;
  color: #f3f6d4;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  font-family: 'Baloo 2', cursive;
  border: 2px solid #543618;
}
.menu_button a:hover {
  background: #00adaf;
  color: #fff;
}
.menu_button a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #f3f6d4;
  border-right: 3px solid #f3f6d4;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}
.menu_button a:hover:after {
  border-color: #FFF;
}

@media(min-width: 580px) {
  .menu_br {
    display: none;
  }
  .menu_button {
  padding: 40px 0;
}
}
@media(min-width: 1040px) {
  .menu {
    margin-top: 120px;
  }
  .menu ul {
    margin-top: 50px;
  }
  .menu h2 {
    font-size: 48px;
  }
  .menu h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .menu ul li {
    margin-bottom: 40px;
  }
  .menu ul li h3 {
    font-size: 20px;
  }
  .menu ul li p {
    font-size: 18px;
    margin: 15px 0 30px;
  }
  .menu p span {
  font-size: 14px;
}
  .menu img {
    display: block;
  }
  .menu_image-morning {
    display: flex;
    justify-content: space-between;
    width: 820px;
    margin: 0 auto;
  }
  .menu_image-morning img {
    width: 250px;
    height: 250px;
  }
  .menu_image-lunch {
    display: flex;
    justify-content: space-between;
    width: 820px;
    margin: 0 auto;
  }
  .menu_image-lunch img {
    width: 250px;
    height: 250px;
  }
  .menu_image-cafe {
    display: flex;
    justify-content: space-between;
    width: 820px;
    margin: 0 auto;
  }
  .menu_image-cafe img {
    width: 250px;
    height: 250px;
  }
  .menu_image-drink {
    display: flex;
    justify-content: space-between;
    width: 820px;
    margin: 0 auto;
  }
  .menu_image-drink img {
    width: 250px;
    height: 250px;
  }
  .menu_button a {
  max-width: 200px;
  font-size: 24px;
}
  .menu_button a:after {
  width: 8px;
  height: 8px;
  border-top: 3px solid #f3f6d4;
  border-right: 3px solid #f3f6d4;
  position: absolute;
  top: 45%;
  right: 30px;
}
  .menu_morning {
    background-position: top 30px right;
    background-size: auto 120px;
  }
  .menu_lunch {
    background-position: top 20px right;
    background-size: auto 100px;
  }
  .menu_cafe {
    background-position: top 40px right;
    background-size: auto 80px;
  }
  .menu_drink {
    background-position: top 50px right 10px;
    background-size: auto 110px;
  }
}
.access {
  margin-top: 50px;
  padding: 0 20px;
}
.access h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
  margin-bottom: 30px;
}
.access h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
}
.access p {
  font-size: 14px;
  margin-top: 30px;
}
.access img {
  display: block;
  width: 100%;
  height: auto;
  margin: 30px auto 0;
}
.access_map {
  display: block;
  width: 100%;
  aspect-ratio: 335/140;
}
@media(min-width: 580px) {
  .access_discription {
    display: flex;
    justify-content: flex-start;
  }
  .access img {
    padding-right: 30px;
    margin: 50px 0 0;
    max-width: 250px;
    height: auto;
  }
  .access p {
    padding-top: 30px;
  }
}
@media(min-width: 1040px) {
  .access {
    margin-top: 120px;
  }
  .access h2 {
    font-size: 48px;
    margin-bottom: 50px;
  }
  .access h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .access p {
    font-size: 18px;
    margin-top: 50px;
    padding-top: 50px;
  }
  .access img {
    max-width: 400px;
    height: auto;
    padding-right: 50px;
  }
  .access_br {
    display: none;
  }
}
.infomation {
  margin-top: 50px;
  padding: 0 20px;
}
.infomation h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
  margin-bottom: 30px;
}
.infomation h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
}
.infomation ul li h3 {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: #f3f6d4;
  text-align: center;
  background-color: #eb613d;
  background-position: center;
  border-radius: 20px;
  width: 135px;
  height: 18px;
  line-height: 1.3;
  margin-bottom: 5px;
}
.infomation ul li {
  margin-bottom: 30px;
}
.infomation ul li p {
  font-size: 14px;
  padding-left: 10px;
}
.infomation ul li p span {
  font-size: 12px;
  font-weight: 600;
  color: #e83b2b;
}


.infomation p {
  font-size: 14px;
}
@media(min-width: 1040px) {
  .infomation {
    margin-top: 120px;
  }
  .infomation h2 {
    font-size: 48px;
  }
  .infomation h2 span {
    font-size: 24px;
    margin-left: 10px;
  }
  .infomation ul {
    margin-top: 50px;
  }
  .infomation ul li {
    display: flex;
  }
  .infomation ul li h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    width: 170px;
    height: 20px;
  }
  .infomation ul li p {
    font-size: 18px;
    padding-left: 40px;
  }
   .infomation ul li p span {
  font-size: 14px;
}
  .infomation p {
    font-size: 18px;
  }
  .infomation_br {
    display: none;
  }
}
.gallery {
  margin-top: 50px;
  padding: 0 20px;
}
.gallery h2 {
  font-size: 30px;
  font-weight: 600;
  color: #00adaf;
  font-family: "Arial";
  font-style: italic;
  line-height: 30px;
}
.gallery h2 span {
  font-size: 16px;
  font-weight: 600;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-style: normal;
  color: #eb613d;
}
@media(min-width: 1040px) {
  .gallery {
    margin-top: 120px;
  }
  .gallery h2 {
    font-size: 48px;
    margin-bottom: 50px;
  }
  .gallery h2 span {
    font-size: 24px;
    padding-left: 10px;
  }
  .gallery_br {
    display: none;
  }
}
.slider {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.slider-item {
  position: relative;
}
.slider-item::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.slider-item img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}
@media(min-width: 768px) {
  .slider-item::before {
    padding-top: 70%;
  }
}
@media(min-width: 1024px) {
  .slider-item::before {
    padding-top: 780px;
  }
}
.slick-prev, .slick-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #fff; /*矢印の色*/
  border-right: 2px solid #fff; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -20px 0 0 0; /*ドットの位置*/
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slick-dots button {
  border: none;
  color: transparent;
  outline: none;
  width: 7px; /*ドットボタンのサイズ*/
  height: 7px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #fff; /*ドットボタンの色*/
  padding: 0;
}
.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}
.gallery_photo {
  margin: 0 auto 5px;
  max-width: 768px;
}
.gallery_photo img {
  width: 100%;
  height: auto;
  max-width: 768px;
  display: block;
  margin: 30px auto 0;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}
@media(min-width: 1040px) {
  .gallery_photo {
    max-width: 900px;
  }
  .gallery_photo img {
    max-width: 900px;
    margin-top: 0;
  }
}
.gallery_photo li {
  list-style: none;
}
.choice-btn img {
  width: 100%;
  height: auto;
  max-width: 768px;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}
.slick-prev, .slick-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc; /*矢印の色*/
  border-right: 2px solid #ccc; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}
.choice-btn li {
  cursor: pointer;
  outline: none;
  background: #333;
  list-style: none;
}
.choice-btn li img {
  opacity: 0.4; /*選択されていないものは透過40%*/
}
.choice-btn li.slick-current img {
  opacity: 1; /*選択されているものは透過しない*/
}
@media(min-width: 1040px) {
  .choice-btn {
    max-width: 900px;
    margin: 0 auto;
  }
}