@charset "UTF-8";

/*
 * 受賞・第三者評価ページ（page-awards.php）。
 *
 * メインビジュアルと CTA は page-first.css を流用しているため、
 * functions.php で 'first' を extends に指定している。
 *
 * 黄色い装飾（稲穂）は全体で共通の画像を1組だけ使い、
 * .p-awards__laurel で大きさをそろえている。
 *
 * モバイルファースト。PC は 840px 以上。
 */

.p-awards {
	--aw-tint: #fdf3ef;    /* 薄いピンクの背景 */
	--aw-line: #e4ded9;    /* 区切り線 */
	--aw-dot: #b5aca7;     /* 年の丸 */
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   黄色い装飾（稲穂）。全体で共通
   -------------------------------------------------------------------------- */
.p-awards__laurel {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	line-height: 0;
}

.p-awards__laurel .img-slot--empty,
.p-awards__laurel img {
	width: 100%;
	height: auto;
	/* 画像が未配置のときも同じ大きさの場所を取る */
	aspect-ratio: 24 / 44;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   1. 2019年から8年連続 優秀賞受賞
   -------------------------------------------------------------------------- */

.p-awards__highlight {
	padding: 48px 0 56px;
	background-color: var(--aw-tint);
}

.p-awards__highlight .c-lead {
	margin-top: 18px;
	text-align: center;
}

.p-awards__highlight-list {
	display: grid;
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.p-awards__highlight-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.p-awards__highlight-body {
	display: block;
	text-align: center;
}

.p-awards__highlight-number {
	display: block;
	font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary);
}

.p-awards__highlight-unit {
	font-family: sans-serif;
	font-family: inherit;
	font-size: 30px;
	font-weight: 700;
	color: #1a1311;
}

.p-awards__highlight-unit {
	font-size: 16px;
}

.p-awards__highlight-label {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-body);
}

.p-awards__highlight-note {
	margin: 20px 0 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--color-text-muted);
	text-align: right;
}

/* ==========================================================
   受賞記録：縦タイムライン
   ========================================================== */

   .p-awards__timeline {
	margin-top: 32px;
}

/* グループ */
.p-awards__group {
	position: relative;
}

.p-awards__group + .p-awards__group {
	margin-top: 28px;
}

/* オレンジ丸・灰色丸をつなぐ縦線 */
.p-awards__group::before {
	position: absolute;
	top: 32px;
	bottom: 8px;
	left: 20px;
	width: 1px;
	background-color: var(--aw-line);
	content: "";
	z-index: 0;
}

/* グループ見出し */
.p-awards__group-title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 13px 14px 13px 38px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	background-color: var(--aw-tint);
	border-radius: 6px;
}

/* グループ見出しのオレンジ丸 */
.p-awards__group-title::before {
	position: absolute;
	top: 50%;
	left: 14.5px;
	width: 11px;
	height: 11px;
	margin-top: -5px;
	background-color: var(--color-primary);
	border-radius: 50%;
	content: "";
	z-index: 2;
}

/* 年 */
.p-awards__year {
	position: relative;
	padding: 20px 0 4px 22px;
	margin-left: 16px;
}

/* 年ごとの個別線は使わない */
.p-awards__year:not(:last-child)::before {
	display: none;
}

/* 年 */
.p-awards__year-label {
	position: relative;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* 年の灰色丸 */
.p-awards__year-label::before {
	position: absolute;
	top: 50%;
	left: -22px;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	background-color: var(--aw-dot);
	border-radius: 50%;
	content: "";
	z-index: 2;
}

/* 年の内容 */
.p-awards__year-body {
	margin-top: 12px;
}

/* 受賞行 */
.p-awards__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

/* 受賞行が複数ある場合 */
.p-awards__row + .p-awards__row {
	margin-top: 14px;
}

/* メダル */
.p-awards__medal {
	width: 48px;
	line-height: 0;
}

.p-awards__medal .img-slot--empty,
.p-awards__medal img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* 受賞一覧 */
.p-awards__items {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 受賞1件 */
.p-awards__item {
	display: flex;
	align-items: center;
	justify-content: none;
	gap: 8px;
}

/* 受賞内容 */
.p-awards__item-body {
	display: block;
	text-align: center;
}

/* 受賞タイトル */
.p-awards__item-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #6C635F;
}

/* 受賞サブテキスト */
.p-awards__item-sub {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: #6C635F;
}

.p-awards__records {
	padding: 60px 0;
}
/* --------------------------------------------------------------------------
   3. 第三者認証・資格
   -------------------------------------------------------------------------- */
.p-awards__certs {
	padding: 48px 0 56px;
	background-color: var(--aw-tint);
}

.p-awards__cert-list {
	display: grid;
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.p-awards__cert {
	padding: 22px 20px 24px;
	background-color: var(--color-bg);
	border-radius: 8px;
}

.p-awards__cert-head {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	align-items: center;
	gap: 35px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--aw-line);
}

.p-awards__cert-image {
	width: 150px;
	line-height: 0;
}

.p-awards__cert-image .img-slot--empty,
.p-awards__cert-image img {
	width: 100%;
	height: auto;
	/* 画像が未配置のときも同じ大きさの場所を取る */
	aspect-ratio: 40 / 25;
	object-fit: contain;
}

.p-awards__cert-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.p-awards__cert-org {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-body);
}

.p-awards__cert-rows {
	margin: 16px 0 0;
}

.p-awards__cert-row {
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.8;
}

.p-awards__cert-label {
	flex: 0 0 84px;
	margin: 0;
	color: var(--color-text-body);
}

.p-awards__cert-value {
	margin: 0;
	font-weight: 700;
}

.p-awards__cert-text {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   4. メディア実績
   -------------------------------------------------------------------------- */
.p-awards__media {
	padding: 48px 0 64px;
	background-color: var(--color-bg);
}

.p-awards__media .c-lead {
	margin-top: 14px;
	text-align: center;
}

.c-lead {
	font-size: 14px;
}

.p-awards__media-list {
	display: grid;
	gap: 20px;
	margin: 32px auto 0;
	padding: 0;
	list-style: none;
	max-width: 80vw;
}

.p-awards__media-item {
	display: flex;
}

/* カード全体がリンク */
.p-awards__media-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background-color: var(--color-bg);
	border: 1px solid var(--aw-line);
	border-radius: 8px;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s linear, border-color .2s linear;
}

/* --- ホバー：少し浮き上がって影が付く --- */
@media (hover: hover) {

	.p-awards__media-card:hover {
		transform: translateY(-5px);
		border-color: var(--color-primary);
		box-shadow: 0 12px 26px rgba(26, 19, 17, .12);
	}

	.p-awards__media-card:hover .p-awards__media-image .img-slot--empty,
	.p-awards__media-card:hover .p-awards__media-image img {
		transform: scale(1.05);
	}

	.p-awards__media-card:hover .p-awards__media-title {
		color: var(--color-primary);
	}
}

.p-awards__media-card:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.p-awards__media-image {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.p-awards__media-image .img-slot--empty,
.p-awards__media-image img {
	width: 100%;
	height: auto;
	/* 画像が未配置のときも同じ大きさの場所を取る */
	aspect-ratio: 320 / 200;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.p-awards__media-body {
	display: block;
	padding: 16px 18px 20px;
}

.p-awards__media-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	transition: color .2s linear;
}

.p-awards__media-meta {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.p-awards__media-text {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   動きを減らす設定への配慮
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.p-awards__media-card,
	.p-awards__media-image .img-slot--empty,
	.p-awards__media-image img {
		transition: none;
	}

	.p-awards__media-card:hover {
		transform: none;
	}

	.p-awards__media-card:hover .p-awards__media-image .img-slot--empty,
	.p-awards__media-card:hover .p-awards__media-image img {
		transform: none;
	}
}

/* ==========================================================================
   PC（840px 以上）
   ========================================================================== */
@media (min-width: 840px) {

	/* --- 1. 8年連続 --- */
	.p-awards__highlight {
		padding: 80px 0 70px;
	}

	.p-awards__highlight .l-section {
		max-width: 1080px;
	}

	.p-awards__highlight-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		margin-top: 44px;
	}

	.p-awards__laurel {
		width: 24px;
	}

	.p-awards__highlight-item {
		gap: 14px;
	}

	.p-awards__highlight-number {
		font-size: 36px;
	}

	.p-awards__highlight-unit {
		font-size: 20px;
	}

	.p-awards__highlight-label {
		font-size: 14px;
	}

	/* --- 2. 受賞記録 --- */

	.p-awards__item {
		justify-content: center;
	}

	.p-awards__records {
		padding: 90px 0 100px;
	}

	.p-awards__records .l-section {
		max-width: 1085px;
	}

	.p-awards__timeline {
		margin-top: 50px;
	}

	.p-awards__group + .p-awards__group {
		margin-top: 40px;
	}

	.p-awards__group-title {
		padding: 16px 18px 16px 46px;
		font-size: 17px;
	}

	.p-awards__group-title::before {
		left: 20px;
		width: 14px;
		height: 14px;
		margin-top: -7px;
	}

	.p-awards__year {
		display: grid;
		grid-template-columns: 150px minmax(0, 1fr);
		align-items: start;
		gap: 20px;
		padding: 30px 0 10px 38px;
	}

	.p-awards__year:not(:last-child)::before {
		top: 40px;
		left: 6px;
	}

	.p-awards__year-label {
		font-size: 17px;
	}

	.p-awards__year-label::before {
		position: absolute;
		top: 50%;
		left: -22px;
		width: 9px;
		height: 9px;
		margin-top: -4px;
		background-color: var(--aw-dot);
		border-radius: 50%;
		content: "";
		z-index: 2;
	}

	.p-awards__year-body {
		margin-top: 0;
	}

	.p-awards__row {
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 14px;
	}

	.p-awards__row + .p-awards__row {
		margin-top: 18px;
	}

	.p-awards__medal {
		width: 56px;
	}

	/* PC では同じ行の受賞を横に並べる */
	.p-awards__items {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	.p-awards__item-title {
		font-size: 16px;
	}

	.p-awards__item-sub {
		font-size: 16px;
	}

	/* --- 3. 第三者認証 --- */
	.p-awards__certs {
		padding: 90px 0 100px;
	}

	.p-awards__certs .l-section {
		max-width: 1085px;
	}

	.p-awards__cert-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
		margin-top: 48px;
	}

	.p-awards__cert {
		padding: 28px 30px 32px;
	}

	.p-awards__cert-title {
		font-size: 17px;
	}

	.p-awards__cert-rows {
		margin-top: 20px;
	}

	.p-awards__cert-row {
		font-size: 16px;
		line-height: 1.6;
	}

	.p-awards__cert-text {
		font-size: 16px;
		line-height: 1.6;
	}

	/* --- 4. メディア実績 --- */
	.p-awards__media {
		padding: 90px 0 110px;
	}

	.p-awards__media .l-section {
		max-width: 1085px;
	}

	.p-awards__media-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		margin-top: 44px;
	}

	.p-awards__media-body {
		padding: 18px 20px 24px;
	}

	.p-awards__media-title {
		font-size: 16px;
	}

	.p-awards__media-text {
		font-size: 13px;
	}
	.c-lead {
		font-size: 16px;
	}
	.p-awards__media-text {
		font-size: 15px;
		line-height: 1.6;
	}
}