@charset "utf-8";
body {
	background-color: var(--color--bk_orange);
}
header {
	background: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
#hero {
	width: 100%;
	height: 100vh;
	position: relative;
}
	.hero__video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0%,-50%);
		overflow: hidden;
	}
		.hero__video::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			opacity: .8;
			background-image: url(../image/index/mv_overlay.webp);
			background-color: rgba(0,0,0,.3);
			background-size: 2px 2px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.hero__video video {
			width: 100%;
			height: auto;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0%,-50%);
			opacity: 1;
		}
	.hero__contents {
		width: auto;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
	}
		.hero__logo_txt {
			width: 541.88px;
			height: auto;
			margin: 0 auto 22px;
		}
			.hero__logo_txt img {
				width: 100%;
				height: auto;
			}
		.hero__logo {
			width: 717px;
			height: auto;
			margin: 0 auto;
		}
			.hero__logo img {
				width: 100%;
				height: auto;
			}

#about {
	width: 100%;
	height: auto;
	padding: 60px 0 0;
}
	.about__inner {
		width: 90%;
		max-width: 850px;
		height: auto;
		margin: 0 auto;
	}
		.about__contents_wrap {
			width: 100%;
			height: auto;
			padding: 44px 0 40px;
			margin: 0 auto 60px;
			border-radius: 8px;
			background-color: var(--color--white);
		}
			.about__contents {
				width: calc(80% + 32px);
				height: auto;
				margin: 0 auto;
			}
				.about__contents__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 18px;
					font-size: 37px;
					font-weight: 900;
					line-height: 1;
					letter-spacing: 0.05em;
					text-align: center;
				}
					.about__contents__heading_wrap {
						background: linear-gradient(transparent 60%, var(--color--yellow) 60%);
					}
						.about__contents__heading .alphabet_txt {
							display: inline-block;
							margin-right: -.10em;
							font-size: 45px;
							letter-spacing: 0.14em;
							position: relative;
							top: 1px;
						}
							.about__contents__heading .alphabet_txt .yen {
								margin: 0 -.06em;
							}
						.about__contents__heading .q_mark {
							display: inline-block;
							font-size: 43px;
							transform: rotate(16deg);
							position: relative;
							top: 1px;
						}
						.about__contents__heading .q_mark.mark_1 {
							margin-left: .08em;
						}
				.about__contents__details {
					width: 100%;
					height: auto;
					font-size: 20px;
					font-weight: 500;
					line-height: 1.9;
					letter-spacing: normal;
				}
					.about__contents__details_wrap {
						display: block;
						padding: 0 16px;
						background-image: url('../image/index/dashed-dot.svg');
						background-position: left 18px;
						background-repeat: repeat;
						background-size: 11px 38px;
					}
		.about__video {
			width: 100%;
			height: auto;
		}
			.about__video__heading {
				width: 100%;
				max-width: 600px;
				height: auto;
				padding: 5px 0;
				margin: 0 auto;
				border-radius: 8px 8px 0px 0px;
				background-color: var(--color--black);
				font-size: 28px;
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: 0.1em;
				text-align: center;
				color: var(--color--white);
			}
			.about__video__wrap {
				width: 100%;
				max-width: 600px;
				height: auto;
				margin: 0 auto;
				border-radius: 0px 0px 8px 8px;
				border: solid 5px var(--color--black);
				aspect-ratio: 16 / 9;
				position: relative;
				overflow: hidden;
			}
				.about__video__wrap iframe {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}

#selections {
	width: 100%;
	height: auto;
	padding: 104px 0 50px;
}
	.selections__inner {
		width: 90%;
		max-width: 740px;
		height: auto;
		margin: 0 auto;
	}
		.selections__logo {
			width: 95%;
			max-width: 674px;
			height: auto;
			margin: 0 auto 35px;
		}
			.selections__logo img {
				width: 100%;
				height: auto;
			}
		.selections__txt {
			width: 100%;
			height: auto;
			margin: 0 auto 53px;
			font-size: 18px;
			font-weight: 700;
			line-height: 1.7222;
			letter-spacing: 0.073em;
			text-align: center;
			color: var(--color--black);
		}
		.selections__contents {
			width: 100%;
			height: auto;
		}
			.selections__search {
				width: 100%;
				height: auto;
			}
				.selections__tag {
					width: 100%;
					height: auto;
					margin: 0 auto 34px;
				}
					.selections__tag__list {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-wrap: wrap;
						row-gap: 17px;
						column-gap: 10px;
						width: 100%;
						height: auto;
					}
						.selections__tag__item {
							font-size: 20px;
							font-weight: 700;
							line-height: 1;
							letter-spacing: 0.03em;
						}
							.selections__tag__item span {
								display: flex;
								justify-content: center;
								align-items: center;
								width: auto;
								height: 30px;
								padding: 0 12px;
								border-radius: 15px;
								background-color: var(--color--white);
								color: var(--color--black);
								cursor: pointer;
								transition: .3s;
							}
							.selections__tag__item.selected span {
								background-color: var(--color--black);
								color: var(--color--white);
							}
				.selections__cat_select {
					width: 100%;
					height: auto;
				}
					.selections__cat_select__wrap {
						width: 394px;
						height: auto;
						margin: 0 auto;
						position: relative;
					}
						.selections__cat_select__wrap::after {
							content: '';
							display: block;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 12px 7.5px 0 7.5px;
							border-color: var(--color--dark_gray) transparent transparent transparent;
							position: absolute;
							top: 55%;
							right: 20px;
							transform: translate(0%,-50%);
						}
						.selections__cat_select__wrap select#cat_search {
							width: 394px;
							height: 46px;
							padding: 0 45px 0 18px;
							margin: 0 auto;
							border-radius: 6px;
							border: none;
							background-color: var(--color--white);
							color: var(--color--dark_gray);
							font-size: 18px;
							font-weight: 700;
							line-height: 1;
							letter-spacing: 0.03em;
							cursor: pointer;
						}
			.selections__list_container {
				width: 100%;
				height: auto;
				padding: 60px 0 0;
			}
				.selections__list {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-wrap: wrap;
					row-gap: 40px;
					width: 100%;
					height: auto;
				}
					.selections__item {
						width: 48%;
						height: auto;
						padding: 43px 24px 19px;
						border-radius: 8px;
						background-color: var(--color--white);
						filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
						position: relative;
					}
						.selections__item__number {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 90px;
							height: 26px;
							padding-bottom: 2px;
							border-radius: 8px 0 8px 0;
							background-color: var(--color--black);
							position: absolute;
							top: 0;
							left: 0;
						}
							.selections__item__number__txt {
								font-size: 18px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.034em;
								color: var(--color--white);
							}
						.selections__item__contents {
							width: 100%;
							height: auto;
							margin: 0 auto 11px;
						}
							.selections__item__title {
								width: 100%;
								height: auto;
								margin: 0 auto 12px;
								font-size: 18px;
								font-weight: 700;
								line-height: 1.25;
								letter-spacing: 0.03em;
								color: var(--color--bk_orange);
							}
							.selections__item__txt {
								width: 100%;
								font-size: 12px;
								font-weight: 500;
								line-height: 1.6666;
								letter-spacing: .017em;
								color: var(--color--black);
							}
							.selections__item:nth-child(n+5) .selections__item__contents .selections__item__txt {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.selections__item.open:nth-child(n+5) .selections__item__contents .selections__item__txt {
								white-space: initial;
								opacity: initial;
								text-overflow: initial;
							}
							.selections__item.expandeditem .selections__item__contents .selections__item__txt {
								white-space: initial;
								opacity: initial;
								text-overflow: initial;
							}
						.selections__item__image {
							width: 100%;
							height: auto;
							margin: 0 auto 15px;
						}
						.selections__item:nth-child(n+5) .selections__item__image {
							display: none;
						}
						.selections__item.expandeditem .selections__item__image {
							display: block;
						}
							.selections__item__image__heading {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: 26px;
								margin: 0 auto 12px;
								border-radius: 8px;
								background-color: var(--color--bk_orange);
								position: relative;
							}
								.selections__item__image__heading::before {
									content: '';
									display: block;
									width: 0;
									height: 0;
									border-style: solid;
									border-width: 9px 5px 0 5px;
									border-color: var(--color--bk_orange) transparent transparent transparent;
									position: absolute;
									bottom: 3px;
									left: 50%;
									transform: translate(-50%,100%);
								}
								.selections__item__image__heading__txt {
									width: 100%;
									height: auto;
									font-size: 15px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.03em;
									text-align: center;
									color: var(--color--white);
								}
							.selections__item__image__wrap {
								display: flex;
								justify-content: center;
								align-items: center;
								column-gap: 8px;
								width: 100%;
								height: auto;
							}
								.selections__item__image__box {
									flex: 1;
									max-width: 31.5%;
									height: auto;
									position: relative;
								}
									.selections__item__image__box::before {
										content: '';
										display: block;
										width: 100%;
										height: 0;
										padding-top: 100%;
									}
									.selections__item__image__box img {
										width: 100%;
										height: 100%;
										object-fit: contain;
										object-position: center;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%,-50%);
									}
						.selections__item__tag {
							width: 100%;
							height: auto;
						}
						.selections__item:nth-child(n+5) .selections__item__tag {
							display: none;
						}
						.selections__item.expandeditem .selections__item__tag {
							display: block;
						}
							.selections__item__tag__list {
								display: flex;
								justify-content: flex-start;
								align-items: flex-start;
								flex-wrap: wrap;
								row-gap: 6px;
								column-gap: 6px;
								width: 100%;
								height: auto;
							}
								.selections__item__tag__item {
									display: flex;
									justify-content: center;
									align-items: center;
									width: auto;
									height: 20px;
									padding: 0 10px;
									border-radius: 10px;
									background-color: var(--color--beige);
									font-size: 12px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: .03em;
									color: var(--color--black);
								}
						.selections__item__link {
							width: 37px;
							height: 37px;
							border-radius: 37px 0 8px 0;
							overflow: hidden;
							position: absolute;
							bottom: 0;
							right: 0;
						}
						.selections__item:nth-child(n+5) .selections__item__link {
							display: none;
						}
						.selections__item.expandeditem .selections__item__link {
							display: block;
						}
							.selections__item__link_btn {
								display: flex;
								justify-content: flex-end;
								align-items: flex-end;
								width: 100%;
								height: 100%;
								padding-bottom: 9px;
								padding-right: 10px;
								background-color: var(--color--black);
							}
								.selections__item__link_btn img {
									width: 12.37px;
									height: auto;
								}
						.selections__item__more {
							width: 100%;
							height: auto;
							text-align: center;
						}
						.selections__item:nth-child(-n+4) .selections__item__more {
							display: none;
						}
						.selections__item.expandeditem .selections__item__more {
							display: none;
						}
							.selections__item__more_btn {
								display: inline-flex;
								justify-content: center;
								align-items: center;
								cursor: pointer;
							}
								.selections__item__more_btn__icon {
									width: 14.18px;
									height: auto;
									margin-right: 4.2px;
								}
								.selections__item__more_btn__txt {
									font-size: 10px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: .03em;
									color: var(--color--black);
									text-decoration: underline;
								}

#note {
	width: 100%;
	height: auto;
}
	.note__txt {
		width: 90%;
		max-width: 750px;
		height: auto;
		padding: 50px 0;
		margin: 0 auto;
		font-size: 10px;
		font-weight: 500;
		color: var(--color--white);
		text-align: center;
	}

/* PC ================================================== */
@media all and (min-width:720px){
						.selections__item__link {
							display: none !important;
						}
.modal {
	display: none;
}
}

/* SP ================================================== */
@media all and (max-width:719px){
#hero {
	height: 100svh;
}
		.hero__logo_txt {
			width: 77.837333vw;
			margin: 0 auto 2.826667vw;
		}
		.hero__logo {
			width: 79.73333vw;
		}

/* about */
#about {
	padding: 50px 0 0;
}
	.about__inner {
		width: 90.66666%;
		max-width: initial;
	}
		.about__contents_wrap {
			margin: 0 auto 40px;
		}
			.about__contents {
				width: 85.88235%;
				height: auto;
				margin: 0 auto;
			}
				.about__contents__heading {
					margin: 0 auto 19px;
					font-size: 27px;
				}
						.about__contents__heading .alphabet_txt {
							font-size: 33px;
						}
						.about__contents__heading .q_mark {
							font-size: 30px;
							top: 1px;
						}
						.about__contents__heading .q_mark.mark_1 {
							margin-left: .08em;
						}
				.about__contents__details {
					font-size: 16px;
					line-height: 2.1875;
				}
					.about__contents__details_wrap {
						padding: 0px;
						background-position: left 17px;
						background-repeat: repeat;
						background-size: 11px 35px;
					}
			.about__video__heading {
				padding: 3px 0;
				font-size: 20px;
			}
			.about__video__wrap {
				border: solid 4px var(--color--black);
			}

#selections {
	padding: 72px 0 16px;
}
	.selections__inner {
		width: 90.66666%;
		max-width: initial;
	}
		.selections__logo {
			width: 86.824%;
			max-width: initial;
			margin: 0 auto 23px;
		}
		.selections__txt {
			margin: 0 auto 36px;
			font-size: 16px;
			line-height: 1.5625;
			letter-spacing: 0.03em;
			text-align: left;
		}
			.selections__txt br {
				display: none;
			}
				.selections__tag {
					margin: 0 auto 29px;
				}
					.selections__tag__list {
						row-gap: 9px;
						column-gap: 9px;
					}
						.selections__tag__item {
							font-size: 14px;
						}
							.selections__tag__item span {
								height: 22px;
								padding: 0 10px;
								border-radius: 11px;
							}
					.selections__cat_select__wrap {
						width: 85.88235%;
						max-width: 394px;
					}
						.selections__cat_select__wrap::after {
							border-width: 9px 5.5px 0 5.5px;
							right: 15px;
						}
						.selections__cat_select__wrap select#cat_search {
							width: 100%;
							height: 34px;
							padding: 0 41px 0 13px;
							font-size: 14px;
						}
			.selections__list_container {
				padding: 30px 0 0;
			}
				.selections__list {
					row-gap: 12px;
				}
					.selections__item {
						width: 48.235294%;
						padding: 26px 3.73333vw 8px;
						border-radius: 8px;
						background-color: var(--color--white);
						position: relative;
					}
					.selections__item:nth-of-type(-n+4) {
						width: 100%;
						padding: 37px 6.4vw 19px;
						margin-bottom: 4px;
					}
						.selections__item__number {
							width: 69px;
							height: 19px;
							padding-bottom: 1px;
						}
						.selections__item:nth-of-type(-n+4) .selections__item__number {
							width: 90px;
							height: 26px;
							padding-bottom: 1px;
						}
							.selections__item__number__txt {
								font-size: 13px;
							}
							.selections__item:nth-of-type(-n+4) .selections__item__number__txt {
								font-size: 18px;
							}
						.selections__item__contents {
							margin: 0 auto 15px;
						}
							.selections__item__title {
								margin: 0 auto 5px;
								font-size: 16px;
								line-height: 1.4;
							}
							.selections__item:nth-of-type(-n+4) .selections__item__title {
								height: auto;
								margin: 0 auto 12px;
								font-size: 20px;
							}
							.selections__item__txt {
								height: 60px;
							}
							.selections__item:nth-of-type(-n+4) .selections__item__txt {
								height: auto;
							}
							.selections__item:nth-child(n+5) .selections__item__contents .selections__item__txt {
								white-space: initial;
								overflow: hidden;
								position: relative;
							}
							.selections__item:nth-child(n+5) .selections__item__contents .selections__item__txt::after {
								content: '...';
								display: block;
								padding-left: 10px;
								background: rgb(255,255,255);
								background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
								position: absolute;
								bottom: 0;
								right: 0;
								transform: translate(0%,0%);
							}
						.selections__item__image {
							margin: 15px auto 14px;
						}
							.selections__item__image__heading {
								padding-bottom: 2px;
							}
						.selections__item__tag {
							width: 100%;
							height: auto;
						}
						.selections__item:nth-child(n+5) .selections__item__tag {
							display: none;
						}

.modal {
	display: none;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
	.modal__bk {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
	}
	.modal__container {
		width: 90.66666%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
		.modal_close_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30px;
			height: 30px;
			font-size: 28px;
			font-weight: 700;
			color: var(--color--white);
			position: absolute;
			bottom: 100%;
			right: 0;
			transform: translate(0%,0%);
		}
		.modal__contents {
			width: 100%;
			height: auto;
			padding: 37px 6.4vw 19px;
			border-radius: 8px;
			background-color: var(--color--white);
		}
			.modal__contents .selections__item__number {
				width: 90px;
				height: 26px;
				padding-bottom: 2px;
			}
				.modal__contents .selections__item__number__txt {
					font-size: 18px;
				}
				.modal__contents .selections__item__title {
					height: auto;
					margin: 0 auto 12px;
					font-size: 20px;
				}
				.modal__contents .selections__item__txt {
					height: auto;
				}
						.modal__contents .selections__item__more {
							display: none;
						}

/* note */
	.note__txt {
		width: 90%;
		max-width: initial;
		padding: 50px 0 30px;
		font-size: 10px;
	}
}