/* ========================================================================= */
/* 全体                                                                      */
/* ========================================================================= */
html {
	margin:0;
	padding:0;
	min-height:100%;
}

body {
	color:#000000;
	font-size:16px;
	margin:0;
	padding:0;
	min-height:100%;
	width:100%;
	overflow-x:hidden;
}

span {
	display:inline-block;
}

img {
	display:block;
}

h1 {
	font-family:serif;
	font-size:30px;
	line-height:1.2em;
	margin:0;
	padding:0 0 20px 0;
}

h1 .sub {
	font-size:20px;
	margin:0 0 0 10px;
}

h2 {
	font-family:serif;
	font-size:24px;
	line-height:1.0em;
	margin:0;
	padding:50px 0 10px 0;
}

h3 {
	font-family:serif;
	font-size:22px;
	line-height:1.2em;
	margin:0;
	padding:0;
	padding:30px 0 0 0;
}

h4 {

	font-size:18px;
	line-height:1.2em;
	margin:0;
	padding:0;
	padding:15px 0 0 0;
}

p {
	margin:0;
	padding:5px 0 5px 0;
	line-height:1.5em;
}

a {
	color:#0066dd;
}

a:hover {
	color:#007700;
	transition:0.5s;
}

table {
	margin:10px 0 10px 0;
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
	border-collapse:collapse;
}

th {
	padding:5px;
	text-align:center;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
	word-break:break-all;
}

td {
	padding:5px;
	text-align:center;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
	word-break:break-all;
}

table[data-type="bordernone"] {
	border:none;
}

table[data-type="bordernone"] th {
	border:none;
}

table[data-type="bordernone"] td {
	border:none;
}


iframe {
	max-width:100%;
}

#wrapper {
	max-width:1000px;
	margin:8px auto 8px auto;
	padding:0 10px 0 10px;
}



/* ========================================================================= */
/* 共通                                                                      */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* いちばん上                                                                */
/* ------------------------------------------------------------------------- */
.mosttop {
	text-align:left;
	border-bottom:solid 1px #444444;
}

.mosttop .table {
	display:table;
	width:100%;
	margin-top:10px;
}

.mosttop .td {
	display:table-cell;
	vertical-align:middle;
}

.mosttop .td[data-col="left"] {
	display:table-cell;
	width:60px;
}
.mosttop .td[data-col="left"] img {
	width:100%;
}

.mosttop .td[data-col="right"] {
	display:table-cell;
	font-family:serif;
	font-size:34px;
	letter-spacing:15px;
	line-height:0;
	padding-left:25px;
	vertical-align:middle;
}

.mosttop .bottom {
	padding-right:40px;
	text-align:right;
}

@media screen and (max-width:1000px) {
	.mosttop .td[data-col="left"] {
		width:50px;
	}

	.mosttop .td[data-col="right"] {
		font-size:26px;
		letter-spacing:5px;
		padding-left:5px;
	}

	.mosttop .bottom {
		padding-right:60px;
	}

}


/* ------------------------------------------------------------------------- */
/* 上のリンク                                                                */
/* ------------------------------------------------------------------------- */
.link_top {

}

.link_top ul {
	display:table;
	width:100%;
	padding:0;
	margin:0;
}

.link_top li {
	display:table-cell;
	padding:0;
	margin:0;
	text-align:center;
}

.link_top a {
	display:block;
	line-height:1.0em;
	width:100%;
	margin:8px 0 8px 0;
	border-right:solid 1px #444444;
}

.link_top a[data-type="last"] {
	border-right:none;
}


/* ------------------------------------------------------------------------- */
/* 下のリンク                                                                */
/* ------------------------------------------------------------------------- */
.link_bottom {

}

.link_bottom ul {
	display:table;
	width:100%;
	padding:0;
	margin:0;
}

.link_bottom li {
	display:table-cell;
	padding:0;
	margin:0;
	text-align:center;
}

.link_bottom a {
	display:block;
	line-height:1.0em;
	width:100%;
	margin:8px 0 8px 0;
	border-right:solid 1px #444444;
}

.link_bottom a[data-type="last"] {
	border-right:none;
}


/* ------------------------------------------------------------------------- */
/* 内容                                                                      */
/* ------------------------------------------------------------------------- */
.contents {
	margin-bottom:30px;
}

.contents ul {
	margin:0;
	margin-left:20px;
	padding:0;
}

.contents li {
	line-height:1.5em;
	margin:0;
	padding:0;
	padding:5px 0 5px 0;
}

.contents ul[data-type="stylenone"] {
	margin-left:0;

}

.contents ul[data-type="stylenone"] li {
	list-style:none;
}

.contents .box_link {
	padding:5px 0 10px 0;
}

.contents .box_link:before {
	content:"⇒ ";
}


.contents .box_show {
	padding:5px 0 10px 0;
	cursor:pointer;
}

.contents .box_show span {
	color:#0000ff;
	text-decoration:underline;
}

.contents .box_comment {
	margin:0 20px 20px 0;
	padding:20px;
	border:solid 1px #444444;
	box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}


@media screen and (max-width:1000px) {
	.contents {
	}
}


/* ------------------------------------------------------------------------- */
/* いちばん下                                                                */
/* ------------------------------------------------------------------------- */
.mostbottom {
	margin-top:5px;
	margin-bottom:20px;
}

.mostbottom .table {
	display:table;
	width:100%;
}

.mostbottom .td {
	display:table-cell;
}

.mostbottom .td[data-col="left"] {

}

.mostbottom .td[data-col="right"] {
	padding-right:5px;
	vertical-align:middle;
	text-align:right;
}

.mostbottom ul {
	display:inline-block;
	margin:0;
	padding:0;
}

.mostbottom li {
	display:block;
}

.mostbottom li a {

}

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

	.mostbottom {
		margin-bottom:80px;
	}

	.mostbottom .td[data-col="right"] {
		vertical-align:top;
	}

}


/* ------------------------------------------------------------------------- */
/* CopyRight                                                                 */
/* ------------------------------------------------------------------------- */
.copyright {
	font-size:14px;
	color:#444444;
	line-height:1.0em;
	padding:20px 0 20px 0;
}


/* ------------------------------------------------------------------------- */
/* カウンター                                                                */
/* ------------------------------------------------------------------------- */
.counter {
	background-color:#999999;
	font-size:12px;
	margin:5px 0 5px 0;

}


/* ------------------------------------------------------------------------- */
/* いちばん上へスクロールするボタン                                          */
/* ------------------------------------------------------------------------- */
.mostbottom_scroll {
	position:relative;
	text-align:right;
}

.mostbottom_scroll span {
	position:fixed;
	right:0;
	bottom:0;
	z-index:8;
	margin-right:20px;
	margin-bottom:45px;
	cursor:pointer;
}

.mostbottom_scroll span .back {
	position:absolute;
	opacity:0.7;
}

.mostbottom_scroll img {
	width:50px;
}


/* ------------------------------------------------------------------------- */
/* ハンバーガーメニューの開閉ボタン                                          */
/* ------------------------------------------------------------------------- */
#icon_menushow {
	display:none;
	position:relative;
	top:0;
	left:0;
	z-index:9;
}

#icon_menushow div {
	background-color:#ffffff;
	position:fixed;
	top:10px;
	right:10px;
	width:40px;
	border:solid 1px #dddddd;
	cursor:pointer;
}

#icon_menushow img {
	width:100%;
}


/* ------------------------------------------------------------------------- */
/* ハンバーガーメニュー                                                      */
/* ------------------------------------------------------------------------- */
#mobile_menu_panel {
	display:table;
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
}

#mobile_menu_panel .panel {
	display:table-cell;
}

#mobile_menu_box {
	display:none;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	overflow-x:hidden;
	background: linear-gradient(#0000ff, #000044);
	text-align:left;
	border:solid 1px #dddddd;
	box-shadow:5px 5px 15px rgba(0,0,0,0.7);
}

#mobile_menu_box ul {
	display:block;
	margin:0;
	padding:10px;
}

#mobile_menu_box li {
	display:block;
	margin:0;

}

#mobile_menu_box a {
	display:block;
	width:100%;
	padding:5px;
	color:#ffffff;
	text-decoration:none;
}

#mobile_menu_box a:hover {
	text-decoration: underline;
}

#mobile_menu_box .top {
	background-color:#74a2e9;
	background-image:url(./dir-images/background_ship.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:55px 27px;
	padding:10px 0 25px 10px;
	border-bottom:solid 1px #999999;
}

@media screen and (max-width:1000px) {
	div[ data-type="pc_menu"] {
		display:none;
	}

	#icon_menushow {
		display:block;
	}

}


/* ------------------------------------------------------------------------- */
/* パンくずリスト                                                            */
/* ------------------------------------------------------------------------- */
.pankuzu_list {
	margin:20px 0 40px 0;
}

.pankuzu_list ul {
	display:table;
	padding:0;
	margin:0;
	margin-right:auto;
}

.pankuzu_list ul li {
	display:table-cell;
	padding:0;
	margin:0;
}

.pankuzu_list ul .link:after {
	content:"　>　";
}

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

	.contents_top[data-page="sub"] {
		height:initial;
	}

}



/* ========================================================================= */
/* picture欄                                                                 */
/* ========================================================================= */
.picture {
	color:#ffffff;
	text-shadow:4px 4px 5px rgba(0,0,0,0.8);
}
.picture img {
	width:100%;
}

.picture .news {
	position:relative;
}

.picture .news .table {
	display:table;
	width:100%;
	position:absolute;
	top:0;
}

.picture .news .td {
	display:table-cell;
	vertical-align:bottom;
}

.picture span {
	background-color:rgba(0,0,0,0.4);
//	font-size:12px;
	margin:0 0 60px 60px;
	padding:10px 20px 10px 20px;
	cursor:pointer;
}

.picture ul {
	margin:0;
	padding:0;
	margin-left:10px;
}

.picture li {
	padding:4px 0 4px 0;
}

.picture li a {
	color:#ffffff;
}

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

	.picture span {
		font-size:10px;
		margin:5px;
	}

	.picture li {
		padding:2px 0 2px 0;
	}

}



/* ========================================================================= */
/* マリンメニュー                                                            */
/* ========================================================================= */
.marinemenu {

}

.marinemenu li {
	padding-bottom:30px;;
}



/* ========================================================================= */
/* 料金表                                                                    */
/* ========================================================================= */
.charge {
}

.charge h3 {
	background: linear-gradient(to right, #fafad0, #ffffff);
	margin:20px 0 10px 0;
	padding:10px;

}

.charge .table {
	display:table;
}

.charge .td {
	display:table-cell;
	vertical-align:top;
}

.charge .td[data-col="purasu"] {
	padding:30px 20px 0 20px;
}


.charge td[data-col="送迎なし"] {

}

.charge td[data-col="送迎あり"] {
	display:none;
}

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

	.charge .table {
		display:block;
	}

	.charge .td {
		display:block;
	}

	.charge .td[data-col="purasu"] {
		padding:5px;
		text-align:center;
	}

	.charge .td table {
		width:100%;
	}

}



/* ========================================================================= */
/* 目次                                                                      */
/* ========================================================================= */
.mokuji {
	margin-top:20px;
	padding:10px 0 10px 20px;
	border:solid 1px #999999;
}

.mokuji .midasi {
	font-weight:bold;
}

.mokuji li {
}

.mokuji span {
	text-decoration:underline;
	cursor:pointer;
}



/* ========================================================================= */
/* 支払い                                                                    */
/* ========================================================================= */
.payment {
	max-width:600px;
}

.payment .table {
	display:table;
	width:100%;
	table-layout:fixed;
	margin:30px 0 30px 0;
}

.payment .td {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.payment .td img {
	max-width:95%;
	margin:0 auto 0 auto;
}



/* ========================================================================= */
/* シーズナリティー・出航状況                                                */
/* ========================================================================= */
.season {

}

.season div[data-type="表"] {
	display:table;
	width:100%;
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.season div[data-type="項目"] {
	display:table-cell;
	width:80px;
	vertical-align:top;
}

.season div[data-type="情報"] {
	display:table-cell;
	vertical-align:top;
	user-select:none;
}

.season table {
	width:100%;
	table-layout:fixed;
	margin:0;
	border:none;
}

.season th {
	background-color:#ffff99;
	font-size:14px;
	line-height:1.0em;
	padding:5px 0 5px 0;
	vertical-align:middle;
}

.season td {
	font-size:14px;
	line-height:1.0em;
	padding:5px 0 5px 0;
	vertical-align:middle;
}

.season .Good {
	background-color:#ccffff;
}

.season .Normal {
	background-color:#ffffcc;
}

.season .Bad {
	background-color:#ffcccc;
}

.season .Blank {
	background-color:#ffffff;
}

.season div[data-type="凡例"] {
	max-width:300px;
	margin:10px 0 10px 0;
}

.season div[data-type="凡例"] ul {
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.season div[data-type="凡例"] li {
	padding-left:5px;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}

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

	.season div[data-type="スクロール"] {
		overflow-x:scroll;
		-ms-overflow-style:none;
		scrollbar-width:none;
		cursor:pointer;
	}

	.season div[data-type="スクロール"]::-webkit-scrollbar {
		display:none;
	}

	.season div[data-type="情報"] table {
		width:1000px;
	}

}



/* ========================================================================= */
/* 年間出航状況                                                              */
/* ========================================================================= */
.season_history {

}

.season_history #calendar {

}

.season_history #calendar div[data-type="calendar"] {
	display:inline-block;
	margin:0 5px 0 5px;
	vertical-align:top;
}

.season_history #calendar table {
	width:100%;
}

.season_history .N {

}

.season_history .Y {
	background-color:#ccffff;
}

.season_history .I {
	background-color:#ffffcc;
}

.season_history .S {
	background-color:#ccff99;
}

.season_history .C {
	background-color:#ffcc99;
}

.season_history .K {
	background-color:#ffcccc;
}

.season_history div[data-type="凡例"] {
	max-width:300px;
	margin:10px 0 10px 0;
}

.season_history div[data-type="凡例"] ul {
	border-top:solid 1px #444444;
	border-left:solid 1px #444444;
}

.season_history div[data-type="凡例"] li {
	padding-left:5px;
	border-right:solid 1px #444444;
	border-bottom:solid 1px #444444;
}


.season_history .panel_pagechange {
	background-color:#ffffff;
	position:fixed;
	left:0;
	bottom:0;
	z-index:9;
	width:100%;
}

.season_history .pagechange {
	max-width:1000px;
	margin:0 auto 0 auto;
	padding:10px 0 10px 0;
	border-top:solid 1px #dddddd;
}

.season_history .pagechange .table {
	display:table;
	width:100%;
	margin:0 auto 0 auto;
}
.season_history .pagechange .td {
	display:table-cell;
	text-align:center;
}

.season_history .pagechange .td[data-type="前の年"] {
	color:#0000ff;
	text-decoration:underline;
	cursor:pointer;
}
.season_history .pagechange .td[data-type="次の年"] {
	color:#0000ff;
	text-decoration:underline;
	cursor:pointer;
}

@media screen and (max-width:600px) {
	.season_history #calendar div[data-type="calendar"] {
		display:block;
	}
}



/* ========================================================================= */
/* 予約状況                                                                  */
/* ========================================================================= */
.reservation_calendar {

}

.reservation_calendar .p10p {
	background-color:#ccffff;
}
.reservation_calendar .p40p {
	background-color:#ffffcc;
}

.reservation_calendar .p70p {
	background-color:#ffcc99;
}

.reservation_calendar .p100p {
	background-color:#ffccff;
}

.reservation_calendar #calendar {

}

.reservation_calendar caption {
	padding:10px;
}

.reservation_calendar #calendar table {
	width:100%;
	table-layout:fixed;
}

.reservation_calendar div[data-type="凡例"] {
	max-width:300px;
}



/* ========================================================================= */
/* スケジュール                                                              */
/* ========================================================================= */
.schedule {

}

.schedule th {
	padding-top:10px;
	vertical-align:top;
}

.schedule td {
	text-align:left;
}


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

	.schedule table {
		width:100%;
	}

	.schedule tr {
		display:block;
		margin:0;
		padding:0;
	}

	.schedule th {
		display:block;
		text-align:left;
	}

	.schedule td {
		display:block;
		padding:10px 5px 10px 5px;
	}

}



/* ========================================================================= */
/* 新着情報                                                                  */
/* ========================================================================= */
.news {

}

.news .ymd {
	margin-bottom:10px;
}

.news .kiji {
	margin-bottom:40px;
	padding:10px;
	border:solid 1px #444444;
}

.news img {
	max-width:100%;
}



/* ========================================================================= */
/* よくある質問                                                              */
/* ========================================================================= */
.faq {
	margin:0;
	line-height:1.8em;
}

.faq dt {
	font-size:18px;
	margin-top:60px;
	padding:15px 10px 15px 70px;
	border:solid 1px #444444;
	border-bottom:none;
}

.faq dt .mark {
	position:relative;
	top:0;
	font-size:20px;
	color:#880000;
}
.faq dt .mark span {
	position:absolute;
	top:-20px;
	left:-50px;
}


.faq dd {
	margin:0;
	padding:15px 10px 15px 64px;
	border:solid 1px #444444;
	border-top:none;
}

.faq dd .mark {
	position:relative;
	top:0;
	font-size:20px;
	color:#888800;
}
.faq dd .mark span {
	position:absolute;
	top:-20px;
	left:-32px;
}



/* ========================================================================= */
/* ご予約・お問い合わせ                                                      */
/* ========================================================================= */
.reservation {

}

.reservation table {
	border-top:solid 4px #ffffff;
	border-left:solid 4px #ffffff;
}

.reservation th {
	border-right:solid 4px #ffffff;
	border-bottom:solid 4px #ffffff;
	text-align:right;
}

.reservation td {
	border-right:solid 4px #ffffff;
	border-bottom:solid 4px #ffffff;
	text-align:left;
}

.reservation th[data-row="1"] {
	background-color:#ffff99;
}

.reservation th[data-row="2"] {
	background-color:#ffffcc;
}

.reservation td[data-row="1"] {
	background-color:#ffff99;
}

.reservation td[data-row="2"] {
	background-color:#ffffcc;
}

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

	.reservation table {
		display:block;
	}

	.reservation tbody {
		display:block;
	}

	.reservation th {
		display:block;
		text-align:left;
		border:none;
	}

	.reservation td {
		display:block;
		padding:10px 5px 10px 5px;
		border:none;
	}

}



/* ========================================================================= */
/* フォーム                                                                  */
/* ========================================================================= */
.form {

}

.form h2 {
	margin:0;
	padding:5px 0 5px 0;
}

.form table {
	width:100%;
	border:none;
}

.form tbody {
	width:100%;
}

.form th {
	background-color:#ffffcc;
	width:250px;
	padding:10px 5px 10px 5px;
	vertical-align:top;
	font-weight:normal;
	text-align:right;
	border:none;

}
.form td {
	background-color:#ffffcc;
	padding:10px 5px 10px 5px;
	text-align:left;
	border:none;
}

.form th span {
	margin:0 5px 0 5px;
	padding:2px 5px 2px 5px;
	border:solid 2px #444444;
}

.form th span[data-type="任意"] {
	color:#0000ff;
	border-color:#0000ff;
}

.form th span[data-type="任意"]:before {
	content:"任意";
}

.form th span[data-type="必須"] {
	color:#ff0000;
	border-color:#ff0000;
}

.form th span[data-type="必須"]:before {
	content:"必須";
}

.form input[type="text"] {
	width:100%;
	padding:8px 5px 8px 5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.form input[type="radio"] {
	width:23px;
	height:23px;
	margin:3px;
	margin-left:0px;
	vertical-align:middle;
}

.form textarea {
	width:100%;
	padding:5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.form input[type="submit"] {
	margin:5px;
	padding:5px 20px 5px 20px;
}

.form input[type="reset"] {
	margin:5px;
	padding:5px 10px 5px 10px;
}

.form label {
	padding-top:1px;
	vertical-align:middle;
}

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

	.form table {
		display:block;
		width:100%;
	}

	.form tbody {
		display:block;
		width:100%;
	}

	.form th {
		display:block;
		width:100%;
		padding:30px 5px 5px 5px;
		text-align:left;
	}

	.form th span {
		float:left;
	}

	.form td {
		display:block;
		width:100%;
		padding:10px 5px 10px 5px;
	}

}



/* ========================================================================= */
/* スタッフ募集                                                              */
/* ========================================================================= */
.recruit {

}

.recruit th {

}

.recruit td {
	text-align:left;
}


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

	.recruit table {
		display:block;
	}

	.recruit tbody {
		display:block;
	}

	.recruit th {
		display:block;
	}

	.recruit td {
		display:block;
		padding:10px 5px 10px 5px;
	}

}




/* ========================================================================= */
/* 画像                                                                      */
/* ========================================================================= */
.box_image {

}

.box_image img {
	max-width:100%;
}

.box_image .table {
	display:table;
	max-width:100%;
}

.box_image .td {
	display:table-cell;
}

.box_image[data-type="ご挨拶"] .td {
	padding:20px;
	text-align:center;
}

.box_image[data-type="ご挨拶"] img {
	max-width:100%;
	max-height:200px;
}

.box_image[data-type="コース"] {
	margin:20px 0 20px 0;
}


.box_image[data-type="コース"] .td {
	width:50%;
	padding:10px;
	vertical-align:middle;
}

.box_image[data-type="コース"] .text {
	margin:8px;
}

.box_image[data-type="コース"] img {
	margin:0 auto 0 auto;
}

.box_image[data-type="ショップ"] .td {
	width:50%;
	padding:20px;
}

.box_image[data-type="ショップ"] .td img {
	margin:0 auto 0 auto;
}

.box_image[data-type="横並び"] {

}
.box_image[data-type="横並び"] img {
	max-height:100px;
}




/* ========================================================================= */
/* 開発用                                                                    */
/* ========================================================================= */
#DEV {
	position:fixed;
	top:0;
	left:0;
	z-index:99;
	margin:2px;
	background-color:#aaffaa;
}

#DEV table {
	margin:0;
}
#DEV th {
	font-size:11px;
	padding:0;
}
#DEV td {
	font-size:10px;
	padding:0;
}