/*
Theme Name: GRAPHITE DESIGN LP
Theme URI: https://lp.gd-inc.co.jp/
Author: GRAPHITE DESIGN LP
Description: GRAPHITE DESIGN LP テーマ
Version: 1.0
Update URI: false
*/

/* Base settings */
@layer base {
	:root {
		--color-background: #f6f6f6;
		--color-white: #ffffff;
		--color-black: #111111;
		--color-gray: #292929;
		--color-red: #940405;
		--color-green: #304c22;
		--font-jp: "Noto Sans JP", sans-serif;
		--font-en: Anton, sans-serif;
		--horizontal-padding: 24px;
	}

	@media (max-width: 390px) {
		:root {
			--horizontal-padding: 16px;
		}
	}

	:root {
		interpolate-size: allow-keywords;
		scroll-behavior: smooth;
		-webkit-tap-highlight-color: transparent;
	}

	*,
	::before,
	::after {
		margin: 0;
		box-sizing: border-box;
		min-width: 0;
	}

	html,
	body {
		width: 100%;
		overflow-x: hidden;
	}

	body {
		font-family: var(--font-jp);
		color: var(--color-black);
		overflow-wrap: anywhere;
		background-color: var(--color-background);
		-webkit-text-size-adjust: none;
		line-break: strict;
	}

	img,
	video {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	iframe,
	video {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	button {
		font: unset;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: filter 0.3s ease-out;
	}
	a:hover {
		filter: brightness(1.2) saturate(1.2);
	}

	/* ボディテキスト */
	.gd-bodytext {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.7;
		letter-spacing: 0.02em;
	}
	@media (min-width: 700px) {
		.gd-bodytext {
			font-size: 18px;
		}
	}

	/* ハイライトテキスト */
	.gd-highlighttext {
		display: grid;
		gap: 4px;
		justify-items: start;
	}
	.gd-highlighttext > span {
		display: inline-block;
		padding: 2px 0 4px 8px;
		color: var(--color-white);
		font-size: min(8.1vw, 32px);
		font-weight: 900;
		line-height: 1;
		letter-spacing: 0.03em;
		background-color: var(--color-black);
	}
	.gd-find .gd-highlighttext > span {
		padding-inline: 8px;
	}
	.gd-find .gd-highlighttext .tsume {
		letter-spacing: -0.4em;
	}
	@media (min-width: 700px) {
		.gd-highlighttext {
			gap: 15px;
		}
		.gd-highlighttext > span {
			padding: 9px 0 15px 15px;
			font-size: 50px;
		}
		.gd-intro .gd-highlighttext > span > span {
			display: inline-block;
			margin-inline-end: -0.2em;
		}
		.gd-find .gd-highlighttext > span {
			padding-inline: 20px;
		}
		.gd-find .gd-highlighttext > span:first-child {
			padding-inline: 0 30px;
		}
		.gd-find .gd-highlighttext > span > span {
			display: inline-block;
		}
	}

	/* 見出しテキスト */
	.gd-headingtext {
		display: grid;
		gap: 8px;
		align-content: start;
		font-size: 24px;
		font-weight: bold;
		line-height: 1.5;
	}
	.gd-headingtext span {
		display: block;
		font-family: var(--font-en);
		font-weight: 400;
		font-size: 40px;
		line-height: 1;
		letter-spacing: 0.02em;
		text-transform: capitalize;
	}
	.gd-headingtext span svg {
		width: 19px;
		height: 29px;
	}
	@media (max-width: 374px) {
		.gd-headingtext span {
			zoom: 0.8;
		}
	}
	@media (min-width: 700px) {
		.gd-headingtext {
			gap: 2.34vw 2.83vw;
			align-items: end;
		}
		.gd-headingtext span {
			font-size: 11.23vw;
		}
		.gd-headingtext span svg {
			width: 6.35vw;
			height: 9.57vw;
		}
	}
	@media (min-width: 1024px) {
		.gd-headingtext {
			gap: 24px 29px;
			align-items: end;
		}
		.gd-headingtext span {
			font-size: 115px;
		}
		.gd-headingtext span svg {
			width: 65px;
			height: 98px;
		}
	}

	/* レイアウトグリッド */
	.gd-grid {
		--inner-padding: 0;
		--inner: minmax(0, 1fr);
		display: grid;
		grid-template-columns: var(--horizontal-padding) var(--inner-padding) var(--inner) var(--inner-padding) var(--horizontal-padding);
		align-content: start;
		width: 100%;
		max-width: 1440px;
		margin-inline: auto;
	}
	.gd-grid > * {
		grid-column: 3;
	}
	@media (min-width: 700px) {
		.gd-grid {
			--inner-padding: 8.3vw;
		}
	}
	@media (min-width: 1024px) {
		.gd-grid {
			--horizontal-padding: 60px;
		}
	}
	@media (min-width: 1288px) {
		.gd-grid {
			--horizontal-padding: minmax(0, 1fr);
			--inner: 1000px;
		}
	}
	@media (min-width: 1440px) {
		.gd-grid {
			--inner-padding: 120px;
		}
	}

	/* Notched box */
	.notched-box {
		clip-path: polygon(var(--cut-size-h, 13%) 0%, 100% 0%, 100% calc(100% - var(--cut-size-v, 31%)), calc(100% - var(--cut-size-h, 13%)) 100%, 0% 100%, 0% var(--cut-size-v, 31%));
	}

	/* SPのみ表示 */
	@media (min-width: 700px) {
		.sp-only {
			display: none;
		}
	}

	/* PCのみ表示 */
	.pc-only {
		display: none;
	}
	@media (min-width: 700px) {
		.pc-only {
			display: initial;
		}
	}

	/* Hover Effect */
	.imgscale-container {
		overflow: hidden;
	}
	.imgscale-container > *,
	.imgscale-container::before {
		transition: scale 0.3s ease-out;
	}
	a:hover .imgscale-container > *,
	a:hover .imgscale-container::before {
		scale: 1.1;
	}

	/* Screen Reader only */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

/* Header */
.gd-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 51px;
	z-index: 1000;
	background-color: var(--color-black);
}
.gd-header nav {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-auto-flow: column;
	align-items: center;
	padding-left: var(--horizontal-padding);
}
.gd-header nav .logo {
	width: 160px;
}
.gd-header nav .logo img {
	vertical-align: initial;
}

html {
	scroll-padding: 51px 0 0 0;
}
body {
	padding: 51px 0 0 0;
}

@media (max-width: 390px) {
	.gd-header nav .logo {
		zoom: 0.85;
	}
}

@media (min-width: 900px) {
	.gd-header {
		height: 93px;
	}
	.gd-header nav {
		padding-left: var(--horizontal-padding);
	}
	.gd-header nav .logo {
		width: 300px;
	}

	html {
		scroll-padding: 93px 0 0 0;
	}
	body {
		padding: 93px 0 0 0;
	}
}
@media (min-width: 1024px) {
	.gd-header nav .logo {
		width: 340px;
	}
}

/* Link button */
.gd-link-button {
	display: grid;
	justify-items: center;
	align-content: center;
	height: 51px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	background-color: #d9d9d9;
	transition: color 0.3s ease-out, background-color 0.3s ease-out;
}
.gd-link-button:hover {
	filter: none;
	color: #d9d9d9;
	background-color: var(--color-black);
}
.gd-link-button span {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.15;
	letter-spacing: 0.03em;
}
.gd-link-button.base {
	border-left: 1px solid #d9d9d9;
}
.gd-link-button.demoday {
	display: none;
}

@media (min-width: 900px) {
	.gd-link-button {
		height: 93px;
		padding: 2px 55px 0;
		font-size: 16px;
	}
	.gd-link-button span {
		font-size: 29px;
	}
	.gd-link-button.base {
		width: 306px;
	}
	.gd-link-button.demoday {
		display: grid;
		width: 227px;
		color: var(--color-white);
		background-color: var(--color-red);
	}

	.gd-link-button.demoday:hover {
		color: var(--color-red);
		background-color: var(--color-white);
	}
}

/* Badge */
.gd-badge {
	position: fixed;
	right: 8px;
	bottom: 8px;
	z-index: 1000;
	display: block;
	width: 114px;
}
@media (min-width: 700px) {
	.gd-badge {
		width: 224px;
		right: 13px;
		bottom: 6px;
	}
}

/* Intro */
.gd-intro {
	position: relative;
	padding-block-end: 88px;
	background-image: url(assets/img/intro-background.webp);
	background-repeat: no-repeat;
	background-size: cover;
}
.gd-intro .gd-grid {
	gap: 40px 0;
}
.gd-intro .gd-highlighttext {
	margin-block-start: -16px;
	position: relative;
	z-index: 10;
}
.gd-intro .gd-bodytext {
	display: grid;
	gap: 20px;
	position: relative;
	z-index: 10;
}
@media (min-width: 700px) {
	.gd-intro {
		padding-block-end: 330px;
	}
	.gd-intro .gd-grid {
		gap: 43px 0;
	}
	.gd-intro .gd-highlighttext {
		margin-block-start: -36px;
	}
}

/* SideText in Intro */
.gd-intro .gd-sidetext {
	position: absolute;
	top: 10px;
	right: 0;
	width: 38px;
	z-index: 5;
}
.gd-intro .gd-sidetext img:last-child {
	margin-block-start: 14px;
}
@media (min-width: 500px) {
	.gd-intro .gd-sidetext {
		width: 7.8vw;
	}
}
@media (min-width: 1024px) {
	.gd-intro .gd-sidetext {
		position: static;
	}
	.gd-intro .gd-sidetext img {
		width: 114px;
	}
	.gd-intro .gd-sidetext img:first-child {
		position: absolute;
		top: -82px;
		right: 0;
	}
	.gd-intro .gd-sidetext img:last-child {
		position: absolute;
		top: 374px;
		left: -6px;
		margin-block-start: 0;
	}
}

/* Splash in Intro */
.gd-splash01 {
	position: absolute;
	top: -218px;
	left: -60px;
	width: 344px;
	z-index: 1;
}
.gd-splash02 {
	display: none;
}
.gd-splash03 {
	display: none;
}
@media (min-width: 1024px) {
	.gd-splash01 {
		top: -240px;
		left: -300px;
		width: 700px;
	}
	.gd-splash02 {
		display: block;
		position: absolute;
		bottom: -227px;
		right: -367px;
		z-index: 1;
		width: 892px;
	}
	.gd-splash03 {
		display: block;
		position: absolute;
		bottom: -32%;
		left: -50px;
		z-index: 1;
		width: 665px;
		mix-blend-mode: multiply;
		filter: brightness(0.6) saturate(0.8);
		transform: matrix(-0.99, -0.17, -0.17, 0.99, 0, 0);
	}
}

/* Statement */
.gd-statement {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 680px;
	margin-block-start: -20px;
	margin-inline: auto;
	padding-inline: var(--horizontal-padding);
	padding-block-end: 60px;
}
.gd-statement video {
	width: 100%;
	height: auto;
	margin-block-end: 22px;
}
.gd-statement .gd-bodytext {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 8px 16px;
	align-items: center;
}
.gd-statement .gd-bodytext strong {
	line-height: 1.8;
}
.gd-statement .gd-bodytext p {
	grid-column: span 2;
	font-size: 12px;
	font-weight: 500;
}
@media (min-width: 700px) {
	.gd-statement {
		margin-block-start: -200px;
		padding-block-end: 102px;
	}
	.gd-statement .gd-bodytext {
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: 8px 28px;
	}
	.gd-statement .gd-bodytext img {
		grid-row: span 2;
	}
	.gd-statement .gd-bodytext p {
		font-size: 14px;
		grid-column: 2;
	}
}

/* Splash in Statement */
.gd-splash04 {
	position: absolute;
	bottom: -185px;
	right: -100px;
	width: 336px;
	z-index: 1;
	mix-blend-mode: multiply;
	filter: brightness(0.05) saturate(1.2);
	transform: matrix(-0.99, -0.17, -0.17, 0.99, 0, 0);
}
@media (min-width: 1024px) {
	.gd-splash04 {
		position: absolute;
		bottom: -306px;
		right: -580px;
		width: 691px;
		filter: brightness(0.4) saturate(1.2);
		transform: rotate(-38.58deg);
	}
}

/* Why */
.gd-why {
	position: relative;
	padding-block: 40px;
	color: var(--color-white);
	background-color: #0c2200;
	background-image: url(assets/img/why-background.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: 30%;
}
.gd-why .gd-grid {
	gap: 32px 0;
}
.gd-why .gd-headingtext {
	z-index: 10;
}
@media (min-width: 700px) {
	.gd-why {
		padding-block: 100px 105px;
	}
}
@media (min-width: 1288px) {
	.gd-why .gd-grid {
		gap: 45px 0;
	}
	.gd-why .gd-headingtext {
		grid-template-columns: auto 1fr;
	}
}

/* Reasons Accordion in Why */
.gd-reasons {
	position: relative;
	z-index: 10;
	display: grid;
	gap: 16px;
}
.gd-reasons details {
	color: var(--color-black);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.03em;
	background-color: var(--color-white);
}
.gd-reasons details summary {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"point icon"
		"title title";
	gap: 8px;
	align-items: center;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}
.gd-reasons details summary::-webkit-details-marker {
	display: none;
}
.gd-reasons details summary .notched-box {
	grid-area: point;
	justify-self: start;
	padding: 7px 12px 5px;
	color: var(--color-white);
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.03em;
	background-color: var(--color-green);
}
.gd-reasons details summary span:nth-child(2) {
	grid-area: title;
}
.gd-reasons details > .content {
	overflow: hidden;
}
.gd-reasons details > .content > .content-inner {
	padding: 0 24px 16px;
}
@media (min-width: 1024px) {
	.gd-reasons details {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.8;
	}
	.gd-reasons details summary {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "point title icon";
		gap: 30px;
		font-size: 24px;
		line-height: 1.7;
	}
	.gd-reasons details summary .notched-box {
		padding: 7px 26px 6px;
		font-size: 20px;
	}
}

/* Reasons Accordion Icon in Why */
.gd-reasons details summary::before,
.gd-reasons details summary::after {
	content: "";
	display: block;
	grid-area: icon;
	justify-self: center;
	width: 32px;
	height: 1px;
	background-color: currentColor;
}
.gd-reasons details summary::after {
	width: 24px;
	rotate: 90deg;
}
.gd-reasons details.is-open summary::after {
	width: 0;
}
@media (min-width: 1024px) {
	.gd-reasons details summary::before,
	.gd-reasons details summary::after {
		width: 60px;
	}
	.gd-reasons details summary::after {
		width: 40px;
	}
}

/* School */
.gd-school {
	color: var(--color-white);
	background-color: var(--color-black);
	background-image: url(assets/img/school-background-pattern.png);
	background-size: 94px;
}
.gd-school .gd-grid {
	gap: 31px 0;
}
.gd-school .gd-grid > * {
	grid-column: 2 / -2;
}

@media (min-width: 700px) {
	.gd-school {
		padding-block-end: 86px;
	}
	.gd-school .gd-grid {
		gap: 0;
	}
	.gd-school .gd-bodytext {
		line-height: 1.8;
		letter-spacing: 0;
	}
}

/* Heading in School */
.gd-school .gd-grid > .gd-headingtext {
	z-index: 10;
	grid-row: 1;
	padding-block-start: 36px;
}

@media (min-width: 700px) {
	.gd-school .gd-grid > .gd-headingtext {
		padding-block-start: 8.6vw;
	}
}
@media (min-width: 1024px) {
	.gd-school .gd-grid > .gd-headingtext {
		padding-block-start: 89px;
	}
}

/* Cards in School */
.gd-school .gd-grid > .gd-cards {
	grid-column: 1 / -1;
	gap: 24px 0;
}
.gd-cards > .gd-card {
	grid-column: 2 / -1;
}

.gd-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	max-width: 973px;
}

.gd-card .number {
	padding: 0.475em 0.66em;
	color: #517040;
	font-family: var(--font-en);
	font-weight: 400;
	font-size: min(3vw, 55px);
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background-color: #e3e3e3;
	writing-mode: vertical-lr;
}

.gd-card .title {
	position: absolute;
	left: 0;
	bottom: 10px;
	z-index: 5;
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: 35px;
	padding-inline-start: 9px;
	width: 100%;
}
.gd-card .title > span {
	padding: 0.06em 0.25em 0.1875em;
	font-size: min(4vw, 32px);
	font-weight: 700;
}
.gd-card .title::after {
	content: "";
	display: block;
	width: max(27px, 6.8vw);
	height: max(27px, 6.8vw);
	background-image: url(./assets/img/lesson-btn.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.gd-card img {
	aspect-ratio: 2.12/1;
	object-fit: cover;
	grid-area: 1 / 2;
}

.gd-card .coming-soon {
	z-index: 1;
	grid-area: 1 / 2;
	place-self: center;
	margin-inline-start: -1.285em;
	color: var(--color-white);
	font-size: min(3.5vw, 40px);
	font-family: var(--font-en);
	font-weight: 400;
	line-height: 1.63;
}

@media (min-width: 700px) {
	.gd-school .gd-grid > .gd-cards {
		gap: 45px 0;
		margin-block-start: -30px;
	}
	.gd-cards > .gd-card {
		grid-column: 2 / -2;
	}
	.gd-cards > .gd-card:nth-child(2) {
		justify-self: end;
	}

	.gd-card .number {
		padding: 27px 21px 0 15px;
		font-size: min(5.5vw, 55px);
	}
	.gd-card .title {
		bottom: 29px;
		justify-content: space-between;
		padding-inline: 24px 37px;
	}
	.gd-card .title > span {
		padding: 1px 23px 3px 20px;
		font-size: min(3.2vw, 32px);
		line-height: 1.7;
	}
	.gd-card .title::after {
		width: 69px;
		height: 69px;
	}
	.gd-card img {
		aspect-ratio: 1.93/1;
	}
	.gd-card .coming-soon {
		margin: 0;
		font-size: min(4vw, 40px);
	}
}

@media (min-width: 700px) and (max-width: 1023px) {
	.gd-cards > .gd-card {
		grid-column: 2 / -1;
	}
}

/* Point in School */
.gd-school .gd-grid > .gd-point {
	grid-column: 1 / -1;
}

.gd-point {
	display: grid;
	margin-block-start: -12px;
}
.gd-point > * {
	grid-area: 1 / 1;
}

.gd-point .gd-bodytext {
	display: grid;
	margin-inline-start: -6.11vw;
	font-size: 3.05vw;
	line-height: 1.8;
}
.gd-point .gd-bodytext::before {
	content: url(./assets/img/school-polygon-sp.svg);
	grid-area: 1 / 1;
	width: 77.12vw;
	height: 53.44vw;
	mix-blend-mode: overlay;
}
.gd-point .gd-bodytext span {
	grid-area: 1 / 1;
	padding: 8.14vw 0 0 14.76vw;
	z-index: 10;
}
.gd-point img {
	place-self: end;
	width: 61.58vw;
	margin-inline-end: -12.72vw;
	padding-block-start: 6.11vw;
}

@media (min-width: 700px) {
	.gd-school .gd-grid > .gd-point {
		grid-column: 2 / -2;
		grid-row: 1;
		justify-self: end;
	}
	.gd-point {
		width: 106.64vw;
		margin-block-start: 0;
		margin-inline-end: -16vw;
	}
	.gd-point .gd-bodytext {
		justify-self: auto;
		margin-block-start: 20vw;
		margin-inline: 0;
		width: 60.94vw;
		height: 32.91vw;
		font-size: 1.76vw;
	}
	.gd-point .gd-bodytext .sp-only {
		display: none;
	}
	.gd-point .gd-bodytext::before {
		content: url(./assets/img/school-polygon.svg);
		width: 60.94vw;
		height: 32.91vw;
	}
	.gd-point .gd-bodytext span {
		grid-area: 1 / 1;
		padding: 11.33vw 8.01vw 8.98vw 8.4vw;
		z-index: 10;
	}
	.gd-point img {
		width: 67.77vw;
		margin-inline-end: 0;
		padding-block-start: 0;
	}
}

@media (min-width: 1024px) {
	.gd-school .gd-grid > .gd-point {
		grid-column: 2 / -1;
		grid-row: 1;
		justify-self: end;
	}

	.gd-point {
		width: 1090px;
		margin-block-start: 0;
		margin-inline-end: -125px;
	}
	.gd-point .gd-bodytext {
		justify-self: auto;
		margin-block-start: 175px;
		margin-inline: -20px 0;
		width: 624px;
		height: 337px;
		font-size: 18px;
	}
	.gd-point .gd-bodytext .sp-only {
		display: none;
	}

	.gd-point .gd-bodytext::before {
		content: url(./assets/img/school-polygon.svg);
		width: 624px;
		height: 337px;
	}
	.gd-point .gd-bodytext span {
		grid-area: 1 / 1;
		padding: 116px 82px 92px 86px;
		z-index: 10;
	}
	.gd-point img {
		width: 694px;
		margin-inline-end: 0;
		padding-block-start: 0;
	}
}

/* Find */
.gd-find {
	position: relative;
	padding-block: 40px 57px;
}
.gd-find .gd-grid {
	gap: 24px 0;
}
.gd-find .md-only {
	display: none;
}
.gd-find :is(.gd-highlighttext, .gd-bodytext, .gd-findinfo) {
	position: relative;
	z-index: 10;
}
@media (min-width: 700px) and (max-width: 1100px) {
	.gd-find .md-only {
		display: block;
	}
}

@media (min-width: 700px) {
	.gd-find {
		padding-block: 148px 186px;
	}
	.gd-find .gd-grid {
		gap: 40px 0;
	}
}

/* Information in Find */
.gd-findinfo {
	display: grid;
	gap: 24px;
}
.gd-findinfo a {
	display: grid;
	height: 160px;
	padding: 3px 3px 0 0;
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	background-color: #4a4a4a;
}
.gd-findinfo a.notched-box {
	--cut-size-h: 29px;
	--cut-size-v: 25px;
}
.gd-findinfo a span {
	font-family: var(--font-en);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
}
.gd-findinfo div {
	grid-area: 1 / 1;
	display: grid;
}
.gd-findinfo .text {
	place-self: center;
	justify-items: center;
	gap: 4px;
	z-index: 5;
}
.gd-findinfo .imgscale-container::before {
	content: "";
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.gd-findinfo a.asakusa .imgscale-container::before {
	background-image: url(assets/img/find-fittingbase-sp.webp);
}
.gd-findinfo a.asakusa .text img {
	width: 234px;
}
.gd-findinfo a.demoday .imgscale-container::before {
	background-image: url(assets/img/find-demoday.webp);
}
.gd-findinfo a.shop .imgscale-container::before {
	background-image: url(assets/img/find-shop.webp);
}

@media (min-width: 700px) {
	.gd-findinfo {
		grid-template-columns: 1fr 1fr;
		gap: min(3.2vw, 40px);
	}
	.gd-findinfo a {
		height: 260px;
		padding: 0;
		font-size: 24px;
	}
	.gd-findinfo a.notched-box {
		--cut-size-h: 40px;
		--cut-size-v: 40px;
	}
	.gd-findinfo a span {
		font-size: 40px;
	}
	.gd-findinfo a.asakusa {
		grid-column: span 2;
		height: 320px;
	}
	.gd-findinfo a.asakusa .imgscale-container::before {
		background-image: url(assets/img/find-fittingbase.webp);
	}
	.gd-findinfo a.asakusa .text img {
		width: 450px;
	}
	.gd-findinfo a.asakusa span {
		font-size: 40px;
		line-height: 1.632;
	}
}

/* Splash in Find */
.gd-splash05 {
	position: absolute;
	top: -43px;
	right: -68px;
	z-index: 1;
	width: 336.08px;
	mix-blend-mode: multiply;
	filter: brightness(0.8) saturate(1.2);
	transform: matrix(-0.99, -0.17, -0.17, 0.99, 0, 0);
}
@media (min-width: 700px) {
	.gd-splash05 {
		top: -5px;
		right: max(-16vw, -235px);
		width: min(55.7vw, 691px);
		transform: rotate(-38.58deg);
	}
}

@media (min-width: 700px) {
	.gd-find::after {
		position: absolute;
		top: 0;
		right: 0;
		content: "";
		width: 400px;
		height: 50px;
		background-color: var(--color-background);
		z-index: 2;
	}
}

/* SideText in Find */
.gd-find .gd-sidetext {
	position: absolute;
	top: 33px;
	left: 0;
	width: 35px;
	z-index: 5;
}
@media (min-width: 700px) {
	.gd-find .gd-sidetext {
		top: 23px;
		width: 7.2vw;
	}
}
@media (min-width: 1024px) {
	.gd-find .gd-sidetext {
		top: 23px;
		width: 101px;
	}
}

/* Review */
.gd-review {
	padding-block: 48px 70px;
	color: var(--color-white);
	background-color: var(--color-gray);
	background-image: url(assets/img/review-background.webp);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
.gd-review .gd-grid {
	position: relative;
	gap: 24px 0;
}
.gd-review .gd-grid > * {
	grid-column: 2 / -2;
}
.gd-review .gd-grid > *:not(.gd-splash06) {
	z-index: 10;
}
@media (min-width: 700px) {
	.gd-review {
		padding-block: 114px 80px;
	}
	.gd-review .gd-grid {
		gap: 64px 0;
	}
	.gd-review .gd-headingtext {
		grid-template-columns: auto auto;
		justify-content: end;
		align-items: center;
	}
}

/* Instagram in Review */
.gd-instagram #sb_instagram {
	background-color: transparent !important;
}
.gd-instagram #sb_instagram.sbi_col_3 #sbi_images {
	gap: 8px !important;
	padding-block-end: 24px;
}
@media (min-width: 700px) {
	.gd-instagram #sb_instagram.sbi_col_3 #sbi_images {
		gap: 28px !important;
		padding-block-end: 64px;
	}
}

/* More button */
.gd-morebtn,
#sb_instagram #sbi_load .sbi_load_btn {
	justify-self: center;
	padding: 8px 40px;
	color: var(--color-green) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	background-color: var(--color-white) !important;
	border: 1px solid var(--color-green);
	border-radius: 40px;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s;
}
.gd-morebtn .text,
#sb_instagram .sbi_load_btn .sbi_btn_text {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: ". icon";
	gap: 16px;
	align-items: center;
}
@media (min-width: 700px) {
	.gd-morebtn,
	#sb_instagram #sbi_load .sbi_load_btn {
		gap: 40px;
		padding: 16px 80px;
		font-size: 18px;
	}
}

:is(.gd-morebtn, #sb_instagram #sbi_load .sbi_load_btn):not(:disabled):hover {
	color: var(--color-white) !important;
	background-color: var(--color-green) !important;
	border-color: var(--color-white);
	filter: none;
}

:is(.gd-morebtn .text, #sb_instagram .sbi_load_btn .sbi_btn_text)::before,
:is(.gd-morebtn .text, #sb_instagram .sbi_load_btn .sbi_btn_text)::after {
	content: "";
	display: block;
	grid-area: icon;
	justify-self: center;
	width: 24px;
	height: 1px;
	background-color: currentColor;
}
:is(.gd-morebtn .text, #sb_instagram .sbi_load_btn .sbi_btn_text)::after {
	width: 16px;
	rotate: 90deg;
}

#sb_instagram #sbi_load .sbi_loader {
	background-color: #82c76b !important;
}

.mb-loader {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.5);
	background-color: #82c76b !important;
	border-radius: 100%;
	animation: 1s ease-in-out infinite mb-scaleout;
}

@keyframes mb-scaleout {
	0% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}

/* Splash in Review */
.gd-splash06 {
	position: absolute;
	top: -110px;
	left: -160px;
	z-index: 1;
	width: 627px;
}
@media (min-width: 700px) {
	.gd-splash06 {
		top: -150px;
		left: -400px;
		width: 894px;
	}
}

/* Line-up */
.gd-lineup {
	position: relative;
	padding-block: 53px 37px;
}
.gd-lineup .gd-grid {
	position: relative;
	z-index: 10;
	gap: 24px 0;
}
.gd-lineup .gd-grid > * {
	grid-column: 2 / -2;
}
@media (min-width: 700px) {
	.gd-lineup .gd-grid > .gd-brands {
		grid-column: 1 / -1;
	}
	.gd-lineup {
		padding-block: 102px 16.65px;
	}
	.gd-lineup .gd-grid {
		gap: 62px 0;
	}
}
@media (min-width: 1288px) {
	.gd-lineup .gd-headingtext {
		grid-template-columns: auto 1fr;
	}
}

/* Brands in Line-up */
.gd-brands {
	display: grid;
	gap: 24px 0;
}
.gd-brand {
	transition: none;
}
.gd-brand h3 {
	display: grid;
	height: 160px;
	overflow: clip;
	position: relative;
}
.gd-brand h3::before {
	position: absolute;
	top: 0;
	left: 0;
	grid-area: 1 / 1;
	content: "";
	width: 100%;
	height: 100%;
	background-size: auto 160px;
	background-position: center;
	background-repeat: no-repeat;
}
.gd-brand.tourad h3::before {
	background-color: #e9e1da;
	background-image: url(assets/img/brands/brand-tourad-sp.png);
}
.gd-brand.antigravity h3::before {
	background-color: #dbe7ec;
	background-image: url(assets/img/brands/brand-antigravity-sp.png);
}
.gd-brand.raune h3::before {
	background-color: #d5d5d5;
	background-image: url(assets/img/brands/brand-raune-sp.png);
}
.gd-brand.chichibu h3::before {
	background-color: #eaecd5;
	background-image: url(assets/img/brands/brand-chichibu-sp.png);
}
.gd-brand:hover h3 {
	filter: brightness(0.8) saturate(1.5);
}

.gd-brand p {
	margin-block-start: 8px;
	font-size: 14px;
	line-height: 1.7;
}

@media (min-width: 700px) {
	.gd-brands {
		grid-template-columns: 1fr 1fr;
		gap: 24px 2px;
	}
	.gd-brand h3 {
		height: 360px;
	}
	.gd-brand h3::before {
		width: 100%;
		height: 100%;
		background-size: auto 360px;
	}
	.gd-brand.tourad h3::before {
		background-image: url(assets/img/brands/brand-tourad.png);
	}
	.gd-brand.antigravity h3::before {
		background-image: url(assets/img/brands/brand-antigravity.png);
	}
	.gd-brand.raune h3::before {
		background-image: url(assets/img/brands/brand-raune.png);
	}
	.gd-brand.chichibu h3::before {
		background-image: url(assets/img/brands/brand-chichibu.png);
	}

	.gd-brand p {
		margin-block-start: 16px;
		padding-inline: 39px;
		letter-spacing: 0.04em;
	}
}

@media (min-width: 1024px) {
	.gd-brands {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Splash in Line-Up */
.gd-splash07 {
	position: absolute;
	top: 10px;
	right: -96px;
	z-index: 1;
	width: 301.81px;
	mix-blend-mode: multiply;
	filter: brightness(0.8) saturate(1.2);
	transform: rotate(-38.58deg);
}
@media (min-width: 700px) {
	.gd-splash07 {
		top: 60px;
		right: -260px;
		width: 691px;
	}
}
@media (min-width: 1024px) {
	.gd-splash07 {
		top: 52px;
		right: -86px;
		width: 691px;
	}
}

/* Recommended */
.gd-recommended {
	padding-block: 120px 52px;
	background-color: #0c2200;
	background-image: url(assets/img/recommended-separator.webp), url(assets/img/recommended-background.webp);
	background-size: 100%, cover;
	background-position: top center, center;
	background-repeat: no-repeat, no-repeat;
}
.gd-recommended .gd-grid > * {
	grid-column: 2 / -2;
}
.gd-recommended .gd-grid > .notched-box {
	--cut-size-h: 40px;
	--cut-size-v: 33px;
	position: relative;
	display: grid;
	gap: 24px;
	margin-inline: -7px;
	padding: 40px 30.5px;
	background-color: var(--color-white);
}
.gd-recommended hgroup {
	z-index: 10;
	display: grid;
	gap: 16px;
}
.gd-recommended .gd-highlighttext span {
	padding-inline: 8px;
	font-size: 16px;
}
.gd-recommended .gd-splash02 {
	display: block;
	position: absolute;
	top: -105px;
	right: -60px;
	z-index: 1;
	opacity: 0.36;
}

@media (min-width: 700px) {
	.gd-recommended {
		padding-block: 280px 80px;
	}
	.gd-recommended .gd-grid > .notched-box {
		--cut-size-h: 80px;
		--cut-size-v: 81px;
		gap: 40px;
		margin-inline: 0;
		padding: 117px 80px 80px;
	}
	.gd-recommended hgroup {
		gap: 40px;
	}
	.gd-recommended .gd-highlighttext span {
		padding-inline: 16px;
		font-size: 32px;
	}
	.gd-recommended .gd-splash02 {
		top: -220px;
		right: -70px;
		width: 892px;
	}
}

@media (min-width: 700px) and (max-width: 800px) {
	/* macOSでの改行を防ぐ */
	.gd-recommended .gd-highlighttext span {
		letter-spacing: 0;
	}
	.gd-recommended .gd-grid > .notched-box {
		padding-inline: 60px;
	}
}

/* Recommended Cards in Recommended */
.gd-reccards {
	--cut-size-h: 13%;
	--cut-size-v: 31%;
	z-index: 10;
	display: grid;
	gap: 24px;
}
.gd-reccard {
	display: grid;
	grid-template-areas:
		"date icon"
		"title title"
		"body body";
	grid-template-columns: 1fr auto;
	gap: 4px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--color-black);
}
.gd-reccard:hover {
	background-color: #e4ffda;
	filter: none;
}

.gd-reccard::after {
	content: url(assets/img/outer-link.svg);
	grid-area: icon;
	width: 16px;
	height: 16px;
	margin-block-start: -2px;
}
.gd-reccard .notched-box {
	grid-area: date;
	justify-self: start;
	padding: 6px 12px 5px;
	color: var(--color-white);
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.03em;
	background-color: var(--color-green);
}
.gd-reccard .notched-box:empty::before {
	content: "0000.00.00";
	color: transparent;
}
.gd-reccard h3 {
	grid-area: title;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}
.gd-reccard p {
	grid-area: body;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

@media (min-width: 700px) {
	.gd-reccard {
		grid-template-areas:
			"date title icon"
			". body icon";
		grid-template-columns: auto 1fr auto;
		gap: 8px 30px;
	}
	.gd-reccard::after {
		align-self: center;
		width: 24px;
		height: 24px;
	}
	.gd-reccard .notched-box {
		padding: 8px 20px;
		font-size: 14px;
	}
	.gd-reccard h3 {
		font-size: 18px;
		line-height: 1.7;
	}
	.gd-reccard p {
		max-width: 750px;
		font-size: 14px;
		line-height: 1.8;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Footer */
.gd-footer {
	padding-block: 80px;
	color: var(--color-white);
	background-color: var(--color-black);
}
.gd-footer > .gd-grid > * {
	grid-column: 2 / -2;
}

.gd-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	width: min(100%, 350px);
	justify-self: center;
}
.gd-footer ul {
	padding: 0;
	list-style: none;
}

.gd-footer .logo {
	display: block;
	width: 345px;
	margin-block-end: 16px;
}
.gd-footer p {
	margin-block-start: 8px;
	font-size: 14px;
	font-weight: 700;
}
.gd-footer p span {
	font-family: var(--font-en);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

.gd-footer .links {
	display: grid;
	gap: 24px;
}
.gd-footer .brands {
	display: flex;
	gap: 16px;
	justify-content: space-between;
}
.gd-footer .brands a {
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: underline;
}
.gd-footer .brands li:last-child a {
	font-family: var(--font-jp);
	font-weight: 700;
}
.gd-footer .socials {
	display: flex;
	gap: 24px;
	justify-self: center;
}
.gd-footer .socials img {
	width: 40px;
	height: 40px;
}

.gd-footer .gd-link-button {
	justify-self: center;
	width: max-content;
	height: auto;
	padding: 23px 55px 21px;
	font-size: 14px;
	background-color: var(--color-green);
	transition: color 0.3s ease-out, background-color 0.3s ease-out;
}
.gd-footer .gd-link-button:hover {
	color: var(--color-green);
	background-color: var(--color-white);
}
.gd-footer .gd-link-button span {
	font-size: 24px;
}

.gd-footer .copyright {
	justify-self: center;
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
}

@media (max-width: 374px) {
	.gd-footer-grid {
		zoom: 0.8;
	}
}

@media (min-width: 1024px) {
	.gd-footer {
		padding-block: 160px;
	}
	.gd-footer-grid {
		grid-template-columns: auto 1fr;
		gap: 40px 80px;
		width: 100%;
	}

	.gd-footer .logo {
		width: 395px;
		margin-block-end: 26px;
	}

	.gd-footer .brands {
		gap: 40px;
		justify-self: end;
	}
	.gd-footer .socials {
		justify-self: end;
	}

	.gd-footer .gd-link-button {
		grid-column: 1 / -1;
		padding-block: 19px 17px;
		font-size: 16px;
	}
	.gd-footer .gd-link-button span {
		font-size: 29px;
	}

	.gd-footer .copyright {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1288px) {
	.gd-footer-grid {
		grid-template-columns: auto 1fr max-content;
		gap: 40px 80px;
	}

	.gd-footer .gd-link-button {
		grid-column: auto;
	}
}

/* Fitting Base Coming Soon*/
.fb-coming-soon {
	position: relative;
	pointer-events: none;
}
.fb-coming-soon::before {
	content: "Coming Soon...";
	position: absolute;
	inset: 0;
	z-index: 10;
	margin: auto;
	padding: 0 8px;
	width: max-content;
	height: max-content;
	color: var(--color-white);
	font-family: var(--font-en);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.03;
	background-color: var(--color-black);
	rotate: -10deg;
}

.gd-header .gd-link-button.base.fb-coming-soon {
	font-size: 12px;
}
.gd-header .gd-link-button.base.fb-coming-soon span {
	opacity: 0.2;
}

.gd-findinfo .fb-coming-soon::before {
	font-size: 40px;
}
.gd-findinfo .fb-coming-soon .text {
	opacity: 0.2;
}
@media (min-width: 700px) {
	.gd-findinfo .fb-coming-soon::before {
		font-size: 64px;
	}
}
@media (min-width: 900px) {
	.gd-header .gd-link-button.base.fb-coming-soon {
		font-size: 20px;
	}
}