@charset "UTF-8";
/*
Theme Name: SWELL CHILD
Template: swell
Theme URI: https://swell-theme.com/
Description: SWELLの子テーマ / スグノル（SUGUNORU）
Version: 3.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
*/

/* ==================================================================
   目次
   00  デザイントークン（:root）
   01  ベース / ユーティリティ
   02  共通パーツ
       2-1 ボタン
       2-2 セクション見出し（トップ用 / 下層用）
       2-3 下層ページヒーロー
       2-4 テーブル（料金 / 諸条件 / 比較）
       2-5 料金カード
       2-6 CTA帯
       2-7 補足ボックス
   03  レイアウト（ヘッダー / SPメニュー / フッター / パンくず / ページ共通余白）
   04  トップページ
   05  下層ページ個別
   06  記事詳細（single）
   07  ローダー / スクロールバー
   08  モーション抑制
   09  レスポンシブ調整（列数・スマホ専用の詰め）
   ------------------------------------------------------------------
   ルール：SWELLの .post_content h2/h3 は帯・白文字・大余白が強制されるため、
   カスタム見出しは background/border/padding の打ち消しと ::before/::after の
   content:none をセットで書く。
   ================================================================== */


/* ==================================================================
   00  デザイントークン
   ================================================================== */
:root {
	/* Palette */
	--white: #FFFFFF;
	--paper: #FAF8F3;
	--ink: #0A0A0A;
	--ink-soft: #2A2A2A;
	--grey: #6B6B6B;
	--yellow: #E8A91A;
	--yellow-dark: #C99115;
	--cream: #FFF4D1;
	--line: #E5E2D9;
	--red: #C8362E;

	/* ヒーロー写真の黄色（sugunoru_view.png の上端実測値） */
	--hero-yellow: #FEC301;

	/* Type */
	--display: "Anton", "Bebas Neue", "Impact", sans-serif;
	--head-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
	--body: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--mono: "JetBrains Mono", "Menlo", monospace;

	/* Layout */
	--container_size: 1360px;   /* サイト全体のコンテンツ幅（SWELLの設定を上書き） */
	--max: 1280px;
	--gutter: 24px;
	--sgnr-headerH: 64px;   /* ヘッダーの高さ（ここ1か所で調整） */

	/* Borders */
	--bd: 1px solid var(--ink);
	--bd-thick: 2px solid var(--ink);
	--bd-line: 1px solid var(--line);
}


/* ==================================================================
   01  ベース / ユーティリティ
   ================================================================== */
/* 本文の基準サイズ（PC 17px / スマホは可変だが16pxを下限に） */
@media (min-width: 600px) { :root { --swl-fz--content: 17px; } }
@media (max-width: 599px) { :root { --swl-fz--content: max(16px, 4vw); } }

body {
	font-family: var(--body);
	color: var(--ink);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.02em;
}
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* --- 背景色ユーティリティ（グループの「追加CSSクラス」に付ける） --- */
.bg-white  { background-color: var(--white)  !important; }
.bg-paper  { background-color: var(--paper)  !important; }
.bg-cream  { background-color: var(--cream)  !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-ink    { background-color: var(--ink)    !important; }
.bg-ink :is(h1,h2,h3,h4,h5,h6,p,li,figcaption) { color: var(--paper) !important; }
.bg-ink a { color: var(--yellow) !important; }

/* --- セクションの上下余白と区切り線 --- */
.sec-pad { padding-top: clamp(56px, 8vw, 96px) !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
.sec-pad + .sec-pad { border-top: 2px solid var(--ink); }
.section { padding: 96px 0; border-top: var(--bd); }
.section--paper { background: var(--paper); }

/* 入れ子になったフルワイドは上下余白を二重に取らない（SWELLの pc-py-60 は 6em） */
.swell-block-fullWide .swell-block-fullWide {
	padding-top: 32px !important;
	padding-bottom: 0 !important;
}
@media (max-width: 768px) { .section { padding: 64px 0; } }


/* ==================================================================
   02  共通パーツ
   ================================================================== */

/* ---------- 2-1 ボタン ----------
   ボタンブロックのラッパーに付与： sgnr-btn / sgnr-primary / sgnr-ghost / sgnr-lg / sgnr-block
   ショートコード等で <a> 自体に付ける場合も同じクラス名でOK
   ------------------------------------------------------------- */
.sgnr-btn a,
a.sgnr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 22px; border-radius: 0;
	font-family: var(--head-jp); font-weight: 700; font-size: 14px; letter-spacing: .1em;
	border: var(--bd-thick); background: var(--white); color: var(--ink);
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sgnr-btn a:hover,
a.sgnr-btn:hover { background: var(--ink); color: var(--white); }

.sgnr-btn.sgnr-primary a { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.sgnr-btn.sgnr-primary a:hover { background: var(--yellow-dark); color: var(--ink); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
a.sgnr-btn.sgnr-primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
a.sgnr-btn.sgnr-primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); color: var(--ink); }

.sgnr-btn.sgnr-ghost a { background: transparent; color: var(--white); border-color: var(--white); }
.sgnr-btn.sgnr-ghost a:hover { background: var(--white); color: var(--ink); }

.sgnr-btn.sgnr-lg a { padding: 18px 32px; font-size: 15px; }
a.sgnr-btn.sgnr-lg { padding: 16px 36px; font-size: 15px; }

.sgnr-btn.sgnr-block { width: 100%; }
.sgnr-btn.sgnr-block a { display: flex; width: 100%; }


/* ---------- 2-2 セクション見出し ----------
   トップページ： .section-eyebrow / .section-title / .section-lead
   下層ページ　： .sec-eyebrow / .sec-title
   ------------------------------------------------------------- */
/* === トップ用 === */
.section-eyebrow {
	display: block !important;          /* 外側のflexは解除。内側 inner-container に効かせる */
	margin-bottom: 32px;
	border-bottom: var(--bd);
	padding-bottom: 16px;
	position: relative;
	overflow: hidden;
}
.section-eyebrow > .wp-block-group__inner-container {
	display: flex !important; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.section-eyebrow__num { font-family: var(--display); font-size: 48px; line-height: 1; color: var(--ink); }
.section-eyebrow__en { font-family: var(--display); font-size: 19px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.section-eyebrow__jp { margin-left: auto; font-family: var(--head-jp); font-weight: 700; font-size: 15px; color: var(--grey); letter-spacing: .16em; }
/* スクロールで黄色いバーが伸びる（sugu.js が .in を付与） */
.section-eyebrow::after {
	content: ""; position: absolute; left: 0; bottom: -1px;
	height: 2px; width: 0; background: var(--yellow);
	transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}
.section-eyebrow.in::after { width: 100%; }

.section-title {
	font-family: var(--head-jp);
	font-weight: 900 !important;
	font-size: clamp(28px, 4vw, 44px) !important;
	line-height: 1.25;
	letter-spacing: .02em;
	color: var(--ink) !important;
	margin-bottom: 24px;
	background: none !important; border: none !important; padding: 0 !important;
}
.section-title::before, .section-title::after { display: none !important; content: none !important; }

.section-lead { font-size: 17px; color: var(--ink-soft); max-width: 56ch; margin-bottom: 40px; }

@media (max-width: 768px) { .section-eyebrow__num { font-size: 36px; } }

/* === 下層用 === */
.sec-eyebrow { margin-bottom: 28px !important; }
.sec-eyebrow > .wp-block-group__inner-container {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
.sec-eyebrow__num {
	font-family: var(--display) !important; font-weight: 400 !important;
	font-size: clamp(44px, 7vw, 62px) !important; line-height: 1 !important;
	color: var(--ink) !important; margin: 0 !important;
}
.sec-eyebrow__en {
	font-family: var(--display) !important; font-weight: 400 !important;
	font-size: 18px !important; letter-spacing: .18em !important;
	text-transform: uppercase !important; color: var(--ink-soft) !important; margin: 0 !important;
}
.sec-eyebrow__jp {
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: 15px !important; letter-spacing: .16em !important;
	color: var(--grey) !important; margin: 0 0 0 auto !important;
}
.sec-title {
	font-family: var(--head-jp) !important; font-weight: 900 !important;
	font-size: clamp(28px, 4vw, 44px) !important; line-height: 1.35 !important;
	color: var(--ink) !important; margin: 0 0 32px !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.sec-title::before, .sec-title::after { content: none !important; display: none !important; }


/* ---------- 2-3 下層ページヒーロー ----------
   フルワイド（bg-paper）の中に eyebrow / en / jp / lead / meta を置く
   ------------------------------------------------------------- */
.page-hero__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--grey);
	margin: 0 0 18px !important;
}
.page-hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--yellow); flex: none; }
.page-hero__en {
	font-family: var(--display) !important; font-weight: 400 !important;
	font-size: clamp(56px, 9.5vw, 108px) !important; line-height: .9 !important;
	color: var(--ink) !important; margin: 0 0 16px !important;
}
.page-hero__en::after { content: ""; display: inline-block; width: .26em; height: .26em; background: var(--yellow); margin-left: .1em; }
.page-hero__jp {
	font-family: var(--head-jp) !important; font-weight: 800 !important;
	font-size: 22px !important; color: var(--ink) !important; margin: 0 0 14px !important;
}
/* 日本語の大見出し用（.page-hero__en の英字用サイズは日本語に合わないため）
   見出しレベル（h1/h2）を変えても余白が動かないよう margin を固定する。 */
.page-hero__jp-lg {
	font-family: var(--head-jp) !important;
	font-weight: 900 !important;
	font-size: clamp(28px, 4.6vw, 52px) !important;
	line-height: 1.35 !important;
	letter-spacing: .02em !important;
	color: var(--ink) !important;
	margin: 0 0 22px !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.page-hero__jp-lg::before,
.page-hero__jp-lg::after { content: none !important; display: none !important; }

/* 見出し直下のリード文（見出しレベルに依存しない余白） */
.page-hero__jp-lg + .page-hero__lead { margin-top: 0 !important; }


/* ---------- 2-4 テーブル ----------
   .price-table   ヘッダー行あり（料金表）
   .cond-table    ヘッダー行なし2列（諸条件）
   .compare-table ヘッダー行あり・スマホ横スクロール（プラン比較）
   ------------------------------------------------------------- */
.price-table table,
.compare-table table,
.cond-table table {
	width: 100%; border-collapse: collapse;
	border: 2px solid var(--ink) !important; font-size: 15px;
}
.price-table th, .price-table td,
.compare-table th, .compare-table td,
.cond-table th, .cond-table td {
	padding: 16px 18px !important; text-align: left; vertical-align: top;
	border: none !important;
	border-bottom: 1px solid var(--line) !important;
	border-right: 1px solid var(--line) !important;
}
.price-table th:last-child, .price-table td:last-child,
.compare-table th:last-child, .compare-table td:last-child,
.cond-table th:last-child, .cond-table td:last-child { border-right: none !important; }
.price-table tbody tr:last-child td,
.compare-table tbody tr:last-child td,
.cond-table tbody tr:last-child td { border-bottom: none !important; }

/* ヘッダー行：黒地・白文字 */
.price-table thead th,
.compare-table thead th {
	background: var(--ink) !important; color: var(--white) !important;
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: 14px !important; letter-spacing: .08em !important; text-transform: none !important;
	border-right-color: rgba(255,255,255,.18) !important;
}
.price-table thead th:last-child,
.compare-table thead th:last-child { border-right: none !important; }

/* 1列目：生成り・太字 */
.price-table tbody td:first-child,
.compare-table tbody td:first-child,
.cond-table tbody td:first-child {
	background: var(--paper) !important; color: var(--ink) !important;
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	white-space: nowrap;
}
.price-table tbody td:first-child { width: 26%; }
.compare-table tbody td:first-child { width: 28%; }
.cond-table tbody td:first-child { width: 40%; }

/* 金額列 */
.price-table tbody td:nth-child(2),
.cond-table tbody td:nth-child(2) {
	font-family: var(--mono) !important; font-size: 16px !important; font-weight: 500 !important;
	color: var(--ink) !important; letter-spacing: 0 !important;
}
.price-table tbody td:nth-child(2) { white-space: nowrap; }
.price-table tbody td:nth-child(2) strong { font-size: 22px !important; font-weight: 500 !important; color: var(--ink) !important; }
.price-table tbody td:last-child { color: var(--ink-soft) !important; line-height: 1.7; }

/* 比較表：スマホは横スクロール */
.compare-table { display: block; overflow-x: auto; }
.compare-table table { min-width: 640px; }

/* 諸条件テーブルの上ラベル */
.cond-label {
	font-family: var(--mono) !important; font-size: 12px !important;
	letter-spacing: .14em !important; text-transform: uppercase;
	color: var(--grey) !important; margin: 40px 0 14px !important;
}

/* スマホ：はみ出す表は横スクロールに逃がす */
@media (max-width: 767px) {
	.price-table, .cond-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.price-table table, .cond-table table { min-width: 560px; }
}
@media (max-width: 480px) {
	.price-table th, .price-table td,
	.compare-table th, .compare-table td,
	.cond-table th, .cond-table td { padding: 12px 14px !important; font-size: 13px; }
}


/* ---------- 2-5 料金カード（トップ / 料金ページ 共通） ---------- */
.price-card {
	border: 2px solid var(--ink);
	background: var(--white);
	padding: 32px;
	position: relative;
	height: 100%;
	min-width: 0;
	container-type: inline-size;
	transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(10,10,10,.16); }
.price-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column; height: 100%; }
.price-card--featured { background: var(--ink) !important; }

.price-card__tag {
	position: absolute; top: 0; right: 20px; transform: translateY(-50%);
	background: var(--yellow); color: var(--ink);
	font-family: var(--head-jp); font-weight: 700; font-size: 11px; letter-spacing: .1em;
	padding: 4px 12px; margin: 0 !important;
}
.price-card__cat {
	font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: .2em !important;
	color: var(--grey) !important; margin: 0 0 8px !important;
}
.price-card--featured .price-card__cat { color: var(--yellow) !important; }
.price-card__name {
	font-family: var(--head-jp) !important; font-weight: 900 !important; font-size: 24px !important;
	color: var(--ink) !important; margin: 0 0 24px !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.price-card__name::before, .price-card__name::after { content: none !important; }
.price-card--featured .price-card__name { color: var(--white) !important; }

.price-card__price {
	font-family: var(--mono) !important; font-size: 14px !important; color: var(--ink-soft) !important;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: 20px 0; margin: 0 0 20px !important;
	overflow: hidden; word-break: keep-all;
}
.price-card__price strong {
	display: block; white-space: nowrap; max-width: 100%;
	font-size: clamp(22px, 6vw, 40px) !important; font-weight: 500 !important;
	color: var(--ink) !important; line-height: 1; margin-bottom: 4px;
}
.price-card--featured .price-card__price { border-color: var(--ink-soft) !important; color: rgba(255,255,255,.7) !important; }
.price-card--featured .price-card__price strong { color: var(--yellow) !important; }

.price-card ul { list-style: none !important; padding: 0 !important; margin: 0 !important; flex: 1; }
.price-card li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); display: flex; gap: 8px; }
.price-card li::before { content: "▸"; color: var(--yellow-dark); flex: none; }
.price-card--featured li { border-color: var(--ink-soft) !important; color: rgba(255,255,255,.85) !important; }
.price-card--featured li::before { color: var(--yellow) !important; }

/* カード幅に応じて金額を縮める（狭い2列レイアウト対策） */
@container (max-width: 220px) { .price-card__price strong { font-size: 30px !important; } }
@container (max-width: 170px) { .price-card__price strong { font-size: 24px !important; } }
@container (max-width: 140px) { .price-card__price strong { font-size: 20px !important; } }

@media (max-width: 768px) {
	.price-card { padding: 24px 20px !important; }
	.price-card__name { font-size: 20px !important; }
}

/* ▼▼ 料金カードをスマホでも「3列」にする場合は、この行の下から「ここまで」の行までのコメント記号を外す ▼▼
   ※ 箇条書きは6文字以内に短縮しないと窮屈になります
@media (max-width: 599px) {
	.swell-block-columns > .swell-block-columns__inner > .swell-block-column:has(> .price-card) { --clmn-w: 33.33% !important; }
	.swell-block-columns:has(.price-card) { --swl-clmn-mrgn--x: .4rem !important; }
	.price-card { padding: 12px 8px !important; }
	.price-card__tag   { right: 4px; font-size: 9px !important; padding: 3px 6px; letter-spacing: 0; }
	.price-card__cat   { font-size: 9px !important; letter-spacing: .04em !important; margin: 0 0 4px !important; }
	.price-card__name  { font-size: 13px !important; line-height: 1.4 !important; margin: 0 0 10px !important; }
	.price-card__price { font-size: 10px !important; padding: 10px 0 !important; margin: 0 0 10px !important; }
	.price-card__price strong { font-size: 19px !important; }
	.price-card li     { font-size: 11px !important; line-height: 1.5; padding: 6px 0; gap: 3px; letter-spacing: 0; }
	.price-card li::before { font-size: 9px; }
	.price-card .sgnr-btn a { padding: 10px 4px; font-size: 11px; letter-spacing: 0; }
}
▲▲ ここまで ▲▲ */


/* ---------- 2-6 CTA帯（各ページ末尾の黒帯） ---------- */
.cta-strip {
	background-color: var(--ink) !important;
	color: var(--white);
	padding: clamp(48px,7vw,72px) 0 !important;
	position: relative;
	overflow: hidden;
}
.cta-strip::before {
	content: "SUGUNORU";
	position: absolute; top: 50%; right: -100px; transform: translateY(-50%);
	font-family: var(--display); font-size: 280px; color: var(--ink-soft);
	letter-spacing: .04em; pointer-events: none; white-space: nowrap;
	animation: ctaDrift 12s ease-in-out infinite alternate;
}
@keyframes ctaDrift {
	from { transform: translateY(-50%) translateX(0); }
	to   { transform: translateY(-50%) translateX(-200px); }
}
/* 内側の幅をフッター（.l-container）と一致させる */
.cta-strip > .swell-block-fullWide__inner {
	max-width: calc(var(--container_size, 1200px) + var(--swl-pad_container, 0px) * 2) !important;
	margin-inline: auto !important;
	padding-left: var(--swl-pad_container, 0) !important;
	padding-right: var(--swl-pad_container, 0) !important;
}
.cta-strip__inner { display: block !important; position: relative; z-index: 1; }
/* 左：見出し＋補足 ／ 右：ボタン。
   ボタンが1つになっても右カラムで浮かないよう、下端に揃える。 */
.cta-strip__inner > .wp-block-group__inner-container {
	display: grid !important;
	grid-template-columns: 1.2fr auto;
	gap: 48px;
	align-items: end;
}
/* SWELLは .post_content h2:where(...) で帯・白文字・大余白を強制する。
   :where() は詳細度0だが、ページ内 <style> として子テーマCSSより後に
   出力されるため、!important 同士では後勝ちで負ける。
   セレクタを .post_content h2.cta-strip__title まで深くして詳細度で上回る。
   h1/h3 も併記してあるので、見出しレベルを変えても崩れない。 */
.post_content h1.cta-strip__title,
.post_content h2.cta-strip__title,
.post_content h3.cta-strip__title,
.cta-strip__title {
	font-family: var(--head-jp) !important; font-weight: 900 !important;
	font-size: clamp(24px,3.4vw,38px) !important; line-height: 1.35 !important;
	color: var(--white) !important;
	margin: 0 0 18px !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-align: left !important;
}
.post_content h1.cta-strip__title::before,
.post_content h1.cta-strip__title::after,
.post_content h2.cta-strip__title::before,
.post_content h2.cta-strip__title::after,
.post_content h3.cta-strip__title::before,
.post_content h3.cta-strip__title::after,
.cta-strip__title::before,
.cta-strip__title::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
}
.cta-strip__title em,
.cta-strip__title strong { font-style: normal !important; font-weight: inherit !important; color: var(--yellow) !important; }
.cta-strip__sub,
.cta-strip__sub .swl-inline-color { color: rgba(255,255,255,.7) !important; font-size: 15px !important; line-height: 1.8 !important; margin: 0 !important; }
.cta-strip__buttons { display: flex !important; flex-wrap: wrap; gap: 12px !important; }
.cta-strip__buttons > .wp-block-group__inner-container {
	display: flex !important;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.cta-strip__buttons .swell-block-button__link {
	display: inline-flex !important; align-items: center; justify-content: center;
	padding: 15px 30px !important; font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: 15px !important; border-radius: 0 !important; box-shadow: none !important;
}
.cta-strip__buttons .sgnr-primary .swell-block-button__link { background: var(--yellow) !important; color: var(--ink) !important; border: 2px solid var(--yellow) !important; }
.cta-strip__buttons .sgnr-ghost .swell-block-button__link { background: transparent !important; color: var(--white) !important; border: 2px solid rgba(255,255,255,.5) !important; }
.cta-strip__buttons .sgnr-ghost .swell-block-button__link:hover { background: rgba(255,255,255,.12) !important; border-color: var(--white) !important; }
.cta-strip__buttons .swell-block-button__link a { all: unset !important; cursor: pointer; color: inherit !important; }

@media (max-width: 768px) {
	.cta-strip__inner > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 26px;
		align-items: start;
	}
	.cta-strip__buttons > .wp-block-group__inner-container { justify-content: flex-start; }
}


/* ---------- 2-7 補足ボックス ---------- */
.callout {
	background: var(--cream);
	border-left: 4px solid var(--yellow-dark);
	padding: 24px; font-size: 15px; line-height: 1.9;
}
.callout strong { font-family: var(--head-jp); }


/* ==================================================================
   03  レイアウト
   ================================================================== */

/* ---------- 3-1 ヘッダー（黒帯・ロゴ黄・CTAは黄ピル） ---------- */
.l-header,
.l-fixHeader { background: var(--ink) !important; box-shadow: none !important; }
/* SWELLの追従ヘッダーは背景を ::before で敷くため、そこも黒にしないと
   白地＋白文字でメニューが見えなくなる */
.l-fixHeader::before { background: var(--ink) !important; opacity: 1; }
.l-fixHeader__gnav { flex: 1; }
.l-fixHeader .c-gnav { flex-wrap: nowrap; }
.l-fixHeader .c-gnav > li > a { white-space: nowrap; }
.l-header__inner,
.l-fixHeader__inner {
	min-height: var(--sgnr-headerH);
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ロゴ（上：キャッチフレーズ ／ 下：「スグノル」）
   キャッチフレーズはSWELLの設定では出力されないため、CSSで描画する。
   文言を変えるときは下の content: の中身を書き換えること。 */
.c-headLogo { display: flex; align-items: center; }
.l-header__logo,
.l-fixHeader__logo {
	padding: 0 !important;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 1px;
	text-align: center;
}
.l-header__logo::before,
.l-fixHeader__logo::before {
	content: "事業用軽貨物のレンタル・代車サービス";
	font-family: var(--head-jp); font-weight: 700;
	font-size: 12px; letter-spacing: .02em; line-height: 1.3;
	color: #fff; white-space: nowrap;
}
.c-headLogo__link {
	display: inline-flex; align-items: center;
	font-family: var(--head-jp); font-weight: 900;
	font-size: 15px !important; letter-spacing: .34em;
	color: var(--yellow) !important;
	line-height: 1.2;
}
.c-headLogo__link::before { content: "「"; letter-spacing: 0; }
.c-headLogo__link::after  { content: "」"; margin-left: -.34em; }

@media (max-width: 600px) {
	.l-header__logo::before,
	.l-fixHeader__logo::before { font-size: 10px; }
	.c-headLogo__link { font-size: 13px !important; letter-spacing: .28em; }
}

@media (max-width: 600px) {
	.l-header__logo .c-catchphrase { font-size: 10px !important; }
	.c-headLogo__link { font-size: 13px !important; letter-spacing: .28em; }
}

/* ナビ（PC） */
.l-header__gnav { flex: 1; }
.c-gnav { width: 100%; flex: 1; align-items: center; }
.c-gnav > li:first-child { margin-left: auto; }         /* ナビ群を右へ寄せる */
.c-gnav > li:not(.nav-btn) > a {
	color: #fff !important;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 13.5px !important;
	padding: 0 11px !important;
}
.c-gnav > li:not(.nav-btn) > a:hover { color: var(--yellow) !important; }
.c-gnav a::after { background: var(--yellow) !important; }

/* ACE AUTO / 資料DL はPCヘッダーでは非表示（SPメニューには残る）
   ヘッダーに出したくなったら次の2行を削除 */
.c-gnav li.nav-btn--ace,
.c-gnav li.nav-btn--dl { display: none !important; }

/* CTA：黄色の丸ピル */
.c-gnav li.nav-btn--cta { margin-left: 20px !important; display: flex; align-items: center; }
.c-gnav li.nav-btn--cta > a {
	display: inline-flex !important; align-items: center; gap: .3em;
	background: var(--yellow) !important; color: var(--ink) !important;
	border: none !important; border-radius: 999px !important; box-shadow: none !important;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 13px !important; line-height: 1; white-space: nowrap;
	padding: .95em 1.5em !important;
	transition: background-color .2s ease;
}
.c-gnav li.nav-btn--cta > a:hover { background: var(--yellow-dark) !important; transform: none !important; box-shadow: none !important; }
.c-gnav li.nav-btn > a::after { content: none !important; display: none !important; }

/* スマホ：ハンバーガーを白に */
.l-header .c-iconBtn { color: #fff !important; }


/* ---------- 3-2 SPメニュー（ドロワー） ---------- */
.p-spMenu__inner { background: var(--paper); }
.p-spMenu .c-widget__title.-spmenu {
	background: var(--ink) !important; color: var(--white) !important;
	font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .25em;
	padding: .9em 1.1em !important; border-left: 4px solid var(--yellow);
}
.p-spMenu .c-spnav a {
	font-family: var(--head-jp); font-weight: 600; color: var(--ink);
	border-bottom: 1px solid var(--line) !important;
	padding: .95em .6em !important;
	transition: background-color .15s ease, padding-left .15s ease;
}
.p-spMenu .c-spnav a:hover { background: var(--cream) !important; padding-left: 1.1em !important; }
.p-spMenu .c-spnav a::before { content: none !important; display: none !important; }
.p-spMenu .c-spnav li.nav-btn--ace a { font-family: var(--mono); color: var(--grey); font-size: .9em; letter-spacing: .05em; }
.p-spMenu .c-spnav li.nav-btn--cta a { background: var(--yellow); font-weight: 700; border-bottom-color: var(--yellow) !important; }
.p-spMenu .c-spnav li.nav-btn--cta a:hover { background: var(--yellow-dark) !important; padding-left: .6em !important; }
/* 親項目「サービス」はリンク先が # のため、押せる要素に見せず見出し扱いにする */
.p-spMenu .c-spnav li.menu-item-has-children > a[href="#"],
.p-spMenu .c-spnav li.menu-item-has-children > a[href$="/#"] {
	pointer-events: none;
	cursor: default;
	color: var(--grey) !important;
	font-family: var(--mono);
	font-size: 11.5px !important;
	letter-spacing: .18em;
	background: var(--cream) !important;
	padding-top: .7em !important;
	padding-bottom: .7em !important;
}
/* サービス配下の3項目は字下げして親子関係を示す */
.p-spMenu .c-spnav .sub-menu { padding: 0 !important; }
.p-spMenu .c-spnav .sub-menu a {
	padding-left: 1.8em !important;
	font-size: .95em;
}
.p-spMenu .c-spnav .sub-menu a::before {
	content: "―";
	color: var(--yellow);
	margin-right: .6em;
	display: inline !important;
}
/* ACE AUTO / 資料DL はSPメニューでも非表示
   （PCヘッダー側は 3-1 の .c-gnav li.nav-btn--ace / --dl で非表示済み）
   復活させたいときはこのブロックごと削除する */
.p-spMenu .c-spnav li.nav-btn--ace,
.p-spMenu .c-spnav li.nav-btn--dl { display: none !important; }

/* ---------- 3-3 パンくず（mono・"/"区切り） ---------- */
.p-breadcrumb { background: var(--paper) !important; }
.p-breadcrumb__text { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--grey); }
.p-breadcrumb a.p-breadcrumb__text { color: var(--ink-soft); }
.p-breadcrumb a.p-breadcrumb__text:hover { color: var(--ink); }
.p-breadcrumb .icon-home::before { content: none !important; }
.p-breadcrumb .__home { gap: 0; }
.p-breadcrumb__item:not(:last-child)::after {
	-webkit-clip-path: none !important; clip-path: none !important;
	background: none !important; content: "/" !important;
	width: auto !important; height: auto !important;
	color: var(--grey); opacity: .5; margin: 0 9px !important;
}


/* ---------- 3-4 フッター（黒地・3カラム） ---------- */
.l-footer { background: var(--ink); color: #ABA89F; }
.l-footer__widgetArea { padding-top: 66px; padding-bottom: 50px; }
.l-footer a { color: inherit; }

.w-footer.-col3 {
	display: grid !important;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 52px; align-items: start;
}
.w-footer__box { width: auto !important; margin: 0 !important; padding: 0 !important; }
@media (max-width: 768px) { .w-footer.-col3 { grid-template-columns: 1fr; gap: 36px; } }

/* 1列目（テキストウィジェット）：段落の順番で装飾 */
.l-footer .textwidget p:nth-of-type(1) {
	font-family: var(--head-jp); font-weight: 800; font-size: 22px;
	color: var(--white); margin-bottom: 16px;
}
.l-footer .textwidget p:nth-of-type(1)::after {
	content: "\25CF"; color: var(--yellow); font-size: .46em; margin-left: .45em; vertical-align: middle;
}
.l-footer .textwidget p:nth-of-type(2) { font-size: 13px; line-height: 1.95; color: #918E85; margin-bottom: 22px; max-width: 30em; }
.l-footer .textwidget p:nth-of-type(3) { font-size: 13px; line-height: 2.0; color: #C2BFB6; margin-bottom: 18px; }
.l-footer .textwidget p:nth-of-type(4) { font-size: 12px; letter-spacing: .03em; }
.l-footer .textwidget p:nth-of-type(4) a {
	display: inline-block; border: 1px solid rgba(255,255,255,.35);
	padding: 9px 16px; color: #DBD7CE; font-size: 11.5px; letter-spacing: .04em;
}
.l-footer .textwidget p:nth-of-type(4) a:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(232,169,26,.08); }

/* 2・3列目（メニュー） */
.l-footer .c-widget__title.-footer {
	color: var(--white) !important;
	font-family: var(--head-jp); font-weight: 700; font-size: 15px; letter-spacing: .04em;
	margin-bottom: 16px; padding-bottom: 13px;
	border-bottom: 1px solid rgba(255,255,255,.14);
	background: none !important; overflow: visible; white-space: nowrap;
}
.l-footer .c-widget__title.-footer::before { content: none !important; display: none !important; }
.w-footer__box:nth-child(2) .c-widget__title.-footer::after,
.w-footer__box:nth-child(3) .c-widget__title.-footer::after {
	display: inline-block; vertical-align: baseline;
	font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .15em;
	color: var(--yellow); margin-left: .7em;
}
.w-footer__box:nth-child(2) .c-widget__title.-footer::after { content: "SERVICE"; }
.w-footer__box:nth-child(3) .c-widget__title.-footer::after { content: "SUPPORT"; }

.l-footer .c-listMenu li a {
	color: #A4A198 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important;
	font-size: 13.5px; font-weight: 500;
	transition: color .15s ease, padding-left .15s ease;
}
.l-footer .c-listMenu li a:hover { color: var(--white) !important; background: none !important; padding-left: 1.4em !important; }
.l-footer .c-listMenu li a::before { color: var(--yellow) !important; }

/* 下部バー */
.l-footer__foot { background: #060606; border-top: 1px solid rgba(255,255,255,.10); padding: 18px 0; }
.l-footer__foot .l-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.l-footer__foot .copyright { margin: 0; text-align: left; }
.l-footer__foot .copyright  {
	font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
	color: var(--yellow) !important;
}


/* ---------- 3-5 ページ共通の余白・幅 ----------
   独自ヒーローを使うページはSWELL標準タイトルを消し、上下の白帯を除去する
   8=トップ / 357=お問い合わせ / 360=プライバシー / 387=料金 / 473=サービス
   518=ご利用の流れ / 538=車両 / 544=FAQ / 549=ブログ / 602=会社情報
   ------------------------------------------------------------- */
/* SWELL標準タイトルを非表示 */
.home .c-pageTitle,
.page-id-357 .c-pageTitle,
.page-id-387 .c-pageTitle,
.page-id-473 .c-pageTitle,
.page-id-518 .c-pageTitle,
.page-id-538 .c-pageTitle,
.page-id-544 .c-pageTitle,
.page-id-549 .c-pageTitle,
.page-id-602 .c-pageTitle { display: none !important; }

/* パンくずはトップのみ非表示 */
.home .p-breadcrumb { display: none !important; }

/* 上の白帯を除去 */
.home .l-content,
.page-id-357 .l-content,
.page-id-387 .l-content,
.page-id-473 .l-content,
.page-id-518 .l-content,
.page-id-538 .l-content,
.page-id-544 .l-content,
.page-id-549 .l-content,
.page-id-602 .l-content { padding-top: 0 !important; }

.home .post_content,
.page-id-357 .post_content,
.page-id-387 .post_content,
.page-id-473 .post_content,
.page-id-518 .post_content,
.page-id-538 .post_content,
.page-id-544 .post_content,
.page-id-549 .post_content,
.page-id-602 .post_content { margin-top: 0 !important; }

/* CTA帯で終わるページは下の白帯も除去（フッターに密着） */
.page-id-387 .l-content, .page-id-473 .l-content, .page-id-518 .l-content,
.page-id-538 .l-content, .page-id-544 .l-content, .page-id-602 .l-content { margin-bottom: 0 !important; }
.page-id-387 .post_content, .page-id-473 .post_content, .page-id-518 .post_content,
.page-id-538 .post_content, .page-id-544 .post_content, .page-id-602 .post_content { margin-bottom: 0 !important; }
.page-id-387 .l-mainContent__inner, .page-id-473 .l-mainContent__inner, .page-id-518 .l-mainContent__inner,
.page-id-538 .l-mainContent__inner, .page-id-544 .l-mainContent__inner, .page-id-602 .l-mainContent__inner { padding-bottom: 0 !important; }

/* 本文幅をヘッダーに合わせる */
.page-id-357 .l-article,
.page-id-387 .l-article,
.page-id-473 .l-article,
.page-id-518 .l-article,
.page-id-538 .l-article,
.page-id-544 .l-article,
.page-id-549 .l-article,
.page-id-602 .l-article { max-width: var(--container_size, 1120px); }

/* CTA帯の直前：マージンは消し、一定の間隔だけ残す */
*:has(+ .cta-strip) {
	margin-bottom: 0 !important;
	padding-bottom: clamp(40px, 5vw, 64px) !important;
}

/* 本文末尾に残った空の段落ブロックが白帯になるのを防ぐ */
.post_content > p:empty { display: none !important; }

/* 下層ページ下部の余白（CTAで終わらないページ用） */
.page:not(.home) .l-mainContent__inner { padding-bottom: 80px; }

/* ブログ一覧：CTA帯で終わるので下は詰める */
.page-id-549 .l-content { margin-bottom: 0 !important; }
.page-id-549 .l-mainContent__inner { padding-bottom: 0 !important; }


/* ==================================================================
   04  トップページ
   ================================================================== */

/* ---------- 4-1 ヒーロー（sgnr-hero2） ----------
   調整つまみ：
     見出しサイズ … .sgnr-hero2__title の min(6vw, 90px)
     写真の高さ　 … .sgnr-hero2__photo img の clamp()
     写真の見え方 … object-position の 2つめの値（大きいほど上が見える）
   ------------------------------------------------------------- */
.sgnr-hero2 {
	position: relative;
	left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
	width: calc(100vw - var(--swl-scrollbar_width, 0px));
	max-width: calc(100vw - var(--swl-scrollbar_width, 0px));
	margin-inline: 0;
	background: var(--hero-yellow);
	overflow: hidden;
}
.sgnr-hero2__inner {
	max-width: 1600px; margin: 0 auto;
	padding: 26px clamp(16px, 2.6vw, 40px) 2px;
}
.sgnr-hero2__kicker {
	display: inline-block; background: var(--ink); color: #fff;
	font-family: var(--head-jp); font-weight: 700; font-size: 12px !important; letter-spacing: .04em;
	padding: 7px 14px !important; border-radius: 6px; margin-bottom: 14px !important;
}
.sgnr-hero2__title {
	font-family: var(--head-jp); font-weight: 900; color: var(--ink);
	font-size: min(6vw, 90px) !important;   /* SWELLの .post_content h1{font-size:2em} に勝たせる */
	line-height: 1.06 !important; letter-spacing: -.02em !important;
	font-feature-settings: "palt" 1;
	white-space: nowrap;                  /* 「る！」だけ折り返す事故を防ぐ */
	text-align: center !important;
	margin: 0;
}

/* ナンバープレート風（黒地・黄縁・角丸・上部にビス2つ）
   上段に小さくキッカー、下段に大きく「軽貨物」を積む。
   調整つまみ：--plate-lead でキッカーの大きさ（本文比） */
.sgnr-hero2__title .box {
	position: relative;
	display: inline-flex; flex-direction: column; align-items: center;
	vertical-align: middle;
	background: var(--ink);
	padding: .32em .30em .22em;
	margin: 0 .06em;
	border-radius: .12em;
	box-shadow: inset 0 0 0 .028em var(--hero-yellow);
	line-height: 1;
}
.sgnr-hero2__title .box small {
	display: block;
	font-size: .245em; font-weight: 700;
	letter-spacing: .02em; line-height: 1;
	color: var(--hero-yellow);
	margin-bottom: .62em;
	white-space: nowrap;
}
.sgnr-hero2__title .box b {
	display: block;
	font-size: 1em; font-weight: 900;
	color: var(--hero-yellow);
	letter-spacing: -.01em;
	line-height: .96;
}
/* ビス（上部の白い丸2つ） */
.sgnr-hero2__title .box::before,
.sgnr-hero2__title .box::after {
	content: "";
	position: absolute; top: .13em;
	width: .055em; height: .055em;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
}
.sgnr-hero2__title .box::before { left: 22%; }
.sgnr-hero2__title .box::after  { right: 22%; }

/* キッカーはプレートに統合したため非表示 */
.sgnr-hero2__kicker { display: none !important; }
.sgnr-hero2__title .hl {
	background: linear-gradient(transparent 52%, #5cbf46 52%, #5cbf46 92%, transparent 92%);
	padding: 0 .02em;
}

/* 写真：画面端まで／上端は背景色からぼかして繋ぐ。
   画像は下へ行くほど黄色が濃くなるため、切り出し位置によって上端の色が
   変わる。単色合わせでは境目が出るので、フェードで吸収する。 */
.sgnr-hero2__photo { position: relative; margin: 0 auto; padding: 10px 0 0; }
.sgnr-hero2__photo::before {
	content: ""; position: absolute; z-index: 1;
	left: 0; right: 0; top: 0; height: 84px;
	background: linear-gradient(var(--hero-yellow) 0%, rgba(254,195,1,0) 100%);
	pointer-events: none;
}

.sgnr-hero2__photo img {
	display: block; width: 100%;
	height: clamp(200px, 24vw, 400px);
	object-fit: cover;
	object-position: center 54%;   /* 車両帯の中心（実測値）に合わせる */
}

/* 電話CTA（写真の右下）
   左：右向き吹き出し（白地・青枠・青文字） ／ 右：浮き出しの青ボタン
   吹き出しのしっぽは、枠線ぶん大きい青の三角と、内側の白い三角の2枚重ね。 */
.sgnr-hero2__tel {
	position: absolute; right: clamp(12px, 4vw, 64px); bottom: 16px;
	display: flex; align-items: stretch; gap: 16px;
	text-decoration: none;
}

.sgnr-hero2__tel-badge {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	background: #fff; color: #2b8fe0;
	border: 2px solid #2b8fe0;
	font-family: var(--head-jp); font-weight: 900;
	font-size: 13px; line-height: 1.45; text-align: center;
	padding: 7px 16px; border-radius: 8px;
	box-shadow: 0 3px 10px rgba(0,0,0,.18);
	white-space: nowrap;
}
.sgnr-hero2__tel-badge::before,
.sgnr-hero2__tel-badge::after {
	content: ""; position: absolute; top: 50%;
	border: 10px solid transparent;
	transform: translateY(-50%);
}
.sgnr-hero2__tel-badge::before { right: -20px; border-left-color: #2b8fe0; }
.sgnr-hero2__tel-badge::after  { right: -16px; border-left-color: #fff; border-width: 8px; }

.sgnr-hero2__tel-body {
	display: flex; flex-direction: column; justify-content: center;
	background: linear-gradient(#4aa6ea, #1f7fd1);
	color: #fff; border-radius: 999px;
	padding: 9px 30px 11px;
	text-align: center;
	box-shadow: 0 4px 0 #14568f, 0 7px 14px rgba(0,0,0,.28);
	transition: transform .12s ease, box-shadow .12s ease;
}
.sgnr-hero2__tel:hover .sgnr-hero2__tel-body {
	transform: translateY(3px);
	box-shadow: 0 1px 0 #14568f, 0 4px 8px rgba(0,0,0,.28);
}

.sgnr-hero2__tel-label {
	display: block; font-size: 11px; font-weight: 700;
	margin-bottom: 2px; white-space: nowrap;
}
.sgnr-hero2__tel-label b { font-size: 1.32em; font-weight: 900; color: var(--hero-yellow); }
.sgnr-hero2__tel-num {
	display: block; font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(22px, 1.8vw, 30px); line-height: 1.05;
	letter-spacing: .01em; white-space: nowrap;
}

@media (max-width: 767px) {
	.sgnr-hero2__inner { padding: 18px 14px 0; position: relative; z-index: 2; }

	.sgnr-hero2__title {
		font-size: 7.6vw !important;
		white-space: normal !important;
		line-height: 1.34 !important;
	}
	.sgnr-hero2__title .hl { white-space: nowrap; }
	.sgnr-hero2__title .box { padding: .28em .26em .20em; margin: .06em .04em; }
	.sgnr-hero2__title .box small { font-size: .28em; margin-bottom: .5em; }

	/* 写真：画像の上下は余白の黄色なので、横にはみ出させて車両帯だけ見せる。
	   max-width:none を外すとWordPress既定の 100% で頭打ちになり、
	   拡大されずに margin-left ぶんだけ左へずれるので必ず残すこと。
	   調整つまみ … width を上げるほど拡大。margin-left は必ず -(width-100)/2 に。
	                 178% なら -39%、200% なら -50%。
	   縦の重なり … margin-top を深くするほど見出しに食い込む。 */
	.sgnr-hero2__photo { padding-top: 0; margin-top: -38px; overflow: hidden; }
	.sgnr-hero2__photo img {
		width: 178%; max-width: none !important; margin-left: -39%;
		height: 196px;
		object-position: center 56%;
	}
	.sgnr-hero2__photo::before { height: 30px; }

	.sgnr-hero2__tel {
		right: 6px; bottom: 6px; gap: 12px;
		transform: scale(.58); transform-origin: right bottom;
	}
}


/* ---------- 4-2 実績カウンター（stat） ----------
   スマホまで含めて常に3列。幅に応じて文字と余白を段階的に縮める。
   列数の指定は「09 レスポンシブ」を参照。
   ------------------------------------------------------------- */
.stat {
	padding: 40px 32px !important;
	border-right: var(--bd) !important;
	height: 100%;
	position: relative;
}
.swell-block-column:last-child .stat { border-right: none !important; }
.stat__num {
	font-family: var(--display);
	font-size: clamp(36px, 5vw, 72px) !important;
	line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.stat__num small,
.stat__num .u-fz-xs { font-size: .4em !important; letter-spacing: .1em; color: var(--grey); }
.stat__num .u-fz-xl { font-size: 1em !important; }
.stat__num [data-count] { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 20px; font-family: var(--head-jp); font-weight: 700; font-size: 16px; letter-spacing: .1em; color: var(--ink-soft); }
.stat__note { font-family: var(--mono); font-size: 13px; color: var(--grey); letter-spacing: .1em; margin-top: 8px; }
.stat__index { position: absolute; top: 24px; right: 24px; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .16em; }

/* タブレット：番号ラベルを本文の流れに戻す */
@media (max-width: 959px) {
	.stat { padding: 24px 14px !important; }
	.stat__index { position: static !important; margin: 0 0 8px !important; }
	.stat__num   { font-size: 40px !important; }
	.stat__label { font-size: 14px !important; margin-top: 12px !important; }
	.stat__note  { font-size: 12px !important; }
}

/* スマホ：3列のまま収まるサイズへ（1枚あたり約118px） */
@media (max-width: 599px) {
	.swell-block-columns:has(.stat) { --swl-clmn-mrgn--x: .5rem !important; }
	.stat { padding: 16px 6px !important; }
	.stat__index { font-size: 9px !important; letter-spacing: .04em !important; margin: 0 0 6px !important; }
	.stat__num   { font-size: 26px !important; white-space: normal !important; line-height: 1.2 !important; }
	.stat__num small, .stat__num .u-fz-xs { font-size: .5em !important; }
	.stat__label { font-size: 12px !important; letter-spacing: 0 !important; line-height: 1.5; margin-top: 8px !important; }
	.stat__note  { font-size: 10px !important; letter-spacing: 0 !important; line-height: 1.5; }
}


/* ---------- 4-3 マーキー（流れるテキスト帯） ---------- */
.marquee {
	background: var(--ink) !important; color: var(--yellow);
	border-top: var(--bd-thick); border-bottom: var(--bd-thick);
	overflow: hidden; padding: 16px 0; position: relative;
}
.marquee p { margin: 0 !important; }
.marquee__track {
	display: inline-flex; gap: 56px; white-space: nowrap;
	font-family: var(--display); font-size: 28px; letter-spacing: .12em; line-height: 1;
	padding-left: 56px;
	animation: marquee 38s linear infinite;
}
.marquee__track--rev { animation: marqueeRev 30s linear infinite; }
@keyframes marquee    { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes marqueeRev { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.marquee--paper { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--ink); }
.marquee--paper .marquee__track { color: var(--ink); word-spacing: .25em; }


/* ---------- 4-4 サービスカード（3枚） ---------- */
.service-card {
	border: var(--bd-thick);
	background: var(--white) !important;
	display: flex; flex-direction: column; position: relative;
	transition: transform .2s ease;
}
.service-card:hover { transform: translateY(-4px); }
.service-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column; height: 100%; }

.service-card__head {
	display: block !important;
	background: var(--ink); color: var(--white);
	padding: 16px 24px !important;
}
.service-card__head > .wp-block-group__inner-container { display: flex !important; align-items: center; justify-content: space-between; }
.service-card__head > .wp-block-group__inner-container > * { margin: 0 !important; }
.service-card__num { font-family: var(--display); font-size: 32px; color: var(--yellow); }
.service-card__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; border: 1px solid var(--yellow); color: var(--yellow); padding: 4px 8px; }

.service-card__body { padding: 28px; padding-bottom: 0 !important; background: var(--white); color: var(--ink); flex: 1; }
.service-card__body > .wp-block-group__inner-container { display: flex !important; flex-direction: column; flex: 1; height: 100%; }
.service-card__title { font-family: var(--head-jp); font-weight: 900; font-size: 24px; margin: 0 0 12px !important; color: var(--ink); }
.service-card__lead { color: var(--ink-soft); font-size: 15px; line-height: 1.8; margin-bottom: 20px; flex: 1; }
.service-card__price { font-family: var(--mono); font-size: 13px; border-top: var(--bd-line); padding-top: 16px; margin-bottom: 16px; color: var(--grey); }
.service-card__price strong { color: var(--ink); font-size: 22px; font-weight: 500; }
.service-card__link {
	font-family: var(--head-jp); font-weight: 700; font-size: 13px; letter-spacing: .12em;
	color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
	border-top: var(--bd); padding: 16px 28px; background: var(--paper);
	margin: auto -28px 0 !important;
	transition: background .18s ease;
}
.service-card__link:hover { background: var(--yellow); }
.service-card__link::after { content: "→"; font-family: var(--mono); }

/* 右上のコーナーマーク（ホバー） */
.service-card::after,
.reason::after {
	content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
	border-top: 24px solid var(--yellow); border-left: 24px solid transparent;
	opacity: 0; transform: translate(8px,-8px);
	transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.service-card:hover::after,
.reason:hover::after { opacity: 1; transform: translate(0,0); }


/* ---------- 4-5 選ばれる理由（6ブロック） ---------- */
.reasons-wrap { border-top: var(--bd); border-left: var(--bd); }
.reason {
	background: var(--white);
	border-right: var(--bd); border-bottom: var(--bd);
	padding: 40px 32px; height: 100%; position: relative;
	transition: background .25s ease;
}
.reason:hover { background: var(--paper); }
.reason__num {
	font-family: var(--display); font-size: 14px; letter-spacing: .2em;
	color: var(--yellow-dark); margin: 0 0 14px !important;
	display: flex; align-items: center; gap: 8px;
}
.reason__num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.reason__title {
	font-family: var(--head-jp); font-weight: 900; font-size: 22px; line-height: 1.4;
	margin: 0 0 12px !important; position: relative; padding-bottom: 4px;
	background: none !important; border: none !important;
}
.reason__title::before { content: none !important; }
.reason__title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	height: 2px; width: 0; background: var(--yellow-dark);
	transition: width .35s ease;
}
.reason:hover .reason__title::after { width: 40px; }
.reason__text,
.reason__body { font-size: 15.5px; line-height: 1.85; color: var(--ink-soft); margin: 0 !important; }


/* ---------- 4-6 ご利用の流れ（flow-row） ---------- */
.flow { display: block; }
.flow-row { border-bottom: var(--bd); padding: 28px 0; }
.flow-row:first-child { border-top: var(--bd); }
.flow__num {
	font-family: var(--display); font-size: 56px; line-height: 1;
	color: var(--ink); position: relative; padding-top: 4px;
	transition: color .35s ease;
}
.flow__num::after {
	content: "STEP"; position: absolute; top: -14px; left: 0;
	font-size: 10px; letter-spacing: .3em; color: var(--grey);
}
.flow__body h3 { font-family: var(--head-jp); font-size: 22px; margin: 0 0 8px !important; background: none !important; border: none !important; }
.flow__body h3::before { content: none !important; }
.flow__body p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.flow__meta {
	font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
	color: var(--grey); text-align: right; text-transform: uppercase;
}
.flow__meta strong { display: block; color: var(--ink); font-size: 14px; font-weight: 500; margin-top: 4px; }

/* ホバーで右へスライド */
.flow-row > .swell-block-columns__inner { transition: transform .35s ease; }
.flow-row:hover > .swell-block-columns__inner { transform: translateX(12px); }
.flow-row:hover .flow__num { color: var(--yellow-dark); }

/* カラム幅はCSSで固定（PC=番号100px / 本文可変 / 所要時間200px） */
@media (min-width: 960px) {
	.flow-row > .swell-block-columns__inner { flex-wrap: nowrap; }
	.flow-row > .swell-block-columns__inner > .swell-block-column { width: auto !important; }
	.flow-row > .swell-block-columns__inner > .swell-block-column:nth-child(1) { flex: 0 0 100px; }
	.flow-row > .swell-block-columns__inner > .swell-block-column:nth-child(2) { flex: 1 1 0%; }
	.flow-row > .swell-block-columns__inner > .swell-block-column.flow__meta { flex: 0 0 200px; }
}
@media (max-width: 959.98px) {
	.flow-row > .swell-block-columns__inner { margin-left: 0 !important; }
	.flow-row > .swell-block-columns__inner > .swell-block-column { width: 100% !important; margin-left: 0 !important; }
	.flow__num { font-size: 40px; }
	.flow__meta { text-align: left; }
}


/* ---------- 4-7 お知らせ（[sgnr_news]） ---------- */
.news-list { border-top: var(--bd); }
.news-item {
	display: grid; grid-template-columns: 140px 120px 1fr 32px; gap: 24px;
	align-items: center; padding: 20px 0; border-bottom: var(--bd-line);
	transition: background .15s ease;
}
.news-item:hover { background: var(--paper); }
.news-item__date { font-family: var(--mono); font-size: 13px; color: var(--grey); letter-spacing: .06em; }
.news-item__cat { font-family: var(--head-jp); font-size: 11px; letter-spacing: .16em; font-weight: 700; text-align: center; border: var(--bd); padding: 4px 8px; }
.news-item__title { font-family: var(--head-jp); font-weight: 500; font-size: 16px; }
.news-item__arrow { font-family: var(--mono); color: var(--grey); transition: transform .25s ease, color .25s ease; }
.news-item:hover .news-item__arrow { transform: translateX(6px); color: var(--ink); }
@media (max-width: 768px) {
	.news-item { grid-template-columns: 100px 1fr; }
	.news-item__cat, .news-item__arrow { display: none; }
}


/* ---------- 4-8 トップのブログカード（[sgnr_blog_cards]） ---------- */
.sgnr-blogcards .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .sgnr-blogcards .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sgnr-blogcards .blog-grid { grid-template-columns: 1fr; } }
.sgnr-blogcards .post-card { display: flex; flex-direction: column; background: var(--white); border: var(--bd); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.sgnr-blogcards .post-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--ink); }
.sgnr-blogcards .post-card__thumb { position: relative; aspect-ratio: 16/10; background: var(--ink); color: var(--yellow); display: grid; place-items: center; overflow: hidden; border-bottom: var(--bd); }
.sgnr-blogcards .post-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sgnr-blogcards .post-card__thumb-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--yellow); color: var(--ink); font-family: var(--head-jp); font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 4px 10px; }
.sgnr-blogcards .post-card__thumb-en { position: absolute; bottom: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: rgba(232,169,26,.6); }
.sgnr-blogcards .post-card__body { padding: 24px; }
.sgnr-blogcards .post-card__meta { display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--grey); letter-spacing: .1em; margin-bottom: 12px; }
.sgnr-blogcards .post-card__title {
	font-family: var(--head-jp); font-weight: 700; font-size: 19px; line-height: 1.55;
	margin: 0 0 12px; color: var(--ink) !important;
	background: none !important; border: none !important; padding: 0 !important;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sgnr-blogcards .post-card__title::before, .sgnr-blogcards .post-card__title::after { content: none !important; }
.sgnr-blogcards .post-card__excerpt { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sgnr-blogcards__more { text-align: center; margin-top: 36px; }


/* ---------- 4-9 トップの最新車両（[sgnr_vehicles]） ---------- */
.sgnr-veh-home { display: block; }
.sgnr-veh-home__more { display: block; grid-column: 1 / -1; text-align: center; margin-top: 36px; }


/* ==================================================================
   05  下層ページ個別
   ================================================================== */

/* ---------- 5-1 料金（387）：オプション / 注意事項 ---------- */
.opt-grid > .wp-block-group__inner-container {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch;
}
@media (max-width: 768px) { .opt-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } }

.opt-card {
	border: 1px solid var(--line); border-top: 3px solid var(--ink);
	background: var(--white); padding: 28px 30px; height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.opt-card:hover { transform: translateY(-5px); box-shadow: 6px 6px 0 var(--ink); }
.opt-card > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; }
.opt-card__num { font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: .2em !important; color: var(--yellow-dark) !important; margin: 0 0 12px !important; }
.opt-card__name {
	font-family: var(--head-jp) !important; font-weight: 800 !important; font-size: 17px !important;
	color: var(--ink) !important; margin: 0 0 10px !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.opt-card__name::before, .opt-card__name::after { content: none !important; }
.opt-card__desc { font-size: 15px !important; line-height: 1.8 !important; color: var(--ink-soft) !important; margin: 0 0 18px !important; flex: 1; }
.opt-card__fee { font-family: var(--mono) !important; font-size: 12px !important; color: var(--grey) !important; margin: 0 !important; padding-top: 14px !important; border-top: 1px solid var(--line); }
.opt-card__fee strong { font-family: var(--head-jp) !important; font-size: 18px !important; font-weight: 800 !important; color: var(--ink) !important; margin-left: 6px; }

.note-item { border-top: 1px solid var(--line); padding-top: 20px; margin: 0 !important; }
.note-item > .wp-block-group__inner-container { display: grid; grid-template-columns: 64px 1fr; column-gap: 22px; align-items: start; }
.note-item__num { grid-column: 1; grid-row: 1 / span 2; font-family: var(--display) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: .04em !important; color: var(--yellow-dark) !important; margin: 0 0 4px !important; }
.note-item__name {
	grid-column: 2; grid-row: 1;
	font-family: var(--head-jp) !important; font-weight: 800 !important; font-size: 16px !important;
	color: var(--ink) !important; margin: 0 0 6px !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.note-item__name::before, .note-item__name::after { content: none !important; }
.note-item__desc { grid-column: 2; grid-row: 2; font-size: 15px !important; line-height: 1.8 !important; color: var(--ink-soft) !important; margin: 0 !important; }
@media (max-width: 600px) {
	.note-item > .wp-block-group__inner-container { grid-template-columns: 48px 1fr; column-gap: 14px; }
}


/* ---------- 5-2 サービス（473）：名義スキーム ---------- */
@media (max-width: 782px) {
	.scheme-grid { grid-template-columns: 1fr !important; padding: 20px !important; gap: 20px !important; }
}


/* ---------- 5-3 ご利用の流れ（518）：FAQ誘導セクション ---------- */
/* CTA直前でも下余白を残し、単独ボタンを中央に */
.page-id-518 .sec-pad:has(+ .cta-strip) { padding-bottom: clamp(56px, 8vw, 96px) !important; }
.page-id-518 .sec-pad:has(+ .cta-strip) .swell-block-button { text-align: center !important; }


/* ---------- 5-4 車両（538）：[sgnr_fleet] ---------- */
.fleet-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.fleet-filters button {
	background: var(--white); border: var(--bd); padding: 10px 16px;
	font-family: var(--head-jp); font-size: 13px; font-weight: 500; letter-spacing: .08em;
	cursor: pointer; transition: background .15s ease, color .15s ease;
}
.fleet-filters button.active,
.fleet-filters button:hover { background: var(--ink); color: var(--white); }

.fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .fleet-grid { grid-template-columns: 1fr; } }

.fleet-card { border: var(--bd-thick); background: var(--white); display: flex; flex-direction: column; transition: transform .2s ease; }
.fleet-card:hover { transform: translateY(-4px); }
.fleet-card__img { aspect-ratio: 4/3; background: var(--paper); border-bottom: var(--bd-thick); position: relative; overflow: hidden; display: grid; place-items: center; }
.fleet-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-card__img::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 24px 24px; opacity: .5;
}
/* 写真が無いときのダミー車両アイコン */
.fleet-card__img-mark { position: relative; width: 70%; height: 50%; background: var(--ink); border-radius: 8px 8px 4px 4px; }
.fleet-card__img-mark::before { content: ""; position: absolute; bottom: -10%; left: 8%; right: 8%; height: 18%; background: var(--paper); border: var(--bd-thick); border-radius: 2px; }
.fleet-card__img-mark::after { content: ""; position: absolute; bottom: -32%; left: 14%; width: 18%; height: 18%; background: var(--ink-soft); border: 3px solid var(--paper); border-radius: 50%; }
.fleet-card__img-mark .wheel-r { position: absolute; bottom: -32%; right: 14%; width: 18%; height: 18%; background: var(--ink-soft); border: 3px solid var(--paper); border-radius: 50%; }

.fleet-card__plate { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--yellow); font-family: var(--display); font-size: 11px; padding: 4px 10px; letter-spacing: .15em; border-radius: 3px; border: 1px solid var(--yellow); z-index: 2; }
.fleet-card__cold { position: absolute; top: 12px; left: 12px; background: #2b6cb0; color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; padding: 4px 8px; border-radius: 3px; z-index: 2; }
.fleet-card__avail { position: absolute; top: 12px; right: 12px; font-family: var(--head-jp); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px; z-index: 2; }
.fleet-card__avail.is-ok  { background: #e7f4ea; color: #1f7a3d; border: 1px solid #1f7a3d; }
.fleet-card__avail.is-out { background: rgba(0,0,0,.06); color: var(--grey); border: 1px solid var(--line); }
.fleet-card__avail.is-ask { background: var(--cream); color: var(--yellow-dark); border: 1px solid var(--yellow-dark); }

.fleet-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.fleet-card__cat { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--yellow-dark); margin: 0 0 6px !important; }
.fleet-card__name {
	font-family: var(--head-jp); font-weight: 900; font-size: 20px;
	margin: 0 0 12px !important; color: var(--ink) !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.fleet-card__name::before, .fleet-card__name::after { content: none !important; display: none !important; }
.fleet-card__specs { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; font-size: 12px; font-family: var(--mono); color: var(--grey); }
.fleet-card__specs li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: var(--bd-line); }
.fleet-card__specs li:last-child { border-bottom: none; }
.fleet-card__specs strong { color: var(--ink); font-weight: 500; text-align: right; }
.fleet-card__price { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 16px !important; }
.fleet-card__price-num { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.fleet-card__price-unit { font-family: var(--mono); font-size: 11px; color: var(--grey); }
.fleet-card__cta {
	margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 18px; border: var(--bd-thick); background: var(--white); color: var(--ink);
	font-family: var(--head-jp); font-weight: 700; font-size: 13px; letter-spacing: .05em;
	text-decoration: none; transition: background .18s ease, color .18s ease;
}
.fleet-card__cta:hover { background: var(--ink); color: var(--white); }

/* ページ送り */
.fleet-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.fleet-pager__btn {
	min-width: 44px; height: 44px; padding: 0 12px;
	background: var(--white); border: var(--bd);
	font-family: var(--mono); font-size: 14px; color: var(--ink);
	cursor: pointer; transition: background .15s ease, color .15s ease;
}
.fleet-pager__btn.active { background: var(--ink); color: var(--white); }
.fleet-pager__btn:hover:not(:disabled):not(.active) { background: var(--paper); }
.fleet-pager__btn:disabled { opacity: .35; cursor: default; }


/* ---------- 5-5 FAQ（544）：アコーディオン ---------- */
.faq-cat { margin-bottom: 56px; }
.faq-cat__head { display: flex; align-items: baseline; gap: 16px; border-bottom: var(--bd); padding-bottom: 12px; margin-bottom: 24px; }
.faq-cat__num { font-family: var(--display); font-size: 32px; color: var(--yellow-dark); line-height: 1; }
.faq-cat__title {
	font-family: var(--head-jp); font-weight: 900; font-size: 20px;
	margin: 0 !important; color: var(--ink) !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.faq-cat__title::before, .faq-cat__title::after { content: none !important; }
.faq-cat__en { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--grey); }

.faq-item { border-bottom: var(--bd-line); }
.faq-item summary { display: grid; grid-template-columns: 32px 1fr 32px; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; align-items: start; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q-mark { font-family: var(--display); font-size: 22px; color: var(--yellow-dark); line-height: 1; }
.faq-item__q { font-family: var(--head-jp); font-weight: 700; font-size: 16px; line-height: 1.6; }
.faq-item__toggle { width: 24px; height: 24px; border: var(--bd); display: grid; place-items: center; position: relative; margin-top: 2px; }
.faq-item__toggle::before, .faq-item__toggle::after { content: ""; position: absolute; background: var(--ink); }
.faq-item__toggle::before { width: 12px; height: 1px; }
.faq-item__toggle::after { width: 1px; height: 12px; transition: transform .2s ease; }
.faq-item[open] .faq-item__toggle::after { transform: scaleY(0); }
.faq-item__a { padding: 0 0 24px 48px; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.faq-item__a a { color: var(--yellow-dark); border-bottom: 1px solid currentColor; }


/* ---------- 5-6 会社情報（602） ---------- */
.biz-card { border: var(--bd-thick); background: var(--white); padding: 28px; height: 100%; }
.biz-card__label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--yellow-dark); margin: 0 0 10px; }
.biz-card__title {
	font-family: var(--head-jp); font-weight: 900; font-size: 18px;
	margin: 0 0 10px !important; color: var(--ink) !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.biz-card__title::before, .biz-card__title::after { content: none !important; }
.biz-card__desc { font-size: 15px; line-height: 1.8; color: var(--ink-soft); margin: 0; }

.company-bio__name {
	font-family: var(--head-jp); font-weight: 900; font-size: 20px;
	margin: 0 0 4px !important; color: var(--ink) !important;
	background: none !important; border: none !important; padding: 0 !important;
}
.company-bio__name::before, .company-bio__name::after { content: none !important; }
.company-bio__role { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--grey); margin: 0 0 20px; }
.company-bio__text { font-size: 16px; line-height: 1.9; color: var(--ink-soft); }

.about-map { position: relative; width: 100%; aspect-ratio: 16/9; border: var(--bd-thick); overflow: hidden; }
.about-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---------- 5-7 ブログ一覧（549）：[sgnr_blog] ---------- */
.sgnr-blogwrap .blog-layout {
	display: grid; grid-template-columns: 1fr 280px; gap: 56px !important;
	max-width: var(--container_size, 1200px); margin: 0 auto;
}
@media (max-width: 900px) { .sgnr-blogwrap .blog-layout { grid-template-columns: 1fr; gap: 40px; } }

.sgnr-blogwrap .blog-tabs { display: flex; gap: 4px; border-bottom: var(--bd); margin-bottom: 44px !important; padding-bottom: 4px; flex-wrap: wrap; }
.sgnr-blogwrap .blog-tabs button {
	background: none; border: none; padding: 12px 16px;
	font-family: var(--head-jp); font-weight: 500; font-size: 13px; letter-spacing: .06em;
	color: var(--grey); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color .15s ease;
}
.sgnr-blogwrap .blog-tabs button.active,
.sgnr-blogwrap .blog-tabs button:hover { color: var(--ink); border-bottom-color: var(--yellow); }

.sgnr-blogwrap .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px !important; }
@media (max-width: 600px) { .sgnr-blogwrap .blog-grid { grid-template-columns: 1fr; } }

.sgnr-blogwrap .post-card { display: flex; flex-direction: column; background: var(--white); border: var(--bd); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.sgnr-blogwrap .post-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--ink); }
.sgnr-blogwrap .post-card__thumb { position: relative; aspect-ratio: 16/10; background: var(--ink); color: var(--yellow); display: grid; place-items: center; overflow: hidden; border-bottom: var(--bd); }
.sgnr-blogwrap .post-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sgnr-blogwrap .post-card__thumb-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--yellow); color: var(--ink); font-family: var(--head-jp); font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 4px 10px; }
.sgnr-blogwrap .post-card__thumb-en { position: absolute; bottom: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: rgba(232,169,26,.6); }
.sgnr-blogwrap .post-card__body { padding: 24px !important; }
.sgnr-blogwrap .post-card__meta { display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--grey); letter-spacing: .1em; margin-bottom: 12px; }
.sgnr-blogwrap .post-card__title {
	font-family: var(--head-jp); font-weight: 700;
	font-size: 19px !important; line-height: 1.55 !important; margin: 0 0 12px !important;
	color: var(--ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sgnr-blogwrap .post-card__excerpt {
	font-size: 14px !important; line-height: 1.8 !important; color: var(--ink-soft); margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* サイドバー */
.sgnr-blogwrap .blog-sidebar > div { border: var(--bd); padding: 28px !important; margin-bottom: 28px !important; background: var(--white); }
.sgnr-blogwrap .blog-sidebar > div:last-child { margin-bottom: 0; }
.sgnr-blogwrap .blog-sidebar h4 {
	display: flex; align-items: baseline;
	font-family: var(--head-jp); font-size: 14px; letter-spacing: .06em; color: var(--ink);
	margin: 0 0 18px !important; padding: 0 !important;
	background: none !important; border: none !important; box-shadow: none !important;
}
.sgnr-blogwrap .blog-sidebar h4::before,
.sgnr-blogwrap .blog-sidebar h4::after { content: none !important; display: none !important; border: none !important; }
.sgnr-blogwrap .blog-sidebar h4 .en { margin-left: auto; font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--grey); font-weight: 400; }

.sgnr-blogwrap .cat-list,
.sgnr-blogwrap .popular-list { list-style: none; margin: 0; padding: 0; }
.sgnr-blogwrap .cat-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--bd-line); }
.sgnr-blogwrap .cat-list li:last-child { border-bottom: none; }
.sgnr-blogwrap .cat-list a { font-family: var(--head-jp); font-size: 13px; color: var(--ink-soft); padding: 13px 0 !important; text-decoration: none; }
.sgnr-blogwrap .cat-list a:hover { color: var(--yellow-dark); }
.sgnr-blogwrap .cat-list .count { font-family: var(--mono); font-size: 11px; color: var(--grey); }
.sgnr-blogwrap .popular-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px !important; padding: 14px 0 !important; border-bottom: var(--bd-line); }
.sgnr-blogwrap .popular-list li:last-child { border-bottom: none; }
.sgnr-blogwrap .popular-list__num { font-family: var(--display); font-size: 16px !important; color: var(--yellow-dark); }
.sgnr-blogwrap .popular-list a { font-family: var(--head-jp); font-size: 13px; line-height: 1.7 !important; color: var(--ink-soft); text-decoration: none; }
.sgnr-blogwrap .popular-list a:hover { color: var(--yellow-dark); }
.sgnr-blogwrap .tags { display: flex; flex-wrap: wrap; gap: 10px !important; }
.sgnr-blogwrap .tags .tag { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); border: var(--bd-line); padding: 7px 12px !important; text-decoration: none; transition: all .15s ease; }
.sgnr-blogwrap .tags .tag:hover { border-color: var(--ink); color: var(--ink); }


/* ---------- 5-8 お問い合わせ（357） ---------- */
.contact-hero { margin: 8px 0 44px; }
.contact-hero__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .15em; color: var(--grey);
	margin: 0 0 14px !important;
}
.contact-hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--yellow); }
.contact-hero__title {
	font-family: var(--display); font-weight: 400;
	font-size: clamp(60px, 10vw, 112px) !important; line-height: .9 !important;
	letter-spacing: .01em; color: var(--ink); margin: 0 0 10px !important;
}
.contact-hero__title::after { content: ""; display: inline-block; width: .13em; height: .13em; background: var(--yellow); margin-left: .1em; vertical-align: baseline; }
.contact-hero__jp { font-family: var(--head-jp); font-weight: 800 !important; font-size: 24px !important; color: var(--ink); margin: 0 0 16px !important; }
.contact-hero__lead { font-size: 15px !important; line-height: 1.95; color: var(--ink-soft); max-width: 40em; margin: 0; }

.contact-cards { margin-bottom: 52px; }
.contact-card { height: 100%; border: 1.5px solid var(--ink); }
.contact-card > .wp-block-group__inner-container { height: 100%; padding: 28px 26px; }
.contact-card__label { font-family: var(--mono); font-size: 11px !important; letter-spacing: .12em; color: var(--grey); margin: 0 0 16px !important; }
.contact-card__value {
	font-family: var(--display) !important; font-weight: 400 !important;
	font-size: 26px !important; letter-spacing: .04em !important;
	color: var(--ink); margin: 0 0 10px !important; word-break: break-all;
}
.contact-card__note { font-size: 12px !important; color: var(--grey); margin: 0 !important; }

/* フォームの枠 */
.contact-formbox { border: 1.5px solid var(--ink); padding: 44px 48px; margin-top: 8px; }
.contact-formbox .wpcf7-form { max-width: 100%; }
.contact-formbox__title {
	display: flex; align-items: baseline; gap: 12px;
	font-family: var(--head-jp); font-weight: 700; font-size: 15px; color: var(--ink);
	padding-bottom: 16px; margin: 0 0 32px !important; border-bottom: 1px solid var(--line);
}
.contact-formbox__title::before { content: "FORM"; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--yellow); }
.contact-formbox__title::after { content: "REQUIRED *"; margin-left: auto; align-self: center; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--grey); }
@media (max-width: 600px) { .contact-formbox { padding: 26px 18px; } }

/* Contact Form 7 */
.wpcf7 .wpcf7-form { max-width: 760px; margin-inline: auto; }
.cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-bottom: 28px; }
.cf7-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.cf7-field.cf7-full { grid-column: 1 / -1; }
.cf7-field br { display: none; }
@media (max-width: 600px) { .cf7-grid { grid-template-columns: 1fr; gap: 18px; } }

.cf7-field label { font-family: var(--head-jp); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.cf7-req { color: var(--red); font-family: var(--mono); font-size: 10px; margin-left: 6px; }
.cf7-opt { color: var(--grey); font-family: var(--mono); font-size: 10px; margin-left: 6px; }

.cf7-field .wpcf7-form-control-wrap { display: block; width: 100%; }
.cf7-field input.wpcf7-form-control,
.cf7-field select.wpcf7-form-control,
.cf7-field textarea.wpcf7-form-control {
	width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
	background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cf7-field input.wpcf7-form-control:focus,
.cf7-field select.wpcf7-form-control:focus,
.cf7-field textarea.wpcf7-form-control:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232,169,26,.18); }
.cf7-field textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }

.cf7-consent { max-width: 760px; margin: 4px auto 26px; text-align: center; }
.cf7-consent .wpcf7-list-item { margin: 0; }
.cf7-consent label { font-family: var(--head-jp); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cf7-consent input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--yellow); }
.cf7-consent a { color: var(--ink); border-bottom: 1px solid var(--yellow); }
.cf7-consent a:hover { color: var(--yellow-dark); }
.cf7-consent__note { display: block; font-size: 11px; color: var(--grey); margin-top: 7px; }

.cf7-submit-wrap { text-align: center; margin-top: 8px; }
.cf7-submit-wrap input.wpcf7-submit {
	font-family: var(--head-jp); font-weight: 700; font-size: 16px; color: var(--ink);
	background: var(--yellow); border: 2px solid var(--ink); border-radius: 0;
	padding: 15px 50px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf7-submit-wrap input.wpcf7-submit:hover { background: var(--yellow-dark); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }

.cf7-field input.wpcf7-not-valid,
.cf7-field select.wpcf7-not-valid,
.cf7-field textarea.wpcf7-not-valid { border-color: var(--red); }
.wpcf7-not-valid-tip { color: var(--red); font-family: var(--mono); font-size: 12px; margin-top: 5px; }
.wpcf7 .wpcf7-response-output { border-radius: 0; border-width: 1px; margin: 18px 0 0; padding: 12px 16px; font-size: 13px; }


/* ---------- 5-9 プライバシーポリシー（360） ---------- */
.page-id-360 .l-article { max-width: 820px; }
.page-id-360 .post_content h3 {
	font-family: var(--head-jp); font-weight: 700; font-size: 18px; color: var(--ink);
	margin: 2.4em 0 .7em; padding: 0 0 0 14px;
	background: none !important; border: none !important;
	border-left: 4px solid var(--yellow) !important;
}
.page-id-360 .post_content h3::before,
.page-id-360 .post_content h3::after { content: none !important; display: none !important; }
.page-id-360 .post_content p { font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); margin: 0 0 1em; }
.page-id-360 .post_content ul { padding-left: 1.4em; margin: 0 0 1.3em; }
.page-id-360 .post_content li { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); margin-bottom: .35em; }


/* ==================================================================
   06  記事詳細（single）※今後追加する記事にも自動適用
   ================================================================== */
.single .l-mainContent.l-article { max-width: 820px; margin-left: auto; margin-right: auto; }

/* タイトル帯 */
.single .p-articleHead.c-postTitle { border-bottom: var(--bd-thick); padding-bottom: 22px; margin-bottom: 40px; }
.single .c-postTitle__ttl {
	font-family: var(--head-jp) !important; font-weight: 900 !important;
	font-size: clamp(24px, 4.2vw, 34px) !important; line-height: 1.45 !important;
	color: var(--ink) !important; letter-spacing: .01em; background: none !important;
}
.single .c-postTitle__date,
.single .c-postTitle .c-postTimes,
.single .c-postTitle time { font-family: var(--mono) !important; font-size: 12px !important; color: var(--grey) !important; letter-spacing: .08em; }
.single .c-postThumb { border: var(--bd); }

/* 本文 */
.single .post_content { font-family: var(--body); font-size: 17px; line-height: 1.9; color: var(--ink-soft); }
.single .post_content > * { margin-bottom: 1.5em !important; }
.single .post_content strong { font-weight: 700; color: var(--ink); }
.single .post_content a:not(.sgnr-btn) { color: var(--yellow-dark); text-decoration: underline; text-underline-offset: 2px; }
.single .post_content a:not(.sgnr-btn):hover { color: var(--ink); }

.single .post_content h2 {
	font-family: var(--head-jp) !important; font-weight: 900 !important;
	font-size: 22px !important; line-height: 1.5 !important; color: var(--ink) !important;
	background: none !important; border: none !important;
	border-left: 5px solid var(--yellow) !important;
	padding: 2px 0 2px 16px !important; margin: 2.6em 0 1em !important;
}
.single .post_content h2::before, .single .post_content h2::after { content: none !important; display: none !important; }
.single .post_content h3 {
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: 18px !important; line-height: 1.6 !important; color: var(--ink) !important;
	background: none !important; border: none !important;
	border-bottom: var(--bd-line) !important;
	padding: 0 0 8px !important; margin: 2.2em 0 .8em !important;
}
.single .post_content h3::before, .single .post_content h3::after { content: none !important; display: none !important; }

.single .post_content ol { padding-left: 1.3em; margin-bottom: 1.5em; }
.single .post_content ul { padding-left: 0; margin-bottom: 1.5em; }
.single .post_content li { margin-bottom: .5em; line-height: 1.8; }
.single .post_content ul > li { list-style: none; position: relative; padding-left: 1.3em; }
.single .post_content ul > li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--yellow); }

.single .post_content table { width: 100%; border-collapse: collapse; border: var(--bd); font-size: 14px; margin-bottom: 1.5em; }
.single .post_content th, .single .post_content td { border: var(--bd-line); padding: 12px 14px; text-align: left; vertical-align: top; }
.single .post_content thead th { background: var(--ink); color: var(--white); font-family: var(--head-jp); font-weight: 700; }
.single .post_content tbody th { background: var(--paper); color: var(--ink); font-weight: 700; }

.single .post_content blockquote { border-left: 4px solid var(--line); padding: 4px 0 4px 20px; color: var(--grey); margin: 1.5em 0; }

/* スマホ：記事内の表は横スクロールに逃がす */
@media (max-width: 767px) {
	.single .post_content .wp-block-table { overflow-x: auto; }
}


/* ==================================================================
   07  ローダー / スクロールバー（sugu.js と連動）
   ================================================================== */
/* スクロール進捗バー（sugu.js が body に挿入） */
.sugu-progress {
	position: fixed; top: 0; left: 0; height: 2px; width: 0;
	background: var(--yellow); z-index: 200; pointer-events: none;
	transition: width .08s linear;
}

/* 初回ローダー（functions.php が wp_body_open で出力） */
#sugu-loader {
	position: fixed; inset: 0; z-index: 99999;
	background: var(--white); display: grid; place-items: center; overflow: hidden;
	transition: opacity .45s ease, visibility .45s ease;
}
#sugu-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
html.sugu-loaded #sugu-loader { display: none !important; }   /* 2回目以降はちらつかせない */

#sugu-loader .sugu-loader__grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 40px 40px; opacity: .5; pointer-events: none;
}
#sugu-loader .sugu-loader__road {
	position: absolute; left: 0; right: 0; bottom: 33%; height: 3px;
	background: repeating-linear-gradient(90deg, var(--yellow) 0 26px, transparent 26px 60px);
	opacity: .45; animation: suguRoad .45s linear infinite;
}
@keyframes suguRoad { to { background-position: -60px 0; } }

.sugu-loader__truck { position: relative; width: clamp(220px, 42vw, 460px); will-change: transform; animation: suguDrive 3s linear forwards; }
.sugu-loader__truck img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.18)); animation: suguBob .38s ease-in-out infinite; }
@keyframes suguDrive { 0% { transform: translateX(45vw); } 100% { transform: translateX(-45vw); } }
@keyframes suguBob { 0%,100% { transform: translateY(0) rotate(-.3deg); } 50% { transform: translateY(-5px) rotate(.3deg); } }

.sugu-loader__copy {
	position: absolute; left: 0; right: 0; bottom: 16%; text-align: center;
	font-family: var(--display); font-size: 13px; letter-spacing: .36em; text-transform: uppercase;
	color: var(--grey); animation: suguCopyIn .8s .2s ease-out both;
}
@keyframes suguCopyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* ==================================================================
   09  レスポンシブ調整（列数・スマホ専用の詰め）
   ------------------------------------------------------------------
   SWELLのリッチカラムは .swell-block-column の --clmn-w で幅が決まる。
   ブロック設定より強く効かせるため、セレクタの詳細度を揃えてある。
   ================================================================== */

/* ---------- 9-1 リッチカラムの列数 ---------- */
/* スマホ：原則1列。実績カウンターだけ3列を維持する */
@media (max-width: 599px) {
	.swell-block-columns > .swell-block-columns__inner > .swell-block-column {
		--clmn-w: 100% !important;
	}
	.swell-block-columns > .swell-block-columns__inner > .swell-block-column:has(> .stat) {
		--clmn-w: 33.33% !important;
	}
}

/* タブレット：カード系は2列（実績カウンターは3列のまま） */
@media (min-width: 600px) and (max-width: 959px) {
	.swell-block-column:has(> .service-card),
	.swell-block-column:has(> .reason),
	.swell-block-column:has(> .price-card),
	.swell-block-column:has(> .opt-card),
	.swell-block-column:has(> .biz-card) { --clmn-w: 50% !important; }
}

/* 横スクロール表示（ブロック設定でONにしたとき）のカード幅と操作性 */
@media (max-width: 767px) {
	.swell-block-columns[data-scrollable="1"] > .swell-block-columns__inner {
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-left: 4px; padding-right: 4px;
	}
	.swell-block-columns[data-scrollable="1"] > .swell-block-columns__inner > .swell-block-column {
		--clmn-w: 78% !important;      /* 次のカードが少し覗く幅 */
		scroll-snap-align: start;
	}
}

/* ---------- 9-2 スマホの見出しスケール ---------- */
@media (max-width: 599px) {
	.section-title, .sec-title { font-size: 25px !important; line-height: 1.45 !important; }
	.section-eyebrow__num { font-size: 34px !important; }
	.section-eyebrow__en, .sec-eyebrow__en { font-size: 15px !important; }
	.section-lead { font-size: 16px !important; }
	.page-hero__en { font-size: clamp(44px, 13vw, 64px) !important; }
	.service-card__title { font-size: 21px !important; }
	.reason__title { font-size: 20px !important; }
	.section-eyebrow__jp, .sec-eyebrow__jp { margin-left: 0 !important; flex-basis: 100%; }
}

/* ---------- 9-3 スマホの左右余白 ---------- */
@media (max-width: 600px) {
	.reason        { padding: 28px 22px; }
	.service-card__body { padding: 22px; }
	.service-card__link { margin: auto -22px 0 !important; padding: 14px 22px; }
	.opt-card      { padding: 22px 20px; }
	.biz-card      { padding: 22px; }
	.contact-card > .wp-block-group__inner-container { padding: 22px 20px; }
	.callout       { padding: 18px; }
	.faq-item__a   { padding-left: 0; }
	.note-item > .wp-block-group__inner-container { column-gap: 12px; }
}


/* ==================================================================
   08  モーション抑制（OS設定で「視差効果を減らす」人向け）
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sugu-loader__truck { animation: none; transform: translateX(0); }
	.sugu-loader__truck img { animation: none; }
	#sugu-loader .sugu-loader__road { animation: none; }
	.sugu-loader__copy { animation: none; }
	.cta-strip::before { animation: none; }
	.section-eyebrow::after { transition: none; }
	.marquee__track, .marquee__track--rev { animation: none !important; }
}

/* ===== 数字ブロックの折り返しを整える ===== */
@media (max-width: 599px) {
  .stat__num .u-fz-xs { white-space: nowrap !important; }
  .stat__num { min-height: 2.5em; }
}

/* ===== PCは通常の3列 / スマホだけ横スクロール ===== */
@media (min-width: 768px) {
  .swell-block-columns[data-scrollable="1"] > .swell-block-columns__inner {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    margin-left: calc(var(--swl-clmn-mrgn--x) * -1) !important;
  }
  .swell-block-columns[data-scrollable="1"] > .swell-block-columns__inner > .swell-block-column {
    flex-shrink: 1 !important;
    width: calc(var(--clmn-w) - var(--swl-clmn-mrgn--x)) !important;
    margin-left: var(--swl-clmn-mrgn--x) !important;
  }
}

/* ===== 修正（横スクロール時のバッジ切れ） ===== */
.swell-block-columns[data-scrollable="1"] > .swell-block-columns__inner {
  padding-top: 16px;
}

/* ===== 修正（注意事項：番号の折り返し） ===== */
@media (max-width: 600px) {
  .note-item > .wp-block-group__inner-container {
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
  }
  .note-item__num {
    white-space: nowrap !important;
    font-size: 17px !important;
  }
}

@media (max-width: 600px) {
  .sec-title, .section-title { font-size: 22px !important; }
}

/* ===== 修正（ブログ一覧：カードタイトルのSWELL h3装飾を打ち消す） ===== */
.sgnr-blogwrap .post-card__title {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.sgnr-blogwrap .post-card__title::before,
.sgnr-blogwrap .post-card__title::after {
  content: none !important;
  display: none !important;
}

/* ==================================================================
   10  トップページ（新デザイン）
   ================================================================== */

/* ---------- 10-1 お悩みセクション ---------- */
.sgnr-worry { padding: clamp(48px, 7vw, 88px) 0; text-align: center; }
.sgnr-worry__lead {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(20px, 2.6vw, 30px) !important;
	color: var(--ink); margin: 0 0 clamp(20px, 3vw, 36px) !important;
}
.sgnr-worry__lead strong {
	font-weight: 900; font-size: 1.3em;
	background: linear-gradient(transparent 58%, #FCE38A 58% 96%, transparent 96%);
	padding: 0 .12em;
}

/* 人物とフキダシの舞台 */
.sgnr-worry__stage {
	position: relative;
	width: min(1180px, 100%);
	margin: 0 auto;
	aspect-ratio: 1180 / 620;
}
.sgnr-worry__icon {
	position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
	width: 30%; height: auto; display: block;
}

/* フキダシ共通 */
.sgnr-worry__bubble {
	position: absolute;
	display: block;
	background: #0A0A0A; color: #fff;
	font-family: var(--head-jp); font-weight: 500;
	font-size: clamp(15px, 1.9vw, 24px); line-height: 1.55;
	padding: 22px 26px; border-radius: 16px;
	width: 33%;
	text-align: center;
}
.sgnr-worry__bubble b { font-weight: 900; font-size: 1.2em; color: #FFD43B; }
.sgnr-worry__bubble::after {          /* しっぽ */
	content: ""; position: absolute;
	border: 16px solid transparent;
}
/* 4隅の配置と、内側（人物）へ向くしっぽ */
.sgnr-worry__bubble.is-tl { top: 3%;    left: 1%;  }
.sgnr-worry__bubble.is-tr { top: 3%;    right: 1%; }
.sgnr-worry__bubble.is-bl { bottom: 5%; left: 1%;  }
.sgnr-worry__bubble.is-br { bottom: 5%; right: 1%; }
.sgnr-worry__bubble.is-tl::after { border-left-color: #0A0A0A;  right: -30px; bottom: 22%; }
.sgnr-worry__bubble.is-tr::after { border-right-color: #0A0A0A; left: -30px;  bottom: 22%; }
.sgnr-worry__bubble.is-bl::after { border-left-color: #0A0A0A;  right: -30px; top: 12%; }
.sgnr-worry__bubble.is-br::after { border-right-color: #0A0A0A; left: -30px;  top: 12%; }

/* チェックマーク（丸バッジ） */
.sgnr-worry__check {
	position: absolute; top: -16px;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	font-style: normal; font-size: 22px; color: #fff; font-weight: 700;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.is-tl .sgnr-worry__check,
.is-bl .sgnr-worry__check { left: -16px; }
.is-tr .sgnr-worry__check,
.is-br .sgnr-worry__check { right: -16px; }
.sgnr-worry__check.is-red   { background: #E23B32; }
.sgnr-worry__check.is-green { background: #2FB344; }
.sgnr-worry__check.is-blue  { background: #1D84D6; }

/* スマホ：人物を上に置き、フキダシは2列。チェックは外側の角に置く
   ※ここで display:flex にすると <b> と地の文が別々のフレックスアイテムに
     なって1文字ずつ改行される。必ず block のままにすること。 */
@media (max-width: 767px) {
	.sgnr-worry__stage {
		aspect-ratio: auto;
		display: grid; grid-template-columns: 1fr 1fr;
		gap: 26px 12px;
	}
	.sgnr-worry__icon {
		position: static; transform: none;
		width: 116px; margin: 0 auto 4px; grid-column: 1 / -1;
	}
	.sgnr-worry__bubble {
		position: relative;      /* ← チェックバッジの位置基準 */
		display: block;
		width: auto; padding: 20px 12px 16px;
		font-size: 13px; line-height: 1.65;
		text-align: center !important;
		border-radius: 12px;
	}
	.sgnr-worry__bubble::after { display: none; }
	.sgnr-worry__bubble b { font-size: 1.1em; }

	/* 左列は左上、右列は右上 */
	.sgnr-worry__check {
		width: 30px; height: 30px; font-size: 16px;
		top: -14px; transform: none;
	}
	.sgnr-worry__bubble:nth-of-type(odd)  .sgnr-worry__check { left: -8px !important;  right: auto !important; }
	.sgnr-worry__bubble:nth-of-type(even) .sgnr-worry__check { right: -8px !important; left: auto !important; }
}

/* ---------- 10-2 リード文3行 ---------- */
.sgnr-lead3 {
	text-align: center;
	font-family: var(--head-jp); font-weight: 500;
	font-size: clamp(15px, 1.9vw, 24px) !important;
	line-height: 2.1 !important;
	color: var(--ink);
	max-width: 1000px;
	margin: 0 auto clamp(48px, 7vw, 88px) !important;
	padding: 0 20px;
}
/* スマホ：PC用の <br> を無効化し、自然な折り返しに任せる */
@media (max-width: 767px) {
	.sgnr-lead3 {
		font-size: 15px !important;
		line-height: 1.9 !important;
		text-align: left;
		padding: 0 18px;
		max-width: 420px;
	}
	.sgnr-lead3 br { display: none; }
}
/* ---------- 10-3 3つのプラン ---------- */
.sgnr-plans {
	background: #FBE6A2;
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 80px);
	text-align: center;
}
.sgnr-plans__lead {
	display: inline-block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(20px, 2.6vw, 32px) !important;
	margin: 0 0 clamp(24px, 3.5vw, 44px) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%);
	padding: 0 .5em;
}
.sgnr-plans__lead strong { font-weight: 900; font-size: 1.5em; }

.sgnr-plans__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
	max-width: 1180px; margin: 0 auto;
	align-items: stretch;
}

.sgnr-plan {
	background: #fff; border: 6px solid var(--ink);
	border-radius: 22px;
	padding: 22px 22px 24px;
	display: flex; flex-direction: column;
	text-align: center;
	min-height: 570px;          /* ボタン上の余白量。ここだけで調整 */
}
.sgnr-plan.is-red   { border-color: #E60012; }
.sgnr-plan.is-green { border-color: #00A040; }
.sgnr-plan.is-blue  { border-color: #0075C2; }

.sgnr-plan__name {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(20px, 2.4vw, 30px) !important;
	letter-spacing: .04em;
	margin: 0 0 16px !important;
}
.is-red   .sgnr-plan__name { color: #E60012; }
.is-green .sgnr-plan__name { color: #00A040; }
.is-blue  .sgnr-plan__name { color: #0075C2; }

.sgnr-plan__list {
	list-style: none !important; padding: 0 !important;
	margin: 0 0 18px !important; text-align: left;
	min-height: 130px;
}
.sgnr-plan__list li {
	position: relative; padding-left: 1em;
	font-size: clamp(13px, 1.35vw, 17px); line-height: 1.7;
	color: var(--ink); margin-bottom: 8px;
}
.sgnr-plan__list li::before { content: "・"; position: absolute; left: 0; }
.sgnr-plan__list em { font-style: normal; font-weight: 500; }
.is-red   .sgnr-plan__list em { color: #E60012; }
.is-green .sgnr-plan__list em { color: #00A040; }
.is-blue  .sgnr-plan__list em { color: #0075C2; }

/* 料金ブロック：タグと金額を横並びに（左：タグ ／ 右：金額）
   HTMLの並びは tag → price → plus → tag → price。
   「＋」に grid-column: 1 / -1 を与えることで、2列の流れを崩さずに
   独立した行として中央に置ける。 */
.sgnr-plan__fee {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px; row-gap: 2px;
	align-items: center;
	justify-items: start;
	padding-bottom: 32px;
}
.sgnr-plan__tag {
	display: inline-block;
	color: #fff;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 13px !important; letter-spacing: .04em;
	padding: 4px 14px; border-radius: 999px;
	margin: 0 !important;
	white-space: nowrap;
}
.is-red   .sgnr-plan__tag { background: #E60012; }
.is-green .sgnr-plan__tag { background: #00A040; }
.is-blue  .sgnr-plan__tag { background: #0075C2; }

.sgnr-plan__price {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(21px, 2.7vw, 34px) !important;
	line-height: 1.1; margin: 0 !important;
	text-align: left;
	white-space: nowrap; letter-spacing: -.02em;
}

.sgnr-plan__price span { font-size: .68em; }
.sgnr-plan__plus {
	grid-column: 1 / -1;
	justify-self: center;
	font-family: var(--head-jp); font-weight: 900;
	font-size: 22px !important; line-height: 1;
	margin: 3px 0 !important; color: var(--ink);
}
.sgnr-plan__price.is-free {
	font-size: clamp(17px, 2vw, 25px) !important;
	display: flex; align-items: baseline; justify-content: center; gap: .05em;
}
.sgnr-plan__price.is-free b {
	font-size: 2em; font-weight: 900; line-height: .9;
	margin-left: .1em;
}
.sgnr-plan__price.is-free span { font-size: .9em; }

/* ボタン：カード下端に固定 */
.sgnr-plan__btn {
	display: inline-block !important;
	align-self: flex-end;
	margin-top: auto !important;
	color: #fff !important;
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: clamp(12px, 1.15vw, 15px) !important; letter-spacing: .04em;
	padding: 9px 22px !important; border-radius: 999px !important;
	text-decoration: none !important;
	box-shadow: 0 3px 0 rgba(0,0,0,.18);
	transition: transform .15s ease, box-shadow .15s ease;
}
.is-red   .sgnr-plan__btn { background: #E60012 !important; }
.is-green .sgnr-plan__btn { background: #00A040 !important; }
.is-blue  .sgnr-plan__btn { background: #0075C2 !important; }
.sgnr-plan__btn:hover { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }

/* スマホ：3枚を横スクロールで見せる（次のカードが少し覗く幅にする）
   flex の既定の stretch でカード高さは自動で揃う。 */
@media (max-width: 767px) {
	.sgnr-plans__grid {
		display: flex;
		max-width: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 4px 16px 14px;
		margin-inline: -16px;
		scrollbar-width: none;
	}
	.sgnr-plans__grid::-webkit-scrollbar { display: none; }

	.sgnr-plan {
		flex: 0 0 84%;
		scroll-snap-align: center;
		padding: 20px 18px 18px;
		border-width: 5px; min-height: 0;
	}
	.sgnr-plan__list { min-height: 0; }
	.sgnr-plan__btn { align-self: center !important; }

	/* 横スクロールできることを示す一言 */
	.sgnr-plans__grid::after {
		content: ""; flex: 0 0 2px;
	}
	.sgnr-plans::after {
		content: "← 横にスワイプ →";
		display: block;
		font-family: var(--head-jp); font-weight: 700;
		font-size: 12px; color: var(--ink-soft);
		margin-top: 6px; opacity: .75;
	}
}

/* ---------- 10-4 選ばれる理由 ---------- */
.sgnr-why {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(48px, 7vw, 88px) clamp(16px, 3vw, 28px) clamp(56px, 8vw, 96px);
	text-align: center;
}
.sgnr-why__lead {
	display: inline-block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(20px, 2.6vw, 32px) !important;
	margin: 0 0 clamp(40px, 5vw, 64px) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%);
	padding: 0 .5em;
}
.sgnr-why__lead strong { font-weight: 900; }

/* 5枚とも同じ幅。1段目3枚 / 余った2枚は自動で中央寄せ */
.sgnr-why__grid {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 44px 26px;
	width: 100%; max-width: 1400px; margin: 0 auto;
}
.sgnr-why__card {
	position: relative;
	width: 31%;
	background: var(--ink); color: #fff;
	border-radius: 14px;
	padding: 26px 30px 28px;
	text-align: left;
	box-sizing: border-box;
}
/* 見出し：番号ぶんの余白を確保 */
.sgnr-why__head {
	display: block;
	padding: 0 90px 0 0 !important;
	margin: 0 0 14px !important;
}
.sgnr-why__head span {
	display: block;
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(16px, 1.45vw, 20px);
	color: #F5C518;
	line-height: 1.35;
	white-space: nowrap;
}
/* 番号：カードの外・右上へ */
.sgnr-why__head em {
	position: absolute;
	top: -28px; right: 20px;
	font-style: normal;
	font-family: var(--display); font-weight: 400;
	font-size: clamp(48px, 5vw, 68px);
	line-height: 1; color: #F5C518;
	-webkit-text-stroke: 7px var(--ink);
	paint-order: stroke fill;
}
.sgnr-why__text {
	font-size: clamp(13px, 1.2vw, 15.5px) !important;
	line-height: 1.85 !important;
	color: #EDEDED;
	margin: 0 !important;
}

@media (max-width: 1200px) {
	.sgnr-why__head span { white-space: normal; }
}
@media (max-width: 900px) {
	.sgnr-why__card { width: 100%; max-width: 560px; }
}
@media (max-width: 600px) {
	.sgnr-why__head { padding-right: 80px !important; }
	.sgnr-why__head em { font-size: 46px; top: -20px; right: 14px; -webkit-text-stroke-width: 5px; }
}

/* ---------- 10-5 ご利用の流れ（簡易フロー図） ----------
   番号バッジを横線で繋ぐ形。写真は使わない（詳細版は各サービスページ側）。
   線は各アイテムの ::before で「左隣から自分まで」を引き、1つ目だけ隠す。
   この方式なら列数を変えても線が破綻しない。
   899px以下は1列の縦フローに切り替え、線も縦向きにする。
   調整つまみ：
     バッジ径 … --step-size
     線の色　 … --step-line
   ------------------------------------------------------------- */
.sgnr-flow {
	width: auto;
	margin-inline: calc(50% - 50vw);
	background: #F2F2F0;
	padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 28px) clamp(48px, 7vw, 88px);
	text-align: center;

	--step-size: clamp(58px, 6vw, 84px);
	--step-line: var(--yellow-dark);
}
.sgnr-flow__lead {
	display: inline-block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(20px, 2.6vw, 32px) !important;
	letter-spacing: .04em;
	margin: 0 0 clamp(32px, 4vw, 56px) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%);
	padding: 0 .5em;
}
.sgnr-flow__lead strong { font-weight: 900; }

.sgnr-flow__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(8px, 1.4vw, 20px);
	max-width: 1080px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	padding: clamp(28px, 3.6vw, 48px) clamp(14px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
}

.sgnr-flow__item { position: relative; min-width: 0; }

/* バッジ：数字を円の中心に置き、STEP はその上に重ねる。
   2行を1つの塊として中央寄せすると、数字が下に落ちて見えるため。
   STEP の位置は .sgnr-flow__badge small の top で調整する。 */
.sgnr-flow__badge {
	position: relative;
	display: grid; place-items: center;
	width: var(--step-size); height: var(--step-size);
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--step-line); color: #fff;
	font-family: var(--head-jp); line-height: 1;
	z-index: 1;
}
.sgnr-flow__badge small {
	position: absolute;
	left: 0; right: 0;
	top: calc(var(--step-size) * .18);
	font-size: calc(var(--step-size) * .16);
	font-weight: 700; letter-spacing: .06em;
	line-height: 1;
	text-align: center;
	margin: 0;
}
.sgnr-flow__badge b {
	font-size: calc(var(--step-size) * .34);
	font-weight: 900; letter-spacing: .02em;
	line-height: 1;
	margin: 0;
}
/* 横線（前のバッジから自分へ） */
.sgnr-flow__item::before {
	content: "";
	position: absolute;
	top: calc(var(--step-size) / 2);
	right: 50%; left: -50%;
	height: 2px;
	background: var(--step-line);
}
.sgnr-flow__item:first-child::before { display: none; }

.sgnr-flow__name {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(13px, 1.4vw, 18px) !important;
	line-height: 1.5 !important;
	color: var(--ink);
	margin: 0 0 8px !important;
}
.sgnr-flow__text {
	font-size: clamp(11px, 1.05vw, 13.5px) !important;
	line-height: 1.8 !important;
	letter-spacing: .02em;
	color: var(--ink-soft);
	text-align: left;
	margin: 0 !important;
}

/* 899px以下：1列の縦フローに切り替える */
@media (max-width: 899px) {
	.sgnr-flow__grid { grid-template-columns: 1fr; gap: 0; max-width: 460px; text-align: left; }
	.sgnr-flow__item {
		display: grid;
		grid-template-columns: var(--step-size) 1fr;
		column-gap: 16px;
		padding-bottom: 22px;
	}
	.sgnr-flow__badge { margin: 0; grid-row: 1 / span 2; }
	/* 縦線：バッジの下から次のバッジへ */
	.sgnr-flow__item::before {
		top: var(--step-size); bottom: 0;
		left: calc(var(--step-size) / 2 - 1px); right: auto;
		width: 2px; height: auto;
	}
	.sgnr-flow__item:first-child::before { display: block; }
	.sgnr-flow__item:last-child::before  { display: none; }
	.sgnr-flow__name { margin: .2em 0 6px !important; }
	.sgnr-flow__text { font-size: 13px !important; }
}
@media (max-width: 599px) {
	.sgnr-flow { --step-size: 54px; }
	.sgnr-flow__grid { padding: 24px 18px 8px; }
}
/* ---------- 10-6 サービスのドロップダウン ---------- */
.c-gnav .sub-menu {
	background: var(--ink) !important;
	border: none !important;
	box-shadow: 0 8px 20px rgba(0,0,0,.25);
	min-width: 190px;
	padding: 6px 0 !important;
}
.c-gnav .sub-menu li a {
	color: #fff !important;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 13.5px !important;
	padding: 12px 20px !important;
	border: none !important;
	transition: background .15s ease, color .15s ease;
}
.c-gnav .sub-menu li a:hover {
	background: rgba(255,255,255,.08) !important;
	color: var(--yellow) !important;
}
/* 子メニューのSWELL標準アイコン（>）を消す */
.c-gnav .sub-menu li a::before,
.c-gnav .sub-menu li a::after { content: none !important; display: none !important; }

/* ==================================================================
   11  サービス3ページ共通パーツ
   ------------------------------------------------------------------
   対象：レンタル(740) / 代車(742) / レッカー(744)
   色は親要素の is-rental / is-daisha / is-towing で切り替える。
   複製してページを作る際は、この3クラスの付け替えだけでよい。
   ================================================================== */

/* ---------- 11-A サービス色トークン ----------
   セクションの最外側（.sgnr-phead2 / .sgnr-reco / .sgnr-feat など）に
   is-rental / is-daisha / is-towing を付けると、その中の子要素すべてが
   var(--svc) / var(--svc-tint) で色を拾える。
     --svc       … 濃い色（見出し文字・番号バッジ・ボタン）
     --svc-tint  … 淡い色（特徴カードの背景など）
   ------------------------------------------------------------- */
.is-rental { --svc: #E60012; --svc-tint: #F7D6D6; }
.is-daisha { --svc: #00A040; --svc-tint: #D6EBDC; }
.is-towing { --svc: #0075C2; --svc-tint: #D3E6F4; }

/* ---------- 11-A2 サービス3ページの書体統一 ----------
   章11のセクションは本文まで --head-jp（Zen Kaku Gothic New）で揃える。
   料金カードの数字・ボタン等は各所で font-family を明示済みのため影響しない。
   フォントを部分的に戻したい箇所が出たら、そこに --body を指定すること。
   ------------------------------------------------------------- */
.sgnr-reco,
.sgnr-feat,
.sgnr-veh,
.sgnr-price,
.sgnr-step,
.sgnr-doc,
.sgnr-faq {
	font-family: var(--head-jp) !important;
}
.sgnr-reco :where(p, li, span, div, a, em, strong, small, b),
.sgnr-feat :where(p, li, span, div, a, em, strong, small, b),
.sgnr-veh  :where(p, li, span, div, a, em, strong, small, b),
.sgnr-price :where(p, li, span, div, a, em, strong, small, b),
.sgnr-step :where(p, li, span, div, a, em, strong, small, b),
.sgnr-doc  :where(p, li, span, div, a, em, strong, small, b),
.sgnr-faq  :where(p, li, span, div, a, em, strong, small, b) {
	font-family: inherit;
}

/* ---------- 11-B セクション共通見出し（黄色マーカー） ----------
   3ページ共通。新しいセクションを足すときは、この2セレクタに
   クラス名を追記するだけでよい（同じ指定を書き足さないこと）
   ------------------------------------------------------------- */
.sgnr-reco__lead,
.sgnr-feat__lead,
.sgnr-veh__lead,
.sgnr-price__lead,
.sgnr-step__lead,
.sgnr-doc__lead,
.sgnr-faq__lead {
	display: inline-block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(21px, 2.9vw, 36px) !important;
	letter-spacing: .04em;
	margin: 0 0 clamp(26px, 3.2vw, 44px) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%);
	padding: 0 .5em;
}

.sgnr-reco__lead strong,
.sgnr-feat__lead strong,
.sgnr-veh__lead strong,
.sgnr-price__lead strong,
.sgnr-step__lead strong,
.sgnr-doc__lead strong,
.sgnr-faq__lead strong { font-weight: 900; }

/* ---------- 11-C ヘッダー直下のリード文 ----------
   段落ブロックで運用する。追加CSSクラス： sgnr-intro is-rental
   強調は編集画面で「太字」にするだけでよい。色はCSSが付けるので、
   エディタで文字色を指定しないこと（複製時に色が切り替わらなくなる）。
   ------------------------------------------------------------- */
.sgnr-intro {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(18px, 2.2vw, 32px) clamp(16px, 3vw, 28px);
	text-align: center !important;
	font-family: var(--head-jp) !important;
	font-weight: 700 !important;
	font-size: clamp(15px, 1.9vw, 26px) !important;
	line-height: 1.85 !important;
	letter-spacing: .04em !important;
	color: var(--ink) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.sgnr-intro strong,
.sgnr-intro .swl-inline-color {
	font-weight: 900;
	color: var(--svc, var(--ink)) !important;
}

@media (max-width: 767px) {
	.sgnr-intro {
		padding: 22px 18px;
		font-size: 14px !important;
		line-height: 1.85 !important;
		text-align: left !important;
	}
}

/* ---------- 11-0 ページ上部のSWELL標準パーツを除去 / 本文幅 ---------- */
.page-id-740 .c-pageTitle,
.page-id-742 .c-pageTitle,
.page-id-744 .c-pageTitle { display: none !important; }

.page-id-740 .p-breadcrumb,
.page-id-742 .p-breadcrumb,
.page-id-744 .p-breadcrumb { display: none !important; }

.page-id-740 .l-content,
.page-id-742 .l-content,
.page-id-744 .l-content { padding-top: 0 !important; }

.page-id-740 .post_content,
.page-id-742 .post_content,
.page-id-744 .post_content { margin-top: 0 !important; }

.page-id-740 .l-mainContent__inner,
.page-id-742 .l-mainContent__inner,
.page-id-744 .l-mainContent__inner { padding-top: 0 !important; }

/* 本文幅をヘッダー・フッターに合わせる（3-5の一覧と同じ扱い）
   これが無いとSWELL既定幅のままで、ページヘッダーだけ細く見える */
.page-id-740 .l-article,
.page-id-742 .l-article,
.page-id-744 .l-article { max-width: var(--container_size, 1120px); }


/* ---------- 11-1 ページヘッダー（カバーブロック） ----------
   調整つまみ：
     高さ　　 … .sgnr-phead2 の min-height の clamp()
     グレー味 … .sgnr-phead2 .wp-block-cover__background の opacity
     フチ太さ … .sgnr-phead2 ... p の text-shadow（.07em ＝ 76pxで約5px）
   縁取りは text-shadow で作る。-webkit-text-stroke は線が中央揃えで内側に
   食い込み、paint-order:stroke fill もChromiumで安定しないため使わない。
   ------------------------------------------------------------- */

/* 画面幅いっぱいに広げる（スクロールバー分を差し引く）
   高さはエディタ側のインラインstyle（min-height:280px）に任せる。
   変えたいときはカバーブロックの「最小の高さ」で調整すること。 */
.sgnr-phead2 {
	position: relative;
	left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
	width: calc(100vw - var(--swl-scrollbar_width, 0px));
	max-width: none !important;
	margin-inline: 0;
}

/* 写真をグレーに落とす（PDFの網掛け表現）
   エディタのオーバーレイ不透明度が0のままでも、CSS側で確実に掛ける */
.sgnr-phead2 .wp-block-cover__image-background {
	filter: grayscale(1) contrast(.92) brightness(1.04);
}
.sgnr-phead2 .wp-block-cover__background {
	background-color: #9AA0A4 !important;
	opacity: .3 !important;
}

/* タイトル：色文字＋白フチ */
.sgnr-phead2 .wp-block-cover__inner-container p {
	font-family: var(--head-jp) !important;
	font-weight: 900 !important;
	letter-spacing: .18em !important;
	/* letter-spacing は最終文字の後ろにもアキを作る。
	   中央揃えはそのアキ込みで計算されるため、同量を字下げして相殺する。 */
	text-indent: .18em !important;
	margin: 0 !important;
	-webkit-text-stroke: 0 !important;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
	text-shadow:
		 .07em    0        0 #fff,  .0647em  .0268em  0 #fff,
		 .0495em  .0495em  0 #fff,  .0268em  .0647em  0 #fff,
		 0        .07em    0 #fff, -.0268em  .0647em  0 #fff,
		-.0495em  .0495em  0 #fff, -.0647em  .0268em  0 #fff,
		-.07em    0        0 #fff, -.0647em -.0268em  0 #fff,
		-.0495em -.0495em  0 #fff, -.0268em -.0647em  0 #fff,
		 0       -.07em    0 #fff,  .0268em -.0647em  0 #fff,
		 .0495em -.0495em  0 #fff,  .0647em -.0268em  0 #fff;
}

/* 文字サイズ：SWELLの .u-fz-xl（!important）に勝たせるため内側spanまで指定 */
.sgnr-phead2 .wp-block-cover__inner-container p,
.sgnr-phead2 .wp-block-cover__inner-container p .swl-fz,
.sgnr-phead2 .wp-block-cover__inner-container p .u-fz-xl {
	font-size: clamp(38px, 6vw, 76px) !important;
}

/* 色：エディタのインライン指定を上書きする。
   ページ複製時に文字色が赤のまま残っても is-daisha / is-towing で切り替わる */
.sgnr-phead2.is-rental .wp-block-cover__inner-container p,
.sgnr-phead2.is-rental .wp-block-cover__inner-container p span { color: #E60012 !important; }
.sgnr-phead2.is-daisha .wp-block-cover__inner-container p,
.sgnr-phead2.is-daisha .wp-block-cover__inner-container p span { color: #00A040 !important; }
.sgnr-phead2.is-towing .wp-block-cover__inner-container p,
.sgnr-phead2.is-towing .wp-block-cover__inner-container p span { color: #0075C2 !important; }

/* ボタンの位置基準をカバーブロック本体にする。
   内側コンテナ（inner-container）は縦中央に来るため、そこを基準にすると
   タイトルと同じ高さに並んでしまう。 */
.sgnr-phead2 { position: relative; }
.sgnr-phead2 .wp-block-cover__inner-container { position: static; }

/* ページヘッダー内の相互誘導ボタン
   色は「遷移先」のサービス色を使う（代車→青／レッカー→緑）ため、
   var(--svc) ではなく to-xxx クラスで個別に指定する。
   白フチ＋下方向の濃い影で、写真の上でも浮いて見えるようにする。 */
.sgnr-phead2__link {
	position: absolute;
	right: clamp(12px, 4vw, 56px);
	bottom: 22px;
	z-index: 3;
	display: inline-flex; align-items: center; gap: .8em;
	padding: 9px 22px;
	border-radius: 999px;
	border: 2px solid #fff;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(11px, 1.05vw, 14px);
	line-height: 1.45; text-align: left;
	color: #fff !important; text-decoration: none !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
	transition: transform .12s ease, box-shadow .12s ease;
}
.sgnr-phead2__link::after { content: "\25B6"; font-size: .82em; }
.sgnr-phead2__link:hover {
	transform: translateY(3px);
	box-shadow: 0 0 0 rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.25);
}
/* 明るめの青緑赤＋下端に濃色の影を重ねて厚みを出す */
.sgnr-phead2__link.to-rental {
	background: linear-gradient(#FF4A56, #E60012);
	box-shadow: 0 4px 0 #9E000C, 0 7px 14px rgba(0,0,0,.32);
}
.sgnr-phead2__link.to-daisha {
	background: linear-gradient(#3FD177, #00A040);
	box-shadow: 0 4px 0 #00702C, 0 7px 14px rgba(0,0,0,.32);
}
.sgnr-phead2__link.to-towing {
	background: linear-gradient(#3BAEF5, #0B87DC);
	box-shadow: 0 4px 0 #005E9E, 0 7px 14px rgba(0,0,0,.32);
}
.sgnr-phead2__link:hover {
	transform: translateY(4px);
	box-shadow: 0 0 0 rgba(0,0,0,0), 0 3px 8px rgba(0,0,0,.32);
}

@media (max-width: 767px) {
	/* スマホはヘッダーが低くタイトルと横に並べられないため、
	   絶対配置をやめてタイトルの下に流す。 */
	.sgnr-phead2__link {
		position: absolute;
		right: 10px; bottom: 10px;
		margin: 0;
		padding: 7px 14px;
		font-size: 10.5px;
		border-width: 1.5px;
	}

	/* カバーの高さを固定し、内側コンテナを縦中央に据える。
	   flex だと WP 既定の justify-content が外れて左詰めになるため grid を使う。 */
	.sgnr-phead2 {
		min-height: 210px !important;
		height: 210px !important;
		display: grid !important;
		place-items: center !important;
	}
	.sgnr-phead2 .wp-block-cover__inner-container {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 10px 26px;   /* 下はボタンぶんの逃げ */
		margin: 0 auto;
		text-align: center;
	}
	/* 「代車＋レッカー」は7文字あり、38px + 字間 .18em では画面に収まらず
	   左が切れる。スマホは幅基準で縮め、字間も詰める。 */
	.sgnr-phead2 .wp-block-cover__inner-container p,
	.sgnr-phead2 .wp-block-cover__inner-container p .swl-fz,
	.sgnr-phead2 .wp-block-cover__inner-container p .u-fz-xl {
		font-size: min(11.5vw, 46px) !important;
		letter-spacing: .06em !important;
		text-indent: .06em !important;
		white-space: nowrap;
	}
.sgnr-phead2 .wp-block-cover__image-background { object-position: center 45% !important; }	.sgnr-phead2__link:hover { transform: translateY(4px); }
}

/* ---------- 11-2 こんな方にオススメ ----------
   .sgnr-reco__row      通常（左：テキスト / 右：写真）
   .sgnr-reco__row.is-rev  反転（左：写真 / 右：テキスト）
   箱と写真は80px重ねる。重なる側にはその分paddingを足して文字を逃がす。
   ------------------------------------------------------------- */
.sgnr-reco {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(28px, 3.6vw, 52px) clamp(16px, 3vw, 28px) clamp(32px, 4.5vw, 60px);
	text-align: center;
}
.sgnr-reco__lead {
	display: inline-block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(19px, 2.4vw, 28px) !important;
	margin: 0 0 clamp(32px, 4vw, 52px) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%);
	padding: 0 .5em;
}
.sgnr-reco__lead strong { font-weight: 900; }

.sgnr-reco__row {
	display: grid;
	grid-template-columns: 56% 44%;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto clamp(24px, 3vw, 36px);
}
.sgnr-reco__row.is-rev { grid-template-columns: 44% 56%; }
.sgnr-reco__row.is-rev .sgnr-reco__box   { order: 2; }
.sgnr-reco__row.is-rev .sgnr-reco__photo { order: 1; }

.sgnr-reco__box {
	min-width: 0;
	display: flex; align-items: flex-start; gap: 18px;
	background: #fff;
	border: 1px solid #C9C9C9;
	text-align: left;
	position: relative; z-index: 1;
	padding: 32px 38px;
}
/* 重なるぶんだけ内側に余白を足して、文字が画像の下に入らないようにする */
.sgnr-reco__row:not(.is-rev) .sgnr-reco__box {
	margin-right: -80px;
	padding-right: 118px;
}
.sgnr-reco__row.is-rev .sgnr-reco__box {
	margin-left: -80px;
	padding-left: 118px;
}

.sgnr-reco__photo {
	min-width: 0;
	display: block; width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	position: relative; z-index: 2;
}

.sgnr-reco__num {
	flex: none;
	width: 52px; height: 52px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--display); font-size: 24px;
	color: #fff; background: var(--ink);
}
.is-rental .sgnr-reco__num { background: #E60012; }
.is-daisha .sgnr-reco__num { background: #00A040; }
.is-towing .sgnr-reco__num { background: #0075C2; }

.sgnr-reco__body { min-width: 0; }
.sgnr-reco__name {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(18px, 1.9vw, 25px) !important;
	letter-spacing: .03em;
	margin: 8px 0 12px !important;
}
.sgnr-reco__text {
	font-weight: 500;
	font-size: clamp(14px, 1.35vw, 18px) !important;
	line-height: 1.9 !important;
	letter-spacing: .03em;
	color: var(--ink-soft);
	margin: 0 !important;
}

/* スマホ：写真を上、テキストを下の1列に */
@media (max-width: 767px) {
	.sgnr-reco__row,
	.sgnr-reco__row.is-rev { grid-template-columns: 1fr; max-width: 460px; }
	.sgnr-reco__row .sgnr-reco__box,
	.sgnr-reco__row.is-rev .sgnr-reco__box {
		margin: 0 !important; order: 2;
		padding: 24px 22px !important;
	}
	.sgnr-reco__row .sgnr-reco__photo { order: 1; }
}

/* ---------- 11-3 プランの特徴 ----------
   淡色ボックス＋白丸アイコン3枚。色は --svc / --svc-tint を参照するので、
   複製時は最外側の is-rental を is-daisha / is-towing に変えるだけでよい。
   ※アイコン画像のパスはHTML側にあるため、そちらは手で差し替えること。
   ------------------------------------------------------------- */
.sgnr-feat {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(48px, 7vw, 80px);
	text-align: center;
}

.sgnr-feat__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
	max-width: 1240px;   /* 「こんな方にオススメ」の行と同じ幅に揃える */
	margin: 0 auto;
	align-items: start;
}

.sgnr-feat__card {
	background: var(--svc-tint, var(--paper));
	aspect-ratio: 16 / 9;
	display: grid; place-items: center;
	margin-bottom: 14px;
}
.sgnr-feat__circle {
	width: 46%; aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #fff;
	display: grid; place-items: center;
}
/* アイコンの光学調整。
   画像自身の余白が均等でないものを --icon-y / --icon-s で個別に補正する。
   実測値（キャンバス320px）：
     icon-rental-01  上5.0% / 下5.3%   → 補正なし
     icon-rental-02  上15.0% / 下7.8%  → 3.6%下にズレ。横長のため少し拡大
     icon-rental-03  上0.6% / 下7.2%   → 3.3%上にズレ（現状は許容範囲）
   本来は画像側の余白を揃えるのが筋。ここは暫定の当て。 */
.sgnr-feat__circle img {
	display: block;
	width: 62%; height: 62%;
	object-fit: contain;
	transform: translateY(var(--icon-y, 0)) scale(var(--icon-s, 1));
}
.sgnr-feat__circle img[src*="icon-rental-02"] { --icon-y: -3.6%; --icon-s: 1.06; }

.sgnr-feat__circle img[src*="icon-daisha-02"] { --icon-y: -3.4%; }
.sgnr-feat__circle img[src*="icon-daisha-03"] { --icon-y:  3.8%; }

.sgnr-feat__text {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(14px, 1.45vw, 18px) !important;
	line-height: 1.7 !important;
	color: var(--ink);
	margin: 0 !important;
}
.sgnr-feat__text em {
	font-style: normal; font-weight: 900;
	color: var(--svc, var(--ink));
}
.sgnr-feat__note {
	font-size: clamp(11px, 1.05vw, 13px) !important;
	line-height: 1.6 !important;
	color: var(--grey);
	margin: 8px 0 0 !important;
}

@media (max-width: 767px) {
	.sgnr-feat__grid { grid-template-columns: 1fr; max-width: 360px; gap: 28px; }
	.sgnr-feat__card { aspect-ratio: 2 / 1; }
	.sgnr-feat__circle { width: 34%; }
}

/* ---------- 11-4 車両情報 ----------
   車両イラストは4点とも520x520の正方形キャンバスで、絵は横幅いっぱい・
   上下中央に配置済み。個別の位置補正は不要（測定済み）。
   ボタンの色は var(--svc) を拾うので、複製時の付け替えだけで変わる。
   ------------------------------------------------------------- */
.sgnr-veh {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(48px, 7vw, 80px);
	text-align: center;
}

.sgnr-veh__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.2vw, 32px);
	max-width: 1240px;
	margin: 0 auto clamp(32px, 4vw, 48px);
	align-items: start;
}
.sgnr-veh__item { min-width: 0; }
.sgnr-veh__item img {
	display: block;
	width: 100%; height: auto;
	margin: 0 0 10px;
}

.sgnr-veh__name {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(12px, 1.15vw, 15px) !important;
	line-height: 1.6 !important;
	color: var(--ink);
	margin: 0 !important;
}
.sgnr-veh__name small {
	display: block;
	font-size: .88em; font-weight: 500;
	color: var(--ink-soft);
}

.sgnr-veh__btn {
	display: inline-block !important;
	background: var(--svc, var(--ink)) !important;
	color: #fff !important;
	font-family: var(--head-jp) !important; font-weight: 700 !important;
	font-size: clamp(13px, 1.2vw, 16px) !important;
	line-height: 1.55 !important;
	text-decoration: none !important;
	padding: 14px 40px !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 0 rgba(0,0,0,.18);
	transition: transform .15s ease, box-shadow .15s ease;
}
.sgnr-veh__btn::after { content: "\25B6"; font-size: .78em; margin-left: .7em; }
.sgnr-veh__btn:hover { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }

@media (max-width: 767px) {
	.sgnr-veh__grid { grid-template-columns: repeat(2, 1fr); max-width: 420px; gap: 24px 16px; }
	.sgnr-veh__btn { padding: 14px 26px !important; }
}

/* ---------- 11-5 ご利用料金 ----------
   2枚のカードは高さを揃え、余った高さは各カードの「最終行」に吸わせる。
   行の背景は --svc-tint から3段階を派生させる：
     --pt-a   名義変更料（最も淡い。2枚とも共通）
     --pt-b   賃料1日目の上端
     --pt-bc  賃料1日目の下端 ＝ 賃料2日目の上端（グラデーションの継ぎ目）
     --pt-c   賃料2日目の下端 ＝ 月額賃料（最も濃い）
   賃料の2行は is-b → is-c で連続したグラデーションになる。
   調整つまみ：
     見出し帯の濃さ … .sgnr-price__head の 72%
     行の濃さ　　　 … --pt-a / --pt-b / --pt-bc の各％
     表と一文の間隔 … .sgnr-price の padding-bottom と .sgnr-priceline の margin-top
   ------------------------------------------------------------- */
.sgnr-price {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) 0;
	text-align: center;

	/* 行の背景（単色3段階）。淡い側は tint に白、濃い側は tint に svc を混ぜる。
	   color-mix の割合は0〜100%しか使えないので、100%超は書かないこと。
	     --pt-a  名義変更料（最も淡い。2枚とも共通）
	     --pt-b  賃料1日目
	     --pt-c  賃料2日目以降 ＝ 月額賃料（最も濃い） */
	--pt-a: color-mix(in srgb, var(--svc-tint, #eee) 38%, #fff);
	--pt-b: color-mix(in srgb, var(--svc-tint, #eee) 75%, #fff);
	--pt-c: color-mix(in srgb, var(--svc-tint, #eee) 82%, var(--svc, #999));
}

.sgnr-price__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	max-width: 760px;
	margin: 0 auto;
	align-items: stretch;          /* 2枚の高さを揃える */
}

.sgnr-price__card {
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;              /* 帯と最終行の角も丸くする */
	text-align: left;
}

/* 見出し帯：日額は淡く、月額は濃く */
.sgnr-price__head {
	position: relative;
	background: color-mix(in srgb, var(--svc, #000) 72%, #fff);
	color: #fff;
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(15px, 1.5vw, 19px) !important;
	text-align: center;
	padding: 12px 14px !important;
	margin: 0 !important;
}
.sgnr-price__card.is-month .sgnr-price__head { background: var(--svc, var(--ink)); }
.sgnr-price__tax {
	position: absolute; right: 10px; bottom: 5px;
	font-size: 9px; font-weight: 500; letter-spacing: 0; opacity: .9;
}

/* 金額エリア：余った高さは最終行が吸う */
.sgnr-price__rows {
	flex: 1;
	display: flex; flex-direction: column;
}

.sgnr-price__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	align-content: center;         /* 伸びた行の中で上下中央に置く */
	column-gap: 8px;
	padding: 14px 16px;
	border-bottom: 2px solid #fff;
}
.sgnr-price__row:last-child { border-bottom: none; flex: 1; }

/* 行ごとの背景 */
.sgnr-price__row.is-a { background: var(--pt-a); }
.sgnr-price__row.is-b { background: var(--pt-b); }
.sgnr-price__row.is-c { background: var(--pt-c); }
.sgnr-price__row.is-m { background: var(--pt-c); }

.sgnr-price__item {
	font-family: var(--head-jp); font-weight: 500;
	font-size: clamp(11px, 1.05vw, 13px) !important;
	line-height: 1.4 !important;
	color: var(--ink-soft);
	margin: 0 !important;
}
.sgnr-price__item small {
	display: block;
	font-size: .92em;
	color: var(--grey);
}
.sgnr-price__num {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(20px, 2.2vw, 28px) !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 0 !important;
}
.sgnr-price__yen {
	font-family: var(--head-jp); font-weight: 500;
	font-size: clamp(10px, .95vw, 12px) !important;
	color: var(--ink-soft);
	margin: 0 !important;
}

/* 表の下の一文（段落ブロック。追加CSSクラス： sgnr-priceline is-rental）
   強調は編集画面で「太字」にするだけでよい。色とサイズはCSSが付ける。 */
.sgnr-priceline {
	text-align: center !important;
	font-family: var(--head-jp) !important;
	font-weight: 700 !important;
	font-size: clamp(17px, 2.2vw, 30px) !important;
	line-height: 1.75 !important;
	color: var(--ink) !important;
		margin: 0 auto clamp(48px, 7vw, 80px) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--svc, var(--ink)) !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: .32em !important;
}
.sgnr-priceline strong,
.sgnr-priceline .swl-inline-color {
	font-size: 1.3em;
	font-weight: 900;
	color: var(--svc, var(--ink)) !important;
}

@media (max-width: 599px) {
	.sgnr-price__grid { grid-template-columns: 1fr; max-width: 360px; }
	.sgnr-price__row { padding: 12px 14px; }
	.sgnr-price__card.is-month .sgnr-price__row:last-child { flex: none; }
}

/* ---------- 11-5b ご利用料金（代車・レッカー：2グループ4プラン） ----------
   色は変数で持ち、.is-towing で青系に差し替える。直書きしないこと。
     --p2-a1/a2  上段カードの見出し帯（淡い側）
     --p2-b1/b2  下段カードの見出し帯（濃い側）
     --p2-bg-a   上段カードの地 ／ --p2-bg-b 下段カードの地
     --p2-row    下段2行目に敷く色 ／ --p2-extra レッカー料ブロックの地
   ------------------------------------------------------------- */
.sgnr-price2 {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(28px, 3.6vw, 52px) clamp(16px, 3vw, 28px) clamp(20px, 2.5vw, 32px);
	text-align: center;

	--p2-a1: #8CDE8C; --p2-a2: #62CE7A;
	--p2-b1: #3FCB5C; --p2-b2: #16A83C;
	--p2-bg-a: #F0FBF1; --p2-bg-b: #E3F7E7;
	--p2-row: rgba(0,160,64,.14);
	--p2-extra: #CFEFD8;
}
.sgnr-price2.is-towing {
	--p2-a1: #7FC4F0; --p2-a2: #4FA8E8;
	--p2-b1: #2E9BE8; --p2-b2: #0B6FB8;
	--p2-bg-a: #EDF6FD; --p2-bg-b: #DCEDF9;
	--p2-row: rgba(0,117,194,.13);
	--p2-extra: #123A5E;
}

.sgnr-price2__group {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(16px, 2.1vw, 27px) !important;
	letter-spacing: .04em;
	line-height: 1.6 !important;
	color: var(--ink);
	margin: 0 0 clamp(16px, 2vw, 28px) !important;
}
.sgnr-price2__group em {
	font-style: normal; font-weight: 900;
	color: var(--svc, var(--ink));
}
.sgnr-price2__group + .sgnr-price2__grid { margin-bottom: clamp(28px, 3.6vw, 52px); }

.sgnr-price2__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	max-width: 720px;
	margin: 0 auto;
	align-items: stretch;
}

.sgnr-price2__card {
	display: flex; flex-direction: column;
	border-radius: 14px;
	overflow: hidden;
	text-align: center;
}

.sgnr-price2__head {
	position: relative;
	background: linear-gradient(var(--p2-a1), var(--p2-a2));
	color: #fff;
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(14px, 1.6vw, 21px) !important;
	letter-spacing: .02em;
	padding: 10px 14px !important;
	margin: 0 !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.sgnr-price2__card.is-strong .sgnr-price2__head {
	background: linear-gradient(var(--p2-b1), var(--p2-b2));
}
/* 見出しの一部だけに黄色マーカーを引く（「鈑金セット」等） */
.sgnr-price2__head .mk {
	background: linear-gradient(transparent 58%, #F5E93C 58% 94%, transparent 94%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 .04em;
}
.sgnr-price2__tax {
	position: absolute; right: 9px; bottom: 4px;
	font-size: 9px; font-weight: 500; letter-spacing: 0; opacity: .95;
	text-shadow: none;
}

.sgnr-price2__body {
	flex: 1;
	background: var(--p2-bg-a);
	padding: 14px 16px 16px;
	display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.sgnr-price2__card.is-strong .sgnr-price2__body {
	background: var(--p2-bg-b);
	padding: 0;
	gap: 0;
	justify-content: flex-start;
}

/* 上段（セット）：項目の下に金額を置く中央組み */
.sgnr-price2__row {
	display: block;
	padding: 6px 0 8px;
	text-align: center;
}
.sgnr-price2__item {
	display: block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(12px, 1.25vw, 16px) !important;
	line-height: 1.5 !important;
	color: var(--ink);
	margin: 0 0 4px !important;
}
.sgnr-price2__num {
	display: inline;
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(22px, 2.5vw, 32px) !important;
	line-height: 1.15 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 0 !important;
}
.sgnr-price2__yen {
	display: inline;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(11px, 1.05vw, 14px) !important;
	color: var(--ink-soft);
	margin: 0 0 0 .25em !important;
	white-space: nowrap;
}

/* 下段（代車のみ）：項目｜金額｜単位 の3列で金額の右端を揃える */
.sgnr-price2__card.is-strong .sgnr-price2__row {
	display: grid;
	grid-template-columns: 1fr 96px auto;
	align-items: baseline;
	column-gap: 6px;
	text-align: left;
	padding: 14px 14px;
	margin: 0;
	border: none;
	border-radius: 0;
}
.sgnr-price2__card.is-strong .sgnr-price2__row.is-b { background: var(--p2-row); }
.sgnr-price2__card.is-strong .sgnr-price2__item {
	display: block;
	font-weight: 500;
	font-size: clamp(11px, 1.1vw, 14px) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}
.sgnr-price2__card.is-strong .sgnr-price2__num {
	display: block;
	font-size: clamp(20px, 2.2vw, 28px) !important;
	text-align: right;
	margin: 0 !important;
}
.sgnr-price2__card.is-strong .sgnr-price2__yen {
	display: block;
	text-align: left;
	margin: 0 !important;
}

/* 月額プランは1行なので中央組みに戻す */
.sgnr-price2__card.is-strong .sgnr-price2__body.is-center {
	justify-content: center;
	padding: 14px 16px 16px;
}
.sgnr-price2__card.is-strong .is-center .sgnr-price2__row {
	display: block;
	text-align: center;
	padding: 6px 0 8px;
	background: none;
}
.sgnr-price2__card.is-strong .is-center .sgnr-price2__item {
	margin: 0 0 4px !important;
	font-weight: 700;
	font-size: clamp(12px, 1.25vw, 16px) !important;
}
.sgnr-price2__card.is-strong .is-center .sgnr-price2__num {
	display: inline;
	text-align: center;
}
.sgnr-price2__card.is-strong .is-center .sgnr-price2__yen {
	display: inline;
	margin: 0 0 0 .25em !important;
}

/* レッカー料ブロック（レッカーページのみ。カード下端に付く）
   紺地・白文字。金額だけ黄色で抜いて視線を集める。 */
.sgnr-price2__extra {
	background: var(--p2-extra);
	padding: 12px 14px 14px;
	text-align: center;
}
.sgnr-price2__extra .sgnr-price2__item {
	display: block;
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(11px, 1.1vw, 14px) !important;
	color: rgba(255,255,255,.85);
	text-align: center;
	margin: 0 0 3px !important;
}
.sgnr-price2__free {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(12px, 1.25vw, 16px) !important;
	color: #fff;
	line-height: 1.2 !important;
	margin: 0 !important;
}
.sgnr-price2__free b {
	font-size: 2em; font-weight: 900;
	color: #FFD43B;
	margin: 0 .1em;
}
.sgnr-price2__extra .sgnr-price2__note {
	color: rgba(255,255,255,.72);
	margin: 7px 0 0 !important;
}
.sgnr-price2__note {
	font-size: clamp(9.5px, .92vw, 11.5px) !important;
	line-height: 1.6 !important;
	color: var(--grey);
	text-align: center;
	margin: 6px 0 0 !important;
}

@media (max-width: 599px) {
	.sgnr-price2__grid { grid-template-columns: 1fr; max-width: 340px; }
	.sgnr-price2__body { padding: 12px 14px 14px; }
	.sgnr-price2__card.is-strong .sgnr-price2__row:last-child { flex: none; }
}
/* ---------- 11-5c 比較の一文（段落ではなくカスタムHTML） ----------
   「例えば〜」「A なら◯円、B なら◯円」「その差は〜」の3行構成。
   金額のハイライトは <mark> で書く（背景つきタグ）。
   ------------------------------------------------------------- */
.sgnr-compare {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(20px, 2.6vw, 36px) clamp(16px, 3vw, 28px) clamp(40px, 6vw, 72px);
	text-align: center;
	font-family: var(--head-jp);
	color: var(--ink);
	--p2-a1: #8CDE8C; --p2-a2: #62CE7A;
	--p2-b1: #3FCB5C; --p2-b2: #16A83C;
}
.sgnr-compare.is-towing {
	--p2-a1: #7FC4F0; --p2-a2: #4FA8E8;
	--p2-b1: #2E9BE8; --p2-b2: #0B6FB8;
}
.sgnr-compare__lead {
	font-weight: 700;
	font-size: clamp(14px, 1.6vw, 21px) !important;
	letter-spacing: .03em;
	margin: 0 0 clamp(12px, 1.6vw, 20px) !important;
}
.sgnr-compare__lead em {
	font-style: normal; font-weight: 900;
	font-size: 1.2em;
	color: var(--svc, var(--ink));
}

.sgnr-compare__pair {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: 10px 14px;
	margin: 0 0 clamp(14px, 1.8vw, 22px) !important;
}
/* 2つのボックスは、それぞれが指すプランのカード見出し帯と同じ色にする。
   既定＝上段（セット系）の淡い側、.is-daily＝下段（代車のみ）の濃い側。
   色は 11-5b と同じ変数を参照するので、is-towing で青系に切り替わる。 */
.sgnr-compare__pair mark {
	display: inline-block;
	background: linear-gradient(var(--p2-a1, #8CDE8C), var(--p2-a2, #62CE7A)) !important;
	border: 2px solid var(--p2-a2, #62CE7A);
	color: #fff !important;
	font-weight: 700;
	font-size: clamp(15px, 1.9vw, 24px);
	letter-spacing: .02em;
	padding: 10px 22px;
	border-radius: 8px;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.sgnr-compare__pair mark b {
	font-weight: 900;
	font-size: 1.3em;
	color: #fff !important;
}
.sgnr-compare__pair mark.is-daily {
	background: linear-gradient(var(--p2-b1, #3FCB5C), var(--p2-b2, #16A83C)) !important;
	border-color: var(--p2-b2, #16A83C);
	color: #fff !important;
}
.sgnr-compare__pair mark.is-daily b { color: #fff !important; }
.sgnr-compare__sep { font-weight: 900; color: var(--ink-soft); }

.sgnr-compare__result {
	font-weight: 900;
	font-size: clamp(17px, 2.3vw, 30px) !important;
	letter-spacing: .02em;
	line-height: 1.8 !important;
	margin: 0 !important;
}
.sgnr-compare__result em {
	font-style: normal;
	color: var(--svc, var(--ink));
}
/* 差額だけ一回り大きく */
.sgnr-compare__result em.is-big {
	font-size: 1.7em;
	letter-spacing: -.01em;
	line-height: 1;
}

@media (max-width: 599px) {
	.sgnr-compare__pair { flex-direction: column; gap: 8px; }
	.sgnr-compare__sep { display: none; }
}

/* ---------- 11-6 ご利用の流れ ----------
   写真5枚は800x750（比率1.07）で統一済み。個別補正は不要。
   トップの簡易版（.sgnr-flow）とは別物。背景のグレーは同じ #F2F2F0 を使う。
   強調は <em> で書く。色は var(--svc) を拾うので複製時の付け替えだけでよい。
   ------------------------------------------------------------- */
.sgnr-step {
	width: auto;
	margin-inline: calc(50% - 50vw);
	background: #F2F2F0;
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(48px, 7vw, 80px);
	text-align: center;
}

.sgnr-step__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 28px);
	max-width: 1240px;
	margin: 0 auto;
	align-items: start;
}
.sgnr-step__item { min-width: 0; text-align: left; }

.sgnr-step__item img {
	display: block;
	width: 100%; height: auto;
	border-radius: 4px;
	margin: 0 0 14px;
}

.sgnr-step__name {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(14px, 1.4vw, 18px) !important;
	line-height: 1.5 !important;
	color: var(--ink);
	text-align: center;
	margin: 0 0 10px !important;
}

.sgnr-step__text {
	font-weight: 500;
	font-size: clamp(11px, 1.02vw, 13px) !important;
	line-height: 1.8 !important;
	color: var(--ink-soft);
	margin: 0 !important;
}
.sgnr-step__text em {
	font-style: normal; font-weight: 700;
	color: var(--svc, var(--ink));
}

/* 受付時間などの小ブロック */
.sgnr-step__note {
	display: block;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #DCDCD8;
	font-size: .94em;
	line-height: 1.7;
	color: var(--grey);
}
.sgnr-step__note b {
	display: block;
	font-family: var(--head-jp); font-weight: 700;
	color: var(--ink-soft);
	margin-bottom: 2px;
}

@media (max-width: 1000px) {
	.sgnr-step__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; gap: 24px 18px; }
}
@media (max-width: 599px) {
	.sgnr-step__grid { grid-template-columns: 1fr; max-width: 380px; gap: 28px; }
	.sgnr-step__item img { margin-bottom: 10px; }
}

/* ---------- 11-7 必要書類 ----------
   書類画像は2点とも600x600の正方形キャンバスで、絵は横幅いっぱい・上下中央。
   表示枠が正方形で揃うため、下のラベル位置も自動で一致する。補正は不要。
   「必須」バッジは .is-required を付けた項目にだけ出る。
   ------------------------------------------------------------- */
.sgnr-doc {
	width: auto;
	margin-inline: calc(50% - 50vw);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(56px, 8vw, 96px);
	text-align: center;
}

.sgnr-doc__intro {
	font-family: var(--head-jp); font-weight: 700;
		font-size: clamp(15px, 1.6vw, 20px) !important;
	line-height: 1.8 !important;
	color: var(--ink);
	margin: 0 0 clamp(28px, 3.5vw, 48px) !important;
}
.sgnr-doc__intro em {
	font-style: normal; font-weight: 900;
	color: var(--svc, var(--ink));
}

.sgnr-doc__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px);
	max-width: 520px;   /* 画像を絞って、文字とのバランスを取る */
	margin: 0 auto;
	align-items: start;
}

/* 3点並べる場合（代車）。2点（レンタル）は既定の2列のまま */
.sgnr-doc__grid.is-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 720px;
	gap: clamp(16px, 2.4vw, 36px);
}
@media (max-width: 599px) {
	.sgnr-doc__grid.is-three { grid-template-columns: 1fr; max-width: 220px; }
}

.sgnr-doc__item { min-width: 0; }

.sgnr-doc__item img {
	display: block;
	width: 100%; height: auto;
	margin: 0 0 12px;
}

.sgnr-doc__name {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(14px, 1.5vw, 19px) !important;
	line-height: 1.6 !important;
	color: var(--ink);
	margin: 0 !important;
}

.sgnr-doc__badge {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(15px, 1.6vw, 20px);
	line-height: 1.3;
	color: var(--svc, var(--ink));
	border: 2px solid var(--svc, var(--ink));
	padding: 4px 16px;
}

@media (max-width: 599px) {
	.sgnr-doc__grid { grid-template-columns: 1fr; max-width: 260px; gap: 36px; }
}

/* ---------- 11-8 よくある質問 ----------
   開閉の仕組みとQ行の体裁は「5-5 FAQ（544）」の .faq-item をそのまま使う。
   ここで足すのは、セクション枠・回答側のAマーク・サービス色の3点だけ。
   .sgnr-faq 配下でのみ上書きするので、FAQページ(544)の見た目は変わらない。
   ------------------------------------------------------------- */
.sgnr-faq {
	width: auto;
	margin-inline: calc(50% - 50vw);
	background: var(--paper);
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(56px, 8vw, 96px);
	text-align: center;
}
.sgnr-faq__list {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
	border-top: var(--bd-line);
}

/* Q・Aのマークをサービス色に */
.sgnr-faq .faq-item__q-mark,
.sgnr-faq .faq-item__a-mark { color: var(--svc, var(--yellow-dark)); }

.sgnr-faq .faq-item__q { font-size: clamp(14px, 1.4vw, 17px); }

/* 回答：Qと同じ32px＋16pxの桁にAマークを置いて、頭を縦に揃える */
.sgnr-faq .faq-item__a {
	display: grid;
	grid-template-columns: 32px 1fr;
	column-gap: 16px;
	padding: 0 48px 24px 0 !important;
	font-size: clamp(13px, 1.3vw, 15px);
}
.sgnr-faq .faq-item__a-mark {
	font-family: var(--display);
	font-size: 22px;
	line-height: 1;
}

@media (max-width: 600px) {
	.sgnr-faq .faq-item__a { grid-template-columns: 24px 1fr; column-gap: 10px; padding-right: 0 !important; }
	.sgnr-faq .faq-item__a-mark { font-size: 18px; }
}

/* ==================================================================
   12  トップ下部3セクションの見出し統一
   ------------------------------------------------------------------
   車両ラインナップ / お知らせ / スグノルブログ は旧デザインの
   section-eyebrow（番号＋英字）＋左寄せ見出しのまま残っていた。
   HTMLは変えず、CSSで他セクションと同じ黄色マーカー中央寄せに揃える。
   ================================================================== */
.home .section-eyebrow { display: none !important; }
.home .section-title {
	display: table !important;
	margin: 0 auto clamp(24px, 3.5vw, 40px) !important;
	font-family: var(--head-jp) !important;
	font-weight: 700 !important;
	font-size: clamp(20px, 2.6vw, 32px) !important;
	line-height: 1.5 !important;
	text-align: center !important;
	color: var(--ink) !important;
	background: linear-gradient(transparent 62%, #F5C518 62% 96%, transparent 96%) !important;
	padding: 0 .5em !important;
	border: none !important;
}
.home .section-title::before,
.home .section-title::after { content: none !important; display: none !important; }
.home .section-lead {
	text-align: center;
	margin-left: auto; margin-right: auto;
}
/* スマホ：マーカーは box 高さの62〜96%に引くため、2行になると
   帯が2行目にしか乗らない。折り返させず1行に収める。 */
@media (max-width: 599px) {
	.home .section-title {
		white-space: nowrap;
		font-size: min(20px, 5.3vw) !important;
		padding: 0 .4em !important;
	}
}

/* ==================================================================
   11-9  レッカー対応エリア（744専用）
   ------------------------------------------------------------------
   水色の全幅背景の上に、黄枠の白いカードを1枚置く。
   カード内は「案内文 → 地図＋エリア一覧の2カラム → 対応時間」の順。
   ================================================================== */
.sgnr-area {
	width: auto;
	margin-inline: calc(50% - 50vw);
	background: #5BC8F5;
	padding: clamp(28px, 4vw, 56px) clamp(14px, 3vw, 28px);
}
.sgnr-area__card {
	max-width: 940px;
	margin: 0 auto;
	background: #fff;
	border: 4px solid #F5C518;
	border-radius: 20px;
	padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 44px) clamp(26px, 3.5vw, 44px);
}

/* 案内文：！は枠内左上の黄丸（黒文字）、1行目に黄色マーカー */
.sgnr-area__call {
	font-family: var(--head-jp);
	margin: 0 0 clamp(20px, 2.6vw, 32px) !important;
	padding-left: 3.2em;
	position: relative;
	text-align: center;
}
.sgnr-area__call p {
	font-weight: 700;
	font-size: clamp(15px, 1.9vw, 25px) !important;
	line-height: 1.75 !important;
	letter-spacing: .03em;
	color: var(--ink);
	margin: 0 0 4px !important;
}
.sgnr-area__call p:last-child { margin: 0 !important; }
.sgnr-area__call em {
	font-style: normal; font-weight: 900;
	color: #1E9BEF;
	font-size: 1.12em;
}
/* ！バッジ：カード内の左上に固定 */
.sgnr-area__bang {
	position: absolute;
	left: 0; top: -.1em;
	display: grid; place-items: center;
	width: 1.9em; height: 1.9em;
	border-radius: 50%;
	background: #F5C518; color: var(--ink);
	font-weight: 900; font-size: 1.05em; line-height: 1;
}
/* 1行目の黄色マーカー */
.sgnr-area__mk {
	background: linear-gradient(transparent 62%, #F5E93C 62% 96%, transparent 96%);
	padding: 0 .1em;
}
.sgnr-area__tel {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(26px, 3.6vw, 48px) !important;
	color: #E60012 !important;
	letter-spacing: .01em;
	text-decoration: none !important;
	margin-right: .2em;
	-webkit-text-stroke: .02em #E60012;
}
/* 地図と一覧の縦を揃える。地図は枠の高さいっぱいに収める。 */
.sgnr-area__grid {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: clamp(16px, 2.4vw, 34px);
	align-items: stretch;
}
.sgnr-area__map {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: top center;
	border-radius: 6px;
}

/* エリア一覧 */
.sgnr-area__h {
	font-family: var(--head-jp); font-weight: 900;
	font-size: clamp(14px, 1.5vw, 19px) !important;
	color: var(--ink);
	margin: 0 0 8px !important;
}
.sgnr-area__h + .sgnr-area__pref { margin-top: 0 !important; }
.sgnr-area__block + .sgnr-area__block { margin-top: 18px; }
.sgnr-area__pref {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(12px, 1.2vw, 15px) !important;
	color: var(--ink);
	margin: 10px 0 2px !important;
}
.sgnr-area__list {
	font-size: clamp(11px, 1.1vw, 14px) !important;
	line-height: 1.85 !important;
	color: var(--ink-soft);
	margin: 0 0 0 1em !important;
}

/* 対応時間：左寄せ（！バッジのぶんだけ字下げして案内文と頭を揃える） */
.sgnr-area__time {
	margin: clamp(20px, 2.6vw, 34px) 0 0 !important;
	text-align: left;
	padding-left: 3.2em;
}
.sgnr-area__time .sgnr-area__h { margin-bottom: 6px !important; }
.sgnr-area__time p {
	font-family: var(--head-jp); font-weight: 700;
	font-size: clamp(13px, 1.5vw, 19px) !important;
	color: var(--ink);
	margin: 0 !important;
}

@media (max-width: 767px) {
	.sgnr-area__grid { grid-template-columns: 1fr; }
	.sgnr-area__map { max-width: 340px; margin: 0 auto; }
	.sgnr-area__card { border-width: 3px; border-radius: 14px; }
}

/* ---------- 11-9b 地図の拡大表示（ライトボックス） ----------
   <dialog> の標準機能だけで実装。JSライブラリ不要。
   閉じる操作は ✕ ボタン・背景クリック・Escキーの3通り。
   ------------------------------------------------------------- */
.sgnr-area__maplink {
	display: block;
	position: relative;
	cursor: zoom-in;
	border: 0; padding: 0; background: none;
	width: 100%; height: 100%;
}
.sgnr-area__maplink::after {
	content: "タップで拡大";
	position: absolute; right: 8px; bottom: 8px;
	background: rgba(10,10,10,.78); color: #fff;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 11px; letter-spacing: .04em;
	padding: 5px 10px; border-radius: 4px;
	pointer-events: none;
}

/* ライトボックス本体：画面いっぱいに開く。
   これが無いと <dialog> は既定サイズで左上に出て、背景も暗くならない。 */
.sgnr-lightbox {
	position: fixed;
	inset: 0;
	margin: 0;
	width: 100vw; height: 100vh;
	max-width: 100vw; max-height: 100vh;
	border: none; padding: 0;
	background: transparent;
	overflow: hidden;
}
.sgnr-lightbox::backdrop { background: rgba(0,0,0,.88); }

.sgnr-lightbox__stage {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	overflow: hidden;
	touch-action: none;
}
/* 画像と✕をひとまとめにして拡大・移動する */
.sgnr-lightbox__wrap {
	position: relative;
	transform-origin: center center;
	will-change: transform;
	line-height: 0;
}
.sgnr-lightbox__img {
	display: block;
	max-width: 94vw; max-height: 94vh;
	width: auto; height: auto;
	background: #fff;
	border-radius: 4px;
	cursor: grab;
	user-select: none; -webkit-user-drag: none;
}
.sgnr-lightbox__img:active { cursor: grabbing; }

/* ✕は画像の右上角に重ねる */
.sgnr-lightbox__close {
	position: absolute; top: -16px; right: -16px; z-index: 2;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 2px solid #fff; border-radius: 50%;
	background: var(--ink); color: #fff;
	font-size: 19px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* 拡大・縮小ボタン（スマホ用。マウスはホイールでも操作できる） */
.sgnr-lightbox__zoom {
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
	z-index: 2; display: flex; gap: 10px;
}
.sgnr-lightbox__zoom button {
	width: 46px; height: 46px;
	border: 2px solid #fff; border-radius: 50%;
	background: rgba(10,10,10,.7); color: #fff;
	font-family: var(--head-jp); font-weight: 700;
	font-size: 20px; line-height: 1; cursor: pointer;
}
.sgnr-lightbox__hint {
	position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
	z-index: 2;
	font-family: var(--head-jp); font-size: 12px; color: rgba(255,255,255,.8);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.sgnr-area__grid { grid-template-columns: 1fr; }
	.sgnr-area__map { max-width: 100%; margin: 0 auto; height: auto; }
	.sgnr-area__card { border-width: 3px; border-radius: 14px; padding: 20px 16px 24px; }

	/* 中央寄せ＋左padding だと右端で不自然に折れるため、左寄せにする。
	   ！は行内に置かず、1行目の頭に収める。 */
	.sgnr-area__call {
		padding-left: 0;
		text-align: left;
	}
	.sgnr-area__call p { font-size: 15px !important; line-height: 1.8 !important; }
	.sgnr-area__bang {
		position: static;
		display: inline-grid;
		width: 1.7em; height: 1.7em;
		margin-right: .4em;
		vertical-align: -.4em;
	}
	.sgnr-area__tel { font-size: 27px !important; display: inline-block; }
	.sgnr-area__time { padding-left: 0; }
}