@charset "UTF-8";
/* ****************************************************

/cruise/feature/sample/css/contents.css
-----------------------------------
1: contents parts for PC
-----------------------------------
2: contents parts for Smartphone
-----------------------------------

***************************************************** */


@media only screen and (min-width: 769px), print {

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

	1: contents parts for PC

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

section{
	margin: 0 auto;
	margin-bottom: 40px;
	margin-top: 20px;
	color: #ffffff; /* 全体の文字色 */
	font-size: 100%; /* 全体の文字サイズ */
	font-family: serif;
	text-align: center;
}
#main_contents_area{
	/*margin: 0 auto;
	width: 100vw;
  height: auto;
  min-height: 100vh;
	background-size: cover;
  background-position: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;*/
	/*background-image: url(/cruise/feature/sample/img/com_bg01.jpg);
	background-repeat: repeat-y;
	background-position: 50% -646px;*/
	/* IE 
	background: url("../img/main.png")  no-repeat , -ms-linear-gradient(top, #195a96, #1e1e3c) ;*/
	/* Mozilla 
	background: url("../img/main.png")  no-repeat, -moz-linear-gradient(top, #195a96, #1e1e3c) ;*/
	/* Opera 
	background: url("../img/main.png")  no-repeat, -o-linear-gradient(top, #195a96, #1e1e3c) ;*/
	/* Webkit 
	background: url("../img/main.png")  no-repeat, -webkit-linear-gradient(top, #195a96, #1e1e3c) ;*/
	/* W3C 
	background: url("../img/main.png")  no-repeat, linear-gradient(top, #195a96, #1e1e3c) ;*/

	/* 左右中央寄せ */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	box-sizing: border-box;
	color: #ffffff; /* 全体の文字色 */
	font-size: 100%; /* 全体の文字サイズ */
	font-family: serif;
	text-align: center;
}
#main_area{
	margin-top: 700px;
	width: 1000px;
  min-width: 320px;
	justify-content: flex-start; // 左寄せ
	justify-content: center; // 中央寄せ
	justify-content: flex-end; // 右寄せ
	align-items: flex-start; // 上寄せ
	align-item: center; // 中央寄せ
	align-item: flex-end; // した寄せ
	text-align: center;

}

.headline-one{
	font-family: serif;
}
h2, h3{
	font-size: 180%;
	margin-bottom: 10px;
}
h4{
	font-size: 150%;
	color: #fac8a0;
}
h5{
	font-size: 120%;
}
h6{
	color:#faffbe;
	font-size: 110%;

}

h2, h3, h4, h5, h6{
		font-family: serif;
		margin-bottom:20px;
}
/* ナビ */
ul,li{
    margin:0px;
    padding:0px 1px;
}
#nav_menu{
		width: 100%;
		margin: 10px 0;
		list-style: none;
		display:flex;
		justify-content: center;
			}
.nav_menu_btn a:link{
		padding:6px 12px;
    justify-content: center;
		list-style: none;
		text-decoration: none;
    text-align: center;
		color:black;
		font-weight: bold;
		font-family: serif;
		background: linear-gradient(#ffffff, #fac8a0);
		background: -moz-linear-gradient(top, #ffffff, #fac8a0);
		background: -webkit-linear-gradient(top, #ffffff, #fac8a0);
		background: linear-gradient(to bottom, #ffffff, #fac8a0);
}
/* リンク */
.outlink{
	padding:0;
	margin:0;
	letter-spacing: 0.15em;
	color: #fac8a0;
}
.outlink a:link {
	text-align: center;
	text-decoration: none;
	color: #fac8a0;
}
.outlink a:hover {
background-color: #e0e0e0;
color: #fac8a0;
}


/* ハイライト */
#hilight{
	width: 100%;
	padding: 10px 0;
	height: auto;
	background-color:rgba(255,255,255,0.2);
}
/* 特典 */
#tokuten{
	margin: 10px 0 ;
	width: 100%;
	height: auto;
	padding: 5px 0;
	background: linear-gradient(#14508c, #1e1e3c);
	background: -moz-linear-gradient(top, #14508c, #1e1e3c);
	background: -webkit-linear-gradient(top, #14508c #1e1e3c);
	background: linear-gradient(to bottom, #14508c, #1e1e3c);
	z-index: 1;
	text-align: center;
}

#tokuten_left, #tokuten_right{
	padding: 20px;
	float: left;
	min-width: 320px;
	max-width: 400px;
}
#inner_tokuten{
	display: inline-block;
	margin: auto;
}
.inner_tokuten_info{
	color: #faffbe;
	font-size: 110%;
}
.inner_tokuten_common{
	font-size: 90%;
	line-height: 20px;
}
/* 割引 */
#value-01, #value-02, #value-03{
	margin: 0 auto;
	width: 800px;
	height: 110px;
	padding: 10px;
	max-width: 800px;
	min-width: 320px;
	border-radius: 5px;
	padding-bottom: 5px;
	margin-bottom: 3px;
	clear: both;
}
#value-01, #price-value-01{
	background-color: #87191e;
}
#value-02, #price-value-02{
	background-color: #004173;
}
#value-03, #price-value-03{
	background-color: #786e50;
}
.contents_box{
	margin: 0 auto;
	max-width: 1000px;
	min-width: 320px;
}
.inner-value-left{
	width: 300px;
	float: left;
	}
.inner-value-right{
	width: 470px;
	float: right;
	text-align: left;
	padding: 0 5px;
	/*margin-top: -15px;*/
	overflow: hidden;
	vertical-align: middle;
}
.annotation_right{
	font-size: 75%;
	text-align: right;
}
.annotation_left{
	font-size: 75%;
	text-align: left;
}
/* 料金 */
#price_type{
	  width: 100%;
	  margin: 0 auto;
	  max-width: 1000px;
	}
#price_list{
	width: 100%;
	align: center;
	text-align: center;
	border: solid 1px #000000;
	border-collapse: collapse;
	min-width: 320px;
	max-width: 1000px;
}
#innner_price{
	padding: 0;
	margin: 0;
	text-align: center;
	background-color: #055a87;
	border: solid 1px #ffffff;
	color: white;
	font-size: 70%;
}
#price-value-01, #price-value-02, #price-value-03{
	color: white;
	padding: 3px 0;
	text-align: left;
	width: 2000px;
}
#price-value-04{
	color: black;
	padding: 3px 0;
	text-align: left;
}
.yen{
	text-align: center;
	font-size: 115%;
	font-weight: bold;
}
/* 挨拶 */
#main_wrap{
	margin: 0 auto;
	width: 100%;
	padding: 0 5px;
	text-align: center;
	background: pink;
}
#greeting{
	font-size: 110%;
	line-height: 200%;
	margin-bottom: 50px;
}
/* 日程 */
#journey{
	  width: 80%;
	  margin: 25px auto;
	  max-width: 600px;
	}
#table{
		width: 50%;
		align: center;
		margin-left: auto;
		margin-right: auto;
		border: solid 1px #000000;
		border-collapse: collapse;
		min-width: 320px;
		max-width: 400px;
}
tr
{
	background-color: white;
	color: black;
	font-size: 0.9em;
}
#date{
	background: #c3aa7d;
	color: white;
	text-align: center;
}
th, td{
	padding: 0 8px;
	width: 200px;
	font-size: 110%;
}
.holiday{
	color: red;
}
.saturday{
	color: blue;
}
.new_harbor{
	background: #fac869;
	color: #003c64;
	width: 50px;
	padding: 1px;
}
.through_ship{
	background: #afd28c;
	color: #003c64;
	width: 50px;
	padding: 1px;
}
.description{
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	list-style: none;
	font-weight: lighter;
	font-size: 80%;
	width: 80%;
	letter-spacing: 1px;
}
.more_detail{
	padding-left:1em;
	text-indent:-1em;
}
/* オプショナル */
#content_op{
	width: 100%;
	margin: 0 auto;
  min-width: 330px;
  max-width: 1000px;
	height: 650px;
	align: center;
	text-align: center;
	padding: 10x 0;
}

#inner_op{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 20px 0;
	float: left;
}
#optional{
		width: 100%;
		align: center;
		border-collapse: separate;
		table-layout: auto;
		padding: 40px 0 5px 0;

}
.op_title{
	padding: 5px;
	margin: 10px 0;
	color: white;
	font-size: 1.3em;
	background: linear-gradient(left,#14508c, #1e1e3c);
	background: -moz-linear-gradient(left, #14508c, #1e1e3c);
	background: -webkit-linear-gradient(left, #14508c #1e1e3c);
	background: linear-gradient(to right, #14508c, #1e1e3c);
}
.op_port{
	background-color: #cdbe96;
}
.bg_white{
		background-color:#ffffff;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
}



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

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

	2: contents parts for Smartphone

================================ */
section{
	margin: 0 auto;
	margin-bottom: 40px;
	margin-top: 20px;
	color: #ffffff; /* 全体の文字色 */
	font-size: 100%; /* 全体の文字サイズ */
	font-family: serif;
	text-align: center;
}
#main_contents_area{
	margin: 0 auto;
	width: 100vw;
  height: auto;
  min-height: 100vh;
	background-size: cover;
  background-position: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;
	/* IE */
	background: url("../img/main_02_sp.png")  no-repeat , -ms-linear-gradient(top, #195a96, #1e1e3c) ;
	/* Mozilla */
	background: url("../img/main_02_sp.png")  no-repeat, -moz-linear-gradient(top, #195a96, #1e1e3c) ;
	/* Opera */
	background: url("../img/main_02_sp.png")  no-repeat, -o-linear-gradient(top, #195a96, #1e1e3c) ;
	/* Webkit */
	background: url("../img/main_02_sp.png")  no-repeat, -webkit-linear-gradient(top, #195a96, #1e1e3c) ;
	/* W3C */
	background: url("../img/main_02_sp.png")  no-repeat, linear-gradient(top, #195a96, #1e1e3c) ;
	/* 左右中央寄せ */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	box-sizing: border-box;
	color: #ffffff; /* 全体の文字色 */
	font-size: 100%; /* 全体の文字サイズ */
	font-family: serif;
	text-align: center;
}
#main_area{
	margin-top: 250px;
	width: 100%;
  min-width: 320px;
	justify-content: flex-start; // 左寄せ
	justify-content: center; // 中央寄せ
	justify-content: flex-end; // 右寄せ
	align-items: flex-start; // 上寄せ
	align-item: center; // 中央寄せ
	align-item: flex-end; // した寄せ
	text-align: center;

}

.headline-one{
	font-family: serif;
}
h2, h3{
	font-size: 180%;
}
h4{
	font-size: 150%;
	color: #fac8a0;
}
h5{
	font-size: 120%;
}
h6{
	color:#faffbe;
	font-size: 100%;

}
h2, h3, h4, h5,h6{
		font-family: serif;;
		margin-bottom: 20px;
}
/* ナビ */
ul,li{
    margin:0px;
    padding:0px;
}
#nav_wrap{
    text-align: center;
	margin-bottom:20px;
}
#nav_menu{
		width: 100%;
margin: 10px 20px;
padding: 0 0 30px 0;

		list-style: none;

justify-content: center;

			}
.nav_menu_btn a:link{
		padding:6px 12px;
    justify-content: center;
		list-style: none;
		text-decoration: none;
    text-align: center;
		color:black;
		font-weight: bold;
		font-family: serif;
		background: linear-gradient(#ffffff, #fac8a0);
		background: -moz-linear-gradient(top, #ffffff, #fac8a0);
		background: -webkit-linear-gradient(top, #ffffff, #fac8a0);
		background: linear-gradient(to bottom, #ffffff, #fac8a0);

float:left;
    margin:1px 1px;

}
/* リンク */
.outlink{
clear:left;
	padding:0;
	margin:0;
	letter-spacing: 0.15em;
	color: #fac8a0;
}
.outlink a:link {
	text-align: center;
	text-decoration: none;
	color: #fac8a0;
}
.outlink a:hover {
background-color: #e0e0e0;
}


/* ハイライト */
#hilight{
	width: 100%;
	padding: 10px 0;
	height: auto;
	background-color:rgba(255,255,255,0.2);
}
/* 特典 */
#tokuten{
	margin: 10px 0 ;
	width: 100%;
	height: auto;
	padding: 5px 0;
	background: linear-gradient(#14508c, #1e1e3c);
	background: -moz-linear-gradient(top, #14508c, #1e1e3c);
	background: -webkit-linear-gradient(top, #14508c #1e1e3c);
	background: linear-gradient(to bottom, #14508c, #1e1e3c);
	z-index: 1;
	text-align: center;
}

#tokuten_left, #tokuten_right{
	padding: 20px;
	float: left;
	min-width: 320px;
	max-width: 400px;
}
#inner_tokuten{
	display: inline-block;
	margin: auto;
}
.inner_tokuten_info{
	color: #faffbe;
	font-size: 120%;
}
.inner_tokuten_common{
	font-size: 90%;
	line-height: 20px;
}
/* 割引 */
#value-01, #value-02, #value-03{
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 10px;
	max-width: 100%;
/*	min-width: 320px;*/
	border-radius: 5px;
	padding-bottom: 5px;
	margin-bottom: 3px;
	clear: both;
}
#value-01, #price-value-01{
	background-color: #87191e;
}
#value-02, #price-value-02{
	background-color: #004173;
}
#value-03, #price-value-03{
	background-color: #786e50;
}
.contents_box{
	margin: 0 auto;
	max-width: 100%;
	/*min-width: 320px;*/
}
.inner-value-left{
	width: 40%;
	margin: auto;
	margin-bottom: 5px;
	}
.inner-value-right{
	width: 100%;
	clear: both;

	padding: 0 5px;
/*	margin-top: -15px;*/
	overflow: hidden;
	vertical-align: middle;
}
.annotation_right{
	font-size: 75%;
	text-align: right;
}
.annotation_left{
	font-size: 75%;
	text-align: left;
}
/* 料金 */

.scroll-table {
  overflow: auto;
  white-space: nowrap;
  border: solid 1px #ddd;
  table {
    margin: 0 0 10px 0;
    border: none;
  }  }

#price_type{
	  width: 100%;
	  margin: 0 auto;

	}
#price_list{
	width: 100%;
	align: center;
	text-align: center;
	border: solid 1px #000000;
	border-collapse: collapse;
	background-color: #ffffff;
}
#innner_price{
	padding: 0;
	margin: 0;
	text-align: center;
	background-color: #055a87;
	border: solid 1px #ffffff;
	color: white;
	font-size: 70%;
}
#price-value-01, #price-value-02, #price-value-03{
	color: white;
	padding: 3px 0;
	text-align: left;
}
#price-value-04{
	color: black;
	padding: 3px 0;
	text-align: left;
	width: 2000px;
}
.yen{
	text-align: center;
	font-size: 115%;
	font-weight: bold;
}
/* 挨拶 */
#main_wrap{
	margin: 0 auto;
	width: 100%;
	padding: 0 5px;
	text-align: center;
	background: pink;
}
#greeting{
	font-size: 110%;
	line-height: 200%;
	margin-bottom: 50px;
}
/* 日程 */
#journey{
	  width: 80%;
	  margin: 20px auto;
	  max-width: 800px;
	}
#table{
		width: 50%;
		align: center;
		margin-left: auto;
		margin-right: auto;
		border: solid 1px #000000;
		border-collapse: collapse;
		min-width: 320px;
		max-width: 400px;
}
tr
{
	background-color: white;
	color: black;
	font-size: 0.9em;
}
#date{
	background: #c3aa7d;
	color: white;
	text-align: center;
}
th, td{
	padding: 0 8px;
	width: 250px;

}
.holiday{
	color: red;
}
.saturday{
	color: blue;
}
.new_harbor{
	background: #fac869;
	color: #003c64;
	width: 50px;
	padding: 1px;
}
.through_ship{
	background: #afd28c;
	color: #003c64;
	width: 50px;
	padding: 1px;
}
.description{
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	list-style: none;
	font-weight: lighter;
	font-size: 80%;
	width: 80%;
	letter-spacing: 1px;
}
.more_detail{
	padding-left:1em;
	text-indent:-1em;
}
/* オプショナル */
#content_op{
	width: 100%;
	margin: 0 auto;
 /* min-width: 330px;
  max-width: 1000px;
	height: 1050px;*/
	align: center;
	text-align: center;
	padding: 10x 0;
}

#inner_op{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 20px 0;
	float: left;
}
#optional{
		width: 100%;
		align: center;
		border-collapse: separate;
		table-layout: auto;
		padding: 40px 0 5px 0;

}
.op_title{
	padding: 5px;
	margin: 10px 0;
	color: white;
	font-size: 1.3em;
	background: linear-gradient(left,#14508c, #1e1e3c);
	background: -moz-linear-gradient(left, #14508c, #1e1e3c);
	background: -webkit-linear-gradient(left, #14508c #1e1e3c);
	background: linear-gradient(to right, #14508c, #1e1e3c);
}
.op_port{
	background-color: #cdbe96;
}
.bg_white{
		background-color:#ffffff;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
｝