@charset "utf-8";

:root {
	--black: #101010;
	--white: #FFFFFF;
	--white-rgba: 255, 255, 255;
	--red: #E72022;
	--blue: #0035B0;
	--purple: #B094C3;
	--gray: #BABABA;
	--gray70: #707070;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
*, 
*::before, 
*::after {
	box-sizing: border-box;
}
html,
body {
	overflow-x: clip;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	font-size: 16px;
	font-weight: 500;
	color: var(--white);
	background-color: var(--black);
	line-height: 1;
}
:target {
	scroll-margin-top: 105px;
	@media (width <= 800px) {
		scroll-margin-top: 85px;
	}
}
body,
input,
textarea,
button {
    font-family: "IBM Plex Sans JP", sans-serif;
}
.en {
	font-family: "Montserrat", sans-serif;
}
.min {
	font-family: "Shippori Mincho B1", serif;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	color: var(--white);
	clear: both;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
}
article,
aside,
details,
figcaption,
figure,
picture,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
p {
	color: var(--white);
	letter-spacing: 0.05em;
	margin-bottom: 15px;
	line-height: 2.1;
	@media (width <= 800px) {
	}
}
ol,
ul {
	list-style: none;
}
ul li,
ol li {
	line-height: 2.1;
	letter-spacing: 0.05em;
	margin: 0 0 5px;
	@media (width <= 800px) {
		font-size: 15px;
		line-height: 1.73;
	}
}
ol {
	list-style: decimal;
	margin: 0 0 20px 1.5em;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0 24px 0;
}
dt,
dd {
	line-height: 1.6;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0;
}
strong {
	font-weight: bold;
}
cite,
i {
	font-style: normal;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: none;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
video {
	width: 100%;
}
address {
	font-style: normal;
}


.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
a {
	color: var(--white);
	text-decoration: underline;
	@media (width >= 800px) {
		&:hover {
			text-decoration: none;
		}
	}
}

a:focus, *:focus { 
	outline: none; 
}
.pc {
	display: block;
	@media (width <= 800px) {
		display: none;
	}
}
.sp {
	display: none;
	@media (width <= 800px) {
		display: block;
	}
}
.komelist {
	margin: 0 0 30px;
}
.komelist li {
	list-style: none;
	margin-left: 1em;
	&:last-child {
		margin-bottom: 0;
	}
}
.komelist li::before {
	content:"※";
	margin-left: -1em;
}
.nolink {
	pointer-events: none;
}
.youtube,
.accessmap {
	width: 100%;
	aspect-ratio: 16 / 9;
}
iframe {
	width: 100%;
	height: 100%;
}
.attention {
	color: #F53939;
}

section {
	position: relative;
	z-index: 3;
}
main {
	position: relative;
	z-index: 1;
}
.cbox {
	width: calc(100% - 40px);
	max-width: 1300px;
	margin: 0 auto;
}


/* load */
html.is-first-visit .load {
    opacity: 1;
}
.load {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100dvh;
	background-color: var(--black);
	pointer-events: none;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;	
	@media (width <= 800px) {
		padding: 0 40px;
	}
	&.is-active {
		opacity: 1;
		visibility: visible;
	}
	&.is-soft {
		animation: softFade 1.2s ease forwards;
	}	
	&.start {
		.logo-load01 {
			opacity: 0;
			translate: 0 100px;
		}
		.logo-load02 {
			opacity: 0;
			transform: scale(6.8817);		
		}
		.load-text {
			opacity: 0;
			translate: 0 100px;
		}
	}
	.logo-load01 {
		position: relative;
		margin-bottom: 100px;
		z-index: 2;
		transition: all 0.6s ease-out;
		@media (width <= 800px) {
			margin-bottom: 60px;
		}
	}
	.logo-load02 {
		position: relative;
		transform-origin: center center; 
		margin-bottom: 40px;
		z-index: 3;
		transition: all 0.6s ease-out;
		@media (width <= 800px) {
			max-width: 295px;
		}
	}
	.load-text {
		position: relative;
		font-size: 20px;
		letter-spacing: 0.05em;
		text-align: center;
		z-index: 2;
		transition: all 0.6s ease-out;
		@media (width <= 800px) {
			font-size: 16px;
			line-height: 1.6;
		}
	}
}



/* moja */
.moja {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url(../../img/80th/bg_moja.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.4;
	z-index: 0;
	pointer-events: none;
}


/* line */
.line {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url(../../img/80th/bg_line.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1400px 100%;
	z-index: 1;
	pointer-events: none;
	@media (width <= 800px) {
		background-image: url(../../img/80th/bg_line_sp.webp);
		background-size: 336px 100%;
	}
}


/* header */
.site-header {
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 113px;
	z-index: 5;
	transition: all 0.3s ease-out;
	@media (width <= 1000px) {
		position: absolute;
		height: auto;
	}
	&::before {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(#101010 0%, #101010 10%, rgba(16, 16, 16, 0) 100%);
		opacity: 0.7;
		content: "";
		pointer-events: none;
		z-index: -1;
		@media (width <= 1000px) {
			display: none;
		}
	}
	.site-title {
		position: absolute;
		left: 50px;
		bottom: 0;
		@media (width <= 1000px) {
			left: 12px;
			top: 12px;
			bottom: auto;
			width: 264px;
		}
		a {
			display: inline-block;
			text-decoration: none;
			.subtitle {
				display: block;
				font-size: 13px;
				font-weight: 500;
				margin-top: 14px;
				@media (width <= 1000px) {
					font-size: 11px;
					margin-top: 10px;
				}
			}
		}
	}
}


/*
mainmenu
*/
.mainmenu {
	position: absolute;
	top: 50%;
	right: 50px;
	translate: 0 -50%;
	width: auto;
	display: flex;
	align-items: center;
	z-index: 3;
	@media (width <= 1000px) {
		display: none;
	}
	ul {
		display: flex;
		align-items: center;
		gap: 0 27px;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		li {
			position: relative;
			line-height: 1;
			letter-spacing: 0;
			margin: 0;
			padding: 0;
			&.link {
				a {
					position: relative;
					margin-left: 13px;
					padding-left: 24px;
					&::before,
					&::after {
						position: absolute;
						left: 0;
						top: 50%;
						translate: 0 -50%;
						width: 15px;
						height: 14px;
						content: "";
						background-repeat: no-repeat;
						background-position: left center;
						transition: all 0.3s ease-out;
					}
					&::before {
						background-image: url(../../img/80th/icon_link.svg);
					}
					&::after {
						opacity: 0;
						background-image: url(../../img/80th/icon_link_on.svg);
					}
					@media (width >= 1000px) {
						&:hover {
							&::before {
								opacity: 0;
							}
							&::after {
								opacity: 1;
							}
						}
					}
				}
			}
			a {
				display: inline-block;
				font-family: "Montserrat", sans-serif;
				font-size: 14px;
				font-weight: 600;
				text-decoration: none;
				transition: color 0.3s ease-out;
				@media (width >= 1000px) {
					&:hover {
						color: var(--purple);
					}
				}
			}
		}
	}
}


/*
spmainmenu
*/
.spmainmenubox {
	display: none;
	@media (width <= 1000px) {
		display: block;
		position: fixed;
		top: 0;
		right: -244px;
		width: 244px;
		height: 100dvh;
		background-color: rgba(16, 16, 16, 0.9);
		z-index: 5;
		transition: all 0.3s ease-out;
		&.open {
			right: 0;
		}
	}
	.spmenubox {
		@media (width <= 1000px) {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
			gap: 64px 0;
			overflow-y: auto;
			z-index: 2;
		}
		.spmainmenu {
			@media (width <= 1000px) {
				width: 100%;
				padding-left: 40px;
				ul {
					display: flex;
					flex-direction: column;
					gap: 30px 0;
					width: 100%;
					margin: 0;
					padding: 0;
					li {
						position: relative;
						line-height: 1;
						letter-spacing: 0;
						margin: 0;
						padding: 0;
						&.link {
							a {
								padding-left: 24px;
								background-image: url(../../img/80th/icon_link.svg);
								background-repeat: no-repeat;
								background-position: left center;
							}
						}
						a {
							display: inline-block;
							font-family: "Montserrat", sans-serif;
							font-size: 14px;
							font-weight: 600;
							text-decoration: none;
							transition: color 0.3s ease-out;
							@media (width >= 1000px) {
								&:hover {
									color: var(--purple);
								}
							}
						}
					}
				}
			}
		}
		.spsubmenu {
			@media (width <= 1000px) {
				width: 100%;
				padding-left: 40px;
				ul {
					display: flex;
					gap: 0 12px;
					margin: 0;
					padding: 0;
					li {
						letter-spacing: 0;
						margin: 0;
						padding: 0;
					}
				}
			}
		}
		.logo-menu {
			@media (width <= 1000px) {
				position: absolute;
				left: 20px;
				bottom: 20px;
				width: 204px;
			}
		}
	}
}


/*
toggle
*/
#toggle {
	display: none;
	@media (width <= 1000px) {
		display: block;
		position: fixed;
		top: 12px;
		right: 12px;
		width: 54px;
		height: 54px;
		border: none;
		background-color: var(--white);
		border-radius: 50%;
		padding: 0;
		cursor: pointer;
		z-index: 6;
	}
}
.menu-trigger,
.menu-trigger span {
	@media (width <= 1000px) {
		display: inline-block;
		transition: all 0.4s;
	}
}
.menu-trigger {
	@media (width <= 1000px) {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		outline: none;
		span {
			display: block;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--black);
			width: 18px;
			height: 1px;
			&:nth-of-type(1) {
				top: 22px;
			}
			&:nth-of-type(2) {
				top: 26px;
			}
			&:nth-of-type(3) {
				top: 30px;
			}
		}
		&.active {
			:nth-of-type(1) {
				-webkit-transform: translate(-50%,4px) rotate(30deg);
				transform: translate(-50%,4px) rotate(30deg);
			}
			:nth-of-type(2) {
				opacity: 0;
			}
			:nth-of-type(3) {
				-webkit-transform: translate(-50%,-4px) rotate(-30deg);
				transform: translate(-50%,-4px) rotate(-30deg);
			}
		}
	}
}


/* fade-color */
.fade-color,
.fade-color *,
.fade-color2,
.fade-color2 * {
	color: transparent;
	opacity: 1;
	background: linear-gradient(
		105deg,
		#FFFFFF 0%, 
		#FFFFFF 50%, 
		#7C4D9B 55%, 
		#7C4D9B 65%, 
		transparent 73%, 
		transparent 100%
	);
	background-size: 600% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-position 5.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-color.is-active,
.fade-color.is-active *,
.fade-color2.is-active,
.fade-color2.is-active * {
	background-position: 0 0;
}


/* #top */
#top {
	display: grid;
	grid-template-columns: 1fr;	
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0;
	@media (width <= 800px) {
		padding: 120px 0 0;
		margin-bottom: 100px;
	}
}
.fv {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	height: 100vh;
	display: flex;
	align-items: center;
	z-index: 3;
	@media (width <= 800px) {
		display: block;
		height: auto;
	}
	.count {
		position: absolute;
		left: 72px;
		top: 50%;
		translate: 0 -50%;
		display: inline-block;
		width: 326px;
		@media (width <= 800px) {
			position: relative;
			left: 20px;
			top: auto;
			translate: 0 0;
			width: 262px;
		}
		h2 {
			font-size: 16px;
			line-height: 1.5;
			border-bottom: 1px solid var(--white);
			padding-bottom: 2px;
			margin-bottom: 16px;
			@media (width <= 800px) {
				font-size: 13px;
			}
		}
		#timer {
			display: flex;
			justify-content: center;
			gap: 0 42px;
			letter-spacing: 0;
			font-family: "Montserrat", sans-serif;
			font-weight: 600;
			text-align: center;
			margin: 0;
			.cdate {
				position: relative;
				display: inline-block;
				text-align: center;
				&::after {
					position: absolute;
					right: -25px;
					top: 50%;
					translate: 0 -50%;
					width: 4px;
					height: 28px;
					content: "";
					background-image: url(../../img/80th/bg_timer.svg);
					background-repeat: no-repeat;
					background-position: left top;
				}
				&:last-child {
					&::after {
						display: none;
					}
				}
				strong {
					display: block;
					font-size: 28px;
					font-weight: 600;
					line-height: 1;
					font-variant-numeric: tabular-nums;
					font-feature-settings: "tnum";
					letter-spacing: -0.05em;
					margin-bottom: 3px;
					@media (width <= 800px) {
						font-size: 22px;
					}
				}
				.ctext {
					display: block;
					font-size: 18px;
					line-height: 1;
					@media (width <= 800px) {
						font-size: 14px;
					}
				}
			}
		}
	}
	.read-fv {
		position: absolute;
		left: 0;
		bottom: 32px;
		@media (width <= 800px) {
			position: relative;
			top: 64vw;
			left: auto;
			bottom: auto;
		}		
		p {
			color: var(--black);
			font-size: 71px;
			font-weight: 700;
			letter-spacing: 0;
			line-height: 1;
			margin: 0;
			@media (width <= 800px) {
				font-size: 29px;
			}
			&:first-child {
				margin-bottom: 9px;
				@media (width <= 800px) {
					margin-bottom: 3px;
				}
			}
			&:nth-child(2) {
				span {
					padding-top: 9px;
					@media (width <= 800px) {
						padding-top: 3px;
					}
				}
			}
			span {
				display: inline-block;
				background-color: var(--white);
				.en {
					font-size: 79px;
					font-weight: 600;
					@media (width <= 800px) {
						font-size: 32px;
					}
				}
			}
		}
	}
}
.topimage {
	position: sticky;
	top: 50%;
	translate: 0 -50%;
	align-self: start;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	max-width: 815px;
	margin-left: auto;
	z-index: 1;
	@media (width <= 800px) {
		top: 227px;
		translate: 0 0;
		width: 94.7vw;
		max-width: inherit;
	}
}
.top-gradation {
	@media (width <= 800px) {
		position: absolute;
		left: 0;
		top: 450px;
		width: 100%;
		height: calc(100% - 450px);
		content: "";
		mix-blend-mode: multiply;
		background: linear-gradient(rgba(255, 255, 255, 0) 0%, #101010 10%, #101010 calc(85% - 227px), rgba(255, 255, 255, 0) calc(100% - 227px));
		opacity: 0.7;
		pointer-events: none;
		z-index: 2;
	}
}
.top-content {
	position: relative;
	width: 100%;
	max-width: 1000px;
	grid-column: 1;
	grid-row: 1;
	margin: calc(100vh + 70px) auto 0;
	padding-bottom: calc(500px / 2);
	z-index: 2;
	@media (width <= 800px) {
		margin: 115vw auto 0;
		padding: 0 20px 285px;
	}
	p {
		line-height: 2.6;
		margin-bottom: 48px;
		&.omoi {
			font-size: 28px;
			font-weight: 700;
			line-height: 1.64;
			margin-bottom: 0;
			@media (width <= 800px) {
				font-size: 24px;
				line-height: 1.5;
			}
		}
	}
}


/* eighteen-content */
.eighteen-content {
	h2 {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto 240px;
		@media (width <= 800px) {
			margin: 0 0 140px;
		}
		.en {
			display: block;
			color: #3C3C3C;
			font-size: 185px;
			font-weight: 800;
			letter-spacing: 0;
			line-height: 1;
			@media (width <= 800px) {
				font-size: 72px;
				margin: 0 0 10px;
			}
		}
		.jp {
			position: relative;
			display: inline-block;
			font-size: 22px;
			padding-left: 24px;
			margin-left: 200px;
			@media (width <= 800px) {
				font-size: 16px;
				margin-left: 20px;
				padding-left: 18px;
			}
			&::before {
				position: absolute;
				left: 0;
				top: 50%;
				translate: 0 -50%;
				width: 14px;
				height: 14px;
				content: "";
				background-color: var(--white);
				border-radius: 50%;
				@media (width <= 800px) {
					width: 10px;
					height: 10px;
				}
			}
		}
	}
}



/* history */
.history01,
.history02,
.history03,
.history04 {
	margin-bottom: 220px;
	@media (width <= 800px) {
		margin-bottom: 140px;
	}
	h3 {
		font-weight: 500;
		text-align: center;
		margin-bottom: 230px;
		@media (width <= 800px) {
			margin-bottom: 140px;
		}				
		.jp {
			display: block;
			font-family: "Shippori Mincho B1", serif;
			font-size: 42px;
			line-height: 1.85;
			margin-bottom: 40px;
			@media (width <= 800px) {
				font-size: 26px;
				margin-bottom: 20px;
			}				
			&.t64 {
				font-size: 64px;
				line-height: 1;
				margin-bottom: 24px;
				@media (width <= 800px) {
					font-size: 30px;
					margin-bottom: 20px;
				}
			}
		}
		.en {
			display: block;
			color: var(--purple);
			font-size: 18px;
			letter-spacing: 0;
			line-height: 2;
			@media (width <= 800px) {
				font-size: 14px;
				line-height: 1.7;
			}
		}
	}
}
.history01 {
	.history-content {
		align-items: flex-end;
		&.short {
			.l-history {
				padding-bottom: 0;
			}
		}
		.l-history {
			padding-bottom: 75px;
			@media (width <= 800px) {
				padding-bottom: 0;
			}
		}
	}
}
.history02 {
	.history-content {
		align-items: flex-end;
		&.short {
			align-items: center;
			.l-history {
				padding-top: 35px;
				@media (width <= 800px) {
					padding-top: 0;
				}
			}
		}
	}
}
.history03 {
	.history-content {
		&.short {
			.l-history {
				padding-top: 130px;
				@media (width <= 800px) {
					padding-top: 0;
				}
			}
			.r-history {
				margin-top: -190px;
				@media (width <= 800px) {
					margin-top: 0;
				}
			}
		}
		.l-history {
			padding-top: 90px;
			@media (width <= 800px) {
				padding-top: 0;
			}
		}
	}
}
.history04 {
	.history-content {
		.l-history {
			figure {
				&.hi0401 {
					@media (width <= 800px) {
						width: 100%;
						margin-bottom: 40px;
					}
					img {
						@media (width <= 800px) {
							width: 100%;
						}
					}
				}
			}
		}
		.r-history {
			@media (width <= 800px) {
				display: none;
			}
		}
	}
}

.history-content {
	display: flex;
	justify-content: space-between;
	margin-bottom: 64px;
	@media (width <= 800px) {
		flex-wrap: wrap;
		gap: 60px 0;
		margin-bottom: 60px;
	}
	&.reverse {
		flex-direction: row-reverse;
		@media (width <= 800px) {
			flex-direction: column;
		}
	}
	&.short {
		margin-bottom: 0;
		.l-history {
			.year {
				margin-bottom: 15px;
				padding-top: 20px;
				@media (width <= 800px) {
					padding-top: 0;
				}
				&:first-child {
					padding-top: 0;
				}
				.en {
					font-size: 41px;
				}
			}
			p {
				@media (width <= 800px) {
					margin-bottom: 50px;
				}
			}
		}
	}
	.l-history {
		width: 47%;
		@media (width <= 800px) {
			width: 100%;
		}
		.year {
			display: flex;
			align-items: baseline;
			margin-bottom: 40px;
			&.nm {
				.en {
					margin-right: 5px;
				}
				.nendai {
					display: inline-block;
					font-size: 30px;
					translate: 0 -2px;
				}
			}
			.en {
				display: inline-block;
				font-size: 90px;
				font-weight: 700;
				font-style: italic;
				line-height: 1;
				text-align: right;
				width: 4ch;
				margin-right: 35px;
				margin-left: -0.2ch;
				font-variant: tabular-nums;
				font-feature-settings: "tnum";
				letter-spacing: -0.05em;
				@media (width <= 800px) {
					font-size: 64px;
					margin-right: 35px;
				}
			}
			.era {
				position: relative;
				display: inline-block;
				font-size: 15px;
				font-weight: 500;
				padding-left: 10px;
				border-left: 6px solid var(--purple);
			}
		}
		p {
			font-size: 18px;
			line-height: 2.1;
			margin-bottom: 38px;
			@media (width <= 800px) {
				font-size: 15px;
				line-height: 2;
			}
			&:last-child {
				@media (width <= 800px) {
					margin-bottom: 0;
				}
			}
			&.read-history {
				font-size: 32px;
				font-weight: 700;
				line-height: 1.68;
				margin-bottom: 20px;
				@media (width <= 800px) {
					width: calc(100% + 15px);
					font-size: 22px;
					margin-bottom: 15px;
				}
			}
		}
		h4 {
			margin: 0;
			img {
				@media (width <= 800px) {
					width: 157px;
				}
				&.partner {
					@media (width <= 800px) {
						width: 237px;
					}
				}
			}
		}
		.point {
			border-top: 1px solid var(--gray);
			border-bottom: 1px solid var(--gray);
			padding: 30px;
			@media (width <= 800px) {
				padding: 25px 20px;
			}
			p {
				font-size: 15px;
				font-weight: 400;
				line-height: 1.8;
				margin-bottom: 0;
				@media (width <= 800px) {
					font-size: 13px;
					line-height: 1.9;
				}
				&.read-point {
					font-size: 20px;
					font-weight: 700;
					margin-bottom: 12px;
					@media (width <= 800px) {
						font-size: 18px;
						line-height: 1.78;
					}
				}
			}
		}
		.aem {
			display: inline-block;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.9;
			margin-top: 30px;
			@media (width <= 800px) {
				margin-top: 12px;
			}
		}
	}
	.r-history {
		width: 46.9%;
		@media (width <= 800px) {
			width: 100%;
		}
		figure {
			margin-bottom: 60px;
			@media (width <= 800px) {
				width: 100%;
				margin-bottom: 24px;
			}
			&.hi0102 {
				max-width: 387px;
				@media (width <= 800px) {
					width: 66.9%;
					max-width: inherit;
				}
			} 
			&.hi0103 {
				max-width: 460px;
				margin-left: auto;
				@media (width <= 800px) {
					max-width: inherit;
					margin-left: 0;
				}
			}
			&.hi0202 {
				max-width: 392px;
				margin: 0 auto 60px;
				@media (width <= 800px) {
					width: 66.9%;
					max-width: inherit;
					margin: 0 0 24px;
				}
			} 
			&.hi0204 {
				max-width: 392px;
				@media (width <= 800px) {
					width: 66.9%;
					max-width: inherit;
				}
			} 
			&.hi0301 {
				max-width: 440px;
				margin: 0 20px 60px auto;
				@media (width <= 800px) {
					width: 66.9%;
					max-width: inherit;
					margin: 0 0 24px;
				}
			} 
			&.hi0303 {
				max-width: 460px;
				margin: 0 0 60px auto;
				@media (width <= 800px) {
					width: 66.9%;
					max-width: inherit;
					margin: 0 0 24px;
				}
			} 
			&:last-child {
				margin-bottom: 0;
			}
			figcaption {
				display: block;
				font-size: 14px;
				line-height: 1.6;
				font-weight: 400;
				margin-top: 8px;
				@media (width <= 800px) {
					width: calc(100vw - 40px);
					font-size: 13px;
				}
			}
			img {
				@media (width <= 800px) {
					width: 100%;
				}
			}
		}
	}
}


/* history-slide */
.history-slide {
	margin-bottom: 264px;
	@media (width <= 800px) {
		margin-bottom: 150px;
	}
}
.splide-history {
	.splide__slide {
		width: 527px;
		@media (width <= 800px) {
			width: 280px;
		}
		img {
			width: 100%;
			height: 340px;
			object-fit: cover;
			@media (width <= 800px) {
				height: 180px;
			}
		}
	}
}


/* road2026 */
.road2026 {
	position: relative;
	height: 250vh;
	padding-bottom: 400px;
	@media (width <= 800px) {
		padding-bottom: 240px;
	}
	.road2026-inner {
		position: sticky;
		top: calc(50vh - 200px);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}	
	h2 {
		position: relative;
		display: block;
		text-align: center;
		margin: 0 0 70px;
		z-index: 1;
		.en {
			display: inline-block;
			color: var(--white);
			font-size: 90px;
			font-style: italic;
			@media (width <= 800px) {
				font-size: 64px;
			}
		}
	}
	.road {
		position: absolute;
		top: 90px;
		width: 100%;
		opacity: 0;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 1s ease-in, opacity 1s ease-in;
		z-index: 0;
		@media (width <= 800px) {
			top: 0;
			transition: clip-path 0.6s ease-in, opacity 0.6s ease-in;
		}
		&.is-show {
			clip-path: inset(0 0 0 0);
			opacity: 0.4;
			@media (width <= 800px) {
				opacity: 0.35;
			}
		}
		.road01 {
			width: 100%;
			height: 309px;
			background-image: url(../../img/80th/bg_road01.webp);
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 1400px 309px;
			@media (width <= 800px) {
				height: 110px;
				background-image: url(../../img/80th/bg_road01_sp.webp);
				background-size: 410px 110px;
			}
		}
		.road02 {
			width: 100%;
			height: 425px;
			background-image: url(../../img/80th/bg_road02.webp);
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 100% 425px;
			@media (width <= 800px) {
				height: 150px;
				background-image: url(../../img/80th/bg_road02_sp.webp);
				background-size: 100% 150px;
			}
		}
	}
	h3,
	p {
		opacity: 0;
		transition: all 0.5s ease-out;
		z-index: 1;
		&.is-show {
			opacity: 1;
		}
	}
	h3 {
		font-family: "Shippori Mincho B1", serif;
		font-size: 34px;
		font-weight: 500;
		text-align: center;
		margin-bottom: 70px;
		@media (width <= 800px) {
			font-size: 26px;
			margin-bottom: 56px;
		}
	}
	p {
		text-align: center;
		margin-bottom: 0;
		@media (width <= 800px) {
			padding: 0 20px;
		}
	}
}



/* message */
#message {
	margin-bottom: 300px;
	@media (width <= 800px) {
		margin-bottom: 240px;
	}
	h2 {
		margin: 0 auto 72px;
		@media (width <= 800px) {
			margin: 0 0 48px;
		}
	}
}
.message-content {
	display: grid;
	grid-template-columns: 1fr;	
	width: 100%;
	@media (width <= 800px) {
		display: block;
	}
}
.message-photo {
	position: sticky;
	top: calc(50vh - 263px);
	align-self: start;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	max-width: 815px;
	margin-left: auto;
	z-index: 1;
	@media (width <= 800px) {
		display: none;
	}
	img {
		position: relative;
		width: 100%;
		&.mi01 {
			z-index: 0;
		}
		&.mi02 {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 1;
			transition: opacity 0.3s ease-out;
			&.is-show {
				opacity: 1;
			}
		}
	}
}
.message-text {
	width: calc(100% - 500px);
	max-width: 654px;
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	margin-left: clamp(0px, 27vw - 215px, 150px);
	@media (width <= 800px) {
		width: 100%;
		max-width: inherit;
		margin-left: 0;
	}
	.message-title {
		position: relative;
		margin: 145px 0 90px;
		@media (width <= 800px) {
			margin: 0 0 40px;
		}
		h3 {
			font-family: "Shippori Mincho B1", serif;
			font-size: 34px;
			line-height: 1.77;
			font-weight: 500;
			@media (width <= 800px) {
				position: absolute;
				left: 20px;
				top: 50%;
				translate: 0 -50%;
				font-size: 26px;
				z-index: 1;
			}
		}
		.mi01 {
			@media (width <= 800px) {
				position: relative;
				width: calc(100% + 20px);
				z-index: 0;
				img {
					width: 100%;
				}
			}
		}
	}
	.mi02 {
		@media (width <= 800px) {
			width: 100%;
			margin: 0 auto 40px;
			img {
				width: 100%;
			}
		}
	}
	p {
		line-height: 2.375;
		margin-bottom: 48px;
		@media (width <= 800px) {
			line-height: 2;
			margin-bottom: 24px;
		}
		&.shomei {
			display: flex;
			align-items: baseline;
			gap: 0 28px;
			font-weight: 700;
			margin: 0;
			@media (width <= 800px) {
				gap: 0 16px;
			}
			.katagaki {
				@media (width <= 800px) {
					font-size: 14px;
				}
			}
			.pname {
				font-size: 28px;
				line-height: 1;
				@media (width <= 800px) {
					font-size: 26px;
				}
			}
		}
	}
}


/* road */
#road {
	counter-reset: count;
	margin-bottom: 300px;
	@media (width <= 800px) {
		margin-bottom: 210px;
	}
	h2 {
		text-align: center;
		margin: 0 0 140px;
		@media (width <= 800px) {
			display: block;
			margin-bottom: 80px;
		}
		svg {
			width: 100%;
		}
		#rt100 {
			margin-bottom: 30px;
			@media (width <= 800px) {
				display: none;
			}
			* {
				transition: all 0.3s ease-out;
			}
			&.is-active {
				#rt100border {
					fill: #3c3c3c;
				}
				#rt100bg {
					fill: transparent;
				}
			}
		}
		#rt100sp {
			display: none;
			@media (width <= 800px) {
				display: block;
				margin: 0 auto 16px;
				path {
					transition: fill 0.3s ease-out, opacity 0.3s ease-out, stroke 0.3s ease-out;
				}
				#rt100bordersp {
					fill: none;
					stroke: #919191;
					stroke-width: 1px;
				}
				#rt100bgsp {
					fill: none;
					opacity: 1;
				}
				&.is-active {
					#rt100bordersp {
						fill: #3c3c3c;
						stroke: #3c3c3c;
					}
					#rt100bgsp {
						opacity: 0;
					}
				}				
			}
		}
		.jp {
			display: inline-block;
			margin: 0 auto;
		}
	}
	h3 {
		font-weight: 500;
		text-align: center;
		margin-bottom: 145px;
		@media (width <= 800px) {
			margin-bottom: 72px;
		}
		.jp {
			display: block;
			font-family: "Shippori Mincho B1", serif;
			font-size: 42px;
			line-height: 1.85;
			@media (width <= 800px) {
				font-size: 26px;
				line-height: 1.77;
			}
		}
	}
}
.road-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 1;
	@media (width <= 800px) {
		display: block;
	}
	&.wide {
		flex-direction: row-reverse;
	}
	&.short {
		justify-content: flex-end;
		margin-bottom: 170px;
		padding: 160px 0 220px;
		@media (width <= 800px) {
			padding: 112px 0 72px;
			margin-bottom: 72px;
		}
		&::before {
			position: absolute;
			left: 50%;
			top: 0;
			translate: -50% 0;
			width: 100vw;
			height: 100%;
			background-image: url(../../img/80th/road01_img01.webp);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			content: "";
			pointer-events: none;
			z-index: -1;
			@media (width <= 800px) {
				width: 1335px;
				left: -43.3vw;
				background-image: url(../../img/80th/road01_img01_sp.webp);
				translate: 0 0;
			}
		}
	}
	.road-detail {
		width: 47.1%;
		@media (width <= 800px) {
			width: 100%;
		}
	}
	.road-photo {
		width: 47.2%;
		@media (width <= 800px) {
			width: 100%;
			margin-top: 45px;
		}
	}
	h4 {
		width: 100%;
		font-size: 36px;
		line-height: 1.5;
		border-bottom: 1px solid var(--white);
		padding: 0 0 0px 70px;
		margin-bottom: 64px;
		white-space: nowrap;
		@media (width <= 1365px) {
			white-space: normal;
		}
		@media (width <= 800px) {
			font-size: 24px;
			line-height: 1.67;
			padding: 0 0 10px 48px;
			margin-bottom: 16px;
		}
		&::before {
			position: absolute;
			left: 0;
			top: -2px;
			font-family: "Montserrat", sans-serif;
			font-size: 44px;
			font-weight: 700;
			line-height: 1.2;
			counter-increment: count;
			content: counter(count, decimal-leading-zero);
			@media (width <= 800px) {
				top: 1px;
				font-size: 30px;
			}	
		}
		.subtitle {
			position: absolute;
			left: 0;
			top: -40px;
			display: inline-block;
			color: var(--gray70);
			font-size: 15px;
			font-weight: 700;
			line-height: 1.2;
			background-color: var(--white);
			padding: 3px 2px 0 2px;
			@media (width <= 800px) {
				font-size: 14px;
			}
		}
	}
	.read-road {
		font-weight: 400;
		line-height: 2.375;
		margin-bottom: 42px;
		@media (width <= 800px) {
			font-size: 15px;
			line-height: 2;
			margin-bottom: 40px;
		}
	}
	h5 {
		width: calc(100% + 20px);
		font-size: 28px;
		line-height: 1.5;
		margin-bottom: 24px;
		@media (width <= 800px) {
			width: 100%;
			font-size: 24px;
			line-height: 1.67;
			margin-bottom: 16px;
		}
		.stitle {
			font-size: 22px;
			font-weight: 500;
			margin-bottom: 16px;
			@media (width <= 800px) {
				font-size: 18px;
				margin-bottom: 4px;
			}
		}
	}
	.roadlist {
		font-size: 18px;
		font-weight: 400;
		line-height: 1.8;
		margin: 0 0 48px;
		padding: 0 0 0 32px;
		@media (width <= 800px) {
			font-size: 15px;
			margin-bottom: 40px;
			padding-left: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}


/* voice */
#voice {
	h2 {
		margin-bottom: 130px;
		@media (width <= 800px) {
			margin-bottom: 100px;
		}
	}
	.swipe {
		display: none;
		@media (width <= 800px) {
			position: relative;
			display: inline-block;
			font-size: 13px;
			font-weight: 400;
			line-height: 1;
			background-image: url(../../img/80th/icon_swipe.svg);
			background-repeat: no-repeat;
			background-position: left center;
			letter-spacing: 0;
			padding: 10px 0 0 24px;
			margin-bottom: 50px;
			&::after {
				position: absolute;
				left: 0;
				bottom: -8px;
				width: 100%;
				height: 2px;
				content: "";
				background-image: url(../../img/80th/bg_dot.webp);
				background-repeat: repeat-x;
				background-position: left center;
				background-size: 7px 2px;
			}
		}
	}
	.voice-img {
		width: 100%;
		margin-bottom: 170px;
		@media (width <= 800px) {
			width: 100vw;
			overflow-x: auto;
			margin: 0 auto 200px -20px;
			padding: 0 20px;
		}
		img {
			@media (width <= 800px) {
				width: 754px;
				max-width: inherit;
				padding: 0 0 10px;
			}
		}
	}
	.sa {
		display: flex;
		align-items: baseline;
		justify-content: flex-end;
		max-width: 1000px;
		font-size: 42px;
		font-weight: 700;
		line-height: 1;
		text-align: right;
		margin: 0 auto;
		@media (width <= 800px) {
			font-size: 19px;
		}
		.en {
			display: inline-block;
			font-size: 95px;
			font-style: italic;
			@media (width <= 800px) {
				font-size: 46px;
			}
		}
	}
}


/*
footer
*/
footer {
	position: relative;
	padding-top: 310px;
	@media (width <= 800px) {
		padding-top: 136px;
	}
	.siteinfo {
		position: relative;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 90px;
		z-index: 1;
		p {
			&.footer-company {
				font-size: 23px;
				font-weight: 700;
				line-height: 1.6;
				margin-bottom: 8px;
				@media (width <= 800px) {
					font-size: 20px;
				}
			}
			&.footer-address {
				font-weight: 400;
				margin-bottom: 32px;
				@media (width <= 800px) {
					font-size: 15px;
					line-height: 1.8;
				}
			}
			&.copyright {
				font-size: 14px;
				letter-spacing: 0;
				margin-bottom: 0;
				@media (width <= 800px) {
					font-size: 10px;
					font-weight: 500;
				}
			}
		}
		.footermenu {
			display: flex;
			align-items: center;
			gap: 0 50px;
			margin-bottom: 40px;
			@media (width <= 800px) {
				gap: 0;
				justify-content: space-between;
			}
			nav {
				&.footermenu01 {
					ul {
						li {
							a {
								position: relative;
								display: inline-block;
								font-family: "Montserrat", sans-serif;
								text-decoration: none;
								padding-left: 24px;
								transition: color 0.3s ease-out;
								&::before,
								&::after {
									position: absolute;
									left: 0;
									top: 50%;
									translate: 0 -50%;
									width: 15px;
									height: 14px;
									content: "";
									background-repeat: no-repeat;
									background-position: left center;
									transition: all 0.3s ease-out;
								}
								&::before {
									background-image: url(../../img/80th/icon_link.svg);
								}
								&::after {
									opacity: 0;
									background-image: url(../../img/80th/icon_link_on.svg);
								}
								@media (width >= 800px) {
									&:hover {
										color: var(--purple);
										&::before {
											opacity: 0;
										}
										&::after {
											opacity: 1;
										}
									}
								}
								@media (width <= 800px) {
									padding-left: 20px;
								}
							}
						}
					}
				}
				ul {
					display: flex;
					gap: 0 12px;
					margin: 0;
					padding: 0;
					li {
						letter-spacing: 0;
						margin: 0;
						padding: 0;
					}
				}
			}
		}
	}
	.logo-footer {
		position: relative;
		width: 100%;
		max-width: 1400px;
		text-align: right;
		margin: 0 auto;
		z-index: 1;
		@media (width <= 800px) {
			padding-left: 20px;
		}
	}
}
.bg-footer {
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 0;
	width: 2500px;
	z-index: -1;
	pointer-events: none;
	@media (width <= 800px) {
		width: 639px;
		left: 0;
		translate: 0 0;
	}
}