/* Y'S GEAR : sp_guide.css */


/*==============================================*
 *  [ guideMain ] 
 *==============================================*/

.guideMain {
	padding: 40px 60px 60px;
	background: url(../img/main_bg.png) left top repeat;
	background-size: 8px 8px;
}

/* [ タイトル ] */
.guideMain .ttl { text-align: center; }
.guideMain .ttl span {
	padding: 0 70px;
	background-image: url(../img/main_kira.png), url(../img/main_kirakira.png);
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto 80%, auto 80%;
}

/* [ テキスト ] */
.guideMain .txt {
	min-height: 145px;
	margin: 40px 0 60px;
	padding: 5px 0 0 33.33%;
	background: url(../img/main_image.png) left 4.165% center no-repeat;
	background-size: 25%;
	font-size: 2rem;
	font-weight: bold;
}

/* [ ページ内リンク ] */
.guideMain .nav {
	display: -webkit-flex;
	display: flex;
}
.guideMain .nav a {
	position: relative;
	width: 33.33%;
	color: #fff;
	line-height: 1.2;
	text-align: center;
}
.guideMain .nav a:hover, 
.guideMain .nav a:active {
	color: #fff !important;
}
.guideMain .nav a + a {
	margin-left: 20px;
}
.guideMain .nav div {
	position: absolute;
	top: 50%;
	left:  50%;
	width: 100%;
	padding: 0 10px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.guideMain .nav b {
	font-size: 2.4rem;
}
.guideMain .nav p {
	margin: 5px 0 0;
}

@media screen and (max-width: 768px) {
	.guideMain { padding: 40px 30px 60px; }
	
	/* [ ページ内リンク ] */
	.guideMain .nav p { display: none; }
} /* */

@media screen and (max-width: 568px) {
	.guideMain { padding: 20px 10px 30px; }
	
	/* [ タイトル ] */
	.guideMain .ttl span {
		padding: 0 15px;
		background: url(../img/main_kira.png) left top no-repeat;
		background-size: 15%;
	}
	
	/* [ テキスト ] */
	.guideMain .txt {
		margin: 0 0 30px;
		padding: 150px 0 0;
		background: url(../img/main_kirakira.png), url(../img/main_image.png);
		background-position: right top, center top;
		background-repeat: no-repeat, no-repeat;
		background-size: 15% auto, auto 130px;
		font-size: 1.8rem;
	}
	
	/* [ ページ内リンク ] */
	.guideMain .nav a + a { margin-left: 10px; }
	.guideMain .nav div { padding: 0; }
	.guideMain .nav b { font-size: 1.6rem; }
} /* */


/*==============================================*
 *  [ lineupContents ] 
 *==============================================*/

.lineupContents .ttl.boat { background-image: url(../img/boat_ttl.png); }
.lineupContents .ttl.mj { background-image: url(../img/mj_ttl.png); }
.lineupContents .ttl.outboad { background-image: url(../img/outboad_ttl.png); }

@media screen and (min-width: 569px) {
	.lineupContents .carousel .item.col3 { width: calc(33.33% - 30px); }
	.lineupContents .carousel .item.col3:nth-of-type(3) ~ .item { margin-top: 30px; }
	
	.lineupContents .bg {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.lineupContents .bg.mj .img {
		width: calc(50% - 15px);
		background: url(../img/mj_bg.jpg) center center no-repeat;
		background-size: contain;
	}
	.lineupContents .bg.mj .carousel { width: calc(50% + 15px); }
	.lineupContents .bg.mj .carousel .item { width: 100%; }
	.lineupContents .bg.outboad .img {
		width: calc(33.33% - 20px);
		background: url(../img/outboad_bg.jpg) center center no-repeat;
		background-size: contain;
	}
	.lineupContents .bg.outboad .carousel { width: calc(66.66% + 20px); }
} /* */

@media screen and (max-width: 568px) {
	.lineupContents .bg .img {
		height: 185px;
		margin-bottom: 30px;
	}
	.lineupContents .bg.mj .img {
		background: url(../img/mj_bg_sp.jpg) center bottom no-repeat;
		background-size: auto auto;
	}
	.lineupContents .bg.outboad .img {
		background: url(../img/outboad_bg_sp.jpg) center bottom no-repeat;
		background-size: auto auto;
	}
} /* */