/* Y'S GEAR : lineup.css */


.contentsWidth > section { margin-bottom: 60px; }
.contentsWidth > section > section { margin-bottom: 40px; }
.contentsWidth h2 {
	margin-bottom: 30px;
	color: #606060;
	border-bottom: 1px solid #a5a5a5;
	font-family: 'Lato', sans-serif;
	font-size: 2.8rem;
	font-weight: 300;
	line-height: .8;
}
.contentsWidth h3 {
	margin-bottom: 30px;
	padding: 4px 0 4px 6px;
	border-left: 6px solid #003965;
	color: #003965;
	font-size: 2rem;
	line-height: 1.1;
}

@media screen and (max-width: 568px) {
	.contentsWidth h2 { margin-bottom: 20px; }
	.contentsWidth h3 {
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
} /* */


/*======================================================================*
 *  [ seriesBox ] 
 *======================================================================*/

.seriesBox { border: 3px solid #ECF4FA; }
.seriesBox h3 {
	margin-bottom: 0;
	padding: 17px;
	border-left: none;
	background: #ECF4FA;
	color: #4794CF;
	font-size: 2rem;
	line-height: 1.1;
}
.seriesBox > section { padding: 25px 17px; }
.seriesBox > section + section { border-top: 3px solid #ECF4FA; }

.seriesBox .subttl {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 25px;
}
.seriesBox .subttl h4 {
	flex: 1;
	padding: 4px 0 4px 6px;
	border-left: 6px solid #003965;
	color: #003965;
	font-size: 2rem;
	line-height: 1.1;
}
.seriesBox .subttl p { text-align: right; }
.seriesBox .subttl p img { margin-left: 5px; }
.seriesBox .subttl p br ~ img { margin-top: 5px; }

@media screen and (max-width: 568px) {
	.seriesBox h3 { padding: 12px 7px; }
	.seriesBox > section { padding: 20px 12px; }

	.seriesBox .subttl {
		display: block;
		margin-bottom: 20px;
		font-size: 1.8rem;
	}
	.seriesBox .subttl h4 {
		margin-bottom: 10px;
		font-size: 1.8rem;
	}
} /* */


/*======================================================================*
 *  [ modelBox ] 
 *======================================================================*/

.modelBox {
	display: flex;
	justify-content: space-between;
}
.modelBox + .modelBox {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 3px solid #ECF4FA;
}
.modelBox .img { width: 33.33%; }
.modelBox .detail { width: calc(66.66% - 15px); }

@media screen and (max-width: 568px) {
	.modelBox {
		display: block;
	}
	.modelBox + .modelBox {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 3px solid #ECF4FA;
	}
	.modelBox .img {
		width: 100%;
		margin-bottom: 20px;
	}
	.modelBox .detail { width: 100%; }
} /* */

/* [ 画像 ] */
.modelBox figure { margin-bottom: 10px; }
.modelBox figure + p a { display: block; }

@media screen and (max-width: 568px) {
	.modelBox figure { text-align: center;}
	.modelBox figure img { width: 230px; }
	.modelBox figure + p {
		border-radius: 5px;
		background-color: #ECF4FA;
		text-align: center;
	}
} /* */

/* [ オプション ] */
.modelBox dl {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 8px;
	border-radius: 5px;
	border: 2px solid #EDEDED;
	line-height: 1.1;
}
.modelBox dt {
	flex: 1;
	font-size: 1.4rem;
}
.modelBox dt b { display: inline-block; }
.modelBox dd { margin-left: 5px; }

@media screen and (max-width: 568px) {
	.modelBox dt { font-size: 1.3rem; }
} /* */

/* [ リンク ] */
.modelBox ul { line-height: 1.2; }
.modelBox li + li { border-top: 1px solid #EDEDED; }
.modelBox li a {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
	padding: 10px 0 10px 20px;
}
.modelBox li a::before {
	position: absolute;
	top: calc(10px + 0.6em - 3px);
	left: 5px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #4794CF;
	border-right: 2px solid #4794CF;
	transform: rotate(45deg);
	content: "";
}
.modelBox li a:hover, 
.modelBox li a:active { background-color: #ECF4FA; }
.modelBox li a *:nth-child(1) { flex: 1; }
.modelBox li a *:nth-child(2) {
	width: 5em;
	margin-left: 5px;
	padding: 2px 0;
	border-radius: 3px;
	background: #4794CF;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}
.modelBox li a *:nth-child(2) * { font-size: 1rem; }
.modelBox li a *:nth-child(3) {
	width: 9.8em;
	text-align: right;
	white-space: nowrap;
	font-size: 1.5rem;
}
.modelBox li a *:nth-child(3) * { font-size: 1.2rem; }
.modelBox li a *:nth-child(3)::after {
	font-size: 1rem;
	font-weight: 500;
	content: "（税込）";
}

@media screen and (max-width: 568px) {
	.modelBox li a::before { top: calc(10px + 0.5em - 3px); }
	.modelBox li a *:nth-child(1) {
		flex: auto;
		width: 100%;
		margin-bottom: 5px;
	}
	.modelBox li a *:nth-child(2) { margin-left: 0; }
} /* */


/*======================================================================*
 *  [ optionLink ] 
 *======================================================================*/

.optionLink {
	display: flex;
	justify-content: space-between;
	line-height: 1.1;
}
.optionLink a {
	display: flex;
	align-items: center;
	position: relative;
	width: calc(33.33% - 6.66px);
	padding: 15px 26px 15px 15px;
	background: #003965;
	color: #fff;
}
.optionLink a:hover,
.optionLink a:active {
	color: #fff !important;
	opacity: 0.7;
}
.optionLink a::after {
	position: absolute;
	top: calc(50% - 6px);
	right: 15px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	content: "";
}

@media screen and (max-width: 568px) {
	.optionLink { display: block; }
	.optionLink a {
		width: 100%;
		margin-bottom: 10px;
	}
} /* */


/*======================================================================*
 *  [ downloadBox ] 
 *======================================================================*/

.downloadBox a.btn {
	display: block;
	max-width: 380px;
	margin: 0 auto;
	padding: 15px 45px 15px 20px;
	background: url(../img/download_white.svg) right 20px center no-repeat #003965;
	background-size: 21px 23px;
	color: #fff !important;
	font-weight: bold;
	line-height: 1.2;
}
.downloadBox a.btn:hover,
.downloadBox a.btn:active {
	color: #fff !important;
	opacity: 0.7;
}
.downloadBox section { margin-top: 40px; }
.downloadBox dl {
	margin-left: 2em;
}
.downloadBox dt {
	margin-top: 30px;
	font-weight: bold;
}
.downloadBox dt b {
	display: inline-block;
	width: 2em;
	margin-left: -2em;
	text-align: center;
}
.downloadBox dd { margin-top: 15px; }
.downloadBox dd .note {
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
	font-size: calc(1em - 0.2rem);
}
.downloadBox dd.notes {
	padding: 10px 20px;
	border: 1px solid #ECECEC;
	background: #F8F7F7;
}
.downloadBox dd.notes .note { color: #ff0000; }
.downloadBox .img {
	margin-bottom: 30px;
	text-align: center;
}

@media screen and (max-width: 568px) {
	.downloadBox section { margin-top: 30px; }
	.downloadBox dt { margin-top: 20px; }
	.downloadBox dd { margin-top: 10px; }
	.downloadBox dd.notes { padding: 10px; }
	.downloadBox .img { margin-bottom: 20px; }
} /* */

