@charset "UTF-8";
/*
Theme Name: SETA-OYA (SWELL child)
Theme URI: https://swell-theme.com/
Template: swell
Description: 世田谷区里親相談窓口「SETA-OYA」ブランドサイト用のSWELL子テーマ。
Author: ムドウデザイン
Author URI: https://mudoudesign.com/
Version: 0.1.0
Requires at least: 6.8
Requires PHP: 7.4
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: swell_child
*/

/* =========================================================
   このファイルの方針（2026-10-01）

   ・デザイントークンは Figma から取った値をそのまま置く
     取得元：（ご共有用）SETA-OYAブランドサイト／2297- 系のフレーム7枚
   ・SWELLの設定（カスタマイザー）で足りるものは、ここに書かない
   ・SETA-OYA固有の部品だけをここに置く
   ・SWELLのクラスへ上書きした箇所は「上書き一覧」に必ず書く（更新で外れるため）
   ・暫定の数値には、理由と日付をコメントで添える

   旧デザインの記述は 2026-10-01 に全て削除した（git の履歴にある）。
   ========================================================= */

/* =========================================================
   1. デザイントークン

   名前は Figma の変数名に合わせている。
   Figma 側の打ち間違い（oragne / 18ox / 20ox）は、ここでは直した名前を使う。
   ========================================================= */

:root {
	/* 文字の色 */
	--seta-text: #303030;        /* Figma: crow */
	--seta-text-grey: #706d65;   /* Figma: Semantic/TEXT_GREY */
	--seta-text-mute: #aaaaaa;   /* Figma: mouse */
	--seta-white: #ffffff;       /* Figma: Semantic/WHITE */

	/* 線 */
	--seta-border: #d6d3d0;      /* Figma: Semantic/BORDER */

	/* 面・差し色 */
	--seta-wall: rgba(251, 232, 188, 0.8); /* Figma: wall_cl #fbe8bc cc */
	--seta-sakura: #ffebee;      /* Figma: sakura */
	--seta-miyabi: #edd2ff;      /* Figma: miyabi（fiji も同値） */
	--seta-blue: #daf5fc;        /* Figma: blue */
	--seta-power: #ff9d12;       /* Figma: power */
	--seta-pink: #fd8496;        /* Figma: pink */
	--seta-purple: #b36ce2;      /* Figma: purple */
	--seta-oak: #583300;         /* Figma: oak */
	--seta-orange: #ffca7e;      /* Figma: oragne（原文ママ） */

	/* 効果 */
	--seta-inner-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16); /* Figma: Inner Shadow */

	/* 書体 */
	--seta-font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
	--seta-font-num: "Lato", var(--seta-font-jp);

	/* 字間・行間（Figma は px 指定。文字サイズが変わっても崩れないよう em に直した） */
	/*
	 * 字間（2026-10-06 修正）。
	 *
	 * 前は 0.15em だった。16px のときだけ 2.4px になり、
	 * それ以外の大きさでは Figma より広がっていた。
	 *   20px → 3px ／ 26px → 3.9px ／ 60px → 9px
	 *
	 * Figma の文字の決まりは、大きさに関わらず **2.4px 固定** である
	 *   （20px_bold_2.4 ／ 16px_reg_2.4 … いずれも 2.4px）。
	 * 2026-10-06、里親登録の流れ（2566-7184）で確かめた。
	 * em をやめて、Figma と同じ固定値にしている。
	 */
	--seta-tracking: 2.4px;
	--seta-tracking-narrow: 0.1em; /* 12px に対する 1.2px */
	--seta-leading-tight: 1.4;     /* 見出し・短い文 */
	--seta-leading-body: 1.6;      /* 本文 */
	--seta-leading-loose: 1.8;     /* 小さい文字の本文 */

	/* 文字サイズ */
	--seta-size-xs: 12px;
	--seta-size-s: 14px;
	--seta-size-m: 16px;  /* Figma: size/M */
	--seta-size-l: 18px;
	--seta-size-xl: 20px;
	--seta-size-2xl: 26px;

	/*
	 * 幅・余白
	 *
	 * Figma に余白のトークンは無かったため、各フレームの実測から置いた（2026-10-01）。
	 * 本文の幅は 800px が最も多い（里親とは／特別養子縁組／里親になるには）。
	 * フォームは 700px、お知らせ一覧は 706px、記事ページは 1120px。
	 */
	--seta-content-w: 800px;
	--seta-form-w: 700px;
	--seta-article-w: 1120px;
	--seta-section-y: 80px;
	--seta-section-y-sp: 48px; /* SP暫定：PCの6割（2026-10-01） */
}

/* =========================================================
   1-2. SWELL が持っている色を、SETA-OYA の色に差し替える

   2026-10-05 マスター指示
   「SWELLのデザインもしくはパーツの色味を、サイトのトンマナに合わせてほしい」

   【何が起きていたか】
   SWELL は、記事の中で使う部品（ボタン・囲み枠・Q&A・マーカー・
   チェックリスト・引用など）の色を、自分の変数から取っている。
   その既定値は濃い青緑（#04384c）と青（#1176d4）で、
   SETA-OYA の暖色とまったく合わない。

   記事は施主が SWELL のブロックで書く。そこで使われる色なので、
   部品ごとに直すのではなく、元の変数そのものを置き換えている。

   【:root を2つ重ねている理由】
   SWELL はカスタマイザーの色を <style> で head に書き出す。
   その指定は :root に付いていて、読み込む順番ではこちらが後とは限らない。
   :root:root にすると指定の強さが1段上がるので、順番に関係なく勝てる。

   【触っていないもの】
   WordPress 本体が持つ色（--wp--preset--color--black など）。
   施主が明示的に選んだ色まで変えてしまうため。
   ========================================================= */

:root:root {
	/*
	 * 基調。見出しの線・枠・ボタン・引き出しメニューの帯などに広く使われる。
	 *
	 * 2026-10-06 修正。はじめは oak（#583300）にしていたが、
	 * マスターから「茶系は合わない」と指摘があり、ピンク系に変えた。
	 *
	 * ブランドのピンク（#fd8496）そのものは使えない。
	 * SWELL はこの色の上に白い文字を載せる作りで
	 *   .cap_box_ttl { background: var(--color_main); color: #fff }
	 * #fd8496 だと白文字との明暗差が 2.4:1 しかなく、読めないためである。
	 * 同じ色みのまま濃くして 5.0:1 まで上げたものが #c43f58 である
	 * （読みやすさの目安は 4.5:1）。
	 */
	--color_main: #c43f58;
	--color_main_thin: rgba(196, 63, 88, 0.05);
	--color_main_dark: #9c3246;
	--color_htag: #c43f58;

	/* 文字と背景 */
	--color_text: #303030; /* crow */
	--swl-text_color--black: #303030;
	--color_bg: #ffffff;
	--color_content_bg: #ffffff;
	--color_header_bg: #ffffff;
	--color_footer_bg: #eeeeee;
	--color_header_text: #303030;
	--color_footer_text: #303030;

	/*
	 * リンク。
	 * Figma のリンクは紫（#b36ce2）だが、白地に置くと薄くて読みにくい
	 * （明暗の差が 3.4:1 しかない）。基調と同じ濃いピンクにし、下線で見分ける。
	 */
	--color_link: #c43f58;

	/* 線 */
	--color_border: rgba(196, 63, 88, 0.2);
	--color_border--table: rgba(196, 63, 88, 0.2);
	--color_gray: rgba(251, 232, 188, 0.35); /* wall_cl の薄いもの */
	--swl-color_hov_gray: rgba(196, 63, 88, 0.05);
	--border01: solid 1px #c43f58;
	--border02: double 4px #c43f58;
	--border03: dashed 2px rgba(196, 63, 88, 0.3);
	--border04: solid 4px rgba(251, 232, 188, 0.5);

	/* グラデーション（SWELLの「グラデーション」ボタンなど） */
	--color_gradient1: #fd8496; /* pink */
	--color_gradient2: #ff9d12; /* power */

	/* 箇条書きのしるし */
	--color_list_check: #ff9d12;
	--color_list_num: #c43f58;
	--color_list_good: #8de08d;
	--color_list_triangle: #ffca7e;
	--color_list_bad: #fd8496;

	/* Q&A ブロック */
	--color_faq_q: #fd8496;
	--color_faq_a: #b36ce2;

	/* アイコン付きの囲み枠 */
	--color_icon_good: #8de08d;
	--color_icon_good_bg: #f1fbf1;
	--color_icon_bad: #8eccfb;
	--color_icon_bad_bg: #daf5fc;
	--color_icon_info: #f3afbd;
	--color_icon_info_bg: #ffebee;
	--color_icon_announce: #ff9d12;
	--color_icon_announce_bg: #fff3e0;
	--color_icon_pen: #706d65;
	--color_icon_pen_bg: #f6f4f0;
	--color_icon_book: #583300; /* 本のしるしだけは茶のまま（紙の色に合う） */
	--color_icon_book_bg: #fff9f0;
	--color_icon_point: #ff9d12;
	--color_icon_check: #8de08d;
	--color_icon_batsu: #fd8496;
	--color_icon_hatena: #8eccfb;
	--color_icon_caution: #ffca7e;
	--color_icon_memo: #aaaaaa;

	/* 濃い色・淡い色の4組（ブロックの色選びに出てくる） */
	--color_deep01: #fd8496; /* pink */
	--color_deep02: #8eccfb; /* blue */
	--color_deep03: #8de08d; /* green */
	--color_deep04: #ff9d12; /* power */
	--color_pale01: #ffebee; /* sakura */
	--color_pale02: #daf5fc; /* blue */
	--color_pale03: #f1fbf1;
	--color_pale04: #fff3e0;

	/* マーカー */
	--color_mark_blue: #daf5fc;
	--color_mark_green: #d8f5d8;
	--color_mark_yellow: #fbe8bc;
	--color_mark_orange: #ffca7e;

	/* 影。SETA-OYA は影を薄くしている */
	--swl-color_shadow: rgba(48, 48, 48, 0.1);
	--swl-box_shadow: 0 2px 8px rgba(48, 48, 48, 0.06);
	--swl-img_shadow: 0 2px 8px rgba(48, 48, 48, 0.08);
	--swl-btn_shadow: 0 2px 6px rgba(48, 48, 48, 0.1);

	/* ブロックの色選びに出る名前つきの色も、同じものに合わせる */
	--wp--preset--color--swl-main: #c43f58;
	--wp--preset--color--swl-main-thin: rgba(196, 63, 88, 0.05);
	--wp--preset--color--swl-gray: rgba(251, 232, 188, 0.35);
	--wp--preset--color--swl-deep-01: #fd8496;
	--wp--preset--color--swl-deep-02: #8eccfb;
	--wp--preset--color--swl-deep-03: #8de08d;
	--wp--preset--color--swl-deep-04: #ff9d12;
	--wp--preset--color--swl-pale-01: #ffebee;
	--wp--preset--color--swl-pale-02: #daf5fc;
	--wp--preset--color--swl-pale-03: #f1fbf1;
	--wp--preset--color--swl-pale-04: #fff3e0;
}

/* =========================================================
   2. 基本の文字

   SWELL のカスタマイザーでフォントを指定すると二重指定になる。
   SWELL 側のフォント設定は「デフォルト」のままにしておくこと（実機で要確認）。
   ========================================================= */

body {
	font-family: var(--seta-font-jp);
	color: var(--seta-text);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);

	/*
	 * ページを開いたとき、ふわっと出す（2026-10-05 指示）。
	 *
	 * JavaScript は使っていない。CSSのアニメーションだけである。
	 * 「both」で終わりの状態（不透明）に留まるので、
	 * アニメーションが動かない環境でも、必ず見える状態になる。
	 */
	animation: seta-page-in 0.6s ease both;
}

@keyframes seta-page-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 動きを減らす設定の人には、ふわっと出さない */
@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
	}
}

/* 数字と英字は Lato。日付・電話番号・Vol. 番号で使う */
.seta-num {
	font-family: var(--seta-font-num);
	font-weight: 700;
	letter-spacing: 0.125em; /* 16px に対する 2px */
}

/* =========================================================
   3. イベントの受付状態

   投稿の「受付状態」が受付中以外のときに出る（inc/content-types.php）。
   ========================================================= */

.seta-card__status,
.seta-event-detail__status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: var(--seta-size-xs);
	font-weight: 700;
	letter-spacing: var(--seta-tracking-narrow);
	line-height: var(--seta-leading-tight);
	white-space: nowrap;
}

/* 受付終了：主張させない */
.seta-card__status--closed,
.seta-event-detail__status--closed {
	background: var(--seta-border);
	color: var(--seta-text-grey);
}

/* 満員：気づいてもらう */
.seta-card__status--full,
.seta-event-detail__status--full {
	background: var(--seta-sakura);
	color: var(--seta-pink);
}

/* 受付中でないカードは、少し引いて見せる */
.seta-card--closed,
.seta-card--full {
	opacity: 0.75;
}

/* =========================================================
   4. 404ページ

   404.php に対応する。
   ========================================================= */

/*
 * ヒーローは「帯」として見せる。
 * 元画像は 2048x878（縦に長い）ため、height:auto のままだと縦 500px を超えて
 * 本文が画面の外へ押し出される。高さを決めて、はみ出す分は切る。
 */
.seta-404__hero {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

.seta-404__hero-image {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 959px) {
	.seta-404__hero-image {
		height: 180px;
	}
}

.seta-404__inner {
	max-width: var(--seta-content-w);
	margin-inline: auto;
	padding: var(--seta-section-y) 16px;
}

.seta-404__title {
	font-size: var(--seta-size-2xl);
	font-weight: 500;
	line-height: var(--seta-leading-tight);
	text-align: center;
}

.seta-404__lead {
	margin-top: 24px;
	font-size: var(--seta-size-m);
	line-height: var(--seta-leading-loose);
	text-align: center;
}

.seta-404__links {
	margin-top: 48px;
}

.seta-404__links-title {
	font-size: var(--seta-size-l);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
}

.seta-404__list {
	margin-top: 16px;
	padding-left: 1.2em;
}

.seta-404__item + .seta-404__item {
	margin-top: 8px;
}

.seta-404__contact {
	margin-top: 48px;
	padding: 32px 24px;
	background: var(--seta-wall);
	border-radius: 16px;
	text-align: center;
}

.seta-404__contact-title {
	font-size: var(--seta-size-m);
	font-weight: 500;
	line-height: var(--seta-leading-loose);
}

.seta-404__tel {
	margin-top: 16px;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-l);
	font-weight: 700;
}

@media (max-width: 959px) {
	.seta-404__inner {
		padding-block: var(--seta-section-y-sp);
	}

	.seta-404__links,
	.seta-404__contact {
		margin-top: 32px;
	}
}

/* =========================================================
   5. ブロックパターンの部品

   patterns/ の各ファイルに対応する。
   文字数が増えても、件数が変わっても崩れないことを基準に組んでいる。
   ========================================================= */

/* --- セクション見出し（heading.php） --- */

.seta-heading,
.seta-heading > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 重なりは margin で作るので、ここは0にする */
	gap: 0;
	/* 見出しの上下は、節の区切りとして広めに取る（2026-10-05 指示） */
	margin-top: var(--seta-section-y);
	margin-bottom: 48px;
}

.seta-heading__icon {
	flex: 0 0 auto;
	margin: 0;
}

/* SWELL の h2 は既定で背景色が付く。SETA-OYA の見出しでは外す */
.seta-heading__text,
.post_content .seta-heading__text {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--seta-size-2xl);
	font-weight: 500;
	line-height: var(--seta-leading-tight);
	letter-spacing: var(--seta-tracking);
	color: var(--seta-text);
}

.seta-heading__text::before,
.seta-heading__text::after,
.post_content .seta-heading__text::before,
.post_content .seta-heading__text::after {
	content: none;
}

/*
 * にじみの飾りは見出しの文字に重ねる。
 * Figma 2566-6739：飾りは104px幅、文字は飾りの左から64pxの位置
 * → 104 - 64 = 40px 重ねる。
 * 本文の中では SWELL・WordPress の figure の余白と横並びの gap が勝つので、強い指定でも当てる。
 */
.seta-heading__icon,
.seta-heading .seta-heading__icon,
.post_content .seta-heading .seta-heading__icon,
.post_content .seta-heading figure.seta-heading__icon {
	position: relative;
	z-index: 0;
	margin: 0 -40px 0 0;
}

.seta-heading .seta-heading__text,
.post_content .seta-heading .seta-heading__text {
	position: relative;
	z-index: 1;
}

.post_content .seta-heading,
.post_content .seta-heading.is-layout-flex,
.post_content .seta-heading > .wp-block-group__inner-container {
	gap: 0;
}

.seta-heading__icon img,
img.seta-heading__icon {
	display: block;
	height: auto;
}

/* --- 導入文（intro.php） --- */

.seta-intro {
	max-width: var(--seta-content-w);
	margin-inline: auto;
	text-align: center;
}

.seta-intro__label {
	/* Figma 2429-3035：20px Medium・字間2.4px */
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	/*
	 * 色は power（#ff9d12）。2026-10-05 修正。
	 * 書き出した画像から拾って確かめた（Figma 2333:7574 の行）。
	 * 黒のままだと、本文と見分けが付かなくなる。
	 */
	color: var(--seta-power);
}

.seta-intro__body {
	margin-top: 10px;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
}

/* 一文ずつの段落は、PC では続けて見せ、スマホでだけ文の間をあける */
.seta-intro__body:not(:last-child) {
	margin-bottom: 0;
}

.seta-intro__body + .seta-intro__body {
	margin-top: 0;
}

@media (max-width: 599px) {
	.seta-intro__body + .seta-intro__body {
		margin-top: 12px;
	}
}

/* --- お問い合わせ導線（cta.php） --- */

.seta-cta {
	margin-block: var(--seta-section-y);
	text-align: center;
}

.seta-cta__lead {
	margin: 0 0 38px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

/*
 * 中央ぞろえのリード文（Figma の各ページの見出し下）。
 * 20px Medium・字間2.4px。
 */
/*
 * 中央ぞろえの前置き。
 *
 * 色は power（#ff9d12）。2026-10-05 修正。
 * マスターの「色が違う」の指摘を受けて、Figma の書き出しから色を拾った。
 *   2441:3415「子どもとの生活が始まってからも…」  #ff9d12
 *   2426:2509「里親に関心はあるけれど…」          #ff9d12
 *   2297:2527「お問い合わせから登録まで…」        #303030 ← ここだけ黒
 * 3つのうち2つがオレンジなので、こちらを既定にし、
 * 黒の1つには -text を付けて打ち消している。
 */
.seta-lead-center {
	max-width: var(--seta-content-w);
	margin: 0 auto 10px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	text-align: center;
	color: var(--seta-power);
}

/* ---------------------------------------------------------
   条文の小見出しと注記（利用規約など）

   2026-10-08 追加。
   利用規約のように、条文が並ぶページで使う。
   大きい見出し（.seta-heading）は飾りの画像が付くので、
   条文ごとに置くには重い。文字だけの小見出しを用意した。

   Figma にこの画面のデザインは無い。
   ほかのページの文字の決まり（26px/20px/16px・字間2.4px）に合わせている。
   --------------------------------------------------------- */

.seta-subheading,
.post_content .seta-subheading {
	max-width: var(--seta-content-w);
	margin: 40px auto 12px;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid var(--seta-border);
	background: none;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

.seta-subheading::before,
.seta-subheading::after,
.post_content .seta-subheading::before,
.post_content .seta-subheading::after {
	content: none;
}

/*
 * 条文の本文は左ぞろえ。
 * .seta-body は中央ぞろえ（ほかのページの前置きで使っているため）なので、
 * 条文のように長い文が続くところでは打ち消す。
 */
.seta-body.-left,
.post_content .seta-body.-left {
	text-align: left;
}

/* 箇条書き（根拠規程の列挙など） */
.seta-list,
.post_content .seta-list {
	max-width: var(--seta-content-w);
	margin: 0 auto 16px;
	padding-left: 1.4em;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	text-align: left;
}

.seta-list li {
	margin-bottom: 4px;
}

/* 「※ 文面待ち」のような、本文より一段引いた注記 */
.seta-note,
.post_content .seta-note {
	max-width: var(--seta-content-w);
	margin: 0 auto 10px;
	font-size: var(--seta-size-s);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	color: var(--seta-text-grey);
}

/* 里親登録の流れ の前置きだけは、Figma でも黒である */
.seta-lead-center.-text {
	color: var(--seta-text);
	margin-bottom: 48px;
}

/* スマホでは、オレンジの前置きと続く本文の間を 24px にする（10px だと詰まって見える） */
@media (max-width: 599px) {
	.seta-lead-center + .seta-body {
		margin-top: 24px;
	}
}

/* 本文（16px・行間1.6・中央ぞろえ） */
.seta-body {
	max-width: var(--seta-content-w);
	margin: 0 auto;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	text-align: center;
}

/*
 * オレンジの強調文（Figma 2426-2587「短時間からでも、里親になれます」）。
 * 色は power。中央ぞろえ。
 */
.seta-accent {
	margin-block: 40px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-power);
	text-align: center;
}

/* 節と節の間。上下の余白は重なって大きいほうが残るので、後ろ側の上を広げる */
.seta-cta + .seta-heading,
.seta-cta + .seta-heading > .wp-block-group__inner-container {
	margin-top: calc(var(--seta-section-y) * 1.5);
}

@media (max-width: 959px) {
	.seta-cta + .seta-heading,
	.seta-cta + .seta-heading > .wp-block-group__inner-container {
		margin-top: calc(var(--seta-section-y-sp) * 1.5);
	}
}

.seta-intro + .seta-types {
	margin-top: var(--seta-section-y);
}

@media (max-width: 959px) {
	.seta-intro + .seta-types {
		margin-top: calc(var(--seta-section-y-sp) * 1.5);
	}
}

/* --- 登録の流れ（steps.php）---

   Figma: 2438-3274（幅620）
   ・番号は Lato Bold 60px・sakura。幅50px
   ・アイコン40px＋見出し20px Bold、説明16px
   ・段の下は点線
   -------------------------------------------------------- */

.seta-steps {
	max-width: 620px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.seta-step {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 10px;
}

.seta-step:not(:last-child) {
	margin-bottom: 20px;
	border-bottom: 1px dashed var(--seta-border);
}

.seta-step__num {
	flex: 0 0 50px;
	width: 50px;
	font-family: var(--seta-font-num);
	font-size: 60px;
	font-weight: 700;
	letter-spacing: var(--seta-tracking);
	/* 見出しの行（しるし 40px）と同じ高さにして、数字の中心をそろえる */
	line-height: 40px;
	color: var(--seta-sakura);
	text-align: center;
}

.seta-step__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seta-step__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--seta-size-xl);
	font-weight: 700;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-step__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.seta-step__text {
	margin: 0;
	font-size: var(--seta-size-m);
	/* Figma 2566-7192 は Regular（400）。本文の既定（500）だと太くなる */
	font-weight: 400;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
}

.seta-step__cta {
	margin: 0;
}

/*
 * 1段目のボタンは Figma では 360×60 と小さめ。
 * .seta-pill（560×100）と同じ強さだと後ろ勝ちで負けるため、
 * クラスを2つ重ねて強くしている（2026-10-05 実機で確認）。
 */
.seta-pill.seta-pill--s {
	width: 360px;
	min-height: 60px;
	/*
	 * 高さ60pxに収めるため、上下の余白は取らない。
	 *
	 * 左右は Figma の書き出し（2566-7193）の実寸に合わせてある。
	 * 指定上は左40・右30だが、中身（文字267＋間10＋丸32＝309px）が
	 * それでは入らず、Figma 側でも文字は x=30.5 から始まっている。
	 * 40/30 のままだと、こちらでは文字が2行に折れていた（2026-10-06 実測）。
	 */
	padding: 0 20px 0 30px;
	font-size: var(--seta-size-xl);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

/* 「お問い合わせはこちらから」は1行で出す（Figma も1行） */
.seta-pill.seta-pill--s .seta-pill__label {
	white-space: nowrap;
}

.seta-pill.seta-pill--s .seta-pill__icon {
	width: 8px;
	height: 8px;
	box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.8);
}

/* --- 里親登録の流れ：狭い画面（2026-10-06 に組み直した） ---

   それまでは、数字を小さくするだけで、余白は PC のままだった。
   マスターから「SPで変わっていない」と指摘を受けたところである。

   PC（Figma 2566-7183）の比率
     数字50 ＋ 間20 ＝ 中身の左に70px ／ 数字の文字 60px ／ 段の間20px
   これを狭い画面の幅に合わせて縮めている。
     タブレット  数字44 ＋ 間16 ／ 文字48px
     スマホ      数字36 ＋ 間12 ／ 文字40px

   段の間（段と段のあいだの余白）は、文字が小さくなるぶん
   PCと同じ20pxでは詰まって見えるので、少し広げている。 */

@media (max-width: 959px) {
	.seta-step {
		gap: 16px;
		padding-bottom: 14px;
	}

	.seta-step:not(:last-child) {
		margin-bottom: 24px;
	}

	.seta-step__num {
		flex-basis: 44px;
		width: 44px;
		font-size: 48px;
	}

	/* しるしと見出しの間も、少し広げる */
	.seta-step__name {
		gap: 12px;
	}

	.seta-pill--s {
		width: 100%;
	}
}

@media (max-width: 599px) {
	.seta-step {
		gap: 12px;
		padding-bottom: 12px;
	}

	.seta-step:not(:last-child) {
		margin-bottom: 20px;
	}

	.seta-step__num {
		flex-basis: 36px;
		width: 36px;
		font-size: 40px;
	}

	/* 見出しと本文の間も、狭い画面では少し詰める */
	.seta-step__body {
		gap: 8px;
	}
}

/* --- 例えばこんな、受け入れ方（cards-2col.php）---

   Figma: 2566-7060（幅800）
   ・外の箱：角丸16・下地 #FCFBFA・内側にうっすら影
   ・見出し帯：#FDE1F2 → #FFEBEE のグラデーション・20px Medium
   ・カード：白・枠2px sakura・角丸10
   ・ラベル：sakura の下側だけ角丸・18px Bold・pink（新デザインで「>」は無くなった）
   -------------------------------------------------------- */

.seta-cases {
	position: relative;
	max-width: var(--seta-content-w);
	margin-inline: auto;
	border-radius: 16px;
	background: #fcfbfa;
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
	overflow: hidden;
}

/*
 * SWELL は本文の h3 に線と余白を付ける。この見出し帯では外す。
 * （6章の上書き一覧に書いてある）
 */
.seta-cases__title,
.post_content .seta-cases__title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0;
	padding: 4px 10px;
	border: 0;
	background: linear-gradient(90deg, #fde1f2 0%, #ffebee 100%);
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

.seta-cases__title::before,
.seta-cases__title::after,
.post_content .seta-cases__title::before,
.post_content .seta-cases__title::after {
	content: none;
}

.seta-cases__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 20px;
}

.seta-cases__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10px 10px;
	border: 2px solid var(--seta-sakura);
	border-radius: 10px;
	background: var(--seta-white);
}

/* 期間のラベル。上は角を落とさず、下だけ丸める */
.seta-cases__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0 0 10px;
	padding: 4px 20px;
	border-radius: 0 0 8px 8px;
	background: var(--seta-sakura);
	font-size: var(--seta-size-l);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
	color: var(--seta-pink);
}

.seta-cases__body {
	margin: 0;
	width: 100%;
	font-size: var(--seta-size-s);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	color: var(--seta-text);
}

/* 箱の下に出す注記 */
.seta-cases__note {
	max-width: var(--seta-content-w);
	margin: 10px auto 0;
	font-size: var(--seta-size-s);
	letter-spacing: var(--seta-tracking);
	color: var(--seta-text);
	text-align: center;
}

@media (max-width: 959px) {
	.seta-cases__grid {
		grid-template-columns: 1fr;
		padding: 12px;
	}
}

/* --- チェック付きの箇条書き（checklist.php） --- */

/* 行の頭はそろえたまま、箱ごと中央に置く */
.seta-checklist {
	list-style: none;
	padding-left: 0;
	width: fit-content;
	max-width: min(100%, var(--seta-content-w));
	margin-inline: auto;
}

.seta-checklist li {
	position: relative;
	padding-left: 34px;
	font-size: var(--seta-size-l);
	line-height: var(--seta-leading-body);
}

.seta-checklist li + li {
	margin-top: 10px;
}

.seta-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	/* Figma（2297-2188）の点は薄い紫。2026-10-05：桜色だったのを直した */
	background: #eed4ff;
}

/* --- 里親の種類（type-cards.php） --- */

/* =========================================================
   里親の種類（patterns/type-cards.php）

   Figma: 2297-2384
   ・帯の背景 #FFF9F0（書き出した画像から拾った）
   ・カードは白・角丸16・枠は wall_cl・ふんわり影
   ・大カードは幅800、小カード3枚の行は幅1000
   ========================================================= */

.seta-types {
	padding: 40px 16px 64px;
	background: #fff9f0;
}

.seta-types__inner {
	max-width: 1000px;
	margin-inline: auto;
}

.seta-types__heading {
	margin-bottom: 40px;
}

.seta-types__lead {
	margin: 0 0 40px;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	text-align: center;
}

/* カード共通。Figma の白いカード */
.seta-types__card {
	padding: 40px 20px;
	border: 1px solid var(--seta-wall);
	border-radius: 16px;
	background: var(--seta-white);
	filter: drop-shadow(0 0 10px rgba(255, 210, 147, 0.16));
}

/* 大カードは幅800で中央に。小カードの行（1000）より狭い */
.seta-types__card:not(.seta-types__card--sub) {
	max-width: var(--seta-content-w);
	margin-inline: auto;
}

.seta-types__card + .seta-types__card {
	margin-top: 10px;
}

.seta-types__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.seta-types__name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-types__name--sub {
	font-size: var(--seta-size-xl);
}

/* 見出しの頭に付く、にじんだ丸 */
.seta-types__dot {
	flex: 0 0 auto;
	width: 24px;
	height: auto;
}

/* 枠つきのラベル。色は種類ごとに変わる */
.seta-types__badge {
	padding: 4px 10px;
	border: 2px solid currentColor;
	border-radius: 4px;
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-types__card--pink .seta-types__badge {
	color: var(--seta-pink);
}

.seta-types__card--purple .seta-types__badge {
	color: var(--seta-purple);
}

.seta-types__body {
	margin: 20px 0 0;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
}

/* カードの中のボタン。淡い色の丸ボタン */
.seta-types__btn-wrap {
	margin: 20px 0 0;
}

.seta-types__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 40px 20px 42px;
	border-radius: 80px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-types__btn:hover {
	opacity: 0.85;
}

.seta-types__card--pink .seta-types__btn {
	background: var(--seta-sakura);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
}

.seta-types__card--purple .seta-types__btn {
	background: var(--seta-miyabi);
	box-shadow: inset 0 0 16px rgba(255, 65, 245, 0.16);
}

/* 小カード3枚の行。Figma は幅1000・間10 */
.seta-types__subs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 40px;
}

.seta-types__card--sub {
	margin-top: 0;
}

.seta-types__card--sub + .seta-types__card--sub {
	margin-top: 0;
}

@media (max-width: 959px) {
	.seta-types__subs {
		grid-template-columns: 1fr;
	}

	.seta-types__name {
		font-size: var(--seta-size-xl);
	}

	.seta-types__btn {
		padding: 16px 24px;
		font-size: var(--seta-size-m);
	}
}

/* --- 記事へのリンク（article-link.php）---

   Figma: 2426-2321（540×68）
   枠2px fiji・角丸10。右に淡い紫の小ボタン
   -------------------------------------------------------- */

.seta-article-link-wrap {
	margin: 40px 0 0;
	text-align: center;
}

.seta-article-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* Figma は540px。見出しが長くなっても1行で収まるよう、広がる形にしている */
	min-width: 540px;
	max-width: 100%;
	min-height: 68px;
	padding: 2px 22px;
	border: 2px solid var(--seta-miyabi);
	border-radius: 10px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-article-link:hover {
	opacity: 0.85;
}

.seta-article-link__title {
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-align: left;
}

.seta-article-link__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 20px;
	border-radius: 80px;
	background: var(--seta-miyabi);
	box-shadow: inset 0 0 16px rgba(184, 87, 253, 0.16);
	font-size: var(--seta-size-s);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	white-space: nowrap;
}

@media (max-width: 959px) {
	.seta-article-link {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seta-article-link {
		transition: none;
	}
}

/* --- 里親登録の条件（conditions.php）---

   Figma: 2333-7614（380×314 を2枚、間40px）
   -------------------------------------------------------- */

.seta-conds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	max-width: var(--seta-content-w);
	margin: 40px auto 0;
}

.seta-conds__box {
	padding: 20px;
	border: 2px solid #e9f3d5;
	border-radius: 10px;
}

.seta-conds__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-conds__icon {
	flex: 0 0 auto;
	width: 24px;
	height: auto;
}

.seta-conds__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--seta-size-s);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
}

/* 頭の「・」は文字ではなく、ぶら下げで入れる */
.seta-conds__list li {
	padding-left: 1em;
	text-indent: -1em;
}

.seta-conds__list li::before {
	content: "・";
}

.seta-conds__list li + li {
	margin-top: 10px;
}

@media (max-width: 959px) {
	.seta-conds {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --- 記事へのリンク（画像つきカード・article-card.php）---

   Figma: 2426-2511（620×144）
   -------------------------------------------------------- */

.seta-artcard {
	display: flex;
	align-items: stretch;
	gap: 20px;
	max-width: 620px;
	margin: 40px auto 0;
	border: 2px solid var(--seta-miyabi);
	border-radius: 10px;
	text-decoration: none;
	overflow: hidden;
	transition: opacity 0.2s ease;
}

.seta-artcard:hover {
	opacity: 0.85;
}

.seta-artcard__image {
	flex: 0 0 200px;
	width: 200px;
	height: 140px;
	object-fit: cover;
}

.seta-artcard__image--empty {
	display: block;
	background: rgba(217, 217, 217, 0.3);
}

.seta-artcard__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	padding: 10px;
}

.seta-artcard__title {
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

.seta-artcard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: 20px;
	border-radius: 80px;
	background: var(--seta-miyabi);
	font-size: var(--seta-size-s);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

@media (max-width: 959px) {
	.seta-artcard {
		flex-direction: column;
	}

	.seta-artcard__image {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seta-artcard {
		transition: none;
	}
}

/* --- 里親になったあとのサポート（support-cards.php）---

   Figma: 2441-3417（395×141 を2列×2段、間10px）
   -------------------------------------------------------- */

.seta-supports {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-width: var(--seta-content-w);
	margin: 40px auto 0;
}

.seta-supports__card {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--seta-blue);
	border-radius: 6px;
	overflow: hidden;
}

.seta-supports__title {
	margin: 0;
	padding: 10px;
	background: var(--seta-blue);
	box-shadow: inset 0 0 16px rgba(89, 132, 217, 0.16);
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-supports__body {
	margin: 0;
	padding: 10px;
	font-size: var(--seta-size-s);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
}

@media (max-width: 959px) {
	.seta-supports {
		grid-template-columns: 1fr;
	}
}

/* --- 外部サイトへのリンク（external-link.php）---

   Figma: 2297-2488（418×68）下地 #FFF3E0・角丸80
   -------------------------------------------------------- */

.seta-external {
	margin-top: 40px;
	text-align: center;
}

.seta-external__note {
	margin: 0;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	color: var(--seta-text);
}

.seta-external__wrap {
	margin: 10px 0 0;
}

.seta-external__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 68px;
	padding: 20px 40px;
	border-radius: 80px;
	background: #fff3e0;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-external__link:hover {
	opacity: 0.85;
}

/* 「別のタブで開く」しるし。四角と矢印を線で描いている */
/*
 * 「別のタブで開く」しるし。
 * 形は patterns/external-link.php の中に SVG で置いてある
 * （Figma 2297-2490 の形。前は枠線で描いていて、何のしるしか分からなかった）。
 * ここでは大きさだけを決める。
 */
.seta-external__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.seta-external__link {
		transition: none;
	}
}

/* SWELL は本文の一部を中央寄せにする。SETA-OYA の部品は左揃えに戻す */
.seta-types__card > * {
	text-align: left;
}

/* --- Q&A（inc/faq.php のショートコード） --- */

.seta-faq {
	max-width: var(--seta-content-w);
	margin-inline: auto;
}

/* 共通：Q と A の記号 */
.seta-faq__mark {
	flex: 0 0 auto;
	width: 30px;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--seta-power);
}

.seta-faq__q,
.seta-faq__a {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.seta-faq__q {
	font-size: var(--seta-size-m);
	font-weight: 500;
	line-height: var(--seta-leading-body);
}

.seta-faq__a {
	margin-top: 12px;
}

.seta-faq__body {
	font-size: var(--seta-size-s);
	line-height: var(--seta-leading-loose);
	color: var(--seta-text-grey);
}

/* 答えの中の段落は、上下の余白を詰める */
.seta-faq__body > :first-child {
	margin-top: 0;
}

.seta-faq__body > :last-child {
	margin-bottom: 0;
}

/* --- カード型（特別養子縁組ページ）---

   Figma: 2429-3038（395×222 を2列×3段、間10px）
   ・枠 2px #F5EAFD・角丸6
   ・質問の段は下地 #F5EAFD・内側にうっすら紫の影
   ・Q は白、A は fiji（#EDD2FF）。どちらも 40px
   -------------------------------------------------------- */

.seta-faq--card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	/* 同じ段のカードは高さをそろえる（Figma も段ごとに同じ高さ） */
	align-items: stretch;
}

.seta-faq--card .seta-faq__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 2px solid #f5eafd;
	border-radius: 6px;
	background: var(--seta-white);
	overflow: hidden;
}

.seta-faq--card .seta-faq__q {
	position: relative;
	align-items: center;
	margin: 0;
	padding: 10px;
	background: #f5eafd;
	box-shadow: inset 0 0 16px rgba(219, 70, 245, 0.16);
	font-size: var(--seta-size-m);
	font-weight: 400;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
}

.seta-faq--card .seta-faq__q .seta-faq__mark {
	color: var(--seta-white);
}

.seta-faq--card .seta-faq__a {
	align-items: center;
	margin: 0;
	padding: 10px;
	border: 0;
}

.seta-faq--card .seta-faq__a .seta-faq__mark {
	color: var(--seta-miyabi);
}

.seta-faq--card .seta-faq__mark {
	width: 40px;
	font-family: var(--seta-font-jp);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.seta-faq--card .seta-faq__body {
	font-size: var(--seta-size-s);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	color: var(--seta-text);
}

@media (max-width: 959px) {
	.seta-faq--card {
		grid-template-columns: 1fr;
	}
}

/* --- カテゴリー型（里親になるにはページ）---

   Figma: 2426-2856
   ・見出しの帯 #EEE・角丸6・高さ44.5・16px Medium
   ・Q は 64px の薄いピンク（#FFE6F9）、A は薄いミント（#DBF9F1）
   ・答えの ※ の行は 12px の灰色
   -------------------------------------------------------- */

.seta-faq__group + .seta-faq__group {
	margin-top: 40px;
}

/*
 * SWELL は本文の h3 に線や飾りを付ける。この帯では全部外す。
 * （6章の上書き一覧に書いてある）
 */
.seta-faq__category,
.post_content .seta-faq__category {
	border: 0;
	display: flex;
	align-items: center;
	min-height: 44.5px;
	margin-bottom: 24px;
	padding: 8px 16px;
	border-radius: 6px;
	background: #eeeeee;
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-faq__category::before,
.seta-faq__category::after,
.post_content .seta-faq__category::before,
.post_content .seta-faq__category::after {
	content: none;
}

.seta-faq--list .seta-faq__item + .seta-faq__item {
	margin-top: 40px;
	padding-top: 0;
	border-top: 0;
}

.seta-faq--list .seta-faq__q,
.seta-faq--list .seta-faq__a {
	gap: 24px;
}

.seta-faq--list .seta-faq__q {
	align-items: center;
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-faq--list .seta-faq__a {
	margin-top: 24px;
	align-items: flex-start;
}

.seta-faq--list .seta-faq__mark {
	width: 51px;
	font-family: var(--seta-font-jp);
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.seta-faq--list .seta-faq__q .seta-faq__mark {
	color: #ffe6f9;
}

.seta-faq--list .seta-faq__a .seta-faq__mark {
	color: #dbf9f1;
}

.seta-faq--list .seta-faq__body {
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	color: var(--seta-text);
}

/* 答えの中の「※」から始まる行は、小さく薄い灰色にする */
.seta-faq__body .seta-note {
	margin-top: 24px;
	font-size: var(--seta-size-xs);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	color: var(--seta-text-mute);
}

@media (max-width: 959px) {
	.seta-faq--list .seta-faq__q,
	.seta-faq--list .seta-faq__a {
		gap: 12px;
	}

	.seta-faq--list .seta-faq__mark {
		width: 32px;
		font-size: 36px;
	}
}

/* --- お知らせ・イベント・読み物の一覧（ショートコード） --- */

/* お知らせ（Figma 2297-2243：画像つきカード3枚）

   Figma の寸法：カード460／画像440×240／本文440
   3枚が必ず横に並ぶように、列の数は3で決め打ちにしている。
   件数が3より少なくても、カードの幅は変わらない。 */
.seta-news-wrap {
	padding-inline: 20px;
}

.seta-news {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1400px;
	margin-inline: auto;
}

/*
 * カードに枠や影は付けない。Figma（2297-2243）は
 * 画像・日付と見出し・抜粋が、そのままページの上に並ぶ形である。
 * 2026-10-05：白いカードにしていたのを直した。
 */
.seta-news__item {
	display: flex;
	flex-direction: column;
	padding: 10px;
}

/* カードの上の画像。440×240（11:6）。下地の灰色は Figma の値 */
.seta-card__thumb {
	display: block;
	margin-bottom: 20px;
	aspect-ratio: 11 / 6;
	overflow: hidden;
	background: #f4f4f4;
}

.seta-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * アイキャッチが未設定のとき、代わりにロゴを出す（2026-10-09 マスター指示）。
 *
 * 上の cover は「枠いっぱいに伸ばして、はみ出した分を切る」指定である。
 * 枠は 11:6、ロゴは 600×165 とさらに横長なので、
 * cover のままだと上下が切れて「SETA-OYA」の文字が欠ける。
 * ロゴのときだけ contain（切らずに中に収める）に切り替えている。
 *
 * 下地は白に戻している。灰色のままだとロゴの地と馴染まないためである。
 */
.seta-card__thumb--logo {
	background: #fff;
	border: 1px solid var(--seta-border);
}

.seta-card__thumb--logo img {
	object-fit: contain;
	padding: 24px;
}

.seta-news__head {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.seta-news__date {
	flex: 0 0 auto;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-s);
	/* Figma の日付はオレンジ（oragne #FFCA7E） */
	color: var(--seta-orange);
	padding-top: 2px;
}

.seta-news__title {
	font-size: var(--seta-size-m);
	font-weight: 500;
	line-height: var(--seta-leading-body);
}

.seta-news__title a {
	color: var(--seta-text);
	text-decoration: none;
}

.seta-news__title a:hover {
	text-decoration: underline;
}

.seta-news__excerpt {
	margin-top: 16px;
	font-size: var(--seta-size-s);
	line-height: var(--seta-leading-loose);
	color: var(--seta-text-grey);
}

/* --- お知らせの一覧型（Figma 2566-6926：本文580＋右に画像200×57・全体800px）--- */

/*
 * 一覧型（Figma 2566-6918 / 2566-6921）。
 * 2026-10-09 に Figma と突き合わせて直した。
 * 記事どうしの間は 40px である（20px にしていて、詰まって見えていた）。
 */
.seta-news--list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--seta-content-w);
	margin-inline: auto;
}

.seta-news--list .seta-news__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 0 0 10px;
	border-bottom: 1px dashed var(--seta-border);
}

.seta-news--list .seta-news__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 右の画像。アイキャッチが無いときはロゴが入る */
.seta-news__thumb {
	flex: 0 0 200px;
	display: block;
	width: 200px;
}

.seta-news__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.seta-news--list .seta-news__head {
	align-items: flex-start;
}

.seta-news--list .seta-news__date {
	padding-top: 0;
	font-size: var(--seta-size-s);
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--seta-text-mute);
}

/*
 * 題名（Figma 2566-6930）：16px / Medium / 字間 2.4px / 行の高さ 1.4。
 *
 * 行の高さは、包んでいる p 側に書く。
 * 中の a にだけ書いても、行の間隔は p の指定（1.6）のままになる。
 * 2026-10-09 まで a にしか書いておらず、Figma より行が開いていた。
 */
.seta-news--list .seta-news__title {
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-news--list .seta-news__title a {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/*
 * 抜粋（Figma 2566-6931）：16px / Regular / 字間 0 / 行の高さ 1.4。
 * Regular は 400 である。2026-10-09 まで上から 500 を受け継いでいて、太かった。
 */
.seta-news--list .seta-news__excerpt {
	margin-top: 0;
	font-size: var(--seta-size-m);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text-grey);
}

.seta-news__empty,
.seta-events__empty {
	text-align: center;
	color: var(--seta-text-grey);
}

/* --- イベント（Figma 2297-2288：枠つきカード3枚）---

   350×293・枠2px momo（#FFE6F9）・角丸10・白地
   内側にうっすら影。日付と見出しの下に桜色の線
   -------------------------------------------------------- */

.seta-events {
	display: grid;
	/* 3枚そろわないときも中央に並ぶようにしている（Figma は3枚で1090px） */
	grid-template-columns: repeat(auto-fit, minmax(0, 350px));
	justify-content: center;
	gap: 20px;
	max-width: 1090px;
	margin-inline: auto;
}

.seta-events .seta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 27px;
	padding: 40px 20px;
	border: 2px solid #ffe6f9;
	border-radius: 10px;
	background: var(--seta-white);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
}

.seta-card__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 10px;
	border-bottom: 2px solid var(--seta-sakura);
	text-align: center;
}

.seta-card__date {
	font-size: var(--seta-size-xs);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	color: var(--seta-text);
}

.seta-card__title a {
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-decoration: none;
}

.seta-card__title a:hover {
	text-decoration: underline;
}

.seta-card__body {
	margin: 0;
	font-size: var(--seta-size-s);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	color: var(--seta-text);
	text-align: center;
}

@media (max-width: 959px) {
	.seta-events {
		grid-template-columns: 1fr;
	}
}

/* --- インタビュー（Figma 2297-2746）---

   画像320×220＋テキスト470。テキストの上下にかぎかっこの飾り
   -------------------------------------------------------- */

.seta-interviews {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--seta-content-w);
	margin-inline: auto;
}

.seta-interview {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.seta-interview__image {
	display: block;
	width: 320px;
	height: 220px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f4f4;
}

.seta-interview__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.seta-interview__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* かぎかっこの飾り。上は左、下は右 */
.seta-interview__deco {
	width: 30px;
	height: auto;
}

.seta-interview__deco--br {
	align-self: flex-end;
}

.seta-interview__inner {
	padding-inline: 40px;
}

.seta-interview__vol {
	margin: 0 0 10px;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-m);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text-mute);
}

.seta-interview__title {
	margin: 0;
}

.seta-interview__title a {
	font-size: var(--seta-size-l);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-decoration: none;
}

.seta-interview__title a:hover {
	text-decoration: underline;
}

/* --- コラム・イベントレポート（Figma 2297-2794）---

   画像400×200＋テキスト。段の下に細い線
   -------------------------------------------------------- */

.seta-columns {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--seta-content-w);
	margin-inline: auto;
}

.seta-column {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding-bottom: 40px;
	border-bottom: 1px solid #b5b5b5;
}

.seta-column__image {
	display: block;
	width: 400px;
	height: 200px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f4f4;
}

.seta-column__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.seta-column__text {
	min-width: 0;
}

.seta-column__title {
	margin: 0;
}

.seta-column__title a {
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	text-decoration: none;
}

.seta-column__title a:hover {
	text-decoration: underline;
}

.seta-column__author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 10px;
	letter-spacing: 0;
	color: #666666;
}

.seta-column__author img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* note の記事のしるし（押すと note が別タブで開く） */
.seta-column__source {
	margin-left: auto;
	padding: 2px 8px;
	border: 1px solid var(--seta-border);
	border-radius: 999px;
	font-family: var(--seta-font-num);
	font-size: 10px;
	letter-spacing: 0.05em;
	line-height: 1.4;
	color: #666666;
}

/*
 * 「もっと読む」で隠しておく分。
 *
 * html に js-more が付いているときだけ隠す。
 * JavaScript が動かない場合は付かないので、最初から全部見えている
 * （押せないボタンの向こうに中身が隠れたままになる事故を防ぐため）。
 */
.js-more .seta-more-hidden {
	display: none;
}

/* ボタンは <a> でも <button> でも同じ見た目にする */
button.seta-more {
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

/* 「もっと読む」（Figma 2297-2787：220×60・緑〜クリームのグラデーション） */
.seta-more-wrap {
	/* 一覧との間と、次の見出しとの間を空ける（2026-10-05 指示） */
	margin: 56px 0 0;
	text-align: center;
}

.seta-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma は 220〜240px。文字が長いときは横に伸びる */
	min-width: 220px;
	max-width: 100%;
	min-height: 60px;
	padding: 6px 20px;
	white-space: nowrap;
	border-radius: 8px;
	background: linear-gradient(90deg, #cdffe6 0%, #f9f2d6 100%);
	font-size: var(--seta-size-xl);
	font-weight: 700;
	letter-spacing: 4px;
	line-height: 1.5;
	color: var(--seta-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-more:hover {
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.seta-more {
		transition: none;
	}
}

.seta-reading__empty {
	max-width: var(--seta-content-w);
	margin-inline: auto;
	color: var(--seta-text-grey);
	text-align: center;
}

@media (max-width: 959px) {
	.seta-interview,
	.seta-column {
		grid-template-columns: 1fr;
	}

	.seta-interview__image,
	.seta-column__image {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 11;
	}

	.seta-interview__inner {
		padding-inline: 16px;
	}
}

/* =========================================================
   里親さんの声（patterns/voices.php）

   Figma: 2423-6703（1440×152）
   吹き出しは文字ごと1枚の画像（210×112）。間は24px。

   マスターの指示（2026-10-05）：左へ自動で流す。
   同じ並びを2回出し、1周ぶん（6枚＋すき間＝1404px）だけ
   左へずらして繰り返す。継ぎ目が出ない。
   ========================================================= */

.seta-voices {
	/*
	 * 上の余白は入れない（2026-10-05 指示）。FVのすぐ下から始める。
	 */
	padding: 0;
	overflow: hidden;

	/*
	 * 吹き出しの大きさと間。ここを変えると、流す距離も自動で合う。
	 * Figma は210pxだが、文字が読みにくいので大きくしている（2026-10-05 指示）。
	 */
	--seta-voice-w: 280px;
	--seta-voice-gap: 24px;
}

.seta-voices__track {
	display: flex;
	gap: var(--seta-voice-gap);
	width: max-content;
	padding-top: var(--seta-voice-gap);
	animation: seta-voices-slide 52s linear infinite;
}

.seta-voices__list,
.post_content .seta-voices__list {
	display: flex;
	gap: var(--seta-voice-gap);
	margin: 0;
	/* SWELL は本文の ul に左の余白を付ける。流す距離がずれるので外す */
	padding: 0;
	list-style: none;
}

.seta-voices__item {
	flex: 0 0 auto;
}

.seta-voices__item img {
	display: block;
	width: var(--seta-voice-w);
	height: auto;
}

/*
 * 1周 = 吹き出し6枚ぶん ＋ すき間6つぶん。
 * 2つ目の並びが、ちょうど1つ目の位置に来る。
 */
@keyframes seta-voices-slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-6 * (var(--seta-voice-w) + var(--seta-voice-gap))));
	}
}

/*
 * 2026-10-05 指示：ホバーしても止めない。
 * （止まると、流れているものが引っかかったように見えるため）
 */

/*
 * 動きを減らす設定の人には流さない。
 * 止めたうえで、横にすべらせて読める形にする。
 */
@media (prefers-reduced-motion: reduce) {
	.seta-voices {
		overflow-x: auto;
	}

	.seta-voices__track {
		animation: none;
	}

	/* 止めるときは2周目を出さない（同じものが2回読めてしまうため） */
	.seta-voices__list[aria-hidden="true"] {
		display: none;
	}
}

/* 吹き出しの引用元。小さく左に置く */
.seta-voices__credit {
	margin: 10px 0 0 40px;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--seta-text-grey);
}

@media (max-width: 959px) {
	.seta-voices {
		--seta-voice-w: 220px;
	}

	.seta-voices__credit {
		margin-left: 16px;
	}
}

/* =========================================================
   クリーム色の帯（patterns/adoption-video.php）

   Figma: y=614〜1456 の範囲に、白→#FEF2DF→白 の背景が1枚かかっている。
   色と変わる位置は、書き出した画像から拾った（2026-10-05）。
   ========================================================= */

.seta-band-cream {
	padding: 64px 16px 96px;
	background: linear-gradient(
		180deg,
		#ffffff 0%,
		#fef2df 41%,
		#fef2df 85%,
		#ffffff 100%
	);
	text-align: center;
}

.seta-band-cream__lead {
	margin: 0 0 10px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

/* --- 動画の枠（Figma 2298-1839：780×400） --- */

.seta-video {
	margin-top: 80px;
}

.seta-video__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 780px;
	margin-inline: auto;
	aspect-ratio: 780 / 400;
	background: var(--seta-white);
	border-radius: 8px;
}

.seta-video__note {
	margin: 0;
	font-size: var(--seta-size-xl);
	color: var(--seta-text-mute);
}

/* 動画を入れたら、枠と同じ大きさで収める */
.seta-video iframe,
.seta-video .wp-block-embed__wrapper iframe {
	display: block;
	width: 100%;
	max-width: 780px;
	margin-inline: auto;
	aspect-ratio: 780 / 400;
	height: auto;
	border: 0;
	border-radius: 8px;
}

/* =========================================================
   大きい丸ボタン（.seta-pill）と色つきタイル（.seta-tile）

   Figma:
   ・2299-29509「特別養子縁組 という選択肢」560×100・角丸68
   ・2302-29583「イベント・お知らせを見る」560×100・角丸68
   ・2425-1936  3枚のタイル 高さ100・角丸8・間24
   どれも内側にうっすら影が入り、右に丸い印が付く。
   ========================================================= */

.seta-pill-wrap {
	margin: 0;
	text-align: center;
}

.seta-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 560px;
	max-width: 100%;
	min-height: 100px;
	padding: 12px 30px 12px 40px;
	border-radius: 68px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-pill--adoption {
	background: linear-gradient(90deg, #ffc8e6 0%, #ffcd96 100%);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
	color: var(--seta-white);
}

.seta-pill.seta-pill--blue {
	background: linear-gradient(90deg, #85b8ee 0%, #b1a3f2 100%);
	box-shadow: inset 0 0 16px rgba(83, 131, 251, 0.16);
	color: var(--seta-white);
	/* Figma 2426-2681 は 440×68。560×100 の大ボタンより小さい */
	width: auto;
	min-height: 68px;
	padding: 20px 40px 20px 42px;
	border-radius: 98px;
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
}

.seta-pill.seta-pill--blue .seta-pill__icon {
	width: 8px;
	height: 8px;
	box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.8);
}

.seta-pill--news {
	background: linear-gradient(90deg, #cdffe6 0%, #f9f2d6 100%);
	box-shadow: inset 0 0 16px rgba(183, 237, 190, 0.16);
	color: #5c5762;
}

.seta-pill:hover,
.seta-tile:hover {
	opacity: 0.88;
}

/*
 * 右に付く丸い印。
 *
 * 輪っかではない。白い点に、白いぼかしがふんわり広がる形である。
 * Figma の SVG を読んで確かめた（2026-10-05）。
 *   円 r=6（大ボタン）/ r=4（タイル）
 *   影：広げる5px・ぼかし stdDeviation 5（CSSのぼかしは約2倍）・白の80%
 */
.seta-pill__icon,
.seta-tile__icon,
.seta-types__btn-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--seta-white);
	box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
}

/* タイルとカード内のボタンは一回り小さい */
.seta-tile__icon,
.seta-types__btn-dot {
	width: 8px;
	height: 8px;
}



/* --- 色つきのタイル3枚 --- */

/*
 * Figma（2425-1936）では3枚で 872px。本文の幅（900px）にぎりぎり収まらず
 * 折り返してしまうため、本文の外へ逃がして中央に置く。
 */
.seta-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: 1120px;
	margin: 48px auto;
	padding-inline: 16px;
}

.seta-tile {
	display: inline-flex;
	align-items: center;
	/*
	 * 文字は左端、光る丸は右端に置く（2026-10-06 マスター指示）。
	 *
	 * PC では箱が中身の幅ちょうどなので、空きが無く見た目は変わらない。
	 * 幅いっぱいに伸びる狭い画面でだけ、両端に分かれる。
	 */
	justify-content: space-between;
	gap: 10px;
	min-height: 100px;
	padding: 12px 30px 12px 40px;
	border-radius: 8px;
	font-size: var(--seta-size-xl);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--seta-white);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-tile--pink {
	background: linear-gradient(90deg, #f8b0ce 0%, #cfb2fe 100%);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
}

.seta-tile--blue {
	background: linear-gradient(90deg, #85b8ee 0%, #b1a3f2 100%);
	box-shadow: inset 0 0 16px rgba(83, 131, 251, 0.16);
}

.seta-tile--green {
	background: linear-gradient(90deg, #a4ce7e 0%, #96c9ff 100%);
	box-shadow: inset 0 0 16px rgba(35, 191, 118, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	.seta-pill,
	.seta-tile {
		transition: none;
	}
}

@media (max-width: 959px) {
	.seta-pill {
		min-height: 80px;
		padding-inline: 20px 16px;
		font-size: var(--seta-size-xl);
	}

	.seta-tiles {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.seta-band-cream {
		padding-block: 48px 64px;
	}

	.seta-video {
		margin-top: 48px;
	}
}

/* --- ボタン（SWELL の既定を SETA-OYA の形にする） --- */

.seta-btn-wrap .wp-block-button__link,
.seta-btn-wrap > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	min-height: 60px;
	padding: 14px 40px;
	border-radius: 999px;
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	text-decoration: none;
}

/* ピンク〜オレンジのグラデーション（Figma のボタン） */
.seta-btn-wrap--gradient .wp-block-button__link,
.seta-btn-wrap--gradient > a {
	background: linear-gradient(90deg, var(--seta-pink) 0%, var(--seta-power) 100%);
	color: var(--seta-white);
	border: 0;
}

/* 枠線のボタン */
.seta-btn-wrap--outline .wp-block-button__link,
.seta-btn-wrap--outline > a {
	background: var(--seta-white);
	border: 1px solid var(--seta-border);
	color: var(--seta-text);
}

/* 淡色のボタン */
.seta-btn-wrap--tint .wp-block-button__link,
.seta-btn-wrap--tint > a {
	background: var(--seta-sakura);
	border: 0;
	color: var(--seta-text);
	min-width: 0;
	min-height: 44px;
	font-size: var(--seta-size-s);
	padding: 10px 24px;
}

.seta-btn-wrap .wp-block-button__link:hover,
.seta-btn-wrap > a:hover {
	opacity: 0.85;
}

/* =========================================================
   お問い合わせ（patterns/contact-intro.php とフォーム）

   Figma: 2297-2819（本文の幅700px）
   ========================================================= */

.seta-contact-intro {
	max-width: var(--seta-form-w);
	margin: 0 auto 40px;
	text-align: center;
}

.seta-contact-intro__tel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.seta-contact-intro__tel-label {
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-contact-intro__tel-num {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--seta-font-num);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.5;
	color: var(--seta-text);
	text-decoration: none;
}

.seta-contact-intro__tel-num img {
	width: 16px;
	height: auto;
}

.seta-contact-intro__note {
	margin: 10px 0 10px;
	font-size: var(--seta-size-m);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-contact-intro__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seta-contact-intro__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	padding: 10px;
	font-size: var(--seta-size-xs);
	letter-spacing: 2px;
	line-height: var(--seta-leading-loose);
	text-align: center;
}

.seta-contact-intro__chip--blue {
	background: var(--seta-blue);
}

.seta-contact-intro__chip--sakura {
	background: var(--seta-sakura);
}

.seta-contact-intro__chip--miyabi {
	background: var(--seta-miyabi);
}

/* --- フォームの見た目（Contact Form 7 を入れたら、そのまま効く）---

   Figma: 2297-2828
   ・ラベル 12px、必須の「＊」は赤（#F81945）
   ・入力欄は高さ52・枠 #D6D3D0・角丸6・文字16px
   ・送信ボタンは 220×60
   -------------------------------------------------------- */

.seta-form {
	max-width: var(--seta-form-w);
	margin-inline: auto;
}

/* フォームの上に出す1行（Figma 2566-7558）。PC ではメールアドレスの途中で折れないよう折り返さない */
.seta-form__lead,
.post_content .seta-form__lead {
	max-width: var(--seta-form-w);
	margin: 0 auto 40px;
	font-size: var(--seta-size-xs);
	letter-spacing: 0.05em;
	line-height: var(--seta-leading-body);
	color: var(--seta-text-grey);
	text-align: center;
}

@media (min-width: 768px) {
	.seta-form__lead,
	.post_content .seta-form__lead {
		white-space: nowrap;
	}
}

.seta-form .wpcf7-form p,
.seta-form p {
	/* 新デザイン 2566-7402：項目の間は20px（高さ82＋間20） */
	margin-bottom: 20px;
}

/* Contact Form 7 が設定の改行に入れる <br>。label は block なので要らない */
.seta-form .wpcf7-form p > br,
.seta-form .wpcf7-form label + br {
	display: none;
}

.seta-form label {
	display: block;
	margin-bottom: 8px;
	/* 新デザイン 2566-7415：16px・行間1.4 */
	font-size: var(--seta-size-m);
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

/* 必須のしるし。文字より少し小さい（Figma 2566-7417：12px） */
.seta-form .seta-form__required {
	margin-left: 4px;
	font-size: var(--seta-size-xs);
	line-height: 1.25;
	color: #f81945;
	vertical-align: top;
}

.seta-form input[type="text"],
.seta-form input[type="email"],
.seta-form input[type="tel"],
.seta-form input[type="url"],
.seta-form input[type="date"],
.seta-form input[type="number"],
.seta-form select,
.seta-form textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 13px;
	border: 1px solid var(--seta-border);
	border-radius: 6px;
	background: var(--seta-white);
	font-family: inherit;
	/* 新デザイン 2566-7419：18px・行間1.6・字間2.4px */
	font-size: var(--seta-size-l);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
	color: var(--seta-text);
}

.seta-form textarea {
	min-height: 200px;
	resize: vertical;
}

.seta-form input::placeholder,
.seta-form textarea::placeholder {
	color: #5f5d57;
}

.seta-form input:focus,
.seta-form select:focus,
.seta-form textarea:focus {
	outline: 2px solid var(--seta-power);
	outline-offset: 1px;
}

/* 送信ボタン（Figma 2297-2880：220×60） */
.seta-form input[type="submit"],
.seta-form button[type="submit"],
.seta-form__submit-dummy {
	display: block;
	width: 220px;
	max-width: 100%;
	min-height: 60px;
	margin: 40px auto 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(90deg, #ffc8e6 0%, #ffcd96 100%);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
	font-family: inherit;
	font-size: var(--seta-size-xl);
	font-weight: 700;
	letter-spacing: 4px;
	line-height: 1.5;
	color: var(--seta-white);
	cursor: pointer;
}

.seta-form input[type="submit"]:hover,
.seta-form button[type="submit"]:hover {
	opacity: 0.88;
}

/* スパム対策（Turnstile）のチェック欄。送信ボタンと中心をそろえる */
.seta-form .wpcf7-turnstile {
	display: flex;
	justify-content: center;
}

/*
 * Contact Form 7 を入れるまでの見本のボタン。
 * 押せないことが分かるように薄くしている。
 */
.seta-form__submit-dummy {
	opacity: 0.6;
	cursor: not-allowed;
}

.seta-form__notice {
	margin-top: 16px;
	font-size: var(--seta-size-s);
	line-height: var(--seta-leading-loose);
	color: var(--seta-text-grey);
	text-align: center;
}

/* =========================================================
   送信完了のページ

   Figma: 2297-2883（お問い合わせ完了）／2297-2349（イベント申し込み完了）
   ・上下の余白80px。中身は中央に
   ・お問い合わせ完了は見出しを置かない（Figma に無い）
   ========================================================= */

.seta-thanks__lead {
	max-width: var(--seta-content-w);
	margin: 0 auto 40px;
	font-size: var(--seta-size-xl);
	font-weight: 700;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
}

.seta-thanks__note,
.seta-thanks__body {
	max-width: var(--seta-content-w);
	margin-inline: auto;
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-body);
}

.seta-thanks__body {
	max-width: var(--seta-content-w);
	margin-bottom: 40px;
}

/*
 * 受信設定の注意文。
 *
 * お問い合わせ完了（Figma 2566-7641）は 800px幅で、上の文と左端がそろう。
 * イベント申し込み完了（Figma 2566-6993）は 611px幅。
 * 左端がずれて見えたので、どちらも上の文と同じ幅にそろえた（2026-10-05 指示）。
 */
.seta-thanks__note {
	max-width: var(--seta-content-w);
	margin-bottom: 40px;
}

.seta-thanks__title {
	margin: 0 0 20px;
	font-size: var(--seta-size-2xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	text-align: center;
}

/*
 * 見出しの下のカラフルな丸の列（Figma 2297-2354）。
 * 24pxの丸が16個。色は4つの繰り返し（書き出した画像から拾った）。
 * 飾りなので、読み上げには出さない（PHP側で aria-hidden を付けている）。
 */
.seta-thanks__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	margin: 0 0 40px;
}

.seta-thanks__dots span {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.seta-thanks__dots span:nth-child(4n + 1) {
	background: #fed0d1;
}

.seta-thanks__dots span:nth-child(4n + 2) {
	background: #d2dbff;
}

.seta-thanks__dots span:nth-child(4n + 3) {
	background: #e4fedc;
}

.seta-thanks__dots span:nth-child(4n + 4) {
	background: #d0fffe;
}

/* =========================================================
   記事ページ（single-seta_news.php）

   Figma: 2297-2331（本文の幅1120px）
   ・見出し 26px Medium、その下に日付（Lato Bold 14px の灰色）
   ・本文の区切りは細い横線
   ========================================================= */

.seta-single__inner {
	max-width: var(--seta-article-w);
	margin-inline: auto;
	padding: 80px 16px 0;
}

.seta-single__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.seta-single__title {
	margin: 0;
	font-size: var(--seta-size-2xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
}

.seta-single__date {
	margin: 0;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-s);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text-mute);
}

.seta-single__thumb {
	margin: 0 0 40px;
}

/*
 * 記事の画像は 1000px で止める（2026-10-05 マスター指示）。
 *
 * 本文の枠が 1120px なので、何もしないと画像が約1088pxで出て大きすぎた。
 * アイキャッチも本文中の画像も、同じ幅で止めて真ん中に置く。
 */
.seta-single__thumb img,
.seta-single__body img {
	display: block;
	max-width: min(100%, 1000px);
	height: auto;
	margin-inline: auto;
}

.seta-single__thumb img {
	width: 100%;
	border-radius: 10px;
}

/* タブレット以上では画像の全体が画面に収まる高さで止める（縦長のチラシ用） */
@media (min-width: 600px) {
	.seta-single__thumb img,
	.seta-single__body img {
		width: auto;
		max-height: calc(100vh - var(--seta-anchor-offset, 220px) - 40px);
		object-fit: contain;
	}
}

/* 600〜959px は縦長のチラシだけが大きくならないよう、高さで止める（横長の写真は本文の幅のまま） */
@media (min-width: 600px) and (max-width: 959px) {
	.seta-single__thumb img,
	.seta-single__body img {
		max-height: min(510px, calc(100vh - var(--seta-anchor-offset, 220px) - 40px));
	}
}

.seta-single__body {
	font-size: var(--seta-size-m);
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-loose);
}

/* 本文の中の区切り線（Figma の Vector 1 / 2） */
.seta-single__body hr {
	margin-block: 40px;
	border: 0;
	border-top: 1px solid var(--seta-border);
}

/* --- 一覧へ戻る（Figma 2441-3623：256×60） --- */

.seta-single__back {
	max-width: var(--seta-article-w);
	margin: 40px auto 80px;
	padding-inline: 16px;
	text-align: center;
}

/*
 * Figma 2441-3623／3624 を実測して入れ直した（2026-10-06）。
 *
 * 前は下地の無いただの文字で、幅を 256px で押し広げていた。
 * そのため、文字だけが大きく浮いて見えていた
 * （マスター指摘「これサイズでかい」）。
 *
 * Figma は「もっと読む」と同じ、緑〜黄の淡いグラデーションの小さい箱である。
 *   高さ60・角丸8・左右20・上下6・間10
 *   文字 20px Medium・字間2.4px・行の高さ1.4・色 crow
 * 幅は決め打ちにせず、中身に合わせる。
 */
.seta-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 60px;
	padding: 6px 20px;
	border-radius: 8px;
	background: linear-gradient(90deg, #cdffe6 0%, #f9f2d6 100%);
	font-size: var(--seta-size-xl);
	font-weight: 500;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	white-space: nowrap;
	color: var(--seta-text);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-back:hover {
	opacity: 0.85;
	text-decoration: none;
}

/* 左向きの小さな矢印。線で描いている */
.seta-back__arrow {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border: 2px solid currentColor;
	border-right: 0;
	border-top: 0;
	transform: rotate(45deg);
}

@media (max-width: 959px) {
	.seta-single__inner {
		padding-top: var(--seta-section-y-sp);
	}

	.seta-single__title {
		font-size: var(--seta-size-xl);
	}
}

/* --- お知らせの全件一覧（archive-seta_news.php） --- */

/*
 * Figma 2566-6920 / 2566-6921。
 *   本文の幅        800px（--seta-content-w と同じ）
 *   上の余白        60px
 *   下の余白        80px
 *
 * 2026-10-09 まで 706px を直書きしていた。注記には「Figmaの本文幅」と
 * 書いてあったが、実際の Figma は 800px だった。確かめずに書いた値である。
 *
 * max-width に 32px 足しているのは、左右の 16px を内側に持っているためである。
 * こうしないと中身が 768px になり、また Figma と合わなくなる。
 */
.seta-archive__inner {
	max-width: calc(var(--seta-content-w) + 32px);
	margin-inline: auto;
	padding: 60px 16px 80px;
}

/*
 * SWELL の .l-content が上下に 64px の余白を持っている。
 * そのままだと上の余白が 64 + 60 = 124px になり、Figma の 60px と合わない。
 * 記事一覧の画面でだけ打ち消す。
 *
 * :has() は「この中に .seta-archive がある .l-content」という意味である。
 * 他の画面（固定ページ・記事ページ）の .l-content には当たらない。
 * 万一 :has() が効かない環境でも、余白が元のまま残るだけで壊れない。
 */
.l-content:has(> .seta-archive) {
	padding-block: 0;
}

/*
 * 見出しの段（Figma 2566-6922）。
 * 飾りと文字の重なりは .seta-heading が受け持つ。
 * ここでは一覧用に上下の余白だけを決める。
 *   上  … .seta-archive__inner の padding が 60px 持っているので 0
 *   下  … Figma の gap 40px
 * .seta-heading の既定（上 --seta-section-y / 下 48px）を打ち消している。
 */
.seta-archive__heading {
	margin-top: 0;
	margin-bottom: 40px;
}

/* スマホでは、パンくずから見出しまでを固定ページと同じ 28px にする（上の余白 60px と見出しの 48px が重なっていた） */
@media (max-width: 599px) {
	.seta-archive__inner {
		padding-top: 0;
	}

	.seta-archive .seta-archive__heading {
		margin-top: 28px;
	}
}

.seta-archive__title {
	margin-bottom: 0;
	font-size: var(--seta-size-2xl);
	font-weight: 500;
	line-height: var(--seta-leading-tight);
	text-align: center;
}

/* ページ送り（番号） */
.seta-pagination {
	margin-top: 48px;
}

.seta-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	padding-left: 0;
}

.seta-pagination a,
.seta-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--seta-border);
	border-radius: 999px;
	font-family: var(--seta-font-num);
	font-size: var(--seta-size-s);
	text-decoration: none;
}

/* いま開いているページ */
.seta-pagination .current {
	background: var(--seta-wall);
	border-color: transparent;
	font-weight: 700;
}

/* =========================================================
   ヘッダー（functions.php の swl_parts__gnav / swell_parts_head_logo）

   Figma: 2297-1185（上：ロゴ・電話・ボタン2つ／下：全幅のナビ）

   実物の作り（確認用のWordPressで確認・2026-10-05）
     header.l-header
       div.l-header__inner
         div.l-header__logo（ロゴ ＋ .seta-header-contact）
         nav.l-header__gnav > ul.c-gnav
            li.menu-item …（メニュー）
            li.seta-header-extra（ボタン2つ）

   2段にするため、.l-header__inner を折り返し、ナビを次の行へ全幅で落とす。
   ボタン2つは上の行へ戻す。SWELL のクラスへの上書きなので、6章の一覧に書いてある。
   ========================================================= */

/*
 * SWELL の細い帯（RSS・検索アイコン）は Figma に無いので消す。
 * .l-header__bar は SWELL のクラス。6章の一覧に書いてある。
 */
.l-header__bar {
	display: none;
}

/*
 * スクロールすると上から出てくる SWELL の簡易ヘッダーは出さない（2026-10-05 指示）。
 * 本物のヘッダーと形が違うためである。
 * 代わりに、本物のヘッダーをそのまま上に貼り付ける。
 */
.l-fixHeader {
	display: none !important;
}

.l-header {
	position: sticky;
	top: 0;
	/* SWELL の簡易ヘッダー（101）より下、追従ボタン（90）より上 */
	z-index: 95;
}

/* 管理バーが出ているときは、その下に貼り付ける */
.admin-bar .l-header {
	top: var(--swl-adminbarH, 32px);
}

/*
 * ぱんくずの背景色と影を外す（2026-10-05 指示）。
 * SWELL は .p-breadcrumb.-bg-on に薄い灰色と内側の影を付ける。
 * Figma には帯が無いので、文字だけ残す。
 */
.p-breadcrumb.-bg-on {
	background: none;
	box-shadow: none;
}

/*
 * パンくずの最後に、いま見ているページの名前を出す（2026-10-06 マスター指示）。
 *
 * SWELL は記事ページでだけ、最後の1つを隠している。
 *   .single .p-breadcrumb__item:last-child>span.p-breadcrumb__text { display:none }
 *   （親テーマ build/css/main.css で確認）
 * そのため「ホーム ＞ お知らせ ＞」で切れて終わっていた。
 *
 * 上の指定より強くしないと勝てないので、.p-breadcrumb を1つ足してある。
 * なお .single は body ではなく、SWELL が中に作る囲みに付く。
 * body から書くと当たらない（2026-10-06 実機で確認）。
 *
 * 記事の名前は長いことがあるので、入りきらないときは
 * 行の終わりを「…」にして1行に収める。
 */
.single .p-breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
	display: inline-block;
	overflow: hidden;
	max-width: 32em;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

.p-breadcrumb__item:last-child {
	min-width: 0;
}

/* =========================================================
   TOPのファーストビュー（inc/front-hero.php / [seta_fv]）

   Figma: 2299-3089（1440×300。白文字2行を左から88pxの位置に）
   画像3枚の入れ替えはマスターの指示（2026-10-05）。Figma は1枚。
   ========================================================= */

.seta-fv {
	position: relative;
	height: 400px;
	overflow: hidden;
}

.seta-fv__slides {
	position: absolute;
	inset: 0;
	/* 切れ目で下地が見えないように、1枚目を背景にも敷いている（PHP側で指定） */
	background-size: cover;
	background-position: center 35%;
}

.seta-fv__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	/*
	 * 18秒で3枚。1枚あたり6秒持ち、入れ替わりは0.9秒かけて重ねる。
	 * 0% …消えている／5%（0.9秒）…出きる／33.3%（6秒）…ここから消え始める
	 */
	animation: seta-fv-cross 18s linear infinite;
}

/* 人物の頭が帯（PC 400px）に入るよう、1枚ずつ上寄りで切る。背景の1枚目も同じ位置 */
.seta-fv__slide:nth-of-type(1) {
	object-position: center 35%;
}

.seta-fv__slide:nth-of-type(2),
.seta-fv__slide:nth-of-type(3) {
	object-position: center 38%;
}

/*
 * nth-child ではなく nth-of-type を使う。
 * SWELL の遅延読み込みが img の後ろに <noscript> を差し込むため、
 * nth-child だと 1・3・5 番目が画像になり、順番がずれる（2026-10-05 実機で確認）。
 */
.seta-fv__slide:nth-of-type(2) {
	animation-delay: 6s;
}

.seta-fv__slide:nth-of-type(3) {
	animation-delay: 12s;
}

@keyframes seta-fv-cross {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	33.333% {
		opacity: 1;
	}
	38.333% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/*
 * 動きを減らす設定にしている人には、入れ替えずに1枚目だけを出す。
 * 目まいや乗り物酔いの原因になるため。
 */
@media (prefers-reduced-motion: reduce) {
	.seta-fv__slide {
		animation: none;
	}

	.seta-fv__slide:first-child {
		opacity: 1;
	}
}

/*
 * 文字を守るための影。
 *
 * Figma は1枚絵（夕景）の上に白文字を置いているので影は要らなかったが、
 * 3枚にすると「春の桜」「秋の紅葉」は左上が白く飛んでいて白文字が読めない。
 * そのため左から薄く暗さを乗せている。Figma に無い追加である（2026-10-05）。
 */
.seta-fv__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.08) 40%,
		rgba(0, 0, 0, 0) 55%
	);
}

.seta-fv__lead {
	position: absolute;
	top: 50%;
	left: 88px;
	transform: translateY(-50%);
	margin: 0;
	max-width: calc(100% - 176px);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.5;
	color: var(--seta-white);
	/*
	 * 影は Figma の値（オレンジのぼかし）だけ。黒い影は足さない。
	 * 2026-10-05：黒い影を足すと、文字の輪郭がふくらんで太く見える。
	 * 読みやすさは、後ろの暗さ（.seta-fv__slides::after）だけで作る。
	 */
	text-shadow: 0 0 20px rgba(255, 100, 4, 0.16);
}

@media (max-width: 959px) {
	.seta-fv {
		height: 220px;
	}

	.seta-fv__lead {
		left: 16px;
		max-width: calc(100% - 32px);
		font-size: 20px;
	}
}

/* --- 上段：ロゴ・電話・ボタン --- */

/*
 * SWELL の .l-container は左右に余白を置き、幅を 1296px で止める。
 * Figma のヘッダーは「上段が左右10px・下段のナビは1440px全幅」なので、
 * 枠の余白をここで外し、余白は上段の行だけに付け直す。
 *
 * ここを 100vw と負の余白（calc(50% - 50vw)）で広げる書き方もあるが、
 * 縦スクロールバーが出ると 100vw がその分だけ画面より広くなり、
 * 横スクロールが生まれる。だからその書き方は使わない。
 */
.l-header__inner {
	flex-wrap: wrap;
	align-items: center;
	row-gap: 10px;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/*
 * セレクタを3段にしているのは、SWELL 側に
 *   .-series .l-header__logo { margin-right:24px; padding:16px 0 }
 * があり、.l-header__logo だけでは負けるため（2026-10-05 実機で確認）。
 */
.l-header .l-header__inner > .l-header__logo {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 24px;
	/* Figma 2297-1185：上段は左右10px（px-[10px] / justify-between） */
	padding: 16px 10px;
	/* SWELL が付ける右の余白。ボタンがこの中にあるので打ち消す */
	margin-right: 0;
}

/* ロゴ（Figma 2566-5148：260×74）

   SWELL の h1.c-headLogo は高さが40pxで止まり、画像がはみ出していた。
   入れ物も中央ぞろえにして、画像の高さに合わせる（2026-10-05 修正）。 */
.l-header .c-headLogo,
.l-header .c-headLogo__link {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 0;
}

.seta-header-logo {
	display: block;
	width: auto;
	max-width: 260px;
	max-height: 74px;
	height: auto;
	object-fit: contain;
}

/*
 * 電話番号のかたまり。Figma 2566-5148 ではボタンのすぐ左にある
 * （ロゴ ←→ ［電話＋ボタン］の両端ぞろえ）。
 * 2026-10-05：ロゴのすぐ右に出ていたのを直した。
 */
.seta-header-contact {
	margin-left: auto;
	text-align: right;
}

.seta-header-tel {
	display: inline-flex;
	font-weight: 700;
	letter-spacing: 1.5px;
	align-items: center;
	gap: 8px;
	font-size: var(--seta-size-2xl);
	text-decoration: none;
	color: var(--seta-text);
	white-space: nowrap;
}

.seta-header-tel img {
	width: 16px;
	height: auto;
}

/*
 * 受付時間（2026-10-05 修正）。
 *
 * マスターから「ヘッダーの情報がFigmaより足りない」と指摘があり、
 * Figma 2566-5148 の中の該当の文字（I2566:5148;2197:1186）を開いて照らした。
 *   Figma … 16px Regular・字間0・行の高さ1.4・色 #303030
 *   実装   … 12px・字間0.1em・色 #706d65（薄い灰）
 * 文字が4px小さく、色も薄かったので、ほとんど読めない行になっていた。
 *
 * 色は、書き出した画像から拾った（いちばん濃い点が #303030）。
 */
.seta-header-hours {
	margin-top: 2px;
	font-size: var(--seta-size-m);
	letter-spacing: 0;
	line-height: var(--seta-leading-tight);
	color: var(--seta-text);
	white-space: nowrap;
}

/* ナビの枠は幅いっぱいを取り、2行目へ落ちる */
.l-header__gnav {
	flex: 1 0 100%;
	order: 1;
}

/* --- ボタン2つ（上段の右端。ロゴの行に出している） --- */

.seta-header-btns {
	display: flex;
	gap: 10px;
	align-items: center;
}

.seta-header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 200px;
	height: 60px;
	padding-inline: 16px;
	border-radius: 8px;
	font-size: var(--seta-size-m);
	font-weight: 500;
	line-height: var(--seta-leading-tight);
	color: var(--seta-white);
	text-decoration: none;
}

.seta-header-btn img {
	flex: 0 0 auto;
}

/* LINE（緑）。2026-10-05：新デザイン 2566-5148 の値に合わせた */
.seta-header-btn--line {
	background: #4bcb4b;
}

/* 問い合わせ（青） */
.seta-header-btn--contact {
	background: #57b6ff;
}

.seta-header-btn:hover {
	opacity: 0.85;
}

/* --- 下段：ナビの帯（全幅） --- */

/*
 * .l-header__inner の余白を外してあるので、幅100%でそのまま画面いっぱいになる。
 * 項目の間は Figma のとおり 4px あける（罫線ではなく隙間）。
 */
.c-gnav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	gap: 4px;
	margin-inline: 0;
	padding-inline: 0;
}

.c-gnav > .menu-item:not(.seta-header-extra):not(.c-gnav__s) {
	flex: 1 1 0;
	min-width: 0;
	/* 新デザイン 2566-5148：下地 #FFF3E0・枠1px wall_cl・内側にうっすら影 */
	background: #fff3e0;
	border: 1px solid var(--seta-wall);
	box-shadow: var(--seta-inner-shadow);
	text-align: center;
}

.c-gnav > .menu-item:not(.seta-header-extra):not(.c-gnav__s) > a {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Figma 2297-1185：項目の高さ 64px、文字は 18px Medium・字間 2.4px */
	min-height: 64px;
	padding: 8px;
	font-size: var(--seta-size-l);
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: var(--seta-leading-tight);
	color: var(--seta-oak);
	text-decoration: none;
}

/* SWELL が .ttl に小さい文字の大きさを当てているので、a の指定を継がせる */
.c-gnav > .menu-item:not(.seta-header-extra):not(.c-gnav__s) > a .ttl {
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/*
 * ホバーの色（2026-10-05 マスター指示で変更）。
 *
 * 前はピンク（--seta-sakura #ffebee）だった。
 * ナビの下地は #FFF3E0 の暖色なので、ピンクが浮いて見える、という指摘。
 *
 * 枠の色と同じ wall_cl（#fbe8bc）を、透けさせずに敷いている。
 * ・Figma にある色なので、決めた色の外に出ない
 * ・下地より一段だけ濃いので、どこを触っているかは分かる
 * ・色が変わるのではなく「濃くなる」ので、暖色のまとまりが崩れない
 */
.c-gnav > .menu-item:not(.seta-header-extra):not(.c-gnav__s) > a:hover,
.c-gnav > .menu-item:not(.seta-header-extra):not(.c-gnav__s) > a:focus-visible {
	background: #fbe8bc;
}

/*
 * SWELL はナビに下線が伸びる動きを付ける。Figma に無いので消す（2026-10-05 指示）。
 * 6章の上書き一覧に書いてある。
 */
.c-gnav > .menu-item > a::after,
.c-gnav > .menu-item > a:hover::after {
	content: none;
	display: none;
}

/* --- 960〜1199px（Figma の1440pxが、そのままでは入らない幅） ---

   Figma は1440px固定である。そのままの大きさだと
     ロゴ260 ＋ 電話まわり412 ＋ ボタン410 ＋ 余白 ＝ 約1100px
   になり、1200px を切るとボタンが次の行に落ちて
   ヘッダーが 180px → 264px に伸びていた（2026-10-05 実測）。

   959px 以下は引き出し式に切り替わるので、その手前のこの幅だけ、
   文字とボタンを少し詰めて1行に収めている。

   ※ この節は、上のヘッダーの指定より後に置くこと。
      同じ強さの指定なので、前に置くと負ける（2026-10-05 に実際に負けた）。 */

@media (min-width: 960px) and (max-width: 1199px) {
	.l-header .l-header__inner > .l-header__logo {
		gap: 16px;
	}

	.seta-header-tel {
		font-size: var(--seta-size-xl);
	}

	/*
	 * 受付時間は2行に折り返してよい。
	 *
	 * white-space だけでは折れない。
	 * 電話まわりは flex の子なので、既定では中身の幅より狭くならない。
	 * min-width: 0 と max-width をあわせて指定して、初めて折り返す。
	 */
	.seta-header-contact {
		min-width: 0;
		max-width: 240px;
	}

	.seta-header-hours {
		white-space: normal;
	}

	.seta-header-btn {
		min-width: 0;
		width: 170px;
		padding-inline: 10px;
		font-size: var(--seta-size-s);
	}
}

/* --- スマートフォン（SWELL が別のヘッダーに切り替える幅） --- */

@media (max-width: 959px) {
	.seta-header-tel {
		font-size: var(--seta-size-l);
	}

	.c-gnav {
		margin-inline: 0;
	}
}

/* =========================================================
   右端に追従する丸いボタン3つ（inc/float-buttons.php）

   Figma: 2297-2261（150pxの円が3つ、間25px、右端から33px）
   色は Figma から書き出した画像で拾った値である。

   マスターの指示（2026-10-05）：追従する／スマートフォンでは出さない
   ========================================================= */

/*
 * 置き場所：画面の右下（2026-10-05 マスター指示）。
 * 前は右端の上下中央だった。本文の読みを邪魔するので下へ移した。
 */
.seta-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* SWELL の追従ヘッダー（z-index 100 前後）より手前。ただし一番上にはしない */
	z-index: 90;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/*
 * 2026-10-05 指示：ページを開いた直後から出しておく。
 * （前は少し下げてから出していたが、新しいページへ移るたびに
 *   いちど消えて分かりにくかった）
 */

@media (prefers-reduced-motion: reduce) {
	.seta-float {
		transition: none;
	}
}

.seta-float__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Figma は150px。
	 * 2026-10-05 に2回「大きすぎる」と指摘があり、150 → 116 → 84 と下げている。
	 */
	width: 84px;
	height: 84px;
	border-radius: 50%;
	font-size: var(--seta-size-xs);
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: var(--seta-leading-tight);
	color: var(--seta-white);
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 内側の白い破線の輪 */
.seta-float__btn::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 2px dashed var(--seta-white);
	border-radius: 50%;
}

.seta-float__label {
	position: relative;
}

.seta-float__btn--blue {
	background: #8eccfb;
}

.seta-float__btn--pink {
	background: #f3afbd;
}

.seta-float__btn--green {
	background: #8de08d;
}

.seta-float__btn:hover {
	transform: scale(1.04);
	opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
	.seta-float__btn {
		transition: none;
	}

	.seta-float__btn:hover {
		transform: none;
	}
}

/*
 * 画面の高さが足りないときは、さらに小さくして収める。
 * 3つ並べた高さは 84×3 + 10×2 = 272px である。
 */
@media (max-height: 520px) {
	.seta-float {
		gap: 8px;
	}

	.seta-float__btn {
		width: 68px;
		height: 68px;
		font-size: 10px;
		letter-spacing: 0;
	}
}

/*
 * スマートフォンでは出さない（マスターの指示）。
 * 959px は SWELL がヘッダーをスマートフォン用に切り替える幅である。
 */
@media (max-width: 959px) {
	.seta-float {
		display: none;
	}
}

/* ---------------------------------------------------------
   ページの中の移動（#目印 へ飛ぶとき）

   2026-10-05 マスター指摘
   「内部リンクで遷移したとき、ヘッダーに隠れてタイトル部分が見えない」

   ヘッダーは画面の上に貼り付いている（position: sticky）。
   ブラウザは、飛び先の要素の上端を画面の上端に合わせるので、
   そのままだとヘッダーの下に見出しがもぐってしまう。

   scroll-padding-top は「画面の上に、これだけ隠れる部分があるものとして止まれ」
   という指定である。ヘッダーの高さ＋少しの余裕を入れている。
   reveal.js が SWELL の移動を止め、ブラウザの移動（この値を見る）に任せている。

   ヘッダーの高さ：PC 180px ／ 959px以下は貼り付かないので 0
   --------------------------------------------------------- */

:root {
	/* ヘッダー180px ＋ 余裕40px。読み込み後は reveal.js が実測したヘッダーの高さ＋24px に置き換える */
	--seta-anchor-offset: 220px;
}

html {
	scroll-padding-top: var(--seta-anchor-offset);
}

@media (max-width: 959px) {
	:root {
		/* ヘッダーが貼り付かない幅。少しだけ上を空けておく */
		--seta-anchor-offset: 24px;
	}
}

/* ---------------------------------------------------------
   引き出しメニュー（ハンバーガー）を右から出す

   2026-10-06 マスター指示。

   SWELL は、ヘッダーの並びの設定（header_layout_sp）が
   「center_left」のとき `.p-spMenu.-left` を付け、左から出す。
   設定を変えるとヘッダーの並びまで変わってしまうので、
   ここでは出る向きだけを右へ入れ替えている。

   SWELL 側の指定
     .-left  .p-spMenu__inner { left:0;  transform: translateX(-88vw) }
     .-right .p-spMenu__inner { right:0; transform: translateX(88vw) }
   閉じるボタンの位置も左右で入れ替わる。
   --------------------------------------------------------- */

.p-spMenu.-left .p-spMenu__inner {
	left: auto;
	right: 0;
	transform: translateX(88vw);
}

/*
 * 開いた状態は、SWELL が body に data-spmenu="opened" を付けて表している
 * （親テーマ build/css/main.css で確認）。
 */
[data-spmenu="opened"] .p-spMenu.-left .p-spMenu__inner {
	transform: translateX(0);
}

.p-spMenu.-left .p-spMenu__closeBtn {
	left: auto;
	right: 0;
}

/* ---------------------------------------------------------
   引き出しメニューの中のボタン3つ

   2026-10-06 マスター指示。
   PC では画面の右下に出している3つを、狭い画面では引き出しの中に入れる。
   （置き場所：parts/header/sp_menu.php。SWELL の部品を子テーマ側で差し替えている）

   形は、本文で使っているボタンに合わせてある。
     お問い合わせ … Figma 2566-7193 の桃〜橙のグラデーション・白文字
     イベント申込 … Figma 2566-7442 の緑〜生成りのグラデーション・濃い文字
     LINE        … ヘッダーの「情報を受け取る」と同じ緑・白文字
   大きさは3つとも同じ。角は8pxで丸める。
   --------------------------------------------------------- */

.seta-spmenu-btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

.seta-spmenu-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 60px;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: var(--seta-size-m);
	font-weight: 700;
	letter-spacing: var(--seta-tracking);
	line-height: var(--seta-leading-tight);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.seta-spmenu-btn:hover {
	opacity: 0.88;
}

/* 右端の、白く光る丸（本文の大きいボタンと同じ飾り） */
.seta-spmenu-btn__icon {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--seta-white);
	box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.8);
}

.seta-spmenu-btn--contact {
	background: linear-gradient(90deg, #ffc8e6 0%, #ffcd96 100%);
	box-shadow: inset 0 0 16px rgba(253, 87, 87, 0.16);
	color: var(--seta-white);
}

.seta-spmenu-btn--event {
	background: linear-gradient(90deg, #cdffe6 0%, #f9f2d6 100%);
	color: var(--seta-text);
}

.seta-spmenu-btn--line {
	/* ヘッダーの「情報を受け取る」と同じ緑 */
	background: #4bcb4b;
	color: var(--seta-white);
}

/*
 * SWELL の「上へ戻る」は出さない（2026-10-05 マスター指示）。
 *
 * 右下に出るので、追従ボタンの円と重なっていた。
 * 一度は左へずらしたが、ボタンごと不要との指示があったので消している。
 */
.p-fixBtnWrap,
.c-fixBtn,
#pagetop {
	display: none;
}

/* --- フッター（parts/footer/footer_contents.php）---

   Figma: 2297-2260（1440×556）
   ・背景 #EEEEEE（書き出した画像から色を拾った。クリーム色ではない）
   ・左列 460px は x=160 から、右列 403px は右端から160px。間は空ける
   ・文字は 16px・行間1.5。色は crow #303030
   2026-10-05：Figma と突き合わせて作り直した。ロゴが抜けていた
   -------------------------------------------------------- */

.seta-footer {
	background: #eeeeee;
}

.seta-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 403px);
	justify-content: space-between;
	gap: 40px;
	max-width: 1120px;
	margin-inline: auto;
	padding: 80px 16px;
	color: var(--seta-text);
}

/* 左列。Figma Frame 23（縦に並べ、間は32px） */
.seta-footer__org {
	font-size: var(--seta-size-m);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.seta-footer__label,
.seta-footer__org-name {
	font-size: var(--seta-size-m);
	font-weight: 400;
}

.seta-footer__label + .seta-footer__org-name,
.seta-footer__org-name + .seta-footer__center {
	margin-top: 4px;
}

/* センター名には下線を引く（Figma のとおり） */
.seta-footer__center {
	font-size: var(--seta-size-m);
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--seta-border);
}

.seta-footer__center a {
	color: inherit;
	text-decoration: inherit;
}

.seta-footer__center a:hover,
.seta-footer__logo a:hover {
	opacity: 0.75;
}

/* ともがきのロゴ。Figma では 200×64 */
.seta-footer__logo {
	margin-top: 20px;
}

.seta-footer__logo img {
	display: block;
	width: 200px;
	height: auto;
}

.seta-footer__tel {
	margin-top: 20px;
	font-size: var(--seta-size-m);
	font-weight: 400;
	letter-spacing: 0.05em;
}

/* 受付時間（2026-10-06 追加）。電話番号のすぐ下に、少し小さく置く */
.seta-footer__hours {
	margin: 4px 0 0;
	font-size: var(--seta-size-s);
	letter-spacing: 0;
	line-height: var(--seta-leading-body);
}

.seta-footer__hours {
	margin-left: 12px;
	font-family: var(--seta-font-jp);
	font-size: var(--seta-size-s);
	font-weight: 400;
}

.seta-footer__note {
	margin-top: 4px;
	font-size: var(--seta-size-m);
	line-height: 1.5;
}

.seta-footer__address {
	margin-top: 32px;
	font-size: var(--seta-size-m);
	line-height: 1.5;
}

.seta-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 32px;
	font-size: var(--seta-size-m);
}

/* --- フッター右側（LINE・SNS）。Figma Frame 20 --- */

.seta-footer__social {
	justify-self: end;
	width: 100%;
	max-width: 403px;
	/* 左列より 56px 下から始まる（Figma: 左 y=80／右 y=136） */
	margin-top: 56px;
}

/* バッジ＋アカウント名（左）と QR（右）を横に並べる */
.seta-footer__line {
	display: grid;
	grid-template-columns: minmax(0, 259px) 120px;
	gap: 24px;
	align-items: start;
}

.seta-footer__line-badge img {
	display: block;
	width: 240px;
	height: auto;
}

.seta-footer__line-qr {
	display: block;
	width: 120px;
	height: auto;
}

.seta-footer__line-text {
	margin-top: 10px;
	/* Figma の行の高さ 19px から逆算（12 × 1.6）。259px の枠に2行で収まる */
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--seta-text-grey);
}

/*
 * SNSの段。上に細い区切り線を引く（Figma の footer に入っている）。
 * 線は右列の幅いっぱいまで伸ばす。
 */
.seta-footer__sns {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	padding-left: 0;
	border-top: 1px solid #cfcfcf;
	list-style: none;
}

.seta-footer__sns-item {
	width: 80px;
	text-align: center;
}

.seta-footer__sns-item > a {
	display: inline-block;
}

.seta-footer__sns-item img:first-child {
	width: 32px;
	height: 32px;
}

.seta-footer__sns-qr {
	display: block;
	width: 80px;
	height: auto;
	margin-top: 10px;
}

/* --- スマートフォン（暫定。Figma は 1440px のみ・2026-10-01） --- */

@media (max-width: 959px) {
	.seta-heading {
		margin-bottom: 24px;
	}

	.seta-heading__text {
		font-size: var(--seta-size-xl);
	}

	.seta-cta {
		margin-block: var(--seta-section-y-sp);
	}

	.seta-checklist li {
		font-size: var(--seta-size-m);
		padding-left: 28px;
	}

	.seta-checklist li::before {
		width: 20px;
		height: 20px;
	}

	.seta-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: var(--seta-section-y-sp);
		/* フッターは本文の枠の外にあるので、端の余白を自分で持つ */
		padding-inline: var(--seta-gutter);
	}

	/*
	 * 1列に積んだら、右列も左ぞろえにする（2026-10-05 マスター指示）。
	 *
	 * PC では右端に寄せている（justify-self: end）。
	 * 1列になると、右に寄ったまま・幅も403pxで止まったままで、
	 * 上の運営元の段と頭がそろわなかった。
	 */
	.seta-footer__social {
		justify-self: start;
		width: 100%;
		max-width: none;
		margin-top: 0;
	}

	.seta-footer__line {
		grid-template-columns: minmax(0, 259px) 100px;
		gap: 16px;
		justify-content: start;
		justify-items: start;
		text-align: left;
	}

	.seta-footer__sns {
		justify-content: flex-start;
		margin-top: 24px;
		flex-wrap: wrap;
	}

	/* お知らせのカードは、狭い画面では縦に積む */
	.seta-news {
		grid-template-columns: 1fr;
	}

	/* ---------------------------------------------------------
	   お知らせの一覧型（狭い画面）

	   2026-10-09 マスター指摘「レスポンシブで表示崩れてる」。
	   測ったら2つ崩れていた。

	   1. 日付と題名が横に並んだままだった。
	      390px では題名に238pxしか残らず、4行に折れていた
	   2. 画像が本文の下に取り残されて、左下にぽつんと出ていた。
	      PCでは右端にある200×57の画像が、縦積みにしたときの置き場所を
	      決めていなかったためである

	   縦に積むときは、画像を先（上）に出す。そのほうが
	   「画像 → 日付 → 題名 → 抜粋」と上から素直に読める。
	   --------------------------------------------------------- */

	.seta-news--list .seta-news__item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* 画像を本文より先に出す */
	.seta-news--list .seta-news__thumb {
		order: -1;
	}

	.seta-news--list .seta-news__body {
		gap: 10px;
	}

	.seta-news__thumb {
		flex: 0 0 auto;
		width: 200px;
	}
}

/* =========================================================
   6. SWELL のクラスへの上書き一覧

   ここに書いたものは、SWELL の更新でクラス名が変わると外れる。
   3ヶ月ごとの点検で、この一覧を見ながら表示を確認すること。

   追加したら、ここに「クラス名 / 何のため / いつ」を1行で書く。

   | クラス          | 何のため                                   | いつ       |
   |-----------------|--------------------------------------------|------------|
   | body            | 書体・本文の色・字間・行間                 | 2026-10-01 |
   | .l-header__bar  | RSS・検索の細い帯を消す（Figma に無い）    | 2026-10-05 |
   | .l-header__inner | 左右の余白と幅の上限を外す（ナビを全幅にするため） | 2026-10-05 |
   | .l-header .l-header__inner > .l-header__logo | 上段だけ左右10pxに戻す。SWELL の `.-series .l-header__logo` より強いセレクタにしてある | 2026-10-05 |
   | .c-gnav         | グローバルナビを下段の帯にする（Figma 2297-1185） | 2026-10-05 |
   | .c-gnav .menu-item | 項目を等分に並べ、間を4pxあける         | 2026-10-05 |
   | .post_content h3（.seta-cases__title / .seta-faq__category） | SWELL が付ける線・飾り・余白を外す | 2026-10-05 |
   | .alignfull      | （上書きではなく利用）FVを全幅にするのに使っている。SWELL がスクロールバーの幅を差し引いてくれる | 2026-10-05 |
   | :root:root（--color_* など） | SWELL が部品に使う色を、SETA-OYA の色に差し替える。1-2章にまとめてある | 2026-10-05 |
   | .l-header .c-iconBtn:not(.-menuBtn) / .c-iconList__item.-search / .c-gnav__s | 虫眼鏡（検索）を出さない | 2026-10-05 |
   | .p-fixBtnWrap / .c-fixBtn / #pagetop | 「上へ戻る」を出さない | 2026-10-05 |

   点検では、SWELL を更新したあとに次を必ず見る。
   ・ヘッダーのナビが**画面いっぱいの帯**のまま出ているか（右に余白が出ていないか）
   ・TOPのFVが**全幅**で、画像が3枚とも入れ替わるか
   ・記事の中の**ボタン・囲み枠・マーカー**が、青緑に戻っていないか
     （戻っていたら、SWELL が変数の名前を変えた可能性がある）
   ・虫眼鏡と「上へ戻る」が、復活していないか
   ========================================================= */

/* =========================================================
   7. ブロックのグループに入れ物が1枚挟まる場合の調整

   .wp-block-group は中に .wp-block-group__inner-container を作ることがある。
   その場合、外側へ当てた grid / flex は効かない。
   実機で確認して、両方へ当てる形にしてある（2026-10-05）。
   ========================================================= */

.seta-heading:has(> .wp-block-group__inner-container) {
	display: block;
}

/* =========================================================
   8. 画面の幅に合わせた調整（タブレット・スマートフォン）

   【区切りの決め方】
   Figma は 1440px の1種類しかない。
   折り返し方はこちらで決めた（2026-10-05、マスターの指示で作成）。

   区切りは SWELL と同じ 600px / 960px にしてある。
   SWELL はこの幅でヘッダーを引き出し式に切り替えるので、
   別の値にすると「ナビは引き出しなのに中身はPCのまま」という
   ちぐはぐな状態ができてしまう。

     PC        960px 以上    … Figma のまま
     タブレット 600〜959px    … 2列は保つ。ヘッダーは引き出し式
     スマホ     599px 以下    … 1列。追従ボタンは出さない

   【本文の幅（実測）】
     1440px → 900px ／ 834px → 767px ／ 390px → 359px

   ここより上の節にも「959px以下」の指定がある。
   そちらは部品ごとの調整、ここは画面全体の組み替えである。
   ========================================================= */

/* ---------------------------------------------------------
   8-0. 画面の端の余白（959px 以下）

   2026-10-05 のマスター指示。
   「タブレットとスマホで、テキストが縁ギリギリまで入っている」

   原因は2つあった。

   1. SWELL の #content は左右の余白を 4vw で取る。
      390px では 15.6px しかない。指で持つ端末では狭い
   2. 画面の端まで色を敷く帯（.seta-types / .seta-band-cream など）は
      本文の枠から外へ出ている。枠の余白が効かないので、
      帯の内側に自分で余白を持たせる必要がある
      （8-3 にあった .post_content > * { padding-inline: 0 } が、
       帯が自前で持っていた16pxまで消していた。これが直接の原因）

   ここで余白の値を1か所にまとめ、枠と帯の両方に同じ値を配っている。
   --------------------------------------------------------- */

@media (max-width: 959px) {
	:root {
		--seta-gutter: 40px;
	}

	/* 本文の枠 */
	#content {
		padding-inline: var(--seta-gutter);
	}

	/*
	 * 画面の端まで広がる帯。中身にだけ余白を付ける。
	 * .seta-voices（吹き出しの流れ）は端から端まで流すので入れない。
	 * 中の注記（__credit）だけ下げる。
	 */
	.seta-types,
	.seta-band-cream,
	.seta-tiles {
		padding-inline: var(--seta-gutter);
	}

	/* 注記は、左の寄せ幅を余白に合わせ直す */
	.seta-voices__credit {
		margin-inline: 0;
		padding-inline: var(--seta-gutter);
	}
}

@media (max-width: 599px) {
	:root {
		--seta-gutter: 24px;
	}
}

/* ---------------------------------------------------------
   8-1. ヘッダー（959px 以下）

   SWELL は 960px 未満でナビを引き出しに変える（.l-header__gnav が消える）。
   そのとき、ロゴの行に電話とボタンが並んだままだと横にはみ出す。

   .l-header__logo を display:contents にして、中の3つを
   ヘッダーの直接の子として並べ替えている。
   こうすると、SWELL の検索ボタン・メニューボタンと同じ行に置ける。
   --------------------------------------------------------- */

@media (max-width: 959px) {
	/* 追従ヘッダーの貼り付けは、引き出しと喧嘩するので外す */
	.l-header {
		position: static;
	}

	.l-header .l-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 10px;
		padding: 10px 16px;
	}

	/* 中の3つを、ヘッダーの直接の子として扱う */
	.l-header .l-header__inner > .l-header__logo {
		display: contents;
	}

	.l-header .c-headLogo {
		order: 1;
		margin-right: auto;
	}

	.l-header__customBtn {
		order: 2;
	}

	.l-header__menuBtn {
		order: 3;
	}

	/* 電話は1行まるごと使って中央に */
	.seta-header-contact {
		order: 4;
		flex: 1 0 100%;
		min-width: 0;
		margin-left: 0;
		text-align: center;
	}

	/* 受付時間は、狭い画面では折り返してよい */
	.seta-header-hours {
		white-space: normal;
	}

	.seta-header-tel {
		white-space: normal;
	}

	/*
	 * ボタン2つ（情報を受け取る／問い合わせる）は、画面の下に貼り付ける。
	 * 2026-10-05 のマスター指示。はじめはスマートフォンだけだったが、
	 * タブレットでも下に固定したい、と追加の指示があったので
	 * 引き出し式になる幅（959px以下）ぜんぶに広げている。
	 *
	 * ヘッダーの中にあるものを、そのまま下へ移している。
	 * （同じボタンを2つ置くと、読み上げで2回読まれてしまうため）
	 */
	:root {
		/* 下に貼り付くボタンの高さ。本文の下の余白もこれに合わせる */
		--seta-sp-bar-h: 64px;
	}

	.seta-header-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 96;
		gap: 0;
		padding: 0;
		margin: 0;
		box-shadow: 0 -2px 12px rgba(48, 48, 48, 0.12);
	}

	.seta-header-btn {
		flex: 1 1 0;
		min-width: 0;
		height: var(--seta-sp-bar-h);
		padding-inline: 10px;
		border-radius: 0;
		font-size: var(--seta-size-m);
	}

	/* 下に貼り付いたボタンで、ページの末尾が隠れないようにする */
	body {
		padding-bottom: var(--seta-sp-bar-h);
	}

	/*
	 * SWELL の「上へ戻る」ボタンが、下のボタンに重なる。
	 * ボタンのぶんだけ持ち上げる。
	 */
	.p-fixBtnWrap,
	.c-fixBtn,
	#pagetop {
		bottom: calc(var(--seta-sp-bar-h) + 12px);
	}

	.seta-header-logo {
		max-width: 200px;
	}
}

/*
 * 虫眼鏡（検索）は出さない（2026-10-05 マスター指示）。
 *
 * SWELL が3か所に出している。まとめて消す。
 *   1. ヘッダーの虫眼鏡ボタン（狭い画面）
 *   2. 引き出しメニューの中の「検索」
 *   3. ナビの中の虫眼鏡（いまは出していないが、念のため）
 *
 * 検索の窓そのもの（.p-searchModal）は、開く口が無くなるので触っていない。
 */
.l-header .c-iconBtn:not(.-menuBtn),
.c-iconList__item.-search,
.c-gnav__s {
	display: none;
}

/* ---------------------------------------------------------
   8-2. タブレット（600〜959px）

   2列は保つ。文字と余白だけ少し詰める。
   --------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 959px) {
	:root {
		--seta-section-y: 56px;
	}

	/*
	 * 大きいボタンは、幅を決め打ちにせず中身に合わせる。
	 * 決め打ちのままだと、文字が2行に折れてしまう。
	 */
	.seta-pill,
	.seta-pill.seta-pill--s,
	.seta-pill.seta-pill--blue {
		width: auto;
		max-width: 100%;
		padding-inline: 24px;
	}

	.seta-pill--s .seta-pill__label,
	.seta-pill__label {
		white-space: nowrap;
	}

	/* 2列のままで収まるもの。1列に落とさない */
	.seta-faq--card,
	.seta-supports,
	.seta-cases__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* お知らせのカードは2列（3列は入らない） */
	.seta-news {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * 3枚のときは、あまった最後の1枚を真ん中に置く（2026-10-06 マスター指示）。
	 *
	 * 2列に3枚を並べると、3枚目が左に寄って片側が空く。
	 * 2列ぶんにまたがらせたうえで、幅を1列ぶん（50% − 間20pxの半分）にして
	 * 真ん中に寄せている。
	 *
	 * 枚数が偶数のときは当たらないので、そのままである。
	 */
	.seta-news > .seta-news__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: calc(50% - 10px);
		justify-self: center;
	}

	/* 条件の箱2つは、幅が足りないので縦に積む */
	.seta-conds {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* 見出しは少し小さく */
	.seta-heading__text,
	.post_content .seta-heading__text {
		font-size: var(--seta-size-xl);
	}

	.seta-heading__icon,
	img.seta-heading__icon {
		width: 80px;
	}

	.seta-heading__icon,
	.seta-heading .seta-heading__icon,
	.post_content .seta-heading .seta-heading__icon,
	.post_content .seta-heading figure.seta-heading__icon {
		margin-right: -30px;
	}
}

/* ---------------------------------------------------------
   8-3. スマートフォン（599px 以下）

   1列にする。指で押せる大きさを確保する。
   --------------------------------------------------------- */

@media (max-width: 599px) {
	:root {
		--seta-section-y: 40px;
		--seta-section-y-sp: 32px;
	}

	/*
	 * 電話番号と受付時間は、スマートフォンでは出さない（2026-10-05 指示）。
	 *
	 * 消しているのは「ヘッダーの中の表示」だけである。
	 * 電話番号そのものはフッターと問い合わせページに残っているので、
	 * かけられなくなるわけではない。
	 */
	.seta-header-contact {
		display: none;
	}

	/*
	 * FVの文言を、2行で収まる大きさにする。
	 * 20px・字間1.5px のままだと、2行目
	 * 「それは、誰かの大切な場所になること。」が 390px の画面で
	 * 約387px になり、枠（358px）に入らず「と。」だけが3行目に落ちる。
	 */
	.seta-fv__lead {
		left: var(--seta-gutter);
		max-width: calc(100% - var(--seta-gutter) * 2);
		/*
		 * 2行目は18文字。画面の幅に合わせて字を縮め、どの幅でも2行で収める。
		 * 4.6vw は「（画面の幅 − 余白48px）÷ 18文字」からの逆算である。
		 * 360px で 16.6px、390px 以上では18pxで頭打ちになる。
		 */
		font-size: clamp(16px, 4.6vw, 18px);
		letter-spacing: 0.3px;
	}

	/*
	 * 大きいボタンは幅いっぱいにする。
	 * 幅を 280px で止めて左右に40pxずつ余白を取る作りのままだと、
	 * 文字の長いボタン（404ページの「お問い合わせはこちらから」）が
	 * 360px の画面で横にはみ出す（2026-10-05 実測）。
	 */
	.seta-btn-wrap .wp-block-button__link,
	.seta-btn-wrap > a {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-inline: 20px;
	}

	/* 見出し */
	.seta-heading,
	.seta-heading > .wp-block-group__inner-container {
		margin-top: 48px;
		margin-bottom: 28px;
	}

	.seta-heading__text,
	.post_content .seta-heading__text {
		font-size: var(--seta-size-l);
	}

	.seta-heading__icon,
	img.seta-heading__icon {
		width: 64px;
	}

	.seta-heading__icon,
	.seta-heading .seta-heading__icon,
	.post_content .seta-heading .seta-heading__icon,
	.post_content .seta-heading figure.seta-heading__icon {
		margin-right: -24px;
	}

	/* 中央ぞろえの文は、スマホでは左ぞろえのほうが読みやすい */
	.seta-lead-center,
	.seta-body,
	.seta-intro__body,
	.seta-types__lead {
		text-align: left;
	}

	/*
	 * オレンジの前置きは、スマホでも 20px のままにする（2026-10-06 マスター指示）。
	 *
	 * 前はここで 16px に落としていた。
	 * 同じオレンジの前置きでも .seta-intro__label は 20px のままだったので、
	 * 画面の中で2つの大きさが混ざっていた。20px にそろえる。
	 */

	/*
	 * 日付と題名を縦に積む（2026-10-09）。
	 * 横に並べたままだと、題名に238pxしか残らず4行に折れる。
	 */
	.seta-news--list .seta-news__head {
		flex-direction: column;
		gap: 4px;
	}

	/* 1列に落とすもの */
	.seta-faq--card,
	.seta-supports,
	.seta-cases__grid,
	.seta-news,
	.seta-conds,
	.seta-types__subs {
		grid-template-columns: 1fr;
	}

	/* ボタンは画面の幅いっぱいまで */
	.seta-pill,
	.seta-pill.seta-pill--s,
	.seta-pill.seta-pill--blue {
		width: 100%;
		min-height: 64px;
		padding-inline: 20px;
		font-size: var(--seta-size-m);
	}

	.seta-more {
		width: 100%;
		min-width: 0;
	}

	.seta-tile {
		width: 100%;
		min-height: 80px;
		padding-inline: 20px;
		font-size: var(--seta-size-m);
	}

	.seta-external__link,
	.seta-types__btn {
		width: 100%;
		padding-inline: 20px;
		font-size: var(--seta-size-m);
	}

	.seta-article-link {
		min-width: 0;
		width: 100%;
	}

	/* 種類カードの見出しとラベルは縦に */
	.seta-types__head {
		gap: 10px;
	}

	.seta-types__badge {
		font-size: var(--seta-size-s);
	}

	/* フォーム */
	.seta-form input,
	.seta-form select,
	.seta-form textarea {
		font-size: var(--seta-size-m);
	}

	/* 送信ボタンは幅いっぱい */
	.seta-form input[type="submit"],
	.seta-form button[type="submit"],
	.seta-form__submit-dummy {
		width: 100%;
	}

	/* お問い合わせの3つの帯 */
	.seta-contact-intro__chip {
		width: calc(50% - 5px);
	}

	.seta-contact-intro__tel-num {
		font-size: var(--seta-size-2xl);
	}

	/* 完了ページの丸の列は、はみ出さないように小さく */
	.seta-thanks__dots span {
		width: 16px;
		height: 16px;
	}

	/* フッター（中央ぞろえをやめ、左ぞろえにした。2026-10-05 マスター指示） */
	.seta-footer__inner {
		padding-block: 48px;
	}

	.seta-footer__line {
		grid-template-columns: 1fr;
		gap: 16px;
		justify-items: start;
		text-align: left;
	}
}

/* =========================================================
   9. ふわっと出てくる動き（スクロールリビール）

   【2026-10-09 に足した。それまで丸ごと抜けていた】
   assets/js/reveal.js は前から動いていて is-revealed も付けていたが、
   それを受け取る指定がこのファイルに1行も無かった。
   そのため、何も起きていなかった（実測：透明度は最初から 1 のまま）。

   【現行サイト（seta-oya.com）を測って決めた値】
   2026-10-09 に実測。マスター指示「もう少しゆっくり、ふわっと」への対応。
     ・透明度だけを変える。**上下の移動はしない**（本家も transform: none だった）
     ・秒数は 600 / 1200 / 2000ms を使い分けていた。一番多く、
       実測した1件も 1200ms だったので、こちらは 1200ms にそろえる（マスター承認）
     ・加減速は ease-in（はじめゆっくり、あとから速い）。これが「ふわっと」の正体
     ・全ページで動かす（マスター指示）

   【★ 下の対象一覧は assets/js/reveal.js の REVEAL_SELECTORS と対である】
   片方だけ増やすと動かない。必ず両方そろえて直すこと。
   CSS 側にも一覧が要るのは、JS が動く前の最初の描画で隠しておくためである
   （JS で後から隠すと、一瞬見えてから消えてちらつく）。
   ========================================================= */

:root {
	--seta-reveal-ms: 1200ms;
	--seta-reveal-ease: ease-in;
}

/*
 * html.js-reveal は functions.php が wp_head のいちばん先に付ける。
 * JavaScript が動かない環境ではこのクラスが付かず、
 * 下の「隠す」指定ごと効かなくなるので、中身は必ず見える。
 */
/*
 * 【:where() で包んでいる理由】
 * :where() の中に書いたものは、指定の強さが 0 として数えられる。
 * そのため、この「隠す」指定の強さは .js-reveal の分だけ（クラス1つ）になる。
 *
 * 包まずに書くと、.seta-news--list .seta-news__item のような
 * クラス3つぶんの指定が、下の「出す」指定（クラス2つ）に勝ってしまう。
 * 2026-10-09 に実際それで、記事一覧が透明なまま出てこなかった。
 * 包んでおけば、対象をいくら深く書き足しても「出す」側が必ず勝つ。
 */
.js-reveal :where(
	[data-reveal],
	[class*="seta-reveal--"],
	.seta-fv,
	.seta-voices,
	.seta-band-cream,
	.seta-heading,
	.seta-lead,
	.seta-body,
	.seta-checklist,
	.seta-tiles,
	.seta-cta,
	.seta-news-wrap,
	.seta-news--list .seta-news__item,
	.seta-pill-wrap,
	.seta-card,
	.seta-step,
	.seta-faq,
	.seta-interview,
	.seta-column,
	.seta-btn-wrap,
	.seta-video,
	.seta-archive__title
) {
	opacity: 0;
	transition: opacity var(--seta-reveal-ms) var(--seta-reveal-ease);
}

/* 画面に入ったら reveal.js がこのクラスを付ける（クラス2つ。上に必ず勝つ） */
.js-reveal .is-revealed {
	opacity: 1;
}

/*
 * 動きを減らす設定にしている人には、動かさずそのまま出す。
 * reveal.js 側でも同じ判定をしているが、
 * JS が読み込まれる前に効かせたいので、CSS にも書いている。
 */
@media (prefers-reduced-motion: reduce) {
	.js-reveal :where(
		[data-reveal],
		[class*="seta-reveal--"],
		.seta-fv,
		.seta-voices,
		.seta-band-cream,
		.seta-heading,
		.seta-lead,
		.seta-body,
		.seta-checklist,
		.seta-tiles,
		.seta-cta,
		.seta-news-wrap,
		.seta-news--list .seta-news__item,
		.seta-pill-wrap,
		.seta-card,
		.seta-step,
		.seta-faq,
		.seta-interview,
		.seta-column,
		.seta-btn-wrap,
		.seta-video,
		.seta-archive__title
	) {
		opacity: 1;
		transition: none;
	}
}