@charset "UTF-8";

/* ====================================
	製品ストーリーページのスタイル

	対象 : /corporate/info/history/product/
 ==================================== */

/* ====================================
	Webフォント：Bebas Neue
 ==================================== */
@font-face {
	font-family: 'Bebas Neue';
	src: url('/assets/common/fonts/bebas-neue-latin-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ====================================
	年代別アコーディオン
 ==================================== */
.product-list {
	padding-block-end: 8rem;
}

/* 年代の行の寸法を本文幅（cqi）で決めるための基準 */
.product-list__list {
	container-type: inline-size;
}

.product-list__button {
	inline-size: 100%;
	text-align: center;
}

.product-list__year {
	display: block;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
}

/* Bebas Neue は大文字しか持たない */
.product-list__year-suffix {
	font-family: 'Source Sans 3', sans-serif;
	font-size: .7em;
	font-weight: 700;
}

.product-list__thumbnails {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin-block-start: 1.6rem;
}

.product-list__thumbnail img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--gray-300);
}

.product-list__arrow {
	display: block;
	margin: 1em auto 0;
	inline-size: 1.2rem;
	block-size: 2rem;
	background: var(--gray-700);
	mask: var(--icon-chevron-right) no-repeat center / contain;
	transform: rotate(90deg);
	transition: transform .25s ease;
}

.product-list__button[aria-expanded="true"] .product-list__arrow {
	transform: rotate(-90deg);
}

/* 開閉アニメーション */
.product-list__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .25s ease, visibility .25s;
}

/* 閉じている間は中身を描画しない */
.product-list__panel-inner {
	overflow: hidden;
	content-visibility: hidden;
	transition: content-visibility .25s allow-discrete;
}

.product-list__panel.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
}

.product-list__panel.is-open .product-list__panel-inner {
	content-visibility: visible;
}

/* ====================================
	アコーディオンの中身
 ==================================== */
.product-item {
	padding-block: 3rem;
}

.product-item__title {
	font-size: 1.8rem;
	font-weight: 500;
}

.product-item__year {
	display: block;
	font-size: 1.6rem;
}

.product-item__text p {
	margin-block-start: 2rem;
}

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

.product-item__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--gray-300);
}

/* 画像に添えるキャプション */
.product-item__figure figcaption {
	margin-block-start: .8rem;
	font-size: 1.2rem;
	line-height: 1.6;
}

/* 注釈 */
.product-item__notes {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .4rem 1rem;
	margin: 2rem 0 0;
	font-size: 1.2rem;
	line-height: 1.7;
}

.product-item__notes dt {
	font-weight: 400;
}

.product-item__notes dd {
	margin: 0;
}

/* ====================================
	768px未満専用スタイル
 ==================================== */
@media screen and (width < 768px) {
	.product-list__item {
		padding-block: 2.4rem;
		border-block-start: 1px solid var(--gray-300);
	}

	.product-list__item:last-child {
		border-block-end: 1px solid var(--gray-300);
	}

	.product-item {
		padding-inline: 5%;
		border-block-end: 1px dotted var(--gray-300);
	}

	.product-item:first-child {
		padding-block-start: 5rem;
	}

	.product-item:last-child {
		padding-block-end: 0;
		border-block-end: 0;
	}

	.product-item__text {
		font-size: 1.5rem;
	}
}

/* ====================================
	768px以上専用スタイル
 ==================================== */
@media print,
screen and (768px <=width) {
	.product-list {
		padding-block-end: 12rem;
	}

	.product-list__button {
		display: grid;
		grid-template-columns: clamp(23rem, 25cqi, 30rem) 1fr 2rem;
		gap: 0 3.5rem;
		align-items: center;
		min-block-size: 11cqi;
		padding-inline: 1.5%;
		border-block-end: 1px solid var(--gray-300);
	}

	.product-list__button:focus-visible {
		outline-offset: -2px;
	}

	.product-list__year {
		font-size: clamp(4rem, 4.6cqi, 5.5rem);
		line-height: 1.4;
		text-align: left;
		border-inline-end: 1px solid var(--gray-500);
	}

	.product-list__thumbnails {
		grid-template-columns: repeat(8, 1fr);
		margin-block-start: 0;
		padding-block: 2rem;
	}

	.product-list__thumbnail {
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.product-list__thumbnail img {
		block-size: 100%;
		object-fit: cover;
	}

	.product-list__arrow {
		margin-block-start: 0;
	}

	.product-item {
		display: flex;
		flex-wrap: wrap;
		gap: 0 5%;
		align-items: flex-start;
		padding: 6rem 3% 2rem;
	}

	.product-item:first-child {
		padding-block-start: 4rem;
	}

	.product-item:last-child {
		padding-block-end: 7rem;
		border-block-end: 1px solid var(--gray-300);
	}

	.product-item__title {
		font-size: 2.2rem;
	}

	.product-item__text {
		flex: 1;
	}

	.product-item__figure {
		margin-block-start: 1rem;
		inline-size: 35%;
	}

	.product-item__notes {
		inline-size: 100%;
		margin-block-start: 3rem;
	}
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
 ==================================== */
@media (hover:hover) and (pointer: fine) {
	.product-list__button:hover {
		background: var(--gray-100);
	}
}

/* ====================================
	モーション軽減設定
 ==================================== */
@media (prefers-reduced-motion: reduce) {

	.product-list__panel,
	.product-list__panel-inner,
	.product-list__arrow {
		transition: none;
	}
}