@charset "UTF-8";

/* ======================================================
//  ドロワー（ハンバーガー展開）専用レイアウト
//  - クラスは `.p-drawer__*` でフッター CSS と完全分離
// ====================================================== */

.p-header__drawer-content {
	padding-block: calc(40 * var(--to-rem)) calc(48 * var(--to-rem));
	padding-inline: calc(24 * var(--to-rem));
}
@media screen and (min-width: 768px) {
	.p-header__drawer-content {
		max-inline-size: calc(720 * var(--to-rem));
		margin-inline: auto;
		padding-block: calc(80 * var(--to-rem));
		padding-inline: calc(80 * var(--to-rem));
	}
}

.p-drawer {
	display: flex;
	flex-direction: column;
	gap: calc(32 * var(--to-rem));
}
@media screen and (min-width: 768px) {
	.p-drawer {
		gap: calc(40 * var(--to-rem));
	}
}

/* ======================================================
//  ナビ
// ====================================================== */
.p-drawer__nav {
	margin: 0;
}

.p-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--color-border-gray);
}

.p-drawer__item {
	border-block-end: 1px solid var(--color-border-gray);
}

.p-drawer__link {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: calc(56 * var(--to-rem));
	padding-block: calc(16 * var(--to-rem));
	padding-inline: 0 calc(40 * var(--to-rem));
	color: var(--color-text);
	font-size: calc(1 * var(--base-size));
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--duration);
}
@media (any-hover: hover) {
	.p-drawer__link:hover {
		opacity: var(--opacity);
	}
}
@media screen and (min-width: 768px) {
	.p-drawer__link {
		min-block-size: calc(64 * var(--to-rem));
		font-size: calc(1.0625 * var(--base-size));
	}
}

/* サブメニュー持ち項目: 親をタップでアコーディオン開閉 */
.p-drawer__item--has-sub > .p-drawer__link::before,
.p-drawer__item--has-sub > .p-drawer__link::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: calc(8 * var(--to-rem));
	background-color: currentcolor;
	transition: transform 0.25s ease;
}
.p-drawer__item--has-sub > .p-drawer__link::before {
	width: calc(14 * var(--to-rem));
	height: 1px;
	translate: 0 -50%;
}
.p-drawer__item--has-sub > .p-drawer__link::after {
	width: 1px;
	height: calc(14 * var(--to-rem));
	inset-inline-end: calc(14.5 * var(--to-rem));
	translate: 0 -50%;
}
.p-drawer__item--has-sub > .p-drawer__link[aria-expanded="true"]::after {
	transform: scaleY(0);
}

/* サブリスト */
.p-drawer__sublist {
	list-style: none;
	margin: 0;
	padding-block: 0 calc(16 * var(--to-rem));
	padding-inline: calc(16 * var(--to-rem)) 0;
}
.p-drawer__sublist[hidden] {
	display: none;
}
.p-drawer__sublist > li {
	position: relative;
}
.p-drawer__sublist > li::before {
	content: "└";
	position: absolute;
	inset-block-start: calc(8 * var(--to-rem));
	inset-inline-start: 0;
	color: var(--color-text);
	opacity: 0.5;
	font-size: calc(0.875 * var(--base-size));
	line-height: 1;
}
.p-drawer__sublink {
	display: flex;
	align-items: center;
	min-block-size: calc(36 * var(--to-rem));
	padding-block: calc(6 * var(--to-rem));
	padding-inline-start: calc(20 * var(--to-rem));
	color: var(--color-text);
	font-size: calc(0.875 * var(--base-size));
	font-weight: var(--fw-regular);
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-decoration: none;
	transition: opacity var(--duration);
}
@media (any-hover: hover) {
	.p-drawer__sublink:hover {
		opacity: var(--opacity);
	}
}
@media screen and (min-width: 768px) {
	.p-drawer__sublink {
		font-size: calc(0.9375 * var(--base-size));
	}
}

/* ======================================================
//  CTA グループ
// ====================================================== */
.p-drawer__cta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(8 * var(--to-rem));
}
@media screen and (min-width: 768px) {
	.p-drawer__cta {
		grid-template-columns: repeat(4, 1fr);
		gap: calc(12 * var(--to-rem));
	}
}

.p-drawer__cta-link {
	display: flex;
	justify-content: center;
	align-items: center;
	min-block-size: calc(56 * var(--to-rem));
	padding-block: calc(12 * var(--to-rem));
	padding-inline: calc(8 * var(--to-rem));
	color: var(--color-white, #fff);
	background-color: var(--color-text);
	font-size: calc(0.9375 * var(--base-size));
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border-radius: calc(4 * var(--to-rem));
	transition: opacity var(--duration);
}
@media (any-hover: hover) {
	.p-drawer__cta-link:hover {
		opacity: var(--opacity);
	}
}

/* ======================================================
//  SNS
// ====================================================== */
.p-drawer__sns-list {
	display: flex;
	justify-content: center;
	gap: calc(20 * var(--to-rem));
	margin: 0;
	padding: 0;
	list-style: none;
}
.p-drawer__sns-item a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(32 * var(--to-rem));
	height: calc(32 * var(--to-rem));
	transition: opacity var(--duration);
}
.p-drawer__sns-item img {
	display: block;
	width: calc(28 * var(--to-rem));
	height: calc(28 * var(--to-rem));
	object-fit: contain;
}
@media (any-hover: hover) {
	.p-drawer__sns-item a:hover {
		opacity: var(--opacity);
	}
}

/* ======================================================
//  ブランド・住所
// ====================================================== */
.p-drawer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(16 * var(--to-rem));
	text-align: center;
}
.p-drawer__logo {
	margin: 0;
}
.p-drawer__logo img {
	display: block;
	width: calc(140 * var(--to-rem));
	height: auto;
}
.p-drawer__address {
	margin: 0;
	font-style: normal;
	color: var(--color-text);
	font-size: calc(0.875 * var(--base-size));
	line-height: 1.7;
}
.p-drawer__company {
	margin: 0 0 calc(6 * var(--to-rem));
	font-weight: var(--fw-medium);
}
.p-drawer__addr-line {
	margin: 0;
}
.p-drawer__address a {
	color: inherit;
	text-decoration: none;
}

/* ======================================================
//  法的表記・コピーライト
// ====================================================== */
.p-drawer__legal {
	color: var(--color-text);
	font-size: calc(0.75 * var(--base-size));
	line-height: 1.7;
	text-align: center;
	opacity: 0.7;
}
.p-drawer__legal p {
	margin: 0;
}

.p-drawer__copyright {
	display: block;
	color: var(--color-text);
	font-size: calc(0.75 * var(--base-size));
	line-height: 1.6;
	text-align: center;
	opacity: 0.7;
}