
#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 ========= */
	body.SP #main img {width: 100%;}
#main {position: relative;}
h1 {width: 1000px; height: 500px; margin: 0 auto;}
#title {margin-bottom: 40px; padding-bottom: 10px; background: url("../images/title_bg.png") no-repeat center bottom; background-size: 100%;}
#title p {margin: 20px 0; font-size: 20px; text-align: center; line-height: 1.6em;}
#title p strong {font-size: 23px;}

	body.SP main {overflow: hidden;}
	body.SP h1 {width: 100%; height: auto; margin: 0;}
	body.SP h1 img {width: 100%; height: auto;}
	body.SP #title {margin-bottom: 0; padding-bottom: 0; background: none;}
	body.SP #title p {margin: 1rem 0; font-size: 14px;}
	body.SP #title p strong {font-size: 110%;}

/* ========= schedule ========= */
#schedule{
	width: 920px;
	margin: 60px auto 30px;
	padding-bottom: 20px;
	border: solid 2px #00C2BF;
	box-sizing: border-box;
	background: none;
}
#schedule h2 {
	margin: -25px auto 0;
	text-align: center;
}
	body.SP #schedule h2 .{
		width: 90%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
	}
#schedule table {
	width: 700px;
	margin: 30px auto 10px;
	border-collapse: collapse;
	border-spacing: 0;
}
#schedule tr:nth-child(odd) {
	background-color: #ffffff;
}
#schedule tr:nth-child(even) {
	background-color: #EBF7F7;
}
#schedule th, #schedule td {
	padding: 12px 0;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.4em;
}
#schedule th:nth-of-type(2), #schedule td:nth-of-type(2) {
	color: #003c85;
	font-weight: bold;
	font-size: 110%;
}
#schedule th:nth-of-type(3), #schedule td:nth-of-type(3) {
	color: #0061c9;
	text-align: left;
}
#schedule th:nth-of-type(4), #schedule td:nth-of-type(4) {
	color: #ea5514;
	text-align: left;
}
#schedule th:nth-of-type(5), #schedule td:nth-of-type(5) {
	color: #2e84d7;
	width: 10%;
	text-align: left;
}
#schedule td:nth-of-type(1) {
	width: 35%;
	padding-left: 30px;
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
}
#schedule td:nth-of-type(1) img {
	display: inline-block;
	vertical-align: middle;
	width: 60px;
	height: 28px;
	margin: 0 10px 0 0;
}
#schedule #map {
	width: 700px;
	height: 300px;
	margin: 20px auto;
	box-sizing: border-box;
}

/******* SP *******/
	body.SP #schedule {
		width: 90%;
		margin: 3rem auto 2rem;
		padding-bottom: 0;
		border: solid 2px #00C2BF;
		box-sizing: border-box;
	}
	body.SP #schedule h2 {
		width: auto;
		height: 2.4rem;
		margin-top: -1.2rem;
		padding: 0;
		text-align: center;
	}
	body.SP #schedule h2 img {
		width: auto;
		height: 100%;
	}
	body.SP #schedule #schedule-body {
		width: 99%;
		margin: 1rem auto;
		overflow-x: auto;
		overflow-y: hidden;
		box-sizing: border-box;
	}
	body.SP #schedule table {
		margin: 0;
	}
	body.SP #schedule #map {
		width: 90%;
		height: auto;
		margin: 1rem auto;
		border: none;
	}


/* ========= btn ========= */
.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 .btn{width: 80%; height: 50px;}

.btn a {
	display: block;
	width: 100%;
	height: 100%;
}
.btn img {
	width: auto;
	height: 100%;
}

.btn:hover {opacity: .7;}


/* ========= hawaii ========= */
	body.SP #hawaii img {width: 100%;}
#hawaii {position: relative; margin: 0 auto; padding: 0 0 30px; background-color: #F7F8F8;}
	body.SP #hawaii {padding: 3% 0;}
	
#hawaii h2 {position: absolute; left: 50%; width: 500px; margin: 50px 0 0 -250px; padding-bottom: 10px; text-align: center; border-bottom: solid 1px #00C2BF; font-size: 22px; z-index: 10;}
	body.SP #hawaii h2 {position: relative; left: 0; width: auto; margin: 1rem 0 0; font-size: 20px;}
	
#hawaii .block {position: relative; margin-top: -100px; padding-top: 260px;}
	body.SP #hawaii .block {margin-top: 0; padding-top: 0;}
	
#hawaii .block:nth-of-type(1) {position: relative; top: -20px; margin-top: 0;}
	body.SP #hawaii .block:nth-of-type(1) {top: 0;}
	
#oahu {background: url("../images/hawaii_map1.png") no-repeat left 0; background-size: 300px 300px; z-index: 3;}
#maui {background: url("../images/hawaii_map2.png") no-repeat left 0; background-size: 300px 300px; z-index: 2;}
#hawaii_i {background: url("../images/hawaii_map3.png") no-repeat left 0; background-size: 300px 300px; z-index: 1;}
	body.SP #oahu,
	body.SP #maui,
	body.SP #hawaii_i {background-position: left top; background-size: 50%;}

#hawaii .block p {position: absolute; left: 50px; top: 150px; width: 900px; padding-left: 260px; font-size: 16px; line-height: 1.5em; box-sizing: border-box;}
	body.SP #hawaii .block p {position: relative; left: 0; top: 0; width: 90%; min-height: 10rem; margin: 1rem auto; padding-left: 40%; line-height: 1.8em; font-size: 14px; text-align: justify;}
	
#hawaii ul {width: 900px; margin: 0 auto; padding: 0; list-style-type: none;}
	body.SP #hawaii ul {width: 90%;}
	
#hawaii li {display: inline-block; vertical-align: top; width: 440px; height: auto; text-align: center; font-size: 16px; font-weight: bold;}
	body.SP #hawaii li {display: block; width: 100%; margin-bottom: 2rem; font-size: 13px; font-weight: bold;}
	
#hawaii li:last-child {margin-left: 20px;}
	body.SP #hawaii li:last-child {margin-left: 0;}
	
#hawaii li img {display: block; margin-bottom: 5px;}

/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		body.SP #hawaii .block p {font-size: 110%;}
		body.SP #oahu,
		body.SP #maui,
		body.SP #hawaii_i {background-position: left -4rem; background-size: 40%;}
		body.SP #hawaii li {display: inline-block; width: 48%;}
		body.SP #hawaii li:last-child {margin-left: 4%;}
	}

/* ========= canada ========= */
#canada {width: 900px; margin: 10px auto 50px;}
	body.SP #canada {width: 95%; margin: 2rem auto;}
	
#canada h2 {width: 440px; height: 88px; margin: 0 auto;}
	body.SP #canada h2 {width: 100%; height: auto; margin: 0 auto;}
	
#canada h2 img {width: 100%; height: auto;}
#canada .block {margin-top: 20px;}
	body.SP #canada .block {margin-top: 0;}
	
#canada .block:nth-of-type(1),
body.SP #canada .block:nth-of-type(1) {margin-top: 0;}
	
#canada .block h3 {text-align: center; font-size: 16px;}
	body.SP #canada .block h3 {font-size: 13px;}
	
#canada .block p {padding-top: 70px; box-sizing: border-box; font-size: 15px; line-height: 1.8em; text-align: justify;}
	body.SP #canada .block p {padding-top: 0; box-sizing: border-box; font-size: 14px; line-height: 1.8em; text-align: justify;}

#canada .block:nth-of-type(1) h3 {width: 440px; height: auto; float: left;}
#canada .block:nth-of-type(2) h3 {width: 600px; height: auto; float: right;}
#canada .block h3 img {width: 100%; height: auto;}
	body.SP #canada .block h3 {width: 100%; height: auto; float: none;}
	

#canada .block img {display: block; margin-bottom: 5px;}
#canada .block:nth-of-type(1) p {width: 440px; float: right;}
#canada .block:nth-of-type(2) p {width: 280px; float: left;}
	body.SP #canada .block p {width: 100%; float: none;}

/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		body.SP #canada .block:nth-of-type(1) h3 {width: 50%; height: auto; float: left;}
		body.SP #canada .block:nth-of-type(2) h3 {width: 50%; height: auto; float: right;}
		body.SP #canada .block:nth-of-type(1) p {width: 46%; float: right;}
		body.SP #canada .block:nth-of-type(2) p {width: 46%; float: left;}
		body.SP #canada .block p {padding-top: 3%;}
	}

/* ========= solstice ========= */
#solstice {padding: 30px 50px 10px; background-color: #F7F8F8;}
	body.SP #solstice {padding: 2rem 2.5%; background-color: #F7F8F8;}
	
#solstice h2 {width: 740px; margin: 0 auto 20px;}
	body.SP #solstice h2 {width: 100%; margin: 0 auto 1rem;}
	
#solstice #ship p {display: inline-block; vertical-align: top; width: 500px; margin: 0; padding: 0;}
	body.SP #solstice #ship p {display: block; width: 100%;}
	
#solstice #ship p:nth-of-type(2) {width: 400px; padding-left: 20px; box-sizing: border-box; font-size: 15px; line-height: 1.8em; text-align: justify;}
	body.SP #solstice #ship p:nth-of-type(2) {width: 100%; margin-top: 1rem; padding-left: 0; font-size: 14px;}

#solstice ul {margin: 30px 0 0; padding: 0; list-style-type: none;}
#solstice li {display: inline-block; vertical-align: top; width: 440px; height: auto; margin-bottom: 20px; text-align: center; font-size: 15px; color: #333;}
	body.SP #solstice li {width: 49%; margin-bottom: 1rem; text-align: center; font-size: 13px;}
	
#solstice li img {display: block; margin-bottom: 5px;}
#solstice li:nth-child(even) {margin-left: 20px;}
	body.SP #solstice li:nth-child(even) {margin-left: 2%;}

/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		body.SP #solstice #ship p {display: inline-block; vertical-align: top; width: 50%;}
		body.SP #solstice #ship p:nth-of-type(2) {width: 50%; margin-top: 0; padding-left: 3%;}
	}

/* ========= choice ========= */
#choice {width: 900px; margin: 50px auto 0;}
	body.SP #choice {width: 95%; margin: 2rem auto 0;}
	
#choice h2 {width: 490px; height: 82px; margin: 0 auto;}
	body.SP #choice h2 {width: 100%; height: auto;}
	
#choice #read {font-size: 18px; color: #00C2BF; text-align: center;}
	body.SP #choice #read {font-size: 15px;}
	
#choice #sign {margin: 0 0 5px; font-size: 12px; color: #333; text-align: right;}
#choice .block {position: relative; margin-bottom: 10px; padding: 20px; border: solid 1px #00C2BF; box-sizing: border-box;}
	body.SP #choice .block {padding: 3%;}
	
#choice .block .pic, #choice .block .block-body {display: inline-block; vertical-align: top; margin: 0; padding: 0;}
#choice .block .pic {width: 370px; margin-right: 30px;}
	body.SP #choice .block .pic {width: 100%; margin: 0 0 1rem 0;}
	
#choice .block .block-body {width: 450px;}
	body.SP #choice .block .block-body {width: 100%;}
	
#choice .block .block-body h3 {height: 36px; margin: 0; line-height: 36px; border-radius: 18px; background-color: #00C2BF; text-align: center; color: #fff; font-size: 18px;}
	body.SP #choice .block .block-body h3 {font-size: 15px;}
	
#choice .block .block-body h4 {margin: 20px 0 10px; font-size: 18px; color: #F57356;}
	body.SP #choice .block .block-body h4 {margin: 1rem 0 .5rem; font-size: 15px;}
	
#choice .block .block-body p {margin: 0; font-size: 16px; color: #333;}
	body.SP #choice .block .block-body p {font-size: 14px;}

#choice .block .block-body p.price {position: absolute; right: 30px; bottom: 20px; width: 250px; height: 60px; line-height: 60px; margin: 0; padding: 0 20px; font-size: 24px; color: #E83828; font-weight: bold; background-color: #F7F8F8; box-sizing: border-box; text-align: center;}
	body.SP #choice .block .block-body p.price {position: relative; right: 0; bottom: 0; width: 100%; height: 3rem; margin-top: 1rem; line-height: 3rem; font-size: 18px;}

#choice .block .block-body p.price img {display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin: 0 10px 0 0;}

/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		body.SP #choice .block .pic {text-align: center;}
	}

/* ========= airplane ========= */
#airplane {padding: 20px 0; background-color: #F7F8F8;}
	body.SP #airplane {padding: 0; background: none;}
#airplane h2 {text-align: center;}

/* ========= osusume ========= */
#osusume {margin: 50px 0 0;}
	body.SP #osusume {margin: 2rem 0 0;}
	
#osusume h2 {position: relative; width: 620px; margin: 0 auto 50px; text-align: center; color: #00C2BF; font-size: 28px;}
	body.SP #osusume h2 {width: 100%; margin: 0 auto 2rem; font-size: 24px;}

#osusume h2:after {content: ''; display: block; position: absolute; right: 0; top: -20px;; width: 94px; height: 114px; background: url("../images/osusume_icon.png") no-repeat left top; background-size: 100%;}
	body.SP #osusume h2:after {right: 1rem; top: 0;; width: 5rem; height: 8rem; background-size: 100% auto;}
	
#osusume .block {width: 800px; margin: 30px auto 10px; padding-bottom: 20px; border-bottom: solid 1px #B5B5B6;}
	body.SP #osusume .block {width: 95%; margin: 2rem auto 1rem; padding-bottom: 1rem;}
	
#osusume .block:last-child {border: none;}
#osusume .block h3 {padding-left: 70px; font-size: 22px; box-sizing: border-box;}
	body.SP #osusume .block h3 {padding-left: 0; font-size: 18px; text-align: center;}

#osusume .block h3 img {display: inline-block; margin-right: 20px;}
	body.SP #osusume .block h3 img {display: block; margin: 0 auto .5rem;}

#osusume .block p {font-size: 15px; color: #333; line-height: 1.6em; text-align: justify;}
	body.SP #osusume .block p {font-size: 14px; line-height: 1.8em;}
#osusume .block p.pic {text-align: center;}

/* ========= world ========= */
#world {padding: 50px 0 30px; background-color: #F5FAFA;}
	body.SP #world {padding: 5% 0;}

#world h2 {text-align: center; margin: 0 0 30px;}
	body.SP #world h2 {text-align: center; margin: 0 0 1rem;}
	
#world ul {margin: 0; padding: 0; list-style-type: none; text-align: center;}
	body.SP #world ul {padding: 0 2.5%; box-sizing: border-box;}
#world li {
	display: inline-block; vertical-align: top; width: 290px; height: auto; margin: 0 10px 20px;
	transition: opacity .3s linear;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
}
	body.SP #world li {width: 49%; margin: 0 0 1rem; text-align: center; font-size: 13px;}
	body.SP #world li:nth-child(even) {margin-left: 2%;}
	
#world li:hover {opacity: .7;}
#world li:hover a h3 {text-decoration: none;}
#world li h3, #world li p {margin: 0;}
#world li h3 {margin: 10px 0 5px; font-size: 18px;}
	body.SP #world li h3 {margin: .5rem 0; font-size: 14px;}
	
#world li a p {font-size: 14px; color: #333;}
	body.SP #world li a p {font-size: 12px;}
	
#world li a {text-decoration: none;}
#world li a h3 {text-decoration: underline;}


/* ========= 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 10px; 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;}
