/* ==========================================================================
   Dr.STONE展 特設サイト - top.css
   トップページ専用（key visual / INTRO / NEWS / ABOUT / TICKET / CONTENTS / GOODS）
   ========================================================================== */

/* ==========================================================================
   key visual
   ========================================================================== */
.key-visual {
	position: relative;
	line-height: 0;
	z-index: 10;
	overflow: hidden;
}

.key-visual-image {
	width: 100%;
	height: auto;
}

.key-visual-image {
	transform-origin: center center;
	will-change: transform;
	animation: kv-zoom 6s ease-out both;
}

@keyframes kv-zoom {
	from {
		transform: scale(1.12);
	}

	to {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.key-visual-image {
		animation: none;
		transform: none;
	}
}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro {

	padding-bottom: 190px;

	@media (max-width: 900px) {
		padding-bottom: 60px;
	}
}

.intro .section-background {
	display: none;
}

.deco-hex-intro {
	top: 4%;
	left: 38%;
	width: clamp(180px, 18vw, 280px);

	@media (max-width: 600px) {
		width: 120px;
		left: 4%;
		top: 2%;
	}
}

.chemical-formula-intro {
	top: -2%;
	right: 0;
	width: 400px;

	@media (max-width: 900px) {
		width: 40%;
		right: -2%;
	}

	@media (max-width: 600px) {
		width: 140px;
		top: 0;
		right: 2%;
	}
}

.chemical-formula-intro-bottom {
	left: 0;
	bottom: 6%;
	z-index: 2;
	width: 400px;

	@media (max-width: 900px) {
		width: 40%;
		left: -2%;
	}
}

.intro-content {
	max-width: 1600px;
	margin: 0 auto;
	padding: 90px var(--edge-pad) 0;

	@media (max-width: 600px) {
		padding-top: 60px;
	}
}

.intro-heading img {
	width: 700px;

	@media (max-width: 1500px) {
		width: 42vw;
	}
}

.intro-body {
	width: 710px;
	margin-top: 80px;

	@media (max-width: 1500px) {
		width: 54%;
	}

	@media (max-width: 900px) {
		max-width: 100%;
		width: 100%;
		margin-top: 40px;
	}
}

.intro-sub-heading {
	width: 180px;
	margin-bottom: 24px;

	@media (max-width: 1500px) {
		width: 19vw;
	}
}

.intro-text {
	font-size: clamp(14px, 1.2vw, 16px);
	font-weight: 700;
}

.intro-chara {
	width: 800px;
	bottom: 0;
	right: calc(50vw - 800px);

	@media (max-width: 1500px) {
		width: 55vw;
		right: -3vw;
	}

	@media (max-width: 900px) {
		position: static;
		width: 90vw;
		margin: -30px auto 0;
	}
}

.intro-chara {
	--bg-image: url("../img/common/chara/chara-1.webp");
	aspect-ratio: 941 / 979;
}

.intro::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	background: var(--color-gray-band);
	z-index: 1;
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news {
	background: var(--color-gray-band);
	position: relative;
	z-index: 1;
	overflow: visible;
	padding-top: 40px;
	padding-bottom: 260px;
	padding-left: 60px;

	@media (max-width: 1500px) {
		padding-bottom: 15vw;
	}

	@media (max-width: 900px) {
		padding-bottom: 10vw;
		padding-top: 0;
		padding-left: 20px;
	}
}

.news-arrow {
	top: 4%;
	right: 6%;
}

.news-heading img {
	width: 670px;

	@media (max-width: 1500px) {
		width: 40vw;
	}
}

.news-content-area {
	position: relative;
	z-index: 2;
	background: var(--color-black);
	margin-top: -20px;
	overflow: hidden;
	background-image: url(../img/common/bg/bg-building.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;

	@media (max-width: 900px) {
		margin-left: 20px;
	}

	@media (max-width: 600px) {
		margin-left: 20px;
		margin-right: 20px;
	}
}

.news .news-content-area .section-background {
	opacity: .5;
	mix-blend-mode: screen;
}

.news-bg-image {
	position: absolute;
	left: -6%;
	top: -6%;
	width: 62%;
	max-width: 900px;
	height: auto;
}

.news-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 64px);
	padding: 80px clamp(20px, 4vw, 60px) 80px;

	@media (max-width: 900px) {
		flex-direction: column;
		padding: 60px clamp(20px, 4vw, 60px) 80px;
	}

	@media (max-width: 600px) {
		padding: 36px 20px 44px;
		gap: 24px;
	}
}

.news-sub-heading {
	flex: 0 0 auto;
	margin: 0;
	width: 180px;

	@media (max-width: 1500px) {
		width: 17vw;
	}
}


.news-right-column {
	flex: 1 1 420px;

	@media (max-width: 900px) {
		width: 100%;
	}

	@media (max-width: 600px) {
		width: 100%;
	}
}

.news-list-container {
	background: var(--color-maroon);
	position: relative;
	margin-bottom: 60px;
}

.news-list-container:before {
	position: absolute;
	content: "";
	bottom: -10px;
	right: -10px;
	width: 100%;
	height: 100%;
	background: #902c27;
	z-index: -1;
}

.news-list {
	height: 280px;
	overflow-y: scroll;
	padding: 10px clamp(20px, 4vw, 56px);

	@media (max-width: 600px) {
		padding: 24px 20px;
	}
}

.news-item {
	padding: 18px;
}

.news-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 24px;
	color: var(--color-white);
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .35);

	@media (max-width: 600px) {
		gap: 5px;
		flex-direction: column;
		align-items: flex-start;
	}
}

.news-item:hover {
	background: rgba(255, 0, 0, 0.3);
}

.news-item:last-child a {
	border-bottom: 0;
	padding-bottom: 0;
}

.news-date {
	font-size: clamp(14px, 1.6vw, 18px);
	min-width: 130px;
}

.news-text {
	font-size: clamp(14px, 1.6vw, 18px);
}

.official-x-link {
	display: block;
	width: fit-content;
	margin: 32px 0 0 auto;
	padding-right: 40px;
}

.official-x-link a {
	position: relative;
	background: transparent;
}

.official-x-link::after {
	background: linear-gradient(90deg, var(--color-orange), #ffd400);
}

.official-x-link img {
	width: clamp(220px, 22vw, 348px);
}

.news-chara {
	width: 400px;

	@media (max-width: 900px) {
		position: absolute;
	}
}

.news-chara-gen {
	left: clamp(40px, 6vw, 110px);
	bottom: -150px;
	width: 340px;

	@media (max-width: 1500px) {
		width: 22vw;
		left: 0;
		right: auto;
		bottom: -5vw;
	}

	@media (max-width: 900px) {
		width: 32vw;
		bottom: -12vw;
	}

	@media (max-width: 600px) {
		bottom: -28vw;
		left: -2vw;
	}
}

.news-chara-suika {
	left: clamp(240px, 20vw, 380px);
	bottom: -150px;
	width: 300px;

	@media (max-width: 1500px) {
		width: 20vw;
		left: 16%;
		right: auto;
		bottom: -8vw;
	}

	@media (max-width: 900px) {
		width: 30vw;
		right: 6%;
		bottom: -22vw;
	}

	@media (max-width: 600px) {
		bottom: -32vw;
	}
}

.news-chara-gen {
	--bg-image: url("../img/common/chara/chara-2.webp");
	aspect-ratio: 368 / 617;
}

.news-chara-suika {
	--bg-image: url("../img/common/chara/chara-3.webp");
	aspect-ratio: 311 / 509;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
	background: #1c2b20;
	padding: 100px 0 160px;

	@media (max-width: 900px) {
		padding: 70px 0 60px;
	}
}

.about .section-background {
	overflow: hidden;
}

.section-background-track {
	position: absolute;
	inset: 0;
	background-image: url("../img/common/bg/slider-anime-cut-long.jpg");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
	/* 横スクロール（ループ） */
	animation: bg-scroll 40s linear infinite;
}

@keyframes bg-scroll {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -1000px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-background-track {
		animation: none;
		background-position: 0 0;
	}
}

.about-content {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 var(--edge-pad);
}

.about-heading {
	width: 800px;
	margin-left: auto;



	@media (max-width: 1500px) {
		width: 50vw;
	}
}

.about-body {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 60px);
	margin-top: 24px;

	@media (max-width: 900px) {
		flex-direction: column;
	}
}

.about-panel {
	flex: 1 1 480px;
	max-width: 1000px;
	background: rgba(255, 255, 255, .96);
	padding: 40px clamp(24px, 4vw, 56px) 44px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .35);

	@media (max-width: 900px) {
		width: 100%;
		padding: 28px 22px 32px;
	}
}

.about-sub-heading {
	width: 180px;
	margin-bottom: 40px;

	@media (max-width: 1500px) {
		width: 17vw;
	}
}

.about-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #c7b299;
	font-size: 18px;
	font-weight: 700;

	@media (max-width: 1200px) {
		grid-template-columns: 110px 1fr;

		font-size: 16px;
	}

	@media (max-width: 600px) {
		grid-template-columns: 1fr;
		gap: 4px;
		font-size: 14px;
	}
}

.about-row:first-child {
	padding-top: 0;
}

.about-row dt {
	font-weight: 700;

	@media (max-width: 600px) {
		font-size: 13px;
	}
}

.about-note {
	font-size: 13px;
	color: #555;
}

.about-note-lists {
	margin-top: 5px;
	font-size: 13px;
	color: #555;
	display: grid;
	grid-template-columns: 8em 1fr;
}

.about-chara-group {
	position: relative;
	flex: 0 0 auto;
	width: clamp(300px, 30vw, 460px);
	aspect-ratio: 460 / 700;

	@media (max-width: 900px) {
		width: 60%;
		margin: 0 auto;
		aspect-ratio: 460 / 400;
	}
}


.about-chara-ryusui {
	top: 0;
	left: 0;
	width: 375px;

	@media (max-width:1500px) {
		width: 25vw;
		left: inherit;
		right: inherit;
		left: 0;
	}

	@media (max-width: 900px) {
		width: 30vw;
		top: 0;
	}
}

.about-chara-ukyo {
	right: -80px;
	bottom: -200px;
	width: 350px;

	@media (max-width:1500px) {
		width: 22vw;
		right: -4%;
	}

	@media (max-width: 900px) {
		width: 28vw;
		top: 6vw;
	}
}

.about-chara-ryusui {
	--bg-image: url("../img/common/chara/chara-4.webp");
	aspect-ratio: 375 / 688;
}

.about-chara-ukyo {
	--bg-image: url("../img/common/chara/chara-5.webp");
	aspect-ratio: 326 / 623;
}

/* ==========================================================================
   TICKET
   ========================================================================== */
.ticket {
	background: var(--color-black);
	padding: 110px 0 200px;

	@media (max-width: 600px) {
		padding: 80px 0 150px;
	}

	@media (max-width: 500px) {
		padding: 20vw 0 26vw;
	}
}

.ticket .section-background {
	background: var(--color-black);
}

.ticket-arrow {
	top: 22%;
	left: 20%;
	filter: brightness(.6);
}

.chemical-formula-ticket {
	top: 10px;
	right: -2%;
	width: 400px;

	@media (max-width: 900px) {
		width: 40%;
		right: inherit;
		left: 10%;


	}
}

.chemical-formula-ticket-bottom {
	left: 0;
	bottom: 0;
	width: 400px;

	@media (max-width: 900px) {
		width: 40%;
		left: inherit;
		right: 2%;
		transform: scaleX(-1);
	}
}

.ticket-content {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--edge-pad);
	color: var(--color-white);
}

.ticket-chara-group {
	position: absolute;
	left: -140px;
	top: 0;
	width: clamp(220px, 20vw, 320px);

	@media (max-width: 1600px) {
		left: 0;
	}

	@media (max-width: 900px) {
		display: flex;
		gap: 16px;
		position: static;
		width: auto;
		margin: 0 auto 28px;
	}

	@media (max-width: 600px) {
		gap: 12px;
		margin: 0 auto;

	}
}

.ticket-chara {
	position: absolute;
}

.ticket-chara-tsukasa {
	left: clamp(-20px, -1.5vw, 0px);
	top: -340px;
	width: 340px;

	@media (max-width: 1600px) {
		width: 23vw;
		left: -10vw;
		top: -18vw;
	}

	@media (max-width: 1500px) {
		left: -5vw;
	}

	@media (max-width: 1400px) {
		left: -2vw;
	}

	@media (max-width: 900px) {
		width: 30vw;
		top: -18vw;
	}

	@media (max-width: 600px) {
		top: -24vw;
		left: 0;
	}
}

.ticket-chara-hyoga {
	left: clamp(70px, 8vw, 120px);
	top: -130px;
	width: 280px;

	@media (max-width: 1600px) {
		width: 20vw;
		left: 0vw;
		top: -8vw;
	}

	@media (max-width: 1500px) {
		left: 1vw;
	}

	@media (max-width: 1400px) {
		left: 4vw;
	}

	@media (max-width: 900px) {
		width: 26vw;
		top: -8vw;
		left: 14vw;
	}

	@media (max-width: 600px) {
		top: -18vw;
		left: 20vw;
	}
}

.ticket-heading {
	margin: 0 auto 60px;

	@media (max-width: 900px) {
		margin: 0 auto 20px;
	}
}

.ticket-heading {
	width: 740px;
	margin: 0 auto;

	@media (max-width: 1500px) {
		width: 44vw;
	}

	@media (max-width: 900px) {
		width: 45%;
		margin-left: 55%;
	}
}

.ticket-sub-heading {
	width: 180px;
	margin: 0;

	@media (max-width: 1500px) {
		width: 17vw;
	}
}

.ticket-lead {
	width: 640px;
	margin: 20px auto 40px;

	@media (max-width: 1500px) {
		width: 45vw;
	}

	@media (max-width: 900px) {
		width: 60%;
		margin-left: 40%;
		margin-bottom: 0;
	}

	@media (max-width: 600px) {
		width: 100%;
		height: auto;
		margin-left: 0;
		margin: 18vw auto 6vw;
		max-width: 460px;
		position: relative;
		z-index: 40;
	}
}

.ticket-table-block {
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}

.ticket-chara-tsukasa {
	--bg-image: url("../img/common/chara/chara-6.webp");
	aspect-ratio: 390 / 745;
}

.ticket-chara-hyoga {
	--bg-image: url("../img/common/chara/chara-7.webp");
	aspect-ratio: 324 / 619;
}

.ticket-table-head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;

	@media (max-width: 600px) {
		margin-bottom: 0;
	}
}

.ticket-table-wrap {
	overflow-x: auto;
}

.ticket-table {
	width: 100%;
	min-width: 620px;
	background: var(--color-white);
	color: var(--color-text);
	text-align: center;
	font-size: clamp(13px, 1.5vw, 20px);
	font-weight: 800;
}

.ticket-table th,
.ticket-table td {
	border: 2px solid #000;
	padding: 14px 10px;
}

.ticket-table thead th {
	background: var(--color-maroon);
	font-weight: 700;
	color: #fff;
}

.ticket-table tbody th {
	background: #f4f4f2;
	font-weight: 700;
	text-align: left;
	padding-left: clamp(12px, 2vw, 28px);
}

.ticket-table tbody tr:nth-child(even) td,
.ticket-table tbody tr:nth-child(even) th {
	background: #eceae4;
}

.ticket-table tbody td {
	font-size: clamp(15px, 1.5vw, 20px);
	font-weight: 700;
}

.ticket-table-wrap--pc {
	@media (max-width: 800px) {
		display: none;
	}
}

.ticket-table-wrap--sp {
	display: none;

	@media (max-width: 800px) {
		display: block;
	}
}

.ticket-table--sp {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 13px;

	+.ticket-table--sp {
		margin-top: 24px;
	}

	caption {
		padding-bottom: 4px;
		font-size: 16px;
		font-weight: 800;
		text-align: left;
		color: #fff;
	}

	th,
	td {
		padding: 12px 6px;
	}

	thead th:first-child {
		width: 40%;
	}

	tbody th {
		padding: 12px 6px;
		text-align: center;
	}

	tbody td {
		font-size: clamp(15px, 4.5vw, 18px);
		white-space: nowrap;
	}
}

.ticket-note {
	max-width: 1440px;
	margin: 40px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	background: rgba(85, 24, 26, 0.651);

	border: 2px solid var(--color-maroon);
	padding: clamp(20px, 3vw, 32px);

	@media (max-width: 900px) {
		justify-content: center;
	}

	@media (max-width: 600px) {
		flex-direction: column;
		align-items: flex-start;
	}
}

.ticket-note-text {
	flex: 1 1 320px;
	font-weight: 600;
	font-size: 18px;

	@media (max-width: 1500px) {
		font-size: 16px;
	}

	@media (max-width: 900px) {
		font-size: 14px;
	}

	@media (max-width: 600px) {
		flex: 1 1 auto;
	}
}

.ticket-note-text strong {
	text-decoration: underline;
	text-decoration-color: var(--color-orange);
	text-decoration-thickness: 3px;
}

.ticket-note-image {
	flex: 0 0 380px;
	aspect-ratio: 380 / 260;
	background: #7a7a7a;

	@media (max-width: 900px) {
		flex: 0 0 280px;
	}

	@media (max-width: 600px) {
		width: 100%;
		flex-basis: auto;
	}
}

.ticket-notice-container {
	max-width: 1440px;
	margin: 28px auto 0;
	font-size: 12px;
	color: #cfcfcf;
}

.ticket-button {
	display: flex;
	width: fit-content;
	margin: 56px auto 0;

	@media (max-width: 600px) {
		margin-top: 40px;
	}
}

.ticket-button img {
	width: clamp(220px, 20vw, 337px);
}

.ticket-button a {
	@media (max-width: 600px) {
		padding: 16px 36px;
	}
}

/* ==========================================================================
   CONTENTS
   ========================================================================== */
.contents {

	padding: 0 0 360px;

	@media (max-width:1500px) {
		padding: 0 0 240px;
	}

	@media (max-width:900px) {
		padding: 0 0 200px;
	}

	@media (max-width:600px) {
		padding: 0 0 120px;
	}
}

.contents .section-background {
	display: none;
}

.contents-heading {
	position: absolute;
	top: -150px;
	left: 10px;
	z-index: 3;

	@media (max-width:900px) {
		margin-top: 80px;
		width: 10%;
	}

	@media (max-width: 600px) {
		left: 8px;
		width: 13%;
	}
}

.contents-heading {
	width: 170px;
	height: auto;

	@media (max-width: 1500px) {
		width: 10.4vw;
	}

	@media (max-width: 900px) {
		width: 10vw;
	}

}

.deco-hex-contents {
	top: -1.5%;
	left: 20%;
}

.contents-content {
	margin: 0 auto;
	max-width: 1000px;

	@media (max-width: 1500px) {
		max-width: 65vw;
		margin: 0 0 0 16vw;
	}

	@media (max-width:900px) {
		width: calc(88% - 20px);
		max-width: calc(88% - 20px);
		margin: 0 20px 0 12%;
	}

	@media (max-width:600px) {
		width: calc(84% - 10px);
		max-width: calc(84% - 10px);
		margin: 0 20px 0 16%;
	}
}

.contents-intro {
	max-width: 620px;
}

.contents-sub-heading {
	width: 180px;
	margin-top: 160px;
	margin-bottom: 60px;

	@media (max-width: 1500px) {
		width: 17vw;
	}

	@media (max-width:900px) {
		margin-top: 80px;
	}

	@media (max-width:600px) {
		margin-bottom: 20px;
	}
}

.contents-lead {
	width: 800px;

	@media (max-width: 1500px) {
		width: 50vw;
	}

	@media (max-width: 600px) {
		width: 70vw;
	}
}

.contents-map {
	margin-top: 40px;
	background: #7a7a7a;
	position: relative;

	@media (max-width:600px) {
		margin-top: 10px;
	}
}

.contents-map img {
	width: 100%;
	height: auto;
	display: block;
}

.contents-chara-group {
	position: absolute;
	margin-top: 30px;
	height: clamp(280px, 26vw, 420px);
	right: 0;
	top: -160px;
	z-index: -1;
}

.contents-chara {
	position: absolute;
	top: 0;
}

.contents-chara-zeno {
	left: -100px;
	width: 300px;

	@media (max-width: 1500px) {
		width: 20vw;
		left: -8vw;
		top: 5vw;
	}

	@media (max-width: 900px) {
		width: 26vw;
		left: inherit;
		top: 0vw;
		right: 4vw;
	}
}

.contents-chara-stanley {
	left: 100px;
	top: 300px;
	width: 300px;

	@media (max-width: 1700px) {
		left: 0;
	}

	@media (max-width: 1500px) {
		width: 22vw;
		top: 20vw;
	}

	@media (max-width: 900px) {
		width: 28vw;
		left: inherit;
		top: 8vw;
		right: -8vw;
	}
}

.contents-chara-zeno {
	--bg-image: url("../img/common/chara/chara-8.webp");
	aspect-ratio: 292 / 558;
}

.contents-chara-stanley {
	--bg-image: url("../img/common/chara/chara-9.webp");
	aspect-ratio: 320 / 612;
}

.contents-list {
	width: 100%;
	margin-top: 120px;

	@media (max-width: 600px) {
		padding-left: 0;
		margin-top: 40px;
	}
}

.contents-item {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	align-items: center;
	margin-top: 70px;

	@media (max-width: 600px) {
		flex-direction: column !important;
		margin-top: 40px;
		align-items: stretch;
	}
}

.contents-item:first-child {
	margin-top: 0;
}

.contents-item-reverse {
	flex-direction: row;
}

.contents-item-image {
	width: 55%;
	flex: 0 1 auto;

	@media (max-width: 600px) {
		width: 100%;
		flex-basis: auto;
	}
}

.contents-item-image img {
	width: 100%;
	height: auto;
}

.contents-item-image {
	overflow: hidden;
	background: #000;

	img {
		display: block;
		width: 100%;
		height: auto;
	}

	&.is-reveal-ready img {
		filter: brightness(0.05);
		transform: scale(1.06);
		transition:
			filter 2.4s ease-in-out 0.4s,
			transform 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
	}

	&.is-reveal-ready.is-visible img {
		filter: brightness(1);
		transform: scale(1);
	}

	@media (prefers-reduced-motion: reduce) {
		&.is-reveal-ready img {
			filter: none;
			transform: none;
			transition: none;
		}
	}
}

.contents-item-body {
	width: 45%;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	padding: 0 5%;
	font-size: clamp(14px, 1.2vw, 16px);

	@media (max-width: 600px) {
		width: 100%;
		flex-basis: auto;
		margin-top: 20px;
	}
}

.contents-item-heading {
	width: 500px;
	margin-bottom: 18px;

	@media (max-width: 1200px) {
		width: 100%;
	}

	@media (max-width: 600px) {
		width: 70%;
		margin-bottom: 10px;
	}
}

.contents-item-text {
	font-size: clamp(13px, 1vw, 15px);
}

/* ==========================================================================
   GOODS
   ========================================================================== */
.goods {
	background: var(--color-maroon-deep);
	padding: 90px 0 90px;
	position: relative;
}

.goods .section-background {
	overflow: hidden;
}

.goods .section-background-track {
	background-image: url("../img/common/bg/slider-anime-cut2-2.jpg");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center;
}

.goods::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(60, 5, 8, .4);
	mix-blend-mode: multiply;
	z-index: 1;
}

.goods-content {
	margin: 0 auto;
	padding: 0 var(--edge-pad);
	color: var(--color-white);
}

.goods-heading {
	position: absolute;
	top: -170px;
	left: 0;

	@media (max-width: 1500px) {
		top: -10.7vw;
	}
}

.goods-heading {
	width: 870px;

	@media (max-width: 1500px) {
		width: 54vw;
	}
}

.goods-sub-heading {
	width: 140px;
	position: absolute;
	top: -75px;
	left: 940px;

	@media (max-width: 1500px) {
		left: 56vw;
		width: 13vw;
		top: -7vw;
	}

	@media (max-width: 600px) {
		margin-left: 0;
		margin-top: 1vw;
	}
}

.goods-panel {
	background: rgba(255, 255, 255, .97);
	color: var(--color-text);
	max-width: 940px;
	margin: 60px auto;
	padding: clamp(28px, 4vw, 60px);
	text-align: center;

	@media (max-width: 600px) {
		padding: 24px 18px;
	}
}

.goods-lead {
	width: 90%;
	margin: 0 auto 40px;
}

.goods-image-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto 40px;
}

.goods-button {
	text-align: center;
}

.goods-button img {
	width: clamp(150px, 15vw, 201px);
}