/* Sea-Style マリン塾 [ スケジュール・予約状況 ] : layout_marinejuku.css */


/*======================================================================*
 *  [ タイトル ]
 *======================================================================*/

.pageTtl {
	max-width: 800px;
	margin: 0 auto;
	padding: 45px 20px;
	background: url(../img/image.png) left no-repeat;
	background-size: 37.5% auto;
}

.pageTtl h1 {
	margin-left: auto;
	text-align: center;
}
.pageTtl img { height: 12.8%; }
.pageTtl b { color: #116aaf; }

@media screen and (min-width: 768px) { /* PC */
	.pageTtl {
		padding: 45px 20px;
		background-position: left 15px center;
		background-size: 37.5% auto;
	}
	
	.pageTtl h1 { width: 62.5%; }
	.pageTtl b {
		margin-top: 35px;
		font-size: 3rem;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.pageTtl {
		padding: 5% 20px;
		background-position: left bottom;
		background-size: 32% auto;
	}
	
	.pageTtl h1 { width: 80%; }
	.pageTtl b {
		margin-top: 12px;
		font-size: 1.6rem;
	}
} /* */


/*======================================================================*
 *  [ エリア ]
 *======================================================================*/

/* [ flex ] */
.areaNav ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.areaNav li {
	display: -webkit-flex;
	display: flex;
}
.areaNav a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

/* [ 本体 ] */
.areaNav {
	max-width: 1050px;
	margin: 0 auto;
}
.areaNav ul { margin: -2px; }
.areaNav li { padding: 2px; }
.areaNav a {
	position: relative;
	width: 100%;
	padding: 5px;
	border-radius: 3px;
	background: #cbe4a6;
	color: #666;
}
.areaNav a.active, 
.areaNav a:hover, 
.areaNav a:active {
	background: #7cbc21;
	color: #fff;
}
.areaNav a.active { font-weight: bold; }
.areaNav span { padding-top: 2px; }

@media screen and (min-width: 768px) { /* PC */
	.areaNav { padding: 20px 20px 25px; }
	.areaNav li { width: 16.66%; }
	.areaNav a {
		min-height: 54px;
		font-size: 2rem;
	}
	.areaNav a.active::after {
		position: absolute;
		bottom: -14px;
		left: 50%;
		width: 0;
		height: 0;
		margin-left: -8px;
		border: 8px solid transparent;
		border-top: 14px solid #7cbc21;
		border-bottom: none;
		content: "";
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.areaNav { padding: 10px 5px 15px; }
	.areaNav li { width: 33.33%; }
	.areaNav a {
		min-height: 36px;
		font-size: 1.5rem;
	}
} /* */


/*======================================================================*
 *  [ 開催メニュー ]
 *======================================================================*/

/* [ 見出し ] */
.menuNav h2 {
	margin-bottom: 10px;
	color: #1ea8db;
}

@media screen and (min-width: 768px) { /* PC */
	.menuNav h2 { font-size: 2.2rem; }
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.menuNav h2 { font-size: 1.4rem; }
} /* */

/* [ リスト flex ] */
.menuNav li {
	display: -webkit-flex;
	display: flex;
}
.menuNav a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
}

@media screen and (min-width: 768px) { /* PC */
	.menuNav ul {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
} /* */

/* [ リスト ] */
.menuNav ul {
	border-top: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
	font-size: 1.4rem;
}
.menuNav li {
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
}
.menuNav a {
	position: relative;
	width: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: left 5px center;
	color: #000;
}
.menuNav a:hover, 
.menuNav a:active { background-color: #ebf2fa; }
.menuNav .master  a { background-image: url(../img/icon_master_gy.png); }
.menuNav .sr310   a { background-image: url(../img/icon_sr310_gy.png); }
.menuNav .fb      a { background-image: url(../img/icon_fb_gy.png); }
.menuNav .shore   a { background-image: url(../img/icon_shore_gy.png); }
.menuNav .fishing a { background-image: url(../img/icon_fishing_gy.png); }
.menuNav .anchor  a { background-image: url(../img/icon_anchor_gy.png); }
.menuNav .mj      a { background-image: url(../img/icon_mj_gy.png); }
.menuNav .yacht   a { background-image: url(../img/icon_yacht_gy.png); }
.menuNav span { padding-top: 2px; }
.menuNav a::before {
	position: absolute;
	top: 50%;
	right: 9px;
	width: 13px;
	margin-top: -5px;
	content: url(../img/arrow_bottom_bl.svg);
}

@media screen and (min-width: 768px) { /* PC */
	.menuNav li { width: 33.33%; }
	.menuNav a {
		min-height: 44px;
		padding: 5px 22px 5px 50px;
		background-size: 40px auto;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.menuNav a {
		min-height: 38px;
		padding: 5px 30px 5px 40px;
		background-size: 30px auto;
	}
} /* */


/*======================================================================*
 *  [ 開催スケジュール ]
 *======================================================================*/

/* [ なしの場合 ] */
.noText {
	padding: 50px 20px;
	border: 1px solid #d9d9d9;
	background: #fff;
	text-align: center;
}
.noText p {
	color: #1ea8db;
	font-size: 2.2rem;
}

@media screen and (max-width: 767px) { /* Smartphone */
	.noText { padding: 50px 10px; }
	.noText p { font-size: 1.6rem; }
} /* */

/* [ 税込 ] */
.taxText { margin-bottom: -30px !important; }
.taxText p {
	padding-left: 1em;
	font-size: 1.4rem;
	text-indent: -1em;
	text-align: right;
}

/* [ 枠 ] */
@media screen and (min-width: 768px) { /* PC */
	.scheduleList { margin-bottom: 70px !important; }
	.scheduleList:nth-last-of-type(1) { margin-bottom: 140px !important; }
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.scheduleList { margin: 50px auto !important; }
} /* */


/* [ タイトル ] */
.scheduleList h2 {
	background-color: #1ea8db;
	background-repeat: no-repeat;
	background-position: left 10px center;
	color: #fff;
}
.scheduleList .master  { background-image: url(../img/icon_master_wh.png); }
.scheduleList .sr310   { background-image: url(../img/icon_sr310_wh.png); }
.scheduleList .fb      { background-image: url(../img/icon_fb_wh.png); }
.scheduleList .shore   { background-image: url(../img/icon_shore_wh.png); }
.scheduleList .fishing { background-image: url(../img/icon_fishing_wh.png); }
.scheduleList .anchor  { background-image: url(../img/icon_anchor_wh.png); }
.scheduleList .mj      { background-image: url(../img/icon_mj_wh.png); }
.scheduleList .yacht   { background-image: url(../img/icon_yacht_wh.png); }
.scheduleList .floating {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 1010px;
	visibility: hidden;
	z-index: 200;
}
.scheduleList h2 span { padding-top: 2px; }

@media screen and (min-width: 768px) { /* PC */
	.scheduleList h2 {
		margin-bottom: 10px;
		padding: 12px 20px 12px 75px;
		font-size: 2rem;
		background-size: 55px;
	}
	.scheduleList .yacht {
		background-position: left 15px center;
		background-size: 45px;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.scheduleList h2 {
		margin: 0 -15px 15px -15px;
		padding: 12px 15px 12px 65px;
		font-size: 1.6rem;
		background-size: 45px;
	}
} /* */

/* [ テキスト ] */
.scheduleList .ltd {
	color: #d72424;
	font-weight: bold;
}

/* [ リスト ] */
.scheduleList .date {
	background: #d4e5fa;
	font-weight: normal;
}
.scheduleList .marina { background: #ebf2fa; }
.scheduleList .marina a:hover, 
.scheduleList .marina a:active { text-decoration: underline; }
.scheduleList .btn a, 
.scheduleList .btn span {
	display: block;
	border-radius: 3px;
	line-height: 1;
	text-align: center;
}
.scheduleList .btn a {
	background: url(../img/arrow_right_wh.svg) right 5px center no-repeat #53aa3e;
	background-size: 9px 13px;
	color: #fff;
}
.scheduleList .btn a:hover, 
.scheduleList .btn a:active { background-color: #72cd33; }
.scheduleList .btn span {
	background: #d0d8ce;
	color: #9f9e9e;
}

/* [ ステータス ] */
.scheduleList [data-sts="休日"] { color: #ff0000; }
.scheduleList [data-sts="催行"] { color: #1b710f; }
.scheduleList [data-sts="満席"] { color: #666; }
.scheduleList [data-sts="終了"] { color: #666; }

@media screen and (min-width: 768px) { /* PC */
	.scheduleList table, 
	.scheduleList th, 
	.scheduleList td { border: 1px solid #cacaca; }
	.scheduleList table {
		width: 100%;
		font-size: 1.4rem;
		line-height: 1.2;
	}
	.scheduleList thead th {
		background: #eaeaea;
		color: #636363;
		font-weight: normal;
		white-space: nowrap;
	}
	.scheduleList th, 
	.scheduleList td { padding: 12px 10px 10px; }
	.scheduleList tbody th { text-align: left; }
	.scheduleList tbody td { text-align: center; }
	.scheduleList .date {
		width: 16%;
		min-width: 4em;
	}
	.scheduleList .model {
		width: 9%;
		text-align: left;
	}
	.scheduleList .price {
		width: 10%;
		white-space: nowrap;
	}
	.scheduleList .cap {
		width: 14%;
		min-width: 7.2em;
	}
	.scheduleList .sts {
		width: 11%;
		background: #f5fff3;
	}
	.scheduleList .btn {
		width: 16%;
		white-space: nowrap;
		background: #f5fff3;
	}
	.scheduleList .btn a, 
	.scheduleList .btn span {
		margin-top: -2px;
		padding: 11px 20px 9px 20px;
		font-size: 1.6rem;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.scheduleList table, 
	.scheduleList tbody, 
	.scheduleList tr, 
	.scheduleList td { display: block; }
	.scheduleList thead { display: none; }
	.scheduleList tbody tr { position: relative; }
	.scheduleList tbody tr + tr { margin-top: 25px; }
	.scheduleList tbody th {
		padding: 10px;
		text-align: left;
	}
	.scheduleList .date {
		width: 20%;
		min-width: 11.6em;
	}
	.scheduleList .model, 
	.scheduleList .price, 
	.scheduleList .cap {
		width: 55%;
		padding: 0 10px;
	}
	.scheduleList .model { padding-top: 12px; }
	.scheduleList .price, 
	.scheduleList .cap { padding-top: 6px; }
	.scheduleList .model::before { content: "使用艇："; }
	.scheduleList .price::before { content: "料金："; }
	.scheduleList .cap::before   { content: "定員："; }
	.scheduleList .sts, 
	.scheduleList .btn {
		position: absolute;
		right: 0;
		width: 45%;
	}
	.scheduleList .sts {
		bottom: 35px;
		text-align: center;
	}
	.scheduleList .sts::before   { content: "予約数："; }
	.scheduleList .btn { bottom: 0; }
	.scheduleList .btn a, 
	.scheduleList .btn span {
		padding: 8px 20px;
		font-size: 1.4rem;
	}
} /* */


/*======================================================================*
 *  [ 注釈 ]
 *======================================================================*/

/* [ タイトル ] */
.attentionText h2 {
	margin-bottom: 25px;
	background: url(../img/attention.svg) center top no-repeat;
	color: #d72424;
	font-weight: normal;
	text-align: center;
}

@media screen and (min-width: 768px) { /* PC */
	.attentionText h2 {
		padding-top: 60px;
		background-size: 50px 45px;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.attentionText h2 {
		padding-top: 40px;
		background-size: 34px 31px;
	}
} /* */

/* [ テキスト ] */
.attentionText ul { line-height: 1.5; }
.attentionText li { padding-left: 1em; }
.attentionText li + li { margin-top: 10px; }
.attentionText li::before {
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	font-weight: bold;
	content: "・";
}

@media screen and (min-width: 768px) { /* PC */
	.attentionText ul {
		padding: 0 20px;
		font-size: 1.4rem;
	}
} /* */


/*======================================================================*
 *  [ inquiryText ]
 *======================================================================*/

/* [ タイトル ] */
.inquiryText h2 {
	color: #3b3b3b;
	font-weight: normal;
	text-align: center;
}
.inquiryText h2 span { border: 1px solid #7c7c7c; }

@media screen and (min-width: 768px) { /* PC */
	.inquiryText h2 {
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.inquiryText h2 span { padding: 7px 20px 5px; }
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.inquiryText h2 { margin-bottom: 15px; }
	.inquiryText h2 span { padding: 5px 15px 3px; }
} /* */

/* [ テキスト ] */
.inquiryText dl { text-align: center; }
.inquiryText dt { font-weight: bold; }


@media screen and (min-width: 768px) { /* PC */
	.inquiryText { margin: 50px auto 70px !important; }
	.inquiryText dt, 
	.inquiryText dd {
		display: inline-block;
		margin: 15px 5px 0;
	}
	.inquiryText dt { font-size: 1.8rem; }
	.inquiryText .tel {
		width: 270px;
		vertical-align: bottom;
	}
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.inquiryText dt, 
	.inquiryText dd { margin-top: 10px; }
	.inquiryText dt { font-size: 1.4rem; }
	.inquiryText .tel { width: 210px; }
} /* */

/*======================================================================*
 *  [ 長期休暇テキスト ]
 *======================================================================*/

/* [ テキスト ] */
.hoText {
	padding: 5px 20px;
	border: 1px solid #d72424;
	background: #fff;
}
.hoText p {
	color: #d72424;
}

@media screen and (max-width: 767px) { /* Smartphone */
	.hoText { padding: 0px 10px; }
	.hoText p { font-size: 1.4rem; }
} /* */


/*======================================================================*
 *  [ カード決済案内テキスト ]
 *======================================================================*/
.guidbox{
    padding: 0.5em 1em;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #1ea8db;/*左線*/
    border-right: double 7px #1ea8db;/*右線*/
}
.guidbox p {
    margin: 0; 
    padding: 5px;
    line-height: 25px;
}