.document {
	padding-top: 0;
	box-sizing: border-box;
}
.footer_pagetop {
	display: none;
}
.pc {
	display: block !important;
}
.pc-large {
	display: block !important;
}
.sp-large {
	display: none !important;
}
.sp {
	display: none !important;
}
@media screen and (max-width: 1024px) {
	.pc-large {
		display: none !important;
	}
	.sp-large {
		display: block !important;
	}
}
@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important	;
	}
}

/* Mobile Menu Button - Hidden on desktop */
.mobile-menu-btn {
	display: none;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9;
	width: 48px;
	height: 48px;
	background-color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.mobile-menu-btn:hover {
	transform: scale(1.05);
}

.mobile-menu-btn span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: #D80C18;
	transition: all 0.3s ease;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	padding: 16px 20px 24px;
	box-sizing: border-box;
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-content {
	background-color: white;
	border-radius: 4px;
	width: 100%;
	max-width: 335px;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	padding: 24px 0;
	position: relative;
	transform: translateY(-20px);
	transition: transform 0.3s ease;
	overflow-y: scroll;
	max-height: calc(100% - 40px);
	-webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.active .mobile-menu-content {
	transform: translateY(0);
}

.mobile-menu-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0 40px 32px;
}

.mobile-menu-logo {
	width: 120px;
	margin: 0;
	display: block;
	text-decoration: none;
}

.mobile-menu-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.mobile-menu-close {
	width: 48px;
	height: 48px;
	background-color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	top: -24px;
	transition: transform 0.3s ease;
}

.mobile-menu-close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25px;
	height: 2px;
	background-color: #2e2727;
	transform-origin: center;
}

.mobile-menu-close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px 0;
	border-bottom: 1px solid #ccc;
}

.mobile-menu-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	
}

.mobile-menu-nav > ul > li {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mobile-menu-nav > ul > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: #d80c18;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.mobile-menu-nav > ul > li > a:hover {
	opacity: 0.7;
}

.mobile-menu-nav > ul > li > a.active {
	font-weight: 700;
	opacity: 1;
}

.mobile-menu-nav > ul > li > a::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d80c18;
	flex-shrink: 0;
}

.mobile-menu-nav > ul > li > a.active::before {
	width: 12px;
	height: 12px;
}

.mobile-menu-nav .submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-menu-nav .submenu li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mobile-menu-nav .submenu li a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: #d80c18;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.mobile-menu-nav .submenu li a:hover {
	opacity: 0.7;
}

.mobile-menu-nav .submenu li a.active {
	font-weight: 700;
	opacity: 1;
}

.mobile-menu-nav .submenu li a::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

.mobile-menu-link-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	border-radius: 4px;
	text-decoration: none;
	transition: opacity 0.3s ease;
	box-sizing: border-box;
	border: 1px solid #F39800;
}
	
.mobile-menu-link-button--member {
	background: linear-gradient(to right, #ea5504, #f39800);
}

.mobile-menu-link-button--contact {
	background: linear-gradient(to right, #fff, #fff);
}
.mobile-menu-link-button--contact .contact-text-en {
	font-family: 'Impact', sans-serif;
	font-size: 20px;
	background: linear-gradient(270deg, #F39800 0%, #EA5504 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mobile-menu-link-button--contact .contact-text-ja {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	background: linear-gradient(270deg, #F39800 0%, #EA5504 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mobile-menu-link-button:hover {
	opacity: 0.9;
}

.mobile-menu-link-button .contact-text-en {
	font-family: 'Impact', sans-serif;
	font-size: 20px;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mobile-menu-link-button .contact-text-ja {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: white;
}

.mobile-menu-link-button .contact-text-ja--small {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: white;
	margin-left: 4px;
}

.mobile-menu-footer-logo {
	width: 177px;
	margin: 0 auto;
	padding-top: 24px;
	display: block;
	text-decoration: none;
}

.mobile-menu-footer-logo img {
	width: 100%;
	height: auto;
	display: block;
}
@media screen and (max-width: 768px) {
	.mobile-menu-content {
		margin: 0 auto;
	}
}

.wrapper-sticky {
	position: relative;
}

/* Sticky Sentinels - Invisible elements for Intersection Observer */
.sticky-sentinel-top {
	position: absolute;
	top: -1px;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

.footer {
	z-index: 1;
	position: relative;
	margin-top: 0;
	background: #333;
}
@media screen and (max-width: 768px) {
	.footer {
		background: #f2f2f2;
	}
}
.logo-navi {
	width: 220px;
	margin-bottom: 52px;
}

.logo-navi img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation */
.navigation {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 80px 80px 90px;
	will-change: padding, background-color;
}

.navigation > figure {
	width: 300px;
	height: auto;
	margin: 0;
	mix-blend-mode: multiply;
}

.navigation > figure img {
	width: 100%;
	height: auto;
	display: block;
}

/* Navigation Container */
.navi-container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
	width: 285px;
	display: flex;
	flex-direction: column;
	padding: 32px 0 24px 0;
	align-items: center;
}

.navi-container > ul {
	padding: 0 27px 32px 32px;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid #ccc;
}

.navi-container > ul > li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.navi-container > ul > li > a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: #999;
	text-decoration: none;
	transition: color 0.3s ease;
}

.navi-container > ul > li > a:hover {
	color: #d80c18;
}

.navi-container > ul > li > a.active {
	color: #d80c18;
}

.navi-container > ul > li > a::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #999;
	flex-shrink: 0;
	margin-top: 7px;
}

.navi-container > ul > li > a.active::before {
	background-color: #d80c18;
}

/* Sub Navigation */
.navi-container > ul > li > ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 18px;
}

.navi-container > ul > li > ul > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: #999;
	text-decoration: none;
	transition: color 0.3s ease;
}

.navi-container > ul > li > ul > li > a:hover {
	color: #d80c18;
}

.navi-container > ul > li > ul > li > a::before,
.navi-container > ul > li > ul > li > a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	opacity: 0.3;
}

.navi-container > ul > li > ul > li > a::before {
	background-image: url('/grampus-dream/img/icon-arrow.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(90deg);
}

.navi-container > ul > li > ul > li > a::after {
	background-image: url('/grampus-dream/img/icon-arrow.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(90deg);
}

.navi-container > ul > li > ul > li > a.active {
	color: #d80c18;
}

.navi-container > ul > li > ul > li > a.active::before,
.navi-container > ul > li > ul > li > a.active::after {
	opacity: 1;
}

/* Navigation Logo at bottom */
.navi-container > figure {
	width: 148px;
	height: 10px;
	margin: 0;
}

.navi-container > figure img {
	width: 100%;
	height: auto;
	display: block;
}
@media screen and (max-width: 1600px) and (min-width: 1301px){
	.navigation {
		padding-left: 5vw;
	}
}
#banner {
	position: relative;
	height: 100vh;
	width: 100%;
}
#banner .inner {
	position: fixed;
	height: 100vh;
	width: 100%;
	background-image: url("/grampus-dream/img/img-main.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 266px;
		height: 100%;
		background-image: url("/grampus-dream/img/decor-banner-left.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 266px;
		height: 100%;
		background-image: url("/grampus-dream/img/decor-banner-right.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

#banner h1 {
	height: auto;
	max-width: 700px;
	width: 40%;
	position: absolute;
	/*bottom: 0;*/
	left: 0;
}
#banner h1 img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 1024px) {
	#banner {
		padding: 0;
		height: 100vh;
	}
	
	#banner .inner {
		padding: 0;
		max-width: 100%;
		height: 100vh;
		background-image: none;
		&::before {
			background-image: url('/grampus-dream/img/decor-banner-top.png');
			top: 0;
			width: 100%;
			height: 21.07vw;
			z-index: 1;
		}
		&::after {
			background-image: url('/grampus-dream/img/decor-banner-bottom.png');
			bottom: 0;
			top: auto;
			width: 100%;
			height: 21.07vw;
		}
	}
	
	#banner h1 {
		max-width: 600px;
		width: 80%;
		height: auto;
		top: 0;
		left: 0;
		bottom: auto;
		margin: 0;
		z-index: 10;
	}
	
	.banner-slider-wrapper {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}
	
	.banner-slider {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.banner-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.8s ease-in-out;
		pointer-events: none;
	}
	
	.banner-slide.active {
		opacity: 1;
		pointer-events: auto;
	}
	
	.banner-slide figure {
		width: 100%;
		height: 100%;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	.banner-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media screen and (max-width: 767px) {
	#banner {
		padding: 0;
		height: 100vh;
	}
	#banner h1 {
		width: 100%;
	}
}

/* Dream Section (GRAMPUS DREAMとは) */
#dream {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: visible;
}

/* Dream Circle Background - Using clip-path for perfect circle */
.dream-circle-bg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 180vmax;
	height: 250vmax;
	transform: translate(-50%, -50%);
	background-color: #d80c18;
	clip-path: circle(0% at 50% 50%);
	will-change: clip-path;
	pointer-events: none;
}


#dream .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
	&::after {
		content: '';
		position: absolute;
		bottom: -29px;
		right: 80px;
		width: 629px;
		height: 946px;
		background-image: url('/grampus-dream/img/wave.png');
		mix-blend-mode: soft-light;
	}
}

/* Dream Header */
#dream h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 100px 0 80px;
	margin: 0;
}
#dream h2 figure {
	width: 420px;
	height: auto;
	margin: 0;
}

#dream h2 figure img {
	width: 100%;
	height: auto;
	display: block;
}

#dream h2 span {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #fff;
	line-height: 1;
}

/* Dream Main Heading */
#dream h3 {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	margin: 0 0 40px 0;
}

/* Dream Body Text */
#dream p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.8;
	color: #fff;
	text-align: center;
	margin: 0;
}

#dream > .inner > p:first-of-type {
	margin-bottom: 40px;
}

/* Dream Image Gallery Container */
#dream .inner {
	position: relative;
	width: 100%;
	max-width: none;
	overflow: hidden;
}

#dream .inner > p:last-of-type {
	position: relative;
	z-index: 10;
}
@keyframes dreambgtext {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-3461px);
	}
}
/* Contact Background Text */
#dream .marquee-text {
	position: absolute;
	width: 10384px;
	height: 200px;
	bottom: 160px;
	background: url('/grampus-dream/img/txt_grampus_dream.png') repeat-x left top;
	background-size: 3461px 200px;
	pointer-events: none;
	z-index: 2;
	animation: dreambgtext 25s linear 0s infinite normal;
}

#dream ul {
	position: relative;
	display: flex;
	gap: 80px;
	flex-wrap: nowrap;
	padding: 80px 0 120px;
	margin: 0;
	list-style: none;
	align-items: flex-start;
	z-index: 10;
}

#dream ul.slider-track {
	animation: slideInfinite 50s linear infinite;
	will-change: transform;
	display: inline-flex;
	padding-left: 0;
	padding-right: 0;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	animation-timing-function: linear;
	animation-fill-mode: none;
}

@keyframes slideInfinite {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-25%, 0, 0);
	}
}

#dream ul.slider-track li {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#dream ul li {
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	contain: paint;
	will-change: contents;
}

#dream ul li:nth-child(8n+1),
#dream ul li:nth-child(8n+5) {
	width: 320px;
	height: 213px;
	align-self: flex-start;
}

#dream ul li:nth-child(8n+2),
#dream ul li:nth-child(8n+4),
#dream ul li:nth-child(8n+6),
#dream ul li:nth-child(8n+8) {
	width: 240px;
	height: 160px;
	align-self: flex-end;
	margin-top: 160px;
}

#dream ul li:nth-child(8n+3),
#dream ul li:nth-child(8n+7) {
	width: 240px;
	height: 160px;
	align-self: flex-start;
}

#dream ul li figure {
	margin: 0;
	width: 100%;
	height: 100%;
	position: relative;
}

#dream ul li figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
@media screen and (max-width: 1024px) {
	#dream h2 {
		padding: 150px 0 60px 0;
	}
}
@media screen and (max-width: 768px) {
	/* Dream Section */
	#dream {
		padding: 0;
		position: relative;
	}
	.dream-circle-bg {
		height: 320vmax;
	}
	#dream .inner {
		max-width: 100%;
		padding: 0;
	}
	
	#dream h2 {
		padding: 200px 0 24px;
		gap: 16px;
	}
	
	#dream h2 figure {
		width: 260px;
	}
	
	#dream h2 span {
		display: block;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.05em;
	}
	
	
	#dream h3 {
		font-size: 18px;
		line-height: 1.78;
		letter-spacing: 0;
		margin-bottom: 32px;
	}
	
	#dream p {
		text-align: left;
		font-size: 14px;
		line-height: 1.8;
		letter-spacing: 0;
		margin-bottom: 16px;
		padding: 0 27px;
	}
	
	#dream p:last-of-type {
		margin-bottom: 40px;
	}
	
	#dream ul {
		gap: 40px;
		padding: 40px 0;
	}
	
	#dream .inner::after {
		right: 0;
		width: 309px;
		height: 465px;
		background-size: contain;
	}
	#dream ul li:nth-child(8n+1),
	#dream ul li:nth-child(8n+5) {
		width: 180px;
		height: auto;
		align-self: flex-start;
	}

	#dream ul li:nth-child(8n+2),
	#dream ul li:nth-child(8n+4),
	#dream ul li:nth-child(8n+6),
	#dream ul li:nth-child(8n+8) {
		width: 140px;
		height: auto;
		align-self: flex-end;
		margin-top: 96px;
	}

	#dream ul li:nth-child(8n+3),
	#dream ul li:nth-child(8n+7) {
		width: 140px;
		height: auto;
		align-self: flex-start;
	}
	.marquee-wrapper {
		height: 120px;
		bottom: 80px;
		overflow: visible;
	}
	@keyframes dreambgtextsp {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-2076px);
		}
	}
	#dream .marquee-text {
		position: absolute;
		width: 6228px;
		height: 120px;
		bottom: 80px;
		background: url('/grampus-dream/img/txt_grampus_dream.png') repeat-x left top;
		background-size: 2076px 120px;
		pointer-events: none;
		z-index: 2;
		animation: dreambgtextsp 25s linear 0s infinite normal;
	}
}

/* ================================================
   MOVIE SECTION
   ================================================ */

#movie {
	position: relative;
	width: 100%;
	height: 719px;
	overflow: hidden;
}

.movie-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.movie-bg-image,
.movie-bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.movie-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
}

.movie-content {
	position: absolute;
	bottom: 64px;
	right: 80px;
	display: flex;
	align-items: center;
	gap: 16px;
	z-index: 4;
}

.movie-text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.movie-subtitle {
	display: flex;
	align-items: center;
	gap: 4px;
}

.movie-decor {
	width: 40px;
	height: 8.676px;
	background-image: url('/grampus-dream/img/icon-span.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.movie-subtitle span {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.56px;
	color: #fff;
	white-space: nowrap;
}

.movie-title {
	font-family: 'Impact', sans-serif;
	font-weight: 400;
	font-size: 72px;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
}

.movie-play-btn {
	width: 80px;
	height: 80px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	flex-shrink: 0;
}

.movie-play-btn:hover {
	transform: scale(1.1);
	opacity: 0.9;
}

.movie-play-btn:active {
	transform: scale(0.95);
}

.movie-play-btn svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ================================================
   VIDEO POPUP MODAL
   ================================================ */

.video-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.video-modal.active {
	display: flex;
}

.video-modal-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.video-modal-content {
	position: relative;
	z-index: 10000;
	max-width: 1120px;
	max-height: 90vh;
	width: 80%;
	animation: modalFadeIn 0.3s ease-out;
	aspect-ratio: 16 / 9;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.video-close-btn {
	position: absolute;
	top: -50px;
	right: -40px;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	z-index: 10001;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.video-close-btn:hover {
	transform: rotate(90deg);
	opacity: 0.8;
}

.video-close-btn svg {
	display: block;
	width: 100%;
	height: 100%;
}

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	background: #000;
	border-radius: 4px;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Prevent body scroll when modal is open */
body.modal-open {
	overflow: hidden;
}

@media screen and (max-width: 768px) {
		/* Movie Section */
		#movie {
			padding: 0;
			height: 400px;
		}
		
		.movie-content {
			right: 0;
			bottom: 0;
			padding: 0 84px 40px 0;
			justify-content: flex-end;
			align-items: flex-start;
		}
		
		.movie-text {
			width: 100%;
			max-width: none;
		}
		
		.movie-subtitle {
			justify-content: center;
		}
		
		.movie-subtitle span {
			font-size: 12px;
		}
		
		.movie-decor {
			width: 40px;
			height: 8.676px;
		}
		
		.movie-title {
			font-size: 40px;
			line-height: 1;
			letter-spacing: 0.8px;
			text-align: center;
		}
		
		.movie-play-btn {
			position: absolute;
			bottom: 40px;
			right: 20px;
			width: 48px;
			height: 48px;
		}
		
		.movie-play-btn img {
			width: 100%;
			height: 100%;
		}	
}
/* Theme Section */
#theme {
	box-sizing: border-box;
	position: relative;
	padding: 120px 0;
  max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw + 10px);
		height: 100%;
		background-color: #f0f0f0;
	}
}

#theme .inner {
	box-sizing: border-box;
	max-width: 1155px;
	padding-right: 80px;
	width: 100%;
	margin-left: auto;
}
@media screen and (max-width: 1650px) and (min-width: 1301px){
	#theme {
		margin: 0;
		max-width: 100%;
	}
	#theme .inner{
		max-width: 100%;
		width: calc(100% - 445px);
		padding-right: 0;
	}
}
@media screen and (max-width: 1300px) {
	#theme {
		padding: 56px 0 64px;
	}
	#theme .inner {
		margin: 0 auto;
		padding-right: 0;
	}
}
@media screen and (max-width: 1200px) {
	#theme .inner {
		padding: 0 20px;
	}
}
/* Theme Header */
.theme-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	padding-bottom: 48px;
	z-index: 1;
}

.theme-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.theme-title h2 {
	font-family: 'Impact', sans-serif;
	font-size: 100px;
	line-height: 1;
	color: #2e2727;
	text-transform: uppercase;
	margin: 0;
	font-weight: normal;
}

.theme-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.theme-subtitle .decoration {
	display: inline-block;
	width: 70px;
	height: 15px;
	background-image: url('/grampus-dream/img/icon-span.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.theme-subtitle p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #2e2727;
	margin: 0;
	line-height: 1;
}

.theme-header p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: #2e2727;
	margin: 0;
	padding-top: 9px;
	white-space: nowrap;
}

/* Theme Cards */
.theme-cards {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	max-width: 1075px;
}

.theme-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width:33%;
	position: relative;
}

.theme-card-icon {
	width: 150px;
	height: 200px;
	position: relative;
	z-index: 2;
	margin-bottom: -140px;
	overflow: hidden;
}

.theme-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.theme-card-content {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.theme-card-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.theme-card-text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 184px 0 48px 0;
}

.theme-card-text h3 {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	color: #ffffff;
	text-align: center;
	margin: 0;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	background-color: #2e2727;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
}

.btn--secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	background: linear-gradient(270deg, #F39800 0%, #EA5504 100%);
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
}

.btn:hover,
.btn--secondary:hover {
	background-color: #fff;
	background:#fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
}
.btn:hover span,.btn--secondary:hover span {
	color: #D80C18;
}
.btn:hover .icon-arrow {
	background-image: url('/grampus-dream/img/icon-link-hover.svg');
}
.btn:hover .icon-pdf {
	background-image: url('/grampus-dream/img/icon-pdf-hover.svg');
}
.btn span {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: #ffffff;
	text-align: center;
}

.btn .icon-arrow {
	display: inline-block;
	width: 11.899px;
	height: 10.889px;
	background-image: url('/grampus-dream/img/icon-link.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 0;
}

.btn .icon-pdf {
	display: inline-block;
	width: 12px;
	height: 15px;
	background-image: url('/grampus-dream/img/icon-pdf.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 0;
}
.btn .icon-pdf::before {
	content: none;
}

/* Button Variants */
.btn-more {
	padding: 12px 40px;
}
@media screen and (max-width: 768px) {
	/* Theme Section */
	#theme {
		padding: 80px 20px 64px;
	}
	
	#theme .inner {
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.theme-header {
		margin-bottom: 76px;
		padding: 0;
		gap: 24px;
		align-items: flex-start;
		flex-direction: column;
	}
	
	.theme-title {
		flex-direction: column;
		margin-bottom: 0;
	}
	
	.theme-title h2 {
		font-size: 64px;
		line-height: 1;
		letter-spacing: 1.28px;
		text-align: center;
	}
	
	.theme-subtitle {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	
	.theme-subtitle .decoration {
		width: 40px;
		height: 8.676px;
		margin: 0;
	}
	
	.theme-subtitle p {
		font-size: 14px;
		margin: 0;
		text-align: left;
	}
	
	.theme-header p {
		font-size: 14px;
		line-height: 1.71;
		letter-spacing: 0;
		text-align: left;
	}
	
	.theme-cards {
		flex-direction: column;
		gap: 80px;
	}
	
	.theme-card {
		width: 100%;
		max-width: none;
		padding-bottom: 0;
	}
	
	.theme-card-icon {
		width: 120px;
		height: 120px;
		top: -60px;
	}
	
	.theme-card-content {
		width: 100%;
		height: auto;
	}
	
	.theme-card-text {
		padding: 132px 24px 32px;
		gap: 24px;
	}
	
	.theme-card-text h3 {
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: 0;
	}
	
	/* Button responsive */
	.btn {
		padding: 16px 20px;
		font-size: 14px;
	}
	
	.btn span {
		font-size: 14px;
	}
	
	.btn.btn-more {
		padding: 16px 20px;
	}
}
/* Activity Section */
#activity {
	background-color: #fff;
}
#activity .inner {
	max-width: 1450px;
	margin: 0 auto;
	width: 100%;
}
/* Activity Header */
.activity-header-wrapper {
	box-sizing: border-box;
	max-width: 1520px;
	width: 100%;
	margin: 0 auto;
	padding: 120px 0 0;
}
.activity-header {
	display: flex;
	align-items: flex-end;
	gap: 40px;
	padding: 0 0 48px 0;
	max-width: 1155px;
	margin-left: auto;
}

.activity-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.activity-title h2 {
	font-family: 'Impact', sans-serif;
	font-size: 100px;
	line-height: 1;
	color: #2e2727;
	text-transform: uppercase;
	margin: 0;
	font-weight: normal;
}

.activity-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.activity-subtitle .decoration {
	display: inline-block;
	width: 70px;
	height: 15px;
	background-image: url('/grampus-dream/img/icon-span.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.activity-subtitle p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #2e2727;
	margin: 0;
	line-height: 1;
}

.activity-description {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 32px 0;
}

.activity-description p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: #2e2727;
	margin: 0;
	white-space: nowrap;
}

/* Activity Anchor Links */
.activity-anchors {
	box-sizing: border-box;
	display: flex;
	gap: 20px;
	max-width: 1155px;
	width: 100%;
  margin-left: auto;
}

.activity-anchor {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 345px;
	padding: 28px 32px;
	border-radius: 4px;
	text-decoration: none;
	transition: opacity 0.3s ease;
	box-sizing: border-box;
}

.activity-anchor:hover .anchor-arrow {
	background-image: url('/grampus-dream/img/icon-arrow.png');
}

.activity-anchor.earth {
	background-color: #d80c18;
}

.activity-anchor.town {
	background-color: #f8b500;
}

.activity-anchor.family {
	background-color: #baa85b;
}

.anchor-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.anchor-title {
	font-family: 'Impact', sans-serif;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 0.8px;
	margin: 0;
}

.activity-anchor.earth .anchor-title {
	color: #f8b500;
}

.activity-anchor.town .anchor-title,
.activity-anchor.family .anchor-title {
	color: #d80c18;
}

.anchor-subtitle {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	margin: 0;
}

.anchor-arrow {
	display: inline-block;
	width: 16px;
	height: 29px;
	background-image: url('/grampus-dream/img/icon-arr-full.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-position: bottom;
	transition: all 0.1s ease;
}

/* Activity Detail Sections */
.activity-detail {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 100%;
	}
}

.activity-detail.earth {
	margin-top: 185px;
	&::before {
		background-color: #d80c18;
	}
}


.activity-detail.town {
	&::before {
		background-color: #f8b500;
	}
}

.activity-detail.family {
	&::before {
		background-color: #baa85b;
	}
}
.activity-detail.family .activity-detail-content {
	margin-bottom: 120px;
}

.activity-detail-content {
	max-width: 1155px;
	width: 100%;
	margin-bottom: 240px	;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
}

.activity-hero {
	width: 100%;
	height: auto;
	margin-top: -120px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.activity-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.activity-body {
	box-sizing: border-box;
	max-width: 995px;
	width: 100%;
	margin-top: -64px;
	z-index: 1;
}

/* Activity Main Title */
.activity-main-title {
	font-family: 'Impact', sans-serif;
	font-size: 132px;
	line-height: 1;
	letter-spacing: 2.64px;
	margin: 0 0 40px 0;
	font-weight: normal;
}

.activity-detail.earth .activity-main-title {
	color: #f8b500;
}

.activity-detail.town .activity-main-title,
.activity-detail.family .activity-main-title {
	color: #d80c18;
}

/* Activity Info */
.activity-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.activity-copy {
	border-radius: 4px;
	padding: 0 8px;
	display: inline-flex;
	align-self: flex-start;
}

.activity-copy p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 1.5;
	letter-spacing: 1.6px;
	color: #2e2727;
	margin: 0;
	padding: 0 8px;
	background-color: #fff;
	border-radius: 4px;
}

.activity-text {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.8;
	margin: 0;
}

.activity-detail.earth .activity-text {
	color: #fff;
}

.activity-detail.town .activity-text,
.activity-detail.family .activity-text {
	color: #2e2727;
}

.activity-text p {
	margin: 0 0 1em 0;
}

.activity-text p:last-child {
	margin-bottom: 0;
}

/* Activity Section Title */
.activity-section-title {
	padding: 80px 0 40px 0;
}

.activity-section-title h4 {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	margin: 0;
	padding-left: 24px;
	border-left: 6px solid #fff;
}

.activity-section-title.dark h4 {
	color: #2e2727;
	border-left-color: #2e2727;
}

.banner-link {
	display: block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid #fff;
	margin-bottom: 2em;
}

.banner-link img {
	width: 100%;
	height: auto;
	display: block;
}

.banner-icon {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 64px;
	height: 64px;
	background-image: url('/grampus-dream/img/icon-link.svg');
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #2E2727;
	border-radius: 50%;
	transition: all 0.2s ease;
	&:hover {
		background-color: #fff;
		filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.20));
		background-image: url('/grampus-dream/img/icon-link-hover.svg');
	}
}

.activity-card {
	flex: 1;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
}

.card-image {
	width: 100%;
	height: 184px;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-content {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.card-date {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 13.8px;
	line-height: 17.89px;
	color: #2e2727;
	text-align: center;
}

.card-title {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.7;
	color: #6699cc;
	margin: 0;
}

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.card-tag {
	background-color: #ccc;
	color: #fff;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 300;
	font-size: 10.238px;
	line-height: 15.18px;
	padding: 0.5px 5px;
	border-radius: 10px;
	display: inline-block;
}

/* Activity More Button */
.activity-more {
	display: flex;
	justify-content: center;
	padding-top: 40px;
}
@media screen and (max-width: 1650px) and (min-width: 1301px){
	#activity .inner {
		margin: 0 0 0 auto;
		max-width: 100%;
	}
	.activity-header {
		max-width: 100%;
	}
	.activity-anchors {
		max-width: 100%;
	}
	.activity-hero {
		border-radius: 8px 0 0 8px;
	}
	.activity-detail-content {
		max-width: 100%;
		width: calc(100% - 445px);
	}
	.activity-header-wrapper {
		max-width: 100%;
		width: calc(100% - 445px);
		margin: 0 0 0 auto;
	}
}
@media screen and (max-width: 1400px) {
	.activity-body {
		padding: 0 20px;
		margin-top: -50px;
	}
	.activity-main-title {
		font-size: 110px;
	}
}
@media screen and (max-width: 1300px) {
	/* Activity sections */
	.activity-anchors {
		gap: 16px;
	}
	
	.activity-anchor {
		width: 100%;
	}
	
	.activity-articles {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.activity-more {
		padding-top: 10px;
	}
	.activity-detail-content {
		margin-bottom: 180px;
	}
	.activity-hero {
		border-radius: 8px 0 0 8px;
	}
}
@media screen and (max-width: 1155px) {
	.activity-hero {
		border-radius: 0;
	}
	.activity-header-wrapper {
		padding: 100px 20px 0;
	}
}
@media screen and (max-width: 768px) {
	/* Activity Section */
	.activity-header-wrapper {
		padding: 56px 0 0;
	}
	.activity-header {
		margin-bottom: 24px;
		gap: 24px;
		padding: 0 20px;
		flex-direction: column;
		align-items: flex-start;
	}
	.activity-detail.family .activity-detail-content {
		margin-bottom: 0;
	}
	.activity-title {
		flex-direction: column;
	}
	
	.activity-title h2 {
		font-size: 64px;
		line-height: 1;
		letter-spacing: 1.28px;
		text-align: center;
	}
	
	.activity-subtitle {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	.activity-detail.earth {
		margin-top: 0;
	}

	.activity-subtitle .decoration {
		width: 40px;
		height: 8.676px;
		margin: 0;
	}
	
	.activity-subtitle p {
		font-size: 14px;
		margin: 0;
	}
	
	.activity-description {
		text-align: center;
		padding: 0;
	}
	
	.activity-description p {
		font-size: 14px;
		line-height: 1.71;
	}
	
	.activity-anchors {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 48px;
		padding: 0 20px;
	}
	
	.activity-anchor {
		width: 100%;
		height: 94px;
		padding: 20px 24px;
		align-items: center;
	}
	
	.anchor-title {
		font-size: 20px;
		line-height: 1.6;
		letter-spacing: 0;
	}
	
	.anchor-subtitle {
		font-size: 12px;
		line-height: 1.17;
		letter-spacing: 0;
	}
	
	.anchor-arrow {
		width: 16px;
		height: 29px;
	}
	
	/* Activity Detail Sections */
	.activity-detail {
		padding: 0;
		margin-bottom: 0;
	}
	
	.activity-detail-content {
		max-width: 100%;
		padding: 0;
		margin-bottom: 0;
	}
	
	.activity-hero {
		height: 280px;
		margin-top: 0;
		border-radius: 0;
	}
	
	.activity-hero img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.activity-body {
		max-width: 100%;
		padding: 0 20px 64px;
		margin-top: -25px;
		box-sizing: border-box;
	}
	
	.activity-main-title {
		font-size: 56px;
		line-height: 1;
		letter-spacing: 1.12px;
		margin-bottom: 24px;
	}
	
	.activity-info {
		margin-bottom: 0;
	}
	
	.activity-copy {
		margin-bottom: 0;
		flex-direction: column;
		gap: 8px;
	}
	
	.activity-copy p {
		font-size: 28px;
		line-height: 1.5;
		letter-spacing: -0.5px;
		border-radius: 4px;
		padding: 0 8px;
		align-self: flex-start;
	}
	
	.activity-text p {
		font-size: 16px;
		line-height: 1.8;
		letter-spacing: 0;
		margin-bottom: 0;
	}
	
	.activity-section-title {
		padding: 40px 0 24px;
	}
	
	.activity-section-title h4 {
		font-size: 18px;
		line-height: 1;
		letter-spacing: 0;
		padding-left: 16px;
	}
	
	.activity-banner {
		margin-bottom: 0;
	}
	
	.activity-banner a {
		height: auto;
	}
	
	.activity-banner img {
		width: 100%;
		height: auto;
	}
	
	.activity-articles {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 40px;
	}
	
	.activity-more {
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}
	
	.btn.btn-more {
		width: auto;
		font-size: 14px;
		padding: 12px 40px;
	}
	
	.btn.btn-more span {
		font-size: 14px;
	}
}
/* Sustainability Section */
#sustainability {
	box-sizing: border-box;
	position: relative;
	padding: 200px 0 80px;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	background-color: #000;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw + 10px);
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.93%, #000 99.96%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), url('/grampus-dream/img/img-bg-sustainability.jpg') lightgray 0px -437.5px / 100% 220.905% no-repeat;
		background-size: cover;
		background-position: bottom center;

		/* sp background */
		@media screen and (max-width: 768px) {
			background: linear-gradient(0deg, #000 31.38%, rgba(0, 0, 0, 0.00) 85.14%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), url('/grampus-dream/img/img-bg-sustainability.jpg') lightgray -38.585px -22.999px / 120.579% 75.426% no-repeat;
			background-position: top center;
			
		}
	}
}
#sustainability .inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1155px;
	padding-right: 80px;
	width: 100%;
	margin-left: auto;
	z-index: 1;
}
.sustainability-content {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 100px;
}

/* Sustainability Header */
.sustainability-header {
	padding-bottom: 48px;
}

.coming-soon-badge {
	margin-bottom: 8px;
}

.coming-soon-badge span {
	display: inline-block;
	background-color: #d80c18;
	color: #fff;
	font-family: 'Impact', sans-serif;
	font-size: 24px;
	line-height: 1;
	padding: 2px 4px;
	text-transform: uppercase;
	font-weight: normal;
}

.sustainability-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sustainability-title h2 {
	font-family: 'Impact', sans-serif;
	font-size: 100px;
	line-height: 1;
	color: #2E2727;
	text-transform: uppercase;
	margin: 0;
	font-weight: normal;
}

.sustainability-title--white h2 {
	color: #fff;
}

.sustainability-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sustainability-subtitle .decoration {
	display: inline-block;
	width: 70px;
	height: 15px;
	background-image: url('/grampus-dream/img/icon-span.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.sustainability-subtitle p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #2E2727;
	margin: 0;
	line-height: 1;
}

.sustainability-subtitle--white p {
	color: #fff;
}

/* Sustainability Description */
.sustainability-description {
	width: 100%;
}

.sustainability-description p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.8;
	color: #fff;
	margin: 0;
}
.sustainability-buttons {
	padding-top: 40px;
	display: flex;
	gap: 32px;
	align-items: center;
}
@media screen and (max-width: 1650px) and (min-width: 1301px){
	#sustainability {
		margin: 0;
		max-width: 100%;
	}
	#sustainability .inner{
		width: calc(100% - 445px);
		padding-right: 0;
	}
	.sustainability-title h2 {
		font-size: 88px;
	}
	.sustainability-content {
		max-width: 1075px;
	}
}
@media screen and (max-width: 1400px) {
	#sustainability .inner {
		padding: 0 20px 0 0;
	}
}
@media screen and (max-width: 1300px) {
	#sustainability {
		padding: 120px 30px;
	}
	#sustainability .inner {
		padding: 0;
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	/* Sustainability Section */
	#sustainability {
		padding: 56px 20px 64px;
		min-height: auto;
	}
	
	.sustainability-content {
		max-width: 100%;
		text-align: center;
		gap: 10px;
	}
	
	.sustainability-header {
		margin-bottom: 0;
		text-align: left;
		padding-bottom: 24px;
	}
	
	.coming-soon-badge {
		margin-bottom: 8px;
	}
	
	.coming-soon-badge span {
		font-size: 18px;
		line-height: 1;
		letter-spacing: 0;
		padding: 2px 4px;
	}
	
	.sustainability-title {
		flex-direction: column;
		gap: 8px;
	}
	
	.sustainability-title h2 {
		font-size: 52px;
		line-height: 1;
		letter-spacing: 0;
	}
	
	.sustainability-subtitle {
		flex-direction: row;
		justify-content: start;
		gap: 8px;
	}
	
	.sustainability-subtitle .decoration {
		width: 40px;
		height: 8.676px;
		margin: 0;
	}
	
	.sustainability-subtitle p {
		font-size: 14px;
		margin: 0;
	}
	
	.sustainability-description p {
		font-size: 16px;
		line-height: 2.08;
		letter-spacing: 0;
		text-align: left;
	}
	.sustainability-buttons {
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px;

	}
	.sustainability-buttons .btn.btn-more {
		padding: 12px 40px;
	}
}
/* Sustainability Report Section */
#sustainability-report {
	padding: 120px 0 160px;
	box-sizing: border-box;
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw + 10px);
		height: 100%;
		background-color: #FFF;
	}
}
#sustainability-report .inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1155px;
	padding-right: 80px;
	width: 100%;
	margin-left: auto;
	z-index: 1;
}
.sustainability-report-cards {
	padding-top: 40px;
}
.sustainability-report-cards .lst-cards-content {
	display: flex;
	align-items: center;
	padding-right: 80px;
	gap: 64px;
	border-radius: 8px;
	border: 1px solid #CCC;
	overflow: hidden;
}
.sustainability-report-cards .lst-cards-picture {
	width: 600px;
	min-width: 350px;
	padding: 30px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F0F0F0;
	flex: 1;
}
.sustainability-report-cards .lst-cards-picture img {
	object-fit: cover;
	aspect-ratio: 17/24;
}
.sustainability-report-cards .lst-cards-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.sustainability-report-cards .lst-cards-link {
	display: flex;
}
.sustainability-report-cards .lst-cards-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
	color: #2E2727;
}
.sustainability-report-buttons ul {
	display: flex;
	gap: 32px;
	align-items: center;
}
@media screen and (max-width: 1650px) and (min-width: 1301px) {
	#sustainability-report {
		margin: 0;
		max-width: 100%;
	}
	#sustainability-report .inner {
		width: calc(100% - 445px);

	}
}
@media screen and (max-width: 1300px) {
	#sustainability-report {
		padding: 120px 30px;
	}
}
@media screen and (max-width: 969px) and (min-width: 769px) {
	#sustainability-report .inner {
		padding-right: 10px;
	}
	.sustainability-report-cards .lst-cards-content {
		padding-right: 30px;
	}
}
@media screen and (max-width: 768px) {
	#sustainability-report {
		padding: 56px 20px 64px;
	}
	#sustainability-report .inner {
		max-width: 100%;
		padding-right: 0;
	}
	.sustainability-report-cards {
		padding-top: 24px;
	}
	.sustainability-report-cards .lst-cards-content {
		display: block;
		padding-right: 0;
	}
	.sustainability-report-cards .lst-cards-picture {
		width: 100%;
		min-width: auto;
	}
	.sustainability-report-cards .lst-cards-body {
		padding: 24px 20px; 
		gap: 24px;
		align-items: center;
	}
	.sustainability-report-buttons ul {
		flex-wrap: wrap;
		gap: 16px;
	}
}
/* FAQ Section */
#faq {
	padding: 120px 0 160px;
	box-sizing: border-box;
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	background-color: #F0F0F0;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw + 10px);
		height: 100%;
		background-color: #F0F0F0;
	}
}

#faq .inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1155px;
	padding-right: 80px;
	width: 100%;
	margin-left: auto;
	z-index: 1;
}


.faq-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.faq-header {
	padding-bottom: 48px;
}

.faq-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq-title h2 {
	font-family: 'Impact', sans-serif;
	font-size: 88px;
	line-height: 1;
	color: #2E2727;
	text-transform: uppercase;
	margin: 0;
	font-weight: normal;
}

.faq-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.faq-subtitle .decoration {
	display: inline-block;
	width: 70px;
	height: 15px;
	background-image: url('/grampus-dream/img/icon-span.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.faq-subtitle p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.8px;
	color: #2E2727;
	margin: 0;
	line-height: 1;
}

.faq-description {
	width: 100%;
}

.faq-accordion {
	padding: 16px 0;
	border-bottom: 1px solid #CCC;
}

.faq-accordion-title {
	padding-right: 56px;
	position: relative;
	display: flex;
	align-items: flex-start;
	cursor: pointer;
	gap: 16px;

	&::before {
		content: "Q";

		flex-shrink: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 40px;
		height: 40px;

		font-family: 'Impact', sans-serif;
		font-size: 16px;
		line-height: 1;
		font-weight: 400;

		color: #FFF;
		background-color: #D80C18;
		border-radius: 4px;
	}

	&::after {
		content: "";
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		right: 0;
		background-image: url('/grampus-dream/img/icon-chevron-down.svg');
		background-size: 24px 24px;
		background-repeat: no-repeat;
		background-position: center;
		top: 50%;
		transform: translateY(-50%) rotate(180deg);
		transition: transform 0.3s ease;
	}
}

.faq-accordion-title.active::after {
	transform: translateY(-50%) rotate(0deg);
}

.faq-accordion-title p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 18px;
	line-height: 1.8;
	padding-top: 4px;
	font-weight: 300;
	color: #2E2727;
}

.faq-accordion-content {
	padding-left: 56px;
	position: relative;
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	height: 0;
	overflow: hidden;

	&::before {
		content: "A";
		position: absolute;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		width: 40px;
		height: 40px;
		top: 0;
		left: 0;
		font-family: 'Impact', sans-serif;
		font-size: 16px;
		line-height: 1;
		font-weight: 400;
		color: #D80C18;
		background-color: #fff;
		border: 1px solid #D80C18;
		border-radius: 4px;
		z-index: 1;
	}

}

.faq-accordion-content p{
	font-size: 18px;
	line-height: 1.8;
	padding-top: 4px;
	font-weight: 300;
	color: #2E2727;
}


.faq-accordion-content a {
	font-size: 18px;
	line-height: 1.8;
	padding-top: 4px;
	font-weight: 300;
	display: block;
	word-break: break-word;
}


.faq-sub-heading {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 24px;
	line-height: 1;
	color: #2E2727;
	font-weight: 600;
	margin: 80px 0 40px;
	padding-left: 24px;
	border-left: 6px solid #2E2727;
}

@media screen and (max-width: 1650px) and (min-width: 1301px) {
	#faq {
		margin: 0;
		max-width: 100%;
	}
	#faq .inner {
		width: calc(100% - 445px);

	}
}
@media screen and (max-width: 1300px) {
	#faq {
		padding: 120px 30px;
	}
}
@media screen and (max-width: 969px) and (min-width: 769px) {
	#faq .inner {
		padding-right: 10px;
	}
	
}

@media screen and (max-width: 768px) {
	#faq {
		padding: 56px 20px 64px;
	}
	#faq .inner {
		max-width: 100%;
		padding-right: 0;
	}
	.faq-header {
		padding-bottom: 24px;
	}

	.faq-title h2 {
		font-size: 52px;
	}

	.faq-subtitle {
		gap: 4px;
	}

	.faq-subtitle .decoration {
		width: 50px;
		height:10px;
	}

	.faq-subtitle p {
		font-size: 14px;
		letter-spacing: 0.56px;
	}
	
	.faq-accordion-title {
		padding-right:  32px;
		
		&::before {
			content: "Q";
			display: flex;
			flex-shrink: 0;

			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			
			font-family: 'Impact', sans-serif;
			font-size: 16px;
			line-height: 1;
			font-weight: 400;
			color: #FFF;
			background-color: #D80C18;
			border-radius: 4px;
		}

		&::after {
			content: "";
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			right: 0;
			background-image: url('/grampus-dream/img/icon-chevron-down.svg');
			background-size: 16px 16px;
			background-repeat: no-repeat;
			background-position: center;
			top: 16px;
			transform: translateY(-50%) rotate(180deg);
			transition: transform 0.3s ease;
		}
	}

	.faq-accordion-title p{
		font-size: 16px;
		padding-top: 2px;
	}


	.faq-accordion-content {
		padding-left: 48px;
		position: relative;

		&::before {
			content: "A";
			position: absolute;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			width: 30px;
			height: 30px;
			top: 0;
			left: 0;
			font-family: 'Impact', sans-serif;
			font-size: 16px;
			line-height: 1;
			font-weight: 400;
			color: #D80C18;
			background-color: #fff;
			border: 1px solid #D80C18;
			border-radius: 4px;
			z-index: 1;
		}
	}
	.faq-accordion-content p{
		font-size: 16px;
		padding-top: 2px;
	}
}


/* Contact Section */
#contact {
	position: relative;
	padding: 120px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 345px;
	max-height: 600px;
	background-image: url('/grampus-dream/img/img-contact.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}



#contact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}

@keyframes textcontact {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-2024px);
	}
}
.contact-bg-text {
	display: block;
	animation: textcontact 15s linear 0s infinite normal;
	width: 6072px;
	height: 160px;
	background: url('/grampus-dream/img/txt_contactus.png') repeat-x left top;
	background-size: 2024px 160px;
	will-change: transform;
	pointer-events: none;
	position: absolute;
}

/* Contact Content */
.contact-content {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 400px;
	height: 400px;
	background-color: #fff;
	border-radius: 50%;
	text-decoration: none;
	background-image: url('/grampus-dream/img/icon-contact.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: all 0.3s ease;
}

.contact-circle:hover {
	background-image: url('/grampus-dream/img/icon-contact-hover.png');
}

.contact-icon {
	width: 21px;
	height: 17px;
}

.contact-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.contact-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.contact-text h2 {
	font-family: 'Impact', sans-serif;
	font-size: 56px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	background: linear-gradient(to right, #ea5504, #f39800);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: normal;
}

.contact-text p {
	font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: #2e2727;
	margin: 0;
}

/* Page Top Button */
.page-top {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 3;
	text-decoration: none;
}

.page-top-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 64px;
	height: 64px;
	background-color: #000;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.page-top:hover .page-top-content .page-top-arrow {
	background-image: url('/grampus-dream/img/icon-arrow.png');
}

.page-top-content p {
	font-family: 'Impact', sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.24px;
	margin: 0;
}

.page-top-arrow {
	display: inline-block;
	width: 12px;
	height: 21.018px;
	background-image: url('/grampus-dream/img/icon-arr-full.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(180deg);
	background-position: bottom;
	transition: background-image 0.1s ease;
}
/* Fixed  Button Wrapper */
.sticky-btn-wrapper {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 5;
	width: 150px;
	height: auto;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 1;
	transform: translateY(0);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sticky-btn-wrapper.hidden {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.sticky-btn-wrapper {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: auto;
		transition: opacity 0.3s ease, transform 0.3s ease;
		opacity: 1;
		flex-direction: row;
		padding: 8px;
		gap: 4px;
		background: rgba(0, 0, 0, 0.40);

	}
	.fixed-contact-btn:hover img, .fixed-add-member-btn:hover img {
		transform: none;
		content: none;
	}
}


/* Fixed  Button */
.fixed-btn {
	width: 150px;
	height: auto;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 1;
	transform: translateY(0);
}

.fixed-btn.hidden {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

.fixed-btn img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.fixed-contact-btn:hover img {
	transform: scale(1.05);
	content: url('/grampus-dream/img/contact-hover.png');
}

.fixed-add-member-btn:hover img {
	transform: scale(1.05);
	content: url('/grampus-dream/img/add-member-hover.png');
}

@media screen and (max-width: 768px) {
	.fixed-btn {
		width: calc(50% - 10px);
		transition: opacity 0.3s ease, transform 0.3s ease;
		opacity: 1;
		transform: translateY(0);
	}
	.fixed-btn:hover img {
		transform: none;
		content: none;
	}
}



/* ============================================
   RESPONSIVE - TABLET & MOBILE (≤1300px)
   ============================================ */
@media screen and (max-width: 1300px) {
	
	.mobile-menu-btn {
		display: flex;
	}
	
	.mobile-menu-overlay {
		display: block;
	}

	.mobile-menu-button-wrapper{
		margin: 0 20px 20px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	
	.logo-navi,
	.navigation {
		display: none !important;
	}
	.theme-card-text h3 {
		font-size: 20px;
	}
	
	/* Contact section */
	#contact {
		flex-direction: column;
		gap: 40px;
		padding: 60px 40px;
	}
}

/* ============================================
   MOBILE ONLY (≤768px)
   ============================================ */
@media screen and (max-width: 768px) {
	
	/* Mobile Menu */
	.mobile-menu-btn {
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		gap: 5px;
	}
	
	.mobile-menu-btn span {
		width: 20px;
	}
	
	.mobile-menu-overlay {
		padding: 16px 20px;
	}
	
	.mobile-menu-header {
		padding: 0 0 0 24px;
	}
	
	.mobile-menu-logo {
		width: 100px;
	}
	
	.mobile-menu-close span {
		width: 20px;
	}
	
	.mobile-menu-nav > ul {
		padding: 0 20px 20px;
		gap: 8px;
	}
	
	.mobile-menu-nav > ul > li > a {
		font-size: 14px;
	}
	
	.mobile-menu-nav .submenu li a {
		font-size: 12px;
	}

	.mobile-menu-button-wrapper{
		margin: 0 20px 20px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	
	.mobile-menu-link-button {
		padding: 16px 20px;
		flex-wrap: wrap;
		gap: 8px;
	}
	
	.mobile-menu-link-button .contact-text-en {
		font-size: 18px;
	}
	
	.mobile-menu-link-button .contact-text-ja {
		font-size: 12px;
	}
	
	.mobile-menu-footer-logo {
		width: 140px;
	}
	
	/* Contact Section */
	#contact {
		flex-direction: column;
		gap: 0;
		padding: 80px 20px;
		height: auto;
		max-height: none;
	}
	
	@keyframes textcontactsp {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-1012px);
		}
	}
	.contact-bg-text {
    display: block;
    animation: textcontactsp 20s linear 0s infinite normal;
    width: 3036px;
    height: 80px;
    background: url(/grampus-dream/img/txt_contactus.png) repeat-x left top;
    background-size: 1012px 80px;
    will-change: transform;
    pointer-events: none;
    position: absolute;
}
	
	.contact-content {
		position: relative;
		width: 100%;
	}
	
	.contact-circle {
		width: 240px;
		height: 240px;
		margin: 0 auto;
	}
	
	.contact-circle::before {
		font-size: 48px;
	}
	
	.contact-circle::after {
		width: 48px;
		height: 48px;
	}
	
	/* Page Top Button */
	.page-top {
		bottom: 20px;
		right: 20px;
	}
	
	.page-top-content {
		width: 48px;
		height: 48px;
	}
	
	.page-top-content p {
		font-size: 10px;
		letter-spacing: 0.2px;
	}
	
	.page-top-arrow {
		width: 10px;
		height: 16.8px;
	}
	
	/* Video Modal */
	.video-modal-content {
		width: calc(100% - 32px);
		max-width: none;
		margin: 0 16px;
	}
	
	.video-close-btn {
		width: 40px;
		height: 40px;
		top: -50px;
		right: 0;
	}
	
	.video-close-btn svg {
		width: 32px;
		height: 32px;
	}
}
@media screen and (max-width: 768px) {
	.m-pickuplist .m-pickuplist_item { 
		width: 100%;
	}
}


/*▼財団ロゴ追加*/
#zaidan {
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	text-align: right;
}
#zaidan .logo {
	width: 300px;
}
@media screen and (max-width: 768px) {
	#zaidan .logo {
		width: 50%;
	}
}
/*▲財団ロゴ追加*/