@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
   0. カラーバリエーション用の変数（2026-09-19 トークン化）
   ★SWELLカスタマイザーの色（--color_main / --color_text / --color_link / --color_bg /
     --color_gray / --color_border / --color_htag / --color_border--table）は本文で var() 参照する。
   ★ここに置くのは、カスタマイザーに受け皿が無いものだけ。
   ★バリエーションを切り替えるとき＝カスタマイザーの色を変える＋ --color_cta をそのバリの値にする（1行）
   ========================================= */
:root {
	--color_cta: #E56B5D;   /* CTA＝送信ボタン・FAQの「A」・スマホメニューの体験ボタン */
	--color_band: color-mix(in srgb, var(--color_main) 8%, var(--color_bg));   /* 見出し帯・一覧の帯（旧 #F6F4FB） */
	--color_field: color-mix(in srgb, var(--color_main) 3%, var(--color_bg));  /* 入力欄の背景（旧 #FCFBFD） */
	--color_placeholder: #757575;   /* 空欄の文字（SWELLの既定と同じ値） */
}


/* ============================================================
   SWELL CHILD ／ ヨガスタジオ こより（sample03・template03）
   ★2026-09-18＝章立てし直した。**中身（セレクタと値）は変えていない。**
   ★整理でやったこと＝①用途ごとに並べ替え ②同じルールの重複をまとめる ③見出しと索引を付ける
   ★検査＝整理の前後で「セレクタ×プロパティの最終値」がすべて一致することを機械で確かめた

   索引

     1. 全体のレイアウト・余白
     2. ヘッダー／下層ページの見出し帯
     3. メインビジュアル（MV）
     4. フルワイドブロックの余白
     5. お知らせ（投稿リスト・一覧ページ）
     6. よくあるご質問（FAQアコーディオン）
     7. フォーム（Contact Form 7）
     8. スマホメニュー・固定フッター
     9. ロゴの横流し（loop-slider）
     10. ウィジェット・そのほかの部品
   ============================================================ */

/* =========================================
   1. 全体のレイアウト・余白
   ========================================= */

.l-content {
	margin-bottom: 0 !important;
}

/*ボディ上部の余白削除*/
.top #content {
    padding-top: 0em;
}

/*ボディ下部の余白削除・固定ページのボディ上部の余白削除*/
.l-content {
    margin: 0 auto 1em;
	padding-top: 1em;
}

/* =========================================
   2. ヘッダー／下層ページの見出し帯
   ========================================= */

/*=========================================
  下層ページのタイトル帯
=========================================*/
#top_title_area {
	background-color: var(--color_band);
}

/* 帯の中の文字色（固定ページのh1・記事タイトル・日付などすべて） */
#top_title_area .l-topTitleArea__body {
	color: var(--color_main);
	text-shadow: none;
}

/* 帯の高さ（題字は縦中央に置かれるので、上下が同じだけ詰まる） */
@media screen and (max-width: 959px) {
	.l-topTitleArea {
		min-height: 70px;
	}
}

@media screen and (min-width: 960px) {
	.l-topTitleArea {
		min-height: 80px;
	}
}

/* 帯とパンくずの間 */
.l-topTitleArea + .p-breadcrumb {
	padding-top: 4px;
}

.l-topTitleArea.c-filterLayer::before,
.l-topTitleArea.c-filterLayer::after {
	display: none;
}

.l-topTitleArea__img {
	display: none;
}

/* スマホのヘッダーロゴ（★2026-09-18 改訂＝PCと同じロゴを、サイズだけ小さくして使う）
   ★前は「欧文なしの1行版」に差し替えていたが、文字が大きく、欧文が無いぶん品が落ちたため戻した
   ★ロゴの箱はflexで83pxまで潰れるので、伸びるようにしてから高さを決める */
@media screen and (max-width: 959px) {
	.l-header__logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;   /* ★横も中央に（2026-09-18） */
	}
	/* ★縦中央に置く（画像がinlineのままだとベースラインに乗って下に2pxはみ出す）
	   ★!important が要る＝SWELL本体が a を block で固めているため */
	.c-headLogo__link {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
	}
	.c-headLogo__img {
		display: block !important;
		height: 48px;
		width: auto;
		max-width: none;
	}
}

/* =========================================
   3. メインビジュアル（MV）
   ========================================= */

/*MVのキャッチ*/
@media (min-width: 600px) {
    .p-mainVisual__slideTitle {
        font-size: 30px;
    }
	.p-mainVisual__slideText {
        font-size: 17px;
    }
}

/* ============================================================
   MVの文字（2026-09-17）
   ============================================================ */
.p-mainVisual__slideTitle,
.p-mainVisual__slideText {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .35);
}

@media screen and (max-width: 599px) {
	.p-mainVisual__slideTitle {
		font-size: 5.3vw;
		letter-spacing: -.01em;
	}
}

/* ③ スマホのみキャッチ・サブ・ボタンを中央寄せ */
@media screen and (max-width: 599px) {
	.p-mainVisual__slideTitle,
	.p-mainVisual__slideText {
		text-align: center;
	}
	/* ボタンは margin:auto だけでは寄らない（親の flex が左寄せで確定させている）ので、親ごと中央にする */
	.p-mainVisual__textLayer {
		align-items: center;
	}
	.p-mainVisual__slide .p-mainVisual__slideBtn {
		margin-left: auto;
		margin-right: auto;
	}
}

/* MVのボタンの文字を大きく（2026-09-17）★SWELL本体は 600px以上で14px（未満は 3.2vw） */
@media (min-width: 600px) {
	.c-mvBtn__btn {
		font-size: 16px;
	}
}

/* =========================================
   4. フルワイドブロックの余白
   ========================================= */

/*投稿ページのh1とリード文間の余白調整
  ★2026-09-17＝投稿ページだけに絞った（それまではクラス単体で、サイト全体の16か所／33か所に当たっていた）
  ★.single ＝ #body_wrap に付く投稿ページのクラス。固定ページは .page なので当たらない */
@media (min-width: 960px) {
    .single .pc-py-60 {
        padding-top: 3em !important;
    }
}

@media not all and (min-width: 960px) {
    .single .sp-py-40 {
        padding-top: 2em !important;
    }
}

/* ブログパーツで差し込んだフルワイドは、直前のフルワイドと隣接扱いにならず30pxの隙間ができる */
.swell-block-fullWide + .p-blogParts > .swell-block-fullWide:first-child {
	margin-top: -2em !important;
}

/* =========================================
   5. お知らせ（投稿リスト・一覧ページ）
   ========================================= */


/*お知らせ一覧の見出しを、固定ページの見出し帯と同じ見た目にする（★2026-09-18）
  ★固定ページは .l-topTitleArea（背景 var(--color_band)〔旧 #F6F4FB〕・PC80px／SP70px・文字 var(--color_main)〔旧 #907FB7〕）
  ★一覧ページはその帯が出ず、本文の中に h1 が置かれるので、CSSで帯に見せている
  ★文字の左端は固定ページと同じ（実測＝1920→360・1440→120・768→31・390→16px）
  ★並び順だけ違う（固定ページ＝帯→パンくず／一覧＝パンくず→帯） */
.archive .l-mainContent__inner > .c-pageTitle {
	display: flex;
	align-items: center;
	min-height: 80px;
	margin: 0 calc(50% - 50vw) 24px;
	padding: 0 max(4vw, calc((100vw - 1200px) / 2));
	background-color: var(--color_band);
	color: var(--color_main);
	border-bottom: none;
}

/* 金色の線は帯には置かない（固定ページに無いため） */
.archive .l-mainContent__inner > .c-pageTitle::before {
	content: none;
}

.archive h1.c-pageTitle .c-pageTitle__inner {
	border-bottom: none;
	float: none;
	padding: 0;
}

/* ★「– news –」は一覧ページだけのもの。残して、色だけ揃えた */
.archive .c-pageTitle__subTitle {
	color: var(--color_main);
}

@media screen and (max-width: 959px) {
	.archive .l-mainContent__inner > .c-pageTitle {
		min-height: 70px;
	}
}

/* ★一覧ページの見出しの色を、トップの投稿リストに合わせる（2026-09-18） */
.archive .p-postList__title {
	color: var(--color_main);
}

.archive .p-termHead {
	border: none;
}

.archive .p-postList {
	--color_border: var(--color_main);
}

/* =========================================
   6. よくあるご質問（FAQアコーディオン）
   ========================================= */

/* FAQアコーディオン（トップ8 よくあるご質問） */
.swell-block-accordion.is-faq > .swell-block-accordion__item {
	border: none;
	border-bottom: 1px solid var(--color_border);
	margin: 0;
	padding: 0 .5em;
}

.swell-block-accordion.is-faq > .swell-block-accordion__item:first-child {
	border-top: 1px solid var(--color_border);
}

/* 質問 */
.swell-block-accordion.is-faq .swell-block-accordion__title {
	background: none;
	font-weight: 700;
	line-height: 1.5;
	padding: 1em 1em 1em 3em;
	position: relative;
}

.swell-block-accordion.is-faq .swell-block-accordion__title::before {
	background-color: var(--color_main);
	border-radius: 50%;
	color: #fff;
	content: "Q";
	display: block;
	font-family: Arial, sans-serif;
	font-weight: 400;
	left: 0;
	line-height: 2;
	position: absolute;
	text-align: center;
	top: .75em;
	width: 2em;
}

/* 答え */
.swell-block-accordion.is-faq .swell-block-accordion__body {
	border: none;
	line-height: 1.5;
	margin: 0;
	padding: 1em 1em 1em 3em;
	position: relative;
}

.swell-block-accordion.is-faq .swell-block-accordion__body::before {
	background-color: var(--color_cta);
	border-radius: 50%;
	color: #fff;
	content: "A";
	display: block;
	font-family: Arial, sans-serif;
	left: 0;
	line-height: 2;
	position: absolute;
	text-align: center;
	top: .75em;
	width: 2em;
}

/* 開閉の矢印を控えめに */
.swell-block-accordion.is-faq .swell-block-accordion__icon {
	font-size: 1em;
	opacity: .4;
}

/* =========================================
   7. フォーム（Contact Form 7）
   ========================================= */

/**************************************************
**フォームデザイン
**************************************************/
/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:100%;
	margin:0 auto;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	width:100%;
	border: 1px solid var(--color_border--table);
}

.CF7_table th{
	width:30%;/*横幅*/
	}

/* タイトル列 */
.CF7_table th{
	width:auto;/*横幅*/
	background-color:var(--color_main);
	color: #fff;
	}

.CF7_table td{
	background-color:var(--color_bg);
	}

.CF7_btn{
	text-align:center;
	margin: 5% 20% 2%;
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:auto;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: auto;
	line-height:2.5em;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	width:100%;
	background-color:var(--color_cta);
	border:0;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	margin:0 auto;
	border-radius: 30px;
    padding: 2% 10% 2%;
    text-align: center;
}

/* 入力欄の背景色（2026-09-17）★SWELLの既定 #f7f7f7 から変更＝色はメイン色から算出。送信ボタンは除く */
.CF7_table input:not([type="submit"]),
.CF7_table textarea,
.CF7_table select,
.c-contactForm-table input:not([type="submit"]),
.c-contactForm-table textarea,
.c-contactForm-table select {
	background-color: var(--color_field);
}

/* お問合せフォームの表にも、体験フォームと同じ見た目を当てる（2026-09-17）
   ★体験は table.CF7_table、お問合せは table.c-contactForm-table とマークアップが別なため
   ★.CF7_table td にある color:#fff は写していない（白地に白文字で、セルに直接書いた文字が消えるため） */
table.c-contactForm-table {
	width: 100%;
	margin: 0 auto;
}

.c-contactForm-table input,
.c-contactForm-table textarea {
	width: 100%;
	border: 1px solid var(--color_border--table);
}

.c-contactForm-table th {
	width: auto;
	background-color: var(--color_main);
	color: #fff;
}

.c-contactForm-table td {
	background-color: var(--color_bg);
}

@media screen and (max-width: 768px) {
	table.c-contactForm-table {
		width: auto;
	}
	.c-contactForm-table tr,
	.c-contactForm-table td,
	.c-contactForm-table th {
		display: block;
		width: auto;
		line-height: 2.5em;
	}
}

/* 日付の欄（体験フォームの希望日時）★2026-09-18＝iOSで幅が効かない件の最終形
   ★調べて分かったこと＝WebKitは日付欄を内部で inline-flex にして中身の幅で作るので、width が無視される（iOS17まで）
   ★直し方＝appearance を外して block にし、min-width:0 / max-width:100% を添える
   ★「年/月/日」はiOSでは元々出ない（空の日付欄を何も描かないのがiOSの仕様。PCのChromeだけが出す）。
     appearance のせいではないと確認したうえで、下の @supports で空のときだけ自前で出している
   ★ネイティブのカレンダーの絵だけは戻らないので、背景に同じ絵を自前で置く（タップでカレンダーは開く）
   出所＝gomakethings.com / codepen（2026-09-18 に検索して確認） */
.CF7_table input[type="date"],
.c-contactForm-table input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 2.8em;
	padding-right: 2.6em;
	color: var(--color_text);
	-webkit-text-fill-color: var(--color_text);
	text-align: left;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round'><rect x='3.5' y='5.5' width='17' height='15' rx='2'/><path d='M8 3.5v4M16 3.5v4M3.5 10.5h17'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 1.15em 1.15em;
}

/* ★ブラウザ既定のカレンダーの絵は隠す（自前の絵を背景に置いているため。押せるのはそのまま） */
.CF7_table input[type="date"]::-webkit-calendar-picker-indicator,
.c-contactForm-table input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	width: 1.4em;
}

/* ★選んだ日付を左寄せにし、空のときも高さが潰れないようにする */
.CF7_table input[type="date"]::-webkit-date-and-time-value,
.c-contactForm-table input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	min-height: 1.25rem;
}

/* 空の欄の文字を、備考のプレースホルダーと同じ色にする（2026-09-18）
   ★備考・お名前などの placeholder は var(--color_placeholder)（SWELLの既定）。選択欄と日付欄は、未入力でも値の色（var(--color_text)）で出ていた
   ★is-empty は functions.php のJSが付ける（CF7は required 属性を出さないので、CSSだけでは空を判定できない） */
.CF7_table select.is-empty,
.c-contactForm-table select.is-empty,
.CF7_table input[type="date"].is-empty,
.c-contactForm-table input[type="date"].is-empty {
	color: var(--color_placeholder);
	-webkit-text-fill-color: var(--color_placeholder);
}

/* ★空のときはカレンダーの絵も同じ濃さにする（文字と絵をそろえる） */
.CF7_table input[type="date"].is-empty,
.c-contactForm-table input[type="date"].is-empty {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.5' stroke-linecap='round'><rect x='3.5' y='5.5' width='17' height='15' rx='2'/><path d='M8 3.5v4M16 3.5v4M3.5 10.5h17'/></svg>");
}

/* 空の日付欄に「年/月/日」を出す（2026-09-18）
   ★iOSは空の日付欄に何も描かない。PCのChromeだけが「年/月/日」を出す
     （出所＝Apple Developer Forums thread/816420・kutos-labo の記事。2026-09-18に検索して確認）
   ★@supports (-webkit-touch-callout) でiOSだけに限る。PCのChromeに当てると既定と二重になるため
   ★空かどうかはCSSでは判定できない（CF7は required 属性を出さないので :invalid が使えない）ため、
     子テーマの functions.php に置いたJSが is-empty クラスを付け外しする。日付を選ぶと自動で消える */
@supports (-webkit-touch-callout: none) {
	.CF7_table input[type="date"],
	.c-contactForm-table input[type="date"] {
		position: relative;
	}
	.CF7_table input[type="date"].is-empty::before,
	.c-contactForm-table input[type="date"].is-empty::before {
		content: "年/月/日";
		color: var(--color_placeholder);
		-webkit-text-fill-color: var(--color_placeholder);
		position: absolute;
		left: .5em;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
	}
}

@media screen and (max-width: 768px) {
	.CF7_table td .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}
	.CF7_table td select {
		width: 100%;
		margin-top: 8px;
	}
}

/* =========================================
   8. スマホメニュー・固定フッター
   ========================================= */


/* =========================================
   9. ロゴの横流し（loop-slider）
   ========================================= */

/*=========================================
  トップのスライダー
=========================================*/
.loop-slider {
    display: flex;
    overflow: hidden;
    gap: 0rem; /* 画像間の余白を指定 */
}

/* 中間の階層をすべて潰して、トラックを横並びの直接の子にする */
.loop-slider .wp-block-group,
.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
    display: contents;
}

.loop-slider .swell-block-columns__inner {
    flex-wrap: nowrap;
    animation: infinity-scroll-left 30s infinite linear; /* アニメーションの時間を指定 */
}

.loop-slider .swell-block-column figure {
    width: 600px; /* 画像の横幅を指定（パソコン） */
    position: relative;
}

.loop-slider .swell-block-column figure::before {
    padding-top: 65%; /* 画像の縦横比を指定 */
    display: block;
    content: "";
}

.loop-slider .swell-block-column figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 959px) {
    .loop-slider .swell-block-column figure {
        width: 200px; /* 画像の横幅を指定（スマホ） */
    }
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* =========================================
   10. ウィジェット・そのほかの部品
   ========================================= */

/*フッターの見出しの下線カラー変更*/
.c-widget__title.-footer::before {
	background-color: var(--color_main) !important;
}

/*スマホメニューのMENU見出しの線（★2026-09-18＝金色 var(--color_cta) からサイトの紫へ）
  ★各項目の区切り線（a の border-bottom）はSWELLの既定のまま。ここだけを変える
  ★::before は幅40%、::after は幅100%の2本重ねで、1本の線に見えている */
.c-widget__title.-spmenu::before,
.c-widget__title.-spmenu::after {
	background-color: var(--color_main);
}


/* =========================================
   11. カラーバリエーション＝ページ直書き色の橋渡し（2026-09-19）
   ★トップの帯セクションは、ページ側に background-color が直書き（#907fb7＝メイン色／#f6f4fb＝淡い帯）。
     変数を変えても紫のまま残るので、属性セレクタで拾って席に追随させる（HTMLは編集しない）。
   ★B（こより）では値が同じ＝見た目は変わらない（2026-09-19 にPC・タブレット・スマホの全ページでピクセル一致を確認）
   ★装飾のルールと値は §12 の席ブロックの中に置く。Bは席ブロックが空＝親テーマの既定のまま
     （理由＝2026-09-19 に「B既定値」を :root に書いたら、SWELLのスマホ用の見出しサイズ・行間を上書きして
       スマホの全ページの高さが変わった。既定値を書かないのが最も安全）
   ========================================= */
/* ★2026-09-19 追加＝控えの9ページを数えて出た残りの直書き（トップ）
   ①レッスンカード＝ .wp-block-group に #f6f4fb が8枚 → --kb-card_bg（席ブロックで var(--color_band) 等にする）
   ②お知らせ一覧＝ブロック個別CSS（.wp-custom-css-xxxx）で見出し色と区切り線が #907fb7 !important → メイン色へ
   ③SWELLのボタン色「赤」＝カスタマイザー値 #e56b5d（.red_ の --the-btn-color）→ CTA色へ（--the-btn-color2 は触らない） */
/* ⑤白のセクション＝ .swell-block-fullWide に background-color:#ffffff が直書き（トップ6か所ほか）→ 席の地色へ（Eの黒地で白いまま残ったため。Bは白＝同じ） */
/* ⑥写真の上の半透明の帯＝「体験申込・お問合せ」セクション（has-bg-img）に rgba(246,244,251,.5) と color:#333333 が直書き（黒地の席で灰色に浮いた）
   ⑦フッターのウィジェット領域＝SWELLの設定で background:#fff（黒地の席で白く残った）。Bはどちらも同じ値 */
.swell-block-fullWide.has-bg-img[style*="246, 244, 251"], .swell-block-fullWide.has-bg-img[style*="246,244,251"] { background-color: var(--kb-overlay_bg, rgba(246,244,251,.5)) !important; color: var(--kb-overlay_text, #333333) !important; }
body .l-footer__widgetArea { background: var(--kb-footer_widget_bg, #fff) !important; }
/* ★2026-09-21 根本対処＝ページ側の直書き色（帯 #907fb7／#f6f4fb・カード #f6f4fb×8・白セクション #ffffff×27）を、次の変数を参照する形に書き換えた（ブロックの属性とHTMLの両方・10本）。
   → 橋渡し①②⑤（属性セレクタで直書きを上書き）は撤去した。残る橋渡し＝③SWELLボタン色 ④カラーパレット ⑥写真上の半透明（SWELLが不透明度から計算） ⑦フッター領域 ⑧見出しデザインの焼き込み ⑨写真の焦点（ブロック検証で外せない）
   ページはこの名前で参照するので、席ブロックは --kb-* を設定すればよい（B＝既定値＝元の直書きと同じ値）。
   ★:root ではなく body に置く＝席ブロックが body に置く --kb-* を同じ要素で読めるようにするため */
body {
	--color_section_band: var(--kb-band_bg, #f6f4fb);     /* トップの淡い帯セクション（旧 background-color:#f6f4fb 直書き） */
	--color_card: var(--kb-card_bg, #f6f4fb);             /* レッスンカード（旧 #f6f4fb 直書き×8） */
	--color_on_main: #ffffff;                             /* メイン色の帯の上の文字（旧 color:#fff 直書き） */
	--color_section_text: var(--kb-band_text, currentColor); /* 淡い帯セクションの文字（F の橙ベタ帯は白。既定＝周囲の文字色） */
	--color_overlay: var(--kb-overlay_bg, rgba(246,244,251,.5));  /* 写真の上の半透明（SWELLのフルワイドは不透明度から計算するため、ページ側は直書きのまま＝橋渡し⑥で追随） */
	--color_overlay_text: var(--kb-overlay_text, #333333);
}
/* 帯セクションの文字色＝ページ側は背景だけ変数で持つので、背景に --color_section_band を指定した帯に文字色を足す（hex ではなく変数名で拾う） */
body .post_content .swell-block-fullWide[style*="--color_section_band"] { color: var(--color_section_text); }
/* ⑨講師紹介の写真3枚＝画像ブロックに焦点（object-position 47% 10% など）が1枚ずつ別の値で直書き→仮画像の文字がずれて見える。中央に揃える（2026-09-19 二宮さん） */
.post_content img[style*="object-position"] { object-position: 50% 50% !important; }  /* 2026-09-21＝講師紹介ページのカバーブロック（.wp-block-cover）も同じ直書き→画像ブロック限定をやめた */
/* ⑧SWELLの「見出しデザイン」のインラインCSSが、メイン色の薄い版を直値で焼き込む
     h2＝背景 rgba(180,159,229,.05)／枠の点線 rgba(144,127,183,.5)（講師紹介の名前の枠で判明）→ メイン色から算出した値へ。Bは同値 */
body .post_content h2:not([class^="swell-block-"]):not(.is-style-section_ttl):not(.faq_q):not(.p-postList__title) { background: var(--color_main_thin); }
body .post_content h2:not([class^="swell-block-"]):not(.is-style-section_ttl):not(.faq_q):not(.p-postList__title)::before { border-color: color-mix(in srgb, var(--color_main) 50%, transparent); }
/*   ★除外（.is-style-section_ttl／.faq_q／.p-postList__title）はSWELLの元の :where(...) と同じ＝トップの見出しに薄い地が乗った実害（2026-09-19）
     h3＝左の線が repeating-linear-gradient に rgba(144,127,183,.15) を焼き込み／:root の派生色（--color_main_dark・--color_list_check・--color_list_num）も直値 */
body .post_content h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before { background: repeating-linear-gradient(var(--color_htag) 0%, var(--color_htag) 50%, color-mix(in srgb, var(--color_main) 15%, transparent) 50%, color-mix(in srgb, var(--color_main) 15%, transparent) 100%); }
body { --color_main_dark: color-mix(in srgb, var(--color_main) 75%, #000); --color_list_check: var(--color_main); --color_list_num: var(--color_main); }
body [class*="wp-custom-css-"] .p-postList__title { color: var(--color_main) !important; }
body [class*="wp-custom-css-"] { --color_border: var(--color_main); }
body .red_ { --the-btn-color: var(--color_cta); }
/* ④編集画面のカラーパレット「メインカラー」等＝WPのプリセット変数 --wp--preset--color--swl-* は :root に直値で出る
     （見出しの文字 <span class="has-swl-main-color"> がこれを参照＝--color_main を変えても紫のまま）→ SWELL側の変数へ寄せる */
body { --wp--preset--color--swl-main: var(--color_main); --wp--preset--color--swl-main-thin: var(--color_main_thin); --wp--preset--color--swl-gray: var(--color_gray); }

/* =========================================
   12. 席ブロック（★ここだけ貼り替える。いまは B＝空）
   ★席を切り替える＝下の body { } に色（カラートークン表 §1の列）と装飾（§2の行）を書き、
     必要なルールを続けて書く。Google Fonts が要る席は、このファイル先頭 @charset の直後に @import を1行足す。
   ★書式の見本（F＝橙・太い丸ゴ・ピル＋影・写真の角丸・ベタ帯・余白広め）＝
     body {
       --color_main:#ff7a21; --color_text:#212121; --color_link:#cc621a; --color_bg:#ffffff;
       --color_gray:#eeeeee; --color_border:#eeeeee; --color_htag:#212121; --color_cta:#ff7a21;
       --swl-font_family:"M PLUS Rounded 1c", sans-serif;
       --kb-band_bg: var(--color_main); --kb-band_text:#fff;
       --color_band:color-mix(in srgb, var(--color_main) 8%, var(--color_bg)); --color_field:color-mix(in srgb, var(--color_main) 3%, var(--color_bg));  ★:root の定義はメイン色を :root で読むので、席ブロックで body 上に再宣言する
     }
     .c-mvBtn__btn, .swell-block-button__link, .wpcf7 input.wpcf7-submit, #sp_menu .is-reserve > a { border-radius: 999px; }
     .c-mvBtn__btn, .swell-block-button__link { box-shadow: 0 4px 12px rgba(0,0,0,.18); }
     h2.is-style-section_ttl { font-weight: 800; }
     .wp-block-image img { border-radius: 24px; }
     .swell-block-fullWide__inner { padding-top: 40px; padding-bottom: 40px; }
   ★席ごとの実値＝カラートークン表_template03.md §1・§2（見立ての値は実装で確かめて入れ替える）
   ========================================= */