/* .main-header */
@media all {
	.main-header {
		position: relative;
		background: center / cover no-repeat;
	}
	.main-header-ttl {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.error404 .main-header-ttl {
		color: #fff;
		width: auto;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-header {aspect-ratio: 5 / 2;}
		.main-header-ttl {left: 20rem;}

		.error404 .main-header-ttl {font-size: 20rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-header {height: 280rem;}
		.main-header-ttl {left: max(20rem, calc(50% - 500rem));}
		.error404 .main-header-ttl {font-size: 40rem;}
		
		/* tab */
		@media (max-width: 1024px) {
			.main-header-ttl {left: max(20rem, calc(50% - 400rem));}
		}
	}
}

/* .breadcrumbs */
@media all {
	.breadcrumbs {background-color: var(--light-blue);}
	.breadcrumbs-list {
		display: flex;
		overflow: hidden;
		line-height: 1.25;
	}
	.breadcrumbs-item {
		flex-shrink: 0;
		white-space: nowrap;
	}
	.breadcrumbs-item a {
		text-decoration: underline;
		transition: .3s;
	}
	.breadcrumbs-item a:hover {opacity: .6;}
	
	.breadcrumbs-item:last-child {
		overflow: hidden;
		white-space: nowrap;
		flex-shrink: 1;
		text-overflow: ellipsis;
	}
	.breadcrumbs-item + .breadcrumbs-item::before {
		content: '＞';
		display: inline-block;
		margin: 0 .25em;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.breadcrumbs {
			padding: 10rem 20rem;
			font-size: 10rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.breadcrumbs-list {
			margin: 0 auto;
			padding: 20rem;
			max-width: 1040rem;
			font-size: 13rem;
		}
		/* tab */
		@media (max-width: 1024px) {
			.breadcrumbs-list {max-width: 840rem;}
		}
	}
}




/* .template-section */
@media all {
	
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}