@charset "UTF-8";
/* components + utilities */
/* bg wave
---------------------------------------- */
.wave--bottom-light {
	background-color: rgb(var(--bg-color-primary));
	background-image: url(../../images/common/bg/bg-wave-bottom-light.svg);
}

.wave--bottom-primary {
	background-color: rgb(var(--bg-color-light));
	background-image: url(../../images/common/bg/bg-wave-bottom-primary.svg);
}

.wave--bottom-light,
.wave--bottom-primary {
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: contain;
}

/* block
---------------------------------------- */
.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

/* panel & card
---------------------------------------- */
/* panel */
.panel {
	padding-inline: var(--layout-inline-gutter);
}

/* card */
.card {
	padding-block: var(--space-40) var(--space-64);

	.card__body {
		padding-block: var(--space-24) 0;
		padding-inline: var(--space-24);
	}
}

@media (width >= 960px) {
	.card {
		padding-inline: var(--layout-inline-gutter);

		.card__body {
			padding: 0;
		}

		&:nth-of-type(2n) {
			direction: rtl;

			.figure,
			.card__body {
				direction: ltr;
				text-align: left;
			}
		}
	}
}

/* figure
---------------------------------------- */
.figure {
	display: block;
	max-width: 600px;

	.card__image {
		object-fit: contain;
		object-position: center;
	}

	.card__visual {
		width: clamp(200px,55.6vw,320px);
	}
}

.figure--right,
.figure--left {
	width: calc(100% - var(--space-20));
}

.figure--both {
	margin-inline: auto;

	.card__image {
		border-radius: 16px;
	}
}

.figure--left {
	margin-inline: 0 auto;

	.card__image {
		border-radius: 0 16px 16px 0;
	}
}

.figure--right {
	margin-inline: auto 0;
	.card__image {
		border-radius: 16px 0 0 16px;
	}
}

@media (width >= 960px) {
	.figure--both {
		width: calc(100% - var(--space-20));
		margin-inline: auto 0;
	}

	.figure--right,
	.figure--left {
		.card__image {
			border-radius: 16px;
		}
	}
}

/* title & text & color
---------------------------------------- */
.page-title {
	color: rgb(var(--color-light));
	font-weight: 700;
	font-size: var(--font-size-reg);
	line-height: 1.2;

	.page-title__sub {
		display: block;
		padding-block: 0 var(--space-08);
		color: rgb(var(--bg-color-primary));
		font-weight: 500;
		font-size: var(--font-size-xl-en);
	}
}

.title {
	line-height: 1.5;

	&&.title--lg,
	&.title--md {
		color: rgb(var(--color-secondary));
	}

	&.title--lg {
		font-size: var(--font-size-lg);
	}

	&.title--md {
		width: fit-content;
		padding-block: 0 0.2em;
		padding-inline: 0.05em;
		border-bottom: 1px solid rgb(var(--color-tertiary));
		font-size: var(--font-size-md);
	}

	/* line */
	&.title--line {
		position: relative;
		font-size: var(--font-size-md);
		text-align: center;

		&::after {
			position: absolute;
			left: 50%;
			bottom: -4px;
			transform: translateX(-50%);
			width: 2em;
			height: 1px;
			background: rgb(var(--color-dark) / 40%);
			content: '';
		}
	}
}

/* accent */
.highlight {
	&.highlight--accent,
	&.highlight--attention {
		font-weight: 600;
		font-family: var(--font-family-serif);
	}

	&.highlight--accent {
		color: rgb(var(--color-primary));
	}

	&.highlight--attention {
		color: rgb(var(--color-secondary));
	}

	&.highlight--lead {
		font-size: 1.4em;
	}

	&.highlight--small-lead {
		font-size: 1.2em;
	}
}

/* marker */
.marker {
	display: inline-block;
	position: relative;
	z-index: 1;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

	&::after {
		content: "";
		position: absolute;
		bottom: 0.2em;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 0.4em;
		background: rgb(255 239 63 / 40%);
	}

	&::first-letter {
		font-feature-settings: "palt";
	}
}

/* text */
.text {
	margin-block: 1.8em 0;
	word-wrap: break-word;

	+ .text {
		margin-block: 1.2em 0;
	}
}

.text-accent {
	color: rgb(var(--color-accent-primary));
}

.punct-half {
	display: inline-block;
	width: 0.5em;
	transform: scale(0.85);
	transform-origin: left bottom;
	vertical-align: baseline;
	line-height: 1;
	letter-spacing: normal;
	user-select: none;
}

/* definition list
---------------------------------------- */
.dl {
	.dl__item {
		padding-block: var(--space-10) var(--space-08);
		border-bottom: 1px solid rgb(var(--color-dark) / 40%);

		.dl__term,
		.dl__desc {
			padding-inline: 1.2em;
		}

		.dl__term {
			font-weight: 600;
		}
	}
}

/* decoration
---------------------------------------- */
.bg-decoration--right,
.bg-decoration--left {
	padding-block: 0 32px;
}

.bg-decoration--right {
	background: url(../../images/common/decoration/kouji-decoration-01.webp) right 8px bottom no-repeat;
	background-size: 50%;
}

.bg-decoration--left {
	background: url(../../images/common/decoration/kouji-decoration-02.webp) left 8px bottom no-repeat;
	background-size: 50%;
}

/* shadow */
.shadow-right {
	filter: drop-shadow(12px 12px 0px rgb(var(--bg-color-primary)));
}

.shadow-left {
	filter: drop-shadow(-12px 12px 0px rgb(var(--bg-color-primary)));
}

/* btn & link
---------------------------------------- */
.btn,
.link--arrow  {
	display: block;
	width: fit-content;
	font-weight: 600;
	font-size: var(--font-size-sm-fix);
}

.btn:active {
	background: rgb(var(--color-tertiary));
}

/* btn shop */
.btn--shop {
	padding-block: 0.4em 0.3em;
	padding-inline: 2.8em 1em;
	background: rgb(var(--color-secondary)) url(../../images/common/icons/icon-online-shop.svg) 0.8em center no-repeat;
	background-size: 20px;
	color: rgb(var(--color-light));
	font-size: var(--font-size-xs-fix);
	text-decoration: none;
}

@media (hover:hover) {
	.btn--shop:hover {
		background: rgb(var(--color-tertiary)) url(../../images/common/icons/icon-online-shop.svg) 0.8em center no-repeat;
		background-size: 20px;
		color: rgb(var(--color-light));
		transition: background 0.3s ease;
	}
}

.btn--shop:active {
	background: rgb(var(--color-tertiary)) url(../../images/common/icons/icon-online-shop.svg) 0.8em center no-repeat;
	background-size: 20px;
	color: rgb(var(--color-light));
}

/* link arrow */
.link--arrow {
	border-bottom: 1px solid rgb(var(--color-secondary) / 0%);
	padding-inline: 1em 0;
	text-indent: -0.7em;
	text-decoration: none;

	&::before {
		content: '';
		display: inline-block;
		width: 0.4em;
		height: 0.6em;
		margin-block: 0 0.2em;
		margin-inline: 0 0.4em;
		padding-inline: 0 0.4em;
		padding-block: 0 0.2em;
		background: rgba(var(--color-secondary));
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		vertical-align: middle;
	}
}

@media (hover:hover) {
	.link--arrow:hover {
		border-bottom: 1px solid currentColor;
		color: rgb(var(--color-secondary));
		text-decoration: none;
	}
}

.link--arrow:active::before {
	border-bottom: 1px solid currentColor;
	color: rgb(var(--color-secondary));
	text-decoration: none;
}

/* link rounded */
.link--rounded {
	display: block;
	min-width: 240px;
	max-width: 320px;
	margin-inline: auto;
	padding-inline: 24px;
	background-color: rgb(var(--color-light));
	border: 1px solid rgb(var(--border-color-dark) / 10%);
	border-radius: 9999px;
	font-weight: 600;
	line-height: clamp(52px,14.4vw,56px);
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

@media (hover:hover) {
	.link--rounded:hover {
		background-color: rgb(var(--color-secondary));
		color: rgb(var(--color-light));
		text-decoration: none;
		transition: 0.3s ease;
	}
}

.link--rounded:active {
	background-color: rgb(var(--color-secondary));
	color: rgb(var(--color-light));
	text-decoration: none;
}

/* link arrow rounded */
.link--arrow-rounded {
	display: block;
	position: relative;
	z-index: 1;

	&::before,
	&::after {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin-block: auto;
		content: '';
	}

	&::before {
		right: 20px;
		width: 16px;
		height: 16px;
		background: rgb(var(--color-primary));
		border-radius: 50%;
	}

	&::after {
		right: 22px;
		width: 8px;
		height: 8px;
		background: rgb(var(--color-light));
		clip-path: polygon(0 0, 20% 0, 60% 50%, 20% 100%, 0 100%, 40% 50%);
	}
}