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


.contentsWidth {
	font-size: 1.6rem;
	line-height: 1.6;
}
.contentsWidth * {
	box-sizing: border-box;
}
.contentsWidth section {
	margin: 75px 0;
}
.contentsWidth section section {
	margin: 50px 0;
}
.contentsWidth p {
	margin-bottom: 30px;
}
.contentsWidth figure {
	margin-bottom: 30px;
	text-align: center;
}
.contentsWidth figcaption {
	display: inline-block;
	margin-top: 10px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
}
.contentsWidth ul,
.contentsWidth ol {
	margin: 0 0 30px 2em;
}
.contentsWidth li + li {
	margin-top: 10px;
}
.contentsWidth ul li {
	list-style-type: disc;
}
.contentsWidth ol li {
	list-style-type: decimal;
}
.contentsWidth a, 
.contentsWidth a img  {
	-webkit-transition: background ease .3s, 
						color ease .3s, 
						border ease .3s, 
						opacity ease .3s; /* Safari */
	transition: background ease .3s, 
				color ease .3s, 
				border ease .3s, 
				opacity ease .3s;
}
.contentsWidth b, 
.contentsWidth span {
	display: inline-block;
}
.contentsWidth sup {
	font-size: 80%;
	vertical-align: top;
}

.contentsWidth .note {
	padding-left: 1em;
	font-size: 1.2rem;
	text-indent: -1em;
}

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

@media screen and (min-width: 569px) {
	.contentsWidth .sp {
		display: none;
	}
} /* */

@media screen and (max-width: 568px) {
	.contentsWidth {
		font-size: 1.4rem;
	}
	.contentsWidth section {
		margin: 50px 0;
	}
	.contentsWidth section section {
		margin: 40px 0;
	}
	.contentsWidth figcaption {
		font-size: 1.4rem;
	}
	.contentsWidth .pc {
		display: none;
	}
} /* */


/*======================================================================*
 *  [ flex ]
 *======================================================================*/

.contentsWidth .flex {
	display: -webkit-flex;
	display: flex;
}
.contentsWidth .flex1 {
	-webkit-flex: 1;
	flex: 1;
}

/* [ 横位置 ] */
.contentsWidth .flex.left {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.contentsWidth .flex.center {
	-webkit-justify-content: center;
	justify-content: center;
}
.contentsWidth .flex.right {
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.contentsWidth .flex.betwn { 
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.contentsWidth .flex.around { 
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

/* [ 縦位置 ] */
.contentsWidth .flex.top {
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.contentsWidth .flex.middle {
	-webkit-align-items: center;
	align-items: center;
}
.contentsWidth .flex.bottom {
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.contentsWidth .flex.strch {
	-webkit-align-items: stretch;
	align-items: stretch;
}

/* [ 改行 ] */
.contentsWidth .flex.return {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* [ 順番 ] */
.contentsWidth .flex.row { /* 横：左から */
	-webkit-flex-direction: row;
	flex-direction: row;
}
.contentsWidth .flex.row-rt { /* 横：右から */
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.contentsWidth .flex.col { /* 縦：上から */
	-webkit-flex-direction: column;
	flex-direction: column;
}
.contentsWidth .flex.col-re { /* 縦：下から */
	-webkit-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

/* [ 2カラム ] */
.contentsWidth .flex.col2 > * {
	width: calc(50% - 15px);
}
.contentsWidth .flex.col2n > * {
	width: 50%;
}

/* [ 3カラム ] */
.contentsWidth .flex.col3 > * {
	width: calc(33.33% - 20px);
}
.contentsWidth .flex.col3n > * {
	width: 33.33%;
}

/* [ 4カラム ] */
.contentsWidth .flex.col4 > * {
	width: calc(25% - 15px);
}

@media screen and (max-width: 568px) { /* Smartphone */
	.contentsWidth .flex.spbk {
		display: block;
	}
	.contentsWidth .flex.spbk > * {
		width: 100%;
	}
	.contentsWidth .flex.col4 > * {
		width: calc(50% - 5px);
	}
} /* */


/*==============================================*
 *  [ module ] 
 *==============================================*/

/* [ margin ] */
.contentsWidth .ma0  { margin: 0px; }
.contentsWidth .ma5  { margin: 5px; }
.contentsWidth .ma10 { margin: 10px; }
.contentsWidth .ma15 { margin: 15px; }
.contentsWidth .ma20 { margin: 20px; }
.contentsWidth .ma25 { margin: 25px; }
.contentsWidth .ma30 { margin: 30px; }
.contentsWidth .ma40 { margin: 40px; }
.contentsWidth .ma50 { margin: 50px; }
.contentsWidth .mt0  { margin-top: 0px; }
.contentsWidth .mt5  { margin-top: 5px; }
.contentsWidth .mt10 { margin-top: 10px; }
.contentsWidth .mt15 { margin-top: 15px; }
.contentsWidth .mt20 { margin-top: 20px; }
.contentsWidth .mt25 { margin-top: 25px; }
.contentsWidth .mt30 { margin-top: 30px; }
.contentsWidth .mt40 { margin-top: 40px; }
.contentsWidth .mt50 { margin-top: 50px; }
.contentsWidth .mr0  { margin-right: 0px; }
.contentsWidth .mr5  { margin-right: 5px; }
.contentsWidth .mr10 { margin-right: 10px; }
.contentsWidth .mr15 { margin-right: 15px; }
.contentsWidth .mr20 { margin-right: 20px; }
.contentsWidth .mr25 { margin-right: 25px; }
.contentsWidth .mr30 { margin-right: 30px; }
.contentsWidth .mr40 { margin-right: 40px; }
.contentsWidth .mr50 { margin-right: 50px; }
.contentsWidth .mb0  { margin-bottom: 0px; }
.contentsWidth .mb5  { margin-bottom: 5px; }
.contentsWidth .mb10 { margin-bottom: 10px; }
.contentsWidth .mb15 { margin-bottom: 15px; }
.contentsWidth .mb20 { margin-bottom: 20px; }
.contentsWidth .mb25 { margin-bottom: 25px; }
.contentsWidth .mb30 { margin-bottom: 30px; }
.contentsWidth .mb40 { margin-bottom: 40px; }
.contentsWidth .mb50 { margin-bottom: 50px; }
.contentsWidth .ml0  { margin-left: 0px; }
.contentsWidth .ml5  { margin-left: 5px; }
.contentsWidth .ml10 { margin-left: 10px; }
.contentsWidth .ml15 { margin-left: 15px; }
.contentsWidth .ml20 { margin-left: 20px; }
.contentsWidth .ml25 { margin-left: 25px; }
.contentsWidth .ml30 { margin-left: 30px; }
.contentsWidth .ml40 { margin-left: 40px; }
.contentsWidth .ml50 { margin-left: 50px; }

@media screen and (max-width: 568px) { /* Smartphone */
	.contentsWidth .spma0  { margin: 0px; }
	.contentsWidth .spma5  { margin: 5px; }
	.contentsWidth .spma10 { margin: 10px; }
	.contentsWidth .spma15 { margin: 15px; }
	.contentsWidth .spma20 { margin: 20px; }
	.contentsWidth .spma25 { margin: 25px; }
	.contentsWidth .spma30 { margin: 30px; }
	.contentsWidth .spma40 { margin: 40px; }
	.contentsWidth .spma50 { margin: 50px; }
	.contentsWidth .spmt0  { margin-top: 0px; }
	.contentsWidth .spmt5  { margin-top: 5px; }
	.contentsWidth .spmt10 { margin-top: 10px; }
	.contentsWidth .spmt15 { margin-top: 15px; }
	.contentsWidth .spmt20 { margin-top: 20px; }
	.contentsWidth .spmt25 { margin-top: 25px; }
	.contentsWidth .spmt30 { margin-top: 30px; }
	.contentsWidth .spmt40 { margin-top: 40px; }
	.contentsWidth .spmt50 { margin-top: 50px; }
	.contentsWidth .spmr0  { margin-right: 0px; }
	.contentsWidth .spmr5  { margin-right: 5px; }
	.contentsWidth .spmr10 { margin-right: 10px; }
	.contentsWidth .spmr15 { margin-right: 15px; }
	.contentsWidth .spmr20 { margin-right: 20px; }
	.contentsWidth .spmr25 { margin-right: 25px; }
	.contentsWidth .spmr30 { margin-right: 30px; }
	.contentsWidth .spmr40 { margin-right: 40px; }
	.contentsWidth .spmr50 { margin-right: 50px; }
	.contentsWidth .spmb0  { margin-bottom: 0px; }
	.contentsWidth .spmb5  { margin-bottom: 5px; }
	.contentsWidth .spmb10 { margin-bottom: 10px; }
	.contentsWidth .spmb15 { margin-bottom: 15px; }
	.contentsWidth .spmb20 { margin-bottom: 20px; }
	.contentsWidth .spmb25 { margin-bottom: 25px; }
	.contentsWidth .spmb30 { margin-bottom: 30px; }
	.contentsWidth .spmb40 { margin-bottom: 40px; }
	.contentsWidth .spmb50 { margin-bottom: 50px; }
	.contentsWidth .spml0  { margin-left: 0px; }
	.contentsWidth .spml5  { margin-left: 5px; }
	.contentsWidth .spml10 { margin-left: 10px; }
	.contentsWidth .spml15 { margin-left: 15px; }
	.contentsWidth .spml20 { margin-left: 20px; }
	.contentsWidth .spml25 { margin-left: 25px; }
	.contentsWidth .spml30 { margin-left: 30px; }
	.contentsWidth .spml40 { margin-left: 40px; }
	.contentsWidth .spml50 { margin-left: 50px; }
} /* */

/* [ align ] */
.contentsWidth .txtlt { text-align: left; }
.contentsWidth .txtcr { text-align: center; }
.contentsWidth .txtrt { text-align: right; }

/* [ weight ] */
.contentsWidth .txtnl { font-weight: normal; }
.contentsWidth .txtbd { font-weight: bold; }

/* [ font size ] */
.contentsWidth .txtxs { font-size: 1.2rem; }
.contentsWidth .txtsm { font-size: 1.4rem; }
.contentsWidth .txtmd { font-size: 1.6rem; }
.contentsWidth .txtlg { font-size: 1.8rem; }
.contentsWidth .txtxl { font-size: 2rem; }
.contentsWidth .txtxxl { font-size: 2.2rem; }
.contentsWidth .txtxxxl { font-size: 2.4rem; }

@media screen and (max-width: 568px) {
	.contentsWidth .txtxs { font-size: 1rem; }
	.contentsWidth .txtsm { font-size: 1.2rem; }
	.contentsWidth .txtmd { font-size: 1.4rem; }
	.contentsWidth .txtlg { font-size: 1.6rem; }
	.contentsWidth .txtxl { font-size: 1.8rem; }
	.contentsWidth .txtxxl { font-size: 2rem; }
	.contentsWidth .txtxxxl { font-size: 2.2rem; }
} /* */

/* [ line height ] */
.contentsWidth .lh10 { line-height: 1; }
.contentsWidth .lh12 { line-height: 1.2; }
.contentsWidth .lh14 { line-height: 1.4; }
.contentsWidth .lh16 { line-height: 1.6; }
.contentsWidth .lh18 { line-height: 1.8; }
.contentsWidth .lh20 { line-height: 2; }

/* [ font color ] */
.contentsWidth .txtbk { color: #000; }
.contentsWidth .txtrd { color: #cc0000; }
.contentsWidth .txtbl { color: #0a2d81; }
.contentsWidth .txtgr { color: #53aa3e; }
.contentsWidth .txtgy { color: #666666; }



/*==============================================*
 *  [ Link ] 
 *==============================================*/

.spLink {
	margin: 50px 0;
	text-align: center;
}
.spLink .ttl {
	margin-bottom: 30px;
	font-size: 2rem;
	line-height: 1.1;
}
.spLink .ttl span { border-bottom: 1px solid #000; }
.spLink a { display: block; }
.spLink img { width: 100%; }

.spLink .list { margin: 0; }
.spLink .list li { list-style-type: none; }
.spLink .list li + li { margin-top: 20px; }

@media screen and (max-width: 568px) {
	.spLink .ttl {
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
	.spLink .list li + li { margin-top: 10px; }
} /* */


/*==============================================*
 *  [ Lineup ] 
 *==============================================*/

.lineupContents {
	padding: 0 60px 40px;
	background: #e8f1ff;
}
.lineupContents .ttl {
	position: relative;
	top: -30px;
	height: 104px;
	background: url(../img/common/lineup_ttl.png) center center no-repeat;
	background-size: contain;
	font-size: 0;
}
.lineupContents .ttl::before {
	position: absolute;
	top: 0;
	left: calc(50% - 71.5px);
	width: 143px;
	height: 96px;
	border-radius: 50%;
	background: #e8f1ff;
	content: "";
	z-index: -1;
}
.lineupContents .subttl {
	margin-bottom: 30px;
	color: #4894ce;
	font-size: 2rem;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.lineupContents { padding: 0 30px 40px; }
} /* */

@media screen and (max-width: 568px) {
	.lineupContents {
		margin-top: 75px !important;
		padding: 0 10px 40px;
	}
} /* */

/* [ 商品 ] */
.lineupContents .carousel {
	position: relative;
	margin: 0 -15px;
}
.lineupContents .carousel .slick-arrow {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: -10px 0 0;
	border: none;
	border-top: 4px solid #4894ce;
	border-right: 4px solid #4894ce;
	background: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}
.lineupContents .carousel .slick-prev {
	left: -15px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.lineupContents .carousel .slick-next {
	right: -15px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.lineupContents .carousel .slick-disabled {
	border-color: #c9c9c9;
	cursor: auto;
}
.lineupContents .item {
	display: -webkit-flex;
	display: flex;
	margin: 0 15px;
	box-shadow: 0 0 8px rgba(72, 148, 206, 0.2);
	background: #fff;
	font-size: 1.4rem;
}
.lineupContents .item a, 
.lineupContents .item div {
	width: 100%;
	padding: 20px 20px 40px;
	color: #000;
}
.lineupContents .item a {
	display: block;
	position: relative;
}
.lineupContents .item div { padding-bottom: 0; }
.lineupContents .item img { margin: 0 auto; }
.lineupContents .item .name {
	margin-bottom: 10px;
	font-size: 1.6rem;
	line-height: 1.2;
}
.lineupContents .item p { margin-bottom: 15px; }
.lineupContents .item dl {
	margin-bottom: 15px;
}
.lineupContents .item dt {
	padding-left: 6px;
	border-left: 4px solid #bfbfbf;
	color: #666;
	font-weight: bold;
}
.lineupContents .item dd + dt { margin-top: 20px; }
.lineupContents .item dd {
	margin-top: 5px;
	font-size: 1.6rem;
}
.lineupContents .item dd .note {
	padding-left: 1em;
	color: #cc1533;
	font-size: 1.4rem;
	text-indent: -1em;
}
.lineupContents .item .detail {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 40px;
	background: #4894ce;
	color: #fff;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}
.lineupContents .item .detail::after {
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
	content: url(../img/common/arrow_wh.svg);
}

@media screen and (min-width: 569px) {
	.lineupContents .carousel {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.lineupContents .carousel.col2 .item { width: calc(50% - 30px); }
	.lineupContents .carousel.col2 .item:nth-of-type(2) ~ .item { margin-top: 30px; }
	.lineupContents .carousel.col3 .item { width: calc(33.33% - 30px); }
	.lineupContents .carousel.col3 .item:nth-of-type(3) ~ .item { margin-top: 30px; }
} /* */

@media screen and (max-width: 568px) {
	.lineupContents .carousel { margin: 0 25px; }
	.lineupContents .item { margin: 0 10px; }
} /* */

/* [ 関連 ] */
.lineupContents .relation {
	margin: 0;
	font-weight: bold;
	line-height: 1.2;
}
.lineupContents .relation li { list-style-type: none; }
.lineupContents .relation li + li { margin: 0; }
.lineupContents .relation a { color: #000; }
.lineupContents .relation figure { margin: 0 0 10px; }
.lineupContents .relation figure img { width: 100%; }

/* [ 親 ] */
.lineupContents .parent {
	display: block;
	position: relative;
	text-align: center;
}
.lineupContents .parent span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 360px;
	padding: 20px 30px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.lineupContents .parent span::after {
	position: absolute;
	top: 50%;
	right: 20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: url(../img/common/arrow_wh.svg);
}
.lineupContents .parent img {
	display: block;
	width: 100%;
}

@media screen and (max-width: 568px) {
	.lineupContents .parent span {
		max-width: 270px;
		padding: 12px 30px;
		font-size: 1.4rem;
	}
} /* */