/* ==========================================================================
//  Styles.css
// ========================================================================== */
/* Modern CSS Reset by Andy Bell */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

img,
picture {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* ==========================================================================
//  グローバル設定 (Global Settings)
//  - サイト全体の基本的なHTML要素、フォント、リセットスタイルなど。
// ========================================================================== */
:root {
	--black: #111;
	--white: #fcfcfc;
	--cream: #f0e7d5;
	--matteBlack: #2b2b2b;
	--burgundy: #6d1818;
	--stoneGray: #b2ada7;
	--deepBlue: #223f50;
	--indigo: #212842;
	--muted: #707070;
	--accent: #6088c8;
	--max-width: 1100px;
	--header-height: 80px;
}

html,
body {
	width: 100%;
	margin: 0;
	padding: 0;
	/* スムーズスクロールを有効にする */
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
	overflow-x: hidden;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", Roboto, Arial, sans-serif;
	color: var(--black);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-size: 16px;
	line-height: 1.55;
	background: #f6f6f6;
}

body.child {
	padding-top: 80px;
	background: #fff;
}

a,
button {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.c2c {
	background: #c2c;
}

/* ==========================================================================
//  タイポグラフィ (Typography)
//  - 特定のフォントスタイルやテキストの表示に関する設定。
// ========================================================================== */
.young-serif-regular {
	font-family: "Young Serif", serif;
	font-weight: 400;
	font-style: normal;
}

.text-hide {
	/* テキストを視覚的に隠すためのテクニック（SEO目的などで要素は残したい場合） */
	font: 0 / 0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
}

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

small,
.small {
	font-size: smaller;
}

.justify {
	text-align: justify;
}

/* H font scaling*/
h1 {
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	font-weight: 700;
	line-height: 1.2;
}

h2 {
	font-size: clamp(1.75rem, 4vw + 0.75rem, 3rem);
	font-weight: 700;
	line-height: 1.3;
}

h3 {
	font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
	font-weight: 600;
	line-height: 1.4;
}

h4 {
	font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
	font-weight: 600;
	line-height: 1.4;
}

h5 {
	font-size: clamp(1.125rem, 2vw + 0.5rem, 1.5rem);
	font-weight: 500;
	line-height: 1.5;
}

h6 {
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
	font-weight: 500;
	line-height: 1.5;
}

/* ==========================================================================
//  ヘッダーセクション (Header Section)
//  - サイトのナビゲーションバー、ロゴ、ハンバーガーメニューなど。
// ========================================================================== */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 1000;
	backdrop-filter: blur(10px);
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	border-bottom-right-radius: 2rem;
	border-bottom-left-radius: 2rem;
	transition: transform 0.5s ease-out;
	transform: translateY(0);
}

.header.is-hidden {
	transform: translateY(-100%);
}

.header-inner {
	margin: 0 auto;
	padding: .5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (min-width: 1200px) {
	.header-inner {
		padding: .5rem 2rem;
	}
}

.logo {
	margin: 0;
}

.logo a {
	display: block;
	width: 160px;
	height: 64px;
	background: url(../img/Logo_Mark_White.svg) no-repeat center/contain;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* ==========================================================================
//  ナビゲーションモーダル (Navigation Modal)
//  - ハンバーガーメニューをクリックした際に表示されるオーバーレイ。
// ========================================================================== */
.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2rem;
}

.nav a {
	text-decoration: none;
	color: #fff;
	font-family: "Young Serif", serif;
	font-optical-sizing: auto;
	font-weight: 900;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.nav a:hover {
	opacity: 0.6;
}

/* ハンバーガーメニュー */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 28px;
	height: 3px;
	background: var(--white);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.scrolled .nav-toggle span {
	background: var(--white);
}

/* モバイル対応 */
@media (max-width: 1024px) {
	.nav-toggle {
		display: flex;
	}

	.nav {
		position: absolute;
		top: 100%;
		right: 0;
		background: rgba(115, 115, 115, 0.922);
		width: 90%;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		transform: translate(100%);
		opacity: 0;
		transition: all 0.3s ease;
	}

	.nav.active {
		transform: none;
		opacity: 1;
		display: block;
	}

	.nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.nav li {
		width: 100%;
		padding: 24px 0;
		border-bottom: 1px solid #dbdbdb;
	}

	.nav li a {
		padding-left: 1rem;
		position: relative;
		display: block;
	}

	.nav li a:after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 15px;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid var(--white);
		border-right: 5px solid transparent;
	}
}

/* ==========================================================================
// ナビゲーションモーダル (Navigation Modal) のドロップダウン
// ========================================================================== */

/* デスクトップ用 (1200px以上) */
@media (min-width: 1200px) {

	.dropdown a {
		cursor: pointer;
	}

	/* ドロップダウンの親 li の設定 */
	.nav ul li.dropdown {
		position: relative;
	}

	/* ドロップダウンメニューの基本的なスタイル */
	ul.dropdown-menu {
		flex-direction: column;
		gap: .25rem;
		list-style: none;
		padding: 0;
		margin: 0;
		position: absolute;
		top: 53px;
		left: 100px;
		transform: translateX(-50%);
		min-width: 224px;
		background: none;
		visibility: hidden;
		/* 初期状態では非表示 */
		opacity: 0;
		transition: visibility 0.2s, opacity 0.2s;
		z-index: 999;
	}

	/* クリックで表示（JSで .active-dropdown クラスをトグル） */
	.nav ul li.dropdown.active-dropdown .dropdown-menu {
		visibility: visible;
		opacity: 1;
	}

	/* 親 li のボーダーを削除 */
	.nav li.dropdown {
		border-bottom: none;
	}

	/* ドロップダウンメニュー内の a のスタイル調整 */
	.dropdown-menu a {
		padding: 8px 0 8px 8px;
		display: block;
		text-align: left;
		text-transform: uppercase;
		font-family: "Young Serif", serif;
		font-weight: 400;
		font-style: normal;
		letter-spacing: .25px;
		color: var(--black);
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(5px);
		border-radius: 0 8px 8px 0;
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
	}

	.dropdown-menu .matteBlack {
		border-left: 1rem solid var(--matteBlack);
	}

	.dropdown-menu .matteBlack:hover,
	.dropdown-menu .matteBlack.cnt {
		border-left: 1rem solid var(--white);
		background: var(--matteBlack);
		color: var(--white);
		opacity: 1;
	}

	.dropdown-menu .burgundy {
		border-left: 1rem solid var(--burgundy);
	}

	.dropdown-menu .burgundy:hover,
	.dropdown-menu .burgundy.cnt {
		border-left: 1rem solid var(--white);
		background: var(--burgundy);
		color: var(--white);
		opacity: 1;
	}

	.dropdown-menu .stoneGray {
		border-left: 1rem solid var(--stoneGray);
	}

	.dropdown-menu .stoneGray:hover,
	.dropdown-menu .stoneGray.cnt {
		border-left: 1rem solid var(--white);
		background: var(--stoneGray);
		color: var(--white);
		opacity: 1;
	}

	.dropdown-menu .deepBlue {
		border-left: 1rem solid var(--deepBlue);
	}

	.dropdown-menu .deepBlue:hover,
	.dropdown-menu .deepBlue.cnt {
		border-left: 1rem solid var(--white);
		background: var(--deepBlue);
		color: var(--white);
		opacity: 1;
	}

	.dropdown-menu a span {
		font-family: "Noto Sans JP", sans-serif;
	}

	.dropdown-menu li {
		padding: 0;
		border-bottom: none;
	}

	/* Colorsリンクの右側に下向きの三角形アイコンを追加 */
	#colors-dropdown-toggle:after {
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 8px;
		/* テキストとの間隔 */
		vertical-align: middle;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid var(--white);
		/* 白い下向きの三角形 */
		transition: transform 0.2s ease-in-out;
	}

	/* ドロップダウンが開いているときに三角形を回転 */
	.nav ul li.dropdown.active-dropdown #colors-dropdown-toggle:after {
		transform: rotate(180deg);
		/* 上向きに回転 */
	}
}

/* モバイル用 (1024px以下) */
@media (max-width: 1024px) {

	.nav li.dropdown {
		padding-bottom: 0;
		border-bottom: none;
	}

	.dropdowntrigger {
		padding-bottom: 24px;
	}

	.nav li.dropdown>a:after {
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid var(--muted);
		border-bottom: 0;
		right: 25px;
	}

	.dropdown-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: none;
		border-top: 1px solid #dbdbdb;
	}

	.dropdown-menu.open {
		display: block;
	}

	.dropdown-menu li {
		padding: 0;
		border-bottom: 1px solid #dbdbdb;
	}

	.dropdown-menu li a {
		padding: 12px 0 12px 2rem;
		/* インデントを深めに設定 */
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: .15rem;
		background: rgba(0, 0, 0, 0.46);
		color: #fff;
	}

	.dropdown-menu a span {
		font-family: "Noto Sans JP", sans-serif;
	}

	#colors-dropdown-toggle:after,
	.dropdown-menu li a:after {
		content: none;
	}

	.dropdown-menu .matteBlack {
		border-left: 1rem solid var(--matteBlack);
	}

	.dropdown-menu .burgundy {
		border-left: 1rem solid var(--burgundy);
	}

	.dropdown-menu .stoneGray {
		border-left: 1rem solid var(--stoneGray);
	}

	.dropdown-menu .deepBlue {
		border-left: 1rem solid var(--deepBlue);
	}
}

/* ==========================================================================
//  ヒーローセクション (Hero Section)
//  - トップページのメインビジュアルエリア（動画や画像）。
// ========================================================================== */
.hero {
	width: 100vw;
	height: 128vw;
	display: flex;
	align-items: flex-end;
	background: url(../img/Hero_Bg.webp) no-repeat center;
}

.hero-textArea {
	padding-bottom: 2rem;

	h2 {
		font-size: 18px;
		color: var(--white);
	}

	figure {
		width: 280px;
		padding: 8px 0 0;
	}
}

@media (min-width: 768px) {
	.hero-textArea {
		padding-bottom: 0;
	}

	.hero {
		height: 56vw;
		display: flex;
		align-items: center;
		background: url(../img/Hero_Bg.webp) no-repeat center;
	}
}

@media (min-width: 1024px) {
	.hero-textArea {
		padding-bottom: 2rem;
	}

	.hero {
		align-items: flex-end;
		height: 100vh;
		background: url(../img/Hero_Bg.webp) no-repeat center;
	}
}

.scrollDown {
	display: none;
}

@media (min-width: 1200px) {
	.scrollDown {
		display: block;
		position: absolute;
		right: 10%;
		bottom: 0%;
	}

	.scrollDown span {
		font-size: 1rem;
		font-weight: 900;
		line-height: 1.4;
		color: #ff8000;
		letter-spacing: 0.3em;
		padding-left: .5rem;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}

	.scrollDown:before {
		content: "";
		position: absolute;
		bottom: 0;
		right: -13px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #eee;
		animation: circlemove 1.6s ease-in-out infinite,
			circlemovehide 1.6s ease-out infinite;
	}

	.scrollDown:after {
		content: "";
		position: absolute;
		bottom: 8px;
		right: -10px;
		width: 4px;
		height: 100px;
		background: #fff;
	}

	@keyframes circlemove {
		0% {
			bottom: 100px;
		}

		100% {
			bottom: 0px;
		}
	}

	@keyframes cirlemovehide {
		0% {
			opacity: 0
		}

		50% {
			opacity: 1;
		}

		80% {
			opacity: 0.9;
		}

		100% {
			opacity: 0;
		}
	}
}

/* ==========================================================================
//  DELIGHTER
//  - アニメーション設定。
// ========================================================================== */
.delighter.top {
	transform: translatey(-100%);
	opacity: 0;
	transition: all .9s ease-in-out;
}

.delighter.bottom {
	transform: translatey(100%);
	opacity: 0;
	transition: all .9s ease-in-out;
}

.delighter.right {
	transform: translate(-100%);
	opacity: 0;
	transition: all .9s ease-in-out;
}

.delighter.left {
	transform: translate(100%);
	opacity: 0;
	transition: all .9s ease-in-out;
}

.delighter.fadeIn {
	transition: opacity 1.5s ease-in-out;
	opacity: 0;
}

.delighter.top.started,
.delighter.bottom.started,
.delighter.right.started,
.delighter.left.started,
.delighter.fadeIn.started {
	transform: none;
	opacity: 1;
}

/* ==========================================================================
//  コンテンツ
//  - コンテンツレイアウト設定。
// ========================================================================== */
section {
	margin-bottom: 96px;
}

.page_title {
	padding: 1rem 0;
	text-align: center;
	color: #212842;
	line-height: 1.1;
	font-family: "Young Serif", serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-size: 2rem;
	letter-spacing: 0.125rem;
}

@media (min-width: 768px) {
	.page_title {
		font-size: 5rem;
	}
}

.lead {
	padding: 0 0 1rem;
	text-align: center;
}

.descCopy {
	font-size: 1.1rem;
	line-height: 1.7;
	text-align: center;
}

/* Splideスライダー全体 */
.splide {
	margin-bottom: 16px;
}

/* ページネーション（ドット→バーへ） */
.splide__pagination {
	position: static;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

/* 各バーの形 */
.splide__pagination__page {
	width: 30px;
	/* バーの長さ */
	height: 3px;
	/* バーの太さ */
	border-radius: 2px;
	background: #ccc;
	transition: background-color 0.3s ease, width 0.3s ease;
}

/* アクティブ状態 */
.splide__pagination__page.is-active {
	background: #333;
	transform: scale(1.0);
}

:root {
	--img-width: 60vw;
	--gap: 48px;
	--max-width: 90vw;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: stretch;
	padding: 32px 0;
}

.item {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.item.left {
	justify-content: flex-start;
}

.frame {
	width: var(--img-width);
	max-width: var(--max-width);
	aspect-ratio: 7/5;
	overflow: hidden;
}

.right .frame img {
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
}

.left .frame img {
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
}

.frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width:420px) {
	:root {
		--img-width: 92vw;
	}

	.stack {
		padding: 20px 0;
	}
}

@media (min-width:421px) and (max-width:900px) {
	:root {
		--img-width: 86vw;
	}
}

.colorName {
	margin: 1rem 0 1rem 1rem;

	.matteBlack {
		border-left: 1rem solid var(--matteBlack);
	}

	.burgundy {
		border-left: 1rem solid var(--burgundy);
	}

	.stoneGray {
		border-left: 1rem solid var(--stoneGray);
	}

	.deepBlue {
		border-left: 1rem solid var(--deepBlue);
	}
}

.colorName h4 {
	font-size: 24px;
	text-transform: uppercase;
	font-family: "Young Serif", serif;
	font-optical-sizing: auto;
	font-weight: 900;
	letter-spacing: 0.05rem;
}

.stack .colorName h4 {
	margin-bottom: 8px;
	padding-left: 10px;
}

@media (min-width: 1200px) {
	.stack .colorName h4 {
		padding-left: 16px;
	}
}

@media (min-width: 768px) {
	.colorName h4 {
		font-size: 40px;
		line-height: 1.1;
	}
}

.colorName h5 {
	margin: 0 0 .5rem;
	font-size: 1rem;
}

.colorName h5 span {
	font-size: 12px;
}

.price {
	font-size: 1.5rem;
}

.price:before {
	font-size: .8em;
	line-height: 1em;
	content: "¥ ";
}

.price:after {
	font-size: .5em;
	line-height: 1em;
	content: "（税込）";
}

.normal,
.childseat {
	margin-bottom: 0;
	display: flex;
	align-items: center;

	h3 {
		padding-bottom: 2rem;
		color: #ffffff;
	}
}

.normal {
	width: 100vw;
	height: 80vw;
	position: relative;
	background-image:
		linear-gradient(to right,
			rgba(120, 92, 0, 0.7) 0%,
			rgba(182, 168, 124, 0.7) 40%,
			rgba(0, 0, 0, 0) 100%),
		/* 左→右へ透明に */
		image-set(url("../img/normal_Bg-440.webp") type("image/webp"), url("../img/normal_Bg-440.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center;
	color: white;
	padding: 0 6rem 0 2rem;
	text-align: left;
}

@media (min-width: 768px) {
	.normal {
		height: 50vw;
		background-image:
			linear-gradient(to right,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 40%,
				rgba(0, 0, 0, 0) 100%),
			/* 左→右へ透明に */
			image-set(url("../img/normal_Bg-1024.webp") type("image/webp"), url("../img/normal_Bg-1024.jpg") type("image/jpeg"));
	}
}

@media (min-width: 1200px) {
	.normal {
		height: 40vw;
		background-image:
			linear-gradient(to right,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 40%,
				rgba(0, 0, 0, 0) 100%),
			/* 左→右へ透明に */
			image-set(url("../img/normal_Bg-1984.webp") type("image/webp"), url("../img/normal_Bg-1984.jpg") type("image/jpeg"));
		background-size: cover;
		background-position: center;
	}
}

@media (min-width: 1400px) {
	.normal {
		height: 30vw;
		background-image:
			linear-gradient(to left,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 60%,
				rgba(0, 0, 0, 0) 100%),
			image-set(url("../img/normal_Bg-2560.webp") type("image/webp"), url("../img/normal_Bg-2560.jpg") type("image/jpeg"));
		background-size: cover;
		background-position: center;
	}
}

.childseat {
	width: 100vw;
	height: 80vw;
	position: relative;
	background-image:
		linear-gradient(to right,
			rgba(120, 92, 0, 0.7) 0%,
			rgba(182, 168, 124, 0.7) 40%,
			rgba(0, 0, 0, 0) 100%),
		/* 左→右へ透明に */
		image-set(url("../img/Child_Seat_Bg-440.webp") type("image/webp"), url("../img/Child_Seat_Bg-440.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center;
	color: white;
	padding: 0 6rem 0 2rem;
	text-align: left;
}

@media (min-width: 768px) {
	.childseat {
		height: 50vw;
		background-image:
			linear-gradient(to right,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 40%,
				rgba(0, 0, 0, 0) 100%),
			/* 左→右へ透明に */
			image-set(url("../img/Child_Seat_Bg-1024.webp") type("image/webp"), url("../img/Child_Seat_Bg-1024.jpg") type("image/jpeg"));
	}
}

@media (min-width: 1200px) {
	.childseat {
		height: 40vw;
		background-image:
			linear-gradient(to right,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 40%,
				rgba(0, 0, 0, 0) 100%),
			/* 左→右へ透明に */
			image-set(url("../img/Child_Seat_Bg-1984.webp") type("image/webp"), url("../img/Child_Seat_Bg-1984.jpg") type("image/jpeg"));
		background-size: cover;
		background-position: center;
	}
}

@media (min-width: 1400px) {
	.childseat {
		height: 30vw;
		background-image:
			linear-gradient(to right,
				rgba(120, 92, 0, 0.7) 0%,
				rgba(182, 168, 124, 0.7) 40%,
				rgba(0, 0, 0, 0) 100%),
			image-set(url("../img/Child_Seat_Bg-2560.webp") type("image/webp"), url("../img/Child_Seat_Bg-2560.jpg") type("image/jpeg"));
		background-size: cover;
		background-position: center;
	}
}

#carrier {
	margin-bottom: 0.5rem;
	background: #e1dfcc;
}

#child {
	background: #e1dfcc;
	margin-bottom: 0;
}

.d-flex {
	display: flex;
	align-items: center;
	flex-direction: column;
}

@media (min-width: 1400px) {
	.d-flex {
		flex-direction: row;
	}
}

.videoArea {
	flex-basis: 50%;
	line-height: 0;
}

video {
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
}

.catchArea {
	padding: 0 2rem 3rem;
	flex-basis: 50%;
	flex-grow: 2;

	.section__btn {
		margin: 2rem auto 0;
	}
}

@media (min-width: 1400px) {
	.catchArea {
		padding-bottom: 0;
	}
}

.head {
	padding: 3rem 0 0;
	text-align: center;
	font-family: "Young Serif", serif;
	font-weight: 900;
}

.sub {
	padding: 0 0 2rem;
	text-align: center;
}

@media (min-width: 768px) {
	.exp {
		text-align: center;
	}
}

#nextUp {
	padding-top: 5rem;
	background: #FFF;
}

.partsArea {
	margin: 3rem 0 5rem;
}

.titleArea {
	text-align: center;
	margin-bottom: 1.5rem;

	h5 {
		margin: 0;
		font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
		font-family: "Young Serif", serif;
		font-weight: 900;
		letter-spacing: .05rem;
	}
}

.partsImage {
	padding-bottom: 3rem;
}

.partsItemarea {
	display: flex;
	flex-wrap: wrap;
}

.itemCaption {
	text-align: center;

	.price {
		font-size: 1rem;
	}

	.price:after {
		font-size: .8rem;
	}
}

@media (min-width: 1200px) {
	.order-1 {
		order: 1;
	}

	.order-2 {
		order: 2;
	}
}

.moreTocome {
	justify-content: center;
}

#specs {
	margin: 1rem;
	padding: 3rem 0;
	background: rgba(0, 0, 0, 0.9);
	border-radius: 2rem;

	.row {
		align-items: center;
	}

	.catchArea,
	.specArea {
		color: #fff;
	}

	.head {
		padding-top: 0;
	}
}

.specArea {
	dl {
		font-size: 14px;
	}

	dt,
	dd {
		padding: 1rem 0;
	}

	.title {
		padding-bottom: .5rem;
		font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
		font-weight: 900;
		line-height: 1.5;
		border-bottom: 1px solid #fff;
	}
}

/* ==========================================================================
//  CHILD
// ========================================================================== */
.child section {
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	#stage {
		display: Flex;
		justify-content: center;
		align-items: center;
	}
}

.mainStage {
	align-self: center;
	text-align: center;
}

.mainStage img {
	margin: 0 auto;
}

@media (min-width: 1200px) {
	.mainStage img {
		max-width: 45vw;
	}
}

.specStage .colorName {
	margin: 0 0 1.5rem 0;
}

.specStage .colorName h5 {
	margin-bottom: 0;
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
	font-weight: 900;
}

.specStage .specArea {
	border-top: 1px solid #ccc;
}

.specStage .specArea dt,
.specStage .specArea dd {
	padding: .5rem 0;
	border-bottom: 1px solid #ccc;
}

#detailArea,
#detailMovie {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ==========================================================================
//  LUMINOUS
// ========================================================================== */
.lum-lightbox {
	background: rgba(235, 235, 235, .9);
}

.lum-gallery-button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(182, 168, 124, 0.7);
}

.lum-next-button:after {
	border-radius: 0 3px 0 0;
	border-right: 4px solid #333;
	box-shadow: none;
	right: 15px;
	transform: translateY(-50%) rotate(45deg);
}

.lum-previous-button:after {
	border-left: 4px solid #333;
	border-radius: 3px 0 0 0;
	box-shadow: none;
	left: 15px;
	transform: translateY(-50%) rotate(-45deg);
}

.lum-gallery-button:after {
	border-top: 4px solid #333;
	content: "";
	display: block;
	height: 16px;
	position: absolute;
	top: 50%;
	width: 16px;
}

.lum-lightbox-inner img {
	max-width: 90vw;
	display: inline;
}

@media (min-width: 1200px) {
	.lum-lightbox-inner img {
		max-width: 90vh;
		display: inline;
	}
}

.lum-lightbox-inner .lum-lightbox-caption {
	color: #000;
}

@media (max-width: 460px) {
	.lum-lightbox-inner .lum-lightbox-caption {
		position: relative;
		width: 100%;
	}
}

.card {
	display: inline-block;
	overflow: hidden;
	cursor: pointer;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 260ms ease;
}

/* ---- PC (hover ありデバイス) ---- */
@media (hover: hover) and (pointer: fine) {
	.card:hover {
		transform: translateY(-4px) scale(1.03);
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.05);
	}

	.card:hover img {
		transform: scale(1.06);
	}
}

/* ---- スマホ / タッチデバイス ---- */
@media (hover: none) and (pointer: coarse) {
	.card:active {
		transform: scale(0.96);
	}

	.card:active img {
		transform: scale(1.03);
	}
}

/* ==========================================================================
//  BUTTON
// ========================================================================== */
.section__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: #ffffff;
	font-size: 16px;
	border-radius: 20px;
	width: 200px;
	height: 40px;
	border: 2px solid #826f48;
	transition: 0.3s;
	box-shadow: 0px 4px 4px 0px rgba(190, 176, 139, 1);
	background-color: #cf9c4d;
}

.section__btn:hover {
	box-shadow: 0 0 #fff;
	transform: translateY(1px);
}

/* ==========================================================================
//  フッター (Footer)
//  - サイトの最下部に表示される情報。
// ========================================================================== */
footer {
	padding: 3rem 0;
	background: #969696;

	a {
		color: #000;
		text-decoration: none;
	}
}

@media (min-width: 1200px) {
	footer.d-flex div {
		padding-left: 2rem;
	}
}

.copyRight {
	font-size: 18px;
	font-family: "Young Serif", serif;
	font-weight: 900;
	letter-spacing: .05rem;
	color: #fff;
}

.copyRight small {
	font-size: 14px;
}

.company {
	font-size: 14px;
}

#shoes {
	margin: 0;
	text-align: center;
	font-size: 12px;
	font-family: "Young Serif", serif;
	font-weight: 900;
	letter-spacing: .05rem;
	color: #e2e2e2;
	background: #3a3a3a;
}

/* ==========================================================================
//  レスポンシブ対応 (Responsive Design)
//  - 異なるデバイスサイズに応じたスタイル調整。
// ========================================================================== */
/* ======================== 
   デフォルト（全ての画面）
   ======================== */
.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

.d-flex {
	display: flex !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

/* ======================== 
   576px以上 (sm)
   ======================== */
@media (min-width: 576px) {
	.d-sm-none {
		display: none !important;
	}

	.d-sm-block {
		display: block !important;
	}

	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-inline {
		display: inline !important;
	}

	.d-sm-inline-block {
		display: inline-block !important;
	}
}

/* ======================== 
   768px以上 (md)
   ======================== */
@media (min-width: 768px) {
	.d-md-none {
		display: none !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-flex {
		display: flex !important;
	}

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}
}

/* ======================== 
   992px以上 (lg)
   ======================== */
@media (min-width: 992px) {
	.d-lg-none {
		display: none !important;
	}

	.d-lg-block {
		display: block !important;
	}

	.d-lg-flex {
		display: flex !important;
	}

	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}
}

/* ======================== 
   1200px以上 (xl)
   ======================== */
@media (min-width: 1200px) {
	.d-xl-none {
		display: none !important;
	}

	.d-xl-block {
		display: block !important;
	}

	.d-xl-flex {
		display: flex !important;
	}

	.d-xl-inline {
		display: inline !important;
	}

	.d-xl-inline-block {
		display: inline-block !important;
	}
}

/* ======================== 
   1400px以上 (xxl)
   ======================== */
@media (min-width: 1400px) {
	.d-xxl-none {
		display: none !important;
	}

	.d-xxl-block {
		display: block !important;
	}

	.d-xxl-flex {
		display: flex !important;
	}

	.d-xxl-inline {
		display: inline !important;
	}

	.d-xxl-inline-block {
		display: inline-block !important;
	}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}