/* ==========================================================================
   共通コンポーネント
   下層ページで繰り返し使うパーツ（見出し・ボタン・パンくず等）をまとめています。
   ========================================================================== */

/* --------------------------------------------------------------------------
   セクションの器
   -------------------------------------------------------------------------- */
.l-section {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--header-pad-sp);
}

.l-section--narrow {
	max-width: 900px;
}

/* --------------------------------------------------------------------------
   パンくずリスト
   -------------------------------------------------------------------------- */
.breadcrumb {
	background-color: var(--color-bg);
}

.breadcrumb__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	/* ヘッダー（固定）下端からパンくずまでを 10px 空ける */
	padding: 10px var(--header-pad-sp) 10px;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--color-text-muted);
}

.breadcrumb__item:not(:last-child)::after {
	content: "＞";
	margin-inline: 6px;
	color: var(--color-border-strong);
}

.breadcrumb__item a {
	transition: color .2s linear;
}

.breadcrumb__item a:hover {
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */

/*
 * 見出し類の折り返し位置。
 * スマホ幅で「サポ／ート」「〜できま／す」のように語の途中や1文字だけで折り返すのを防ぐため、
 * 日本語を文節（ことばのまとまり）で折り返す。:where() で指定の強さを 0 にしているので、
 * 各ページの指定（br での改行・text-wrap など）はそのまま優先される。
 * word-break: auto-phrase は Chrome・Edge のみ対応（Safari は従来どおりの折り返し）。
 */
:where(h1, h2, h3, h4, h5, h6, dt, summary, [class*="__title"], [class*="__heading"], .p-qa__q) {
	word-break: auto-phrase;
	/* 1 つの文節が行より長いときは、はみ出さずに途中で折り返す */
	overflow-wrap: break-word;
}

.c-heading {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 25px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .02em;
	text-wrap: balance;
}

.c-heading--center {
	text-align: center;
}

/* 見出し中の強調（オレンジ） */
.c-heading em {
	font-style: normal;
	color: var(--color-primary);
}

.c-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--color-text-muted);
}

.c-eyebrow--center {
	text-align: center;
}

.c-lead {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   ボタン・リンク
   -------------------------------------------------------------------------- */
.c-actions {
	margin: 28px 0 0;
	text-align: center;
}

.c-actions--right {
	text-align: right;
}

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 32px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	transition: background-color .2s linear, color .2s linear, border-color .2s linear;
}

/* 矢印（CSSで描画） */
.c-button::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.c-button:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

.c-button--primary {
	background-color: var(--color-primary);
	color: #fff;
}

.c-button--primary:hover {
	background-color: var(--color-primary-dark);
}

.c-button--outline {
	border: 1px solid var(--color-primary);
	background-color: #fff;
	color: var(--color-primary);
}

.c-button--outline:hover {
	background-color: var(--color-primary);
	color: #fff;
}

.c-button--white {
	background-color: #fff;
	color: var(--color-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.c-button--white:hover {
	background-color: #fff8f1;
}

/* オレンジ塗り（CTA の「料金を見る」など） */
.c-button--orange {
	border: 1px solid #fff;
	background-color: #ee4000;
	color: #fff;
}

.c-button--orange:hover {
	background-color: var(--color-primary-dark);
}

/* 角丸を小さくしたボタン */
.c-button--square {
	border-radius: 5px;
	font-weight: 400;
}

.c-button:focus-visible,
.c-textlink:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.c-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* スマホで押しやすいよう、押せる範囲の高さを 24px 以上にする（見た目の文字の大きさは変えない） */
	min-height: 24px;
	font-size: 13px;
	color: var(--color-text-muted);
	transition: color .2s linear;
}

.c-textlink::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.c-textlink:hover {
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   装飾のウェーブ（セクション境界）
   セクションの一番最後に置く。--wave-under に次のセクションの背景色を指定する。
   -------------------------------------------------------------------------- */
.c-wave-divider {
	position: relative;
	z-index: 2;              /* セクション内の要素より前面に出す */
	width: 100%;
	margin-bottom: -1px;     /* 継ぎ目の 1px 隙間対策 */
	line-height: 0;          /* svg 下の余白を消す */
	pointer-events: none;
}

.c-wave-divider svg {
	display: block;
	width: 100%;
	height: auto;            /* 画面幅に比例して高さが変わる */
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   横長のCTAセクション（template-parts/cta-wide.php）
   オレンジの背景に、見出し・ボタン・写真2枚を置いたもの。
   会社概要ページとトップページで使っている。
   -------------------------------------------------------------------------- */
.c-cta-wide {
	/* 左上から右下へ、明るいオレンジ → ブランドのオレンジ */
	background: linear-gradient(120deg, #f7941d 0%, #ee5c00 55%, #e54600 100%);
}

.c-cta-wide__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: var(--content-max-wide);
	margin-inline: auto;
	padding: 40px var(--header-pad-sp);
}

.c-cta-wide__title {
	margin: 0;
	font-family: var(--font-mincho);
	/* 明朝体は太字にしない */
	font-weight: 400;
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: .02em;
	color: #fff;
}

.c-cta-wide__lead {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.8;
	color: #fff;
}

.c-cta-wide__buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.c-cta-wide__buttons .c-button {
	position: relative;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	/* デザインは角丸の小さい四角 */
	border-radius: 4px;
	/* CTA のボタンは全ページ共通のサイズ（PC は 18px） */
	font-size: 16px;
}

.c-cta-wide__buttons .c-button::after {
	position: absolute;
	right: 20px;
}

/* 写真2枚を少し重ねて置く */
.c-cta-wide__images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: 8px;
}

.c-cta-wide__image img,
.c-cta-wide__image .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 304 / 430;
	object-fit: cover;
	border-radius: 8px;
}

.c-cta-wide__image--front {
	margin-top: 32px;
}

@media (min-width: 840px) {

	.l-section {
		padding-inline: var(--header-pad-pc);
	}

	.breadcrumb__inner {
		padding: 20px var(--header-pad-pc) 14px;
	}

	.breadcrumb__list {
		font-size: 12px;
	}

	.c-heading {
		font-size: 32px;
	}

	.c-eyebrow {
		font-size: 13px;
	}

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

	.c-actions {
		margin-top: 40px;
	}

	.c-button {
		min-height: 60px;
		padding-inline: 48px;
		font-size: 16px;
	}

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

	/* --- 横長のCTAセクション --- */
	.c-cta-wide__inner {
		grid-template-columns: 1fr 561px;
		align-items: center;
		gap: 86px;
		padding: 61px 120px;
	}

	.c-cta-wide__title {
		font-size: 40px;
	}

	.c-cta-wide__lead {
		margin-top: 24px;
		font-size: 16px;
	}

	.c-cta-wide__buttons {
		margin-top: 42px;
		gap: 17px;
	}

	.c-cta-wide__buttons .c-button {
		width: 600px;
		max-width: 100%;
		min-height: 99px;
		font-size: 18px;
	}

	.c-cta-wide__images {
		gap: 0;
	}

	.c-cta-wide__image--back {
		margin-right: -50px;
	}

	.c-cta-wide__image--front {
		margin-top: 85px;
		z-index: 1;
	}

	.c-cta-wide__image img,
	.c-cta-wide__image .img-slot--empty {
		box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	}
}

/* --------------------------------------------------------------------------
   一覧の絞り込みボタン（イベント一覧・お知らせ一覧の共通）
   動きは js/list-filter.js。
   -------------------------------------------------------------------------- */
.c-filter__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-filter__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	/* 左右の端は半円（1pxの楕円にならないよう大きめの値にする） */
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	background-color: #fff;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s linear, color .2s linear;
}

.c-filter__button:hover {
	background-color: var(--color-tint);
}

.c-filter__button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* 選択中 */
.c-filter__button.is-active {
	background-color: var(--color-primary);
	color: #fff;
}

/* 該当するものが無いときの一文 */
.c-filter__empty {
	margin: 40px 0 0;
	font-size: 14px;
	text-align: center;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   ページ送り（イベント一覧・お知らせ一覧の共通）
   中身は js/list-filter.js が組み立てる。
   -------------------------------------------------------------------------- */
.c-pager {
	margin-top: 40px;
}

.c-pager__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-pager__number,
.c-pager__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	/* 真円 */
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-text);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.c-pager__number:hover,
.c-pager__arrow:not(:disabled):hover {
	background-color: var(--color-tint);
}

.c-pager__number:focus-visible,
.c-pager__arrow:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* いま見ているページ */
.c-pager__number.is-current {
	background-color: var(--color-primary);
	color: #fff;
	font-weight: 700;
}

/* 前へ・次へ（矢印は CSS で描いている） */
.c-pager__arrow::before {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-primary);
	border-top: 2px solid var(--color-primary);
}

.c-pager__arrow--prev::before {
	margin-left: 4px;
	transform: rotate(-135deg);
}

.c-pager__arrow--next::before {
	margin-right: 4px;
	transform: rotate(45deg);
}

.c-pager__arrow:disabled {
	cursor: default;
	opacity: .3;
}

.c-pager__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
	color: var(--color-text-muted);
}

@media (min-width: 840px) {
	.c-filter__button {
		min-height: 45px;
		padding: 0 27px;
		font-size: 16px;
	}

	.c-pager {
		margin-top: 70px;
	}

	.c-pager__list {
		gap: 10px;
	}

	.c-pager__number,
	.c-pager__arrow {
		width: 51px;
		height: 51px;
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   タグ（お知らせのジャンルなど）
   薄オレンジの下じきにオレンジの文字。
   -------------------------------------------------------------------------- */
.c-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 14px;
	/* 左右の端は半円 */
	border-radius: 999px;
	background-color: var(--color-tint);
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

@media (min-width: 840px) {
	.c-tag {
		min-height: 28px;
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   フォームの入力・送信エラーのお知らせ（template-parts/form-errors.php）

   相談予約・資料請求・イベント申込で共通して使う。
   何を直せばよいかと、送信できないときの連絡先をまとめて出す枠。
   -------------------------------------------------------------------------- */
.c-form-alert {
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	background-color: #fdf0ea;
	box-sizing: border-box;
}

.c-form-alert__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-primary);
}

.c-form-alert__lead {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-body);
}

.c-form-alert__list {
	margin: 8px 0 0;
	padding-left: 1.2em;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-body);
}

/* 押すと、その項目まで移動する */
.c-form-alert__list a {
	color: inherit;
	text-decoration: underline;
}

.c-form-alert__list a:hover {
	color: var(--color-primary);
}

/* 送信できないときの連絡先 */
.c-form-alert__contact {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(229, 70, 0, .2);
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-body);
}

.c-form-alert__tel {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-primary);
}

.c-form-alert__hours {
	font-size: 12px;
	color: var(--color-text-muted);
}

@media (min-width: 840px) {

	.c-form-alert {
		padding: 20px 24px;
	}

	.c-form-alert__title {
		font-size: 16px;
	}

	.c-form-alert__lead,
	.c-form-alert__list,
	.c-form-alert__contact {
		font-size: 14px;
	}

	.c-form-alert__tel {
		font-size: 19px;
	}

}