/* Y'S GEAR : /marine/play/fsc/css/layout.css */


/*======================================================================*
 *  [ contentsWidth ] 
 *======================================================================*/

.contentsWidth {
	padding-bottom: 1px;
	background: #192a60;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.6;
}

.contentsWidth span, 
.contentsWidth b {
	display: inline-block;
}

.contentsWidth .comment {
	padding: 20px;
	background: #0c1530;
	color: #fff;
	text-align: center;
}


/*======================================================================*
 *  [ mainBox ] 
 *======================================================================*/

.mainBox {
	margin-bottom: 50px;
	padding: 40px 20px 0 20px;
	background: url(../img/img_main.jpg) right bottom no-repeat;
	background-size: cover;
}

.mainBox h2 {
	margin-bottom: 10px;
	font-size: 3rem;
}
.mainBox h2 + p {
	margin-bottom: 50px;
	font-size: 1.2rem;
}
.mainBox h2 + p span {
	display: inline-block;
}

.mainBox .description {
	margin-bottom: 30px;
	font-size: 1.5rem;
	line-height: 1.8;
}

.mainBox .caption {
	padding: 10px 20px;
	background: rgba(0,0,0,.5);
	font-size: 1.2rem;
}


/*======================================================================*
 *  [ sectionBox ] 
 *======================================================================*/

.sectionBox {
	margin-bottom: 50px;
	padding: 0 20px;
}

.sectionBox h3 {
	margin-bottom: 20px;
	font-size: 2.4rem;
}

.sectionBox p {
	margin-bottom: 20px;
}
.sectionBox .first:first-letter {
	font-size: 3rem;
}
.sectionBox .last {
	font-size: 1.8rem;
}
.sectionBox .note {
	margin-top: 50px;
	padding: 10px 20px 10px calc(20px + 1em);
	text-indent: -1em;
	line-height: 1.2;
	background: rgba(0,0,0,.5);
}
.sectionBox .note::before { content: "※"; }


/*======================================================================*
 *  [ riggingBox ] 
 *======================================================================*/

.riggingBox {
	margin-right: 20px;
	margin-left: 20px;
	padding: 20px 20px 0 20px;
	background: #475580;
}

.riggingBox h3 {
	padding: 10px;
	border-left: 10px solid #d9e14e;
	font-size: 2rem;
	line-height: 1.2;
}

.riggingBox .boat {
	margin-bottom: 30px;
}


/*======================================================================*
 *  [ riggingList ] 
 *======================================================================*/

.riggingList {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -7px 0 -8px;
}

.riggingList section {
	width: 33.33333333%;
	margin-bottom: 30px;
	padding: 0 7px 0 8px;
	box-sizing: border-box;
}

.riggingList figure {
	position: relative;
	margin-bottom: 15px;
}
.riggingList figure img {
	width: 100%;
}
.riggingList figure span {
	position: absolute;
	top: -7px;
	left: -7px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #d9e14e;
	color: #000;
	font-size: 2rem;
	font-weight: bold;
	line-height: 40px;
	font-family: メイリオ;
	text-align: center;
}

.riggingList h4 {
	margin-bottom: 10px;
	font-size: 1.6rem;
	line-height: 1.2;
}
.riggingList h4 span {
	margin-bottom: 5px;
	font-size: 1.2rem;
	font-weight: normal;
}

.riggingList p {
	font-size: 1.3rem;
}

.riggingList a {
	display: block;
	position: relative;
	margin-bottom: 20px;
	padding: 10px;
	background: #fff;
	color: #192a60;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}
.riggingList a::after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-top: 1px solid #192a60;
	border-right: 1px solid #192a60;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.riggingList a:hover, 
.riggingList a:active {
	background: #192a60;
	color: #fff !important;
}
.riggingList a:hover::after, 
.riggingList a:active::after {
	border-color: #fff;
}


/*======================================================================*
 *  [ figureBox ] 
 *======================================================================*/

.figureBox {
	margin: 50px 0 50px 0;
}
.figureBox.cf {
	margin-bottom: 30px;
}
.figureBox + .figureBox {
	margin-top: -20px;
}

.figureBox figure {
	margin-bottom: 20px;
	box-sizing: border-box;
}
.figureBox figure img {
	width: 100%;
}
.figureBox figcaption {
	margin-top: 10px;
	font-size: 1.2rem;
	line-height: 1.4;
}

/* [ 2カラム ] */
.figureBox.col2 {
	margin-right: -10px;
	margin-left: -10px;
}
.figureBox.col2 figure {
	float: left;
	width: 50%;
	padding: 0 10px;
}

/* [ 3カラム ] */
.figureBox.col3 {
	margin-right: -10px;
	margin-left: -10px;
}
.figureBox.col3 figure {
	float: left;
	width: 33.33333333%;
	padding: 0 10px;
}


/*======================================================================*
 *  [ campaignBnr ] 
 *======================================================================*/

.campaignBnr {
	text-align: center;
}

.campaignBnr a {
	display: block;
}


/*+ [ 980px 以下 ] +++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*======================================================================*
 *  [ Media Queries 980 ]
 *======================================================================*/

@media screen and (max-width: 980px) {
	
	/*==================================================================*
	 *  [ contentsWidth ] 
	 *==================================================================*/
	
	.contentsWidth {
		padding: 0  0 1px 0!important;
	}
	
}


/*+ [ 768px 以下 ] +++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*======================================================================*
 *  [ Media Queries 768 ] iPad 縦 含む
 *======================================================================*/

@media screen and (max-width: 768px) {
	
	/*==================================================================*
	 *  [ mainBox ] 
	 *==================================================================*/
	
	.mainBox {
		padding-top: 20px;
		background-position: right top;
		background-size: 150% auto;
	}
	
	.mainBox h2 + p {
		margin-bottom: 40%;
	}
	
	
	/*==================================================================*
	 *  [ riggingList ] 
	 *==================================================================*/
	
	.riggingList section {
		width: 50%;
	}
	
}



/*+ [ 568px 以下 ] +++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	/*==================================================================*
	 *  [ mainBox ] 
	 *==================================================================*/
	
	.mainBox {
		background-size: 180% auto;
	}
	
	.mainBox h2 + p {
		margin-bottom: 45%;
		padding: 2px 0;
		background: rgba(0,0,0,.5);
		font-size: 1rem;
		line-height: 1.2;
		text-align: center;
	}
	
	.mainBox .description {
		margin-bottom: 10px;
		font-size: 1.4rem;
	}
	.mainBox .description br {
		display: none;
	}
	
	.mainBox .caption {
		padding: 10px;
	}
	
	
	/*======================================================================*
	 *  [ sectionBox ] 
	 *======================================================================*/
	
	.sectionBox .note {
		padding: 10px 10px 10px calc(10px + 1em);
	}
}


/*+ [ 480px 以下 ] +++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*======================================================================*
 *  [ Media Queries 480 ] 
 *======================================================================*/

@media screen and (max-width: 480px) {
	
	/*==================================================================*
	 *  [ riggingList ] 
	 *==================================================================*/
	
	.riggingList section {
		width: 100%;
	}


/*======================================================================*
 *  [ figureBox ] 
 *======================================================================*/

	.figureBox.cf {
		margin-bottom: 50px;
	}
	.figureBox + .figureBox {
		margin-top: -30px;
	}
	
	/* [ 2カラム ] */
	.figureBox.col2 figure {
		float: none;
		width: 100%;
	}
	
	/* [ 3カラム ] */
	.figureBox.col3 figure {
		float: none;
		width: 100%;
	}
	
}