@charset "utf-8";

/*==========================================================
	料金システム (枠)
==========================================================*/
.contents_system{
	position: relative;
	width: 100%;
	margin: 0px auto;
	padding: 40px 10px 20px 10px;
}

.contents_system h2{
	position: relative;
	height: 40px;
	margin: 0px 0px -20px 0px;
	padding: 0px 0px 0px 55px;
	line-height: 40px;
	color: #1565C0;
	font-size: 32px;
	font-weight: 600;
}

.contents_system h2:before{
	content: "\f13d";
	display: inline-block;
	position: absolute;
	top: 0px; bottom: 0px; left: 5px;
	width: 40px; height: 40px;
	margin: auto 0px;
	padding: 0em;
	line-height: 42px;
	text-align: center;
	color: #1565C0;
	font-size: 40px;
	font-weight: normal;
	font-family: 'FontAwesome';
}


/*==========================================================
	料金システム
==========================================================*/
.system_box{
	width: 100%;
	margin: 0px auto;
}

.system_box h3{
	width: 100%; height: 60px;
	margin: 20px auto 0px auto;
	padding: 0px 20px;
	line-height: 60px;
	text-align: left;
	letter-spacing: 0.1em;
	font-size: 28px;
	font-weight: 600;
	box-shadow: 1px 1px 0px rgba(255,255,255,0.8) inset, -1px -1px 0px rgba(80,80,80,0.2) inset;
}

.system_box h3 span{
	display: inline-block;
	margin: 0px 0px 0px 10px;
	letter-spacing: -0.05em;
	vertical-align: middle;
	font-size: 16px;
	font-weight: 200;
}

/*大物カジキトローリングコース (スタイル：ライブベイトフィッシング／ルアーフィッシング) */
.trawling_style{
	width: 98%; height: 50px;
	margin: 5px auto -20px auto;
	padding: 0px 0px 0px 10px;
	line-height: 50px;
	letter-spacing: 0.1em;
	font-size: 26px;
	font-weight: 600;
}

/*トローリングタックル／電動タックル (レンタル料) */
.electric_tackle,
.trawling_tackle{
	width: 98%;
	margin: -10px auto 20px auto;
	padding: 0px 0px 0px 10px;
	line-height: 1.6em;
	letter-spacing: 0.1em;
	color: #DD0000;
	font-size: 18px;
	font-weight: 600;
}

.electric_tackle span,
.trawling_tackle span{
	display: inline-block;
	margin: 0px 5px;
	letter-spacing: 0.05em;
	font-size: 14px;
}

.electric_tackle span > span,
.trawling_tackle span > span{
	display: inline-block;
	margin: 0px 5px 0px 0px;
	font-size: 16px;
}

/*乗り合い／チャーター*/
.system_box h4{
	position: relative;
	width: 92.5%; height: 50px;
	margin: 20px 0px 0px 40px;
	padding: 0px 0px 0px 25px;
	line-height: 50px;
	font-size: 26px;
	border-radius: 0px 10px 10px 0px;
}

.system_box h4 span{
	display: inline-block;
	margin: 0px 0px 0px 5px;
	font-size: 20px;
}

.system_box h4:before{
	content: "\f21a";
	display: inline-block;
	position: absolute;
	top: 50%; left: -1.35em;
	width: 50px; height: 50px;
	padding: 0em;
	line-height: 50px;
	text-align: center;
	color: #FFFFFF;
	font-weight: normal;
	font-family: FontAwesome;
	border: solid 3px #FFFFFF;
	border-radius: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*乗り合い*/
.system_box h4.title_share{
	color: #0F387D;
	border-bottom: solid 3px #0F387D;
	background-color: #ECEFF1;
}

.system_box h4.title_share:before{
	background-color: #0F387D;
}

/*チャーター*/
.system_box h4.title_charter{
	line-height: 36px;
	color: #FF9800;
	border-bottom: solid 3px #FF9800;
	background-color: #ECEFF1;
}

.system_box h4.title_charter:before{
	background-color: #FF9800;
}

/*体験*/
.system_box h4.title_trial{
	color: #4CAF50;
	border-bottom: solid 3px #4CAF50;
	background-color: #ECEFF1;
}

.system_box h4.title_trial:before{
	background-color: #4CAF50;
}

/*コース内容*/
.system_box h5{
	width: 98%; height: 30px;
	margin: 0px auto;
	padding: 0px 5px;
	line-height: 30px;
	text-align: left;
	font-size: 24px;
}

.system_box ol{
	counter-reset: number;
	width: 98%;
	margin: 10px auto;
	list-style-type: none !important;
}

.system_box ol li{
	display: table;
	position: relative;
	width: 100%;
	padding: 10px 0px 10px 40px;
	line-height: 1.6em;
	font-size: 18px;
	border-bottom: dashed 1px #D0D0D0;
}

.system_box ol li:before{
	content: counter(number);
	counter-increment: number;
	display: inline-block;
	position: absolute;
	top: 50%; left: 5px;
	width: 30px; height: 30px;
	line-height: 30px;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background-color: #404040;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.system_box ol li span{
	display: table-cell;
	width: 100px;
	letter-spacing: 0.1em;
	text-align: center;
}

/*コース説明*/
.system_box p{
	width: 98%;
	margin: 0px auto;
	padding: 5px 10px;
	line-height: 1.6em;
	text-align: left;
	font-size: 20px;
}

/*料金*/
.system_box table{
	width: 98%;
	margin: 10px auto;
	border-collapse: separate;
	border-spacing: 2px 0px;
}

/*大物マグロ釣りコース*/
.system_box table.maguro_fishing{
	width: 301px;
	margin: 10px 0px 10px 6.5px;
	border-collapse: separate;
	border-spacing: 2px 0px;
}

.system_box table tr th{
	position: relative;
	width: 50%; height: 60px;
	padding: 10px 0px 0px 0px;
	line-height: 50px;
	vertical-align: middle;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 400;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset;
	border-radius: 5px 5px 0px 0px;
}

.system_box table tr th:after{
	content: '';
	position: absolute;
	top: 59px; left: 0px; right: 0px;
	width: 0; height: 0;
	margin: 0px auto;
	pointer-events: none;
	border: 150px solid transparent;
}

.system_box table tr td{
	width: 50%; height: 70px;
	padding: 20px 0px 0px 0px;
	line-height: 60px;
	text-align: center;
	font-size: 30px;
	border: none;
	box-shadow: 0px -2px 2px rgba(0,0,0,0.2) inset;
	border-radius: 0px 0px 5px 5px;
}

.system_box table tr td span{
	display: inline-block;
	margin: 0px 5px -5px 5px;
	vertical-align: middle;
	letter-spacing: 0.05em;
	font-size: 14px;
}

.system_box table tr td span > span{
	display: inline-block;
	margin: 0px 5px 5px 0px;
	font-size: 16px;
}

/*料金 (乗り合い)*/
.system_box table.share tr th{
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(17,63,140,0.8) 1%, rgba(15,56,125,1) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(17,63,140,0.6)),color-stop(100%,rgba(15,56,125,1)));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,rgba(17,63,140,0.8) 1%,rgba(15,56,125,1) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,rgba(17,63,140,0.8) 1%,rgba(15,56,125,1) 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top,rgba(17,63,140,0.8) 1%,rgba(15,56,125,1) 100%);
	/* IE10+ */
	background: linear-gradient(to bottom,rgba(17,63,140,0.8) 1%,rgba(15,56,125,1) 100%);
}

.system_box table.share tr th:after{
	border-top: solid 20px #0F387D;
}

.system_box table.share tr td{
	color: #0F387D;
	background-color: #ECEFF1;
}

/*料金 (チャーター)*/
.system_box table.charter tr th{
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,201,122,0.8) 1%, rgba(255,152,0,1) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,201,122,0.6)),color-stop(100%,rgba(255,152,0,1)));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,rgba(255,201,122,0.8) 1%,rgba(255,152,0,1) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,rgba(255,201,122,0.8) 1%,rgba(255,152,0,1) 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top,rgba(255,201,122,0.8) 1%,rgba(255,152,0,1) 100%);
	/* IE10+ */
	background: linear-gradient(to bottom,rgba(255,201,122,0.8) 1%,rgba(255,152,0,1) 100%);
}

.system_box table.charter tr th.rental{
	padding: 0px;
}

.system_box table.charter tr th span{
	position: absolute;
	bottom: -20px; left: 0px; right: 0px;
	font-size: 18px;
	z-index: 99;
}

.system_box table.charter tr th:after{
	border-top: solid 20px #FF9800;
}

.system_box table.charter tr td{
	color: #FF9800;
	background-color: #ECEFF1;
}

/*料金 (体験)*/
.system_box table.trial tr th{
	/* Old browsers */
	background: -moz-linear-gradient(top, rgba(143,243,148,0.8) 1%, rgba(76,175,80,1) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(143,243,148,0.6)),color-stop(100%,rgba(76,175,80,1)));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,rgba(143,243,148,0.8) 1%,rgba(76,175,80,1) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,rgba(143,243,148,0.8) 1%,rgba(76,175,80,1) 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top,rgba(143,243,148,0.8) 1%,rgba(76,175,80,1) 100%);
	/* IE10+ */
	background: linear-gradient(to bottom,rgba(143,243,148,0.8) 1%,rgba(76,175,80,1) 100%);
}

.system_box table.trial tr th:after{
	border-top: solid 20px #4CAF50;
}

.system_box table.trial tr td{
	color: #4CAF50;
	background-color: #ECEFF1;
}


/*==========================================================
	お問合せ
==========================================================*/
.system_enquiry{
	width: 100%;
	margin: 40px auto 0px auto;
}

.system_enquiry h2{
	text-align: center;
	color: #3C3D52;
	font-size: 14px;
	font-weight: 400;
}

.system_enquiry p{
	width: 500px; height: 65px;
	margin: 10px auto 0px auto;
	line-height: 58px;
	text-align: center;
	color: #3D6493;
	font-size: 36px;
	font-weight: 600;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border: solid 4px #3D6493;
	background-color: #FFFFFF;
}