html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  background-color: #f6f3f0;

}

*, *::before, *::after {
  box-sizing: border-box;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0 0 20px 0;
}
a {
  text-decoration: none;
  color: inherit;
}



.acenter {text-align: center; margin: 0 auto;}
.aleft {text-align: left;}
.aright {text-align: right;}




.container {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

/* header　======================================== */

header {
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(30px, 6vw, 80px);
}
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #118c44;
  z-index: 1;
}
header .header_bg {
  position: relative;
  z-index: 2;
  background-image: url(../img/header/main_bg.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
header .container {
  max-width: 100%;
  padding: clamp(50px, 10vw, 80px) clamp(24px, 3vw, 40px) 0px;
}
header .main{
  width:42%;
  margin:0 auto;
}

header .main img{
  width:100%;
  height:auto;
}
/* footer　======================================== */

footer {
  text-align: center;
  position: relative;
  overflow: hidden;
}
footer .container {
  padding: clamp(90px, 10vw, 110px) 20px clamp(40px, 4vw, 60px);

}
footer .container p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 5vw, 30px);
  color: #00592f;
  line-height: 1.5;
  margin: 25px 0 40px;
}
footer .container p span {
  color: #b64240;
}
footer .group_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(15px, 2vw, 25px);
  max-width: 785px;
  margin: 0 auto clamp(40px, 4vw, 60px);
}
footer .group_wrap a {
  display:block;
}

footer .group_wrap a img {
  display:block;
  border: 1px solid #00592f;
}
footer .container img.group_logo {
  max-width: 320px;
}
footer .copyright {
  background: #118c44;
  padding: 12px 10px;
  color: #fff;
}


/*黄色波背景　======================================== */
/*.yellow_wave:before {
  position: inherit;
  top: -32px;
  display: block;
  content: "";
  height: 32px;
  background: url(img/wave_lemon_top.svg) repeat-x center top/auto 53px;
}*/
.yellow_wave {
  position: relative;
  padding: 0px 0px;
  text-align: center;
  background-color: #f1ed96;
}
.yellow_wave:after {
  position: inherit;
  bottom: -32px;
  display: block;
  content: "";
  height: 32px;
  background: url(../img/bg/wave_yellow_bottom.svg) repeat-x center bottom/auto 53px;
  z-index: 5;
}
.yellow_wave .container {
  padding-top: clamp(40px, 6vw, 60px);
  padding-bottom: clamp(64px, 10vw, 100px);
}
/*グレー波背景　======================================== */
.gray_wave:before {
  position: inherit;
  top: -32px;
  display: block;
  content: "";
  height: 32px;
  background: url(../img/bg/wave_gray_top.svg) repeat-x center top/auto 53px;
  z-index: 5;
}
.gray_wave {
  position: relative;
  padding: 0px 0px;
  text-align: center;
  background-color: #f6f3f0;
}
/*.gray_wave:after {
  position: inherit;
  bottom: -32px;
  display: block;
  content: "";
  height: 32px;
  background: url(../img/bg/wave_gray_bottom.svg) repeat-x center bottom/auto 53px;
  z-index: 5;
}*/
.gray_wave .container {
  padding-top: clamp(40px, 6vw, 60px);
  padding-bottom: clamp(64px, 10vw, 100px);
}
/* ファーストビュー　======================================== */
section.fv {
  text-align: center;
  position: relative;
  overflow: hidden; 
}
section.fv p.text {
  margin: 0 0 clamp(40px, 6vw, 60px) 0;
}
section.fv .fv_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 50px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
/* ポイント　======================================== */
section.point {
  text-align: center;
  position: relative;
}
section.point .yellow_wave .container {
  padding-top: clamp(100px, 10vw, 130px);
  padding-right: 20px;
  padding-bottom: clamp(24px, 4vw, 40px);
  padding-left: 20px;
}
section.point .point_bg {
  background-image: url(../img/leaf_bg_top.webp), url(../img/point_bg_photo.webp);
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  background-size: auto, auto;
}
section.point .main_title {
  padding-bottom: clamp(20px, 5vw, 40px);
}
section.point .point_box {
  position: relative;
  max-width: 900px;
  margin: 0 auto 40px;
  background-color: #fff;
  border-radius: 60px;
  padding: 22px 40px 22px 130px;
  text-align: left;
}
section.point .point_box img {
  position: absolute;
  top: -6px;
  left: 0;
}
section.point .point_box div {
  color: #b64240;
  font-size: clamp(16px, 4vw, 28px);
  font-weight: 700;
  line-height: 1.4;
}
section.point .point_box div br {
  display: none;
}
section.point .point_box div span {
  color: #3f66ae;
  font-weight: 900;
}
/* ホテルマップ　======================================== */
section.hotelmap {
  text-align: center;
  position: relative;
  background-color: #fff;
  padding: clamp(80px, 10vw, 120px) 0 clamp(110px, 15vw, 180px);
}
section.hotelmap .main_title {
  margin-bottom: 40px;
}
/*----MAP　PC---*/
section.hotelmap .map_pc {
  display: block;
  position: relative;
  max-width: 780px;
  margin: 40px auto 0;
  aspect-ratio: 13/11;
  background-image: url(../img/map.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
section.hotelmap .map_pc a {
  position: absolute;
  display: block;
  height: 16.1%;
  transition: background-color 0.3s ease;
}

section.hotelmap .map_pc a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
section.hotelmap .map_pc a:hover::after {
  opacity: 1;
}
section.hotelmap .map_pc a.naturwald {
  width: 41.2%;
  top: 58%;
  left: 58.1%;
}
section.hotelmap .map_pc a.ofurocafeseiyukan {
  width: 41%;
  top: 29%;
}
section.hotelmap .map_pc a.naturwald::after,
section.hotelmap .map_pc a.ofurocafeseiyukan::after {
  background-image: url(../img/link_bg.webp);
}
section.hotelmap .map_pc a.hotelhills {
  width: 33%;
  bottom: 0;
  left: 35.6%;
}
section.hotelmap .map_pc a.hotelhills::after {
  background-image: url(../img/link_bg1.webp);
}
section.hotelmap .map_pc a.hanakagura {
  width: 28%;
  top: 8.5%;
  left: 62.8%;
}
section.hotelmap .map_pc a.hanakagura::after {
  background-image: url(../img/link_bg2.webp);
}
/*----MAP　SP---*/
section.hotelmap .map_sp {
  display: none;
}

/* ホテルの特徴　======================================== */
section.hotelcard {
  position: relative;
}

section.hotelcard .gray_wave:after {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: 174px;
  margin: 0 auto;
  position: absolute;
  top: -130px;
  left: 50%;
    transform: translate(-50%);
  content: "";
  background-image: url(../img/hotelcard_bgtop.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  z-index: 5;
}
section.hotelcard .hc_box {
  border-bottom: 1px solid #beb5a1;
  padding-bottom: clamp(40px, 6vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
section.hotelcard .hc_box:last-child {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
section.hotelcard .hc_box .main_title {
  
}
section.hotelcard .hc_box .logo {
  margin-bottom: 20px;
}
section.hotelcard .hc_box .main_photo {
  margin-bottom: clamp(15px, 3vw, 30px);
}
section.hotelcard .hc_box p.text {
  margin-bottom: clamp(24px, 3vw, 40px);
}
section.hotelcard .hc_box p.text span {
  font-weight: bold;
  background-color: #ece846;
}
section.hotelcard .hc_box .photo_wrap {
  max-width: 950px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  text-align: center;
}
section.hotelcard .hc_box .photo_wrap div {
  
}
section.hotelcard .hc_box .photo_wrap div p {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 22px);
  line-height: 1.4;
  margin: 0;
}

section.hotelcard .hc_box .photo_wrap.naturwald p {
  color: #00592f;
}
section.hotelcard .hc_box .photo_wrap.ofurocafeseiyukan p {
  color: #3f66ae;
}
section.hotelcard .hc_box .photo_wrap.hotelhills p {
 color: #b64240; 
}
section.hotelcard .hc_box .photo_wrap.hanakagura p {
  color: #ee8126;
}
/* ウェルカムベビー　======================================== */

section.welcomebaby {
  text-align: center;
  position: relative;
}

section.welcomebaby .welcomebaby_bg {
  background-image: url(../img/leaf_bg_top.webp), url(../img/welcomebaby_bg_photo.webp);
  background-repeat: no-repeat;
  background-position: top center, top center;
  background-size: auto, auto;
  margin-bottom: 40px;
}
section.welcomebaby .yellow_wave .container {
  padding-top: clamp(110px, 14vw, 160px);
  padding-bottom: clamp(40px, 10vw, 100px);
}
section.welcomebaby .description {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 30px);
  margin: clamp(20px, 4vw, 60px) auto 0;
  line-height: 1.4;
}



section.welcomebaby #room_block {
  margin-bottom: clamp(40px, 6vw, 80px);
}

section.welcomebaby .anniversary_bnr {
  padding: 0 20px;
}
section.welcomebaby .anniversary_bnr a {
}





@media only screen and (max-width: 1200px){



}



@media screen and (max-width: 750px) {
  body {
    font-size: 16px;
    line-height: 1.8;
  }
  /* header　======================================== */
  header .header_bg {
    background-image: url(../img/header/mainsp_bg.webp);
  }
  header .container {
    padding: clamp(60px, 14vw, 100px) clamp(24px, 3vw, 40px) 0px;
  }
  header .main{
    width: 92%;
  }
  /* footer　======================================== */
  footer .copyright {
    padding: 10px 10px;
  }


  /* ファーストビュー　======================================== */
  section.fv .fv_wrap {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 50px);
    margin-bottom: clamp(40px, 6vw, 80px);
  }
  /* ポイント　======================================== */

  section.point .yellow_wave .container {
    padding-right: 40px;
    padding-left: 40px;
  }

  section.point .point_bg {
    background-image: url(../img/leaf_bg_top_sp.webp), none;
  }
  section.point .point_box {
    margin-bottom: clamp(12px, 3vw, 25px);
    padding: clamp(10px, 3vw, 20px) 40px clamp(10px, 3vw, 20px) clamp(48px, 6vw, 70px);
    text-align: center;
  }
  section.point .point_box img {
    top: 0px;
    width: 11%;
    min-width: 50px;
  }

  section.point .point_box div br {
    display: inline;
  }

  /* ホテルマップ　======================================== */
  /*----MAP　SP---*/
  section.hotelmap .map_sp {
    display: block;
  }
  section.hotelmap .map_sp .maplink_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(15px, 2vw, 25px);
    margin: 0 auto clamp(40px, 4vw, 60px);
  }
  /*----MAP　PC---*/
  section.hotelmap .map_pc {
    display: none;
  }

  /* ホテルの特徴　======================================== */

  section.hotelcard .gray_wave:after {
    height: 158px;
    top: -110px;
    background-image: url(../img/hotelcard_bgtop_sp.svg);
    background-size: 280px;
  }

  section.hotelcard .hc_box .photo_wrap {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }


  /* ウェルカムベビー　======================================== */

  section.welcomebaby .welcomebaby_bg {
    background-image: url(../img/leaf_bg_top.webp), none;
  }

}

@media screen and (max-width: 580px) {
  body {
    font-size: 14px;
  }
  /* ポイント　======================================== */
  section.point .yellow_wave .container {
      padding-top: clamp(50px, 16vw, 90px);
  }
  section.point .point_bg {
    background-size: contain;
  }
  /* ホテルの特徴　======================================== */

  section.hotelcard .gray_wave:after {
    height: 140px;
    top: -85px;
    background-size: 240px;
  }

}