@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 20px;
	--cts-width: 1250px;

	/* font */
	--cts-font: "メイリオ", sans-serif;

	--cts-font-size: clamp(14px,3.73vw,16px);
	--cts-ls: .05em;/*letter-spacing*/

	/* color */
	--cts-color: #333435;
	--cts-color-02: rgba(201,230,255,.5);
}


/* コンテンツ汎用
____________________*/
.galleria_lp {
	width: 100%;
	margin: auto;
	font-size: var(--cts-font-size);
	font-family: var(--cts-font);
	color: var(--cts-color);
	line-height: 1.6;
}
figure {
	margin: 0;
}
img {
	max-width: 100%;
	image-rendering: -webkit-optimize-contrast;
}
.sp {
	display: none;
}
.galleria__contents {
	width: clamp(300px,100%,calc(var(--cts-width) +  var(--cts-gutter) * 2));
	margin-inline: auto;
	padding-block: clamp(15px,4vw,60px);
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
}
.contents__ttl {
	font-size: clamp(20px,5.33vw,28px);
	font-weight: 600;
	text-align: center;
	letter-spacing: var(--cts-ls);
}


/* mv
____________________*/
.mv {
	width: auto;
	padding-block-start: clamp(20px,5.33vw,25px);
	text-align: center;
}


/* about
____________________*/
.about {
	display: flex;
	justify-content: center;
	gap: clamp(20px,5.33vw,80px);
}
.about__detail {
	width: min(50vw,540px);
}
.contents__ttl--about {
	margin-block-start: 10px;
	text-align: left;
}
.about__txt {
	margin-block-start: clamp(15px,4vw,20px);
	font-size: clamp(14px,3.73vw,15px);
}
.movie__wrap {
	margin-block-start: 20px;
}
.movie__modal {
	cursor: pointer;
	transition: all .25s;
}
.movie__modal:hover {
	animation: hover-flash 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}
.movie__ttl {
	margin-block-start: clamp(3px,.8vw,8px);
	font-size: clamp(12px,3.2vw,14px);
	color: #469FD7;
	text-align: right;
}


/* search
____________________*/
.galleria_lp .search {
	padding-block-start: clamp(40px,10.67vw,90px);
	padding-block-end: 25px;
}
.search__inner {
	margin-block-start: clamp(20px,5.33vw,32px);
	padding-block: clamp(30px,8vw,50px);
	padding-inline-start: clamp(20px,2vw,40px);
	background: var(--cts-color-02);
}
.search__category {
	display: flex;
	align-items: center;
}
.search__category+.search__category {
	margin-block-start: clamp(20px,5.33vw,30px);
}
.search__bg {
	display: none;
}
.search__name {
	flex-shrink: 0;
	width: 9em;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	letter-spacing: var(--cts-ls);
}
.search__btnwrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(10px,2.67vw,12px);
	margin-inline-start: 17px;
}
input[type="radio"] {
	display: none;
}
.search__btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(185px,18.5vw,245px);
	height: 3.5em;
	bottom: 0;
	background: #fff;
	font-size: clamp(12px,3.2vw,14px);
	text-align: center;
	letter-spacing: .03em;
	line-height: 1.15;
	box-shadow: 0px 2px 5px #0000004D;
	transition: all .25s;
}
.search__btn:hover {
	bottom: -2px;
	box-shadow: 0px 1px 1px #0000004D;
	opacity: .85;
}
/*.cate--all+.search__btn {
	bottom: -2px;
	background: #5D87B1;
	color: #fff;
	box-shadow: 0px 1px 1px #0000004D;
	opacity: .85;
}*/
input[type="radio"]:checked+.search__btn {
	bottom: -2px;
	background: #5D87B1;
	color: #fff;
	box-shadow: 0px 1px 1px #0000004D;
	opacity: .85;
	transition: all .25s;
}
/*.cate--all.test2+.search__btn {
	bottom: 0;
	background: #fff;
	color: var(--cts-color);
	box-shadow: 0px 2px 5px #0000004D;
	opacity: 1;
}*/
.search__close {
	display: none;
}


/* product
____________________*/
.product {
	--cts-width: 1040px;
	padding-block-start: clamp(10px,2.67vw,25px);
	padding-block-end: 50px;
}
.product.chk--anime {
	animation: chk-flash .5s;
	opacity: 1;
}
@keyframes chk-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: 1;
	}
}
.product__list {
	--list-gap: clamp(15px,2vw,40px);
	display: flex;
	gap: var(--list-gap);
	flex-wrap: wrap;
}
.product__item {
	display: flex;
	flex-direction: column;
	width: clamp(270px,calc((100% - var(--list-gap) * 2)/3),320px);
	padding-block: clamp(15px,4vw,25px);
	padding-inline: clamp(20px,5.33vw,40px);
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 2px 10px #0000003D;
}
.product__imgbox {
	margin-inline: auto;
	text-align: center;
}
.product__detail {
	display: grid;
	grid-template-columns: 3.5em 1fr;
	gap: 3px 10px;
	margin-block-start: clamp(15px,4vw,20px);
}
.product__specname {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 3px;
	background: #93B2D1;
	font-size: 12px;
	color: #fff;
}
.product__spec {
	padding-block: 3px;
	font-size: clamp(12px,3.2vw,14px);
	line-height: 1.28;
}
.product__spec--price {
	font-weight: 600;
	color: #f00;
}
.__tax {
	font-size: clamp(10px,2vw,11px);
	font-weight: 400;
}
.product__linkbox {
	margin-block-start: auto;
}
.product__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 0;
	margin-block-start: clamp(10px,2.67vw,15px);
	padding-block: clamp(8px,2.13vw,10px);
	background: #123A61;
	font-size: clamp(12px,3.2vw,13px);
	text-align: center;
	color: #fff;
	letter-spacing: .1em;
	line-height: 1.3;
	box-shadow: 0px 2px 5px #0000004D;
	transition: all .25s;
}
.product__link:link,
.product__link:visited {
	color: #fff;
	text-decoration: none;
}
.product__link:hover {
	bottom: -2px;
	box-shadow: 0px 1px 1px #0000004D;
	opacity: .85;
}
.product__arrow {
	position: relative;
	display: inline-block;
	left: clamp(20px,5.33vw,35px);
	transition: all .25s;
}
.product__link:hover .product__arrow {
	left: clamp(25px,6.67vw,40px);
}
.product__arrow::before,
.product__arrow::after {
    content: "";
    position: absolute;
}
.product__arrow::before {
    bottom: 0;
    width: 18px;
    height: 1px;
	left: -11.3px;
    background: #fff;
}
.product__arrow::after {
    bottom: -3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}


/* モバイル
____________________*/
@media (max-width: 767px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	.about {
		flex-wrap: wrap;
	}
	.about__imgbox {
		width: max(50vw,200px);
	}
	.about__detail {
		width: 100%;
	}
	.contents__ttl--about {
		text-align: center;
	}
	.movie__wrap {
		text-align: center;
	}
	.movie__modal {
		display: inline-block;
	}
	.search__inner {
		padding-inline: 15px;
	}
	.galleria_lp form {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 30px;
	}
	.search__category+.search__category {
		margin-block-start: 0;
	}
	.search__btnwrap {
		transition: all .3s;
		display: none;
	}
	.search__btnwrap {
		position: fixed;
		/*display: block;*/
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate(-50%,-50%);
		z-index: 10000;
	}
	.search__btnwrap .search__bg {
		position: absolute;
		display: block;
		width: 100vw;
		height: 100vh;
		top: 50%;
		left: 50%;
		background: rgba(0,0,0,.6);
		transform: translate(-50%,-50%);
		z-index: 500;
	}
	input[type="radio"]:checked+.search__btn {
		bottom: 0;
		opacity: 1;
	}
	.search__btn {
		width: 270px;
		font-size: var(--cts-font-size);
		z-index: 2000;
	}
	.search__btn:nth-child(n+5) {
		margin-block-start: 15px;
	}
	.search__btn:hover {
		bottom: 0;
	}
	.search__name {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 270px;
		height: 3.5em;
		bottom: 0;
		padding-inline: 27px;
		background: #fff;
		text-align: center;
		line-height: 1.15;
		word-break: keep-all;
		box-sizing: border-box;
		box-shadow: 0px 2px 5px #0000004D;
		transition: all .25s;
	}
	.search__name::before,
	.search__name::after {
		content: "";
		position: absolute;
		display: block;
		width: 12px;
		height: 2px;
		top: 50%;
		right: 12px;
		background: var(--cts-color);
		transform: translateY(-50%);
	}
	.search__name::before {
		width: 2px;
		height: 12px;
		right: 17.5px;
	}
	.search__name.changename {
		background: #5D87B1;
		color: #fff;
	}
	.search__name.changename::before,
	.search__name.changename::after {
		background: #fff;
	}
	.search__close {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		padding-block: 20px;
		padding-inline: 20px;
		background: rgb(228 242 255);
		transform: translate(-50%,-50%);
		z-index: 1000;
	}
	.search__close::before,
	.search__close::after {
		position: absolute;
		content: "";
		display: block;
		width: 28px;
		height: 3px;
		bottom: -28px;
		right: 0;
		background: #fff;
		transform: rotate(45deg);
	}
	.search__close::after {
		transform: rotate(-45deg);
		right: 0;
	}
	.product__list {
		justify-content: center;
	}
	.product__item {
		width: clamp(280px,45%,350px);
	}
}
@media (max-width: 600px) {
	.product__item {
		width: clamp(280px,45%,350px);
	}
}


/* fade
____________________*/
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: all 1s ease;
}
.fade.fadeShow {
	transform: translateY(0);
	opacity: 1;
}


/* 絞り込み用
____________________*/
.is-hide {
    display: none;
}