@charset "utf-8";

/*####################################################


PC向け：全体のレイアウト設定
max-width: 767px
width: 100%;
max-width:1120px

####################################################*/


/*既存内容の上書き*/

.l-main {
	padding-top: 0px;
}

@media print, screen and (min-width: 1220px){
	.over_page {
		margin-left: calc((100vw - 1120px) / -2);
		margin-right: calc((100vw - 1120px) / -2);
		background-color:#f4f2ec;
	}

	.over_page article {
		width: 1118px;
		margin: auto;
		padding: 50px 40px 120px;
	}
}

@media print, screen and (max-width: 1220px){
	.over_page {
		margin-left: 0;
		margin-right: 0;
		background-color:#f4f2ec;
	}

	.over_page article {
		width: 100%;
		margin: auto;
		padding: 50px 0px 120px;
	}

	.l-main {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	}
}





/*=============================================

共通素材

=============================================*/

.small{font-size: 70%;}
strong{font-weight: bold;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

/*ボックスリンク*/
.boxlink {
	display: inline-block;
	margin: 0;
	padding: 30px 80px 30px 80px;
	background-color: #397a2e;
	background: linear-gradient(180deg, #65cd54 0%, #397a2e 100%);
	border: 4px solid #ffffff;
	color: #ffffff;
	width: 70%;
	font-size: 150%;
	line-height: 200%;
	font-weight: bold !important;
	border-radius: 20px;
	box-shadow: 0 1px 6px 0 #a2a5a0;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

a.boxlink:hover {
	transform: translate(0px, -10px);
}

@media print, screen and (max-width: 1220px){
	.boxlink {
		padding: 25px 10px;
		width: 90%;
		font-size: 140%;
		line-height: 180%;
	}
}



.pagelink {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 10px 40px 10px 20px;
	background-color: #353e3b;
	color: #ffffff;
	font-size: 100%;
	font-weight: bold !important;
	box-shadow: 0 1px 6px 0 #a2a5a0;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

.pagelink::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 3px solid #ffffff;
	border-right: 3px solid #ffffff;
	transform: rotate(45deg);
}

a.pagelink:hover {
	background-color: #606765;
}

.contents_box {
	margin-bottom: 150px;
}



/*=============================================

KV

=============================================*/


.kv {
	position: relative;
	height: 580px;
	padding-top: 80px;
	background: url(../img/kv_summer.jpg) top center repeat-x;
	background-size: auto 580px;
	-webkit-animation: animname_fv_bg linear 100s infinite;
	animation: animname_fv_bg linear 100s infinite;
}

@keyframes animname_fv_bg {
	0% { background-position: 0 0; }
	100% { background-position: -2025px 0; }
}

.kv::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: url(../img/kv_mask_summer.png) bottom center repeat-x;
	background-size: 1000px;
}

.kv h1 {
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 370px;
	height: 0 !important;
	line-height: 250%;
	width: 370px;
	background: url(../img/rogo_summer.svg) center center no-repeat;
	background-size: 100%;
}

.kv_text {
	position: relative;
	z-index: 1;
	height: 330px;
	margin-top: 0;
	padding-top: 50px;
}

.kv_text h2 {
	display: block;
	overflow: hidden;
	margin: 0px auto 0 auto;
	padding-top: 220px;
	height: 0 !important;
	line-height: 250%;
	width: 500px;
	background: url(../img/kv_text_autumn.svg) center center no-repeat;
	background-size: 100%;
}

.kv_text::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -130px;
	left: 50%;
	margin: 0px 0px 0px 300px;
	width: 530px;
	height: 300px;
	background: url(../img/kv_img2.svg) center center no-repeat;
	background-size: 100%;
}

.kv_text::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 50%;
	margin: 0px 0px 0px -550px;
	width: 300px;
	height: 270px;
	background: url(../img/kv_img1.svg) center center no-repeat;
	background-size: 100%;
}



/*=============================================

TOPICS

=============================================*/

/*全体*/

.topics {
	position: relative;
	padding-top: 100px;
	padding-bottom: 0px;
}

.contents_box.topics {
	margin-bottom: 30px;
}

.contents_box.topics article:first-child {
	padding-bottom: 0px;
}

.topics::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: url(../img/w_mask.png) top center repeat-x;
	background-size: 1000px;
}

.topics::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: url(../img/kv_mask.png) bottom center repeat-x;
	background-size: 1000px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*タイトルとテキスト*/

.topics .title {
	display: block;
	overflow: hidden;
	margin: 0px auto 0 auto;
	padding-top: 80px;
	height: 0 !important;
	line-height: 250%;
	width: 600px;
	background: url(../img/topics_title.svg) top center no-repeat;
	background-size: 100%;
}

.topics .text {
	text-align: center;
	font-weight: bold;
	margin: 0px 0px 50px 0px;
	padding: 0px 30px 0px 30px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ハッシュタグのセレクトタブ*/

.topics #hashtag {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 45px;
	width: 100%;
	overflow: visible;
}

.topics #hashtag::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 9px;
	right: 0;
	width: 100%;
	height: 1px;
	background-color: #00633d;
}

.topics #hashtag .inner {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/*width: 100%;*/
	height: 40px;
	overflow: hidden;
}

.hashtag_left {
	z-index: 1;
	position: absolute;
	top: 0px;
	left: -20px;
	display: block;
	overflow: hidden;
	margin: 0px;
	padding-top: 35px;
	height: 0 !important;
	line-height: 250%;
	width: 40px;
	border-radius: 50%;
	border: 2px solid #00633d;
	background-color: #f4f2ec;
}

.hashtag_left.this::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #00633d;
	border-left: 2px solid #00633d;
	transform: rotate(-45deg);
}

.hashtag_right {
	z-index: 1;
	position: absolute;
	top: 0px;
	right: -20px;
	display: block;
	overflow: hidden;
	margin: 0px;
	padding-top: 35px;
	height: 0 !important;
	line-height: 250%;
	width: 40px;
	border-radius: 50%;
	border: 2px solid #00633d;
	background-color: #f4f2ec;
}

.hashtag_right.this::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #00633d;
	border-right: 2px solid #00633d;
	transform: rotate(45deg);
}

.hashtag_left.off, .hashtag_right.off {
	border: 2px solid #bfd1ce;
}

.hashtag_left.off::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	left: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #bfd1ce;
	border-left: 2px solid #bfd1ce;
	transform: rotate(-45deg);
}

.hashtag_right.off::after {
	content: "";
	display: block;
	position: absolute;
	top: 10px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #bfd1ce;
	border-right: 2px solid #bfd1ce;
	transform: rotate(45deg);
}




/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ハッシュタグのリストのul設定*/

.topics #hashtag ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	position: absolute;
	top: 0;
	left: 30px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 140%;
}

.topics #hashtag li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	white-space: nowrap;
}

.topics #hashtag li a {
	z-index: 1;
	position: relative;
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 10px 20px;
	color: #00633d;
	border-left: 1px solid #00633d;
	border-top: transparent 1px solid;
}

.topics #hashtag li:last-of-type a {
	border-right: 1px solid #00633d;
}

.topics #hashtag li a.link {
	position: relative;
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 10px 20px;
	border-left: 1px solid #00633d;
	border-top: 1px solid #00633d;
}

.topics #hashtag li a.link::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -10px;
	left: -1px;
	width: 100%;
	height: 10px;
	border-left: 1px solid #00633d;
	border-right: 1px solid #00633d;
	background-color: #f4f2ec;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*トピックスのサムネ*/

.topics_thumb_list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 330px;
	opacity: 0;
}

.topics_thumb_open {
	-webkit-animation: topics_thumb_open_animname forwards .5s;
	animation: topics_thumb_open_animname forwards .5s;
}

@keyframes topics_thumb_open_animname {
	100% { opacity: 1; }
}

.topics_thumb_list li {
	margin-right: 5px;
	margin-bottom: 5px;
	-ms-flex-preferred-size: calc((100% - (5px * 2)) / 3);
	flex-basis: calc((100% - (5px * 2)) / 3);
	background-color: #949494;
	height: 300px;
}

.topics_thumb_list li:nth-of-type(3n) {
	margin-right: 0;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*トピックスサムネの中身要素*/

.topics_thumb_box {
	position: relative;
	z-index: 0;
	height: 100%;
}

.topics_thumb_box::after {
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: rgb(253, 253, 253);
	background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.7) 100%);
}

.topics_thumb_box a {
	display: block;
	height: 100%;
}

.topics_thumb_box a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	transform: rotate(45deg);
}

.topics_thumb_box a:hover {
	background: rgba(255, 255, 255, 0.5);
}

.topics_thumb_box h3 {
	display: block;
	position: absolute;
	bottom: 0;
	color: #ffffff;
	text-align: left;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	width: 100%;
	font-size: 180%;
	line-height: 160%;
}

.topics_thumb_box i {
	display: none;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ホテルリンク*/

.hotel_link {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*送迎*/

.over_page article.transfer {
	width: 900px;
}

.transfer h3 {
	position: relative;
}

.transfer h3 span {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 90px;
	height: 0 !important;
	line-height: 250%;
	width: 600px;
	background: url(../img/topics_yoyaku_title.svg) center center no-repeat;
	background-size: 100%;
}

.transfer h3::after {
	content: "";
	display: block;
	position: absolute;
	top: -10px;
	left: 10px;
	width: 80px;
	height: 80px;
	background: url(../img/topics_yoyaku_image.svg) center center no-repeat;
	background-size: 100%;
}

.transfer table {
	border-collapse: collapse;
	margin: 20px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 140%;
}

.transfer td, .transfer th {
	margin: 0;
	padding: 10px 10px;
	border: 1px solid #828282;
	background-color: #ffffff;
}

.transfer th {
	padding: 10px 15px;
	text-align: center;
	font-weight: bold;
	background-color: #f3f6e6;
}

.transfer td {
	text-align: center;
}



/*=============================================

ホテル紹介

=============================================*/

.hotel_info {
	position: relative;
}

.hotel_info h1 {
	display: block;
	overflow: hidden;
	margin: 0px auto;
	padding-top: 90px;
	height: 0 !important;
	line-height: 250%;
	width: 700px;
	background: url(../img/hotel_info_summer.svg) top center no-repeat;
	background-size: 80%;
	background-color: #ffffff;
}

.hotel_info h2 {
	position: relative;
	text-align: center;
	font-weight: bold;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	font-size: 280%;
	line-height: 160%;
	color: #00633d;
}

.hotel_info h2.title1 {
	display: block;
	overflow: hidden;
	margin: 0px auto;
	padding-top: 40px;
	height: 0 !important;
	line-height: 250%;
	width: 270px;
	background: url(../img/hotel_info_title1.svg) top center no-repeat;
	background-size: 100%;
}

.hotel_info h2.title2{
	display: block;
	overflow: hidden;
	margin: 0px auto;
	padding-top: 40px;
	height: 0 !important;
	line-height: 250%;
	width: 300px;
	background: url(../img/hotel_info_title2.svg) top center no-repeat;
	background-size: 100%;
}

.hotel_info h3 {
	position: relative;
	font-weight: bold;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 200%;
	line-height: 160%;
}

.hotel_info .text_info {
	position: relative;
	text-align: center;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	font-size: 150%;
	font-weight: bold;
}

.hotel_info .text strong{font-size: 120%;}

.photo_flame {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 4px solid #ffffff;
	box-shadow: 0px 0px 4px 0px #a2a2a2;
}

.photo_flame.mgn {
	margin: 0px 0px 10px 0px;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*そのほかのオススメメニュー*/

.other_menu {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.other_menu ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
}

.other_menu li {
	margin-right: 5px;
	-ms-flex-preferred-size: calc((100% - (5px * 4)) / 5);
	flex-basis: calc((100% - (5px * 4)) / 5);
}

.other_menu li:nth-of-type(5n) {
	margin-right: 0;
}

.hotel_detail_link {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: right;
}




/*=============================================

トピックス　詳細

=============================================*/

/*背景レイヤー*/
#topics_detail_bg {
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.8;
}

#topics_detail {
	position: fixed;
	z-index: 200;
	left: 50%;
	top: 100px;
	margin: 0px 0px 0px -450px;
	width: 900px;
	height: calc(100% - 120px);
	background-color: #ffffff;
	-webkit-animation: topics_detail_animname forwards .5s;
	animation: topics_detail_animname forwards .5s;
}

@keyframes topics_detail_animname {
	100% { transform: translate(0px, -40px); }
}


#topics_detail::after {
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	left: 0;
	width: 100%;
	height: 15px;
	background: url(../img/topics_detail_bg_note.png) center center repeat-x;
	background-size: 15px auto;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*閉じるボタン*/

#topics_detail .close {
	position: fixed;
	z-index: 200;
	left: 50%;
	bottom: 25px;
	display: block;
	overflow: hidden;
	margin: 0px 0px 0px 420px;
	padding-top: 47px;
	height: 0 !important;
	line-height: 250%;
	width: 50px;
	border-radius: 50%;
	border: 2px solid #00633d;
	background-color: #ffffff;
}

#topics_detail .close::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	left: 20%;
	width: 60%;
	height: 4px;
	background-color: #00633d;
	transform: rotate(45deg);
}

#topics_detail .close::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	left: 20%;
	width: 60%;
	height: 4px;
	background-color:#00633d;
	transform: rotate(-45deg);
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*中身要素*/

#topics_detail .inner {
	position: relative;
	margin: 20px;
	padding: 0px 0px 0px 0px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	overflow: auto;
}

#topics_detail .inner .c-grid {
	margin: 0px auto;
	width: 100%;
}

#topics_detail .inner h2 {
	margin: 0px 0px 20px 0px;
	padding: 5px 10px;
	background-color: #e8f1ee;
	font-size: 200%;
	line-height: 150%;
	font-weight: bold;
}

#topics_detail .inner .feature {
	margin: 0px 0px 20px 0px;
	padding: 4px 0px;
}

.line_space {
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 0px;
	width: 100%;
	background: url(../img/line_space.png) center center repeat-x;
	background-size: 7px;
}

.sub_photo {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0px 15px 0px 15px;
	padding: 0px 0px 0px 0px;
}

.sub_photo li {
	margin-right: 5px;
	margin-bottom: 5px;
	-ms-flex-preferred-size: calc((100% - (5px * 4)) / 5);
	flex-basis: calc((100% - (5px * 4)) / 5);
}

.sub_photo li:nth-of-type(5n) {
	margin-right: 0 !important;
}

.sub_photo img {
	height: 150px;
	width: 100%;
	object-fit: cover;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*車と送迎アイコン*/

.feature{}

#topics_detail .feature .car {
	margin: 0px 0px 0px 20px;
	padding: 10px 20px 10px 30px;
	background: url(../img/topics_detail_image_car.svg) center left no-repeat;
	background-size: 25px;
	color: #00633d;
}

#topics_detail .feature .transfer {
	margin: 0px 0px 0px 0px;
	padding: 10px 30px;
	background: url(../img/topics_detail_image_transfer.svg) center center no-repeat;
	background-size: 70px;
}



/*=============================================

スマホ調整

=============================================*/

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

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*kv*/

	.kv {
		position: relative;
		height: 400px;
		padding-top: 40px;
		background: url(../img/kv_summer.jpg) top center repeat-x;
		background-size: auto 400px;
		-webkit-animation: animname_fv_bg_sp linear 100s infinite;
		animation: animname_fv_bg_sp linear 100s infinite;
	}

	@keyframes animname_fv_bg_sp {
		0% { background-position: 0 0; }
		100% { background-position: -2165px 0; }
	}

	.kv::after {
		height: 40px;
		background-size: 500px;
	}

	.kv h1 {
		padding-top: 230px;
		width: 240px;
	}

	.kv_text {
		height: auto;
		padding-top: 30px;
	}

	.kv_text h2 {
		padding-top: 40%;
		width: 85%;
	}

	.kv_text::before {
		display: none;
	}

	.kv_text::after {
		display: none;
	}


	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
	/*TOPICS*/

	.topics {
		padding-top: 40px;
	}

	.topics::after {
		height: 40px;
		background-size: 500px;
	}

	.topics::before {
		height: 40px;
		background-size: 500px;
	}

	.topics .title {
		padding-top: 25%;
		width: 70%;
		background: url(../img/topics_title_sp.svg) top center no-repeat;
		background-size: 100%;
	}

	.topics #hashtag {
		height: 35px;
	}
	.topics #hashtag .inner {
		height: 35px;
	}

	.hashtag_left {
		top: 10px;
		left: 0px;
		transform: scale(.8);
	}
	.hashtag_right {
		top: 10px;
		right: 0px;
		transform: scale(.8);
	}

	/*ハッシュタグのリストのul設定*/
	.topics #hashtag ul {
		font-size: 120%;
	}

	.topics #hashtag li a,
	.topics #hashtag li a.link {
		padding: 6px 10px 6px 10px;
	}

	/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

	.topics_thumb_list {
		margin: 0px 10px 0px 10px;
		padding: 0px 0px 0px 0px;
	}

	.topics_thumb_list li {
		-ms-flex-preferred-size: calc((100% - (5px * 1)) / 2);
		flex-basis: calc((100% - (5px * 1)) / 2);
		height: 150px;
	}

	.topics_thumb_list1 li:nth-of-type(2n) {
		margin-right: 0;
	}

	.topics_thumb_list li:nth-of-type(1) {
		margin-right: 0;
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		height: 200px;
	}

	.topics_thumb_list li:nth-of-type(4n) {
		margin-right: 0;
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		height: 200px;
	}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

	.topics_thumb_box a::after {
		display: none;
	}

	.topics_thumb_box h3 {
		font-size: 150%;
		line-height: 140%;
	}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.over_page article.transfer {
	width: 100%;
}

	.transfer h3 span {
		padding-top: 24%;
		width: 80%;
		background: url(../img/topics_yoyaku_title_sp.svg) center center no-repeat;
		background-size: 100%;
	}

	.transfer h3::after {
		display: none;
	}

	.transfer .table_box {
		margin: 0px 10px;
		border-bottom:1px solid #858a8e;
		overflow-x: scroll;
	}

	.transfer td, .transfer th {
		white-space: nowrap;
	}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.hotel_info h1 {
	padding-top: 15%;
	width: 90%;
	background: url(../img/hotel_info.svg) top center no-repeat;
	background-size: 120%;
	background-color: #ffffff;
}

.hotel_info article {
	width:auto;
	margin: 0px 10px;
}

.hotel_info h2.title1,.hotel_info h2.title2 {
	padding-top: 40px;
	width: 230px;
}

.hotel_info .text_info {

}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*詳細*/

#topics_detail {
	position: fixed;
	z-index: 200;
	left: 0;
	top: 100px;
	margin: 0px;
	width: 100%;
}

#topics_detail .close {
	right: 0px;
	left:auto;
	bottom: -15px;
	margin: 0px 0px 0px 0px;
	transform: scale(.8);
}

#topics_detail .inner {
	margin: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
}

.sub_photo li {
	margin-right: 5px;
	margin-bottom: 5px;
	-ms-flex-preferred-size: calc((100% - (5px * 2)) / 3);
	flex-basis: calc((100% - (5px * 2)) / 3);
}

.sub_photo li:nth-of-type(5n) {
	margin-right: 5px;
}

.sub_photo li:nth-of-type(3n) {
	margin-right: 0 !important;
}


}/*スマホ向け設定　ここまで*/



/**/