@charset "utf-8";

/*============

select.css

=============*/

/* 共通 ------------------------------ */

h2.catTitle + div {
	margin: 0 0 clamp(20px,10vw,60px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
}

figure.catPict {
  width: min(150px, 25%);
}

h2.catTitle + div p:not(:last-child) {
	margin: 0 0 0 1em;
	flex: 1;
	font-size: min(1.6rem,6vw);
	color: #666;
}

h2.catTitle + div p.catBack {
	margin: 0;
	padding: 0 1em 0 0;
	box-sizing: border-box;
}

h2.catTitle + div p.catBack a {
	margin: 0;
	padding: 0 0 0 18px;
	background: url(/assets/img/btn_arrow_left_gray_ic01.svg) no-repeat 0 50% / 15px auto;
	display: block;
	width: fit-content;
}

.comSelect h3 {
	margin: 0 0 clamp(10px,5vw,30px);
	font-size: min(1.6rem,6vw);
}

.comSelect h3::before {
	display: none;
}

.comSelect .selectList {
	margin: 0 0 clamp(20px,10vw,60px);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.comSelect .selectList > li {
	padding: clamp(6.6px,3.3vw,20px) 0;
  background: linear-gradient(-45deg, rgb(224,224,224) 49%, rgb(232,232,232) 49%);
	display: flex;
	align-items: center;
}

.comSelect .selectList figure {
	margin: 0;
	width: min(100px, 25%);
	aspect-ratio: 1 / 1;
}

.comSelect .selectList figure img {
  width: 100%;
  height: auto;
}

.comSelect .selectList p {
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
	width: calc(50% - min(50px, 12.5%));
	font-size: min(1.22rem,4.5vw);
	color: #666;
	text-align: center;
	font-weight: normal;
}

.comSelect .selectList p::after {
	display: none;
}

.comSelect .selectList p span {
	display: inline-block;
}

.comSelect .selectList ul {
	width: calc(50% - min(50px, 12.5%));
	padding: 0 10px;
	box-sizing: border-box;
}

.comSelect .selectList ul li {
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
	background: url(/assets/img/btn_arrow_right_gray_ic01.svg) no-repeat 0 50% / 10px auto;
}

.downward {
	transform: rotate(180deg);
}

.comSelect .toResult {
	margin: 0;
	padding: 0;
}

.comSelect .toResult li {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: none;
	background: url(/assets/img/btn_arrow_right_gray_ic01.svg) no-repeat 0 50% / 15px auto;
	font-size: min(1.6rem,6vw);
}




/* PC -------------------------------- */
@media(min-width: 1280px) {

	.comSelect .selectList > li {
		margin: 0 0.125% 0.125% 0;
	  width: 33.25%;
  }
	.comSelect .selectList > li:nth-child(3n) {
		margin-right: 0;
  }
}

/* スマホ横、タブレット大 ------------ */
@media(max-width: 1279px) {
	.comSelect .selectList > li {
		margin: 0 0.2% 0.2% 0;
	  width: 49%;
  }
	.comSelect .selectList > li:nth-child(even) {
		margin-right: 0;
  }
}

/* タブレット・スマホ ---------------- */
@media(max-width: 768px) {
	.comSelect .selectList > li {
		margin: 0 0 2px 0;
	  width: 100%;
  }
}

/* スマホ縦、SplitView --------------- */
@media (max-width: 639px) {
	h2.catTitle + div {
		flex-wrap: wrap;
	}
	h2.catTitle + div p.catBack {
		border-top: 2px solid #f6f6f6;
		width: 100%;
	}
	h2.catTitle + div p.catBack a {
		margin: 0 0 0 auto;
		padding: .4em 0 .4em 18px;
	}
}