@charset "utf-8";

img,
a img,
a:hover img {
	transition: .3s;
	vertical-align: bottom;
}

@media screen and (min-width:736px) {

	.secWrap {
		margin: 0 auto;
		position: relative;
		max-width: 1100px;
	}

	a {
		opacity: 1;
		transition: .3s;
	}

	a:hover {
		opacity: 0.5;
		transition: .3s;
	}

	._sp {
		display: none !important;
	}

	.secWrap img {
		max-width: 1100px;
		width: 100%;
		display: inline-block;
	}

}

@media screen and (max-width: 736px) {

	._pc {
		display: none !important;
	}

	.secWrap img {
		width: 100%;
		display: block;
	}

	.secWrap {
		margin: 0 1.5em;
		position: relative;
	}

}


/*
 header
///////////////////////////////////////// */

header {
	background: #fff;
}

header {
	padding: 1em;
}

header h1 {
	max-width: 1100px;
	margin: 0 auto;
}

@media screen and (min-width:736px) {

	header h1 a img {
		position: absolute;
	}

}

@media screen and (max-width:736px) {

	#header h1.logo, #header p.logo {
		margin-left: 0;
	}

	#header h1.logo a:before {
		position: absolute;
	}

	header h1 a:before {
		margin: 0 0 0 0;
		content: " ";
		display: inline-block;
		width: 2.5em;
		height: 1.5em;
		background: url(/msppoint/shared/img/common/h1_icon.png) no-repeat;
		background-size: auto;
		background-size: cover;
		vertical-align: middle;
		position: absolute;
	}

	#header h1 a img {
		left: 2.5em;
	}

	header h1 a img {
		width: 60%;
		margin-left: 3em;
	}

	.read02 {
		background: #6e5530;
		text-align: center;
		padding: 0.5em 0;
	}

	.read02 img {
		width: 78%;
		margin: 0 auto;
		display: block;
	}

}

@media screen and (min-width:736px) {

	.footer .pagetop {
		margin-top: 0;
	}

}

@media screen and (max-width:736px) {

	.footer .pagetop {
		margin-top: 0;
	}

	#sec04 {
		font-size: 2.5vw;
	}

	.footer p {
		margin-bottom: 0;
	}

	.footer .footer__body ul li {
		margin-bottom: 0;
	}

}


/*
head
///////////////////////////////////////// */

#head {
	background: #0093da;
}

@media screen and (min-width:736px) {

	#head {
		padding: 2vw 0;
	}

}

@media screen and (max-width:736px) {

	#head .secWrap {
		margin: 0;
	}

}



/*
 sec01
///////////////////////////////////////// */

.sec01Wrap {
	position: relative;
	padding: 0.25em;
}

.sec01Wrap:before,
.sec01Wrap:after,
.sec01Wrap div:before,
.sec01Wrap div:after {
	background: url(/msppoint/clever/service/hotel/shared/image/202604/sec01_bg01.png) no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1.0;
	position: absolute;
}

.sec01Wrap:before {
	left: 0;
	top: 0;
}

.sec01Wrap:after {
	right: 0;
	top: 0;
}

.sec01Wrap div:before {
	left: 0;
	bottom: 0;
}

.sec01Wrap div:after {
	right: 0;
	bottom: 0;
}

@media screen and (min-width:736px) {

	.sec01_read {
		margin: 4vw auto 2vw;
		width: 80%;
	}

	.sec01Wrap div {
		padding: 0 1.5vw;
		border: 4px solid #0093da;
	}

	.sec01Wrap div ul.hotel_list {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec01_bg02.png) center no-repeat;
		background-size: contain;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 1em 2% 0;
	}

	.sec01Wrap div ul.hotel_list > li {
		width: 46.5%;
		margin: 2em 0 0;
	}

	.sec01Wrap div ul.hotel_list li dl {
		display: flex;
	}

	.sec01Wrap div ul.hotel_list li dl dt {
		width: 55%;
	}

	.sec01Wrap div ul.hotel_list li dl dd {
		width: 45%;
		padding-left: 1em;
		box-sizing: border-box;
		line-height: 1.5;
	}

	.sec01Wrap div ul.hotel_list li dl dd strong {
		font-size: 120%;
		font-weight: bold;
		display: block;
		margin: 0.25em 0;
	}

	.sec01Wrap div ul.hotel_list li dl dd em {
		color: #0093da;
		font-style: normal;
		display: block;
		margin: 0.25em 0;
		font-size: 0.8rem;
		font-weight: bold;
	}

	.sec01Wrap div ul.hotel_list li dl dd span {
		font-size: 0.8rem;
		display: block;
		font-size: 85%;
		margin: 0.25em 0;
	}

	.sec01Wrap div ul.link_btn {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: 1.5vw auto;
	}

	.sec01Wrap div ul.link_btn li {
		width: 45%;
	}

	.sec01Wrap div ul.link_btn li:nth-child(1) {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec01_btn01_o.png) no-repeat;
		background-size: contain;
	}

	.sec01Wrap div ul.link_btn li:nth-child(2) {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec01_btn02_o.png) no-repeat;
		background-size: contain;
	}

	.sec01Wrap div ul.link_btn li a img {
		opacity: 1;
		transition: .3s;
	}

	.sec01Wrap div ul.link_btn li a:hover img {
		opacity: 0;
	}

	.sec01_list02 {
		font-size: 80%;
		margin: 1.5vw auto;
		width: 95%;
	}

	.sec01_list02 {
		padding-left: 1em;
		text-indent: -1em;
	}

	.sec01_list03 {
		margin: 1.5vw auto 2.5em;
		width: 96%;
	}

}

@media screen and (max-width:736px) {

	.sec01_read {
		margin: 2em auto 1em;
	}

	.sec01Wrap:before,
	.sec01Wrap:after,
	.sec01Wrap div:before,
	.sec01Wrap div:after {
		width: 0.5em;
		height: 0.5em;
	}

	.sec01Wrap div {
		border: 2px solid #0093da;
		padding: 0 1.5vw;
	}

	.sec01Wrap div ul.hotel_list {
		margin: 0 1em;
	}

	.sec01Wrap div ul.hotel_list > li {
		border-bottom: 1px solid #0093da;
		margin: 1.5em 0 0;
	}

	.sec01Wrap div ul.hotel_list > li:last-child {
		border-bottom: 1px solid #fff;
	}

	.sec01Wrap div ul.hotel_list li dl dd {
		box-sizing: border-box;
		line-height: 1.5;
	}

	.sec01Wrap div ul.hotel_list li dl dd strong {
		font-size: 120%;
		font-weight: bold;
		display: block;
		margin: 0.25em 0;
	}

	.sec01Wrap div ul.hotel_list li dl dd em {
		color: #0093da;;
		font-style: normal;
		display: block;
		margin: 0.25em 0;
		font-size: 0.75rem;
		font-weight: bold;
	}

	.sec01Wrap div ul.hotel_list li dl dd span {
		font-size: 0.8rem;
		display: block;
		font-size: 0.65rem;
		margin: 0.25em 0;
	}

	.sec01Wrap div ul.link_btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 1.25em auto;
	}

	.sec01Wrap div ul.link_btn li {
		width: 45%;
	}

	.sec01_list02 {
		font-size: 80%;
		margin: 1em;
	}

	.sec01_list02 {
		padding-left: 1em;
		text-indent: -1em;
	}

	.sec01_list03 {
		margin: 1em auto;
		width: 96%;
	}

	.sec01_list03 {
	}

	.sec01_list03 dt {
		position: relative;
		text-align: center;
		padding: 0.25vw 0 0.5vw;
		color: #fff;
		margin: 0;
		background: #0093da;;
		z-index: 2;
	}

	.sec01_list03 dt:after {
		z-index: 0;
		content: "";
		width: 0.75em;
		height: 0.75em;
		line-height: 1.0;
		display: inline-block;
		background: #0093da;;
		position: absolute;
		left: 37%;
		transform: rotate( 45deg ) translate(175%, -200%);
		bottom: -0.5em;
		z-index: 2;
	}

	.sec01_list03 dd {
		background: #ebf0f7;
		padding: 0.75em 0.5em 0.5em;
		font-size: 75%;
	}

}


/*
 sec02
///////////////////////////////////////// */

#sec02 {
	margin: 4vw 0
}

#sec02 .secWrap {
	overflow: hidden;
}

#sec02 .secWrap .sec02Wrap .sec02_bg01 {
	background: url(/msppoint/clever/service/hotel/shared/image/202604/sec02_bg01.png);
		overflow: hidden;
}

#sec02 .sec02_read06 {
	text-align: center;
}

@media screen and (min-width:736px) {

	#sec02 .secWrap h2 {
		width: 40%;
		margin: 3.5vw auto;
	}

	#sec02 .secWrap .sec02Wrap {
		margin: 0 auto;
		width: 91%;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_read01 {
		padding: 3vw 3vw 0;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read02 {
		text-align: center;
		margin: 1.5vw;
		font-size: 80%;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read02 li {
		display: inline-block;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read03 {
		position: relative;
		width: 95%;
		margin: 0 auto;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read03 dd {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec02_btn02_pc_o.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		right: 2%;
		width: 16%;
		transform: translateY(-50%);
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec02_bg03.png) bottom no-repeat;
		background-size: contain;
		margin: 2vw auto 0;
		width: 77%;
		overflow: hidden;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 h3 {
		margin: 1vw auto 0.5vw;
		width: 40%;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_btn01 {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec02_btn01_o.png) center no-repeat;
		background-size: contain;
		display: block;
		width: 30%;
		margin: 2vw auto 3vw;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 .sec02_btn03 {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec02_btn03_pc_o.png) no-repeat;
		background-size: contain;
		width: 40%;
		margin: 0 auto 1.5vw;
	}

	#sec02 .secWrap .sec02_map {
		margin: 4vw auto 2vw;
		width: 91%;
		position: relative;
	}

	#sec02 .secWrap .sec02_map .sec02_btn04 {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/sec03_btn01_pc_o.png) no-repeat;
		background-size: contain;
		position: absolute;
		bottom: 2%;
		width: 15%;
		right: 14%;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_btn01 a img,
	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_btn01 a,
	#sec02 .secWrap .sec02Wrap .sec02_btn02 a img,
	#sec02 .secWrap .sec02Wrap .sec02_btn02 a,
	#sec02 .secWrap .sec02Wrap p.sec02_btn03 a img,
	#sec02 .secWrap .sec02Wrap p.sec02_btn03 a,
	#sec02 .secWrap .sec02_map .sec02_btn04 a img,
	#sec02 .secWrap .sec02_map .sec02_btn04 a {
		opacity: 1;
		transition: .3s;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_btn01 a:hover img,
	#sec02 .secWrap .sec02Wrap .sec02_btn02 a:hover img,
	#sec02 .secWrap .sec02Wrap .sec02_btn03 a:hover img,
	#sec02 .secWrap .sec02_map .sec02_btn04 a:hover img {
		opacity: 0;
	}

	#sec02 .secWrap .sec02_list01 {
		display: flex;
		justify-content: space-between;
		margin: 2vw auto 1vw;
		width: 91%;
	}

	#sec02 .secWrap .sec02_list01 li {
		width: 32%;
	}

	#sec02 .secWrap .sec02_list01 li dl {
	}

	#sec02 .secWrap .sec02_list01 li dl dt {
		margin: 0 0 0.5vw;
	}

	#sec02 .secWrap .sec02_list01 li dl dd strong {
		font-weight: bold;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block {
		position: relative;
		border: 2px solid #0093da;;
		background: #fff;
		margin: 1vw 0 0;
		font-weight: bold;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dt {
		text-align: center;
		padding: 0.25vw 0 0.5vw;
		color: #fff;
		margin: 0;
		background: #0093da;;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dt:before {
		content: "";
		width: 1em;
		height: 1em;
		line-height: 1.0;
		display: inline-block;
		background: #0093da;;
		position: absolute;
		left: 34%;
		transform: rotate( 45deg ) translate(175%, -200%);
		top: -0.3em;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dd {
		background: #fff;
		padding: 0.5em;
		font-size: 75%;
	}

	#sec02 .secWrap .sec02_read05 {
		text-align: center;
		padding: 1.5vw;
		font-size: 70%;
	}

	#sec02 .#0093da; {
		text-align: center;
		margin: 3vw 0;
		font-size: 80%;
	}

}

@media screen and (max-width:736px) {

	#sec02 .secWrap h2 {
		width: 60%;
		margin: 2em auto 1em;
	}

	#sec02 .secWrap .sec02Wrap {
		border: 2px solid #ec6d65;
		margin: 0 auto;
		width: 91%;
		background: #fff;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 {
		margin: 0.5em;
		overflow: hidden;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_read01 {
		padding: 2em 1em;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read02 {
		margin: 1em;
		text-align: left;
		font-size: 75%;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read02 li {
		padding-left: 1em;
		text-indent: -1em;
	}

	.sec02_read03 {
		margin: 1em;
	}

	.sec02_read03 dt {
		position: relative;
		text-align: center;
		padding: 0.25vw 0 0.5vw;
		color: #fff;
		margin: 0;
		background: #f08a84;
		z-index:2;
	}

	.sec02_read03 dt:after {
		z-index: 0;
		content: "";
		width: 0.75em;
		height: 0.75em;
		line-height: 1.0;
		display: inline-block;
		background: #f08a84;
		position: absolute;
		left: 37%;
		transform: rotate( 45deg ) translate(175%, -200%);
		bottom: -0.5em;
		z-index:1;
	}

	.sec02_read03 dd {
		background: #fce9e8;
		padding: 0.75em 0.5em 0.5em;
		font-size: 75%;
		overflow: hidden;
	}

	.sec02_read03 dd a {
		margin: 1.5em auto;
		width: 85%;
		display: block;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 {
		margin: 1.5em 0;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 h3 {
		width: 75%;
		margin: 0 auto 0.5em;
	}

	#sec02 .secWrap .sec02Wrap .sec02_bg01 p.sec02_btn01 {
		display: block;
		width: 75%;
		margin: 0 auto 1.5em;
	}

	#sec02 .secWrap .sec02Wrap .sec02_read04 .sec02_btn03 {
		width: 75%;
		margin: 0 auto 1em;
	}

	#sec02 .secWrap .sec02_map {
		margin: 2em 1.5em;
		position: relative;
	}

	#sec02 .secWrap .sec02_map ul {
		margin-top: 2em;
	}

	#sec02 .secWrap .sec02_map ul li {
		margin: 0.5em 0;
	}

	#sec02 .secWrap .sec02_map ul li dl {
		font-size: 70%;
	}

	#sec02 .secWrap .sec02_map ul li dl dt {
		font-weight: bold;
		color: #fff;
		position: relative;
		width: 1.75em;
		height: 1.75em;
		line-height: 1.0;
		display: inline-block;
		background: #2e2617;
		border-radius: 50%;
	}

	#sec02 .secWrap .sec02_map ul li dl dt span {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -60% );
	}

	#sec02 .secWrap .sec02_map ul li dl dd {
		display: block;
	}

	#sec02 .secWrap .sec02_map .sec02_btn04 {
		position: relative;
		margin-top: -5em
	}

	#sec02 .secWrap .sec02_map .sec02_btn04 .balloon {
		position: absolute;
		width: 28%;
		top: -3.5em;
		right: -8%;
	}

	#sec02 .secWrap .sec02_map .sec02_btn04 a {
		display: block;
		margin: 7em auto 0;
		width: 75%;
	}

	#sec02 .secWrap .sec02_list01 {
		margin: 2em auto 1em;
		width: 90%;
	}

	#sec02 .secWrap .sec02_list01 li {
		padding-bottom: 2em;
	}
	
	#sec02 .secWrap .sec02_list01 li:last-child {
		padding: 0;
	}

	#sec02 .secWrap .sec02_list01 li dl dt {
		margin: 0 0 0.5vw;
	}

	#sec02 .secWrap .sec02_list01 li dl dd strong {
		font-weight: bold;
		font-size: 80%;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block {
		position: relative;
		border: 2px solid #0093da;;
		background: #fff;
		margin: 1em 0 0;
		font-weight: bold;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dt {
		text-align: center;
		padding: 0.25vw 0 0.5vw;
		color: #fff;
		margin: 0;
		background: #0093da;;
		z-index: 2;
		position: relative;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dt:before {
		content: "";
		width: 0.75em;
		height: 0.75em;
		line-height: 1.0;
		display: inline-block;
		background: #0093da;;
		position: absolute;
		left: 40%;
		transform: rotate( 45deg ) translate(175%, -200%);
		top: -0.3em;
		z-index: 1;
	}

	#sec02 .secWrap .sec02_list01 li dl dd dl.list_block dd {
		background: #fff;
		padding: 0.5em;
		font-size: 75%;
	}

	#sec02 .secWrap .sec02_read05 {
		text-align: center;
		padding: 1.5em;
		font-size: 70%;
	}

	#sec02 .sec02_read06 {
		margin: 3vw 0;
		font-size: 80%;
	}

}

.pgtop {
	position: fixed;
	right: 1em;
	bottom: 1em;
	z-index: 5;
}

@media screen and (min-width:736px) {

	.pgtop {
		background: url(/msppoint/clever/service/hotel/shared/image/202604/pagetop_o.png) no-repeat;
		background-size: contain;
		width: 75px;
	}

	.pgtop a img {
		transition: .3s;
		opacity: 1;
		width: 75px;
	}

	.pgtop a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width:736px) {

	.pgtop {
		width: 15%;
	}

}