@charset "UTF-8";

/* Hero
================================================== */
.long-hero {
	position: relative;
	z-index: 1;
	padding: 60px 0 80px;
}

.long-hero__title {
	width: min(280px, 60%);
	margin: 0 auto;
	padding-bottom: 40px;
}

.long-hero__label {
	display: flex;
	align-items: center;
	color: #6f6b3b;
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.3;
}

.long-hero__label::before,
.long-hero__label::after {
	flex-grow: 1;
	height: 1px;
	background: #6f6b3b;
	content: "";
}

.long-hero__label::before {
	margin-right: 1rem;
}

.long-hero__label::after {
	margin-left: 1rem;
}

.long-hero__price {
	padding: 10px 0 24px;
	color: #6f6b3b;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}

.long-hero__price span {
	padding-left: 5px;
	font-size: 12px;
}

.long-hero__background {
	position: absolute;
	top: 3%;
	left: -2%;
	z-index: -1;
	width: 46%;
}

/* Board gallery
================================================== */
.boardArea {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2%;
}

.boardArea figure {
	min-width: 0;
}

/* Basic spec
================================================== */
.basic-spec {
	padding: 60px 0;
}

.basic-spec__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 5%;
}

.spec-card h3 {
	padding-bottom: 1em;
	font-size: 18px;
	font-weight: 500;
}

.spec-card figure {
	padding-bottom: 1em;
}

.spec-card p {
	line-height: 2;
}

/* Intro
================================================== */
.long-intro {
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 0;
}

.long-intro__title {
	padding-bottom: 60px;
	color: #6f6b3b;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 300;
	line-height: 1.45;
	text-align: center;
}

.long-intro p {
	padding-bottom: 1em;
}

/* Custom options
================================================== */
.custom-options {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 0 60px;
}

.custom-options__title {
	margin-bottom: 50px;
	padding-bottom: 18px;
	border-bottom: 1px solid #222;
	font-size: 24px;
	font-weight: 500;
}

.option-item {
	padding-bottom: 64px;
}

.option-item h3 {
	padding-bottom: 1em;
	font-size: 18px;
	font-weight: 500;
}

.option-item--text p {
	line-height: 2;
}

/* End note
================================================== */
.order-note {
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 0;
	border-top: 1px solid #222;
}

.order-note p {
	padding-bottom: 1em;
}

/* Mobile
================================================== */
@media screen and (max-width: 639px) {

	.long-hero {
		padding: 40px 0 60px;
	}

	.long-hero__title {
		width: min(240px, 68%);
		padding-bottom: 32px;
	}

	.boardArea {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 4%;
	}

	.long-hero__background {
		top: 2%;
		left: -10%;
		width: 68%;
	}

	.basic-spec {
		padding: 20px 0 60px;
	}

	.basic-spec__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.spec-card h3,
	.option-item h3 {
		font-size: 15px;
	}

	.long-intro {
		padding: 50px 0;
	}

	.long-intro__title {
		padding-bottom: 40px;
		font-size: 5.5vw;
	}

	.custom-options__title {
		margin-bottom: 36px;
		font-size: 20px;
	}

	.option-item {
		padding-bottom: 48px;
	}

	.order-note {
		padding: 48px 0;
	}

}