@charset "utf-8";

/* CSS Document */

body {
	background: #fff2e1;
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

#header {
	background: #fff2e1;
}

footer {
	margin-top: 0;
	background: #cec499;
}


* {
	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%;
}


/* =====================
intrduction
===================== */

.instalive {
	max-width:600px;
	width:90%;
	margin:4rem auto;
}



.introduction {
	max-width: 960px;
	width: 90%;
	margin: 0 auto 4rem;
}


.introduction__fv {
	position: relative;
}

.introduction__main {
	position: relative;
	max-width: 600px;
	width: 90%;
	margin: 0 auto 0;
	z-index: 0;
}


.introduction__logo {
	position: relative;
	max-width: 700px;
	width: 94%;
	margin: 0 auto;
	z-index: 1000;
}

.adjust:before {
	content: "";
	display: block;
	padding-top: 34%;
}


.introduction__logo h1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -140px;
}


.introduction__copy {
	margin: 1rem 0;
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-size: 1.2rem;
	color: #ff5800;
	letter-spacing: .2rem;
}


.introduction__copy--second {
	position: absolute;
	transform: rotate(90deg);
	transform-origin: left top;
	left: -.8rem;
	top: .8rem;
}


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

.introduction__txt p {
	font-size: 1rem;
	line-height: 2rem;
	color: #6f6317;
	margin-bottom: 2rem;
}

.attention {
	font-weight: bold;
	color: #f171a6;
	letter-spacing: 0.015rem;
}






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


.filter-switches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: .8rem;
	row-gap: .8rem;
	max-width: 960px;
	width: 90%;
	margin: 0 auto 6.4rem;
}


.title {
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-size: 1.6rem;
	font-style: normal;
	text-align: center;
	letter-spacing:0.4rem;
	color: #ff5800;
	margin-left:.4rem;
}

.filter-switches__wrap .title {
	margin: 8rem 0 2.4rem .4rem;	
}






/* form×°ï— */

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

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

input {
	-webkit-appearance: none;
}

.filter-switches span.filter-switch {
	position: relative;
	cursor: pointer;
	display: inline-block;
	width: 100%;
	padding: 0.9rem 0.4rem 0.8rem;
	color: #fff;
	letter-spacing: 0.025rem;
	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 .color--pink {
	background: #f171a6;
	border-color: #f171a6;
}

.filter-switches .color--orange {
	background: #f0a335;
	border-color: #f0a335;
}

.filter-switches .color--paleblue {
	background: #75c3dd;
	border-color: #75c3dd;
}

.filter-switches .color--green {
	background: #b0a03e;
	border-color: #b0a03e;
}

.filter-switches .color--red {
	background: #ed3e3b;
	border-color: #ed3e3b;
}

.filter-switches .color--rose {
	background: #cd4b87;
	border-color: #cd4b87;
}

.filter-switches .color--mint {
	background: #5dc896;
	border-color: #5dc896;
}


.filter-switches li.active span.color--pink {
	color: #f171a6;
}

.filter-switches li.active span.color--orange {
	color: #f0a335;
}

.filter-switches li.active span.color--paleblue {
	color: #75c3dd;
}

.filter-switches li.active span.color--green {
	color: #b0a03e;
}

.filter-switches li.active span.color--red {
	color: #ed3e3b;
}

.filter-switches li.active span.color--rose {
	color: #cd4b87;
}

.filter-switches li.active span.color--mint {
	color: #5dc896;
}


.item.color--pink .item__inner {
	background-color: #f171a6;
}

.item.color--orange .item__inner {
	background-color: #f0a335;
}

.item.color--paleblue .item__inner {
	background-color: #75c3dd;
}

.item.color--green .item__inner {
	background-color: #b0a03e;
}

.item.color--red .item__inner {
	background-color: #ed3e3b;
}

.item.color--rose .item__inner {
	background-color: #cd4b87;
}

.item.color--mint .item__inner {
	background-color: #5dc896;
}


.color--pink span {
	color: #f171a6;
}

.color--orange span {
	color: #f0a335;
}

.color--paleblue span {
	color: #75c3dd;
}

.color--green span {
	color: #b0a03e;
}

.color--red span {
	color: #ed3e3b;
}

.color--rose span {
	color: #cd4b87;
}

.color--mint span {
	color: #5dc896;
}



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


.itemList {
	position: relative;
}




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




.item .item__inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: #f171a6;

}



.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-size: 1.2rem;
	display: block;
	margin-bottom: .8rem;
}


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





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


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

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

.btn--primary a {
	display: block;
	background: #f171a6;
	padding:1.2rem 1.6rem;
	border-radius: 10rem;
	width:320px;
	color:#fff;
	font-weight:bold;
	font-size:1rem;
	text-align: center;
	margin:0 auto;
}



.btnWrap {
	padding-top:2.4rem;
}

.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;
}

.btnWrap {
	max-width: 600px;
	width:90%;
	margin:0 auto 4rem;
}


.ending {
	margin-bottom:10rem;
}


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


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

.bnr a.hover {

}



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





	.filter-switches {
		grid-template-columns: repeat(3, 1fr);
	}

	.introduction__copy {
		margin: .4rem 0;
		font-size: 1rem;
	}


	.adjust:before {
		content: "";
		display: block;
		padding-top: 50%;
	}



	.introduction__txt {
		width: 100%;
	}

	.item {
		width: calc(100% / 4);
	}


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



}


@media (max-width: 767.98px) {

	.title {
		font-size:1.4rem;
		letter-spacing: 0.05rem;
		margin-left:0.05rem;
	}


	.item {
		width: calc(100% / 3);
	}


	.introduction__copy {
		margin: .4rem 0;
		font-size: .8rem;
	}

	.introduction__copy--second {
		left: -.4rem;
	}


	.introduction__logo h1 {
		top: -60px;
	}


	.filter-switches {
		grid-template-columns: repeat(3, 1fr);
	}


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


	.adjust:before {
		content: "";
		display: block;
		padding-top: 45%;
	}


	.introduction__txt {
		width: 100%;
	}


	.item__inner .item__meta,
	.item__inner:hover .item__meta {
		display: none;
	}


	.btn--primary a {
		padding:1rem 1.6rem;
		font-size:.8rem;
	}




}