@charset "UTF-8";
/**********************************************
	ブレークポイント
	スマホ　480px
	タブレット　768px
	パソコン　970pxで設定するよ
	メディアクエリは基本max-widthにしてみる
*********************************************/
/*	スマホの時は表示
-----------------------------------*/
.sp {
	display: none;
}

@media (max-width: 479px) {
	.sp {
		display: flex;
	}
}

/*	スマホ、タブレットの時は表示
-----------------------------------*/
.sp-tab {
	display: none;
}

@media (max-width: 767px) {
	.sp-tab {
		display: inline-flex;
	}
}

/*	タブレットのみ表示
-----------------------------------*/
.tab {
	display: none;
}

@media (max-width: 767px) {
	.tab {
		display: inline-flex;
	}
}

@media (max-width: 479px) {
	.tab {
		display: none;
	}
}

/*	パソコンとタブレットの時は表示
-----------------------------------*/
.pc-tab {
	display: inline-flex;
}

@media (max-width: 479px) {
	.pc-tab {
		display: none;
	}
}

/*	パソコンの時は表示
-----------------------------------*/
.pc {
	display: inline-flex;
}

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

/*	幅97%、最大幅970px
----------------------------------------*/
.responsive-wrap {
	width: 97%;
	max-width: 970px;
	height: auto;
	margin: 0px auto;
	display: block;
}

/*************************************
	header
**************************************/
/*	ヘッダーロゴ
-----------------------------------*/
header h1 a{
	display: inline-flex;
	align-items: center;
	color: #000;
}

header h1 img {
	width: 90px;
	height: auto;
	margin: 0 5px;
}

header h1 span {
	font-size: 1.4rem;
	font-weight: bold;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	text-align: center;
	line-height: 1.6rem;
}

/* 幅がせまくなるとメニューが折れ曲がるので、850px以下になったら
ホテルサティス柏インターの文字が消えるようにする */
@media (max-width:850px) {
	header h1 span {
		display: none;
	}
}

/*************************************
	パソコン用メニュー
**************************************/
.pc-menu {
	color: #000;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	width: 100%;
	position: fixed;
	z-index: 3;
	background: rgba(237, 240, 242, 0.7);
}


.pc-menu a {
	color: #000;
}

.pc-menu span {
	color: #000;
}

/*	写真スライダーの下までスクロールしたら
	.menu-transのクラスがついてメニューの色変わる
----------------------------------------------------*/
.menu-trans {
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

.menu-trans h1 span {
	color: #fff;
}

.menu-trans li a {
	color: #fff;
}

@media(max-width: 767px) {
	.menu {
		height: 50px;
		background: #000;
	}
}

/*	パソコン用メニュー項目
---------------------------------------------*/
.pc-menu-list {
	display: flex;
	height: 100%;
	align-items: center;
}

.pc-menu-list li {
	height: 80%;
}

.pc-menu-list li a{
	padding: 0 .5em;
	height: 100%;
	display: inline-flex;
	align-items: center;
	position: relative;
}

.pc-menu-list li a:before {
	content: '';
	width: 0;
	left: 50%;
	bottom: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #BA9cff;
	position: absolute;
	display: block;
}
.pc-menu-list li a:hover:before {
	width: 50%;
	border-bottom: 2px solid #BA9cff;
}
.pc-menu-list li a:after {
	content: '';
	width: 0;
	right: 50%;
	bottom: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #BA9cff;
	position: absolute;
	display: block;
}
.pc-menu-list li a:hover:after {
	width: 50%;
	border-bottom: 2px solid #BA9cff;
}


/*	電話番号（PCのみ表示）
-----------------------------------*/
.pc-tel-num {
	color: #fff;
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: 1.8rem;
	background: #af9265;
	display: inline-flex;
	align-items: center;
	padding: 0 .5em;
	margin-right: .5em;
	letter-spacing: 1px;
}

/*************************************
	スマホ用メニュー
**************************************/
.sp-menu {
	width: 100%;
	height: 60px;
	flex-wrap: wrap;
	position: absolute;
	z-index: 5;
}


/* ロゴ
--------------------------------------*/
.top h1.sp-menu-logo {
	background: none;
	position: relative;
	z-index: 3;
}

h1.sp-menu-logo span {
	display: none;
}

h1.sp-menu-logo {
	width: 100%;
	height: 100%;
	background: #000;
	display: flex;
}

h1.sp-menu-logo a {
	width: calc(100% - 50px); /* ハンバーガーメニューの幅の分をあける */
	color: #fff;
}

/*	ハンバーガーメニュー
-----------------------------------*/
#ham-menu-btn-check {
	display: none;
}

.ham-menu-btn {
	display: flex;
	height: 50px;
	width: 50px;
	justify-content: center;
	align-items: center;
	z-index: 3;
	position: absolute;
	right: 5px;
	top: 5px;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: .2rem;
	/* background: #5babd2; */
	border: 1px solid #fff;
	border-radius: 5px;
}

.ham-menu-btn span,
.ham-menu-btn span:before,
.ham-menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}

.ham-menu-btn span:before {
    bottom: 8px;
}
.ham-menu-btn span:after {
    top: 8px;
}

#ham-menu-btn-check:checked + .ham-menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}

#ham-menu-btn-check:checked ~ .ham-menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}

#ham-menu-btn-check:checked ~ .ham-menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#ham-menu-btn-check:checked ~ .sp-menu-list {
	height: auto;
	max-height: 100vh;
	transition: all .8s;
}

/*	ハンバーガーメニューのリスト
-----------------------------------*/
.sp-menu-list {
	width: 100%;
	height: 0;
	max-height: 0;
	overflow: hidden;
	transition: all .8s;
	flex-direction: column;
	z-index: 2;
	background: #bddeef;
}

.top .sp-menu-list {
	position: absolute;
}

.sp-menu-list li:first-child {
	border-top: 1px solid #fff;
}

.top .sp-menu-list li:first-child {
	margin-top: 60px;
}

.sp-menu-list li {
	border-bottom: 1px solid #fff;
}

.sp-menu-list li a {
	width: 100%;
	padding: 10px;
	position: relative;
	display: inline-flex;
	color: #337ab7;

}

/*	ハンバーガーメニューリストの後の矢印
-------------------------------------------*/
.sp-menu-list li a:before,
.sp-menu-list li a:after {
    content: "";
    position: absolute;
    top: 50%;
}

.sp-menu-list li a:before {
    width: 18px;
    height: 18px;
}

.sp-menu-list li a:after {
    right: 10px;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-top: solid 2px #337ab7;
    border-right: solid 2px #337ab7;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*	下に固定のメニュー
-----------------------------------*/
ul.sp-menu-icon {
	width: 100%;
    z-index: 2;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}

ul.sp-menu-icon li {
	color: #8fb9ce;
	width: 20%;
	text-align: center;
	padding: 1em 0;
    background: #fff;
    border-left: 1px solid #8fb9ce;
	background: #f3f8fa;
}

ul.sp-menu-icon li a {
	width: 100%;
	height: 100%;
	display: block;
	color: #337ab7;
}

ul.sp-menu-icon li i {
	font-size: 200%;
}

ul.sp-menu-icon li a span {
	display: block;
	margin-top: .2em;
	font-size: 1.1rem;
	letter-spacing: -.01em;
	white-space: nowrap;
	font-style: normal;
}

/*	電話予約(スマホのみ表示）
-----------------------------------*/
.sp-tel-btn a {
	width: 60px;
	height: 60px;
	color: #fff;
	position: fixed;
	bottom: 90px;
	right: .5em;
	background: #316b87;
	text-align: center;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	opacity: 0.9;
}

.sp-tel-btn i {
	font-size: 180%;
	margin-top: .3em;
}
.sp-tel-btn span {
    font-size: 1.2rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    font-style: normal;
    overflow-wrap: break-word;
    margin-top: .1em;
}

/*-----------------------------------
	ヘッダーがかぶる分上をあける
-------------------------------------*/
.head-margin {
	margin-top: 60px;
}

@media(max-width: 767px) {
	.head-margin {
		margin-top: 50px;
	}
}

/*************************************
	ページトップに戻る
**************************************/
.return-top .fas{
	font-size: 2rem;
}
.return-top a {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	z-index: 3;
	margin: 2em auto .5em;
}


/*************************************
	footer
**************************************/
footer {
    padding: 30px 0 120px;
    text-align: center;
    background: #202020;
    color: #fff;
	margin-top: auto;
}

/*	コンテンツ少なくても
	フッターの下に余白が出来ないよう
	下にぴったりつける
--------------------------------------*/
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/*	フッターの上にmarginとかpaddingで
	隙間作れないから、もう一つ入れ子にする
--------------------------------------------*/
.container {
	min-height: 70vh; /* だいたいフッターが下に来るくらいの高さ */
}

/*	18禁
--------------------------------------------*/
.eighteen-ban {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ff0000;
	background: #fff;
	padding: .2em;
	margin: 0 .5em;
}

.eighteen-ban img {
	width: 50px;
	height: auto;
}

.eighteen-ban p {
	color: #ff0000;
	margin-left: .5em;
	text-align: left;
}

/*	コピーライト
--------------------------------------------*/
footer small {
	display: block;
	margin-top: .2em;
}

/*	スライダーページャー
--------------------------------------------*/
.swiper-pagination-bullet {
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	color: #000;
	opacity: 1;
	background: rgba(0, 0, 0, 0.2);
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin-top: .5em;
}

.swiper-pagination-bullet-active {
	color: #fff;
	background: #007aff;
}

/*************************************
	top
**************************************/

/*------------------------------------
	写真スライダー
--------------------------------------*/
.slider-main {
	width: 100%;
	height: 100vh;
	margin-right: 0;
	overflow: hidden;
	position: relative;
}

.slider-main:after {
	content: "";
	display: block;
	padding-bottom: 60%;
	overflow: hidden;
}

.slider-logo {
	color: #fff;
	font-weight: bold;
	font-size: 1.8rem;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	background: rgba(0,0,0,0.33);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 50%;
	max-width: 350px;
	padding: 4% 0;
	position: absolute;
	text-align: center;
	margin: 0 auto;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.slider-logo p{
	line-height: 1.2em;
}

.slider-logo img {
	width: 154px;
	height: auto;
}

@media (max-width: 767px) {
	.slider-logo img {
		width: 60px;
		height: auto;
	}
}

.zoom-in-slide img {
	width: 100%;
	height: 100%;
	position : absolute;
	object-fit: cover;
	display : block;
	opacity : 0;
	transform: scale(1.15);
	animation :zoomIn 32s 0s ease-out infinite;
	background: #000;
}

.zoom-in-slide img:nth-of-type(1) { animation-delay: 0s; }
.zoom-in-slide img:nth-of-type(2) { animation-delay: 4s; }
.zoom-in-slide img:nth-of-type(3) { animation-delay: 8s; }
.zoom-in-slide img:nth-of-type(4) { animation-delay: 12s; }
.zoom-in-slide img:nth-of-type(5) { animation-delay: 16s; }
.zoom-in-slide img:nth-of-type(6) { animation-delay: 20s; }
.zoom-in-slide img:nth-of-type(7) { animation-delay: 24s; }
.zoom-in-slide img:nth-of-type(8) { animation-delay: 28s; }
.zoom-in-slide img:nth-of-type(9) { animation-delay: 32s; }

@keyframes zoomIn {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1) ;
    }
  99.9%,to{ opacity: 0 }
}


/* 無人チェックインの上をあける
-----------------------------------------*/
#checkin {
	margin: 20px auto 0;
	text-align: center;
}

/* パソコンの時は漫画背景色表示
------------------------------------*/
.bg-checkin-comics{
	/* width: 100%; */
	background: rgb(2,166,221);
	background: url('images/bg-star.webp'),-moz-linear-gradient(0deg, rgba(2,166,221,1) 0%, rgba(9,33,121,1) 70%);
	background: -webkit-linear-gradient(0deg, rgba(2,166,221,1) 0%, rgba(9,33,121,1) 70%);
	background: url('../images/bg-star.webp'),linear-gradient(0deg, rgba(2,166,221,1) 0%, rgba(9,33,121,1) 70%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02a6dd",endColorstr="#092179",GradientType=1);
}

/* スマホ漫画と「続きを見る」
------------------------------------*/
.checkin-comics-wrap {
	margin: 0 auto;
}

.swiperModalButton {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
 /* buttonのデフォルト属性を外す */
.modalOpen {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	position: relative;
}

.swiperModalButtonTxt {
	color: #e1007f;
	font-family: 'M PLUS 2', sans-serif;
	font-size: 18px;
	font-size: clamp(16px,5vw,24px);
	font-weight: bold;
	display: block;


/*	color: #0F5BFF; */
	width: 80%;
	background: #fff;
	border: 2px solid #0F5BFF;
	border-radius: 10px;
	text-align: center;
	padding: 5px 0;
	position: absolute;
	bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}



/* モーダル */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s;
	pointer-events: none;
	opacity: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.6);
}

/* モーダルがactiveの時 */
.modal.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
	position: relative;
	width: 100%;
}
.modal_inner {
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.modal-checkin-swiper{
	width: 100%;
	height: auto;
	display: flex;
}

/* 閉じるボタン */
.modal__close-btn {
	position: absolute;
	right: 0;
	top: -40px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 20;
}
.modal__close-btn:hover {
	opacity: 0.8;
}

/* 閉じるボタンのX */
.lineClose {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	line-height: 1;
	width: 100%;
	height: 0.4rem;
	background: currentColor;
	border-radius: 0.4rem;
	position: relative;
	transform: rotate(45deg);
}
.lineClose::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

.checkin-modal-wrap .swiper-button-next:after,
.checkin-modal-wrap .swiper-button-prev:after {
	font-size: 2.6rem;
}

.checkin-modal-wrap .swiper-button-next{
	background: rgba(0,0,0,0.3);
	right: 0;
	border-radius: 2px;
}

.checkin-modal-wrap .swiper-button-prev{
	background: rgba(0,0,0,0.3);
	left: 0;
	border-radius: 2px;
}

.checkin-modal-wrap .swiper-pagination-fraction {
	color: #fff;
	width: 60px;
	background: rgba(0,0,0,0.3);
	border-radius: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom: 10px;
}

/*------------------------------------
	見出し
--------------------------------------*/
.ttl-contents,
.ttl-contents a{
	padding: 20px 0;
	text-align: center;
	overflow-wrap: break-word;
}

.ttl-contents span.en {
	@font-face {
		font-family: 'M PLUS 2', sans-serif;
		src: url('webfonts/MPLUS2-VariableFont_wght.ttf') format('truetype');
	}
	font-family: 'Montserrat', sans-serif;
	color: #af9265;
	font-size: 3.6rem;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: .1em;
	line-height: 1.2;
}
.ttl-contents span.jp {
	display: block;
	font-weight: normal;
}

.bg-color01 {
	background: #fcf3f4;
}

/*------------------------------------
	スクロールダウン
--------------------------------------*/
.scrooll-down a {
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    z-index: 2;
}
.scrooll-down a .fas {
	font-size: 2.4rem;
}

/*------------------------------------
	NEWS
--------------------------------------*/
/* スクロールがちょうどいい位置に来るように調整
-------------------------------------------------*/
.top-news:before{
	content: "";
	height: 60px;
	display: block;
}
.top-news {
	margin-top: -60px;
}

@media(max-width:767px) {
	.top-news:before{
		content: "";
		height: 0;
		display: inline;
	}
	.top-news {
		margin-top: 0;
	}
}

/* ニューススライドのレイアウト調整
---------------------------------*/
#newsWrap {
	padding: 0 1px 1.5em;
}
.news-swiper-pagination {
	color: #fff;
	width: 60px;
	background: rgba(0,0,0,0.2);
	border-radius: 15px;
	padding: .2em .5em;
	left: 50%;
	bottom: 0;
	transform: translate(-50%)
}

/* ニュースのリスト
---------------------------------*/
#newsList {
	display: flex;
	justify-content: space-between;
}

#newsList li {
	height: auto;
	border: 1px solid #d5d5d5;
	border-radius: 5px;
	margin: 1em auto;
}

/* サムネイル画像の枠
---------------------------------*/
.thumbNailWrap {
	width: 100%;
	height: auto;
	display: block;
/*	background: #d5d5d5;*/
	position: relative;
	overflow: hidden;
}

.thumbNailWrap:after {
	content: "";
	display: block;
	padding-bottom: 75%;
}

.thumbNailInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 2.4rem;
	font-weight:bold;
}

/* サムネイル画像
---------------------------------*/
.swiper-slide .thumbNailInner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* タイトル部全体の枠
---------------------------------*/
.newsTitleWrap{
	padding: .5em;
}

/* 各マーク共通スタイル
---------------------------------*/
.catName span {
	color: #fff;
	background: #47d8ff;
	padding: 0 .2em;
}

/* 新着
---------------------------------*/
.newMark {
	color: #fff;
	background: #ff9c3b;
	padding: 0 .2em;
}

/* お知らせ
---------------------------------*/
span.catInfo {
	background: #068bf1;
}

/* 重要なお知らせ
---------------------------------*/
span.catImportant {
	background: #ff0000;
}

/* キャンペーン
---------------------------------*/
span.catCampain {
	background: #2ec6be;
}

/* イベント
---------------------------------*/
span.catEvent {
	background: #ff6c92;
}

/* フード
---------------------------------*/
span.catFood {
	background: #a0522d;
}

/* サービス
---------------------------------*/
span.catService {
	background: #3dc300;
}

span.catPrice {
	background: #af9265;
}

span.catMember {
	background: #7b68ee;
}

/* 日付
---------------------------------*/
.up_ymd {
	color: #999999;
	float: right;
}

/* タイトル
---------------------------------*/
#newsList li .title{
	display: block;
	margin-top: .4em;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*-----------------------------------
	バナー
------------------------------------*/
.bnr-info-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bnr-info-wrap li {
	position: relative;
	width: calc(98% /3);
	height: auto;
	overflow: hidden;
	margin: 2em auto 0;
}

@media(max-width:767px) {
	.bnr-info-wrap li {
		width: calc(98% / 2);
	}
}

@media(max-width:479px) {
	.bnr-info-wrap li {
		width: 100%;
	}
}

.bnr-info-wrap li:after {
	position: absolute;
	content: "";
	padding-bottom: 32%;
	display: inline-block;
	top: 0;
	left: 0;
}

.bnr-info-wrap li img {
	width: 100%;
	height: 100%;
}

.grandmenu-txt {
	width: 100%;
	height: 100%;
	font-size: 3rem;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fffff0;
	text-shadow: 
	0.04em 0.02em 0 #B0BEC5, 
		0.08em 0.05em 0 rgba(0, 0, 0, 0.6);
	background: rgba(0,0,0,0.3);
}

/*------------------------------------
	アクセス
--------------------------------------*/
.bg-access {
	position: relative;
}

/* 背景画像
---------------------------------------*/
.bg-access:after {
    content: '';
    width: 82%;
    height: 80%;
    position: absolute;
    top: 20%;
    left: 0;
    background: url(../images/hotel-exterior.jpg) no-repeat center right;
    background-size: cover;
    z-index: -1;
    opacity: 0.2;
}

.access-data-wrap {
	background: #fff;
	border: 1px solid #D5D5D5;
	text-align: center;
	padding: 2em .5em;
	margin: 1em auto;
}

.access-data-wrap p {
	line-height: 1.2em;
	line-height: 1.4;
}
.access-logo {
	font-size: 1.8rem;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	margin-bottom: .2em;
}

.access-address span {
	margin-right: .5em;
}

@media(max-width: 479px){
	margin-right: 0;
}

.access-root {
	margin: 1em auto .2em;
}


.access-parking {
	margin: .5em auto;
}


/* google map
---------------------------------------*/

.gmap {
	width: 100%;
	height: 0;
	padding-bottom: 30.25%;
	position: relative;
	margin: 0 auto;

}

@media (max-width: 767px) {
	.gmap {
		padding-bottom: 56.25%;
	}
}

.gmap iframe {

	position: absolute;
	left: 0;
	top: 0;
	/*
	top: -10em;
	height: calc(100% + 10em + 10em);*/
	width: 100%;
	height: 100%;
}

/*************************************
	news-detail
**************************************/
.news-detail-contents {
	margin-top: 2em;
}

.ttl-news-detail {
	font-size: 2.2rem;
}

#up_ymd {
	margin: 1em auto;
}

.detailUpfile img {
	display: block;
	margin: 1em auto;
	text-align: center;
}

#newsDetailWrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#detail {
	width: calc(70% - 1em);
}


@media(max-width:767px) {
	#detail {
		width: 100%;
	}
}

#detail img {
	width: 100%;
}

.detailText,
.detailUpfile {
	margin: 1em auto;
}

#newsDetailList {
	width: 30%;
	border-top: 1px solid #d5d5d5;
}

@media(max-width:767px) {
	#newsDetailList {
		width: 100%;
	}
}

#newsDetailList li {
	border-bottom: 1px solid #d5d5d5;
	padding: .2em;
}

.up_ymd_detail {
	color: #999;
}

.title_detail {
	margin-top: .4em;
	display: block;
}

.backORcloseBtn a {
	display: block;
	width: 250px;
	margin: 2em auto 0;
	text-align: center;
	border: 1px solid #acacac;
	padding: .5em 0;
}

.backORcloseBtn a:hover {
	background: #f5f5f5;
}

/*************************************
	room
**************************************/
.room-main-image {
	width: 100%;
    padding-bottom: 180px;
    margin-bottom: 2em;
    background: url(../images/room212_01.jpg) no-repeat center bottom 180px fixed;
    background-size: cover;
	opacity: 0.4;
}

/*-------------------------------------- 
	ルームタイプの枠
---------------------------------------*/
.room-type {
	display: flex;
	justify-content: space-between;
}

@media(max-width: 767px) {
	.room-type {
		flex-direction: column;
	}
}

/*	ルームタイプ
----------------------------------------*/
.ttl-room-type {
    text-align: center;
    margin: .5em auto;
}
.ttl-room-type span.en {
	margin: 10px auto;
	font-family: 'Montserrat', sans-serif;
    color: #af9265;
    font-size: 2.4rem;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: .1em;	
}

.ttl-room-type span.jp {
	font-weight: normal;
	display: block;
}

/*	ルームタイプ選択ボタン
----------------------------------------*/
.room-type-label {
	width: 30%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
	margin-right: 1em;
	margin-bottom: .5em;
}

.room-type-label label {
	width: 100%;
	padding: 1em 0;
	display: block;
}

.room-type-label li {
	width: 100%;
	border: 1px solid #af9265;
	margin: .2em 0;
}

@media(max-width: 767px) {
	.room-type-label {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}

	.room-type-label label {
		padding: .3em 0;
	}

	.room-type-label li {
		width: calc(97% /3);
	}

}

/*	ルームタイプの切り替え
-----------------------------------------------*/
.room-type-contents-wrap {
	width: 70%;
}

@media(max-width: 767px) {
	.room-type-contents-wrap {
		width: 100%;
	}
}

.room-type-contents {
	display: flex;
	overflow: hidden;
}

.room-type-contents > li {
	display: inline-block;
	width: 100%;
	height: 100%;
	flex:0 0 100%;
	opacity: 0;
	height: 0;
}

.room-type > input { display: none; }

.room-type > input:nth-of-type(7):checked ~ .room-type-label li:nth-of-type(7),
.room-type > input:nth-of-type(6):checked ~ .room-type-label li:nth-of-type(6),
.room-type > input:nth-of-type(5):checked ~ .room-type-label li:nth-of-type(5),
.room-type > input:nth-of-type(4):checked ~ .room-type-label li:nth-of-type(4),
.room-type > input:nth-of-type(3):checked ~ .room-type-label li:nth-of-type(3),
.room-type > input:nth-of-type(2):checked ~ .room-type-label li:nth-of-type(2),
.room-type > input:nth-of-type(1):checked ~ .room-type-label li:nth-of-type(1) {
	background: #EAEADF;
}

.room-type > .room-type-switch:nth-of-type(1):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(1),
.room-type > .room-type-switch:nth-of-type(2):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(2),
.room-type > .room-type-switch:nth-of-type(3):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(3),
.room-type > .room-type-switch:nth-of-type(4):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(4),
.room-type > .room-type-switch:nth-of-type(5):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(5),
.room-type > .room-type-switch:nth-of-type(6):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(6),
.room-type > .room-type-switch:nth-of-type(7):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(7) {
	opacity: 1;
	height: auto;
	animation: slideshow .5s linear forwards;
	z-index: 1;
}

.room-type > .room-type-switch:nth-of-type(1):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(1) {
	margin-left: 0;
}
.room-type > .room-type-switch:nth-of-type(2):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(2) {
	margin-left: -100%;
}
.room-type > .room-type-switch:nth-of-type(3):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(3) {
	margin-left: -200%;
}
.room-type > .room-type-switch:nth-of-type(4):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(4) {
	margin-left: -300%;
}
.room-type > .room-type-switch:nth-of-type(5):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(5) {
	margin-left: -400%;
}
.room-type > .room-type-switch:nth-of-type(6):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(6) {
	margin-left: -500%;
}
.room-type > .room-type-switch:nth-of-type(7):checked ~ .room-type-label ~ div > .room-type-contents > li:nth-of-type(7) {
	margin-left: -600%;
}

/*	部屋番号
---------------------------------------*/
.room-info-num-list {
	display: flex;
	justify-content: space-between;
}

.room-info-num-list li {
	width: calc(90% / 6);
	padding: .5em;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background: #AF9265;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: relative;
}

/*	部屋番号クリックで写真と客室限定設備を切り替え
---------------------------------------------------------------*/
.room-num-tab-wrap input[type="radio"] {
  display: none;
}

.room-num-tab-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.room-num-tab-wrap:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #af9265;
  display: block;
  order: -1;
}

.room-num-tab-label {
	width: calc(100% / 6);
	color: #fff;
	background: #cccccc;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	white-space: nowrap;
	text-align: center;
	padding: 10px .5em;
	order: -1;
	position: relative;
	z-index: 1;
	cursor: pointer;
	border-right: 1px solid #fff;
}

.room-num-tab-label:nth-child(6n) {
	border-right: 0;
}

.room-num-tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ */
.room-num-tab-switch:checked + .room-num-tab-label {
  background: #af9265;
}
.room-num-tab-switch:checked+.room-num-tab-label+.room-num-tab-content {
  height: auto;
  overflow: auto;
  opacity: 1;
  transition: .3s opacity;
}

/*	お部屋写真スライダー
-----------------------------------------------*/
.room-photo input[type="radio"] {
	display: none;
}

/* メイン写真 */
.room-photo-slide {
	position: relative;
	width: 100%;
	padding-bottom: 60%;
	overflow: hidden;
}

.room-photo-slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	background: #000;
}

/* サムネイル */
.room-photo-thumbnail {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}

.room-photo-thumbnail li {
	width: calc(98% / 3);
	position: relative;
}

.room-photo-thumbnail li:after {
    content: "";
    padding-bottom: 75%;
    display: block;
}

/* サムネイルを選んだ時に矢印をつける
	（最初非表示、チェックついたら表示） */

.room-photo-thumbnail li:before {
	content: "";
	position: absolute;
	top: -1.8em;
    left: 50%;
    transform: translate(-50%);
    box-sizing: border-box;
    width: 0.5em;
    height: 1em;
    border: 1em solid transparent;
    border-bottom: 1em solid #59aeff;
    z-index: 2;
    display: none;
}

.room-photo-thumbnail img {
	position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	background: #000;
	opacity: 0.6;
}

/*ページを開いたとき＆一つ目のサムネイルをクリックしたとき*/
.room-img1:checked ~ .room-photo-slide img:nth-child(1) {
	animation: slideshow 1s linear forwards;
}

.room-img1:checked ~ .room-photo-thumbnail li:nth-child(1):before {
    display: flex;
}

.room-img1:checked ~ .room-photo-thumbnail label[for="img201-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img202-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img203-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img204-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img205-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img206-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img207-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img208-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img209-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img210-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img211-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img212-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img213-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img214-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img215-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img216-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img217-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img218-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img219-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img220-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img221-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img222-1"] img,
.room-img1:checked ~ .room-photo-thumbnail label[for="img223-1"] img {
	animation: thumb .3s linear forwards;
	border: 4px solid #59aeff;
	opacity: 1;
}

/*二つ目のサムネイルをクリックしたとき*/
.room-img2:checked ~ .room-photo-slide img:nth-child(2) {
	animation: slideshow 1s linear forwards;
}

.room-img2:checked ~ .room-photo-thumbnail li:nth-child(2):before {
    display: flex;
}

.room-img2:checked ~ .room-photo-thumbnail label[for="img201-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img202-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img203-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img204-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img205-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img206-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img207-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img208-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img209-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img210-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img211-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img212-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img213-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img214-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img215-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img216-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img217-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img218-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img219-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img220-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img221-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img222-2"] img,
.room-img2:checked ~ .room-photo-thumbnail label[for="img223-2"] img {
	animation: thumb .3s linear forwards;
	border: 4px solid #59aeff;
	opacity: 1;
}

/*三つ目のサムネイルをクリックしたとき*/
.room-img3:checked ~ .room-photo-slide img:nth-child(3) {
	animation: slideshow 1s linear forwards;
}

.room-img3:checked ~ .room-photo-thumbnail li:nth-child(3):before {
    display: flex;
}

.room-img3:checked ~ .room-photo-thumbnail label[for="img201-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img202-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img203-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img204-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img205-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img206-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img207-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img208-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img209-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img210-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img211-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img212-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img213-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img214-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img215-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img216-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img217-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img218-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img219-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img220-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img221-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img222-3"] img,
.room-img3:checked ~ .room-photo-thumbnail label[for="img223-3"] img {
	animation: thumb .3s linear forwards;
	border: 4px solid #59aeff;
	opacity: 1;
}

/* アニメーション */
@keyframes slideshow {
	0% { opacity: 0; }
	100% { opacity: 1; } 
}

@keyframes thumb {
	0% { opacity: 0.6; }
	100% { opacity: 1; } 
}

/*	料金、客室限定設備、全室共通設備の見出し
----------------------------------------------*/
.ttl-room-info {
	font-size: 1.6rem;
	letter-spacing: .2em;
	color: #fff;
	background: #af9265;
	padding: .1em ;
	text-align: center;
	margin: .5em 0;
}

/*	客室限定設備
	全室共通設備のリスト
-----------------------------------------------*/
.only-room-fac-list,
.all-room-fac-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	/*opacity: 0;
	height: 0;
	transition: .5s;
	visibility: hidden;*/
}

@media(max-width: 479px) {
	.only-room-fac-list,
	.all-room-fac-list {
		justify-content: space-between;
	}
}

.only-room-fac-list li,
.all-room-fac-list li {
	font-size: 1.2rem;
	width: calc(98% / 3);
	padding: .5em;
	margin: .4em 0;
	border: 1px solid #8fb9ce;
	text-align: center;
	margin-right: 1%;
}

.only-room-fac-list li:nth-of-type(3n) ,
.all-room-fac-list li:nth-of-type(3n) {
	margin-right: 0;
}

@media(max-width: 479px) {
	.only-room-fac-list li,
	.all-room-fac-list li {
		width: calc(98% / 2);
		padding: .2em;
		margin: .2em 0;
	}
}

.room-fac-notice{
	margin: 1em auto;
	font-size: 1.2rem;
	line-height: 1.4em;
}

/*	料金表
----------------------------------------*/
.room-price-table {
	display: flex;
	flex-wrap: wrap;
	line-height: 1.6em;
}

.room-price-table dt {
	width: 100%;
	background: #EAEADF;
	text-align: center;
	font-weight: bold;
	padding: .1em;
}

.room-price-table dd {
	width: 50%;
	border-right: 1px solid #acacac;
	text-align: center;
	margin: .5em auto;
}

.room-price-table dd .price {
	font-weight: bold;
}

.room-price-table dd:last-of-type {
	border-right: none;
}

.stay dd {
	width: calc(100% /3);
}

.extend dd {
	width: 100%;
}

@media(max-width: 479px) {
	.stay-time {
		font-size: 1.2rem;
		margin-top: .4em;
		display: inline-block;
	}
}

.room-price-table .weekday {
	color: #1a73e8;
	font-weight: bold;
}

.room-price-table .holiday {
	color: #c70000;
	font-weight: bold;
}

.room-price-table .allday {
	color: #2ca300;
	font-weight: bold;
}

.room-price-table .space:after {
	content: "　";
}

@media(max-width: 479px) {
	.room-price-table .space:after {
		content: "";
	}
}

.notice {
	background: #fff;
	margin: 2em auto;
	padding: 8px;
	border:1px solid #D5D5D5;
	font-size: 1.2rem;
	line-height: 1.4em;
}


/*	スマホの時は「スマホ充電器」も表示する
	(リストの数が中途半端だから）
-----------------------------------------------*/
@media(max-width: 767px) {
	.all-room-fac-list li.sp {
		display: none;
	}
}

@media(max-width: 479px) {
	.all-room-fac-list li.sp {
		display: block;
	}
}

.credit-card-list {
	display: flex;
	justify-content: space-around;
	margin-top: .5em;
}

.credit-card-list li {
	width: calc(96% / 6);
}

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


/*************************************
	foodmenu
**************************************/
#swiper-foodmenu .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70vh;
	margin: 10px auto;
}

@media(max-width: 767px) {
	#swiper-foodmenu .swiper-slide {
		height: auto;
	}
}

/* スマホでは白紙のスライドを非表示にする */
@media screen and (max-width: 767px) {
  .swiper-slide.blank {
    display: none !important;
  }
}

#swiper-foodmenu .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 1 / 1.4;
}

.foodmenu-pagination {
	position: static;
}

.foodmenu-pagination .swiper-pagination-bullet {
	margin: .5em;
}

/*************************************
	member
**************************************/
/*	メンバーズ特典
-------------------------------------*/
.ttl-member-rewards {
	padding-bottom: 1em;
}
.ttl-member {
	font-size: 1.6rem;
    letter-spacing: .2em;
    color: #fff;
    background: #af9265;
    padding: .1em;
    text-align: center;
    margin: .5em 0;
}

.txt-member {
	margin-bottom: 1em;
	padding: 0 .5em;
}

/*	テキスト色つける
-------------------------------------*/
.font-color01 {
	color: #d60025;
	font-weight: bold;
}

/*	ご登録方法
-------------------------------------*/
.members-card-wrap{
	display: flex;
	margin-top: 1em;
	padding: 0 .5em;
}

@media(max-width: 767px){
	.members-card-wrap{
		flex-direction: column;
	}
}

/*	メンバーズカードの画像
-------------------------------------*/
.img-members-card {
	width: 25%;
	height: auto;
	margin: 0 auto;
}

@media(max-width: 479px){
	.img-members-card {
		width: 50%;
	}
}

/*	登録方法の説明
-------------------------------------*/
.members-card-regist-wrap {
	width: 75%;
	padding-left: 1em;
}

@media(max-width: 767px){
	.members-card-regist-wrap {
		width: 100%;
		padding: 1em 0 0;
	}
}

.members-card {
	padding-left: 1.4em;
}

.members-card li {
	list-style-type: decimal;
	line-height: 1.6em;
}

.members-card-wrap p {
	margin: 1em auto;
}

/*	ポイント特典
-------------------------------------------*/
.point-program-wrap {
	border: 1px solid #a88a5e;
	padding: 2em 1em;
	margin: 3em auto 2em;
}

.ttl-point-program {
	margin: .5em auto;
	font-weight: normal;
	text-align: center;
	font-size: 1.6rem;
	margin-top: -2.5em;
}

.ttl-point-program span { 
	border-bottom: double 4px #a88a5e;
	display: inline-block;
	background: #fff;
	padding: 0 .5em;
}

.txt-rankup-point {
	color: #a88a5e;
	font-weight: bold;
	margin: 1em 0 .5em;
	font-size: 1.6rem;
	line-height: 1.4em;
}

.rankup-point-table {
	width: 100%;
	margin: 1em auto 2em;
	border-bottom: 1px solid #d5d5d5;
}

.rankup-point-table .num-of-use,
.rankup-point-table .ranking {
	width: 30%;
}
.rankup-point-table .rankup-point {
	width: 40%;
}

.rankup-point-table th {
	background: #EAEADF;
}

.rankup-point-table th,
.rankup-point-table td {
	padding: .5em;
	border-top: 1px solid #d5d5d5;
	text-align: left;
}

.num-of-point {
	color: #d60025;
	font-weight: bold;
}

/*	ボーナスポイント
-------------------------------------------*/
.bonus-point{
  counter-reset:li;
}

.bonus-point li{
  position: relative;
  padding: 0 0 1em;
  margin-top: 0.8em;
  color: #333;
}

.bonus-point li:before{
	counter-increment: li;
	content: counter(li);
	position: absolute;    
	z-index: -1;
	background: #ffbdd0;
	height: 1.5em;
	width: 1.5em;
	border: .1em solid rgba(0,0,0,.05);
	text-align: center;
	font: italic bold 1.6rem Georgia, Serif;
	line-height: 1.6em;
	color: #444;
	border-radius: 15px;
}

.ttl-bonus-point{
    font-size: 1.6rem;
	text-indent: 2em;
	padding-top: .3em;
}
 
.bonus-point p{
	margin-top: 1em;
	padding: 0 .5em;
}
 
.maker-line01 {
    background: linear-gradient(transparent 75%, #ffc0cb 75%);
}

.point-note {
	font-size: 1.2rem;
}

.img-point-present {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

.img-point-present li {
	width: calc(98% / 3);
	display: flex;
	flex-direction: column;
	border: 1px solid #d5d5d5;
}

.point-rate {
	width: 100%;
	display: inline-block;
	background: #e6f2f8;
	text-align: center;
	padding: .2em 0;
}

.img-point-present li p {
	text-align: center;
	margin-top: .5em;
}

.img-present {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	height: 100%;
}
.img-point-present li img {
	width: 60%;
	height: auto;
	object-fit: cover;
	margin-top: .2em;
}

@media(max-width: 479px) {
	.img-point-present li img {
		width: 90%;
	}
}

/*	メンバー特典の枠
-------------------------------------*/
.member-rewards-wrap {
	width: 100%;
	margin: .5em auto;
	display: inline-flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


/*	画像
-------------------------------------*/
.img-rewards {
	width: 48%;
	height: auto;
	position: relative;
}
.img-rewards:after {
	content: "";
	padding-bottom: 60%;
	background: #333;
	display: block;
}

@media(max-width: 479px) {
	.img-rewards{
		width: 100%;
		height: 100%;
	}
}

.img-rewards img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-rewards-note {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	font-size: 1.2rem;
	margin-right: .5em;
}

/*	特典の見出しと説明文の枠
-------------------------------------*/
.rewards-wrap {
	width: 50%;
	margin: 1em auto;
}

.rewards-wrap p {
	padding: 0 .5em;
}

@media(max-width: 479px) {
	.rewards-wrap {
		width: 100%;
	}	
}

/*	特典01～02の枠
-------------------------------------*/
.ttl-rewards {
	text-align: right;
}

/*	特典01～02 大きい番号
-------------------------------------*/
.rewards-num {
	color: #f0eae4;
	font-size: 10rem;
	line-height: 0.8;
}

/*	特典01～02 大きい番号
-------------------------------------*/
.subttl-rewards {
	color: #a88a5e;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.2;
    display: block;
    text-shadow: 2px 2px 0 #fff;
	margin-top: -2em;
}

/*	パソコンの時だけ「サービス」つける
-------------------------------------------*/
.ttl-rewards span.pc {
	display: inline;
}

@media(max-width: 767px) {

	.ttl-rewards span.pc {
		display: none;
	}
}

/*	特典の説明文
-------------------------------------------*/
.rewards-wrap p {
	margin: 1em auto 0;
}


/*	特典左寄せ
-------------------------------------------*/
.ttl-rewards-left {
	text-align: left;
}

/*	画像を左にする
-------------------------------------------*/
.rewards-left {
	order: 1;
}

/*	説明文を右にする
-------------------------------------------*/
.rewards-right{
	order: 2;
}

/*	スマホの時は元に戻す
-------------------------------------------*/
@media(max-width: 479px) {
	.rewards-left {
		order: 2;
	}

	.rewards-right{
		order: 1;
	}
}



.member-rewards-list {
	margin-top: 2em;
	display: block;
}
.member-rewards-list p{
	padding: 0 .5em;
}

.ttl-rewards-min {
	margin: 1em auto .5em;
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1.8em;
}

.ttl-rewards-min em{
	color: #fff;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: bold;
	letter-spacing: .1em;
	background: #a88a5e;
	padding: .2em .5em;
	margin-right: .5em;
}

/* 404ページ
---------------------------------------------------*/
.return404-top {text-decoration: underline;}