@charset "utf-8";

/* CSS Document */

body {
	background: #fff;
	font-family: "Noto Sans JP", sans-serif;
}

#header {
}

footer {
	margin-top: 0;
	background: #2c5b78;
	color:#fff;
}


* {
	box-sizing: border-box;
	line-height: 1;
}

a {
	text-decoration: none;
}

a:link,
a:visited {
	color: #000;
}

a:hover {
	opacity:1;
	transition: .3s;
}


.dispPC {
	display: block;
}

.dispSP {
	display: none;
}


@media (max-width: 767.98px) {

	.dispPC {
		display: none;
	}

	.dispSP {
		display: block;
	}

}


.container {
	width: 100%;
}


/* =====================
intro
===================== */

.introduction {
	width:100%;
	margin:0 0 8rem 0;
}

.introduction__fv {
	width:100%;
	margin:0 0 3.2rem 0;
	background: #bed8e1;
	text-align: center;
}


.introduction__fv img{
	width:1200px;
	margin:0 auto;
}


.introduction__txt {
	max-width:960px;
	width:100%;
	margin:0 auto;
}



.introduction__txt p{
	font-size:1rem;
	line-height:2;
	margin-bottom:8rem;
}


@media (min-width: 767.98px) and (max-width: 1023px) {
.introduction__txt {
	width:80%;
	margin:0 auto;
}
}

@media (max-width: 767.98px) {

.introduction__main {
	margin:0 auto 1.6rem;
}

.introduction__txt {
	width:90%;
	margin:0 auto;
}

.introduction__txt p{
	font-size:.9rem;
	margin-bottom:4rem;
}

}


/* =====================
item
===================== */


.filter-switches {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: .8rem;
	row-gap: .8rem;
	width: 100%;
	max-width: 960px;
}


.title {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	margin-bottom:2.4rem;
	font-size: 1.6rem;
	font-style: normal;
	text-align: center;
	letter-spacing:0.4rem;
	color: #2c5b78;
}


.filters {
	width:100%;
	max-width: 960px;
	margin: 4rem auto;
}


@media (min-width: 767.98px) and (max-width: 1023px) {

.introduction {
	margin-bottom:4rem;
}

.filters {
	margin: 0 auto;
}

.filter-switches {
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
}




}

@media (max-width: 767.98px) {

.introduction {
	margin-bottom:4rem;
}

.filters {
	margin: 0 auto;
}

.filter-switches {
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
}


}



/* form×°ï— */

input[type="checkbox"] {
	display: none !important;
}

select::-ms-expand {
	display: none;
}

input {
	-webkit-appearance: none;
}

.filter-switches span.filter-switch {
	font-family: "Poppins", sans-serif;
	position: relative;
	cursor: pointer;
	display: inline-block;
	width: 100%;
	padding: 0.9rem 0.4rem 0.8rem;
	color: #fff;
	letter-spacing: 0.05rem;
	text-align: center;
	font-weight: bold;
	font-size: .8rem;
	box-shadow: 2px 2px 8px -5px #80786b;
	border-radius: 2px;
	border-width: 3px;
	border-style: solid;
}


.filter-switches span.filter-switch:hover {
	opacity: .7;
	transition: .3s;
	box-shadow: 0 0 0 0;
}

.filter-switches li.active span.filter-switch {
	background: none;
	box-shadow: 0 0 0 0;
}


/* color */

.filter-switches .style {
	background: #6595b2;
	border-color: #6595b2;
}

.filter-switches li.active span.style {
	color: #6595b2;
}

.item.style .item__inner {
	background-color: #6595b2;
}

.style span {
	color: #6595b2;
}




.itemArea__wrap {
	width: 100%;
	margin: 0 auto 6rem;
}





.itemList {
	position: relative;
}

.item {
	display: block;
	position: absolute;
	width:16.6%;
	/*width: calc(100% / 6);*/
}

@media (min-width: 767.98px) and (max-width: 1023px) {

.item {
	width:25%;
}

}

@media (max-width: 767.98px) {
.item {
	width: calc( 100% / 3 );
}

}



.item .item__inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: #363533;
	opacity:0.7;

}

.item .item__inner img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}



.item__thumbs span {
	position: absolute;
	display: inline-block;
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	z-index: 100;
	letter-spacing: 0.025rem;
	transform: rotate(90deg);
	transform-origin: left top;
	left: 1.2rem;
	top: .4rem;
	font-size: .8rem;
}

.item__thumbs i {
	display: inline;
	font-size: .6rem;
	padding-right: .2rem;
}


.item__inner:hover .item__thumbs * {
	opacity: 0;
	transition: .4s;
}

.item__inner .item__meta {
	display: none;
}

.item__inner:hover .item__meta {
	padding: .8rem;
	position: absolute;
	width: 100%;
	height: auto;
	text-align: center;
	top: 30%;
	bottom: 70%;
	display: block;
	opacity: 1;
	transition: .4s;
}

.item__meta .brand {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight:600;
	font-size: .8rem;
	letter-spacing: 0.05rem;
	display: block;
	margin-bottom: .8rem;
}


.item__meta .name {
	color: #fff;
	line-height: 1.4;
	font-size: .7rem;
}





/* =====================
btn
===================== */


.btnWrap {
	max-width:600px;
	width:90%;
	text-align: center;
	margin:8rem auto;
}

.btn--primary {
	text-align: center;
}

.btn--primary a {
	display: block;
	background: #363533;
	padding:1.2rem 1.6rem;
	border-radius: 10rem;
	color:#fff;
	font-weight:bold;
	font-size:.8rem;
	text-align: center;
}

.btn--txt {
	font-size:1rem;
	color: #6f6317;
}


.btn--txt a {
	color: #6f6317;
}


.btn a:before {
    font-family: "Font Awesome 5 Free";
	content: "\f0a9";
    font-size: 1rem;
    font-weight: 600;
    color:#f171a6;
}

.btn--primary a:before {
	color:#fff;
	margin-right:.4rem;
}


.btn--pict {
	max-width:960px;
	margin:0 auto ;
	width:90%;
}

.bnr a:hover,
.btn--primary a:hover,
.btn--pict a:hover {
	opacity:.7;
	transition:.3s;
}

.ending {
	margin-bottom:10rem;
}


.btnWrap .title {
	margin-bottom:.8rem;
}


.btnWrap p {
	color:#6f6317;
	margin:0 0 1.6rem 0;
	line-height:1.6;
}