@charset "UTF-8";
/* components
---------------------------------------- */
.link-wrapper {
	margin-block: var(--space-40) 0;
}

.accordion {
	max-width: 800px;
	margin-inline: auto;

	.accordion__item {
		margin-block: var(--space-24) 0;
		background: rgb(var(--color-light));
		border: 1px solid rgb(var(--color-dark) / 10%);
		border-radius: 16px;

		&[open] {
			.accordion__title {
				background: rgb(var(--color-secondary));
				border-radius: 16px 16px 0 0;
				color: rgb(var(--color-light));
				transition: none;
			}

			.accordion__icon-q {
				&::after {
					background: rgb(var(--color-light));
					transform: rotate(180deg);
				}
			}
		}
	}

	.accordion__title {
		display: block;
		padding-block: 10px;
		padding-inline: 40px 36px;
		background: rgb(var(--bg-color-primary));
		border-radius: 16px;
		font-weight: 700;
		cursor: pointer;
		transition: background 0.3s ease, color 0.3s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.accordion__answer {
		padding-block: 12px 1em;
		padding-inline: 40px 20px;

		&:nth-of-type(n+2) {
			padding-block: 0 1em;
		}

		&.accordion__answer:has(.qa__link):has(+ .accordion__answer > .qa__link) {
			padding-block-end: 0.5em;
		}

		&:last-of-type {
			padding-block-end: 1.5em;
		}
	}

	.accordion__step-list {
		padding-block: 0 1em;
		padding-inline: 40px 20px;
	}
}

@media (hover:hover) {
	.accordion__title:hover {
		background: rgb(var(--color-secondary));
		color: rgb(var(--color-light));
		cursor: pointer;

		&::after {
			background: rgb(var(--color-light));
		}
	}
}

.accordion__title:active {
	background: rgb(var(--color-secondary));
	color: rgb(var(--color-light));
	transition: none;
}

.accordion__icon-q,
.accordion__icon-a {
	position: relative;

	&::before {
		display: block;
		position: absolute;
		left: 12px;
		top: 14px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		padding-block: 1px 0;
		padding-inline: 1px;
		text-align: center;
		line-height: 20px;
		color: rgb(var(--color-light));
		font-weight: 600;
		font-size: var(--font-size-sm-fix);
	}
}

.accordion__icon-q {
	&::before {
		content: 'Q';
		background: rgb(var(--color-tertiary));
	}

	&::after {
		display: block;
		content: '';
		position: absolute;
		right: 14px;
		top: 22px;
		width: 16px;
		height: 8px;
		background: rgb(var(--color-tertiary));
		clip-path: polygon(0 0, 0 2px, 50% 8px, 100% 2px, 100% 0, 50% 6px);
	}
}

.accordion__icon-a {
	&::before {
		content: 'A';
		top: 16px;
		background: rgb(var(--color-secondary));
	}
}

@media (width >= 769px) {
	.accordion__icon-q,
	.accordion__icon-a {
		&::before {
			top: 16px;
		}
	}
}

/* selections
---------------------------------------- */
.selections {
	background-color: transparent;

	.page-visual {
		position: relative;
		padding: 0;

		.page-visual__title {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding-inline: var(--layout-inline-gutter);
			color: rgb(var(--color-light));

			.page-title__sub {
				color: rgb(var(--color-light));
			}
		}

		.page-visual__picture {
			overflow: hidden;

			.page-visual__image {
				width: 100%;
				max-height: 280px;
				object-fit: cover;
				object-position: 0 center;
			}
		}
	}

	.selections__content {
		position: relative;
		padding-block: var(--space-48) var(--layout-block-end);
	}

	.product__list {
		padding-inline: var(--layout-inline-gutter);
		list-style: none;

		.product__item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 0;
			max-width: 386px;
			margin-inline: auto;
			padding-block: var(--space-24) var(--space-28);
			background-color: rgb(var(--bg-color-light) / 40%);
			background-repeat: no-repeat;
			background-size: cover;
			background-blend-mode: multiply;
			border-radius: 16px;

			&::before {
				content: "";
				position: absolute;
				inset: 0;
				z-index: -1;
				background-color: rgb(var(--bg-color-light) / 50%);
				border-radius: 16px;
			}

			&:nth-of-type(1) {
				background-image: url(../../images/miso-selections/selections/bg-tezukuri-no-aji-miso.webp);
				background-size: cover;
			}

			&:nth-of-type(2) {
				margin-block: var(--space-48);
				background-image: url(../../images/miso-selections/selections/bg-ashiya-sodachi-miso.webp);
				background-position: 0 0;
			}

			&:nth-of-type(3) {
				background-image: url(../../images/miso-selections/selections/bg-chouri-gyoza.webp);
			}

			.product__card {
				padding-inline: var(--space-28);

				.product__image {
					width: clamp(200px,55.6vw,224px);
					margin-inline: auto;
				}

				.product__title {
					margin-block: 0.5em 0;
					margin-inline: auto;
					font-size: var(--font-size-md-fix);
				}
			}

			.product__btn {
				margin-block: var(--space-16) 0;

				.product__item-link {
					min-width: 224px;
					background: rgb(var(--color-secondary));
					border: 1px solid rgb(var(--color-secondary));
					color: rgb(var(--color-light));
					font-size: var(--font-size-sm-fix);
					line-height: 48px;

					&::before {
						background: rgb(var(--color-light));
					}

					&::after {
						background: rgb(var(--color-secondary));
					}
				}
			}
		}
	}
}

@media (hover:hover) {
	#selections {
		.product__item-link:hover {
			background: rgb(var(--color-primary));
			border: 1px solid rgb(var(--color-primary));

			&::before {
				background: rgb(var(--color-light));
			}
		}
	}
}

@media (width >= 720px) {
	#selections {
		.selections__content {
			&::after {
				background: url(../../images/miso-selections/bg-miso-selections-mv.webp) center 0 no-repeat;
				background-size: cover;
			}
		}

		.product__list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 64px 48px;

			.product__item {
				width: calc((100% - 48px) / 2);

				&:nth-of-type(2) {
					margin-block: 0;
				}
			}
		}
	}
}

@media (width >= 960px) {
	#selections {
		.page-visual__picture {
			.page-visual__image {
				object-fit: cover;
				object-position: 0 -20px;
			}
		}
	}
}

@media (width >= 1080px) {
	#selections {
		.selections__content {
			&::after {
				background: url(../../images/miso-selections/bg-miso-selections-mv.webp) center -120px no-repeat;
				background-size: cover;
			}
		}

		.product__list {
			.product__item {
				width: calc((100% - 96px) / 3);
			}
		}
	}
}

/* award
---------------------------------------- */
.award {
	.award__slider {
		position: relative;
		overflow: hidden;

		.award__list {
			margin-block: var(--space-40) 0;
			padding-block: 0 var(--space-08);
			/* padding-inline: var(--layout-inline-gutter); */
			list-style: none;

			.award__item {
				max-width: 440px;

				.award-card {
					font-weight: 600;
					text-align: center;

					.award-card__link {
						text-decoration: none;
					}

					.award-card__figure {
						display: block;
						width: 100%;
						max-width: 360px;
						margin-inline: auto;
					}

					.award-card__body {
						padding-block: 20px;
						background: url(../../images/miso-selections/award/bg-gekkeiju.webp) center center no-repeat;
						background-size: contain;

						.award-card__title {
							margin-inline: auto;
							font-size: var(--font-size-md-fix);
						}

						.award-card__info {
							font-size: var(--font-size-sm-fix);
							line-height: 1.6;

							.award-card__year {
								display: block;
								margin-block: 0.8em 0;
							}

							.award-card__year,
							.award-card__name {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
}

/* swiper */
#award {
	--swiper-navigation-color: rgb(var(--color-secondary) / 80%);
	--swiper-navigation-size: 28px;
	--swiper-pagination-color: rgb(var(--color-secondary));

	.swiper-scrollbar {
		background: none;
	}

	.swiper-slide {
        transition: transform 0.7s, opacity 0.7s;
        transform: scale(0.6);
        opacity: 0.4;

		.award-card__link {
			pointer-events: none;
		}

        .award-card__body {
            opacity: 0;
            transition: opacity 0.5s;
        }

        &.swiper-slide-active {
            transform: scale(1);
            opacity: 1;

			.award-card__link {
				pointer-events: auto;
				cursor: pointer;
			}

			.award-card__image {
				width: 95%;
				margin-inline: auto;
			}

            .award-card__body {
                opacity: 1;
            }
        }
    }
}

@media (hover:hover) {
	#award {
		.swiper-slide {
			&.swiper-slide-active:hover {
				.award-card__image {
					transform: scale(1.05);
					transition: transform 0.3s;
				}
			}
		}
	}
}

@media (width >= 768px) {
	#award {
		.swiper-slide {
			&.swiper-slide-active {
				.award-card__image {
					width: 85%;
				}
			}
		}
	}
}

/* talk
---------------------------------------- */
.talk {
	.talk__content {
		padding-inline: var(--layout-inline-gutter);

		.talk__panel {
			margin-block: var(--space-24) 0;

			.talk__visual {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 48px;

				.talk__link {
					text-decoration: none;

					.talk__image {
						width: 80%;
						min-width: 280px;
						margin-inline: auto;
						border-radius: 16px;
					}

					.talk__caption {
						padding-block: 0.6em 0;
						text-align: center;

						.talk__title {
							margin-inline: auto;
							font-weight: 700;
							font-size: var(--font-size-sm);
						}
					}
				}
			}
		}

		.qa {
			padding-block: var(--space-80) 0;
			background-image: url(../../images/common/illust/illust-rokko-miso-akadashi.webp);
			background-position: right 24px;
			background-repeat: no-repeat;
			background-size: clamp(64px,17.9vw,120px);

			.qa__link {
				font-weight: 700;
				font-size: var(--font-size-sm);
			}
		}
	}
}

@media (hover:hover) {
	.talk__link:hover {
		transition: 0.3s ease;

		.talk__image {
			opacity: 0.8;
			transition: opacity 0.3s ease;
		}

		.talk__title {
			border-bottom: 1px solid rgb(var(--color-secondary));
		}
	}
}

@media (width >= 560px) {
	#talk {
		.talk__content {
			background-image: url(../../images/common/illust/illust-miso-zukuri.webp);
			background-position: left calc(var(--layout-inline-gutter)) bottom clamp(20px,5.6vw,80px);
			background-repeat: no-repeat;
			background-size: clamp(152px,27.1vw,180px);
		}
	}
}

@media (width >= 640px) {
	#talk {
		.talk__visual {
			.talk__link {
				width: calc((100% - 48px) / 2);

				.talk__image {
					width: 100%;
				}
			}
		}
	}
}

@media (width >= 811px) {
	#talk {
		.talk__content {
			background-image: url(../../images/common/illust/illust-miso-zukuri.webp);
			background-position: left calc(var(--layout-inline-gutter)) bottom clamp(20px,5.6vw,80px);
			background-repeat: no-repeat;
			background-size: clamp(180px,22.2vw,200px);
		}
	}
}

@media (width >= 1040px) {
	#talk {
		.talk__visual {
			.talk__link {
				width: calc((100% - 96px) / 3);
			}
		}
	}
}

/* purchase
---------------------------------------- */
.purchase {
	.purchase__panel {
		padding-inline: var(--layout-inline-gutter);

		.purchase__info {
			max-width: 600px;
			margin-inline: auto;
			padding-block: var(--space-24) var(--space-48);

			.purchase__image {
				border-radius: 16px;
			}

			.purchase__info-title {
				padding-block: 1em 0.5em;
				padding-inline: 1em;
			}

			.purchase__text {
				padding-block: 1em 0;
				padding-inline: 1em;
			}
		}

		.purchase__btn {
			margin-block: var(--space-24) 0;
		}
	}
}

@media (width >= 480px) {
	#purchase {
		.purchase__item {
			display: flex;

			.purchase__term {
				width: 5.5em;
			}

			.purchase__desc {
				width: calc(100% - 5.5em);
			}
		}
	}
}

@media (width >= 960px) {
	#purchase {
		.purchase__grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 64px;
		}
	}
}

.business {
	padding-inline: var(--layout-inline-gutter);
	padding-block: var(--space-40) 0;
	border-radius: 16px;

	.purchase__panel {
		position: relative;
		z-index: 10;
		padding-block: var(--space-40) var(--space-48);
		border-radius: 16px;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -1;
			background-color: rgb(var(--bg-color-light) / 80%);
			border-radius: 16px;
		}

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -2;
			background: url(../../images/miso-selections/purchase/bg-gyomu-miso.webp) 0 center no-repeat;
			background-size: cover;
			border-radius: 16px;
		}

		.business__grid {
			max-width: 600px;
			margin-inline: auto;

			.purchase__image {
				margin-block: var(--space-24) 0;
				border-radius: 16px;
			}
		}
	}

	.business__text {
		padding-block: 2em 0;
		padding-inline: 1em;
	}
}

@media (width >= 811px) {
	.business {
		.purchase__panel {
			.business__grid {
				display: grid;
				grid-template-columns: 1.2fr 1fr;
				align-items: center;
				gap: 40px;
				max-width: none;
			}
		}
	}
}