@charset "utf-8";

body {
  background-color: #FEF5E9;
  font-family: "Noto Serif JP";
  font-weight: 400;
  color: #472F1C;
}

img {
  width: 100%;
}

h2 {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
}

h3 {
  font-size: 29px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header {
  /* height: 100px; */
  box-sizing: content-box;
  position: relative;
  background-color: #FEF5E9;
}

.nav--inner {
  padding: 48px 0;
  margin: 0 50px;
}

.nav--inner h1 {
  width: 14%;
}

.nav--inner h1 img {
  width: 100%;
  max-width: 195px;
}

.nav--inner p {
  font-size: 20px;
  font-weight: bold;
}

.gnav {}


.gnav--menu {
  font-size: 20px;
  gap: 10px;
}

.gnav_wrap li:first-child {
  margin-left: 50px;
}

.gnav_wrap li:last-child {
  margin-right: 0;
}

.gnav_wrap li {
  margin-right: 30px;
}

header .gnav--cta li a,
footer .gnav--cta li a {
  width: 9em;
}

.gnav--cta .gnav--link {
  display: block;
  text-align: center;
  /* width: 136px; */
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  color: #fff;
  background-color: #A37B01;
  font-size: 18px;
}

.gnav--cta .gnav--link p {
  font-size: 18px;
}

.tel {
  position: absolute;
  top: 0;
  right: 32px;
  background: #006785;
  color: #FFF;
  padding: 0px 81px 4px;
  border-radius: 0 0 10px 10px;
}

.tel a img {
  width: 23px;
  margin-right: 20px;
}

.tel p {
  font-size: 19px !important;
  letter-spacing: 2px;
}

main {
  position: relative;
}

main img {
  width: 100%;
}

.point--inner,
.contact {
  text-align: center;
  max-width: 900px;
  margin: 60px auto;
}

.contact p {
  margin: 20px;
  font-family: "Noto Sans JP";
}

.contact .gnav--cta {
  justify-content: center;
}

.contact .gnav--cta .gnav--link {
  display: block;
  text-align: center;
  width: 200px;
  height: 43px;
  line-height: 47px;
  border-radius: 23.5px;
  margin: 35px 17px;
}

.contact .gnav--cta .gnav--link p {
  font-size: 23px;
  font-family: "Noto Serif JP";
  font-weight: bold;
}

#point {
  background-color: #006785;
  padding: 50px 0;
}

#point h2 {
  color: #fff;
}

.point--inner .flex {
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.point--inner .point--item {
  width: 30%;
}

.point--inner .flex.point--sub {
  justify-content: center;
}

.point--inner .flex.point--sub .point--item {
  margin: 0 20px;
}

.point--inner .point--item img {
  width: 100%;
}

.point--link {
  display: block;
  width: 257px;
  height: 47px;
  line-height: 47px;
  border-radius: 23.5px;
  text-align: center;
  background-color: #fff;
  color: #005432;
  margin: 0 auto;
}

.point--link p {
  font-size: 23px;
  font-weight: bold;
  font-family: "Noto Serif JP";
}

#about {
  margin-top: 80px;
}

#about .about--inner {
  margin-bottom: 80px;
}

#about .about--inner p {
  margin-bottom: 30px;
  line-height: 1.6;
}

#about .plan--inner {
  margin-bottom: 30px;
}

#about .plan--inner h2 {
  margin-bottom: 30px;
}

#about .point--link {
  background-color: #A37B01;
  color: #fff;
}

.contact.bottom {
  color: #fff;
  width: 100%;
  max-width: 100%;
  background-color: #006785;
  padding: 70px 0 80px;
}

.contact--inner {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.75;
}

.contact--cta .gnav--link {
  display: block;
  text-align: center;
  width: 200px;
  height: 47px;
  line-height: 47px;
  border-radius: 23.5px;
  color: #006785;
  background-color: #fff;
  font-size: 23px;
}

.contact.bottom .contact--cta {
  margin-top: 50px;
}

.contact.bottom .contact--cta h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact.bottom .contact--cta h3::before,
.contact.bottom .contact--cta h3::after {
  content: "";
  height: 1px;
  width: 214px;
  border-bottom: 1px solid #FFF;
}

.contact.bottom .contact--cta h3::before {
  margin-left: 0;
}

.contact.bottom .contact--cta h3::after {
  margin-right: 0;
}

.contact.bottom .contact--cta p {
  font-family: "Noto Serif JP";
  font-weight: bold;
}

.contact.bottom .contact--tel {
  width: 100%;
  border: 5px solid #fff;
  padding: 50px 0;
  margin-top: 50px;
}

.contact.bottom .contact--tel a {
  font-size: 29px;
  font-family: "Noto Sans JP";
  font-weight: bold;
  letter-spacing: 4px;
}

.map {
  text-align: center;
  line-height: 1.75;
  margin-top: 100px;
  padding-bottom: 30px;
}

.map h2 {
  margin-bottom: 30px;
}

.map p {
  font-family: "Noto Sans JP";
}

.map .car {
  margin-bottom: 30px;
}

.map .map--inner {
  margin: 50px auto;
}

.map .gmap--inner iframe {
  height: 430px;
}

footer {
  color: #FFF;
  background-color: #006785;
}

.footer--inner {
  padding: 40px 50px;
}

footer .copyright {
  display: block;
  padding: 20px;
  background-color: #014E60;
  width: 100%;
  text-align: center;
}

footer .nav--inner {
  margin: 0 auto;
}

footer .external-link li {
  margin-left: 30px;
}

.sp {
  display: none;
}

@media screen and (max-width:1507px) {
  header .nav--inner {
    width: 95%;
    margin: 0 auto;
  }

  header .nav--inner p,
  footer .nav--inner p {
    /* font-size: 16px; */
    font-size: 1.4vw;
  }

  header .gnav_wrap li:first-child,
  footer .gnav_wrap li:first-child {
    /* margin-left: 20px; */
    margin-left: 3.31vw;
  }

  header .gnav_wrap li,
  footer .gnav_wrap li {
    /* margin-right: 10px; */
      margin-right: 2.66vw;
  }

  header .gnav--cta .gnav--link,
  footer .gnav--cta .gnav--link {
    /* width: 7em; */
    width: fit-content;
    height: 2.6vw;
    line-height: 1.5em;
    font-size: 1.46vw;
    padding: 0 2em;
  }

  header .gnav--cta .gnav--link p {
    /* font-size: 16px; */
    font-size: 1.3vw;
  }

  .footer--inner {
    width: 95%;
    padding: 40px 0;
    margin: 0 auto;
  }

  footer .gnav--cta .gnav--link p {
    font-size: 16px;
    line-height: 2.6vw;
  }
}

@media screen and (max-width:963px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  p {
    /* font-size: 2.051vw; */
    font-size: 3vw;
  }

  h2 {
    font-size: 4.5vw;
  }

  h3 {
    font-size: 3.711vw;
  }

  body {
    position: relative;
  }

  /* header{
    position: sticky;
    top: 0;
    z-index: 2;
  } */
  header .gnav,
  header .gnav--menu,
  header .gnav--cta {
    flex-direction: column;
  }

  header .gnav--cta {
    margin-top: 2.667vw;
  }

  header .gnav--menu li,
  header .gnav--cta li {
    margin: 0 auto 2.667vw;
  }

  header .gnav_wrap li:first-child,
  footer .gnav_wrap li:first-child {
    margin: 0 auto 2.667vw;
  }

  header .gnav--cta .gnav--link,
  footer .gnav--cta .gnav--link {
    width: fit-content;
    height: 7vw;
    line-height: 1.5em;
    font-size: 1.46vw;
    padding: 0 1em;
  }



  .gnav_wrap-pc {
    display: none;
  }

  .gnav--menu {
    font-size: 2.4vw;
  }

  .nav--inner {
    padding: 3.333vw 0;
    margin: 0 6.667vw;
  }

  .nav--inner h1 img {
    width: 25.867vw;
  }

  header .nav--inner p,
  footer .nav--inner p {
    /* font-size: 2.667vw; */
    font-size: 4.000vw;
  }




  .nav--inner p {
    font-size: 2.667vw;
  }

  header .gnav--cta .gnav--link {
    width: 35.333vw;
    font-size: 3.6vw;
  }

  footer .gnav--cta .gnav--link {
    width: 28.333vw;
    height: 6.667vw;
    line-height: 6.667vw;
  }

  header .gnav--cta .gnav--link p {
    /* font-size: 2.4vw; */
    font-size: 3.6vw;
  }

  .gnav--cta .gnav--link p {
    /* font-size: 2.4vw; */
    font-size: 3.6vw;
  }

  .contact .gnav--cta .gnav--link {
    width: 25.333vw;
    height: 7.267vw;
    line-height: 8.267vw;
    border-radius: 7.133vw;
    margin: 4vw 2.667vw 0;
    width: 28.333vw;
  }

  .contact .gnav--cta .gnav--link p {
    font-size: 3.5vw;
    margin: 0;
    line-height: 7.267vw;
  }

  .tel {
    position: absolute;
    top: 0;
    right: 1.333vw;
    background: #006785;
    color: #FFF;
    padding: 0.667vw 2vw;
    border-radius: 0 0 1.333vw 1.333vw;
    z-index: 2;
  }

  .tel p {
    font-size: 3.4vw !important;
  }

  .tel a img {
    width: 3.067vw;
    margin-right: 0.667vw;
  }

  .season--inner {
    width: 88vw;
    margin: 6.667vw auto 0;

    display: none;
  }

  .season--inner ul li {
    width: 42.667vw;
  }

  #point {
    padding: 6.667vw 0;
  }

  .point--inner .flex {
    width: 88vw;
  }

  .point--inner .point--item,
  .point--inner .flex.point--sub .point--item {
    width: 41.067vw;
    margin: 0 auto 2.667vw;
  }

  .point--link {
    width: 34.667vw;
    height: 6.267vw;
    line-height: 6.267vw;
    border-radius: 3.133vw;
  }

  .point--link p {
    font-size: 3.5vw;
  }

  .point--inner,
  .contact {
    /* margin: 10.667vw auto 6.667vw; */
    margin: 6.667vw auto 6.667vw;
  }

  .about--inner img,
  .plan--inner img {
    width: 88vw;
    margin: 0 auto;
  }

  #about {
    margin-top: 10.667vw;
  }

  #about .about--inner {
    margin-bottom: 10.667vw;
  }

  #about .plan--inner h2 {
    margin-bottom: 4vw;
  }

  .contact.bottom {
    padding: 6.667vw 0;
  }

  .contact p {
    margin: 1.333vw auto 4vw;
  }

  .contact .gnav--cta .gnav--link {
    margin: 0 2.667vw 0;
  }

  .contact.bottom .contact--tel {
    width: 88vw;
    margin: 6.667vw auto 0;
    border: 0.667vw solid #fff;
    padding: 6.667vw 0;
  }

  .contact.bottom .contact--cta {
    margin-top: 6.667vw;
  }

  .contact.bottom .contact--cta h3 {
    width: 88vw;
    margin: 0 auto 4vw;
  }

  .contact.bottom .contact--cta h3::before,
  .contact.bottom .contact--cta h3::after {
    width: 14.267vw;
  }

  .contact.bottom .contact--tel a {
    font-size: 3.467vw;
  }

  .map {
    margin-top: 10.667vw;
    padding-bottom: 4vw;
  }

  .map h2 {
    margin-bottom: 4vw;
  }

  .map .map--inner {
    margin: 6.667vw auto;
  }

  .map .gmap--inner iframe {
    height: 57.333vw;
  }

  footer {
    font-size: 3.133vw;
  }

  footer h1 {
    margin-bottom: 2.667vw;
  }

  .footer--inner {
    padding: 4vw 0 2.667vw;
  }

footer .gnav--cta {
	width: 100%;
	justify-content: center;
	margin: 0 auto 6.667vw;
	gap: 5vw;
}

  .gnav--cta .gnav--link {
    width: 25.333vw;
    height: 6.667vw;
    line-height: 6.667vw;
    border-radius: 3.333vw;
  }

  footer .nav--inner p {
    font-size: 3.4vw;
  }

  footer .nav--inner .gnav--cta .gnav--link p {
    font-size: 3.5vw;
    line-height: 1.6;
  }

  footer .gnav--menu {
    flex-wrap: wrap;
  }

  footer .gnav--menu p {
    font-size: 2.4vw;
  }

  footer .gnav_wrap li {
    margin: 0;
  }

  footer .gnav_wrap .menu-item {
    display: block;
    width: 47%;
    text-align: right;
    margin-bottom: 2vw;
  }

  footer .nav--inner h1 {
    width: 100%;
    text-align: center;
  }


  footer .gnav_wrap .gnav.flex.sp-footer {
    display: block;
    text-align: center;
    margin-bottom: 0vw;
  }

  footer .gnav_wrap .sp-footer-menu li {
    text-align: center;
  }

  footer .gnav_wrap .gnav.flex.sp-footer p {
    margin-bottom: 5vw;
    line-height: 1.8;
  }

  /* header .gnav_wrap li:first-child,
  footer .gnav_wrap li:first-child {
    margin: 0 auto 0;
  } */

  footer .gnav_wrap .sp-footer-menu li:first-child {
    /* margin: 0 auto 0; */
    width: 32%;
  }


  header .gnav_wrap li:last-child {
    margin-right: auto;
  }

  footer .gnav--cta li:first-child,
  footer .external-link li:first-child {
    margin: 0;
  }

  footer .external-link {
    justify-content: center;
  }

  footer .external-link li:first-child {
    margin-right: 4.667vw;

  }

  footer .copyright {
    padding: 1.333vw;
    ;
  }
}

@media screen and (max-width:500px) {
  p {
    font-size: 3.2vw;
  }

  footer .nav--inner p {
    font-size: 3.2vw;
    margin-bottom: 5vw;
  }
}

/* @media screen and (max-width:1024px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  p{
    font-size: 2.133vw;
  }
  h2{
    font-size: 4.533vw;
  }
  h3{
    font-size: 3.733vw;
  }
  body{
    position: relative;
  }
  header{
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .gnav_wrap-pc{
    display: none;
  }
  .gnav--menu{
    font-size: 2.4vw;
  }
  .nav--inner{
    padding: 3.333vw 0;
    margin: 0 6.667vw;
  }
  .nav--inner h1 img{
    width: 25.867vw;
  }
  .nav--inner p{
    font-size: 2.667vw;
  }
  .gnav--cta .gnav--link p{
    font-size: 2.4vw;
  }
  .contact .gnav--cta .gnav--link{
    width: 25.333vw ;
    height: 6.267vw;
    line-height: 6.267vw;
    border-radius: 3.133vw;
    margin: 4vw 2.667vw 0;
  }
  .contact .gnav--cta .gnav--link p{
    font-size: 2.667vw;
    margin: 0;
  }
  .tel {
      position: absolute;
      top: auto;
      bottom: -3.7vw;
      right: 1.333vw;
      background: #006785;
      color: #FFF;
      padding: 0.667vw 2vw;
      border-radius: 0 0 1.333vw 1.333vw;
      z-index: 2;
  }
  .tel p{
    font-size: 2.133vw;
  }
  .tel a img{
    width: 3.067vw;
    margin-right: 0.667vw;
  }

  .season--inner{
    width: 88vw;
    margin: 6.667vw auto 0;
  }
  .season--inner ul li{
    width: 42.667vw;
  }

  #point{
    padding: 6.667vw 0;
  }
  .point--inner .flex{
    width: 80vw;
  }
  .point--inner .point--item,
  .point--inner .flex.point--sub .point--item{
    width: 37.067vw;
    margin: 0 auto 2.667vw;
  }
  .point--link{
    width: 34.667vw;
    height: 6.267vw;
    line-height: 6.267vw;
    border-radius: 3.133vw;
  }
  .point--link p{
    font-size: 3.067vw;
  }
  .point--inner, .contact{
    margin: 10.667vw auto 6.667vw;
  }
  .about--inner img,
  .plan--inner img{
    width: 88vw;
    margin: 0 auto;
  }
  #about{
    margin-top: 10.667vw;
  }
  #about .about--inner{
    margin-bottom: 10.667vw;
  }
  #about .plan--inner h2{
    margin-bottom: 4vw;
  }
  .contact.bottom{
    padding: 6.667vw 0;
  }
  .contact p{
    margin: 1.333vw auto 4vw;
  }
  .contact .gnav--cta .gnav--link{
    margin: 0 2.667vw 0;
  }
  .contact.bottom .contact--tel{
    width: 88vw;
    margin: 6.667vw auto 0;
    border: 0.667vw solid #fff;
    padding: 6.667vw 0;
  }
  .contact.bottom .contact--cta{
    margin-top: 6.667vw;
  }
  .contact.bottom .contact--cta h3{
    width: 88vw;
    margin: 0 auto 4vw;
  }
  .contact.bottom .contact--cta h3::before,
  .contact.bottom .contact--cta h3::after{
    width: 14.267vw;
  }
  .contact.bottom .contact--tel a{
    font-size: 3.467vw;
  }

  .map{
    margin-top: 10.667vw;
    padding-bottom: 4vw;
  }
  .map h2{
    margin-bottom: 4vw;
  }
  .map .map--inner{
    margin: 6.667vw auto;
  }
  .map .gmap--inner iframe{
    height: 57.333vw;
  }

  footer{
    font-size: 2.133vw;
  }
  footer h1{
    margin-bottom: 2.667vw;
  }
  .footer--inner {
    padding: 4vw 6vw 2.667vw;
  }
  footer .gnav--cta {
    width: 100%;
    justify-content: space-between;
    margin: 6.667vw auto;
  }
  .gnav--cta .gnav--link {
    width: 25.333vw;
    height: 6.667vw;
    line-height: 6.667vw;
    border-radius: 3.333vw;
  }
  footer .nav--inner p{
    font-size: 1.867vw;
  }
  footer .nav--inner .gnav--cta .gnav--link p {
    font-size: 2.667vw;
  }
  footer .gnav--menu {
    flex-wrap: wrap;
  }
  footer .gnav--menu p {
    font-size: 2.4vw;
  }
  footer .gnav_wrap li{
    margin: 0;
  }
  .gnav_wrap li:first-child{
    margin: 0;
  }
  footer .gnav_wrap .menu-item {
    display: block;
    width: 50%;
    text-align: right;
    margin-bottom: 2vw;
  }
  footer .external-link{
    justify-content: center;
  }
  footer .external-link li:first-child{
    margin-right: 4.667vw;
  }
  footer .copyright{
    padding: 1.333vw;;
  }

  header .gnav_wrap li:first-child {
    margin: 0 auto 2.667vw;
  }
  header .gnav_wrap li:last-child {
    margin-right: auto;
  }
  header .gnav,
  header .gnav--menu,
  header .gnav--cta{
    flex-direction: column;
  }
  header .gnav--cta{
    margin-top: 2.667vw;
  }
  header .gnav--menu li,
  header .gnav--cta li{
    margin: 0 auto 2.667vw;
  }
} */

@media screen and (max-width:500px) {
  .season--inner ul {
    flex-direction: column;
  }

  .season--inner ul li {
    width: 80%;
    margin-bottom: 4vw;
  }
}


/* header（デモの参考値） */
.demobox-header {
  background: #ddd;
  height: 13.333vw;
  padding: 1em;
}

/* headerのサイト名（デモの参考値） */

/* hamburgerここから */
/* inputを非表示 */
.input-hidden {
  display: none;
}

/* label */
.hamburger-demo-switch {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  /* ハンバーガーアイコンの位置（上から） */
  z-index: 9999;
  width: 13.333vw;
  /* アイコン（クリック可能領域）の幅 */
  height: 13.333vw;
  /* アイコン（クリック可能領域の）高さ */
}

/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked~.hamburger-demo-switch {
  position: fixed;
}

/* ハンバーガーアイコン */
.hamburger-switch-line1,
.hamburger-switch-line1:before,
.hamburger-switch-line1:after {
  width: 5vw;
  height: 0.6vw;
  background: #707070;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .3s;
  content: "";
}

.hamburger-switch-line1 {
  transform: translate(-50%, -50%);
}

/* ↓ここを1箇所にまとめる（重複していた方を削除） */
.hamburger-switch-line1:before {
  transform: translate(-50%, -280%);
}

.hamburger-switch-line1:after {
  transform: translate(-50%, 180%);
}

/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked~.hamburger-demo-switch .hamburger-switch-line1 {
  width: 0;
}

#hamburger-demo1:checked~.hamburger-demo-switch .hamburger-switch-line1:before {
  transform: rotate(45deg) translate(-36%, 295%);
}

#hamburger-demo1:checked~.hamburger-demo-switch .hamburger-switch-line1:after {
  transform: rotate(-45deg) translate(-40%, -295%);
}

/* メニューエリア */
.hamburger-demo-menuwrap {
  position: fixed;
  height: 100%;
  background: #fafafa;
  /* メニューエリアの背景色 */
  padding: 10.667vw 1.333vw 6.667vw;
  z-index: 9998;
  transition: .3s;
  overflow-y: scroll;
  /* メニュー内容が多い場合に縦スクロールする */
  top: 0;
  left: 100%;
  width: 50%;
}

/* メニューリスト */
.hamburger-demo-menulist {
  margin-right: 3%;
  padding-left: 5% !important;
  /* !important不要な場合もあり */
  list-style: none;
}

.hamburger-demo-menulist li a {
  text-decoration: none;
  color: #333;
  /* メニューリストの文字色 */
  display: block;
  padding: .5em 0;
}

/* メニューエリア･アニメーション */
/* 右から */
#hamburger-demo1:checked~.hamburger-demo-menuwrap {
  left: 50%;
}

/* コンテンツカバー */
#hamburger-demo1:checked~.hamburger-demo-cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3, 3, 3, .5);
  display: block;
}

/* PCではハンバーガーメニューを表示しない */
@media (min-width: 1025px) {
  .hamburger-demo-menubox {
    display: none;
  }
}








/* 見学予約・資料請求・ペットご相談 */
#contact h2 {
  background-color: #006785;
  color: #fff;
  padding: 35px 0;
}

#contact .contact--tel {
  max-width: 900px;
  text-align: center;
  padding: 50px 0;
  margin: 50px auto 100px;
  background-color: #006785;
  color: #fff;
}

#contact .contact--tel a {
  font-size: 29px;
  font-family: "Noto Sans JP";
}

#contact .contact--message {
  text-align: center;
  line-height: 2;
  margin-bottom: 80px;
  font-family: "Noto Sans JP";
}

.form-group .flex {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.form-group .flex p {
  margin: 0 0 10px 10px;
}

@media screen and (max-width: 1024px) {
  #contact .container {
    width: 88vw;
    margin: 0 auto 9.766vw;
  }

  #contact .contact--tel {
    width: 88vw;
    margin: 6.667vw auto;
    padding: 6.667vw 0 5vw;
    line-height: 1.6;
  }

  #contact .contact--tel a {
    font-size: 4.467vw;
    line-height: 2;
  }

  #contact .contact--message {
    width: 88vw;
    margin: 0 auto 6.667vw;
    text-align: left;
  }

  .form-group {
    margin-bottom: 1.953vw;
    border-bottom: 0.098vw dashed #A37B01;
    padding-bottom: 1.953vw;
  }
}

@media screen and (max-width: 500px) {
  .form-group .flex {
    flex-direction: column;
  }

  .form-group .flex p {
    margin-left: 0;
  }
}


.pc_block {
  display: block;
}

.sp_block {
  display: none;
}

@media only screen and (max-width: 760px) {
  .pc_block {
    display: none;
  }

  .sp_block {
    display: block;
  }
}