@charset "utf-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Catalog CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
.subTtl h2 {
	color:#000;
}
.index main h2 {
	margin: 0;
	line-height: 48px;
	text-align: center;
	font-size: 25px;
	/*font-family: "Times New Roman", Times, serif;*/
}

/*----------------------------------------------------
共通
----------------------------------------------------*/
main ul.subTtl {
	margin: 30px 0 60px;
	line-height: 48px;
	border: #ddd solid 1px;
	border-right: none;
	border-left: none;
	text-align: center;
	font-size: 25px;
	/*font-family: "Times New Roman", Times, serif;*/
}
main ul.subTtl.next {
	margin-top: 0;
}
main ul li {
	display: inline-block;
	font-size: 1.0rem;
}
main ul li + li {
	margin: 0 0 0 20px;
}
main ul li + li h2 {
	font-size: 25px;
}
main ul li + li.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 40px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
main ul li + li.arrow::before,
main ul li + li.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
main ul li + li.sample::before{
left: 0;
width: 15px;
height: 15px;
border-top: 1px solid #666;
border-right: 1px solid #666;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.container {
	padding: 0;
	color: #666;
	text-align: center;
}
.container .inner {
	width: 102%;
	margin: 0 auto;
}
.container .inner ul {
	width: 100%;
	margin: 0 0 0 -2%;
}
.container .inner ul li {
	width: 22.9%;
	float: left;
	margin: 0 0 3% 2%;
	padding: 0.1%;
}
.container .inner ul li a {
	display:block;
}
.container .inner ul li p {
	padding: 10px 0 0;
}

/* 詳細動画 */
.movie__collection {
	width: 100%;
	height: auto;
}


/*----------------------------------------------------
一覧
----------------------------------------------------*/
.collection.index .container .inner ul li img {
	border:1px solid #DDD;
}
.collection.index .container .inner ul li span {
	display:block;
	font-size:0.6rem;
}



/*----------------------------------------------------
ALL
----------------------------------------------------*/
.collection.all .container .inner ul li img {
	border:1px solid #DDD;
}

.collection.all .select-box01-outer {
	width:33%;
	min-width:320px;
	padding: 5px;
	margin:  60px auto;
	border: #ccc solid 1px;
}
.collection.all .select-box01.arrow {
    width: 100%;
    position: relative;
    display: block;
    padding: 0;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.collection.all .select-box01.sample1-1::before {
    left: inherit;
    width: 20px;
    height: 20px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 10;
}
.collection.all .select-box01 select {
    width: 100%;
    padding: 15px 40px 15px 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    background: #533C3B;
    background-size: 20px, 100%;
    color: #FFF;
    letter-spacing: .1rem;
}
.collection.all .select-box01 select option {
    background: #EEE;
    color: #333;
}
.collection.all .select-box01.arrow::before, .collection.all .select-box01.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    content: "";
    vertical-align: middle;
    z-index: 10;
}
.collection.all .listOuter .otherProduct {
	width: 102%;
	margin: 0 0 0 -2%;
}
.collection.all .listOuter ul.otherProduct li {
	position:relative;
	display: block;
	width: 23%;
	margin: 0 0 15px 2%;
	border: #DDD solid 1px;
	float: left;
}
.collection.all .listOuter ul.otherProduct li p {
	display: none;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	padding:10px;
	pointer-events: none;
}
.collection.all .listOuter ul.otherProduct li span {
	display: table-cell;
	vertical-align:middle;
	text-align:center;
	background:rgba(0, 0, 0, 0.8);
	padding:15px;
	color:#FFF;
	font-size:12px;
}


/*----------------------------------------------------
detail
----------------------------------------------------*/
main img {
	vertical-align: middle !important;
}

.collection.detail .mainImg {
	border:1px solid #DDD;
	margin:0 auto;
}
.collection.detail.sp .mainImg {
	max-width:560px;
}
.collection.detail .listOuter {
	width: 100%;
	margin: 40px auto 60px;
	padding: 0;
}
.collection.detail .listOuter .otherProduct {
	width: 102%;
	margin: 0 0 0 -2%;
}
.collection.detail .listOuter ul.otherProduct li {
	position:relative;
	display: block;
	width: 23%;
	margin: 0 0 15px 2%;
	border: #DDD solid 1px;
	float: left;
}
.collection.detail .listOuter ul.otherProduct li p {
	display: none;
	position:absolute;
	width:100%;
	top:0;
	left:0;
	padding:10px;
	pointer-events: none;
}
.collection.detail .listOuter ul.otherProduct li span {
	display: table-cell;
	vertical-align:middle;
	text-align:center;
	background:rgba(0, 0, 0, 0.8);
	padding:3px;
	color:#FFF;
}
.collection.detail .listOuter ul.otherProduct li p img {
	width: 100%;
 height: auto;
	vertical-align: bottom;
}


.collection.detail.sp .underNav {
	display: none;
}


/*----------------------------------------------------
solo
----------------------------------------------------*/
.collection.solo .spec {
	text-align:left;
}
.collection.solo main h2 {
    font-size: 25px;
}


.collection.sp main .container > p {
	margin:20px auto 0;
	text-align:left;
	max-width:560px;
}


/*----------------------------------------------------

----------------------------------------------------*/


main ul.underNav {
	border: none;
}
main ul.underNav li {
	width: 50%;
	height: 53px;
	line-height: 53px;
	padding: 0 15px 0 0;
	float: left;
	box-sizing: border-box;
	margin: 0;
	position: relative;
}
main ul.underNav li span {
	display: block;
	border: #ddd solid 1px;
	border-right: none;
	border-left: none;
}
main ul.underNav li p {
	padding: 0 0 0 65px;
	font-size: 18px;
}
main ul.underNav li {
	text-align: left;
}
main ul.underNav li span > span.underArrow {
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	background-color: #EEE;
	border: none;
}
main ul.underNav li span > span.underArrow::before,
main ul.underNav li span > span.underArrow::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
main ul.underNav li span > span.underArrow::before {
	left: 16px;
	width: 15px;
	height: 15px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}
main ul.underNav li + li {
	border-left: #DDD solid 1px;
	padding: 0 0 0 15px;
	text-align: right;
}
main ul.underNav li + li p {
	padding: 0 65px 0 0;
	font-size: 18px;
}
main ul.underNav li + li span > span.underArrow {
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	top: 6px;
	right: 0;
	left: auto;
	background-color: #EEE;
	border: none;
}
main ul.underNav li + li span > span.underArrow::before,
main ul.underNav li + li span > span.underArrow::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
main ul.underNav li + li span > span.underArrow::before {
	left: 9px;
	width: 15px;
	height: 15px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media screen and (max-width: 900px) {
	.container {
		padding: 0 20px;
	}
	main ul.subTtl {
		margin: 110px 0 0;
	}
	.container {
		padding: 40px 20px 20px;
	}
	.collection.solo .container {
		padding: 20px;
	}
	.collection.detail dl.main dd {
		padding: 0 5%;
		font-size: 1.4rem;
	}
	
	.collection.all .select-box01-outer {
		margin: 60px auto 20px;
	}
}

@media screen and (max-width: 800px) {
	.collection.index .container .inner ul li,
	.collection.all .listOuter ul.otherProduct li,
	.collection.detail .listOuter ul.otherProduct li {
		width: 31.33%;
		margin: 0 0 10px 2%;
	}
}

@media screen and (max-width: 640px) {
	.collection.index .container .inner ul li,
	.collection.all .listOuter ul.otherProduct li,
	.collection.detail .listOuter ul.otherProduct li {
		width: 48%;
	}
	main ul.underNav {
		width: 100%;
		margin: 30px 0 0;
	}
	main ul.underNav li {
		width: 100%;
		padding: 0;
	}
	main ul.underNav li + li {
		border-left: none;
		padding: 0;
		text-align: right;
	}
	main ul.underNav li + li span {
		border-top: none;
	}
	main ul.underNav li p,
	main ul.underNav li + li p {
		font-size:12px;
	}
}

@media screen and (max-width: 414px) {
	.collection.detail .listOuter {
		width: 100%;
		margin: 40px auto 30px;
		padding: 0;
	}
	.collection.detail .listOuter .otherProduct {
		width: 102%;
		margin: 0 0 0 -2%;
	}
	.collection.detail .listOuter .otherProduct a {
		display:block;
	}
	.collection.detail .listOuter ul.otherProduct li span {
		font-size: 1.2rem;
	}
	.collection.detail .listOuter .otherProduct li p {
		display:none;
	}
	
	main ul.subTtl li:first-child {
		display: block;
		line-height: 1;
		margin-top: 15px;
	}
	.collection.sp main ul.subTtl li:first-child,
	.collection.index main ul.subTtl li:first-child {
		margin-top:0;
	}
	main ul.subTtl li.arrow {
		margin-left:0;
	}
}