@charset "utf-8";
/* CSS Document */

body{
 text-align: center;
 font-family: "Sawarabi Gothic";
 background-color: #FFFDF6;
	
}
#reservation{
	z-index: 9999;
	position: fixed;
	margin-left: 1300px;
}
h2{
	margin-top: 50px;
}
.top-menu {
    list-style: none; /* リストのマーカーを削除 */
    padding: 0;
    margin: 0;
    display: flex; /* 横並びにする */
    gap: 20px; /* メニュー間の間隔 */
}

.top-menu li {
    display: inline-block; /* インラインブロック要素にする */
	font-size: 25px;
	font-family: "Cabin Sketch", serif;
    font-weight: 400;
    font-style: normal;
}

.top-menu a {
    text-decoration: none; /* 下線を消す */
    color: #333; /* 文字色を指定 */
    padding: 10px 15px; /* 余白をつける */
    display: block; /* リンク全体をクリック可能に */
}

.top-menu a:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
    border-radius: 5px; /* 角を丸くする */
}
.header {
    display: flex;  /* フレックスボックスを適用 */
    justify-content: center;  /* 右寄せ */
    padding-right: 20px; /* 任意の余白調整 */	
	padding-top: 50px;

}
.item-text {
    width: 600px;
    height: 420px;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    /*gap: 50px; /* h2 と p の間の余白 */
}
.item-text {
    width: 600px;
    height: 200px;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    /*gap: 50px; /* h2 と p の間の余白 */
}
.containaer{
	display: flex;
    margin: 200px auto;
    max-width: 1200px;
	/*background-color: #DBEDF0;*/
	
}
.explanation p{
	padding-right: 20px;
	padding-left: 20px;
}
table{
  border-collapse: collapse;
  margin: auto;
  margin-top: 100px;
}
th{
	height: 100px;
}
td{
	height: 50px;
}
.caption{
	font-size: 40px;
}
.caption h2{
	margin-top: 200px;
	margin-bottom: 30px;
}
.caption{
  font-family: "Cabin Sketch", serif;
  font-weight: 400;
  font-style: normal;
}
figcaption{
	text-align: center;
}
.sme-text {
    display: inline-block; /* 幅を内容に合わせる */
    text-align: left; /* <span> の中のテキストを左寄せ */
}
a {
  text-decoration: none;
}

.button018 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	margin-top: 200px;
    max-width: 225px;
    padding: 10px 0px 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.button018 a:before, .button018 a:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.button018 a:before {
  width: 0.5rem;
  height: 0.5rem;
  left: 1.1rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.button018 a:after {
  left: 0;
  background: #6bb6ff;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.button018 a span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.button018 a:hover span {
  color: #fff;
}
.button018 a:hover:before {
  left: 2rem;
}
.button018 a:hover:after {
  right: 0;
  width: 100%;
}
#containaer{
		display: flex;
    margin: 0 auto;
    max-width: 1200px;
}
.item-footer{
    width: 600px;
    height: 550px;
    display: flex;
    flex-direction: column;
	gap: 20px;

}
footer{
	background-color: #DBEDF0;}
li{
	font-size: 15px;
		
}
.footer02 {
 color: #FFFFFF;
 background: #5C493E;
 text-align: left;
 padding: 30px;
}
.footer02 a {
 color: #FFFFFF;
 text-decoration: none;
}
.footer02 a:hover {
 text-decoration: underline;
}
.footer02 .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
}
.footer02 .menu li {
font-size: 15px;
 margin: 0;
 padding: 0 20px;
}
.footer02 .copyright {
 margin: 0;
 padding: 20px 0 0 0;
}

.footer03 {
 color: #FFFFFF;
 background: #000;
 text-align: left;

}
.footer03 a {
 color: #FFFFFF;
 text-decoration: none;
}
.footer03　a:hover {
 text-decoration: underline;
}
.footer03 .menu02 {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
}
.footer03 .menu02 li {
font-size: 15px;
 margin: 0;
 padding: 0 20px;
}
.footer03 .copyright {
 margin: 0;
 padding: 20px 0 0 0;
}
/*.residence{
	margin: 20px;
}*/

#pagu img{
	margin-top: 10px;
	margin-left: 50px;
	margin-bottom: 100px;
	
}
.white-effect {
	cursor: pointer;
    transition: filter 0.3s ease, opacity 0.3s ease; /* なめらかに変化 */
}

.white-effect:hover {
     opacity: 0.7; /* 透明度を70%にする（色が薄く見える） */
    filter: saturate(50%); /* 色の鮮やかさを50%にする */
}



@media screen and (max-width: 768px) {
	.header {
        flex-direction: column;
        align-items: center;
    }

    .top-menu {
        flex-direction: column;
        text-align: center;
    }

    .containaer {
        flex-direction: column;
        align-items: center;
        padding: 20px;
		width: 100%;
    }
	

    .item-text, .item {
        width: 100%;
    }

    #reservation  img{
	z-index: 9999;
	position: fixed;
	margin-left: auto;
        position: static;
        text-align: center;
    }

    .scroll-infinity__list {
        flex-wrap: wrap;
    }

 img {
        max-width: 100%;
        height: auto;
    }
   .scroll-infinity {
    height: 250px; /* 画像の高さを縮小 */
  }

  .scroll-infinity__list {
    animation: scroll 10s linear infinite; /* スピードを調整 */
  }

  .scroll-infinity__item img {
    width: 200px; /* 画像の幅を縮小 */
    height: 200px; /* 高さを調整 */
    object-fit: cover; /* 画像の比率を崩さずに収める */
  }
	.slider img{
    width: 200px;
	height: 200px;
	object-fit: cover;	
	}
	#containaer{
		width: 100%;
	}
	iframe{
		width: 60%;
	}
}