@charset "UTF-8";

.p-main {
	--main-color: #ab901e;
	--sub-color: #785339;
	--mincho-font: "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.p-mincho {
	font-family: var(--mincho-font);
}

.p-text-accent {
	--accent-color: var(--main-color);
	color: var(--accent-color);
}

.p-text-accent--sub {
	--accent-color: var(--sub-color);
	color: var(--accent-color);
}

.p-text-accent--fill {
	background: var(--accent-color);
	border: 1px solid var(--accent-color);
	color: #fff;
}

.p-text-accent--outline {
	background: #fff;
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
}

.p-text-accent--round {
	border-radius: 100vmax;
}

.p-text-with-lines {
	display: flex;
	align-items: center;
}

.p-text-with-lines::before,
.p-text-with-lines::after {
	flex: 1;
	width: 100%;
	height: 1px;
	content: "";
	background: currentcolor;
}

@media screen and (max-width: 767px) {
	.p-text-with-lines {
		column-gap: 1.5em;
	}
}

@media screen and (min-width: 768px) {
	.p-text-with-lines {
		column-gap: 2em;
	}
}

.p-bg {
	background: #fbfaf0;
}

.p-shadow-bottom {
	--shadow-color: 0deg 0% 63%;
	filter:
	    drop-shadow(0px 0.1px 0.1px hsl(var(--shadow-color) / 0.36))
	    drop-shadow(0px 0.3px 0.3px hsl(var(--shadow-color) / 0.36))
	    drop-shadow(0px 0.8px 0.9px hsl(var(--shadow-color) / 0.36))
	    drop-shadow(0px 2px 2.3px hsl(var(--shadow-color) / 0.36));
}

.p-shadow-left-bottom {
	--shadow-color: 0deg 0% 63%;
	filter:
		drop-shadow(-0.1px 0.1px 0.2px hsl(var(--shadow-color) / 0.36))
		drop-shadow(-0.3px 0.3px 0.5px hsl(var(--shadow-color) / 0.36))
		drop-shadow(-0.8px 0.8px 1.3px hsl(var(--shadow-color) / 0.36))
		drop-shadow(-2px 2px 3.2px hsl(var(--shadow-color) / 0.36));
}

.p-button {
	position: relative;
	display: flex;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.5em;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s ease;
}

.p-button--primary {
	--primary-button-color: #a42020;
	--primary-button-hover-color: #fff;
	--primary-button-hover-text-color: #a42020;
	color: #fff;
	background: var(--primary-button-color);
	border: 1px solid var(--primary-button-color);
}

@media (any-hover: hover) {
	.p-button--primary:hover {
		color: var(--primary-button-hover-text-color);
		background: var(--primary-button-hover-color);
	}
}

.p-button--secondary {
	--secondary-button-color: #000;
	--secondary-button-hover-color: #fff;
	--secondary-button-hover-text-color: #000;
	color: var(--secondary-button-color);
	background: #fff;
	border: 1px solid var(--secondary-button-color);
}

@media (any-hover: hover) {
	.p-button--secondary:hover {
		color: var(--secondary-button-hover-text-color);
		background: var(--secondary-button-hover-color);
	}
}

.p-button--main {
	--primary-button-color: var(--main-color);
	--primary-button-hover-color: #fff;
	--primary-button-hover-text-color: var(--main-color);
	--secondary-button-color: var(--main-color);
	--secondary-button-hover-color: #fff;
	--secondary-button-hover-text-color: var(--main-color);
}

.p-button--round {
	border-radius: 100vmax;
}

.p-button--arrow-b::after {
	font-family: "nextIcon";
	font-size: 1em;
	content: "\e91a";
}

.p-button--arrow-r::after {
	font-family: "nextIcon";
	font-size: 1em;
	content: "\e91c";
}

.p-mv {
	position: relative;
	display: flex;
}

@media screen and (max-width: 767px) {
	.p-mv {
		flex-direction: column;
		row-gap: 1rem;
		padding: 3rem 1rem;
		aspect-ratio: 750 / 780;
		background: url("/client_info/HARMONICK/view/userweb/ext/catalog-gift/premier/images/first_view_sp.jpg") center / cover no-repeat;
	}
}

@media screen and (min-width: 768px) {
	.p-mv {
		column-gap: 2rem;
		padding: 3rem calc(50% - 570px);
		aspect-ratio: 1920 / 670;
		background: url("/client_info/HARMONICK/view/userweb/ext/catalog-gift/premier/images/first_view.jpg") center / cover no-repeat;
	}
}

.p-mv-list {
	display: flex;
	width: 100%;
}

.p-mv-list__item {
	display: grid;
	place-content: center;
	flex: 1;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	background: #fff;
	text-align: center;
}

.p-mv-list__item--fill {
	color: #fff;
	background: var(--main-color);
}

@media screen and (max-width: 767px) {
	.p-mv-list {
		position: absolute;
		inset-inline: 0;
		bottom: -20%;
		width: calc(100% - 2rem);
		margin-inline: auto;
		column-gap: 0.5rem;
	}

	.p-mv-list__item {
		padding-block: 0.5rem;
		font-size: 0.75rem;
		line-height: 1.25;
	}
}

@media screen and (min-width: 768px) {
	.p-mv-list {
		column-gap: 1rem;
	}

	.p-mv-list__item {
		padding-block: 1rem;
		font-weight: bold;
	}
}

.p-mv-catalog-area {
	display: flex;
	align-items: center;
}

@media screen and (min-width: 768px) {
	.p-mv-catalog-area {
		position: relative;
		--shadow-color: 28deg 14% 75%;
		flex: 1;
		filter:
			drop-shadow(-1px 1px 1.6px hsl(var(--shadow-color) / 0.55))
			drop-shadow(-3.9px 3.9px 6.2px hsl(var(--shadow-color) / 0.55))
			drop-shadow(-10.1px 10.1px 16.1px hsl(var(--shadow-color) / 0.55))
			drop-shadow(-25px 25px 39.8px hsl(var(--shadow-color) / 0.55));
	}

	.p-mv-catalog-area__item {
		width: 47.5%;
	}

	.p-mv-catalog-area__item:first-child {
		transform: rotate(-5deg);
		transform-origin: top left;
	}

	.p-mv-catalog-area__item:last-child {
		position: absolute;
		inset-block: 0;
		margin-block: auto;
		right: 0;
		transform: rotate(5deg);
		transform-origin: top right;
	}
}

@media screen and (min-width: 768px) {
	.p-sec-wrapper {
		padding-inline: calc(50% - 480px);
	}
}

.p-sec {
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 767px) {
	.p-sec {
		row-gap: 1rem;
		padding: 1rem;
	}
}

@media screen and (min-width: 768px) {
	.p-sec {
		row-gap: 2rem;
		padding-block: 3rem;
	}
}

.p-sec__headline {
	text-align: center;
}

@media screen and (min-width: 768px) {
	.p-sec__headline {
		font-size: 2rem;
		line-height: 2;
	}
}

.p-order-list {
	counter-reset: item;
}

.p-order-list__item {
	position: relative;
}

.p-order-list__item::before {
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	height: 2em;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--sub-color);
	border-radius: 100vmax;
	color: var(--sub-color);
	background: #fff;
	line-height: 1.75;
	content: counter(item);
	counter-increment: item;
	font-family: var(--mincho-font);
	text-align: center;
	font-size: 1.125rem;
}