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


.contentsWidth {
	color: #000;
	font-size: 1.6rem;
	font-weight: 500;
}

.contentsWidth *, 
.contentsWidth *::before,
.contentsWidth *::after { box-sizing: border-box; }

.contentsWidth a {
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}

@media screen and (max-width: 568px) {
	.contentsWidth { font-size: 1.4rem; }
} /* */


/*======================================================================*
 *  [ メイン画像 ] 
 *======================================================================*/

.promotionArea { margin-bottom: 30px; }


/*======================================================================*
 *  [ キャッチコピー ] 
 *======================================================================*/

.catchCopy {
	margin-bottom: 30px;
	text-align: center;
}
.catchCopy > b { font-size:3rem; }
.catchCopy p { font-size:1.6rem; }
.catchCopy p span { display: inline-block; }

@media screen and (max-width: 568px) {
	.catchCopy > b { font-size:2.4rem; }
	.catchCopy p { font-size:1.4rem; }
} /* */


/*======================================================================*
 *  [ 保証について ] 
 *======================================================================*/

.warrantyBox {
	margin-bottom: 30px;
	padding: 20px;
	background: #ECF4FA;
	text-align: center;
}
.warrantyBox p { margin-bottom: 20px; }
.warrantyBox a {
	display: inline-block;
	padding: 10px 62px 10px 20px;
	border: 1px solid #4794CF;
	background: url(../img/arrow_lblue.svg) right 20px center no-repeat #fff;
	background-size: 32px 12px;
	color: #4794CF;
}
.warrantyBox a:hover,
.warrantyBox a:active { background-color: #ECF4FA; }

@media screen and (max-width: 568px) {
	.warrantyBox { padding: 15px 10px; }
	.warrantyBox p { margin-bottom: 10px }
} /* */


/*======================================================================*
 *  [ タブ ] 
 *======================================================================*/

.contentsNav {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
	text-align: center;
}
.contentsNav a {
	width: calc(50% - 5px);
	padding: 15px;
	background: #ECF4FA;
	color: #3364C2;
	border: 1px solid transparent;
}
.contentsNav a.active, 
.contentsNav a.active:hover, 
.contentsNav a.active:active {
	position: relative;
	background: #3364C2;
	border-color: transparent !important;
	color: #fff !important;
}
.contentsNav a.active::after {
	position: absolute;
	left: calc(50% - 8px);
	bottom: -12px;
	width: 16px;
	height: 12px;
	border: 8px solid transparent;
	border-top: 12px solid #3364C2;
	border-bottom: none;
	content: "";
}

@media screen and (max-width: 568px) {
	.contentsNav { margin-bottom: 30px; }
	.contentsNav a { padding: 10px; }
} /* */