/* components/buttons.css — ボタン / CTA（Figma: PillButton / ArrowButton / PrimaryCta）
   数値直書きせず var() を使う。色はアクセント（--color-accent）に追従。 */

/* 基底：ピル型ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  border: 1px solid var(--color-brown);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-brown-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.c-btn:hover,
.c-btn:focus-visible {
  background: var(--color-bg-light-yellow);
}

/* 矢印はボタン右端、ラベルは中央（Figma 76:24217: justify-between ＋ ラベル中央）。
   左に矢印と同幅の不可視スペーサを置き、両端の幅を揃えてラベルを中央に保つ。 */
.c-btn--arrow { justify-content: space-between; }
.c-btn--arrow::before {
  content: "";
  flex: 0 0 auto;
  width: var(--space-24);
}

/* 右端の丸囲み矢印（ArrowButton）。Figma 76:24217（Frame384）準拠：
   茶色（テキストカラー_ブラウン）の丸 ＋ 白い chevron（›）。24×24。 */
.c-btn--arrow::after {
  content: "";
  flex: 0 0 auto;
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-pill);
  background:
    var(--color-brown-text)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11 15L14 12L11 9' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* バリアント：塗り（primary） */
.c-btn--primary {
  background: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
  color: var(--color-brown-text);
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  filter: brightness(0.96);
  background: var(--color-accent-yellow);
}

/* バリアント：アクセント塗り（事業テーマ色） */
.c-btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.c-btn--accent:hover,
.c-btn--accent:focus-visible {
  filter: brightness(0.96);
  background: var(--color-accent);
}
.c-btn--accent.c-btn--arrow::after {
  background-color: var(--color-white);
  /* 反転（白丸に色付き chevron）。glyph は基底と同じ chevron に統一。 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11 15L14 12L11 9' stroke='%235f4d3e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* バリアント：ソフト（淡い黄色地＋茶アウトライン。もっと見る／一覧に戻る） */
.c-btn--soft {
  background: var(--color-bg-yellow);
  border-color: var(--color-brown-text);
  border-width: 1.5px;
  color: var(--color-brown-text);
}
.c-btn--soft:hover,
.c-btn--soft:focus-visible {
  filter: brightness(0.97);
  background: var(--color-bg-yellow);
}

/* サイズ */
.c-btn--sm { padding: var(--space-8) var(--space-24); font-size: var(--font-size-h5); }
.c-btn--lg { padding: var(--space-24) var(--space-48); font-size: var(--font-size-h3); }

/* 横幅いっぱい（フォーム送信など） */
.c-btn--block { display: flex; width: 100%; }

/* =====================================================================
   c-morebtn — 黄色ピル＋茶丸/白シェブロンの「もっと見る／一覧／CTA」ボタン
   （Figma Frame 385 準拠）。トップ（特徴/施設/お知らせ/コラム一覧・見学CTA）、
   事業詳細（施設一覧）、採用（もっと見る）、各ページの見学・体験CTA（c-cta-visit）で共用。
   幅は min-width 280px〜内容に応じて可変・ラベルは全幅中央・矢印は右端に絶対配置。
   背景は黄色紙テクスチャ（tex-yellow-deep）。修飾子で背景だけ差し替える。
   ===================================================================== */
.c-morebtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 17.5rem; /* 280px。内容が短くてもこの幅を保つ */
	max-width: 100%;
	/* 右側は矢印（2rem）の分だけ広く取り、ラベルは矢印を除いた左側領域の中央に置く。
	   結果としてラベルはボタン中心よりわずかに左へ寄る（Figma 76:19592 準拠）。 */
	padding: var(--space-12) calc(var(--space-12) + 2rem) var(--space-12) var(--space-12);
	border: 1.5px solid var(--color-brown-text);
	border-radius: var(--radius-pill);
	/* 背景色_イエロー地のクレヨン紙テクスチャ（346.8×327.8px タイル） */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	color: var(--color-brown-text);
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
}
.c-morebtn::after {
	/* 茶色(#674428)の塗り円＋白いシェブロン「>」。矢印は右端に固定し、ラベルは
	   ボタン全幅の中央に置く。data:URI内の色はCSS変数化不可（仕様制限）→ ハードコード。 */
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-12);
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: var(--color-brown-text)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M15 20L19 16L15 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 2rem no-repeat;
}
/* 中央寄せ（フレックスラッパ無しで単体配置する場合） */
.c-morebtn--center { margin-inline: auto; }

/* =====================================================================
   c-line-cta — 白カード＋茶ボーダーのLINE導線ボタン（Figma 294:14729）。
   見学・体験CTA（c-cta-visit）・トップ見学CTA（top-cta）のLINE動線で共用。
   左にLINEロゴ(40px・p20の枠)、ラベル、右端に茶丸＋白シェブロンの矢印(25.6px)。
   ===================================================================== */
.c-line-cta {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding-right: var(--space-20);
	border: 1.5px solid var(--color-brown-text);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
	color: var(--color-brown-text);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.2s ease;
}
.c-line-cta:hover { transform: translateY(-2px); }
/* LINEロゴ枠：Figma p-20 で 40px ロゴを囲む（カード高さを規定）。 */
.c-line-cta__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-20);
}
.c-line-cta__icon img { display: block; width: var(--space-40); height: var(--space-40); }
/* ラベル＋矢印を両端寄せ（ラベル左／矢印右端）。 */
.c-line-cta__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}
.c-line-cta__label {
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-snug);
}
/* lines 指定時のラベル各行。既定（PC）は1行に流し、SPで改行する（下の @media）。 */
.c-line-cta__line { display: inline; }
/* 右端の丸矢印（25.6px・茶丸＋白シェブロン。共通 .c-morebtn と同じ glyph）。 */
.c-line-cta__arrow {
	flex: 0 0 auto;
	width: 1.6rem;  /* 25.6px（Figma 25.638） */
	height: 1.6rem;
	border-radius: var(--radius-pill);
	background: var(--color-brown-text)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M15 20L19 16L15 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 1.6rem no-repeat;
}
/* SP：ラベルを一段小さく。lines 指定時は「LINEから」で改行（行ごとにブロック化）。 */
@media (max-width: 768px) {
	.c-line-cta__label { font-size: var(--font-size-h5); }
	.c-line-cta__line { display: block; }
}
/* 背景バリアント：オフホワイトの紙テクスチャ（トップ「療育サービス」カードの詳しく見る） */
.c-morebtn--offwhite {
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}