@charset "UTF-8";

/* =============================================================================

Common CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

============================================================================= */

/* ページトップボタン
----------------------------------------------------------------------------- */
.footer__page-top {
	display: block;
	position: fixed;
	bottom: 60px;
	right: 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	filter: opacity(0%);
	pointer-events: none;
	background-color: #fff;
	z-index: 999;
	margin-bottom: env(safe-area-inset-bottom);
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 7px;
		bottom: 0;
		right: 0;
		left: 0;
		width: 12px;
		height: 12px;
		margin: auto;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		transform: rotate(-45deg);
	}

	@media(hover) {
		& {
			transition: 0.2s;
		}
		&:hover {
			opacity:.6;
		}
	}

	.state_screenheightscroll & {
		filter: opacity(100%);
		pointer-events: auto;
	}
}

/* ヘッダー
----------------------------------------------------------------------------- */
#menuopenstate {
	display: none;
}
.header {
	.header__top-bar {
		@media (width > 767px) {/* PC */
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 0 20px;
		}
		@media (width <= 767px) {/* SP */
			padding: 0 10px;
		}
		.header__container {
			@media (width > 767px) {/* PC */
			}
			@media (width <= 767px) {/* SP */
			}
		}
		.header__logo-link {
			display: block;
			z-index: 1001;
			@media (width > 767px) {/* PC */
				position: absolute;
				top: 30rem;
				left: 40rem;
			}
			@media (width <= 767px) {/* SP */
				position: fixed;
				top: 10rem;
				left: 10rem;
			}
			@media(hover) {
				& {
					transition: 0.2s;
				}
				&:hover {
					opacity: 0.6;
				}
			}
			.header__logo-image {
				@media (width <= 767px) {/* SP */
					width: auto;
					height: 60px;
				}
			}
		}
		.header__nav {
			display: flex;
			align-items: center;
			gap: 40rem;
			position: absolute;
			right: 60rem;
			top: 30rem;
		}
		.header__nav-link {
			display: inline-block;
			font-family: var(--ff-paganini);
			font-weight: 400;
			font-size: 18rem;
			line-height: 1;
			letter-spacing: 2.7rem;
			color: #7D6711;
			@media(hover) {
				& {
					transition: opacity 0.2s;
				}
				&:hover {
					opacity: 0.6;
				}
			}
		}
	}
	.header__mobile-menu {
		@media (width <= 767px) {/* SP */
			background-color: #fff;
			position: fixed;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			top: 0;
			left: 0;
			width: 100%;
			bottom: 0;
			opacity: 0;
			z-index: 1000;
			pointer-events: none;
			transition: opacity 0.4s;
			display: flex;
			justify-content: center;
			padding-top: 100rem;
			body:has(#menuopenstate:checked) & {
				opacity: 1;
				pointer-events: auto;
			}
			.header__mobile-nav {
				display: flex;
				flex-direction: column;
				gap: 40rem;
				width: 100%;
				box-sizing: border-box;
				padding: 0 30rem;
			}
			.header__mobile-nav-row {
				display: flex;
				flex-direction: column;
			}
			.header__mobile-nav-row--project {
				gap: 24rem;
			}
			.header__mobile-nav-link {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 8rem;
				padding-bottom: 8rem;
				border-bottom: 1rem solid #7D6711;
				font-family: var(--ff-paganini);
				font-weight: 300;
				font-size: 22rem;
				line-height: 1;
				letter-spacing: 3.3rem;
				color: #7D6711;
				&::after {
					content: "";
					display: inline-block;
					width: 4rem;
					height: 8rem;
					background: url(/cp10th-anniversary/assets/images/top/arrow-right.svg) no-repeat center / contain;
				}
			}
			.header__mobile-nav-sublinks {
				padding-left: 16rem;
				display: grid;
				grid-template-rows: repeat(5, auto);
				grid-auto-flow: column;
				row-gap: 20rem;
				column-gap: 30rem;
			}
			.header__mobile-nav-sublink {
				display: flex;
				align-items: flex-start;
				gap: 8rem;
				color: #7D6711;
				&::before {
					content: "";
					display: block;
					flex-shrink: 0;
					width: 8rem;
					height: 1rem;
					background-color: #7D6711;
					margin-top: 6.5rem;
				}
				.header__mobile-nav-sublink-body {
					display: flex;
					flex-direction: column;
					gap: 8rem;
				}
				.header__mobile-nav-sublink-title {
					font-family: var(--ff-paganini);
					font-weight: 300;
					font-size: 14rem;
					line-height: 1;
					letter-spacing: 2.1rem;
				}
				.header__mobile-nav-sublink-subtitle {
					font-family: var(--ff-shippori-mincho);
					font-weight: 500;
					font-size: 10rem;
					line-height: 1;
					letter-spacing: 0.5rem;
				}
			}
		}
	}
	@media (width <= 767px) {/* SP */
		.header__hamburger {
			width: 44px;
			height: 44px;
			position: fixed;
			top: 10rem;
			right: 20rem;
			z-index: 1000;
			.header__hamburger-open .header__hamburger-bar {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 35rem;
				height: 1rem;
				margin: auto;
				background-color: #7D6711;
				transition: 0.3s;
				&:nth-child(1) {
					transform: translateY(-3.5rem);
				}
				&:nth-child(2) {
					transform: translateY(3.5rem);
				}
			}
			.header__hamburger-close .header__hamburger-bar {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 0;
				height: 1rem;
				margin: auto;
				background-color: #7D6711;
				transition: 0.3s;
				&:nth-child(1) {
					transform: rotate(15deg);
				}
				&:nth-child(2) {
					transform: rotate(-15deg);
				}
			}
			body:has(#menuopenstate:checked) & {
				.header__hamburger-open .header__hamburger-bar {
					width: 0;
				}
				.header__hamburger-close .header__hamburger-bar {
					width: 35rem;
				}
			}
		}
	}
}
.breadcrumb {
	width: 100%;
	background-color: #fff;
	margin-top: 100px;

	@media (width <= 767px) {/* SP */
		height: 35rem;
		overflow: auto;
	}
}
.breadcrumb__list {
	max-width: 1000px;
	width: 100%;
	margin: auto;
	text-align: left;
	white-space: nowrap;
	overflow-x: scroll;
	.breadcrumb__item {
		display: inline-block;
		position: relative;
		+ .breadcrumb__item {
			margin-left: 20px;
			&:before {
				content: "";
				display: block;
				width: 6px;
				height: 6px;
				border-right: 1px solid #000;
				border-top: 1px solid #000;
				position: absolute;
				top: 0;
				bottom: 0;
				left: -16px;
				margin: auto;
				transform: rotate(45deg);
			}
		}
	}
}

/* フッター
----------------------------------------------------------------------------- */
.footer {}