@charset "UTF-8";





/*------------------------------------
	margin padding
------------------------------------*/
.mtop0 { margin-top: 0!important; }
.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: clamp(5px, 1.3vw, 10px); }/* 10/768 */
.mtop15 { margin-top: clamp(8px, 1.9vw, 15px); }
.mtop20 { margin-top: clamp(10px, 2.6vw, 20px); }
.mtop25 { margin-top: clamp(14px, 3.2vw, 25px); }
.mtop30 { margin-top: clamp(16px, 3.9vw, 30px); }
.mtop40 { margin-top: clamp(20px, 5.2vw, 40px); }
.mtop45 { margin-top: clamp(22px, 5.8vw, 45px); }
.mtop50 { margin-top: clamp(24px, 6.5vw, 50px); }
.mtop55 { margin-top: clamp(26px, 7.1vw, 55px); }
.mtop60 { margin-top: clamp(28px, 7.8vw, 60px); }
.mtop65 { margin-top: clamp(30px, 8.4vw, 65px); }
.mtop70 { margin-top: clamp(32px, 9.1vw, 70px); }
.mtop75 { margin-top: clamp(34px, 9.7vw, 75px); }
.mtop80 { margin-top: clamp(36px, 10.4vw, 80px); }
.mtop85 { margin-top: clamp(38px, 11vw, 85px); }
.mtop90 { margin-top: clamp(40px, 11.7vw, 90px); }
.mtop95 { margin-top: clamp(42px, 12.2vw, 95px); }
.mtop100 { margin-top: clamp(44px, 13vw, 100px); }



.mbtm0 { margin-bottom: 0!important; }
.mbtm5 { margin-bottom: 5px; }
.mbtm10 { margin-bottom: clamp(5px, 1.3vw, 10px); }
.mbtm15 { margin-bottom: clamp(8px, 1.9vw, 15px); }
.mbtm20 { margin-bottom: clamp(10px, 2.6vw, 20px); }
.mbtm25 { margin-bottom: clamp(14px, 3.2vw, 25px); }
.mbtm30 { margin-bottom: clamp(16px, 3.9vw, 30px); }
.mbtm35 { margin-bottom: clamp(18px, 4.5vw, 35px); }
.mbtm40 { margin-bottom: clamp(20px, 5.2vw, 40px); }
.mbtm45 { margin-bottom: clamp(22px, 5.8vw, 45px); }
.mbtm50 { margin-bottom: clamp(24px, 6.5vw, 50px); }
.mbtm55 { margin-bottom: clamp(26px, 7.1vw, 55px); }
.mbtm60 { margin-bottom: clamp(28px, 7.8vw, 60px); }
.mbtm65 { margin-bottom: clamp(30px, 8.4vw, 65px); }
.mbtm70 { margin-bottom: clamp(32px, 9.1vw, 70px); }
.mbtm75 { margin-bottom: clamp(34px, 9.7vw, 75px); }
.mbtm80 { margin-bottom: clamp(36px, 10.4vw, 80px); }
.mbtm85 { margin-bottom: clamp(38px, 11vw, 85px); }
.mbtm90 { margin-bottom: clamp(40px, 11.7vw, 90px); }
.mbtm95 { margin-bottom: clamp(42px, 12.2vw, 95px); }
.mbtm100 { margin-bottom: clamp(44px, 13vw, 100px); }




.mleft5 { margin-left: 5px; }
.mleft10 { margin-left: 10px; }
.mleft15 { margin-left: 15px; }
.mleft20 { margin-left: 20px; }

.mright5 { margin-right: 5px; }
.mright10 { margin-right: 10px; }
.mright15 { margin-right: 15px; }
.mright20 { margin-right: 20px; }

.mauto {margin: auto;}

.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }

.ptop30 { padding-top: 30px; }

.pbtm30 { padding-bottom: 30px; }


.pleft5 { padding-left: 5px; }
.pleft10 { padding-left: 10px; }
.pleft15 { padding-left: 15px; }
.pleft20 { padding-left: 20px; }



.pright5 { padding-right: 5px; }
.pright10 { padding-lerightft: 10px; }
.pright15 { padding-right: 15px; }
.pright20 { padding-right: 20px; }






/*----------------------------------------
	font
----------------------------------------*/
.f10 { font-size: 10px; line-height: 140%;}
.f11 { font-size: 11px; line-height: 140%;}
.f12 { font-size: clamp(11px, 1.5vw, 12px); line-height: 160%;}
.f13 { font-size: clamp(12px, 1.7vw, 13px); line-height: 160%;}
.f14 { font-size: clamp(12px, 1.8vw, 14px); line-height: 160%;}
.f15 { font-size: clamp(13px, 2.0vw, 15px); line-height: 160%;}
.f16 { font-size: clamp(14px, 2.1vw, 16px); line-height: 160%;}
.f18 { font-size: clamp(15px, 2.3vw, 18px); line-height: 160%;}
.f20 { font-size: clamp(17px, 2.6vw, 20px); line-height: 160%;}


.f24 { font-size: clamp(20px, 3.125vw, 24px); line-height: 150%;}
.f25 { font-size: clamp(21px, 3.2vw, 25px); line-height: 150%;}

.f30 { font-size: clamp(24px, 3.9vw, 30px); line-height: 140%;}

.f40 { font-size: clamp(30px, 5.2vw, 40px); line-height: 135%;}

.f50 { font-size: clamp(36px, 6.5vw, 50px); line-height: 130%;}



.bold { font-weight: bold;}


/*----------------------------------------
	インデント
----------------------------------------*/
.indent {
  padding-left :1em;
  text-indent: -1em;
}

.list-indent li {
  padding-left: 1em;
  text-indent: -1em;
}


.a10 {
  padding-left :1em;
  text-indent: -1em;
  margin-top: 10px;
  font-size: 12px;
  color: #545454;
  line-height: 160%;
}
/*----------------------------------------
	リスト
----------------------------------------*/
.list2 ,
.list3 ,
.list4 {
  display: flex;
  flex-wrap: wrap;
}

.list2 > li img ,
.list3 > li img ,
.list4 > li img {
  width: 100%;
}

.list2 > li a:hover img ,
.list3 > li a:hover img ,
.list4 > li a:hover img {
  opacity: .7;
}


.list2 > li {
  width: 47.5%;
}

.list2 > li:nth-child(odd) {
  margin-right: 5%;
}

.list2 > li:nth-child(n+3) {
  margin-top: 5%;
}

.list3 > li {
  width: 30%;
  margin-right: 5%;
}

.list3 > li:nth-child(3n) {
  margin-right: 0;
}

.list3 > li:nth-child(n+4) {
  margin-top: 5%;
}

.list4 > li {
  width: 22%;
  margin-right: 4%;
}

.list4 > li:nth-child(4n) {
  margin-right: 0;
}

.list4 > li:nth-child(n+5) {
  margin-top: 4%;
}

@media screen and (max-width: 768px) {
  .sp2 > li ,
  .sp2-1 > li {
    width: 47.5%;
    margin-right: 0;
  }

  .sp2 > li:not(:nth-child(even)) ,
  .sp2-1 > li:not(:nth-child(even)) {
    margin-right: 5%;
  }

  .sp2 > li:nth-child(n+3) ,
  .sp2-1 > li:nth-child(n+3)  {
    margin-top: 5%;
  }

  .sp3-2 > li {
    width: 30%;
    margin-right: 0;
  }

  .sp3-2 > li:not(:nth-child(3n)) {
    margin-right: 5%;
  }

  .sp3-2 > li:nth-child(n+4) {
    margin-top: 5%;
  }
}

@media screen and (max-width: 480px) {
  .sp2-1 > li {
    width: 100%;
  }

  .sp2-1 > li:nth-child(odd) {
    margin-right: 0;
  }

  .sp2-1 > li:nth-child(n+2) {
    margin-top: 5%;
  }

  .sp3-2 > li {
    width: 47.5%;
    margin-right: 5%;
  }

  .sp3-2 > li:nth-child(even) {
    margin-right: 0;
  }

  .sp3-2 > li:nth-child(n+3) {
    margin-top: 5%;
  }
}

/*----------------------------------------
	value
----------------------------------------*/
p {
  line-height: 160%;
}

a {
  transition : all 0.3s ease 0s;
}



.center {
  text-align: center;
}





.annotation {
  font-size: 12px;
  color: #545454;
  line-height: 160%;
}





.show-sp {
  display: none;
}





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

  .show-sp {
    display: block;
  }

  .none-sp {
    display: none;
  }
}

/*----------------------------------------
	color
----------------------------------------*/
.orange {
  color: #ea5206;
}

/*----------------------------------------
	変数
----------------------------------------*/
:root {
  --main-color: #4c2e0f;
  --linear-vertical: linear-gradient(0deg, rgba(247,168,115,1) 0%, rgba(216,113,133,1) 50%, rgba(108,87,165,1) 100%);
  --max-100: max(-9.2vw, -100px);
}




/*----------------------------------------
	レイアウト
----------------------------------------*/
body {
  font-family: YuMincho, "Hiragino Mincho ProN", serif;
  font-size: clamp(13px, .833vw, 16px);
  color: #4c2e0f;
  line-height: 160%;
}


.container {
  width: 100%;
  overflow: hidden;
}




.inner {
  width: min(90%,1180px);
  margin: auto;
}

section {
  padding: clamp(60px, 9.3vw, 100px) 0;
}


.container section:last-child {
  padding: 0;
}




/*----------------------------------------
	フェードイン
----------------------------------------*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
    }
  .fadein-left{
      transform: translate(-30px,0);
  }
  .fadein-right{
      transform: translate(30px,0);
  }
  .scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }











/*----------------------------------------
	メインヴィジュアル
----------------------------------------*/
header {
  position: relative;
  margin-bottom: min(13vw, 100px);
}

.slide {
  width: 100%;
  height: 100%;
  z-index: -2;
}

.slide img {
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}


.movie {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  bottom: clamp(30px,  9.1vw,70px);
}

.movie a {
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  transition: all .3s ease-in-out;
  text-align: center;
  margin: auto;
  transform-origin: center;/* transform-origin を中心に設定 */
}

.movie a:hover {
  transform: scale(1.2);
  background: rgba(255,255,255,0.15);
}

.movie a:hover img {
  transform: scale(0.833); /* 1 / 1.2 = 0.833, 元のサイズの83.3%に縮小 */
}

.movie a img {
  padding-left: 4px;
  transition: transform .3s ease-in-out;
}

.movie p {
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
}


.movie-line {
  position: absolute;
  height: min(20.8vw, 160px);
  width: 2px;
  background: rgb(247,168,115);
  background:  var(--linear-vertical);
  margin: 0 auto;
  left: 50%;
  display: block;
  bottom: max(-120px, -15vw);
}



.line-inner {
  width: min(90%,1180px);
  margin-top: -35px;
  position: relative;
  margin: 0 auto;
}


.line-left {
  height: min(32.6vw, 250px);/*/1080*/
  width: 2px;
  background: rgb(247,168,115);
  background:  var(--linear-vertical);
  display: block;
  position: absolute;
  left: 0;
  top: -35px;
}


.line-right {
  height: min(32.6vw, 250px);/*/1080*/
  width: 2px;
  background: rgb(247,168,115);
  background:  var(--linear-vertical);
  display: block;
  position: absolute;
  right: 0;
  top: -35px;
}





.top-nav {
  position: absolute;
  top: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30px;
}

.top-nav a:hover {
  opacity: .7;
}

.top-logo {
  width: clamp(90px, 13vw, 140px);
}

.top-logo img {
  width: 100%;
}


.top-menu {
  margin-right: 60px;
}

.top-reservation {
  border: 1px solid #fff;
  padding: 10px 15px;
  line-height: 100%;
  display: inline-block;
}





.hamburger-menu {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  z-index: 1000;
}

.hamburger-menu .bar {
  height: 1px;
  width: 100%;
  background-color: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(77,46,15,0.8);
  visibility: hidden; /* visibilityで制御 */
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: center; /* 水平方向の中心 */
  align-items: center; /* 垂直方向の中心 */
  z-index: 999;
}




.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none; /* オーバーレイがマウスイベントを受け取らないように設定 */
  z-index: -1;
}

@media screen and (max-width: 768px) {
.top-menu {
  display: none;
}


.top-nav {
  top: 10px;
  padding: 0 20px;
}


.hamburger-menu {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  z-index: 1000;
}





}


/*----------------------------------------
	section1
----------------------------------------*/
.catchphrase {
  text-align: center;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 220%;
}

.reservation-box {
  background: #f1f1f1;
  width: min(90%,1080px);
  margin: clamp(36px, 10.4vw, 80px) auto 0;
  padding: min(5.6vw, 60px);
}

.reservation-box p {
  text-align: center;
  font-size: clamp(20px, 4vw, 35px);
  line-height: 100%;
  margin-bottom: clamp(20px, 5.2vw, 40px);  
}


.reservation-box div a {
  color: #fff;
  background: var(--main-color);
  font-size: clamp(14px, 1.7vw, 18px);
  padding: clamp(15px, 2.8vw, 30px);
  padding-right: min(3.7vw, 40px);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  margin-bottom: 3.125%;
} 

.reservation-box div a::after {
  content: "";
  display: inline-block;
  width: clamp(12px, 1.6vw, 17px);
  height: clamp(12px, 1.6vw, 17px);
  background: url("../images/common/ico_link_2.png") no-repeat;
  background-size: auto;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  right: clamp(10px, 1.85vw, 20px);
}



.reservation-box ul {
  display: flex;
  justify-content: space-between;
}

.reservation-box li {
  width: 31.25%;
}

.reservation-box li a {
  color: #fff;
  background: var(--main-color);
  font-size: clamp(14px, 1.7vw, 18px);
  padding: clamp(15px, 2.8vw, 30px);
  padding-right: min(3.7vw, 40px);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
} 

.reservation-box li a::after {
  content: "";
  display: inline-block;
  width: clamp(12px, 1.6vw, 17px);
  height: clamp(12px, 1.6vw, 17px);
  background: url("../images/common/ico_link_2.png") no-repeat;
  background-size: auto;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  right: clamp(10px, 1.85vw, 20px);
}

.reservation-box a:hover {
  opacity: .7;
}

@media screen and (max-width: 768px) {
  .catchphrase {
    line-height: 200%;
  }
  
  .catchphrase br {
    display: none;
  }
  
  
  .reservation-box div a {
    margin-bottom: 0;
    justify-content: flex-start;
  } 

  .reservation-box ul {
    display: flex;
    flex-direction: column;
  }

  .reservation-box li {
    width: 100%;
    margin-top: 15px;  
  }
  
  
}


.img-wrap {
  height: clamp(400px, 60.2vw, 650px);
  position: relative;
  margin-right: 10%;
  overflow: hidden;
  opacity: 1; /* 初期状態で完全に不透明 */
}

.img-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-animation {
  animation: reveal-slide 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes reveal-slide {
  from {
    clip-path: inset(0 100% 0 0); /* 開始時、画像は完全に隠れている */
  }
  to {
    clip-path: inset(0 0 0 0); /* 終了時、画像は完全に表示される */
  }
}

.img-wrap .text {
  position: absolute;
  bottom: min(13.9vw, 150px);
  color: #fff;
  width: 100%;
  padding: 0 10%;
}

.img-wrap .text h2 {
  font-size: clamp(28px, 3.7vw, 40px);
  line-height: 135%;
}

.img-wrap .text p {
  line-height: 200%;
}


@media screen and (max-width: 768px) {
  .img-wrap  {
    height: 300px;
    margin-right: 0;
  }

 .img-wrap .text  {
    top: 40px;
  }
}

@media screen and (max-width: 480px) {
  .img-wrap .text h2 {
    font-size: clamp(22px, 5.8vw, 28px);/*/1080*/
    line-height: 140%;
  }
  .img-wrap .text p br {
    display: none;
  }
}



/*----------------------------------------
	section2
----------------------------------------*/
.bg-texture {
  background: url("../images/common/bg_shikkui.jpg") no-repeat;
  background-size: cover;
}

.section-2 {
  margin-top: var(--max-100);
  padding-bottom: min(18.75vw, 360px);
}

.section-2 img {
  width: 100%;
}

.section-inner {
  width: min(100%, 1920px);
  margin: min(10.4vw, 200px) auto;
}


.box-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

.box-1 .text-box {
  width: min(37vw, 400px);
  margin: min(2vw, 40px) min(7.3vw, 140px) 0 0;
}

.box-img img {
  width: min(48vw, 920px);
}


.title {
  font-size: clamp(28px, 4.2vw, 45px);
  line-height: 140%;
}

.title span {
  display: block;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 120%;
}

.more {
  display: block;
  margin-top: min(3vw, 60px);
}

.more p {
  display: inline-block;
  background: linear-gradient(90deg, #f6bf75 0%, #d77185 25%, #4150b1 50%, #b14c96 75%, #ef4eda 100%);
  -webkit-background-clip: text; /* テキストに背景をクリップ */
  -webkit-text-fill-color: transparent; /* クリップした背景以外の色を透明にする */
  background-clip: text;
  color: transparent;
  position: relative;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 120%;
	font-weight: bold;
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out;
}

a.more:hover p {
  background-position: 99% 50%;
}



/*
.more div {
  border-style: solid;
  border-width: 1px;
  border-image: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%) 1;
  margin-top: 5px;
}
*/


.more div {
  background: linear-gradient(90deg, #f6bf75 0%, #d77185 25%, #4150b1 50%, #b14c96 75%, #ef4eda 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out;
  height: 2px;
  margin-top: 5px;
}

a.more:hover div {
  background-position: 99% 50%;
}



.box-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}


.box-img-2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;
  margin-top: -140px;
}


.box-2 img {
  width: min(39.6vw, 760px);

}




.bbq-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  margin-top: -750px;
}

.bbq-box img {
  width: min(39.6vw, 760px);
}

@media screen and (max-width: 1920px) {
  .bbq-box {
    margin-top: -38vw;
  }
}

@media screen and (max-width: 1480px) {
  .bbq-box {
    margin-top: -33vw;
  }
}

@media screen and (max-width: 1280px) {
  .bbq-box {
    margin-top: -27vw;
  }
}

@media screen and (max-width: 980px) {
  .bbq-box {
    margin-top: -22vw;
  }
}

@media screen and (max-width: 768px) {
  .bbq-box {
    display: flex;
    justify-content: center;
    width: 90%;
    flex-direction: column;
    margin: 2% auto;
    
  }

  .bbq-box img {
    width: 100%;
  }

}






.images-link-list {
  margin-top: min(7.3vw, 140px);
}

.images-link-list li:not(:first-child) {
  margin-top: min(2.6vw, 50px);
}


.images-link {
  font-size: clamp(18px, 1.2vw, 23px);
  line-height: 140%;
  border: 2px solid var(--main-color);
  padding: clamp(15px, 1.5vw, 30px) 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(280px, 34.4vw, 660px);
}


.images-link::after {
  content:"";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("../images/common/ico_link.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 10px;
}

.images-link:hover {
  opacity: .7;
  background: rgba(255,255,255,0.7);
}











.box-img-3 {
  margin-right: min(8.3vw, 160px);
  margin-top: min(7.3vw, 140px);
}





@media screen and (max-width: 1920px) {
  .box-img-2 {
    margin-top: -1.5vw;
  }
}

@media screen and (max-width: 1280px) {
  .box-img-2 {
    margin-top: 7vw;
  }
  
  .box-img-3 {
    margin-top: min(11vw, 140px);
  }  
}

@media screen and (max-width: 1080px) {
  .images-link {
    font-size: clamp(14px, 1.7vw, 18px);
  }

  .images-link::after {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }
}


@media screen and (max-width: 768px) {
.section-inner {
  margin: min(9.1vw, 70px) auto;
}

.box-1 {
  display: block;
  width: 100%;
}

.box-1 .text-box {
  width: 90%;
  margin: 0 auto;
  padding-left: 5%;
}

.box-img {
  width: 100%;
  margin-top: clamp(30px, 6.5vw, 50px);
  text-align: center;
}

.box-img img {
  width: 90%;
}

.more {
  display: inline-block;
}

.more div {
  width: clamp(120px, 26vw, 200px);
}

.box-2 {
  display: flex;
  flex-wrap: wrap;
  width: 90%; 
  position: relative;
  margin-left: 5%;
  margin-top: 2%;
  padding-bottom: 160px;
}


.box-img-2 {
  flex-direction: row;
  margin-top: 0;
  width: 49%;
}


.box-2 img {
  width: 100%;
}



.images-link-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;  
}

.images-link-list li:not(:first-child) {
  margin-top: min(2.6vw, 50px);
}






.images-link {
    font-size: clamp(13px, 1.7vw, 23px);
    margin-top: min(5.5vw, 60px);
  width: min(90%, 400px);margin: auto;

}

  .images-link::after {
    width: 12px;
    height: 12px;
    margin-left: 10px;
  }

.box-img-3 {
  margin: 0;
  width: 49%
}





}


/*----------------------------------------
	section3
----------------------------------------*/
.img-wrap2 {
  height: min(23.4vw, 450px);/*/1920*/
  position: relative;
  margin-left: 10%;
  overflow: hidden;
  opacity: 1;
  margin-top: max(-18.75vw, -360px);
}

.img-wrap2 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-wrap3 {
  height: min(23.4vw, 450px);/*/1920*/
  position: relative;
  margin-right: 10%;
  overflow: hidden;
  opacity: 1;
  margin-top: min(-4.6875vw, -90px);
}

.img-wrap3 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-animation-right-to-left {
  animation: reveal-slide-right-to-left 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes reveal-slide-right-to-left {
  from {
    clip-path: inset(0 0 0 100%); /* 開始時、画像は左から完全に隠れている */
  }
  to {
    clip-path: inset(0 0 0 0); /* 終了時、画像は完全に表示される */
  }
}


@media screen and (max-width: 768px) {
  .img-wrap2 {
    margin-top: max(-12vw, -360px);
  }
}

.section-3 {
  background: var(--main-color);
  margin-top: min(-4.6875vw, -90px);/*450-360*/
}


.section-3 .box-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.section-3 .box-1 .text-box {
  width: min(37vw, 400px);
  margin: min(2vw, 40px) 0 0 min(7.3vw, 140px);
  color: #fff;
}

.section-3 .box-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  flex-direction: row-reverse;
  padding-bottom: 0;
}

.section-3 .box-img-4 {
  display: block;
  margin-top: -140px;
}

.menu-box {
  background: #fff;
  padding: clamp(30px, 3.6vw, 70px);
  margin-top: min(7.3vw, 140px);
  margin-left:  min(5.2vw, 100px);
  width: clamp(280px, 42.7vw, 820px);
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-height: min( 9vw, 170px);

}

.menu-box-title {
  font-size: clamp(14px, 1.25vw, 24px);
  margin-right: 20px;
  line-height: 140%;
}


.menu-box-text {
  position: relative;
  line-height: 140%;
  padding-right: 15px
}

.menu-box-text::after {
  content:"";
  border-bottom: 1px solid var(--main-color);
  display: block;
  width: 100%;
  position: absolute;
  bottom: -10px;
}

.menu-box-text a {
  font-size: clamp(14px, 1vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(22.4vw, 430px);
}

.menu-box-text a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  background: url(../images/common/icon_arrow.png);
  background-size: contain;
  vertical-align: middle;
  right: 0;
  position: absolute;
}

.menu-box-text a:hover {
  opacity: .7;
}



@media screen and (max-width: 1920px) {
  .section-3 .box-img-4 {
    margin-top: -1.5vw;
  }

}

@media screen and (max-width: 1280px) {
  .section-3 .box-img-4 {
    margin-top: 7vw;
  }
  .menu-box {
    margin-top: min(11vw, 140px);
  }
}

@media screen and (max-width: 768px) {
  .section-3 {
    padding-top: max(9.375vw, 72px);
  }

  .section-3 .box-1 {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }

  .section-3 .box-1 .text-box {
    width: 90%;
    margin: 0 auto;
    padding-right: 5%;
    padding-left: 0;
  }

  .section-3 .box-2 {
    width: 90%;
    margin-bottom: min(12vw, 360px);
  }

  .section-3 .box-img-4 {
    margin-top: 0;
  }

  .menu-box {
    margin-top: min(6.5vw, 50px);
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    
    max-height: 100%;  
  }

  .menu-box-title {
    font-size: clamp(17px, 2.8vw, 22px);
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  .menu-box-text {
    width: 100%;
  }

  .menu-box-text a {
    font-size: clamp(15px, 2.3vw, 18px);
    width: 100%;
  }


}


@media screen and (max-width: 480px) {
  .section-3 {
    margin-top: min(-10.4vw, -50px);
    padding-top: max(10.4vw, 50px);
  }

  .img-wrap3 {
    margin-top: min(-8.3vw, -40px);
  }
}


/*----------------------------------------
	section4
----------------------------------------*/
.section-4 {
  margin-top: max(-18.75vw, -360px);
  padding-top: min(19vw, 365px);
}

.section-4 .section-inner {
  margin-bottom: min(4.2vw, 80px);
}

.menu-box-2 {
  padding: clamp(15px, 2vw, 40px) clamp(25px, 3.125vw, 60px);
  margin-top: min(7.3vw, 140px);
  margin-right: min(5.2vw, 100px);
  width: clamp(280px, 42.7vw, 820px);
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--main-color);
}

.menu-box-2 div {
  width: 48%;
  display: flex;
  align-items: center;
}

.menu-box-2 div p {
  border: 1px solid var(--main-color);
  border-radius: 100px;
  width: clamp(40px, 3.6vw, 70px);
  height: clamp(40px, 3.6vw, 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: min(1.6vw, 30px);
}

.menu-box-2 div:first-child p {
  font-size: clamp(16px, 1.5625vw, 30px);
}

.menu-box-2 div:last-child p {
  font-size: clamp(12px, 1.14vw, 22px);
}

.menu-box-2 li:not(:first-child) {
  margin-top: 5px;
}

.menu-box-2 li {
  font-size: clamp(12px, .9vw, 17px);
}


@media screen and (max-width: 1280px) {
  .menu-box-2 {
    margin-top: min(11vw, 140px);
  }

  .menu-box-2 div {
    flex-direction: column;
  }

  .menu-box-2 div p {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
.section-4 {
  margin-top: max(-18.75vw, -360px);
  padding-top: min(16.27vw, 125px);
}


  .section-4 .box-2 {
    padding-bottom: 0;
  }

  .section-4 .box-img-2 {
    width: 100%;
  }

  .menu-box-2 {
    padding: clamp(15px, 3.9vw, 30px) clamp(25px, 5.2vw, 40px);
    margin-top: min(6.5vw, 50px);
    margin-left: 0;
    width: 100%;
    margin-right: 0;
  }

  .menu-box-2 div {
    width: 48%;
    flex-direction: row;
  }

  .menu-box-2 div p {
    width: clamp(40px, 7.8125vw, 60px);
    height: clamp(40px, 7.8125vw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: min(3.3vw, 25px);
  }

  .menu-box-2 div:first-child p {
    font-size: clamp(16px, 3.125vw, 24px);
  }

  .menu-box-2 div:last-child p {
    font-size: clamp(12px, 2.34vw, 18px);
  }

  .menu-box-2 li {
    font-size: clamp(12px, 2.1vw, 16px);
  }
}


@media screen and (max-width: 480px) {
  .menu-box-2 {
    padding: clamp(20px, 6.25vw, 30px);
    flex-direction: column;
  }

  .menu-box-2 div {
    width: 100%;
    flex-direction: row;
  }

  .menu-box-2 div:first-child {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(77,46,15,.5);
  }


  .menu-box-2 li {
    font-size: clamp(12px, 3.3vw, 16px);
  }
}


/*----------------------------------------
	section5
----------------------------------------*/
.section-5 {
  background: rgb(65,80,177);
  background: linear-gradient(90deg, #f1f1f1 45%, #fff 45%);
}

.section-5 .section-inner {
  margin: min(5.2vw, 100px) auto;
}

.section-box {
  display: flex;
  justify-content: space-between;
}

.vertical-text-box {
  width: clamp(180px, 17.3vw, 360px);/*/2080*/
  text-align: center;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(18px, 1.5625vw, 30px);
  display: inline-block;
}

.horizontal-text {
  margin-top: clamp(30px, 3.125vw, 60px);
}


.vertical-text-box .more {
  width: clamp(120px, 10.4vw,200px);
  margin-left: auto;
  margin-right: auto;
}

.img-list-box {
  width: calc(100% - min(20.2vw, 420px));
}

.dog-text {
  font-size: clamp(14px, 0.9375vw, 18px);
  margin-bottom: min(4.17vw, 80px);
}

.dog-img-list {
  display: flex;
  flex-wrap: wrap;
}

.dog-img-list li {
  width: 22%;
  margin-right: 4%;
}

.dog-img-list li:last-child {
  margin-right: 0;
}

.dog-img-list li img {
  width: 100%;
}

@media screen and (max-width: 2480px) {
  .section-5 {
    background: rgb(65,80,177);
    background: linear-gradient(90deg, #f1f1f1 30%, #fff 30%);
  }
}

@media screen and (max-width: 2080px) {
  .section-box {
    width: 90%;
    margin: 0 5%;
  }
}

@media screen and (max-width: 1080px) {
  .section-5 {
    background: rgb(65,80,177);
    background: linear-gradient(90deg, #f1f1f1 40%, #fff 40%);
  }

  .img-list-box {
    width: calc(100% - 200px);
  }
}
@media screen and (max-width: 768px) {
  .section-5 .section-inner {
    margin: 0 auto;
  }

  .section-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .vertical-text-box {
    width: 100%;
    text-align: left;
  }

  .vertical-text {
    writing-mode: horizontal-tb;
    font-size: clamp(18px, 3.125vw, 24px);
    display: inline-block;
    margin-bottom: min(3.25vw, 25px);
  }

  .img-list-box {
    width: 100%;
  }
}


@media screen and (max-width: 480px) {
  .dog-img-list li {
    width: 48%;
    margin-right: 4%;
  }
  .dog-img-list li:nth-child(2n) {
    margin-right: 0;
  }

  .dog-img-list li:nth-child(n+3) {
    margin-top: 4%;
  }
}

/*----------------------------------------
	section6
----------------------------------------*/
.section-6 {
  padding: 0;
  color: #fff;
}

.section-6-bg {
  background: linear-gradient(to right, var(--main-color) 45%, transparent 45%), url("../images/common/bg_5.jpg") no-repeat;
  background-size: cover;
  background-position: 45% center;
  padding: clamp(60px, 9.3vw, 100px) 0;
}

.section-6 .section-inner {
  margin: min(5.2vw, 100px) auto;
}

.section-box {
  display: flex;
  justify-content: space-between;
}

.horizontal-text {
  margin-top: clamp(30px, 3.125vw, 60px);
}

.link-btn {
  display: block;
  margin-top: min(3vw, 60px);
}

.link-btn p {
  display: inline-block;
  font-size: clamp(14px, .9375vw, 18px);
  line-height: 120%;
	font-weight: bold;
  width: clamp(120px, 10.4vw,200px);
  border: 1px solid #fff;
  padding: 15px 0 14px;
  transition : all 0.3s ease 0s;
}

.link-btn p:hover {
  background: #fff;
  color: var(--main-color);
}


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

  .section-6-bg {
    background: linear-gradient(to right, var(--main-color) 30%, transparent 30%), url("../images/common/bg_5.jpg") no-repeat;
    background-position: 30% center;
    background-size: cover;
  }
}

@media screen and (max-width: 1080px) {
  .section-6-bg {
    background: linear-gradient(to right, var(--main-color) 40%, transparent 40%), url("../images/common/bg_5.jpg") no-repeat;
    background-position: 40% center;
    background-size: cover;
  }
}


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

  .section-6 .section-inner {
    margin: 0 auto;
  }

  .section-6-bg {
    background: var(--main-color);
  }

  .horizontal-text {
    margin-top: 0;
  }

  .link-btn p {
    width: clamp(120px, 26vw, 200px);
    text-align: center;
    padding: 11px 0 10px;
  }

}






















/*----------------------------------------
	NEWS
----------------------------------------*/
.news {
	display: flex;
}

.news .section-inner {
  margin: min(5.2vw, 100px) auto;
}

.news-title-box {
  width: clamp(180px, 17.3vw, 360px);/*/2080*/
	display: flex;
	flex-direction: column;
	text-align: center;

}

.news-title-box .title {
  margin-top: 30%;
}

.news-title-box a {
	margin: auto auto 0;
  display: inline-block;
  background: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  position: relative;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 120%;
	font-weight: bold;
  border: 2px solid transparent; /* 透明なボーダーを設定 */
	-webkit-border-image: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%) 1;
	border-image: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%) 1;
	border-image-slice: 1;
  width: clamp(120px, 10.4vw,200px);
  padding: 15px 0 14px;
}

.news-title-box a:hover {
  opacity: .7;
}




.news-list {
  display: flex;
}

.news-list li {
	display: flex;
	flex-direction: column;
  width: 22%;
  margin-right: 4%;
}
.news-list li:last-child {
  margin-right: 0;
}

.news-list img {
	width: 100%;
}

.news-list h3 {
  font-size: clamp(15px, .9375vw, 18px);
  font-weight: bold;
  margin: 25px 0 10px;
 }

.news-text {
  margin-bottom: 20px;
}

.news-list .more {
	margin-top: auto;
}

@media screen and (max-width: 768px) {
  .news .section-inner {
    margin: 0 auto;
  }

  .news-title-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    margin-bottom: clamp(28px, 7.8vw, 60px);
  }

  .news-title-box a {
    width: clamp(120px, 26vw, 200px);
    text-align: center;
    padding: 11px 0 10px;
  }

  .news-title-box .title {
    margin-top: 0;
  }

  .news-title-box a {
    margin: 0;
    display: inline-block;
    position: relative;
    font-size: clamp(12px, 2.2vw, 15px);
    border: 1px solid transparent; /* 透明なボーダーを設定 */
    -webkit-border-image: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%) 1;
    border-image: linear-gradient(90deg, #f6bf75 0%, #d77185 50%, #4150b1 100%) 1;
    border-image-slice: 1;
    width: 80px;
    padding: 8px 0 7px;
  }

  .news-list h3 {
    margin: 20px 0 10px;
   }

  .news-text {
    margin-bottom: 15px;
  }

  .news-list .more div {
    width: min(20vw, 150px);
  }
}

@media screen and (max-width: 480px) {
  .news-list {
    display: flex;
    flex-wrap: wrap;
  }

  .news-list li {
    width: 48%;
    margin-right: 4%;
  }
  .news-list li:nth-child(2n) {
    margin-right: 0;
  }

  .news-list li:nth-child(n+3) {
    margin-top: 7%;
  }

  .news-list .more div {
    width: clamp(80px, 25vw, 120px);
    margin: auto;
  }
}








.parallax-img {
	background: url('../images/common/bg_4.jpg') center / cover no-repeat fixed;
  height: min(42vw, 450px);
}

.parallax-img-2 {
	background: url('../images/common/bg_5.jpg') center / cover no-repeat fixed;
  height: min(42vw, 450px);
}


.parallax-img-3 {
	background: url('../images/common/bg_6.jpg') center / cover no-repeat fixed;
  height: min(42vw, 450px);
}


@media screen and (max-width: 768px) {
	.parallax-img {
		background: url('../images/common/bg_4.jpg') center / 100% no-repeat scroll;
	}

	.parallax-img-2 {
		background: url('../images/common/bg_5.jpg') bottom center / 100% no-repeat scroll;
	}

	.parallax-img-3 {
		background: url('../images/common/bg_6.jpg') top center / 100% no-repeat scroll;
	}
}





/*----------------------------------------
	ACCESS
----------------------------------------*/
.access {
	margin-top: min(16vw, 180px);
}

.map iframe {
  width: 100%;
  height: min(78vw, 600px);
  border: none;
  outline: none;
}


/*----------------------------------------
	footer
----------------------------------------*/
footer {
  color: #fff;
  line-height: 140%;
}

footer a:hover {
  opacity: .7;
}


.footer-top {
  background: url("../images/common/img_bottom.jpg") no-repeat bottom center;
  background-size: cover;
  margin: 0 auto; /* 上下のスペースを確保するためのマージン */
  padding: clamp(70px, 18.5vw, 200px)  0; /* 内部コンテンツに対して上下のパディングを追加 */
}

.footer-top-inner {
  width: min(90%,1080px);
  border: 2px solid #fff;
  margin: auto;
  display: flex;
  padding: clamp(20px, 6.5vw,70px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-top-left {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 48%;
}

.footer-logo {
  width: min(19vw, 200px);
}

.reservation-btn {
  background: #fff;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: bold;
  color: var(--main-color);
  padding: min(2.3vw, 25px) 10px min(2.1vw, 23px)  ;
  width: min(90%, 400px);
  margin: 20px auto 0;
}

.footer-top-right {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 48%;
  font-size: clamp(12px, 1.5vw,16px);
}

.footer-top-right li:first-child {
  font-size: clamp(20px, 2.6vw, 28px);
}

.footer-top-right li:nth-child(3) {
  font-size: clamp(30px, 3.7vw, 40px);
}

.footer-bottom {
  background: #4d2e0f;
  padding: clamp(30px, 5.2vw, 40px) 0;
}

.footer-bottom-inner {
  width: min(90%, 1080px);
  margin: auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.footer-bottom-info {
  flex-shrink: 0;
} 

.footer-bottom-info li {
  font-size: clamp(12px, 1.3vw,14px)
}

.footer-bottom-info li:first-child {
  font-size: clamp(15px, 1.85vw, 20px);
}

.footer-bottom-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-bottom-nav li {
  width: 47.5%;
}

.footer-bottom-nav li:nth-child(n+3) {
  margin-top: 10px;
}

.footer-bottom-sns ul {
  display: flex;
}

.footer-bottom-sns li img {
  width: clamp(24px, 3.5vw, 38px);
}

.footer-bottom-sns li:first-child {
  margin-right: 20px;
}

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
}




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

  .footer-top-left {
    width: 100%;
    margin-bottom: min(10.4vw, 50px);    
  }

  .footer-logo {
    width: min(42vw, 200px);
  }

  .reservation-btn {
    font-size: clamp(13px, 3.75vw, 18px);
    padding: min(5.2vw, 25px) 5px min(4.8vw, 23px);
    width: min(100%, 400px);
  }

  .footer-top-right {
    width: 100%;
    font-size: clamp(12px, 3.3vw,16px);
  }

  .footer-top-right li:first-child {
    font-size: clamp(24px, 5.8vw, 28px);
  }

  .footer-top-right li:nth-child(3) {
    font-size: clamp(28px, 8.3vw,40px);
  }

  .footer-bottom-info {
    display: none;
  }
  
  .footer-bottom-nav {
    width: 70%;
  }  

  .footer-bottom-nav ul {
    margin: 0;
  }

}

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



.footer-bottom-inner {
  width: min(90%, 1080px);
  margin: auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  flex-direction: column;
}

.footer-bottom-info li {
  font-size: clamp(12px, 1.3vw,14px)
}

.footer-bottom-info li:first-child {
  font-size: clamp(15px, 1.85vw, 20px);
}

  .footer-bottom-nav {
    width: 100%;
  }  

.footer-bottom-nav li {
  width: 47.5%;
}

.footer-bottom-nav li:nth-child(n+3) {
  margin-top: 10px;
}

  .footer-bottom-sns {
    text-align: center;
    margin-top: 40px;
  }

  .footer-bottom-sns ul {
    display: flex;
    justify-content: center;

  }

  .footer-bottom-sns li img {
    width: 30px;
  }



  .copyright {
    position: static;
    margin-top: 30px;
  }



}




/*----------------------------------------
	news詳細
----------------------------------------*/
.page {
  margin: 0 auto;
  padding: min(2.6vw, 50px) 0 clamp(80px, 9.375vw, 180px) ;
}

.page-header {
  position: relative;
  z-index: 1;
}

.page-header nav {
  position: relative;
  z-index: 2;
}


.header-news {
  background: url("../images/common/bg_1.jpg") no-repeat;
  background-size: cover;
  height: clamp(130px, 29vw, 600px);/*/2080*/
}


.page-inner {
  width: min(90%, 1280px);
  margin: 0 auto;
}



.page .news-list {
  display: flex;
  flex-wrap: wrap;
}

.page .news-list li:nth-child(4n) {
  margin-right: 0;
}

.page .news-list li:nth-child(n+5) {
    margin-top: 7%;
}





.news-detail {
  border-top: 1px solid var(--main-color);
  font-size: clamp(14px, 1.7vw, 18px);
}


.news-detail .news-title {
  font-size: clamp(20px, 3vw, 32px);
  margin:clamp(30px, 6.5vw, 70px) 0;/*/1080*/
}


.news-detail img {
  max-width: 100%;
}






@media screen and (max-width: 768px) {
  .page .news-list {
    display: flex;
    flex-wrap: wrap;
  }

  .page .news-list li {
    width: 48%;
    margin-right: 4%;
  }
  .page .news-list li:nth-child(2n) {
    margin-right: 0;
  }

  .page .news-list li:nth-child(n+3) {
    margin-top: 10%;
  }

  .page .news-list .more div {
    width: clamp(80px, 26vw, 200px);
    margin: auto;
  }
}





/*----------------------------------------
	観光情報
----------------------------------------*/
.header-sightseeing {
  background: url("../images/sightseeing/main.jpg") no-repeat;
  background-size: cover;
  height: clamp(130px, 29vw, 600px);/*/2080*/ 
}

.sightseeing-list {
  border-top: 1px solid var(--main-color);
}

.sightseeing-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(13px, 1.25vw, 16px);
  border-bottom: 1px solid var(--main-color);
  padding: clamp(20px, 3.125vw, 40px) 0;
}

.tourist-spot-box {
  width: calc(100% - min(calc(35vw + 10%), calc(450px + 10%)));
}

.tourist-spot-box div {
  display: flex;
  align-items: center;
}
 
.tourist-spot {
  font-size: clamp(16px, 1.6vw, 21px);
  width: min(29vw, 370px);/*400-30*/
  line-height: 140%;
}

.travel-time {
  width: min(20vw, 250px);
  font-size:clamp(15px, 1.4vw, 18px);
  line-height: 140%;
  margin-left: 30px;  
}



.tourist-spot-link {
  width: min(35vw, 450px);/*/1280*/
  margin-left: 10%;
}

.tourist-spot-link a {
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 140%;
  padding: clamp(15px, 2.3vw, 30px) 30px ;
  position: relative;
  transition: all 0.3s ease 0s;
  border: 1px solid var(--main-color);  
}

.tourist-spot-link a:hover {
  background: #fff;
  color: var(--main-color);
  border: 1px solid var(--main-color);
}


.tourist-spot-link a::after {
  background: url("../images/sightseeing/ico_link_w.png") no-repeat;
}

.tourist-spot-link a:hover::after {
  background: url("../images/sightseeing/ico_link.png") no-repeat;
}

.tourist-spot-link a::after ,
.tourist-spot-link a:hover::after {
  content:"";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  right: clamp(10px, 2vw, 25px);
  margin-bottom: 2px;
}

.tourist-spot-link li:not(:first-child) {
  margin-top: clamp(15px, 2.3vw, 30px);
}

@media screen and (max-width: 768px) {
  .sightseeing-list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tourist-spot-box {
    width: 100%;
  }

  .tourist-spot-box div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .tourist-spot {
    font-size: clamp(16px, 2.7vw, 21px);
    width: 100%;
  }

  .travel-time {
    width: 100%;
    font-size: 13px;
    margin-left: 0;
    margin-top: 10px;    
  }

  .tourist-spot-link {
    width: min(47vw, 360px);
    margin-left: 5%;
    flex-shrink: 0;
  }
}


@media screen and (max-width: 480px) {
  .sightseeing-list > li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  .tourist-spot {
    font-size: clamp(16px, 4.3vw, 21px);
    width: 100%;
  }


  .tourist-spot-link {
    width: 100%;
    margin-top: 30px;
    margin-left: 0;
    flex-shrink: 1;
  }
}














.pagination {
  margin: 10% auto 0%;
  width: 100%;
  text-align: center;
  font-size: clamp(15px, 2.3vw, 18px);
}
ul.page-numbers {
  display: inline-block;
  overflow: hidden;
  width: auto;
}

.page-numbers li {
  float: left;
  border: none;
  margin-right: 5px;
}

.nav-links span {
  color: white;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #4D2E0F;
}

.nav-links a {
  color: #4D2E0F;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.nav-links a.page-numbers {
  text-decoration: underline;
}
.nav-links a.page-numbers:hover {
  text-decoration: none;
}

.nav-links a.prev , .nav-links a.next {
  text-decoration: none;
}


.news-day {
  padding: 5% 0 0;
  width: 100%;
  display: flex;
  align-items: center;


}
.news-day p {
  float: left;
  width: auto;
}

.news-day a {
  margin-left: 2.5%;
  border: 1px solid #4D2E0F;
  padding: 5px;
  display: inline-block;
}

.news-detail-nav {
  max-width: 800px;
  width: 100%;
  margin: 10% auto 5%;
  display: flex;
  justify-content: space-around;
}

.news-detail-nav li {
  width: 33.33%;
  text-align: center;
}



/* ------------------------- */
/* 　　予約フォームCSS追加　　 */
/* ------------------------- */

.reservation_sub {
  display: block;
  text-align: center;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 120%;
  margin-bottom: clamp(20px, 5.2vw, 40px);
}
#search_489ban {
  text-align: center;
}

.date_489ban,
.inbox_489ban {
  display: inline-block;
  vertical-align: top;
  margin: 0 30px 0 0;
  text-align: left;
}
.date_489ban select#date_ym,
.date_489ban select#date_d {
  border-bottom: 1px solid #99928b;
  font-size: 22px;
  padding: 10px 40px 10px 5px;
  margin-bottom: 15px;
  cursor: pointer;
}
.date_489ban dd label {
  display: block;
  width: 100px;
  position: relative;
  padding: 5px 5px 3px 14px;
  cursor: pointer;
  font-size: 14px;
}
.stay_489ban {
  display: inline-block;
}
.stay_489ban dd select {
  font-size: 22px;
  border-bottom: 1px solid #99928b;
  padding: 10px 40px 10px 5px;
  margin-right: 6px;
  cursor: pointer;
}
.room_489ban {
  display: inline-block;
  vertical-align: bottom;
}
.room_489ban dd {
  border-bottom: 1px solid #99928b;
}
.room_489ban dd select {
  font-size: 22px;
  padding: 10px 40px 10px 5px;
  cursor: pointer;
}
.person_489ban {
  display: inline-block;
  margin-right: 6px;
}
.person_489ban dd {
  border-bottom: 1px solid #99928b;
}
.person_489ban dd select {
  font-size: 22px;
  padding: 10px 40px 10px 5px;
  cursor: pointer;
}
#search_489ban button {
  border: 1px solid #4c2e0f;
  padding: 10px 60px;
  color: #4c2e0f;
  font-size: clamp(13px, 1.7vw, 16px);
  display: inline-block;
  vertical-align: top;
  margin-top: 23px;
  background: #ffffff;
  font-weight: bold;
  transition: all 0.3s ease 0s;
}
#search_489ban button:hover {
  background-color: #4c2e0f;
  color: #fff;
}
.date_489ban [type="checkbox"] {
  opacity: 0;
}
.date_489ban dd label::before {
  content: "";
  display: block;
  position: absolute;
  width: 19px;
  height: 19px;
  border: 1px solid #77614b;
  top: 7px;
  left: 0px;
  border-radius: 3px;
}
.date_489ban dd label:has(input[type="checkbox"]:checked)::after{
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 7px;
  border-left: 2px solid #4c2e0f;
  border-bottom: 2px solid #4c2e0f;
  transform: rotate(-45deg);
  top: 11px;
  left: 4px;
}

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

  .date_489ban {
    display: block;
    margin: 0 0 30px 0;
  }
  .date_489ban select#date_ym {
    width: 60%;
  }
  .date_489ban select#date_d {
    width: 39%;
  }
  #search_489ban button {
    display: block;
    width: 100%;
    margin-top: 30px;
  }
  .inbox_489ban {
    width: 49%;
    margin: 0;
  }
  .stay_489ban {
    width: 49%;
  }
  .stay_489ban dd select {
    width: 100%;
  }
  .room_489ban {
    width: 49%;
  }
  .room_489ban dd select {
    padding: 10px;
    width: 78%;
  }
  .person_489ban {
    margin-right: 0;
    width: 49%;
  }
  .person_489ban dd select {
    padding: 10px;
    width: 79%;
  }


}

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

  .inbox_489ban {
    display: block;
    width: 100%;
    margin-bottom: 16px;
  }
  .date_489ban select#date_ym {
    font-size: 20px;
    padding: 8px 5px;
    width: 59%;
  }
  .date_489ban select#date_d {
    font-size: 20px;
    padding: 8px 5px;
  }
  .stay_489ban dd select {
    font-size: 20px;
    padding: 8px 5px;
  }
  .room_489ban dd select {
    font-size: 20px;
    padding: 8px 5px;
  }
  .person_489ban dd select {
    font-size: 20px;
    padding: 8px 5px;
  }
  .date_489ban dd label::before {
    top: 6px;
  }
  .date_489ban dd label:has(input[type="checkbox"]:checked)::after {
    top: 10px;
  }

}