/* ============================================================
   下層ページ共通コンポーネント（page-hero / card-grid / card-link / message-layout / lead-text）
   ============================================================ */

/* ---------- page-hero（下層ページのヒーロー） ---------- */
.page-hero {
	position: relative;
	min-height: 320px;
	padding: clamp(7rem, 14vw, 10rem) var(--gutter) clamp(3rem, 6vw, 5rem);
	background-color: var(--c-bg-soft);
	background-size: cover;
	background-position: center;
	color: var(--c-ink);
	text-align: center;
	overflow: hidden;
}
.page-hero--dark {
	color: var(--c-on-dark);
}
.page-hero__overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.5);
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
}
.page-hero__title {
	font-size: clamp(1.6rem, 3.4vw + 0.5rem, 2.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	max-width: 16em;
	margin: 0.4em auto;
	padding-inline: 0.5em;
}
.page-hero__sub {
	font-size: clamp(0.82rem, 0.3vw + 0.74rem, 0.92rem);
	letter-spacing: 0.05em;
	color: inherit;
	opacity: 0.85;
	max-width: 28em;
	margin-inline: auto;
}
.page-hero--dark .section-eyebrow,
.page-hero--dark .section-heading__sub { color: rgba(255,255,255,0.8); }

/* ---------- リード文 ---------- */
.lead-text {
	font-size: clamp(0.88rem, 0.4vw + 0.8rem, 0.96rem);
	line-height: 1.85;
	color: var(--c-ink-soft);
	max-width: 32em;
	margin-inline: auto;
	/* 2026-05-15 行末オーファン回避（最後の短い単語が単独で次行に残るのを防ぐ。
	   未対応ブラウザでは無視される） */
	text-wrap: pretty;
}
/* 広めバリアント（/about/soba/ 上部リードなど、行幅をしっかり取りたい場合） */
/* 2026-05-15 「を提供しています。」などの短い末尾が単独行に残るのを防ぐため 60em→72em */
.lead-text--wide {
	max-width: 72em;
}

/* ---------- card-grid / card-link ---------- */
.card-grid {
	display: grid;
	gap: clamp(0.6rem, 1.5vw, 1.2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card-grid__item { margin: 0; }

.card-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.6em;
	min-height: 220px;
	padding: 2rem 1.6rem;
	background: #fff;
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.card-link:hover {
	border-color: var(--c-brand);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0,0,0,0.05);
}
/* 画像付きカード（2026-05-06 クライアント要望、ABOUT / RECRUIT のカードに採用） */
.card-link--has-media {
	padding: 0;
	overflow: hidden;
}
.card-link--has-media .card-link__body {
	padding: 1.4rem 1.6rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}
.card-link__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin: 0;
	background: var(--c-bg-warm, #f4ede1);
}
.card-link__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-2) var(--ease);
}
.card-link--has-media:hover .card-link__media img {
	transform: scale(1.05);
}
/* 2026-05-07 タイトルが長い（COMPANY BACKGROUND 等）カードでは en を 1 行に収まるサイズに抑える */
.card-link--compact .card-link__en {
	font-size: clamp(0.95rem, 1vw + 0.5rem, 1.25rem);
	letter-spacing: 0.04em;
}
/* 2026-05-07 縦長ポートレート画像（代表メッセージ等）を 16:9 で表示する際、顔が切れないよう上寄せに */
.card-link--portrait .card-link__media img {
	object-position: 50% 22%;
}
.card-link__en {
	font-size: clamp(1.15rem, 1.6vw + 0.6rem, 1.55rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.25;
	color: var(--c-ink);
}
.card-link__ja {
	font-size: clamp(0.74rem, 0.25vw + 0.68rem, 0.82rem);
	color: var(--c-mute);
	letter-spacing: 0.04em;
	margin-top: -0.2em;
}
.card-link__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--ff-display);
	font-size: clamp(0.68rem, 0.2vw + 0.62rem, 0.74rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--c-brand);
	margin-top: auto;
}
.card-link:hover .card-link__more .c-btn__arrow { transform: translateX(4px); }

/* ============================================================
   shop-list / shop-card — TOP の SHOP セクション と /shop/ 親ページで共用
   ============================================================ */
.shop-list__note {
	text-align: center;
	color: var(--c-ink-soft);
	margin-bottom: 2.5rem;
	font-size: clamp(0.85rem, 0.35vw + 0.78rem, 0.92rem);
}
.shop-list__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.6rem, 1.5vw, 1rem);
	margin-bottom: 3rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.shop-list__grid { grid-template-columns: repeat(4, 1fr); }
}
.shop-list__item { margin: 0; }

.shop-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: var(--c-on-dark);
}
.shop-card__media {
	position: absolute; inset: 0;
	background-position: center;
	background-size: cover;
	transition: transform 1.6s var(--ease);
}
.shop-card:hover .shop-card__media { transform: scale(1.06); }
.shop-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.15) 60%);
}
.shop-card__label {
	position: absolute;
	left: 0; right: 0;
	bottom: 1.4rem;
	text-align: center;
	font-size: clamp(0.82rem, 0.7vw + 0.66rem, 1rem);
	letter-spacing: 0.1em;
	font-weight: 700;
	z-index: 2;
}
.shop-list__online {
	text-align: center;
	padding: 2.5rem 1rem;
	background: #fff;
	border: 1px solid var(--c-line);
}
.shop-list__online-lead { margin-bottom: 1.2rem; color: var(--c-ink-soft); }

/* ---------- message-layout（代表メッセージ） ---------- */
.message-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 880px) {
	.message-layout {
		grid-template-columns: 1fr 320px;
		gap: 3rem;
	}
}
.message-layout__body { line-height: 2; color: var(--c-ink-soft); }
.message-layout__body p { margin-block: 1em; }
.message-layout__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.message-layout__photo img { width: 100%; height: 100%; object-fit: cover; }
.message-layout__profile {
	margin-top: 1.2rem;
	font-size: clamp(0.76rem, 0.25vw + 0.7rem, 0.82rem);
	color: var(--c-mute);
	line-height: 1.7;
	padding: 1rem 1.2rem;
	background: var(--c-bg-soft);
	border-left: 2px solid var(--c-brand);
}