@charset "utf-8";




/* ==============================================================
	▼ ウィンドウ幅が0〜768px(タブレット以下)の場合に適用するCSS ▼
=============================================================== */


@media only screen and (max-width : 768px ){
	
	
	/* 共通 */
	h1
	{
		display: none ;	
	}
	
	.inner {
		width: 90%;
	}
	
	#header img {
		width: 20%;
	}
	
	#header p {
		font-size: 1rem;
	}
	
	.section-roomtype {
		background-size: 15%;
		z-index: -1;
		position: relative;
	}
	
	.section-otherroom {
		background-size: 15%;
	}
	
	.section-footer img {
		width: 12%;
	}
	
	.section-footer p {
		font-size: 1.2rem;
	}
	
	.section-footer p span {
		font-size: 2.8rem;
	}
	
	.section-footer p+p {
		font-size: 1.3rem;
	}
	
	
	
	
	/* トップページ */
	.section-message .section-content {
		background-size: 8%;
	}
	
	.message-box-area {
		width: 90%;
	}
	
	.top-bg-area #mainSlide img {
		height: auto;
	}
	
	.secton-header-onlytop #header {
		position: static;
	}
	
	.otherroom-list {
		max-width: 100%;
	}
	
	
	.otherroom-list .cinema-mini {
	    float: left;
    	width: 50%;
	}
	
	.otherroom-list .cinema-mini img {
		max-width: 70%;
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	
	.otherroom-list .secret-mini {
		float: right;
    	width: 50%;
	}
	
	.otherroom-list .secret-mini img {
		max-width: 70%;
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	
	
	
	/* 料金ページ */
	#price-page .section-price {
		background-size: 8%;
		z-index: -1;
		position: relative;
	}
	
	.hotelinfo-left-box {
    	padding: 20px;
	}
	
	.hotelinfo_table td {
	    display: block;
		padding: 10px 0px;
	}
	
	.hotelinfo_table td:first-child {
    	width: 100%;
	}
	
	
	/* アメニティーページ */
	#amenity-page .section-amenity p {
		font-size: 1.6rem;
	}
	
	/* アクセスページ */
	#access-page .section-access {
		background: #37210b;
		z-index: -1;
		position: relative;
	}
	
	/* シークレットページ */
	#secret-page .secret-img {
		width: 100%;
		float: none;
	}
	
	#secret-page .secret-price {
		width: 100%;
		float: none;
	}
	
	
}




/* ==============================================================
	▼ ウィンドウ幅が0〜479px(スマホ)の場合に適用するCSS ▼
=============================================================== */


/* 客室案内ページ */
	@media only screen and (max-width : 479px ){

	
		#header{
			position: relative;
		}
	
	
	/* モーダルメニュー*/
	.menu-btn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 100px;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
		z-index: 10000;
	}

	.menu-btn span {
		color: #fff;
	}

	.menu-btn span:after {
		content: attr(data-txt-menu);
	}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .menu-btn span:after {
		content: attr(data-txt-close);
	}



		#nav {
			display: none;
		}

		#header p {
			display: none;
		}


	.menu2 {
		position: fixed;
		display: table;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: hidden;
		opacity: 0;
		z-index: 99999;
	}

	.menu2 ul {
		display: table-cell;
		vertical-align: middle;
	}

	.menu2 li {
		width: 300px;
		height: 80px;
		line-height: 80px;
		margin: 0 auto;
		text-align: center;
	}

	.menu2 li a {
		display: block;
		font-size: 18px;
		color: #fff;
	}

	.menu2 li a:hover {
		color: #F7C7E9;
	}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .menu2 {
		cursor: url(../images/cross.svg),auto;
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: visible;
		opacity: 1;
	}


	/* トップページ */
	
	
	.top-bg-area #mainSlide img {
		height: auto;
	}
	
	.top-bg-area p {
		height: 1rem;
		font-size: 1.6rem;
	}
	
	.secton-header-onlytop #header {
		position: static;
	}
	
	.section-message .cont-txt {
		font-size: 1.5rem;
	}
	
	.message-box-area li {
		width: 100%;
	}
	
	.section-customer {
		background-size: cover;
	}
	
	.section-customer p {
		font-size: 1.3rem;
	}
	
	.roomtype-list img.room-garelly {
		width: 100%;
	}
	
	.section-roomtype h2 {
		padding: 12% 0 10% !important;
	}
	
	.section-roomtype  {
		background-position: 2% 0%, 98% 0%;
	}
	
	.otherroom-list img {
		width: 100%;
		float: none;
	}
		
		
	.otherroom-list {
		max-width: 100%;
	}
	
	
	.otherroom-list .cinema-mini {
		float: none;
		display: block;
		width: 100%;
		padding-bottom: 5%;
	}
	
	.otherroom-list .cinema-mini img {
		display: block;
		width: 100%;
	}
	
	.otherroom-list .secret-mini {
		float: none;
		padding-bottom: 5%;
		display: block;
		width: 100%;
	}
	
	.otherroom-list .secret-mini img {
		display: block;
		width: 100%;
	}
		
		
		
		
		
	
	
	.hotelinfo-left-box {
     	width: 90%;
        float: none;
		margin: 0px auto;
		position: relative;
	}
	
	.hotelinfo-right-box {
		width: 90%;
		float: none;
		margin: 0px auto;
		position: relative;
	}
		
	.hotelinfo-left-box p,
	.hotelinfo-right-box p {
    text-align: center;
    margin-right: 0;
    font-size: 1.5rem;
    padding-top: 2%;
}	
	.hotelinfo-box h3 {
		font-size: 3rem;
		padding: 3% 0;
	}
	
	.section-hotelinfo p {
		text-align: center;
		margin-right: 0;
		font-size: 1.5rem;
		padding-top: 2%;
	}
	
	.section-message .section-content {
		background-image: none;
	}
	
	.section-footer small {
		font-size: 0.8rem;
	}
	
	.hotelinfo-right-box {
		height: auto;
		padding: 20px;
	}
	
		.section-footer {
			background-size: 15%;
		}
	
		
		.price_table {
			width: 100%;
		}
		.price_table th {
			font-size: 4vw;
}
		.price_table td {
			padding: 0px 10px;
}

.price_table td > .price_detail {
    width: 100%;
    padding: 0px;
}

.price_table td > .price_detail > li {
    width: 100%;
}
	
	/* 客室案内ページ */
	#room-page .roomtype-list img.room-garelly {
		float: none;
		width: 100%;
	}
		
		.room_img {
			width: 90%;
			height: auto;
		}
		
		.room_img > li > div {
			display: inline-block;
			width: 48%;
		}
		
		.room_img img {
			width: 100%;
			height: auto;
		}

	/* 料金ページ */
	
	
	
	/* アメニティーページ */
	#amenity-page .section-amenity p {
		font-size: 1.3rem;
	}
	
	#amenity-page .amenity-list {
		display: block;
		width: 70%;
	}
	
	#amenity-page .amenity-list .amenity-block {
		padding-bottom: 5%;
	}
	
	/* アクセスページ */
	#access-page table {
		width: 100%;
		margin-top: 10%;
		font-size: 1.3rem;
	}
	
	#access-page .ggmap {
		width: 100%;
	}

	#access-page .amuse-image {
		width: 100%;
	}
	
	
	/* シネマページ */
	#cinema-page .cinema-bottom p:first-child {
		padding: 28% 0 5%;
	}
		
	#secret-page .secret-price p {
			font-size: 0.8rem;
		}
		
	

	
}