@charset "UTF-8";
/* =============================================================
   ブロック（積み上げエディタ）の構造CSS
   ・全サイト・全スキン共通。ここには「骨格」だけを書く。
   ・色・寸法は必ず CSS 変数を経由し、スキン（css/skins/*.css）で上書きできるようにする。
   ・ページ固有の意匠（ヒーロー・目次・監修など）はここに書かない（feature.css 等）。
   詳細は docs/ARCHITECTURE.md「スキン」を参照。
   ============================================================= */

.sysp-blocks {
	/* --- レイアウト --- */
	--blk-sec-gap:    81px;      /* ブロックとブロックの間 */
	--blk-gap:        43px;      /* 画像とテキストの間 */
	--blk-img-col:    344px;     /* 画像カラムの幅 */
	--blk-img-ratio:  344/447;   /* 画像の比率 */

	/* --- 本文 --- */
	--blk-font:       var(--f-min);
	--blk-text-size:  18px;
	--blk-text-line:  1.78;
	--blk-text-color: var(--c-ink);

	/* --- 小見出し（###） --- */
	--blk-h3-size:    20px;
	--blk-h3-color:   var(--c-ink);
	--blk-h3-accent:  var(--c-green);

	/* --- 箇条書き --- */
	--blk-list-size:  16px;
	--blk-list-mark:  var(--c-green);

	/* --- 表 --- */
	--blk-th-bg:      #628b74;
	--blk-th-color:   #fff;
	--blk-td-size:    15px;
	--blk-row-alt:    #f4f7f4;   /* 偶数行の下地 */
	--blk-line:       #d9d9d9;
}

/* ブロックの積み上げ（ラッパ）。ブロック間の間隔はここで持つ。 */
.sysp-blocks { display: flex; flex-direction: column; gap: var(--blk-sec-gap); }

/* ---------- セクション（1ブロック） ---------- */
.feat-sec { display: grid; gap: var(--blk-gap); align-items: start; }
.feat-sec--img-left  { grid-template-columns: var(--blk-img-col) 1fr; }
.feat-sec--img-right { grid-template-columns: 1fr var(--blk-img-col); }
.feat-sec--full      { grid-template-columns: 1fr; }
.feat-sec__img { aspect-ratio: var(--blk-img-ratio); overflow: hidden; }
.feat-sec__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 本文 ---------- */
.feat-sec p {
	font-family: var(--blk-font);
	font-size: var(--blk-text-size);
	line-height: var(--blk-text-line);
	color: var(--blk-text-color);
}

/* ---------- 小見出し（###） ---------- */
.feat-h3 {
	font-family: var(--blk-font); font-weight: 600;
	font-size: var(--blk-h3-size); line-height: 1.6; color: var(--blk-h3-color);
	margin: 32px 0 12px; padding-left: 14px;
	border-left: 3px solid var(--blk-h3-accent);
}
.feat-sec p + .feat-h3, .feat-sec ul + .feat-h3 { margin-top: 36px; }

/* ---------- 箇条書き（・） ---------- */
.feat-list { list-style: none; margin: 12px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.feat-list li {
	position: relative; padding-left: 20px;
	font-family: var(--blk-font); font-size: var(--blk-list-size); line-height: 1.9; color: var(--blk-text-color);
}
.feat-list li::before {
	content: ""; position: absolute; left: 2px; top: .92em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--blk-list-mark);
}

/* ---------- 表 ---------- */
.feat-table { margin: 16px 0 8px; overflow-x: auto; }
.feat-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.feat-table th, .feat-table td {
	text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--blk-line);
	font-family: var(--blk-font); font-size: var(--blk-td-size); line-height: 1.7;
	color: var(--blk-text-color); vertical-align: top;
}
.feat-table th { background: var(--blk-th-bg); color: var(--blk-th-color); border-bottom: 0; font-weight: 500; }
/* 行の区切りを追いやすいよう、偶数行だけ薄く色を敷く */
.feat-table tbody tr:nth-child(even) { background: var(--blk-row-alt); }

/* ---------- Q&A ---------- */
.feat-sec--faq .faq-list { margin-top: 16px; }

@media (max-width: 1023px) {
	.sysp-blocks { --blk-sec-gap: 56px; --blk-img-col: 260px; }
}

@media (max-width: 767px) {
	.sysp-blocks {
		--blk-sec-gap: 48px;
		--blk-gap: 20px;
		--blk-img-ratio: 340/210;
		--blk-text-size: 15px;
		--blk-h3-size: 17px;
		--blk-list-size: 15px;
	}
	.feat-sec { grid-template-columns: 1fr; }
	.feat-sec--img-left, .feat-sec--img-right { grid-template-columns: 1fr; }
	.feat-h3 { margin: 26px 0 10px; }
	.feat-list li { padding-left: 18px; }
	.feat-table th, .feat-table td { padding: 12px 14px; font-size: 14px; }
}

/* =============================================================
   ③ セクション帯パターン（.sec*）の「構造」＝全幅・レイアウト・斜め境界。
   色/背景は各 css/skins/{skin}.css が持つ（＝どのスキンでも“形”は共通）。
   .sec* は治療/特集（.feat-*）に存在しないので、それらには無影響。
   ============================================================= */
.sec { width: 100%; box-sizing: border-box; }
.sec__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.sec--1col { padding: 88px 0; text-align: center; }
.sec--1col h2 { font-size: 30px; line-height: 1.4; margin: 0 0 20px; }
.sec--1col p { font-size: 16px; line-height: 2; max-width: 720px; margin: 0 auto 1em; }

.sec--2col {
	position: relative;
	padding: 120px 0 96px;
	margin-top: -44px;                                        /* 直前セクションに重ねて斜め境界を見せる */
	clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);    /* 上辺が斜め */
}
.sec--2col .sec__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sec--2col h2 { font-size: 26px; line-height: 1.45; margin: 0 0 16px; }
.sec--2col p { font-size: 15px; line-height: 1.95; margin: 0 0 1em; }
.sec--2col .sec__col--img img { width: 100%; height: auto; display: block; border-radius: 10px; }

@media (max-width: 767px) {
	.sec--1col { padding: 56px 0; }
	.sec--1col h2 { font-size: 24px; }
	.sec--2col { padding: 84px 0 60px; margin-top: -28px; clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
	.sec--2col h2 { font-size: 22px; }
	.sec--2col .sec__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* タイトルの改行（PC用/SP用）。「改行」ONのブロックだけ span が出る＝全ブロック共通の表示切替 */
.ttl-sp { display: none; }
@media (max-width: 767px) {
	.ttl-pc { display: none; }
	.ttl-sp { display: inline; }
}

/* 標準フィールド（汎用パーツ）：英字タイトル＝見出し上の小ラベル／サブタイトル＝見出し下／サブタイトル英語＝その下 */
.feat-h-en { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; color: var(--c-green, #628b74); text-transform: none; }
.feat-sub { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--c-ink, #2b2b2b); }
.feat-sub-en { margin: 2px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--c-green, #628b74); }

/* ---------- リッチエディタ導入で増えた要素 ----------
   旧記法の変換結果はクラス付き、エディタが吐くのは素のタグ。
   PHP側 sysp_rt_add_classes() が class 無しのタグにだけ補うので、
   ここは feat-* クラスに対して書けば両方に効く。 */

/* 中見出し / 小見出し（h4 / h5）。大見出し h3 = .feat-h3 は上で定義済み */
.feat-h4 {
	font-family: var(--blk-font); font-weight: 600;
	font-size: calc(var(--blk-h3-size) * .92); line-height: 1.6; color: var(--blk-h3-color);
	margin: 26px 0 10px;
}
.feat-h5 {
	font-family: var(--blk-font); font-weight: 600;
	font-size: calc(var(--blk-h3-size) * .86); line-height: 1.6; color: var(--blk-text-color);
	margin: 20px 0 8px;
}

/* 番号付きリスト。・箇条書き（.feat-list）と行間・余白を揃える */
.feat-olist {
	list-style: decimal; margin: 12px 0 20px; padding-left: 1.6em;
	display: flex; flex-direction: column; gap: 10px;
}
.feat-olist li {
	font-family: var(--blk-font); font-size: var(--blk-list-size);
	line-height: 1.9; color: var(--blk-text-color);
}
.feat-olist li::marker { color: var(--blk-list-mark); font-weight: 600; }

/* 本文中のリンク・強調 */
.feat-sec a, .sec__inner a, .message__text a { color: var(--c-green); text-underline-offset: 2px; }
.feat-sec strong, .sec__inner strong, .message__text strong { font-weight: 700; }

/* 文字色プリセット（.txt-*）はここには書かない。
   プラグインが「サイト設計 → 配色」の設定から動的に出力する。
   色を足したり変えたりしても、このファイルを触る必要は無い。
   既定値は inc/site-info.php の sysp_rt_colors フィルタ。 */

@media (max-width: 767px) {
	.feat-h4 { margin: 22px 0 8px; }
	.feat-h5 { margin: 18px 0 6px; }
	.feat-olist { padding-left: 1.4em; }
}

/* ---------- セクション（背景を持つ帯） ----------
   値は PHP が inline の custom property で渡す（sysp-core/inc/sections.php）。
   ここは「構造」だけを持ち、色や画像は持たない。 */
.sysp-sec {
	--sec-cut: 44px;                       /* 斜め区切りの切り取り量 */
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 88px 0;
	background-color: var(--sec-bg, transparent);
	background-image: var(--sec-bg-image, none);
	background-size: var(--sec-bg-size, auto);
	background-position: center;
	background-repeat: repeat;             /* ドットが繰り返せるように。画像はcoverが効く */
	color: var(--sec-fg, inherit);
}
.sysp-sec__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* 画像背景のときは繰り返さない（ドット下敷きは別レイヤーなので繰り返しは維持される） */
.sysp-sec--img { background-repeat: repeat, no-repeat; }

/* 上辺を斜めに切り、直前のセクションへ重ねる。
   隣の色を知る必要が無いので、背景が画像でも成立する。 */
.sysp-sec--cut {
	margin-top: calc(var(--sec-cut) * -1);
	padding-top: calc(88px + var(--sec-cut));   /* 切られる分を内側に確保＝文字が欠けない */
	clip-path: var(--sec-clip);
}

/* 中の文字は原則セクションの文字色に従う。
   リンクも追従させて下線で区別する＝どんな背景でも必ず読める。 */
.sysp-sec :where(h2, h3, h4, h5, p, li, td, th) { color: inherit; }
.sysp-sec a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 767px) {
	.sysp-sec { --sec-cut: 26px; padding: 56px 0; }
	.sysp-sec--cut { padding-top: calc(56px + var(--sec-cut)); }
	.sysp-sec__inner { padding: 0 20px; }
}