#sp_winter,
body.SP .pc_only {display: none;}
body.SP .sp_only {display: block;}
.sp_only {display: none;}

body {font-family: "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', 'Helvetica', serif, 'Arial', 'Verdana', 'ＭＳ Ｐゴシック', sans-serif; font-weight: 500;}
	body.SP {font-size: 14px;
		overflow-x: hidden;
	}
main {padding-bottom: 30px;}
#contents-body {width: 1000px; margin: 0 auto; padding-bottom: 20px; background-color: #fff;}
	body.SP #contents-body {width: 100%;}

/* ========= main ========= */
#main {position: relative;}
h1 {width: 1000px; height: 500px; margin: 0 auto;}
#main p {position: absolute; right: 25px; bottom: -90px; width: 270px; height: 160px;}

	body.SP main {overflow: hidden;}
	body.SP h1 {width: 100%; height: auto; margin: 0;}
	body.SP h1 img {width: 100%; height: auto;}
	body.SP #main p {right: 1rem; bottom: -4rem; width: 11rem; height: auto;}

/* ========= costa ========= */
#costa {
	margin: 0 auto;
	padding: 10px 50px;
	background: #f7f8f8;
	box-sizing: border-box;
}

	body.SP #costa {
		padding: 1rem 5%;
	}
	
#costa h2 {margin-bottom: 15px; font-size: 28px; color: #03c2cd; line-height: 1.5em;}
#costa p {font-size: 15px; line-height: 1.6em; text-align: justify;}
	body.SP #costa h2 {font-size: 120%; margin: .5rem 0 0; padding: 0 0 1rem;}
	body.SP #costa p {font-size: 13px; line-height: 1.6em; text-align: justify;}

/* ========= btn ========= */
#btn1, #btn2, .btn {
	width: 600px;
	height: 70px;
	background-color: #d40e26;
	margin: 30px auto;
	border-radius: 4px;
	text-align: center;
	transition: opacity .3s linear;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
}
	body.SP #btn1, body.SP #btn2, body.SP .btn{
		width: 80%; height: 50px;
	}

.btn a {
	display: block;
	width: 100%;
	height: 100%;
}
.btn img {
	width: auto;
	height: 100%;
}

.btn:hover {opacity: .7;}
	body.SP #btn1, body.SP #btn2{
		width: 80%;
		height: 3rem;
		background-color: #d40e26;
	}

/* ========= plan ========= */
#special-plan {width: 900px; margin: 30px auto 0;}
.plan ul {margin: 0; padding: 0; list-style-type: none; box-sizing: border-box;}
.plan li {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.plan li img {width: 100%;}

.plan li:last-child {margin-bottom: 40px;}
.plan li a:hover {opacity: 0.7;}
	
	body.SP #special-plan {width: 100%; margin: 1rem auto 0; padding-top: 0;}
	body.SP .plan ul {padding: 0;}
	body.SP #special-plan li,
	body.SP .plan li {width: 100%; height: auto; margin: 0;}

/* ========= tokuten ========= */
#tokuten {width: 100%; margin-top: 1rem; padding: 90px 0 40px; background-color: #f8ee00; box-sizing: border-box;}
#tokuten-body {width: 860px; margin: 0 auto; padding-bottom: 20px; background-color: #fff; text-align: center;}
#tokuten-body h2 {position: relative; top: -70px; margin: 0 0 -50px;}
#tokuten-body h3 {width: 300px; height: 40px; margin: -20px auto 0; padding: 0;}
#tokuten-body h3 img {width: 100%; height: auto;}
#tokuten-body div {display: inline-block; vertical-align: top; width: 400px; margin-top: 20px; padding: 0 15px 15px; box-sizing: border-box;}
#tokuten-body div:nth-of-type(1) {margin-right: 20px; border: solid 2px #9fbaed;}
#tokuten-body div:nth-of-type(2) {border: solid 2px #d5e0f8;}
#tokuten-body .read {font-size: 16px; font-weight: bold; color: #e95471;}
#tokuten-body dl {min-height: 70px; margin: 0; padding: 0; text-align: left;}
#tokuten-body dl dl {min-height: auto;}
#tokuten-body dt {margin-top: 20px; font-weight: bold; font-size: 15px;}
#tokuten-body dd {margin: 0; padding: 0; font-size: 12px; text-align: justify;}
#tokuten-body dd dt,
#tokuten-body dd dd {display: inline-block; vertical-align: middle;}
#tokuten-body dd dt {width: 30%; margin: 0; font-size: 12px; font-weight: normal;}
#tokuten-body dd dd {width: 65%;}
#tokuten-body p.ex {width: 820px; margin: 10px auto 0; text-align: justify; color: #595757; line-height: 1.5em;}

	body.SP #tokuten {padding: 0 0 1rem;}
	body.SP #tokuten-body {position: relative; width: 100%; padding-bottom: 1.5rem; background: url("../images/tokuten_bg.png") repeat-x center top; background-size: 100% 100%;}
	body.SP #tokuten-body:after {content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 0; background: url("../images/tokuten_bg_foot.png") no-repeat center bottom; background-size: 100% 100%;}
	body.SP #tokuten-body h2 {position: relative; top: 0; margin: 0;}
	body.SP #tokuten-body h3 {width: 100%; height: auto; margin: 0 auto;}
	body.SP #tokuten-body h4,
	body.SP #tokuten-body .read,
	body.SP #tokuten-body dl {display: none;}
	body.SP #tokuten-body div {display: block; width: 100%; margin: 0; padding: 0; border: none;}
	body.SP #tokuten-body p.ex {width: 85%; margin: 0 auto; font-size: 10px;}

/* ========= room ========= */
#room {margin: 0; padding: 30px 0;background-color: #f7f8f8;}
#room h2 {height: 80px; line-height: 80px; text-align: center; font-size: 22px; background: url("../images/icon1.png") no-repeat 250px center; background-size: 193px 80px;}
#room .block {width: 900px; margin: 0 auto 60px;}
	
	body.SP #room {padding: 5% 0;}
	body.SP #room h2 {height: 4rem; line-height: 4rem; background-position: 1rem center; background-size: auto 3rem;}
	body.SP #room .block {width: 100%; margin-bottom: 2rem;}

/* ========= discount ========= */
#discount {padding-bottom: 35px; background-color: #ffcb22;}
#discount h2 {width: 770px; height: 200px; margin: 0 auto;}
#discount-body {width: 930px; margin: -76px auto 0; padding: 20px 0; background-color: #fff; border-radius: 4px; text-align: center; font-size: 18px; line-height: 1.5em;}
#discount-body .price {width: 705px; margin: 20px auto 0;}
	
	body.SP #discount {padding-bottom: 5%;}
	body.SP #discount h2 {width: 100%; height: auto;}
	body.SP #discount-body {width: 90%; margin-top: 0; padding: 3%; text-align: justify; font-size: 14px; box-sizing: border-box;}
	body.SP #discount-body p {margin: 0; padding: 0;}
	body.SP #discount-body p br {display: none;}
	body.SP #discount-body span {position: relative; float: right; width: 30%; margin: -2rem 0 .5rem 1rem; z-index: 1;}
	body.SP #discount-body .price {width: 100%; margin: 1rem auto 0;}

/* ========= enjoy ========= */
#enjoy {padding: 20px 0;}
#enjoy-title {width: 650px; margin: 0 auto 60px; padding-bottom: 10px; text-align: center; border-bottom: solid 5px #ffcb22;}
#enjoy-title h2 {font-size: 28px;}
#enjoy-title p {font-size: 15px;}
#enjoy div:not(:nth-of-type(1)) {width: 900px; margin: 0 auto 30px; padding-bottom: 30px; border-bottom: solid 1px #b5b5b6;}
.enjoy-block h3 {text-align: center; line-height: 1.6em; font-size: 22px;}
.enjoy-block p {margin: 0; padding: 0; font-size: 15px; text-align: justify; line-height: 1.8em;}
.enjoy-body {width: 540px; box-sizing: border-box;}
.enjoy-block .pic {width: 360px; height: 270px;}
#enjoy div:nth-of-type(3) .enjoy-body, #enjoy div:nth-of-type(5) .enjoy-body {float: left; padding-right: 20px;}
#enjoy div:nth-of-type(3) .pic, #enjoy div:nth-of-type(5) .pic {float: right;}
#enjoy div:nth-of-type(4) .enjoy-body {float: right; padding-left: 20px;}
#enjoy div:nth-of-type(4) .pic {float: left;}
#enjoy div:nth-of-type(5) {padding-bottom: 0; border-bottom: none;}
	
	body.SP #enjoy {padding: 3%;}
	body.SP #enjoy-title {width: 100%; margin: 0 auto 1.5rem; padding-bottom: .5rem;}
	body.SP #enjoy-title h2 {font-size: 18px; line-height: 1.4em;}
	body.SP #enjoy-title p {font-size: 14px; line-height: 1.5em;}
	body.SP #enjoy div:not(:nth-of-type(1)) {width: 100%; margin: 0 auto 2rem; padding-bottom: 5%;}
	body.SP .enjoy-block h3 {font-size: 16px;}
	body.SP .enjoy-block p {font-size: 14px;}
	body.SP .enjoy-body {width: 100%;}
	body.SP #enjoy div:nth-of-type(3) .enjoy-body, body.SP #enjoy div:nth-of-type(5) .enjoy-body {float: none; padding-right: 0;}
	body.SP #enjoy div:nth-of-type(3) .pic, body.SP #enjoy div:nth-of-type(5) .pic {float: none;}
	body.SP .enjoy-block .pic {width: 95%; height: auto; margin: 1rem auto 0;}
	body.SP #enjoy div:nth-of-type(4) .enjoy-body {float: none; padding-left: 0;}
	body.SP #enjoy div:nth-of-type(4) .pic {float: none;}
	body.SP #enjoy div:nth-of-type(5) {margin-bottom: 0; padding-bottom: 0;}

/* ========= charm ========= */
#charm {padding-bottom: 30px; background-color: #ffcb22;}
#charm h2 {margin: 0;}
#charm video {display: block; width: 640px; height: 360px; margin: 0 auto;}
#charm .youtube iframe {display: block; width: 640px; height: 360px; margin: 0 auto;}
#charm-body {width: 930px; margin: 0 auto; padding: 0 60px 30px; border-radius: 10px; background-color: #fff; box-sizing: border-box;}
#charm-body h3 {position: relative; width: 680px; margin: 20px auto 30px; padding-top: 30px; text-align: center; font-size: 22px;}
#charm-body h3 img {position: absolute; left: 0; top: 0; width: 140px; height: auto;}
#charm-body p {font-size: 15px; text-align: justify;}
#charm-body .pic {width: 800px; height: auto; margin: 20px auto;}
#charm-block {padding: 20px 0; border-bottom: solid 1px #b5b5b6;}
#charm-block:last-child {padding-bottom: 0; border-bottom: none;}
#charm-block img.fl {float: right; width: 280px; height: auto; margin: 0 0 0 20px;}
	
	body.SP #charm video {width: 100%; height: auto;}
	body.SP #charm .youtube iframe {width: 100%; height: auto;}
	body.SP #charm-body {width: 95%; margin: 0 auto; padding: 0 5% 2rem;}
	body.SP #charm-body h3 {position: relative; width: 100%; margin: 0 auto; padding-top: 2rem; font-size: 16px;}
	body.SP #charm-body h3 img {display: block; position: relative; left: -20px; top: 0; width: 140px; height: auto; margin: 0 auto 1rem;}
	body.SP #charm-body p {font-size: 14px; line-height: 1.6em;}
	body.SP #charm-body .pic {width: 100%; margin: 2rem auto;}
	body.SP #charm-block {padding: 1rem 0;}
	body.SP #charm-block img.fl {width: 50%; height: auto; margin: 0 0 1rem 1rem;}
	
/* ========= cruise-choice ========= */
#cruise-choice 				{margin: 0; padding: 30px 0; background: url("../images/icon2.png") no-repeat 100px 50px; background-size: 193px 80px;}
#cruise-choice h2 			{margin-bottom: 30px; padding: 0 0 10px; font-size: 22px; text-align: center; font-weifght: normal; letter-spacing: 1px; background: url("../images/title_line.png") no-repeat center bottom; background-size: 150px 5px;}
#cruise-choice .block 		{width: 900px; height: auto; margin: 0 auto -1px; border: solid 1px #03c2cd; background-color: #fff;}
#cruise-choice .block 		{
	transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	-moz-transition: background-color .3s linear;
	-ms-transition: background-color .3s linear;
}
#cruise-choice .block:hover {background-color: rgba(3,194,205,.1)}
#cruise-choice .block a 	{display: block; width: 100%; height: 100%; padding: 20px 24px; box-sizing: border-box; text-decoration: none; color: #000;}
#cruise-choice h3 			{margin: 20px 0 30px; text-align: center; color: #03c2cd; font-size: 18px;}
#cruise-choice h3 img 		{display: inline-block; width: 160px; height: auto; margin-right: 20px; vertical-align: middle;}
#cruise-choice .block:nth-of-type(4) h3 img {width: auto; height: 70px;}
#cruise-choice h3 span 		{display: inline-block; vertical-align: middle;}
#cruise-choice .body-left 	{display: inline-block; vertical-align: middle; width: 448px;}
#cruise-choice .body-left p {font-size: 14px; text-align: justify;}
#cruise-choice .body-left p.ex {font-size: 11px; color: #727171;}
#cruise-choice .body-right 	{display: inline-block; vertical-align: middle; width: 370px; margin: 0 0 0 28px; }
	body.SP #cruise-choice {padding: 1rem 0; background-position: 5% 1.5rem; background-size: auto 3rem;}
	body.SP #cruise-choice h2 {margin-bottom: 1rem; padding: 0 0 1rem; font-size: 16px; background-size: 30% auto;}
	body.SP #cruise-choice .block {width: 90%; margin: 0 auto -1px; background: url("../images/icon4.png") no-repeat right 4% top 3rem; background-size: 1rem auto;}
	body.SP #cruise-choice .block a {padding: 4%;}
	body.SP #cruise-choice h3 {margin: 1rem 0; font-size: 15px; line-height: 1.4em;}
	body.SP #cruise-choice h3 img {display: block; width: auto; height: 2.6rem; margin: 0 auto 1rem;}
	body.SP #cruise-choice h3 span {display: block;}
	body.SP #cruise-choice .body-left 	{display: block; width: 100%;}
	body.SP #cruise-choice .body-left p {font-size: 13px;}
	body.SP #cruise-choice .body-right {display: block; width: 100%; margin: 0;}

p.choice_read{
	font-size: 14px;
	text-align: center;
}

/* ========= link ========= */
#link_relo{margin: 0 auto; text-align: center;}
#link_relo a:hover{opacity: 0.7;}
	
	body.SP #link_relo {width: 90%;}

/* ========= summary ========= */
#summary 			{margin: 30px 0;}
#summary h2 		{position: relative; width: 900px; margin: 0 auto; padding: 10px 50px; font-size: 16px; text-align: left; z-index: 10;}
#summary #summary-body {width: 900px; margin: 0 auto; padding: 20px 0; border: none; background: #f7f8f8;}
#summary p 		{margin: 0 0 20px; padding: 0 50px;font-size: 15px; font-weight: bold; color: #ed1c24; line-height: 1.4em;}
#summary ul		{margin: 0 auto; padding: 0 50px;}
#summary li 		{list-style-type: square; margin: 0 0 20px; padding: 0; font-size: 15px; line-height: 1.4em;}
	
	body.SP #summary {margin: 5% 0;}
	body.SP #summary h2 {width: 100%; font-size: 15px; padding: 5% 5% 0;}
	body.SP #summary #summary-body {width: 90%; margin: 0 auto; padding: 0;}
	body.SP #summary p {margin: 0 0 .5rem; font-size: 13px; padding: 5%; text-align: justify;}
	body.SP #summary ul		{margin: 0 auto; padding: 0 5% 5% 10%;}
	body.SP #summary li {margin: 0 0 1rem; font-size: 12px; line-height: 1.6em; text-align: justify;}