@charset "UTF-8";

.bebas-neue {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.noto-sans {
	font-family: 'Noto Sans JP', sans-serif;
}

/* タイトル */
.product-intro {
	margin-bottom: 7rem;
}

.history {
	margin-bottom: 8rem;
	overflow: hidden;
}

.history__button {
	inline-size: 100%;

	svg {
		display: block;
		margin-top: 1em;
		place-self: center;
		inline-size: 2rem;
		block-size: 1.2rem;
		transition: transform 0.2s ease;
	}
}

.history__button[aria-expanded="true"] {
	svg {
		transform: translateY(-50%) rotate(180deg);
	}
}

.history__title {
	font-size: 3rem;
	line-height: 1;

	span {
		font-size: 2rem;
		margin-left: 0.3em;
	}
}

.thumbnail__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px;
	margin-top: 1.6rem;

	img {
		inline-size: 80px;
		border: 1px solid var(--light-gray);
	}
}

.summary {
	display: none;
}

.summary__section {
	padding: 3rem 0 3rem;
}

.summary__contents {
	margin-bottom: 2em;
}

.summary__title {
	font-size: 1.8rem;
	font-weight: 500;
	margin-bottom: 2rem;

	span {
		font-size: 1.6rem;
	}
}

.summary__image {
	margin: 2rem auto 0;
	max-inline-size: 500px;
}

.summary__image .summary__photo {
	border: 1px solid var(--light-gray);
	aspect-ratio: 750 / 530;
	overflow: hidden;
	align-self: flex-start;
}

.summary__image .summary__photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.summary__image figcaption {
	margin-top: 0.5em;
	font-size: 1.2rem;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

	.history__index:hover {
		text-decoration: none;
	}

	.history__button {
		transition: var(--hover-transition-opacity);
	}

	.history__button:hover {
		opacity: var(--hover-opacity);
	}
}

/* ====================================
	スマートフォン＆タブレット専用スタイル（～1080px）
===================================== */
@media screen and (width <1080px) {}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.history__item {
		padding: 2.4rem 0;
		border-top: 1px solid #d9d9d9;
	}

	.history__item:nth-last-child(1 of li) {
		border-bottom: 1px solid #d9d9d9;
	}

	.thumbnail__list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
	}

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

	.summary__section {
		padding-inline: 5%;
		border-bottom: 1px dotted #d9d9d9;
	}

	.summary__section:nth-child(1 of section) {
		padding-top: 5rem;
	}

	.summary__section:nth-last-child(1 of section) {
		border-bottom: none;
		padding-bottom: 0;
	}

	.summary__text {
		font-size: 1.5rem;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	/* フォーカス */
	.history__button:focus-visible {
		outline-offset: -2px;
	}

	.history {
		margin-bottom: 12rem;
	}

	.history__button {
		.grid {
			display: grid;
			align-items: center;
			grid-template-columns: clamp(230px, 25vw, 300px) 1fr 2rem;
			gap: 0 35px;
			border-bottom: 1px solid #d9d9d9;
			min-height: clamp(80px, 10vw, 130px);
			height: auto;
		}

		svg {
			align-self: center;
			justify-self: center;
			inline-size: 2rem;
			block-size: 1.2rem;
			margin-top: 0;
			transition: transform 0.2s ease;
		}
	}

	.history__title {
		font-size: clamp(4rem, 4.5vw, 5.5rem);
		line-height: 1.4;
		text-align: left;
		border-right: 1px solid #959595;
	}

	.thumbnail__list {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: 4px;
		padding: 20px 0;
		margin-top: 0;
	}

	.thumbnail__list li {
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.thumbnail__list img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.summary__section {
		padding: 6rem 3% 0;
	}

	.summary__section:nth-child(1 of section) {
		padding-top: 4rem;
	}

	.summary__section:nth-last-child(1 of section) {
		padding-bottom: 7rem;
		border-bottom: 1px solid #d9d9d9;
	}

	.summary__contents {
		display: flex;
		gap: 0 5%;
		align-items: flex-start;
	}

	.summary__title {
		font-size: 2.2rem;
	}

	.summary__text {
		flex: 1 0;
	}

	.summary__image {
		inline-size: 35%;
		margin-top: 1em;
	}
}

/* ====================================
	大画面PC専用スタイル（1080px～）
===================================== */
@media screen and (1080px <=width) {

	/* タイトル */
	.product-intro {
		margin-bottom: 8rem;
	}
}

/* ====================================
	大画面PC専用スタイル（1200px～）
===================================== */
@media screen and (1200px <=width) {}