@charset "UTF-8";

/**
 * スマイルプロジェクトとは？ 固定ページ専用スタイル
 *
 * デザイン: design/smile-project.svg（SP 390px 基準）
 * 設計方針:
 *  - SP ファースト。min-width で PC へ拡張する
 *  - 余白・文字サイズはトークン化し、セクション間のリズムを揃える
 *  - 画像は aspect-ratio + width/height 属性で CLS を防ぐ
 */

.smile {
	--smile-ink: #535353;
	--smile-accent: #e83318;
	--smile-rule: #535353;
	--smile-gutter: 30px;
	--smile-record-gutter: 20px;
	--smile-section-gutter: 10px;
	--smile-measure: 1200px;
	--smile-space-section: 24px;
	--smile-space-gap: 12px;
	--smile-space-block: 12px;
	--smile-text: 0.875rem; /* 14px */
	--smile-text-lead: 1rem; /* 16px */

	/*
	 * ヘッダーは position: absolute / fixed のため、その分の逃げを取る。
	 * 共通の .main_container と同じ考え方だが、SP は fixed ヘッダー（75px）、
	 * 500px 以下は 50px になるため個別に打ち消す。
	 */
	padding-top: 95px;
	padding-bottom: 90px;
	color: var(--smile-ink);
}

@media (max-width: 500px) {
	.smile {
		padding-top: 70px;
	}
}

/* -------------------------------------------------- *
 * ページ見出し
 *
 * デザイン（design/smile-project.svg）では英語見出しのみ
 * アクセントの赤 #e83318、日本語見出しは本文と同じ #535353。
 * 共通 CSS のグレーが当たっていたためここで上書きする。
 * -------------------------------------------------- */

.smile .page-title__container {
	margin-bottom: var(--smile-space-section);
}

.smile .page-title_wrap {
	margin: 0;
	text-align: center;
}

.smile .title_en {
	display: block;
	color: var(--smile-accent);
	letter-spacing: 0.04em;
}

.smile .title_jp {
	display: block;
	color: var(--smile-ink);
}

.title-bottom-text {
	margin-top: 8px;
	font-size: 16px;
	text-align: center;
}

/* -------------------------------------------------- *
 * パンくず
 * -------------------------------------------------- */

.smile__breadcrumb {
	max-width: var(--smile-measure);
	margin-inline: auto;
	padding: 16px var(--smile-gutter) 0;
}

.smile__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem; /* 12px */
	line-height: 1.6;
}

.smile__breadcrumb-list li + li::before {
	content: "›";
	margin-right: 0.5em;
	color: currentColor;
}

.smile__breadcrumb-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.smile__breadcrumb-list a:hover,
.smile__breadcrumb-list a:focus-visible {
	color: var(--smile-accent);
}

.smile__breadcrumb-list [aria-current="page"] {
	font-weight: 700;
}

/* -------------------------------------------------- *
 * 導入
 * -------------------------------------------------- */

.smile__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: var(--smile-space-section);
	max-width: var(--smile-measure);
	margin-inline: auto;
	padding-left: var(--smile-gutter);
}

.smile__intro-image {
	display: block;
	/* width: min(100%, 258px); */
	width: min(100%, 184px);
	height: auto;
	margin-left: auto;
}

.smile__intro-text {
	margin: 0 0 1.25em;
	font-size: var(--smile-text);
	font-weight: 500;
	line-height: 2;
	text-align: left;
	text-wrap: pretty;
}

.smile__intro-text:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------- *
 * 実績セクション
 * -------------------------------------------------- */

.smile__records {
	max-width: var(--smile-measure);
	margin-inline: auto;
	padding-inline: var(--smile-record-gutter);
}

.smile__record {
	margin-top: var(--smile-space-section);
	padding-top: var(--smile-space-section);
	border-top: 2px solid var(--smile-rule);
	padding-inline: var(--smile-section-gutter);
}

.smile__record-title {
	margin: 0;
	font-size: var(--smile-text-lead);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-wrap: balance;
}

.smile__record-lead {
	margin: 0.75em 0 0;
	font-size: var(--smile-text);
	line-height: 1.85;
	letter-spacing: 0.03em;
	text-wrap: pretty;
}

/* -------------------------------------------------- *
 * ギャラリー
 * -------------------------------------------------- */

.smile__gallery {
	display: grid;
	gap: var(--smile-space-gap);
	margin: var(--smile-space-block) 0 0;
	padding: 0;
	list-style: none;
}

.smile__gallery-item {
	margin: 0;
}

.smile__figure {
	margin: 0;
}

.smile__figure-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	background-color: #f2f2f2;
}

/*
 * 縦長素材（チラシなど）は横並び時に行高を押し上げてしまうため、
 * 高さの上限を設けて全体が収まるようにする。
 */
.smile__figure-image--portrait {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.smile__figure-image--portrait {
		max-height: 620px;
	}
}

.smile__figure-caption {
	margin-bottom: var(--smile-space-block);
	font-size: var(--smile-text);
	line-height: 1.7;
	letter-spacing: 0.03em;
}

/* -------------------------------------------------- *
 * タブレット以上
 * -------------------------------------------------- */

@media (min-width: 768px) {
	.smile {
		--smile-gutter: 76px;
		/* --smile-section-gutter:  */
		--smile-space-section: 54px;
		--smile-space-gap: 20px;
		--smile-space-block: 12px;
		--smile-text-lead: 1.125rem; /* 19px */
		--smile-text: 1rem; /* 20px */
		padding-bottom: 140px;
	}

	/* PC ヘッダー（absolute・約103px）を避ける */
	@media (min-width: 1001px) {
		.smile {
			padding-top: 115px;
		}
	}

	.smile__intro {
		flex-direction: row;
		align-items: flex-start;
		row-gap: 0;
		padding-inline: var(--smile-gutter);
	}

	.smile__intro-texts {
		width: 66%;
	}

	.smile__intro-text {
		font-size: var(--smile-text-lead);
	}

	.smile__intro-image {
		width: min(100%, 258px);
	}

	/*
	 * 導入文は中央寄せの塊として見せる。
	 * テキスト自体は左揃えのまま、ブロックを中央に置いて行末の不揃いを避ける。
	 */
	.smile__intro-text {
		width: fit-content;
		margin-inline: auto;
	}

	.smile__records {
		padding-inline: 0;
	}

	.smile__record {
		padding-inline: var(--smile-gutter);
	}

	/* 2列固定。奇数枚のとき最後の1枚は左列に揃う */
	.smile__gallery {
		margin: var(--smile-space-block) 0 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	/* 1枚のみのセクションは中央に寄せて間延びを防ぐ */
	.smile__gallery:has(> :only-child) {
		grid-template-columns: minmax(0, 520px);
		justify-content: center;
	}

	.smile__figure-caption {
		margin-bottom: 8px;
	}

	.smile__br-sp {
		display: none;
	}
}

/* -------------------------------------------------- *
 * PCサイズ
 * -------------------------------------------------- */

@media (min-width: 1024px) {
	
}

/* -------------------------------------------------- *
 * モーション設定への配慮
 * -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.smile *,
	.smile *::before,
	.smile *::after {
		animation: none !important;
		transition: none !important;
	}
}