@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Noto+Serif+JP:wght@200..900&display=swap");
/* CSS Document */

/* PC・SP共通 */
:root {
	--gold-grad: linear-gradient(to right top, #a17a00 5%, #e9c87f 20%, #f2df91 25%, #e9c87f 30%, #a17a00 45%, #a17a00 60%, #e9c87f 70%, #f2df91 75%, #e9c87f 80%, #a17a00 100%);
	--green-grad1: linear-gradient(to bottom left, #d2e7de, #add7c5);
	--green-grad2: linear-gradient(to bottom left, #5d8875, #185b3e);
	--green-text: #003820;
	--green-grad3: linear-gradient(to top right, #003820, #005832);
	--gold-grad-2: linear-gradient(to top right, #e5d4a9 5%, #e1dc9c 30%, #f3f3c6 50%, #efe1aa 70%, #ead598 95%);
}
/* CSS Document */

.contentsTitle {
	display: none;
}
.single {
	margin: 100px 0 100px;
	font-family: "Noto Serif JP", serif;

	.pagetitle {
		margin-bottom: 60px;
	}
	.inner {
		max-width: 1040px;
		margin-inline: auto;
	}
	.pagetitle {
		margin-bottom: 60px;
	}
	.pagetitle-en {
		font-size: 150px;
		font-family: "Cormorant Garamond", serif;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1;
		/* 1. グラデーションの設定（左から右へ） */
		background-image: var(--gold-grad);

		/* 2. 背景を文字の形に切り抜く */
		-webkit-background-clip: text;
		background-clip: text;

		/* 3. 元の文字色を透明にして背景を見せる */
		-webkit-text-fill-color: transparent;
		color: transparent; /* フォールバック用 */
		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	}
	.pagetitle-ja {
		font-size: 32px;
		font-family: "Noto Serif JP", serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		color: var(--green-text);
		margin-left: 50px;
		padding-left: 74px;
		position: relative;
	}
	.pagetitle-ja::before {
		content: "";
		width: 50px;
		height: 2px;
		background: var(--gold-grad);
		position: absolute;
		top: 50%;
		left: 0;
	}

	.category {
		font-size: 32px;
		padding: 4px 20px;
		border-top: 2px solid;
		border-bottom: 2px solid;
		border-image: var(--gold-grad) 1;
		letter-spacing: 0.1em;
		display: inline-block;
		color: var(--green-text);
		font-weight: 600;
	}
	.box {
		background: var(--green-grad1);
		border-top: 2px solid;
		border-image: var(--gold-grad) 1;
		padding: 40px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		margin-top: 60px;
	}
	.box__data {
		h2 {
			font-size: 18px;
			line-height: 150%;
			background-color: #fff;
			border-radius: 16px 16px 0 16px;
			padding: 8px 10px;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
			font-family: 
			/* 1. Windows用の指定 (英語名と日本語名) */
				"UD Digital Kyokashotai NK",
				"UD デジタル 教科書体 NK",
				/* 2. Mac用の標準教科書体 (入っている人用) */ "Yu Kyokashotai",
				"YuKyokashotai",
				"游教科書体",
				/* 3. それ以外(Mac/スマホ)用のGoogle Fonts */ "Klee One",
				/* 4. 最終的なバックアップ */ sans-serif;

			/* N-B（ボールド）相当の太さを指定 */
			font-weight: 500;
		}
		h2 span {
			color: var(--green-text);
			display: block;
			padding-bottom: 4px;
			line-height: 2;
		}
		dl {
			margin-top: 24px;
			display: flex;

			flex-wrap: wrap;
			align-items: center;
			gap: 10px 16px;
		}
		dt {
			width: 80px;
			color: var(--green-text);
			font-weight: 700;
			border-radius: 20px;
			text-align: center;
			letter-spacing: 0.1em;
			padding: 4px 0 2px;
			font-size: 14px;
		}
		dd {
			width: calc(100% - 116px);
			font-size: 16px;
		}
	}
	.box__img {
		aspect-ratio: 4/3;
		height: auto;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
		}
	}
	.customertext {
		margin-top: 60px;
		padding: 20px 120px 20px 20px;
		font-size: 16px;

		position: relative;
		line-height: 150%;
		font-family: 
    /* 1. Windows用の指定 (英語名と日本語名) */
			"UD Digital Kyokashotai NK",
			"UD デジタル 教科書体 NK",
			/* 2. Mac用の標準教科書体 (入っている人用) */ "Yu Kyokashotai",
			"YuKyokashotai",
			"游教科書体",
			/* 3. それ以外(Mac/スマホ)用のGoogle Fonts */ "Klee One",
			/* 4. 最終的なバックアップ */ sans-serif;

		/* N-B（ボールド）相当の太さを指定 */
		font-weight: 500;
	}
	.customertext::before {
		content: "";
		width: 100%;
		height: 100%;
		background: var(--gold-grad-2);
		opacity: 0.5;
		border-radius: 20px 20px 0 20px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.customertext__title {
		color: #8b6126;
		display: block;
		padding-bottom: 4px;
		line-height: 2;
		font-weight: 700;
	}
	.customertext__text * + * {
		margin-top: 16px;
	}
	.customertext img {
		position: absolute;
		bottom: 0;
		right: 20px;
		width: 100px;
		aspect-ratio: 101/126;
		height: auto;
		object-fit: cover;
	}
	.btn a {
		width: 350px;
		background: var(--green-grad3);
		color: #fff;
		height: 60px;
		font-size: 20px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-radius: 5px;
		margin: 0 auto;
		text-decoration: none;
		margin-top: 40px;
	}
	@media (max-width: 750px) {
		.inner {
			margin: 40px auto 60px;
		}
		.category {
			font-size: 24px;
		}
		.container {
			padding: 16px;
			background-color: transparent;
		}
		.box {
			padding: 16px;
			grid-template-columns: 1fr;
			margin-top: 30px;
		}
		.box__data h2 {
			font-size: 15px;
		}
		.box__data dt {
			font-size: 12px;
		}
		.box__data dd {
			font-size: 14px;
		}
		.customertext {
			font-size: 14px;
			padding: 20px 20px 70px 20px;
			margin-top: 30px;
		}
		.customertext img {
			width: 60px;
		}
		.btn a {
			max-width: 300px;
			font-size: 16px;
			margin: 40px auto 0;
		}
		.pagetitle-en {
			font-size: 72px;
		}
		.pagetitle-ja {
			font-size: 20px;
			margin-left: 20px;
			padding-left: 30px;
		}
		.pagetitle-ja::before {
			width: 30px;
		}
		.pagetitle {
			margin-bottom: 60px;
		}
		.single {
			margin: 40px 0 80px;
		}
	}
}