@charset "UTF-8";

/*箱*/
	
html{
	background: #ffffff;	
	color: #ffffff;
	scroll-padding-top: 250px;
	}
	
*{
	color: #ffffff;
	}

/*下部固定予約ボタン*/
.yoyaku_tuiseki{
position:fixed;
	position:-webkit-fixed;
	z-index: 1;
	bottom: 5px;
	left: 155px;
	display: flex;
	justify-content: right;
	text-align: center;
}

.yoyaku_tuiseki a{
	width: 75%;
	height: auto;
}

/*特別プラン用の下部固定予約ボタン*/
.yoyaku_tuiseki_tokubetupuranpeage{
position:fixed;
	position:-webkit-fixed;
	z-index: 1;
	bottom: 0px;
	left: 0px;
	display: flex;
	justify-content: right;
	text-align: center;
}

.yoyaku_tuiseki_tokubetupuranpeage a{
	width: 100%;
	height: auto;
}



/*top固定ボタン*/
.line__top__botton{
	display: inline-block;
	text-align: center;
	width:100%; 
	height:auto;
}
.line__top__botton a{
	display: inline-block;
	text-align: center;
	margin:10px 0;
	padding:0 5px;
}


/*スクロールナビ*/
.scrollnav {
	background-color: #000;
	overflow-x: auto;
}
.scrollnav ul {
	display: flex;
	width: max-content;
	margin: 0 auto;
	list-style: none;
}
.scrollnav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
}
.scrollnav ul li a:hover {
	background-color: #cc0000;
}
	

/*スクロールアニメーション右*/
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.scroll-infinity_left{
	padding:0;
	position:absolute;
	left:0px;
	top:-10px;
	text-align: center;
	width:100%;
	height:auto;
}

.scroll-infinity_left img{
	margin:0;
	padding:0;
	text-align: center;
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(580px / 7);
}
.scroll-infinity__item>img {
  width: 100%;
}
/*スクロールアニメーションここまで*/

/*スクロールアニメーション左*/
@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0);
}
	
}
.scroll-infinity_right{
	padding:0;
	position:absolute;
	left:0px;
	top:500px;
	text-align: center;
	width:100%;
	height:auto;
}

.scroll-infinity_right img{
	margin:0;
	padding:0;
	text-align: center;
}


.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--right {
  animation: infinity-scroll-right 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(580px / 7);
}
.scroll-infinity__item>img {
  width: 100%;
}

/*ルームページのスクロールアニメーション左*/
@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0);
}
	
}

.room__scroll-infinity_right {
    padding: 0;
    position: absolute;
    /* 中央寄せにするための設定（必要であれば） */
    left: 50%;
    transform: translateX(-50%); 
    
    top: 320px;
    text-align: center;
    
    /* 幅を375pxに固定 */
    width: 375px; 
    /* もしスマホで375pxより小さい画面にも対応させるなら max-width: 375px; width: 100%; にします */
    
    height: auto;
    overflow: hidden; /* 中身がはみ出す場合は隠す設定 */
}

.room__scroll-infinity_right img {
    margin: 0;
    padding: 0;
    text-align: center;
    /* 画像が枠からはみ出さないように設定 */
    max-width: 100%;
    height: auto;
}


/* 1. スクロールエリア全体の枠組み */
.room_in__scroll-infinity_right {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}

/* 2. アニメーションをかけるコンテナ（ここがポイント！） */
.room__scroll-infinity__wrap {
    display: flex;
    width: fit-content;
    /* 0%から-50%まで動かすことで、1つ分のリストがループします */
    animation: infinity-scroll-center 20s linear infinite;
}

/* 3. リスト自体の設定 */
.room__scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 4. 画像のサイズ調整 */
.room__scroll-infinity__item {
    width: 150px; 
    flex-shrink: 0;
    padding: 0 5px;
}

.room__scroll-infinity__item img {
    width: 100%;
    height: auto;
    display: block;
}

/* 5. 「中央からスタート」させるアニメーション定義 */
@keyframes infinity-scroll-center {
    0% {
        /* 最初からリストの半分（または任意の位置）を左にずらしておく */
        transform: translateX(-75%); 
    }
    100% {
        /* スタート地点から、さらに「リスト1枚分(50%)」移動させる */
        transform: translateX(-25%);
    }
}

/*スクロールアニメーションここまで*/


/*スクロールメニュー*/
.scrollmenu {
	background-color: #FFF000;
	overflow-x: auto;
}
.scrollmenu ul {
	display: flex;
	width: max-content;
	margin: 0 auto;
	list-style: none;
}

.scrollmenu ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	display: inline-block;
	padding: 5px 5px;
	width:220px;
	height:auto;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
}


.scrollmenu ul li img {
	width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: center;
}
.scrollmenu ul li a:hover {
	background-color: #cc0000;
}

/*スクロールメニューアイコン*/
.scrollicon {
	background-color: #000;
	overflow-x: auto;
}
.scrollicon ul {
	display: flex;
	width: max-content;
	margin: 0 auto;
	list-style: none;
}
.scrollicon ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	display: inline-block;
	padding: 5px 5px;
	width:98px;
	height:118px;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
}
.scrollicon ul li img {
	width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: center;
}
.scrollicon ul li a:hover {
	background-color: #cc0000;
}


/*カテゴリタイトル*/
	.categorytitle{width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: left;}
	.categorytitle p{margin:5px 15px 5px; padding:0; display: inline-block; font-size: 18px; text-align: left; color: #fff; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

/*中タイトル*/
	.title{width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: left;}
	.title p{margin:5px 15px 5px; padding:0; display: inline-block; font-size: 15px; text-align: left; color: #fff; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

/*小タイトル*/
	.mintitle{width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: left;}
	.mintitle p{margin:5px 15px 5px; padding:0; display: inline-block; font-size: 18px; text-align: left; color: #000; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

/*各カテゴリの中身の商品を並べる制御*/
.case {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ★ここが重要：リストを横並びにする記述 */
.case ul {
    display: flex;           /* 子要素を横並びにする */
    justify-content: center; /* 中央寄せ */
    gap: 10px;               /* 画像同士の隙間 */
    padding: 0;              /* リスト特有の余白を消す */
    margin: 0;               /* リスト特有の余白を消す */
    list-style: none;        /* リストの「・」を消す */
}

/* 各クーポンの枠 */
.case ul li {
    width: 48%;              /* 2つ並べるので、少し余裕を持たせて48%くらいにする */
    max-width: 400px;        /* PCで広がりすぎないように最大幅を指定（調整可） */
    box-sizing: border-box;
}

/* クーポン画像 */
.case ul li a img {
    width: 100%;            /* 枠いっぱいに表示 */
    height: auto;
    vertical-align: top;    /* 画像下の隙間消し */
}

/* 下の大きなバナー画像（さらに!!激得!!の画像） */
.BOX > div img {
    width: 100%;            /* 画面幅に合わせて伸縮 */
    max-width: 800px;       /* PCで大きくなりすぎないように制限（調整可） */
    height: auto;
    margin-top: 10px;       /* 上のクーポンとの隙間 */
}

/*.case {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display: inline-block;
	text-align: center;
	}

.case ul{
    -webkit-column-count: 2;
    -moz-column-count: 2;
	column-count: 2;
	}
	
.case ul li{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      list-style: none;
	  page-break-inside: avoid;
      break-inside: avoid;
      padding-bottom: 2px;
      width:95%;
    }
.case ul li a img{
      vertical-align: top;
    }

/*メインメニュー*/
.main-btn{
	width:100%;
	height: auto;
	margin-top: 20px;
}


/*メインメニューの中身のbtnを並べる制御*/
/* 親要素（外側の枠） */
.main-btn_case {
    width: 100%;
    margin: 0;
    padding: 0;
    /* ここからが横並びにする魔法の記述です */
    display: flex;
    justify-content: center; /* 中央に寄せる */
    gap: 10px; /* 画像と画像の間の隙間（お好みで調整してください） */
}

/* 子要素（画像を入れているdiv） */
.main-btn_case div {
    width: 100%; /* 親の幅に合わせて伸縮するように設定 */
    max-width: 500px; /* 必要であれば画像の最大幅を指定（なければ削除可） */
    box-sizing: border-box;
    padding-bottom: 10px;
}

/* 画像自体 */
.main-btn_case img {
    width: 100%; /* 枠に合わせて画像のサイズを自動調整 */
    height: auto; /* 比率を保ったまま高さを自動調整 */
    vertical-align: top; /* 画像の下にできる隙間を消す */
}


/*.main-btn_case {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display: inline-block;
	text-align: center;
	}

.main-btn_case{
    -webkit-column-count: 2;
    -moz-column-count: 2;
	column-count: 2;
	}
	
.main-btn_case div{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      list-style: none;
	  page-break-inside: avoid;
      break-inside: avoid;
      padding-bottom: 0px;
      width:100%;
    }

.main-btn_case img{
	margin-top: 5px;
	vertical-align: top;
    }

/*フッターの各SNSボタン*/
.case03 {column-count: 3;
	width:90%;
	align-items: center;
	justify-content: center;
	display: inline-block;
	}
	
.case03 ul {
	margin: 0 5px;
	list-style: none;
}
	
.case03 ul li a {
	width:100%;
	margin:10px 0;
	align-items: center;
	justify-content: center;
	display: inline-block;
}

.case03 ul li a img {
     vertical-align: top;
    }

/*部屋ページジャンプボタン*/
/* 部屋ページジャンプボタンの親要素 */
.case04 {
    width: 100%; /* 固定幅 375px ではなく 100% にしてスマホ画面に合わせる */
    max-width: 375px; /* 最大幅を指定 */
    margin: 0 auto;   /* 中央寄せ */
    /* height: 280px; ← 高さを固定すると余白の原因になるので削除します */
}

.case04 ul {
    list-style: none;
    padding: 0;
    margin-top: 35px;
    display: flex;       /* 横並びにする */
    justify-content: space-around; /* 要素を均等に配置 */
    align-items: center; /* 上下中央揃え */
}

.case04 ul li {
    width: 30%; /* 3カラムなので約33%以内にする */
}

.case04 ul li a {
    display: block;
    text-decoration: none;
    /* margin-top: 50px; ← 大きすぎるマージンは削除、必要なら適宜調整 */
}

.case04 ul li a img {
    width: 100%;    /* 親の li の幅いっぱいに画像を広げる */
    height: auto;   /* アスペクト比を維持 */
    vertical-align: bottom;
}


/*3列*/
.case__jyonetu {column-count: 3;
	align-items: center;
	justify-content: center;
	display: inline-block;
	}
	
.case__jyonetu ul {
	width:100%;
	margin: 0 2px ;
	list-style: none;
}
	
.case__jyonetu ul li a {
	width:100%;
	margin:10px 0 ;
	align-items: center;
	justify-content: center;
	display: inline-block;
}

.case__jyonetu ul li a img{
      vertical-align: bottom;
    }
	
/*料金表*/	
.case_p {column-count: 2;
	width:95%;
	margin:10px 0;
	align-items: center;
	justify-content: center;
	display: inline-block;
	}
.case_p ul {
	width: 100%;
	margin:0 5px;
	list-style: none;
}
.case_p ul li p {
	width:100%;
	margin:-5px 0 ;
	align-items: center;
	justify-content: center;
	display: inline-block;
	font-size: 1.4em;
}
.case_p ul li a img{
      vertical-align: top;
}


/*カテゴリーボタンの整列*/
.category_case {
	width:100%;
	align-items: center;
	justify-content: center;
	display: inline-block;
	}
	
.category_case ul {
	-webkit-column-count: 2;
    -moz-column-count: 2;
	column-count: 2;
	padding: 5px 10px;
}

.category_case ul li a {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    list-style: none;
	margin: 5px 0;
	width:180px;
}

/*カテゴリーボタンの制御*/
.button {
  background-color: #FF0000;
  border: solid 2px #FF0000;
  color: #2f4f4f;
  padding: 2px 10px;
  text-decoration: none;
  font-size: 1.2em;
}
.button:hover {
  color: #2f4f4f;
  background-color: #AF000A;
}

/*topのデザイン*/
/*.top {width:375px;
	height:630px;
	margin: 0;
	padding:0;
	text-align: center;}*/

.top {width:100%;
	height:100%;
	margin: 0;
	padding:0;
	text-align: center;}

/*.top {position:relative;}*/

.top_main_photo{width:100%;
                  }

.top__shop_logo{
	padding:0;
	position:absolute;
	left:15px;
	top:180px;
	text-align: center;
	width:30%;
	height:auto;
	transform: rotate(-7deg);
}

.top__shop_logo img{
	margin:0;
	padding:0;
	text-align: center;
}

.top__maskman_migi{
	padding:0;
	position:absolute;
	left:0px;
	top:0px;
	text-align: center;
	width:27%;
	height:auto;
}

.top__maskman_migi img{
	margin:0;
	padding:0;
	text-align: center;
}

.top__maskman_hidari{
	padding:0;
	position:absolute;
	left:-55px;
	top:385px;
	text-align: center;
	width:85%;
	height:auto;
}

.top__maskman_hidari img{
	margin:0;
	padding: 0px;
	text-align: center;
}

.top__maskman_yoyaku{
	padding:0;
	position:absolute;
	left:140px;
	top:360px;
	text-align: center;
	width:65%;
	height:auto;
}

.top__maskman_yoyaku img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_text{
	padding:0;
	position:absolute;
	left:23px;
	top:435px;
	text-align: center;
	width:50%;
	height:auto;
}

.top__title_text img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__renewal_title{
	padding:0;
	position:absolute;
	left:5px;
	top:200px;
	text-align: center;
	width:95%;
	height:auto;
	transform: rotate(-7deg);
}

.top__renewal_title img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.choice_title_text{
	margin-top: 10px;
	padding:0 11px;
	display: inline-block;
	text-align: center;
}

.top__USJ_yoyaku_text{
	padding:0;
	position:absolute;
	left:100px;
	top:190px;
	text-align: center;
	width:45%;
	height:auto;
}

.top__USJ_yoyaku_text img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__USJ_newplan_text{
	padding:0;
	position:absolute;
	right:0px;
	top:90px;
	text-align: center;
	width:100%;
	height:auto;
	;
}

.top__USJ_newplan_text img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__USJ_title_text{
	padding:0;
	position:absolute;
	left:0px;
	top:225px;
	text-align: center;
	width:100%;
	height:auto;
}

.top__USJ_title_text img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__USJ_title_price{
	padding:0;
	position:absolute;
	left:0px;
	top:300px;
	text-align: center;
	width:65%;
	height:auto;
}

.top__USJ_title_price img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp01{
	padding:0;
	position:absolute;
	right:185px;
	top:120px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(-7deg);
}

.top__title_USJ_hp01 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp02{
	padding:0;
	position:absolute;
	right:165px;
	top:75px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(-7deg);
}

.top__title_USJ_hp02 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp03{
	padding:0;
	position:absolute;
	right:0px;
	top:405px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(7deg);
}

.top__title_USJ_hp03 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp04{
	padding:0;
	position:absolute;
	right:195px;
	top:315px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(-7deg);
}

.top__title_USJ_hp04 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp05{
	padding:0;
	position:absolute;
	right:25px;
	top:275px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(7deg);
}

.top__title_USJ_hp05 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp06{
	padding:0;
	position:absolute;
	right:165px;
	top:135px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(7deg);
}

.top__title_USJ_hp06 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp07{
	padding:0;
	position:absolute;
	right:0px;
	top:120px;
	text-align: center;
	width:45%;
	height:auto;
	transform: rotate(7deg);
}

.top__title_USJ_hp07 img{
	margin: 0;
	padding: 0;
	text-align: center;
}


.top__title_USJ_hp08{
	padding:0;
	position:absolute;
	right:0px;
	top:290px;
	text-align: center;
	width:45%;
	height:auto;
}

.top__title_USJ_hp08 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

.top__title_USJ_hp09{
	padding:0;
	position:absolute;
	left:0px;
	top:50px;
	text-align: center;
	width:25%;
	height:auto;
}

.top__title_USJ_hp09 img{
	margin: 0;
	padding: 0;
	text-align: center;
}


.top__title_USJ_hp10{
	padding:0;
	position:absolute;
	right:85px;
	top:120px;
	text-align: center;
	width:50%;
	height:auto;
}

.top__title_USJ_hp10 img{
	margin: 0;
	padding: 0;
	text-align: center;
}

/*TOPページについてここまで*/


/*観光ページについて*/
.kankou {width:375px; height:600px; margin-bottom: 10px; padding:0 10px; display: inline-block; text-align: center;}

.kankou {position:relative;}

.kankou__title_sub01{
	padding:0;
	position:absolute;
	left:-45px;
	top:-15px;
	text-align: center;
	width:65%;
	height:auto;
}

.kankou__title_sub01 img{
	margin:0;
	padding:0;
	text-align: center;
}

.kankou__title_sub02{
	padding:0;
	position:absolute;
	right:-15px;
	top:400px;
	text-align: center;
	width:70%;
	height:auto;
}

.kankou__title_sub02 img{
	margin:0;
	padding:0;
	text-align: center;
}

.kankou_title_map{
	padding:0;
	position:absolute;
	right:0px;
	top:-10px;
	text-align: center;
	width:108%;
	height:auto;
}

.kankou_title_map img{
	margin:0;
	padding:0;
	text-align: center;
}


.kankou_place{
	width:375px;
	height:350px;
	margin-bottom: 10px;
	padding: 0;
	display: inline-block;
	text-align: center;
}

.kankou_place{
	position:relative;
}

.kankou_place__photo{
	padding:0;
	position:absolute;
	right:0px;
	top:0px;
	display: inline-block;
	text-align: center;
	width:100%;
	height:auto;
}

.kankou_place__photo img{
	margin:0;
	padding:0;
	text-align: center;
}

.kankou_place__time{
	padding:0;
	position:absolute;
	right:5px;
	top:205px;
	text-align: center;
	width:50%;
	height:auto;
}

.kankou_place_time img{
	margin:0;
	padding:0;
	text-align: center;
}

.kankou_place_tizu{
	display: inline-block;
	text-align: center;
	width:95%; 
	height:95%;
}

.kankou_place_tizu img{
	display: inline-block;
	text-align: center;
	margin: 15px 0;
	padding: 0;
}

.entame__nakami{
	display: inline-block;
	text-align: center;
	width:100%; 
	height:100%;
}

.entame__nakami span{
	display: inline-block;
	text-align: center;
	margin: 15px 0;
	padding: 0 15px;
}
/*観光ページについてここまで*/

/*部屋案内のデザイン*/
/* =========================================
   共通設定：スマホ幅に固定せず、PCでは中央寄せにする
   ========================================= */
.room__top,
.room__botton,
.room__botton_good,
.room__botton_cool {
    width: 100%;             /* 幅を親要素に合わせる */
    max-width: 500px;        /* ただし、最大でも500pxまで（スマホサイズ+α） */
    height: auto;            /* 高さは中身に合わせて自動調整 */
    margin: 0 auto;          /* PCで中央寄せ */
    position: relative;      /* 子要素の基準点 */
    padding-bottom: 20px;    /* 下に少し余白 */
    box-sizing: border-box;  /* パディングを含めた幅計算 */
}

/* =========================================
   トップ部分（タイトル・キャラ）
   ========================================= */
.room__top {
    /* 必要であれば高さを最低限確保 */
    min-height: 400px; 
}

.room__top_bak {
    position: absolute;
    left: 0;
    top: 10px;
    width: 85%;
    z-index: 1;
}

.room__top_text {
    position: absolute;
    left: 0;
    top: 185px;
    width: 85%;
    z-index: 2;
	margin-bottom: 70px;
}

.room__top_char {
    position: absolute;
    right: -10px; /* 少し調整 */
    top: 15px;
    width: 40%;
    z-index: 3;
}

/* 画像共通設定 */
.room__top img,
.room__botton img,
.room__botton_good img,
.room__botton_cool img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* =========================================
   スクロール部屋写真（重なりの原因修正）
   ========================================= */
.scrollroom {
    /* absoluteをやめて、自然な流れで配置 */
    position: relative; 
    width: 100%;
    margin-top: 300px; /* 上の要素との距離調整 */
    padding-bottom: 20px;
}

.scrollroom_main {
    background-color: #000;
    overflow-x: auto; /* 横スクロール */
    white-space: nowrap; /* 改行させない */
    padding: 10px 0;
}

/* リストを横並びにする（Flexbox） */
.scrollroom_main ul {
    display: flex;
    width: max-content; /* 中身の幅に合わせる */
    margin: 0;
    padding: 0;
    list-style: none;
}

.scrollroom_main ul li {
    padding: 0 5px;
    width: 135px;
    /* height指定は削除またはautoにして画像の比率を守る */
}

/* =========================================
   部屋番号ボタンエリア（Flexbox化）
   ========================================= */

/* タイトルテキスト */
.room__botton_title_text {
    position: relative; /* absoluteから変更して自然に積む */
    width: 100%;
    margin-bottom: 10px;
    padding-top: 20px;
}

/* 部屋番号リストの枠 */
.room__botton_migi {
    /* absoluteをやめて、場所を確保する */
    position: relative;
    width: 100%;
    text-align: center;
}

/* ★ここ重要：部屋番号をFlexboxで並べる */
.room__botton_nmber ul {
    display: flex;
    flex-wrap: wrap;         /* 折り返し許可 */
    justify-content: center; /* 中央寄せ */
    gap: 10px;               /* ボタン間の隙間 */
    padding: 0 10px;
    list-style: none;
    margin: 0;
}

/* 個別の部屋番号ボタン */
.room__botton_nmber ul li {
    width: 48%;             /* 2列にするため */
    box-sizing: border-box;
}

.room__botton_nmber ul li a {
    display: block;         /* リンクをブロック要素に */
    width: 100%;
}

/* =========================================
   下部の写真とキャラクター
   ========================================= */
/* 写真とキャラを包む枠を作ると管理しやすいですが、
   今回はabsoluteのまま位置を調整します */

.room__botton_photo,
.room__botton_photo_good,
.room__botton_photo_cool {
    /* relativeに変更し、部屋番号の下に自然に来るようにする */
    position: relative;
    width: 80%;
    margin: 20px auto 0; /* 上に余白、左右中央 */
    left: auto; top: auto; /* absolute解除 */
    display: block;
}

.room__botton_char,
.room__botton_char_good,
.room__botton_char_cool {
    /* キャラだけは写真に重ねたいのでabsoluteのままでOK */
    position: absolute;
    right: 0;
    bottom: 0; /* 下揃え */
    top: auto; /* 上指定を解除 */
    width: 35%;
}


/*部屋案内のデザインここまで*/

/*スライダーについて*/

.swiper {
	width: 100%;
	align-items: center;
	justify-content: center;
	display: inline-block;
}

.swiper-slide {
	width: 50%;
	margin-right: 0px;
	height: 50px;
}

.swiper-container {
	width: 200px;
	align-items: center;
	justify-content: center;
	display: inline-block;
}

.swiper-container {
	padding-bottom: 30px;
	
}

.swiper-slide img{
	width: 100%;
	margin-right: 10px;
	height: auto;
	border-radius: 0px;
	box-shadow: 0;
}



/* TOPの予約ボタンフワフワアニメーション */
.top_fuwa{
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(4%);
  }
}


/* 選べる便利な３タイプ！フワフワアニメーション */
.yellow_fuwa{
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
	    transform: translateX(-10%);
  }
  100% {
	   transform: translateX(10%);
  }
}



/* TOPのキャラクターのフワフワアニメーション */
.top_fuwa_char{
  animation: floating-y 2.4s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}


/* 部屋案内のキャラクターのフワフワアニメーション */
.room_fuwa_char{
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(3%);
  }
}



/*ここから素材*/
.wrapper{width:auto; height:auto; margin: 0; padding:0; text-align: center;}
.BOX{width:100%; height:100%; margin:0; padding:0; display: inline-block; text-align: center;}
.sticky{position:sticky; position:-webkit-sticky; display:flex; top:0; justify-content: center; text-align: center; z-index:5; }


.topback{
	display: inline-block;
	text-align: center;
	width:100%; 
	height:100%;
}
.topback span{
	display: inline-block;
	text-align: center;
	margin:10px 0;
	padding:0 10px;
}

/*赤背景*/
.bg_R{background-color: #FF0000; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*緑背景*/
.bg_gr{background-color: #34AC37; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*青背景*/
.bg_bl{background-color: #232584; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*青背景 明るい*/
.bg_bl_02{background-color: #3744FF; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*白背景*/
.bg_W{background-color: #FFFFFF; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*黄色背景*/
.bg_Y{background-color: #FFF000; background-repeat: no-repeat; background-position: center; background-size:cover;}

/*黒背景*/
.bg_k {background-color: #000000; background-repeat: no-repeat; background-position: center; background-size:cover;}


/*各種タグの処理*/
img{width:100%; height:100%; margin:0; padding:0; }
h1{color: #fff; font-size: 15px; line-height: 150%; letter-spacing: 1px; text-align: left; display: inline;}
ul{list-style-type: none;　margin:0; padding:0;}
a{text-decoration: none;　style-type: none;　margin:0; padding:0;}


/*レスポンシヴ表記＝入れた数値以上になるとレイアウトが変化する。ここには最小のときの設定（widthは100％に）SPサイズ*/
@media screen and (max-width:375px) {
body {
	  box-sizing: border-box;
	  width: 100vw; height:auto;
      margin: 0px auto; padding:0px; border:0px solid black;
	  font-size: 0.9em;
	  line-height: 140%;
	  letter-spacing: 0.1em;
	  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	  color: #000000;
	  text-align: center;
	  }
	
.container{width:100%; height:100%;margin:0; padding:0; display: inline-block; text-align: center;}

.footer{margin-bottom:150px}


/*部屋紹介の最下段料金表の下側の余白調整*/
.price__margin{margin-bottom: 80px}

}

/*レスポンシヴ表記＝入れた数値以上になるとレイアウトが変化する。ここには最大のときの設定（widthは最大時に表示して欲しい幅に）PC*/
@media screen and (min-width:480px)  {
body {
	  box-sizing: border-box;
	  width: 100vw; height:auto;
      margin: 0px auto; padding:0px; border:0px solid black;
	  font-size: 0.9em;
	  line-height: 140%;
	  letter-spacing: 0.1em;
	  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	  color: #000000;
	  text-align: center;
	  }
	
.container{width:375px; height:100%;margin:0; padding:0; display: inline-block; text-align: center;}

.BOX{width:375px; height:100%;margin:0; padding:0; display: inline-block; text-align: center;}

.footer{margin-bottom:200px}

/*下部固定予約ボタン*/
.yoyaku_tuiseki {
        position: fixed;
        z-index: 9999;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        
        width: 100%;
        max-width: 375px; /* コンテンツの幅に制限 */
        
        display: flex;
        /* ↓ここを center から flex-end に変更します */
        justify-content: flex-end; 
        
        align-items: center;
        /* ↓右側に少し余白が欲しい場合は、ここを調整してください */
        padding-right: 0px; 
        box-sizing: border-box;
    }

    .yoyaku_tuiseki a {
        /* 右に寄せたとき、ボタンが大きすぎると分かりにくいので、
           お好みでサイズを調整してください */
        width: 60%; 
        height: auto;
        display: block;
    }

/*部屋紹介の最下段料金表の下側の余白調整*/
.price__margin{margin-bottom: 20px}


}