@charset "utf-8";
/* =========================================================
   SMILE PARTNER theme - main.css
   設計: モバイルファースト / BEM / 変数管理
   ブレークポイント: 768px(tablet) / 1024px(pc)
   ========================================================= */

:root {
	/* 色 —— 信頼感のあるネイビー＋ブランドブルー、CTAは暖色 */
	--c-navy:        #0b2f5e;
	--c-navy-dark:   #071f3f;
	--c-blue:        #0071bc;   /* 現行サイトから継承 */
	--c-blue-light:  #e8f2fb;
	--c-blue-pale:   #f4f8fc;
	--c-accent:      #ec6a1e;   /* CTA */
	--c-accent-dark: #d15410;
	--c-text:        #1a2b3c;
	--c-text-sub:    #5a6b7d;
	--c-line:        #d9e2ec;
	--c-bg:          #ffffff;
	--c-bg-soft:     #f5f8fb;

	/* タイポ */
	--font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--fs-body: 1rem;
	--lh-body: 1.9;

	/* 余白 */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 88px;

	--radius: 10px;
	--shadow: 0 10px 30px rgba(11, 47, 94, .08);
	--container: 1120px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	background: var(--c-bg);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	padding-bottom: 68px; /* 固定CTA分 */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.5; margin: 0; font-weight: 700; }
p, ul, ol, dl, table, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.container {
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
}

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--c-navy); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 0; }

/* ---------- ボタン ---------- */
.btn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; padding: 16px 28px; border-radius: var(--radius);
	font-weight: 700; text-decoration: none; text-align: center; line-height: 1.4;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn__main { font-size: 1.0625rem; }
.btn__sub  { font-size: .75rem; opacity: .9; font-weight: 500; }

.btn--primary { background: var(--c-accent); color: #fff; box-shadow: 0 8px 20px rgba(236, 106, 30, .3); }
.btn--primary:hover { background: var(--c-accent-dark); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn--tel { background: #fff; color: var(--c-navy); border: 2px solid var(--c-navy); }
.btn--tel .btn__main { font-size: 1.375rem; letter-spacing: .02em; }
.btn--tel:hover { background: var(--c-blue-light); color: var(--c-navy); }

/* ---------- ヘッダー ---------- */
.header { position: relative; background: #fff; border-bottom: 1px solid var(--c-line); }

.header__bar { background: var(--c-navy); color: #fff; font-size: .75rem; }
.header__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 6px 0; }
.header__tagline { margin: 0; }
.header__license { margin: 0; opacity: .85; display: none; }

.header__main-inner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
/* ロゴと登録番号バッジはひとまとまりで左に */
.header__id { display: flex; align-items: center; gap: var(--sp-4); }
.header__contact { margin-left: auto; }
.header__toggle { margin-left: auto; }
@media (min-width: 1024px) { .header__toggle { margin-left: 0; } }

/* SNSアイコン（ヘッダー用・小） */
.header__sns { display: flex; gap: var(--sp-2); }
.sns-ico {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 12px; color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sns-ico svg { width: 24px; height: 24px; }
.sns-ico:hover { transform: translateY(-2px); color: #fff; }
.sns-ico--line { background: #06C755; box-shadow: 0 5px 12px rgba(6,199,85,.35); }
.sns-ico--ig {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	box-shadow: 0 5px 12px rgba(214,36,159,.35);
}

.header__logo { margin: 0; }
.header__logo a { text-decoration: none; color: inherit; display: block; }
.header__logo-mark { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: .1em; color: var(--c-navy); }
.header__logo-name { display: block; font-size: .6875rem; color: var(--c-text-sub); }

.header__contact { display: none; align-items: center; gap: var(--sp-4); }
.header__tel-label { display: block; font-size: .6875rem; color: var(--c-text-sub); }
.header__tel-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--c-navy); text-decoration: none; letter-spacing: .02em; }
.header__cta {
	background: var(--c-accent); color: #fff; text-decoration: none; font-weight: 700;
	padding: 14px 22px; border-radius: var(--radius); white-space: nowrap;
}
.header__cta:hover { background: var(--c-accent-dark); color: #fff; }

.header__toggle {
	width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 8px;
	background: #fff; position: relative; cursor: pointer; flex: none;
}
.header__toggle-bar,
.header__toggle-bar::before,
.header__toggle-bar::after {
	position: absolute; left: 11px; width: 22px; height: 2px; background: var(--c-navy);
	transition: transform .2s ease, opacity .2s ease;
}
.header__toggle-bar { top: 21px; }
.header__toggle-bar::before { content: ""; top: -7px; left: 0; }
.header__toggle-bar::after  { content: ""; top: 7px; left: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-bar { background: transparent; }
.header__toggle[aria-expanded="true"] .header__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* グローバルナビ */
.gnav { display: none; border-top: 1px solid var(--c-line); background: #fff; }
.gnav.is-open { display: block; }
.gnav__list { display: flex; flex-direction: column; }
.gnav__list li { border-bottom: 1px solid var(--c-line); }
.gnav__list a {
	display: block; padding: 14px 4px; text-decoration: none; color: var(--c-text); font-weight: 700; font-size: .9375rem;
}
.gnav__list a:hover { color: var(--c-blue); }
.gnav__list .sub-menu { padding-left: var(--sp-4); }
.gnav__list .sub-menu a { font-weight: 500; font-size: .875rem; }

/* ---------- ヘッダー（ロゴ＋登録番号バッジ） ---------- */
.header__logo img { width: 175px; height: auto; }

.header__license {
	display: none;
	background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, #12579f 100%);
	border: 1px solid rgba(255,215,106,.55);
	border-radius: 999px;
	padding: 7px 18px;
	line-height: 1.35;
	box-shadow: 0 4px 14px rgba(11,47,94,.22);
}
.header__license-label {
	display: block; font-size: .625rem; letter-spacing: .14em; font-weight: 700; color: #9fd0f5;
}
.header__license-num {
	display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .02em;
	background: linear-gradient(90deg, #ffe9a8 0%, #ffd76a 45%, #f5b942 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- ヒーロー（メイン画像のみ・文字は画像に焼き込み済み＝切らずに全部見せる） ---------- */
.hero { background: var(--c-navy-dark); line-height: 0; }
.hero__picture { display: block; }
.hero__img { width: 100%; height: auto; }

/* ---------- リード（H1） ---------- */
.lead {
	position: relative;
	padding: var(--sp-7) 0 var(--sp-6);
	background:
		radial-gradient(700px 240px at 50% 0%, rgba(0,113,188,.10), transparent 70%),
		#fff;
	text-align: center;
	border-bottom: 1px solid var(--c-line);
}
.lead__eyebrow {
	display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
	padding: 6px 18px; border-radius: 999px; margin-bottom: var(--sp-4);
	box-shadow: 0 6px 16px rgba(11,47,94,.24);
}
.lead__title {
	font-size: clamp(1.5rem, 5.6vw, 2.5rem); line-height: 1.45; color: var(--c-navy); letter-spacing: .01em;
}
.lead__title strong {
	position: relative; font-weight: 800; color: var(--c-accent);
	background: linear-gradient(transparent 62%, rgba(255,215,106,.55) 62%);
}
.lead__text {
	max-width: 44em; margin: var(--sp-4) auto 0; font-size: .9375rem; line-height: 2.05; color: var(--c-text-sub);
	text-align: left;
}
.lead__text strong { color: var(--c-navy); }

.only-pc { display: none; }
.only-sp { display: inline; }

/* ---------- セクション共通 ---------- */
.section { padding: var(--sp-8) 0; }
.section--issues,
.section--reasons,
.section--faq { background: var(--c-bg-soft); }

.section__eyebrow {
	font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--c-blue);
	text-align: center; margin-bottom: var(--sp-2);
}
.section__title {
	font-size: clamp(1.375rem, 4.6vw, 2rem); text-align: center; color: var(--c-navy);
	margin-bottom: var(--sp-5); line-height: 1.45;
}
.section__lead { text-align: center; color: var(--c-text-sub); font-size: .9375rem; margin-bottom: var(--sp-6); }
.section__more { text-align: center; margin-top: var(--sp-6); }
.section__more a {
	display: inline-block; font-weight: 700; text-decoration: none;
	border-bottom: 2px solid var(--c-blue); padding-bottom: 2px;
}
.section__more a::after { content: " →"; }

/* ---------- CTA（アクションバー） ---------- */
.actionbar {
	position: relative;
	margin-top: var(--sp-6);
	padding: var(--sp-6) var(--sp-5);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
	border: 1px solid rgba(255,255,255,.20);
	box-shadow: 0 20px 50px rgba(0,0,0,.28);
	text-align: center;
	overflow: hidden;
}
/* 上辺に走るアクセントライン */
.actionbar::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.actionbar__eyebrow { font-size: .6875rem; font-weight: 800; letter-spacing: .2em; color: #ffd76a; }
.actionbar__title {
	font-size: clamp(1.125rem, 4vw, 1.5rem); font-weight: 700; color: #fff;
	margin: var(--sp-2) 0 var(--sp-2); line-height: 1.6;
}
.actionbar__note { font-size: .8125rem; color: rgba(255,255,255,.82); line-height: 1.9; }
.actionbar__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.actionbar__tel { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed rgba(255,255,255,.25); }
.actionbar__tel-label { display: block; font-size: .75rem; color: rgba(255,255,255,.8); }
.actionbar__tel-num {
	display: inline-block; margin-top: 2px;
	font-size: 1.875rem; font-weight: 800; letter-spacing: .02em; color: #fff; text-decoration: none;
}
.actionbar__tel-num:hover { color: #ffd76a; }

.btn--lg { padding: 18px 30px; border-radius: 12px; }
.btn--lg .btn__main { font-size: 1.125rem; }
.btn--primary {
	background: linear-gradient(135deg, #f2803a 0%, var(--c-accent) 45%, var(--c-accent-dark) 100%);
	position: relative; padding-right: 46px;
}
.btn--primary::after {
	content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
	border-top: 2px solid #fff; border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg); transition: transform .2s ease;
}
.btn--primary:hover::after { transform: translateY(-50%) translateX(4px) rotate(45deg); }

/* ---------- 受賞バナー ---------- */
.award {
	position: relative; overflow: hidden;
	background:
		radial-gradient(640px 300px at 85% 10%, rgba(0,113,188,.35), transparent 65%),
		var(--c-navy-dark);
	color: #fff; padding: var(--sp-7) 0;
}
.award__inner {
	display: grid; gap: var(--sp-5); align-items: center;
	padding: var(--sp-5);
	border-radius: 18px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,215,106,.35);
	box-shadow: inset 0 0 40px rgba(255,215,106,.05);
}
.award__figure { position: relative; margin: 0; }
.award__figure::before {
	content: ""; position: absolute; inset: -3px; border-radius: 14px;
	background: linear-gradient(135deg, #ffe9a8 0%, #ffd76a 40%, #b8860b 70%, #ffd76a 100%);
}
.award__figure img { position: relative; width: 100%; border-radius: 12px; display: block; }
.award__label {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .6875rem; font-weight: 800; letter-spacing: .22em; color: #ffd76a;
}
.award__label::before, .award__label::after {
	content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, #ffd76a);
}
.award__label::after { background: linear-gradient(90deg, #ffd76a, transparent); }
.award__title { font-size: 1.0625rem; margin: var(--sp-3) 0; line-height: 1.7; }
.award__title strong {
	display: inline-block; margin-left: .35em; padding: 2px 14px; border-radius: 8px;
	font-size: 1.125rem; color: var(--c-navy-dark);
	background: linear-gradient(135deg, #ffe9a8 0%, #ffd76a 50%, #f5b942 100%);
	box-shadow: 0 4px 14px rgba(255,215,106,.35);
}
.award__desc { font-size: .8125rem; color: rgba(255,255,255,.85); line-height: 1.9; }
.award__desc strong { color: #ffd76a; }

/* ---------- アンバサダー（紺カードで一体化） ---------- */
.ambassador {
	position: relative; display: grid; gap: var(--sp-6); overflow: hidden;
	border-radius: 20px; padding: var(--sp-7) var(--sp-5); color: #fff;
	background:
		radial-gradient(560px 280px at 90% 0%, rgba(0,113,188,.5), transparent 65%),
		radial-gradient(480px 260px at 0% 100%, rgba(236,106,30,.28), transparent 60%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, #0f4a8a 100%);
	box-shadow: 0 24px 60px rgba(11,47,94,.3);
}
.ambassador::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.ambassador__profile { text-align: center; }
.ambassador__badge {
	display: inline-block; font-size: .625rem; font-weight: 800; letter-spacing: .22em;
	color: #ffd76a; border: 1px solid rgba(255,215,106,.6); border-radius: 999px;
	padding: 4px 16px; margin-bottom: var(--sp-4);
}
.ambassador__portrait { position: relative; width: 168px; margin: 0 auto; }
.ambassador__portrait::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%;
	background: linear-gradient(135deg, #ffe9a8 0%, #ffd76a 45%, var(--c-blue) 100%);
}
.ambassador__portrait img {
	position: relative; width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
	border: 4px solid var(--c-navy-dark);
}
.ambassador__name { margin-top: var(--sp-4); font-weight: 800; font-size: 1.25rem; color: #fff; }
.ambassador__san { font-size: .875rem; font-weight: 700; }
.ambassador__role {
	display: block; font-size: .6875rem; letter-spacing: .1em; color: #ffd76a; font-weight: 700; margin-bottom: 4px;
}
.ambassador__catch {
	font-size: 1.125rem; font-weight: 800; line-height: 1.8;
	padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
	border-bottom: 1px dashed rgba(255,255,255,.3);
}
.ambassador__quote { font-size: .875rem; color: rgba(255,255,255,.88); line-height: 2; position: relative; padding-left: var(--sp-4); }
.ambassador__quote::before {
	content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
	background: linear-gradient(180deg, #ffd76a, var(--c-blue));
}
.ambassador__quote p + p { margin-top: var(--sp-3); }
.ambassador__quote strong { color: #ffd76a; }
.ambassador__gallery { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ambassador__gallery img {
	width: 100%; border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover;
	border: 2px solid rgba(255,255,255,.25);
}

/* 引用の下＝推しポイント3つ（右カラムの余白を締める） */
.ambassador__points-title {
	margin: var(--sp-5) 0 var(--sp-3); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; color: #ffd76a;
	display: flex; align-items: center; gap: var(--sp-3);
}
.ambassador__points-title::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.ambassador__points { display: grid; gap: var(--sp-2); }
.ambassador__point {
	display: flex; align-items: center; gap: var(--sp-3);
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
	border-radius: 12px; padding: var(--sp-3) var(--sp-4);
}
.ambassador__point-num {
	flex: none; font-size: .8125rem; font-weight: 800; letter-spacing: .04em;
	background: linear-gradient(90deg, #ffe9a8 0%, #ffd76a 60%, #f5b942 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ambassador__point-text { font-size: .875rem; color: rgba(255,255,255,.9); }
.ambassador__point-text strong { color: #fff; }

/* ---------- マンガ（工事の流れ） ---------- */
.manga { margin-top: var(--sp-7); }
.manga__lead {
	text-align: center; font-size: .9375rem; color: var(--c-text-sub); margin-bottom: var(--sp-5);
}
.manga__lead strong { color: var(--c-navy); }
.manga__list { display: grid; gap: var(--sp-5); }
.manga__item { margin: 0; }
.manga__item img { width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius); }
.manga__item figcaption {
	margin-top: var(--sp-2); text-align: center; font-size: .8125rem; font-weight: 700; color: var(--c-navy);
}
.manga__zoom {
	display: inline-block; margin-left: var(--sp-2); padding: 2px 10px; border-radius: 999px;
	background: var(--c-blue-light); color: var(--c-blue); font-size: .6875rem; font-weight: 700;
}

/* ---------- 募集（お取引先・スタッフ）＝2枚の高さを揃える ---------- */
.section--boshu { background: var(--c-bg-soft); }
.boshu { display: grid; gap: var(--sp-6); align-items: stretch; }
.boshu__item {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
	overflow: hidden; box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.boshu__item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,47,94,.18); }
.boshu__tag {
	position: absolute; left: 14px; top: 14px; z-index: 2;
	font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: #fff;
	padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.boshu__tag--client { background: linear-gradient(135deg, #f2803a, var(--c-accent-dark)); }
.boshu__tag--staff  { background: linear-gradient(135deg, #12579f, var(--c-navy)); }
.boshu__link { display: block; }
/* ポスターの縦横比が2枚で違うので、枠を固定して切り揃える */
.boshu__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-blue-pale); }
.boshu__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .35s ease; }
.boshu__item:hover .boshu__media img { transform: scale(1.04); }
.boshu__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.boshu__title { font-size: 1.125rem; color: var(--c-navy); margin-bottom: var(--sp-2); }
.boshu__desc { font-size: .875rem; color: var(--c-text-sub); flex: 1; }
.boshu__desc strong { color: var(--c-navy); }
.boshu__more { margin-top: var(--sp-4); }
.boshu__btn {
	display: block; text-align: center; font-weight: 700; font-size: .9375rem; color: #fff;
	text-decoration: none; padding: 13px 18px; border-radius: 10px;
	transition: transform .15s ease, opacity .15s ease;
}
.boshu__btn:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.boshu__btn--client { background: linear-gradient(135deg, #f2803a 0%, var(--c-accent-dark) 100%); box-shadow: 0 8px 18px rgba(236,106,30,.3); }
.boshu__btn--staff  { background: linear-gradient(135deg, #12579f 0%, var(--c-navy) 100%); box-shadow: 0 8px 18px rgba(11,47,94,.3); }
.boshu__btn::after { content: " →"; }

/* ---------- 課題 ---------- */
.issues__head {
	display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}
.issues__person { margin: 0; }
.issues__person img { width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(11,47,94,.16)); }
.issues__bubble {
	position: relative; background: #fff; border: 2px solid var(--c-navy);
	border-radius: 14px; padding: var(--sp-4); font-size: 1rem; font-weight: 700;
	color: var(--c-navy); line-height: 1.7; box-shadow: var(--shadow);
}
.issues__bubble strong { color: var(--c-accent); font-size: 1.125rem; }
.issues__bubble::before,
.issues__bubble::after {
	content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0;
	border-style: solid;
}
.issues__bubble::before {
	left: -14px; border-width: 9px 14px 9px 0; border-color: transparent var(--c-navy) transparent transparent;
}
.issues__bubble::after {
	left: -11px; border-width: 7px 11px 7px 0; border-color: transparent #fff transparent transparent;
}

.issues { display: grid; gap: var(--sp-3); }
.issues__item {
	display: flex; align-items: center; gap: var(--sp-3);
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: var(--sp-4); font-size: .9375rem; box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.issues__item:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11,47,94,.14); }
.issues__icon {
	flex: none; width: 46px; height: 46px; border-radius: 12px; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 60%, var(--c-blue) 100%);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 14px rgba(11,47,94,.28);
}
.issues__icon svg { width: 24px; height: 24px; }
.issues__text { flex: 1; }

/* ---------- 回答ブロック（派手め） ---------- */
.answer {
	position: relative; margin-top: var(--sp-7); padding: var(--sp-7) var(--sp-5) var(--sp-6);
	border-radius: 20px; overflow: hidden; text-align: center; color: #fff;
	background:
		radial-gradient(600px 300px at 15% 0%, rgba(0,113,188,.55), transparent 65%),
		radial-gradient(600px 300px at 90% 100%, rgba(236,106,30,.35), transparent 60%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, #0f4a8a 100%);
	box-shadow: 0 24px 60px rgba(11,47,94,.32);
}
.answer::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.answer__catch {
	font-size: clamp(1.25rem, 5vw, 2rem); font-weight: 800; line-height: 1.6; letter-spacing: .01em;
}
.answer__catch-sub {
	display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; color: #ffd76a;
	margin-bottom: var(--sp-2);
}
.answer__catch-name {
	background: linear-gradient(90deg, #ffe9a8 0%, #ffd76a 50%, #f5b942 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

.answer__stats {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
	margin-top: var(--sp-6);
}
.answer__stats li {
	background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
	border-radius: 14px; padding: var(--sp-4) var(--sp-2);
}
.answer__num {
	display: block; font-size: 1.625rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
	background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 22px rgba(255,215,106,.28);
}
.answer__num small { font-size: .625em; font-weight: 800; }
.answer__num em { font-style: normal; font-size: .5em; font-weight: 700; margin-left: 2px; }
.answer__label { display: block; margin-top: 6px; font-size: .75rem; color: rgba(255,255,255,.9); line-height: 1.6; }
.answer__note { margin-top: var(--sp-5); font-size: .75rem; color: rgba(255,255,255,.72); line-height: 1.9; }

/* ---------- サービス ---------- */
.services { display: grid; gap: var(--sp-4); }
.service {
	border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden;
	background: #fff; transition: box-shadow .22s ease, transform .22s ease;
}
.service:hover { box-shadow: 0 18px 40px rgba(11,47,94,.16); transform: translateY(-4px); }
.service__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.service__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-blue-pale); }
.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.service:hover .service__media img { transform: scale(1.06); }
.service__media::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
	background: linear-gradient(180deg, transparent, rgba(7,31,63,.55));
}
.service__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.service__title { font-size: 1.0625rem; color: var(--c-navy); margin-bottom: var(--sp-2); line-height: 1.55; }
.service__desc { font-size: .875rem; color: var(--c-text-sub); }
.service__more {
	display: inline-block; margin-top: var(--sp-3); font-size: .8125rem; font-weight: 700; color: var(--c-blue);
}
.service__more::after { content: " →"; transition: margin-left .2s ease; }
.service:hover .service__more::after { margin-left: 4px; }

/* ---------- 選ばれる理由（写真つき） ---------- */
.reasons { display: grid; gap: var(--sp-5); }
.reason {
	background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.reason:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,47,94,.18); }
.reason__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.reason__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform .4s ease; }
.reason:hover .reason__media img { transform: scale(1.05); }
.reason__media::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 52%;
	background: linear-gradient(180deg, transparent, rgba(7,31,63,.62));
}
.reason__num {
	position: absolute; left: 14px; bottom: 12px; z-index: 1;
	font-size: .75rem; font-weight: 800; letter-spacing: .18em; color: #fff;
	padding: 5px 14px; border-radius: 999px;
	background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
	box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.reason__body { padding: var(--sp-5); }
.reason__title { font-size: 1.0625rem; color: var(--c-navy); margin-bottom: var(--sp-3); line-height: 1.6; }
.reason__desc { font-size: .875rem; color: var(--c-text-sub); }

/* ---------- 業種（アイコンカード） ---------- */
.industries { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
.industries__item {
	position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
	padding: var(--sp-5) var(--sp-4) var(--sp-4); text-align: center; overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.industries__item::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.industries__item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,47,94,.14); }
.industries__item:hover::before { transform: scaleX(1); }
.industries__icon {
	display: flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; margin: 0 auto var(--sp-3); border-radius: 16px; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 60%, var(--c-blue) 100%);
	box-shadow: 0 8px 18px rgba(11,47,94,.28);
}
.industries__icon svg { width: 30px; height: 30px; }
.industries__title { font-size: .9375rem; color: var(--c-navy); margin-bottom: var(--sp-2); }
.industries__desc { font-size: .8125rem; color: var(--c-text-sub); text-align: left; }

/* ---------- 流れ（写真つきステップ） ---------- */
.flow { display: grid; gap: var(--sp-4); }
.flow__step {
	background: #fff; border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden;
	box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.flow__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.flow__media img { width: 100%; height: 100%; object-fit: cover; }
.flow__media::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
	background: linear-gradient(180deg, transparent, rgba(7,31,63,.45));
}
.flow__num {
	position: absolute; left: 10px; bottom: 10px; z-index: 1;
	background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
	color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
	padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.flow__body { padding: var(--sp-4); flex: 1; }
.flow__title { font-size: 1rem; color: var(--c-navy); margin-bottom: var(--sp-2); }
.flow__desc { font-size: .8125rem; color: var(--c-text-sub); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--sp-3); }
.faq__item { background: #fff; border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow); }
.faq__q {
	font-size: 1rem; color: var(--c-navy); padding-left: 34px; position: relative; margin-bottom: var(--sp-2);
}
.faq__q::before {
	content: "Q"; position: absolute; left: 0; top: -2px;
	width: 26px; height: 26px; border-radius: 50%; background: var(--c-navy); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700;
}
.faq__a { font-size: .875rem; color: var(--c-text-sub); padding-left: 34px; position: relative; }
.faq__a::before {
	content: "A"; position: absolute; left: 0; top: 0;
	width: 26px; height: 26px; border-radius: 50%; background: var(--c-blue-light); color: var(--c-blue);
	display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700;
}

/* ---------- 代表挨拶 ---------- */
.section--message { position: relative; overflow: hidden; background: var(--c-bg-soft); }
.message__ghost {
	position: absolute; right: -8px; top: 6px; z-index: 0;
	font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; letter-spacing: .04em; line-height: 1;
	color: rgba(11,47,94,.05); pointer-events: none; user-select: none;
}
.message { position: relative; display: grid; gap: var(--sp-6); }
.message__photo { text-align: center; }
.message__figure { position: relative; display: inline-block; margin: 0; }
/* 写真の後ろにずらした紺の面＋金のライン＝額装風 */
.message__figure::before {
	content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 14px;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
}
.message__figure::after {
	content: ""; position: absolute; inset: -10px 10px 10px -10px; border-radius: 14px;
	border: 2px solid rgba(236,106,30,.5);
}
.message__figure img {
	position: relative; z-index: 1; width: min(72vw, 300px); border-radius: 12px;
	box-shadow: 0 18px 40px rgba(11,47,94,.25);
}
.message__nameplate { margin-top: var(--sp-5); }
.message__position { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--c-blue); }
.message__name { display: block; font-size: 1.375rem; font-weight: 800; color: var(--c-navy); letter-spacing: .06em; }

.message__philosophy {
	position: relative; margin-bottom: var(--sp-5); padding: var(--sp-5);
	border-radius: 14px; color: #fff; font-size: 1.125rem; font-weight: 800; line-height: 1.8;
	background:
		radial-gradient(420px 200px at 90% 0%, rgba(0,113,188,.5), transparent 65%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	box-shadow: 0 14px 34px rgba(11,47,94,.24);
}
.message__philosophy::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.message__philosophy-label {
	display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .22em; color: #ffd76a;
	margin-bottom: var(--sp-2);
}
.message__philosophy em {
	font-style: normal;
	background: linear-gradient(90deg, #ffe9a8 0%, #ffd76a 60%, #f5b942 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.message__text { font-size: .9375rem; line-height: 2.1; color: var(--c-text-sub); }
.message__text + .message__text { margin-top: var(--sp-4); }
.message__text strong { color: var(--c-navy); }
.message__sign { margin-top: var(--sp-5); text-align: right; }
.message__sign-company { display: block; font-size: .75rem; color: var(--c-text-sub); }
.message__sign-name { display: block; margin-top: 2px; font-size: 1.25rem; font-weight: 800; color: var(--c-navy); letter-spacing: .08em; }

/* ---------- 料金の目安 ---------- */
.section--price { background: var(--c-bg-soft); }
.price-table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem;
	background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.price-table__caption {
	caption-side: top; text-align: left; font-size: .8125rem; font-weight: 700; color: var(--c-text-sub);
	padding-bottom: var(--sp-2);
}
.price-table thead th {
	background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	color: #fff; font-size: .8125rem; letter-spacing: .06em; padding: var(--sp-3) var(--sp-4); text-align: left;
}
.price-table tbody th, .price-table tbody td {
	padding: var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle;
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) { background: var(--c-blue-pale); }
.price-table tbody th { font-weight: 700; color: var(--c-navy); width: 55%; }
.price-table td em {
	font-style: normal; font-weight: 800; font-size: 1.125rem; color: var(--c-accent-dark); letter-spacing: .01em;
}
.price-notes { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.price-notes li {
	position: relative; padding-left: 18px; font-size: .8125rem; color: var(--c-text-sub); line-height: 1.9;
}
.price-notes li::before { content: "※"; position: absolute; left: 0; color: var(--c-blue); }
.price-notes strong { color: var(--c-navy); }

/* ---------- 対応エリア帯 ---------- */
.areas { display: grid; gap: var(--sp-3); }
.areas__item {
	display: flex; align-items: center; gap: var(--sp-3);
	background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: var(--sp-3) var(--sp-4);
	box-shadow: var(--shadow);
}
.areas__region {
	flex: none; min-width: 64px; text-align: center;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
	color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: .1em;
	border-radius: 8px; padding: 6px 12px;
}
.areas__pref { font-size: .875rem; color: var(--c-text); font-weight: 500; }

/* ---------- 導入事例 ---------- */
.case-empty {
	text-align: center; font-size: .9375rem; line-height: 2.1; color: var(--c-text-sub);
	background: var(--c-blue-pale); border: 1px dashed var(--c-line); border-radius: 14px;
	padding: var(--sp-6);
}

/* ---------- お役立ち情報の小見出し ---------- */
.section__subtitle {
	display: flex; align-items: center; gap: var(--sp-3);
	font-size: 1.0625rem; color: var(--c-navy); margin: var(--sp-6) 0 var(--sp-4);
}
.section__subtitle::before {
	content: ""; width: 16px; height: 4px; border-radius: 2px;
	background: linear-gradient(90deg, var(--c-accent), #ffd76a);
}
.section__subtitle::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.section__more--tight { margin-top: var(--sp-4); }

/* ---------- テーブル ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; }
.table__caption { text-align: left; font-weight: 700; color: var(--c-navy); padding-bottom: var(--sp-3); }
.table th, .table td { border: 1px solid var(--c-line); padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; }
.table th { background: var(--c-blue-pale); color: var(--c-navy); width: 34%; font-weight: 700; white-space: nowrap; }
.company-grid__office { margin-bottom: var(--sp-3); }
.company-grid__office:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* ---------- カード ---------- */
.cards { display: grid; gap: var(--sp-4); }
.card { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.card__link { text-decoration: none; color: inherit; display: block; height: 100%; }
.card__link:hover { box-shadow: var(--shadow); }
/* ★アイキャッチ（1200x630＝40:21）に合わせる。3/2 にすると文字入り画像の左右が切れて読めなくなる */
.card__media { aspect-ratio: 40 / 21; background: var(--c-blue-pale); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__noimg { font-size: .75rem; letter-spacing: .12em; color: #a9bccd; font-weight: 700; }
.card__body { padding: var(--sp-4); }
.card__date { font-size: .75rem; color: var(--c-text-sub); }
.card__title { font-size: .9375rem; margin-top: var(--sp-1); color: var(--c-navy); }

/* ---------- CTA（最下部・派手仕様） ---------- */
.cta {
	position: relative; overflow: hidden; color: #fff; padding: var(--sp-8) 0;
	background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 50%, #0f4a8a 100%);
}
.cta::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.cta__glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.cta__glow--1 { width: 480px; height: 480px; right: -140px; top: -180px; background: rgba(0,113,188,.4); }
.cta__glow--2 { width: 420px; height: 420px; left: -120px; bottom: -180px; background: rgba(236,106,30,.28); }
.cta__inner { position: relative; text-align: center; }
.cta__eyebrow { font-size: .8125rem; letter-spacing: .1em; font-weight: 700; color: rgba(255,255,255,.9); }
.cta__eyebrow span {
	display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .24em; color: #ffd76a;
	margin-bottom: var(--sp-1);
}
.cta__title { font-size: clamp(1.375rem, 4.8vw, 2.125rem); margin: var(--sp-3) 0 var(--sp-4); line-height: 1.6; }
.cta__title em {
	font-style: normal; color: #ffd76a;
	background: linear-gradient(transparent 68%, rgba(236,106,30,.5) 68%);
}
.cta__lead { font-size: .9375rem; color: rgba(255,255,255,.9); max-width: 42em; margin-inline: auto; }

.cta__panel {
	display: grid; gap: var(--sp-4); align-items: center;
	margin-top: var(--sp-6); padding: var(--sp-6) var(--sp-5);
	border-radius: 18px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(3px);
	box-shadow: 0 18px 44px rgba(0,0,0,.26);
}
.cta__col-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #ffd76a; margin-bottom: var(--sp-2); }
.cta__col--form .btn { width: 100%; }
.cta__divider {
	position: relative; display: flex; align-items: center; justify-content: center;
}
.cta__divider::before {
	content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px;
	background: rgba(255,255,255,.25);
}
.cta__divider span {
	position: relative; background: var(--c-navy); border: 1px solid rgba(255,255,255,.3);
	border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
	padding: 5px 14px; color: rgba(255,255,255,.85);
}
.cta__tel {
	display: inline-block; text-decoration: none; line-height: 1.2;
	font-size: clamp(1.875rem, 7vw, 2.5rem); font-weight: 800; letter-spacing: .02em;
	background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta__tel:hover { opacity: .85; }
.cta__tel-note { margin-top: var(--sp-1); font-size: .6875rem; color: rgba(255,255,255,.7); }
.cta__note { margin-top: var(--sp-5); font-size: .8125rem; color: rgba(255,255,255,.85); }
.cta__note a { color: #ffd76a; }

/* ---------- パンくず ---------- */
.breadcrumb { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); font-size: .75rem; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) 0; color: var(--c-text-sub); }
.breadcrumb__item + .breadcrumb__item::before { content: "›"; margin-right: var(--sp-2); color: #9db0c2; }
.breadcrumb__item a { color: var(--c-text-sub); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--c-blue); text-decoration: underline; }

/* ---------- フッター ---------- */
.footer {
	position: relative; overflow: hidden;
	background:
		radial-gradient(700px 320px at 90% 0%, rgba(0,113,188,.22), transparent 65%),
		radial-gradient(560px 300px at 0% 100%, rgba(236,106,30,.12), transparent 60%),
		var(--c-navy-dark);
	color: rgba(255,255,255,.82); padding: var(--sp-8) 0 var(--sp-6); font-size: .8125rem;
}
.footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}

.footer__head {
	display: grid; gap: var(--sp-5); align-items: center;
	padding-bottom: var(--sp-6); margin-bottom: var(--sp-6);
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer__logo-mark { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: .12em; color: #fff; }
.footer__logo-name { display: block; font-size: .75rem; color: rgba(255,255,255,.7); }
.footer__desc { margin-top: var(--sp-3); line-height: 1.9; max-width: 44em; }

/* SNSボタン（フッター用・大） */
.footer__sns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sns-btn {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 20px; border-radius: 14px; text-decoration: none; color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sns-btn:hover { transform: translateY(-3px); color: #fff; }
.sns-btn svg { width: 30px; height: 30px; flex: none; }
.sns-btn__label { line-height: 1.3; }
.sns-btn__main { display: block; font-size: .9375rem; font-weight: 800; }
.sns-btn__sub { display: block; font-size: .6875rem; opacity: .9; }
.sns-btn--line { background: #06C755; box-shadow: 0 8px 20px rgba(6,199,85,.3); }
.sns-btn--ig {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	box-shadow: 0 8px 20px rgba(214,36,159,.3);
}

.footer__cols { display: grid; gap: var(--sp-6); }
.footer__col-title {
	display: flex; align-items: center; gap: 8px;
	font-weight: 800; color: #fff; margin-bottom: var(--sp-3); font-size: .875rem; letter-spacing: .04em;
}
.footer__col-title::before {
	content: ""; width: 14px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, #ffd76a, var(--c-blue));
}
.footer__col-title--sub { margin-top: var(--sp-5); }
.footer__list { display: grid; gap: var(--sp-2); }
.footer__list a {
	position: relative; display: inline-block; padding-left: 14px;
	color: rgba(255,255,255,.8); text-decoration: none; transition: color .15s ease;
}
.footer__list a::before {
	content: "›"; position: absolute; left: 0; top: 0; color: var(--c-blue); font-weight: 700;
}
.footer__list a:hover { color: #ffd76a; }
.footer__offices { display: grid; gap: var(--sp-4); }
.footer__offices li { line-height: 1.8; }
.footer__office-label {
	display: inline-block; font-weight: 800; color: #fff; font-size: .75rem;
	background: rgba(255,255,255,.12); border-radius: 6px; padding: 1px 10px; margin-bottom: 4px;
}
.footer__office-addr, .footer__office-tel { display: block; }
.footer__office-tel a { color: rgba(255,255,255,.85); }
.footer__licenses { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); font-size: .6875rem; color: rgba(255,255,255,.6); }
.footer__licenses span { display: block; color: rgba(255,255,255,.8); font-weight: 700; }

.footer__bottom {
	margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px dashed rgba(255,255,255,.2);
	display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center;
}
.footer__reg { font-size: .6875rem; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.footer__reg a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer__reg a:hover { color: #ffd76a; text-decoration: underline; }
.footer__sep { margin: 0 6px; color: rgba(255,255,255,.35); }
.footer__copy { font-size: .75rem; color: rgba(255,255,255,.6); }

/* ---------- 固定CTA（スマホ・電話/LINE/相談の3分割） ---------- */
/* ★2026-09-04 3分割のバランスを是正。
   旧: grid 1.3fr .8fr 1fr ＝実測 42%/26%/32% で幅がバラバラ。しかも
       いちばん狭いLINEがいちばん強い色で、中身の構造も3つとも違っていた
       （2行／アイコン＋文字／1行だけ）。
   新: 3つとも同じ幅（1fr 等分）。中身も「小さいラベル＋主テキスト」の
       同じ構造にそろえて縦位置を合わせる。
   ★等分にすると電話番号がいちばん厳しいので、下のメディアクエリで
     狭い端末だけ番号を1段小さくして折り返しを防いでいる。 */
.fixed-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.4);
	box-shadow: 0 -4px 16px rgba(11,47,94,.16);
}
.fixed-cta a {
	text-decoration: none; text-align: center; padding: 8px 4px; line-height: 1.25;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 58px;
}
.fixed-cta__tel { background: var(--c-navy); color: #fff; }
.fixed-cta__label { display: block; font-size: .625rem; font-weight: 500; opacity: .8; }
.fixed-cta__num { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: .01em; }
.fixed-cta__main {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	font-size: .875rem; font-weight: 800;
}
.fixed-cta__line { background: #06C755; color: #fff; }
.fixed-cta__line svg { width: 17px; height: 17px; flex: none; }
.fixed-cta__form { background: var(--c-accent); color: #fff; }

/* 狭い端末（iPhone SE 等）では番号を1段小さく＝折り返させない
   ★等分（1fr）にしたぶん電話セルが狭くなるので、380px以下から効かせる */
@media (max-width: 380px) {
	.fixed-cta__num { font-size: .875rem; letter-spacing: 0; }
	.fixed-cta__main { font-size: .8125rem; }
	.fixed-cta a { padding: 8px 2px; }
}

/* ---------- 下層ページ共通 ---------- */
.container--narrow { width: min(100% - 32px, 820px); }

.page-head {
	background: linear-gradient(135deg, var(--c-navy) 0%, #0f4a8a 100%);
	color: #fff; padding: var(--sp-7) 0;
}
.page-head__title { font-size: clamp(1.375rem, 5vw, 2.125rem); }
.page-head__lead { margin-top: var(--sp-3); font-size: .875rem; color: rgba(255,255,255,.9); line-height: 1.9; }

.entry { font-size: .9375rem; }
.entry > * + * { margin-top: var(--sp-4); }
.entry h2 {
	font-size: 1.25rem; color: var(--c-navy); margin-top: var(--sp-7); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
	border-left: 5px solid var(--c-blue); background: var(--c-blue-pale);
}
.entry h3 { font-size: 1.0625rem; color: var(--c-navy); margin-top: var(--sp-6); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line); }
.entry h4 { font-size: 1rem; color: var(--c-navy); margin-top: var(--sp-5); }
.entry p { line-height: 2; }
.entry ul { list-style: disc; padding-left: 1.4em; }
.entry ol { list-style: decimal; padding-left: 1.4em; }
.entry li + li { margin-top: var(--sp-2); }
.entry img { max-width: 100%; height: auto; display: block; margin-inline: auto; border-radius: var(--radius); }
.entry table { width: 100%; border-collapse: collapse; font-size: .875rem; display: block; overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--c-line); padding: var(--sp-3); text-align: left; }
.entry th { background: var(--c-blue-pale); color: var(--c-navy); }
.entry blockquote {
	border-left: 4px solid var(--c-line); padding: var(--sp-3) var(--sp-4); background: var(--c-bg-soft); color: var(--c-text-sub);
}
.entry__updated { margin-top: var(--sp-6); font-size: .75rem; color: var(--c-text-sub); text-align: right; }

.entry-head__title { font-size: clamp(1.375rem, 5vw, 2rem); color: var(--c-navy); line-height: 1.45; }
.entry-head__meta { margin-top: var(--sp-3); font-size: .75rem; color: var(--c-text-sub); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.entry-thumb { margin: var(--sp-5) 0; }
.entry-thumb img { border-radius: var(--radius); width: 100%; }

/* ★スクリーンリーダー専用テキスト。WordPress が the_posts_pagination() などで
   <h2 class="screen-reader-text">投稿のページ送り</h2> を出すため、この定義が無いと
   一覧ページの下に見出しとして表示されてしまう（2026-09-05 修正）。 */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static !important; width: auto; height: auto; margin: 0;
	clip: auto; clip-path: none; white-space: normal;
}

.pagination { margin-top: var(--sp-7); }
.pagination .nav-links { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	border: 1px solid var(--c-line); border-radius: 8px; text-decoration: none; color: var(--c-navy); font-weight: 700;
	padding: 0 var(--sp-3);
}
.pagination .page-numbers.current { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.pagination .page-numbers:hover { background: var(--c-blue-light); }

.notfound { text-align: center; color: var(--c-text-sub); padding: var(--sp-7) 0; }
.notfound-links { gap: var(--sp-3); }
.notfound-links a { color: var(--c-blue); }

/* =========================================================
   タブレット（768〜1023）
   ========================================================= */
@media (min-width: 768px) {
	.answer__stats { grid-template-columns: repeat(4, 1fr); }
	.issues { grid-template-columns: repeat(2, 1fr); }
	.issues__head { grid-template-columns: 160px 1fr; gap: var(--sp-5); }
	.issues__bubble { font-size: 1.25rem; padding: var(--sp-5); }
	.issues__bubble strong { font-size: 1.5rem; }
	.services { grid-template-columns: repeat(2, 1fr); }
	.reasons { grid-template-columns: repeat(2, 1fr); }
	.faq { grid-template-columns: repeat(2, 1fr); }
	.cards { grid-template-columns: repeat(3, 1fr); }
	.award__inner { grid-template-columns: 380px 1fr; gap: var(--sp-6); padding: var(--sp-6); }
	.message { grid-template-columns: 320px 1fr; gap: var(--sp-8); align-items: start; }
	.message__photo { position: sticky; top: var(--sp-5); }
	.message__philosophy { font-size: 1.25rem; }
	.manga__list { grid-template-columns: repeat(2, 1fr); }
	.flow { grid-template-columns: repeat(3, 1fr); }
	.areas { grid-template-columns: repeat(2, 1fr); }
	.areas__item:last-child { grid-column: 1 / -1; }
	.boshu { grid-template-columns: repeat(2, 1fr); }
	.ambassador { grid-template-columns: 260px 1fr; gap: var(--sp-7); align-items: start; padding: var(--sp-7); }
	.cta__panel { grid-template-columns: 1fr auto 1fr; gap: var(--sp-5); padding: var(--sp-6); }
	.cta__divider { flex-direction: column; height: 100%; }
	.cta__divider::before { left: 50%; right: auto; top: 8%; bottom: 8%; width: 1px; height: auto; }
	.footer__head { grid-template-columns: 1fr auto; }
	.footer__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-6); }
	.footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* =========================================================
   PC（1024〜）
   ========================================================= */
@media (min-width: 1024px) {
	body { padding-bottom: 0; }
	.fixed-cta { display: none; }

	.header__toggle { display: none; }
	.header__contact { display: flex; }
	.header__bar { font-size: .8125rem; }

	.gnav { display: block; }
	.gnav__list { flex-direction: row; justify-content: space-between; gap: var(--sp-4); }
	.gnav__list li { border-bottom: 0; position: relative; }
	.gnav__list > li > a { padding: 16px 4px; font-size: .9375rem; }
	.gnav__list > li > a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
		background: var(--c-blue); transform: scaleX(0); transition: transform .2s ease;
	}
	.gnav__list > li:hover > a::after { transform: scaleX(1); }
	.gnav__list .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff;
		border: 1px solid var(--c-line); box-shadow: var(--shadow); padding: var(--sp-2) 0;
		display: none; z-index: 50;
	}
	.gnav__list li:hover > .sub-menu { display: block; }
	.gnav__list .sub-menu a { padding: 10px 16px; }

	.header__logo img { width: 215px; }
	.header__license { display: block; }

	.only-pc { display: inline; }
	.only-sp { display: none; }

	.lead { padding: var(--sp-8) 0 var(--sp-7); }
	.lead__text { font-size: 1rem; text-align: center; }

	.answer { padding: var(--sp-8) var(--sp-7) var(--sp-7); }
	.answer__num { font-size: 2.25rem; }
	.answer__label { font-size: .8125rem; }

	.actionbar { padding: var(--sp-7) var(--sp-8); }
	.actionbar__actions { flex-direction: row; justify-content: center; margin-top: var(--sp-6); }
	.actionbar__actions .btn { min-width: 300px; }
	.actionbar__tel-num { font-size: 2.25rem; }

	.award__title { font-size: 1.25rem; }
	.award__desc { font-size: .875rem; }

	.section { padding: var(--sp-9) 0; }
	.services { grid-template-columns: repeat(4, 1fr); }
	.reasons { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
	.industries { grid-template-columns: repeat(4, 1fr); }
	.flow { grid-template-columns: repeat(5, 1fr); }
	.flow--page { grid-template-columns: repeat(2, 1fr); }
	.flow__body { padding: var(--sp-4) var(--sp-3); }
	.flow--page .flow__body { padding: var(--sp-5); }
	.flow__desc { font-size: .75rem; }
	.flow--page .flow__desc { font-size: .875rem; }
	.faq { grid-template-columns: repeat(3, 1fr); }
	.footer__cols { gap: var(--sp-7); }
}

/* =========================================================
   最終仕上げ（演出・細部）
   ========================================================= */

/* テキスト選択・フォーカスリング */
::selection { background: var(--c-navy); color: #fff; }
:focus-visible { outline: 3px solid rgba(0, 113, 188, .55); outline-offset: 2px; border-radius: 4px; }

/* セクションの小見出し（eyebrow）に飾り罫 */
.section__eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; }
.section__eyebrow::before,
.section__eyebrow::after { content: ""; width: 30px; height: 1px; }
.section__eyebrow::before { background: linear-gradient(90deg, transparent, var(--c-blue)); }
.section__eyebrow::after  { background: linear-gradient(90deg, var(--c-blue), transparent); }

/* ヒーロー下端を次のセクションへなじませる */
.hero { position: relative; }
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,.92));
	pointer-events: none;
}

/* メインボタンに光を走らせる */
.btn--primary { overflow: hidden; }
.btn--primary::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
	transform: skewX(-20deg);
	animation: sp-shine 4s ease-in-out infinite;
}
@keyframes sp-shine {
	0%, 55% { left: -80%; }
	100%    { left: 130%; }
}

/* スクロール連動フェードイン（JSが .js-reveal を付与） */
@media (prefers-reduced-motion: no-preference) {
	.js-reveal {
		opacity: 0; transform: translateY(26px);
		transition: opacity .7s cubic-bezier(.22,.65,.35,1), transform .7s cubic-bezier(.22,.65,.35,1);
		transition-delay: var(--rvd, 0ms);
	}
	.js-reveal.is-visible { opacity: 1; transform: none; }
}

/* トップへ戻る */
.to-top {
	position: fixed; right: 16px; bottom: 84px; z-index: 80;
	width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
	box-shadow: 0 8px 20px rgba(11,47,94,.4);
	opacity: 0; pointer-events: none; transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}
.to-top.is-show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: linear-gradient(135deg, #12579f 0%, var(--c-blue) 100%); }
.to-top svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .to-top { right: 24px; bottom: 24px; } }

/* スマホ固定バーのセーフエリア対応 */
.fixed-cta { padding-bottom: env(safe-area-inset-bottom); background-color: #fff; }

/* 印刷・アニメーション配慮 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

/* =========================================================
   2026-08-24 追加
   ・個人のお客様も対応する3サービス（.direct）
   ・BPO／代行サービス（.bpo）
   ・自社サービスサイト 電サク・電プロ（.sister）
   ※ 既存ブロックを壊さないよう、専用メディアクエリを末尾に持つ
   ========================================================= */

/* ---------- 個人・法人どちらも（首都圏） ---------- */
/* ★背景は白。直後の .section--reasons が bg-soft なので、ここも同じ色にすると境目が消える
   （セクション順を services → bpo → direct → reasons に変えた 2026-08-24 の対応） */
.direct { display: grid; gap: var(--sp-4); }
.direct__item {
	position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
	overflow: hidden; box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
.direct__item::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 55%, var(--c-blue) 100%);
}
.direct__item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(11,47,94,.18); }
.direct__link {
	display: flex; flex-direction: column; height: 100%;
	padding: var(--sp-6) var(--sp-5) var(--sp-5); text-decoration: none; color: inherit;
}
.direct__icon {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 18px; color: #fff; margin-bottom: var(--sp-4);
	background: linear-gradient(135deg, var(--c-accent) 0%, #f2803a 50%, var(--c-accent-dark) 100%);
	box-shadow: 0 10px 22px rgba(236,106,30,.32);
}
.direct__icon svg { width: 34px; height: 34px; }
.direct__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.direct__tag {
	font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
	padding: 4px 12px; border-radius: 999px; line-height: 1.6;
}
.direct__tag--area { background: var(--c-navy); color: #fff; }
.direct__tag--both { background: var(--c-blue-light); color: var(--c-blue); border: 1px solid rgba(0,113,188,.28); }
.direct__title { font-size: 1.125rem; color: var(--c-navy); margin-bottom: var(--sp-3); line-height: 1.55; }
.direct__desc { font-size: .875rem; color: var(--c-text-sub); flex: 1; }
.direct__price {
	margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 12px;
	background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	font-size: 1.125rem; font-weight: 800; letter-spacing: .01em; text-align: center;
	background-clip: padding-box; color: #fff;
	box-shadow: 0 8px 18px rgba(11,47,94,.24);
}
.direct__note { margin-top: var(--sp-2); font-size: .75rem; color: var(--c-text-sub); line-height: 1.8; }
.direct__more { display: inline-block; margin-top: var(--sp-3); font-size: .8125rem; font-weight: 700; color: var(--c-blue); }
.direct__more::after { content: " →"; transition: margin-left .2s ease; }
.direct__item:hover .direct__more::after { margin-left: 4px; }
.direct__foot {
	margin-top: var(--sp-5); text-align: center; font-size: .8125rem; color: var(--c-text-sub); line-height: 1.9;
}

/* ---------- BPO・代行サービス（紺の全面セクション） ---------- */
.section--bpo {
	position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(680px 320px at 12% 0%, rgba(0,113,188,.5), transparent 62%),
		radial-gradient(620px 320px at 92% 100%, rgba(236,106,30,.28), transparent 60%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, #0f4a8a 100%);
}
.section--bpo::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.section--bpo > .container { position: relative; }
.section__eyebrow--light { color: #ffd76a; }
.section__eyebrow--light::before { background: linear-gradient(90deg, transparent, #ffd76a); }
.section__eyebrow--light::after  { background: linear-gradient(90deg, #ffd76a, transparent); }
.section__title--light { color: #fff; }
.section__title--light strong {
	background: linear-gradient(90deg, #ffe9a8 0%, #ffd76a 55%, #f5b942 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.section__lead--light { color: rgba(255,255,255,.85); max-width: 46em; margin-inline: auto; }

.bpo { display: grid; gap: var(--sp-5); }
.bpo__item {
	display: flex; flex-direction: column;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
	border-radius: 18px; padding: var(--sp-6) var(--sp-5);
	box-shadow: 0 18px 44px rgba(0,0,0,.22);
	transition: transform .2s ease, background-color .2s ease;
}
.bpo__item:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.bpo__label { font-size: .625rem; font-weight: 800; letter-spacing: .22em; color: #ffd76a; }
.bpo__title { font-size: 1.1875rem; color: #fff; margin: var(--sp-2) 0 var(--sp-4); line-height: 1.55; }
.bpo__price {
	padding: var(--sp-3) var(--sp-4); border-radius: 12px; text-align: center;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,215,106,.45);
}
.bpo__price-num {
	font-size: 1.5rem; font-weight: 800; letter-spacing: .01em;
	background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 22px rgba(255,215,106,.25);
}
.bpo__lead { margin-top: var(--sp-4); font-size: .875rem; color: rgba(255,255,255,.88); line-height: 1.95; }
.bpo__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); flex: 1; }
.bpo__list li {
	position: relative; padding-left: 24px; font-size: .8125rem; color: rgba(255,255,255,.9); line-height: 1.75;
}
.bpo__list li::before {
	content: ""; position: absolute; left: 4px; top: .55em;
	width: 8px; height: 8px; border-radius: 50%;
	background: linear-gradient(135deg, #ffd76a, var(--c-accent));
}
.bpo__foot {
	margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed rgba(255,255,255,.25);
	font-size: .8125rem; color: #ffd76a; line-height: 1.85;
}
.bpo__more { margin-top: var(--sp-4); }
.bpo__btn {
	display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: .9375rem; color: #fff;
	padding: 13px 18px; border-radius: 10px;
	background: linear-gradient(135deg, #f2803a 0%, var(--c-accent-dark) 100%);
	box-shadow: 0 8px 18px rgba(236,106,30,.32);
	transition: transform .15s ease, opacity .15s ease;
}
.bpo__btn::after { content: " →"; }
.bpo__btn:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.bpo__note {
	margin-top: var(--sp-6); text-align: center; font-size: .8125rem; color: rgba(255,255,255,.78); line-height: 1.9;
}

/* TimeRex（日程調整）への予約導線 */
.bpo__reserve {
	margin-top: var(--sp-6); display: grid; gap: var(--sp-5); align-items: center;
	padding: var(--sp-6) var(--sp-5); border-radius: 18px;
	background: rgba(255,255,255,.09);
	border: 1px solid rgba(255,215,106,.5);
	box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.bpo__reserve-title {
	font-size: 1.125rem; font-weight: 800; color: #fff; margin-bottom: var(--sp-2); line-height: 1.6;
}
.bpo__reserve-lead { font-size: .875rem; color: rgba(255,255,255,.88); line-height: 1.95; }
.bpo__reserve-lead strong { color: #ffd76a; }
.bpo__reserve-notes { margin-top: var(--sp-3); display: grid; gap: 6px; }
.bpo__reserve-notes li {
	position: relative; padding-left: 22px; font-size: .8125rem; color: rgba(255,255,255,.8); line-height: 1.7;
}
.bpo__reserve-notes li::before {
	content: ""; position: absolute; left: 3px; top: .45em;
	width: 10px; height: 6px; border-left: 2px solid #ffd76a; border-bottom: 2px solid #ffd76a;
	transform: rotate(-45deg);
}
.bpo__reserve-action { text-align: center; }
.bpo__reserve-btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	padding: 18px 30px; border-radius: 12px; text-decoration: none; line-height: 1.4;
	color: var(--c-navy-dark); font-weight: 800;
	background: linear-gradient(135deg, #ffe9a8 0%, #ffd76a 50%, #f5b942 100%);
	box-shadow: 0 12px 26px rgba(255,215,106,.32);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bpo__reserve-btn:hover { transform: translateY(-2px); color: var(--c-navy-dark); box-shadow: 0 16px 32px rgba(255,215,106,.42); }
.bpo__reserve-btn-main { font-size: 1.0625rem; }
.bpo__reserve-btn-sub { font-size: .75rem; font-weight: 700; opacity: .78; }
.bpo__reserve-tel { margin-top: var(--sp-3); font-size: .8125rem; color: rgba(255,255,255,.8); }
.bpo__reserve-tel a { color: #fff; font-weight: 800; font-size: 1.125rem; letter-spacing: .02em; text-decoration: none; }
.bpo__reserve-tel a:hover { color: #ffd76a; }

/* ---------- 対応エリア（主要エリアを強調） ---------- */
.areas__item--main {
	border-color: rgba(0,113,188,.45);
	background: linear-gradient(135deg, #fff 0%, var(--c-blue-light) 100%);
	box-shadow: 0 12px 28px rgba(11,47,94,.14);
}
.areas__item--main .areas__region {
	background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
}
.areas__item--main .areas__pref { font-weight: 800; color: var(--c-navy); }
.areas__note {
	margin-top: var(--sp-4); font-size: .8125rem; color: var(--c-text-sub); line-height: 1.9; text-align: center;
}
.areas__note strong { color: var(--c-navy); }

/* ---------- 自社サービスサイト（電サク・電プロ） ---------- */
.section--sister { background: var(--c-bg-soft); }
.sister { display: grid; gap: var(--sp-4); }
.sister__item {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
	padding: var(--sp-5); box-shadow: var(--shadow);
}
.sister__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sister__name {
	font-size: 1.375rem; font-weight: 800; letter-spacing: .04em; color: var(--c-navy);
}
.sister__status {
	font-size: .6875rem; font-weight: 800; letter-spacing: .06em; color: #fff;
	background: linear-gradient(135deg, #7d8fa1 0%, #5a6b7d 100%);
	padding: 4px 12px; border-radius: 999px;
}
.sister__lead {
	margin-top: var(--sp-2); font-size: .9375rem; font-weight: 700; color: var(--c-blue);
}
.sister__desc { margin-top: var(--sp-3); font-size: .875rem; color: var(--c-text-sub); flex: 1; }
.sister__more { margin-top: var(--sp-4); }
.sister__btn {
	display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: .9375rem; color: #fff;
	padding: 13px 18px; border-radius: 10px;
	background: linear-gradient(135deg, #12579f 0%, var(--c-navy) 100%);
	box-shadow: 0 8px 18px rgba(11,47,94,.28);
	transition: transform .15s ease, opacity .15s ease;
}
.sister__btn:hover { transform: translateY(-2px); opacity: .92; color: #fff; }
.sister__btn--soon {
	background: var(--c-bg-soft); color: var(--c-text-sub); box-shadow: none;
	border: 1px dashed var(--c-line); cursor: default;
}
.sister__btn--soon:hover { transform: none; opacity: 1; color: var(--c-text-sub); }
.footer__soon {
	display: inline-block; padding-left: 14px; color: rgba(255,255,255,.5); position: relative;
}
.footer__soon::before { content: "›"; position: absolute; left: 0; top: 0; color: rgba(255,255,255,.35); font-weight: 700; }

/* =========================================================
   下層ページ共通（inc/parts.php のパーツ）
   ★写真はトップにあるものだけ。図・番号・アイコン・表で見栄えを作る。
   ========================================================= */

.container--article { width: min(100% - 32px, 880px); margin-inline: auto; }
/* ★★2026-09-05 `.page` から `article.page` に変更。
   WordPress の body_class() は固定ページの <body> にも `page` クラスを付けるため、
   `.page{padding:...}` が **body にまで当たって**いた。結果、PCでフッターの下に
   64px（--sp-8）の白い隙間ができ、スマホでも body の下パディングが
   ページによって 64px / 68px とバラついていた。
   このクラスは各テンプレートの <article class="page"> のためのものなので、
   要素を限定して body に当たらないようにする。 */
article.page { padding: var(--sp-7) 0 var(--sp-8); }

/* ---------- ページヘッダー ---------- */
.phero {
	position: relative; overflow: hidden; color: #fff;
	padding: var(--sp-7) 0;
	background:
		radial-gradient(620px 300px at 12% 0%, rgba(0,113,188,.5), transparent 62%),
		radial-gradient(560px 300px at 92% 100%, rgba(236,106,30,.26), transparent 60%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 55%, #0f4a8a 100%);
}
.phero::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 50%, var(--c-blue) 100%);
}
.phero > .container { position: relative; }
.phero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: .6875rem; font-weight: 800; letter-spacing: .22em; color: #ffd76a; margin-bottom: var(--sp-3);
}
.phero__eyebrow::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, #ffd76a, transparent); }
.phero__title { font-size: clamp(1.5rem, 5.4vw, 2.375rem); line-height: 1.45; color: #fff; letter-spacing: .01em; }
.phero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.phero__tags li {
	font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
	padding: 5px 14px; border-radius: 999px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,215,106,.45); color: #ffe9a8;
}
.phero__lead { margin-top: var(--sp-4); font-size: .9375rem; line-height: 2; color: rgba(255,255,255,.9); max-width: 46em; }
.phero__lead strong { color: #ffd76a; }
.phero__price { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.phero__price li {
	padding: var(--sp-3) var(--sp-5); border-radius: 12px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,215,106,.45);
}
.phero__price-label { display: block; font-size: .6875rem; color: rgba(255,255,255,.8); }
.phero__price-value {
	display: block; margin-top: 2px; font-size: 1.375rem; font-weight: 800;
	background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 冒頭の結論（AI引用対策） ---------- */
.conclusion {
	position: relative; margin-bottom: var(--sp-6);
	padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
	border-radius: 14px; background: var(--c-blue-pale); border: 1px solid rgba(0,113,188,.22);
}
.conclusion::before {
	content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--c-blue), var(--c-navy));
}
.conclusion__label {
	font-size: .6875rem; font-weight: 800; letter-spacing: .14em; color: var(--c-blue); margin-bottom: var(--sp-2);
}
.conclusion__body { font-size: .9375rem; line-height: 2.05; color: var(--c-text); }
.conclusion__body strong { color: var(--c-navy); }

/* ---------- 本文中の写真 ---------- */
.page__figure { margin: var(--sp-6) 0; }
/* 元画像の縦横比がまちまちなので枠を固定して切り揃える（縦長写真で本文が間延びするのを防ぐ） */
.page__figure img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 42%;
	border-radius: 14px; box-shadow: var(--shadow);
}
.page__figure figcaption {
	margin-top: var(--sp-2); font-size: .75rem; color: var(--c-text-sub); text-align: center;
}

/* 写真の手持ちが無いテーマ（EV充電器など）は図解で見せる。
   横長のSVGなので、狭い画面では横スクロールさせて字が潰れないようにする。 */
.page__figure--diagram {
	padding: var(--sp-5) var(--sp-4);
	border: 1px solid var(--c-line); border-radius: 14px;
	background: #fff; box-shadow: var(--shadow);
}
/* ヒントは枠の外に固定し、スクロールするのはSVGだけにする */
.page__figure--diagram .evdia-scroll { overflow-x: auto; }
.evdia { display: block; width: 100%; min-width: 700px; height: auto; }
.evdia line { stroke: #94a3b8; stroke-width: 2; }
.evdia__scope { fill: rgba(0, 82, 155, .05); stroke: var(--c-blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.evdia__scopelabel { font-size: 13px; font-weight: 700; fill: var(--c-blue); }
.evdia__node rect { fill: #fff; stroke: var(--c-line); stroke-width: 1.5; }
.evdia__node text { font-size: 16px; font-weight: 700; fill: var(--c-text); text-anchor: middle; }
.evdia__node .evdia__sub { font-size: 12px; font-weight: 400; fill: var(--c-text-sub); }
.evdia__node--own rect { stroke: var(--c-blue); stroke-width: 2; }
.evdia__node--own text { fill: var(--c-blue); }
.evdia__node--goal rect { fill: var(--c-blue); stroke: var(--c-blue); }
.evdia__node--goal text { fill: #fff; }
.evdia__node--goal .evdia__sub { fill: rgba(255, 255, 255, .8); }

/* ---------- 目次 ---------- */
.toc {
	margin: var(--sp-6) 0; padding: var(--sp-5);
	border: 1px solid var(--c-line); border-radius: 14px; background: #fff; box-shadow: var(--shadow);
}
.toc__title {
	display: flex; align-items: center; gap: 10px;
	font-size: .9375rem; font-weight: 800; color: var(--c-navy); margin-bottom: var(--sp-3);
}
.toc__title::before {
	content: ""; width: 16px; height: 4px; border-radius: 2px;
	background: linear-gradient(90deg, var(--c-accent), #ffd76a);
}
.toc__list { display: grid; gap: var(--sp-2); }
.toc__list a {
	display: flex; align-items: baseline; gap: 10px;
	font-size: .875rem; color: var(--c-text); text-decoration: none; line-height: 1.7;
}
.toc__list a:hover { color: var(--c-blue); }
.toc__num {
	flex: none; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
	background: linear-gradient(90deg, var(--c-navy), var(--c-blue));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- セクション ---------- */
.sec { margin-top: var(--sp-8); scroll-margin-top: var(--sp-5); }
.sec__title {
	position: relative; font-size: clamp(1.25rem, 4.2vw, 1.625rem); color: var(--c-navy);
	padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); line-height: 1.5;
	border-bottom: 2px solid var(--c-line);
}
.sec__title::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 96px; height: 2px;
	background: linear-gradient(90deg, var(--c-accent), #ffd76a);
}
.sec__lead { font-size: .9375rem; color: var(--c-text-sub); line-height: 2; margin-bottom: var(--sp-5); }
.sec__lead strong { color: var(--c-navy); }

/* ---------- チェックリスト ---------- */
.checklist { display: grid; gap: var(--sp-3); }
.checklist__item {
	position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) 52px;
	background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
	font-size: .9375rem; line-height: 1.8; box-shadow: var(--shadow);
}
.checklist__item strong { color: var(--c-navy); }
.checklist__item::before {
	content: ""; position: absolute; left: 18px; top: 50%; margin-top: -7px;
	width: 16px; height: 9px;
	border-left: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent);
	transform: rotate(-45deg);
}
.checklist__foot {
	margin-top: var(--sp-4); padding: var(--sp-4);
	border-radius: 12px; background: var(--c-blue-pale); border: 1px dashed rgba(0,113,188,.3);
	font-size: .875rem; line-height: 1.9; color: var(--c-text);
}
.checklist__foot strong { color: var(--c-navy); }

/* ---------- ステップ ---------- */
.steps { display: grid; gap: var(--sp-3); counter-reset: step; }
.steps__item {
	position: relative; display: flex; gap: var(--sp-4); align-items: flex-start;
	padding: var(--sp-5); background: #fff; border: 1px solid var(--c-line);
	border-radius: 14px; box-shadow: var(--shadow);
}
.steps__num {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px;
	font-size: 1.0625rem; font-weight: 800; letter-spacing: .02em; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 60%, var(--c-blue) 100%);
	box-shadow: 0 6px 14px rgba(11,47,94,.26);
}
.steps__title { font-size: 1rem; color: var(--c-navy); margin-bottom: var(--sp-2); }
.steps__desc { font-size: .875rem; color: var(--c-text-sub); line-height: 1.9; }
.steps__desc strong { color: var(--c-navy); }

/* ---------- アイコンカード ---------- */
.icards { display: grid; gap: var(--sp-4); }
.icard {
	position: relative; overflow: hidden;
	padding: var(--sp-5); background: #fff; border: 1px solid var(--c-line);
	border-radius: 14px; box-shadow: var(--shadow);
}
.icard::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
}
.icard__icon {
	display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 15px; color: #fff; margin-bottom: var(--sp-3);
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 60%, var(--c-blue) 100%);
	box-shadow: 0 8px 18px rgba(11,47,94,.26);
}
.icard__icon svg { width: 28px; height: 28px; }
.icard__title { font-size: 1rem; color: var(--c-navy); margin-bottom: var(--sp-2); line-height: 1.6; }
.icard__desc { font-size: .875rem; color: var(--c-text-sub); line-height: 1.9; }

/* ---------- お問い合わせフォーム ---------- */
.cform {
	margin-top: var(--sp-5); padding: var(--sp-6) var(--sp-5);
	background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: var(--shadow);
}
.cform--disabled { opacity: .72; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__row + .cform__row { margin-top: var(--sp-4); }
.cform__label {
	display: flex; align-items: center; gap: var(--sp-2);
	font-size: .875rem; font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-2);
}
.cform__req {
	font-size: .625rem; font-weight: 800; letter-spacing: .04em; color: #fff;
	background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
	padding: 2px 8px; border-radius: 999px;
}
.cform__input {
	width: 100%; padding: 13px var(--sp-4);
	font-family: inherit; font-size: 1rem; color: var(--c-text); line-height: 1.6;
	background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cform__input:focus {
	outline: none; border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(0,113,188,.16);
}
.cform__input:disabled { background: var(--c-bg-soft); color: var(--c-text-sub); cursor: not-allowed; }
.cform__input::placeholder { color: #a9bccd; }
.cform__textarea { resize: vertical; min-height: 160px; }
select.cform__input { appearance: none; background-image: none; }
.cform__privacy {
	margin-top: var(--sp-5); padding: var(--sp-4);
	background: var(--c-blue-pale); border-radius: 10px;
	font-size: .8125rem; color: var(--c-text-sub); line-height: 1.9;
}
.cform__submit { margin-top: var(--sp-5); text-align: center; }
.cform__submit .btn { width: 100%; max-width: 420px; }
.cform__submit .btn:disabled { background: #b9c6d3; box-shadow: none; cursor: not-allowed; }
.cform__submit .btn:disabled::after, .cform__submit .btn:disabled::before { display: none; }

/* フォームのメッセージ */
.formmsg {
	margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
	border-radius: 12px; font-size: .9375rem; line-height: 1.9;
}
.formmsg--ok { background: #eefaf2; border: 1px solid #9ad9b4; color: #1c6b40; }
.formmsg--ng { background: #fdf2f2; border: 1px solid #e8a9a9; color: #9b2c2c; }
.formmsg--info { background: var(--c-blue-pale); border: 1px solid rgba(0,113,188,.3); color: var(--c-text); }
.formmsg a { font-weight: 700; }

/* ---------- ご連絡の方法 ---------- */
.contactway { display: grid; gap: var(--sp-4); }
.contactway__item {
	position: relative; overflow: hidden;
	padding: var(--sp-5); background: #fff; border: 1px solid var(--c-line);
	border-radius: 14px; box-shadow: var(--shadow); text-align: center;
}
.contactway__item::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
}
.contactway__item--tel::before { background: linear-gradient(90deg, var(--c-accent) 0%, #ffd76a 100%); }
.contactway__label {
	display: inline-block; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
	padding: 4px 14px; border-radius: 999px; margin-bottom: var(--sp-3);
}
.contactway__item--tel .contactway__label { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); }
.contactway__value { font-size: 1.75rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.contactway__value a { color: var(--c-navy); text-decoration: none; }
.contactway__value a:hover { color: var(--c-blue); }
.contactway__value--sm { font-size: 1rem; font-weight: 700; color: var(--c-navy); }
.contactway__note { margin-top: var(--sp-2); font-size: .8125rem; color: var(--c-text-sub); line-height: 1.8; }
.contactway__btn { margin-top: var(--sp-4); display: flex; justify-content: center; }
.office__note { margin-top: var(--sp-2); font-size: .8125rem; color: var(--c-text-sub); }

/* ---------- 規約・ポリシー系の本文 ---------- */
.entry--legal h2 {
	font-size: 1.0625rem; margin-top: var(--sp-7); padding: var(--sp-3) var(--sp-4);
	border-left: 5px solid var(--c-blue); background: var(--c-blue-pale); color: var(--c-navy);
}
.entry--legal p { font-size: .9375rem; line-height: 2.05; color: var(--c-text); }
.entry--legal ul { list-style: disc; padding-left: 1.5em; }
.entry--legal li { font-size: .9375rem; line-height: 1.95; color: var(--c-text); }

/* ---------- エラーコード表 ---------- */
.ecode {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem;
	background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.ecode--detail { min-width: 700px; }
.ecode thead th {
	background: linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	color: #fff; font-size: .8125rem; letter-spacing: .04em;
	padding: var(--sp-3) var(--sp-4); text-align: left; white-space: nowrap;
}
.ecode tbody th, .ecode tbody td {
	padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line);
	text-align: left; vertical-align: top;
}
.ecode tbody tr:last-child th, .ecode tbody tr:last-child td { border-bottom: 0; }
.ecode tbody tr:nth-child(even) { background: var(--c-blue-pale); }
.ecode__code {
	width: 92px; white-space: nowrap; font-weight: 800; letter-spacing: .04em;
	color: var(--c-accent-dark);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ecode__name { font-weight: 700; color: var(--c-navy); }
.ecode__cause ul { display: grid; gap: 5px; }
.ecode__cause li {
	position: relative; padding-left: 15px;
	font-size: .8125rem; color: var(--c-text-sub); line-height: 1.75;
}
.ecode__cause li::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue);
}
.ecode__none { color: #a9bccd; }

/* ---------- 拠点カード（会社概要・対応エリア）---------- */
.office { display: grid; gap: var(--sp-4); }
.office__item {
	position: relative; overflow: hidden;
	padding: var(--sp-5); background: #fff; border: 1px solid var(--c-line);
	border-radius: 14px; box-shadow: var(--shadow);
}
.office__item::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
}
.office__label {
	display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 100%);
	padding: 4px 14px; border-radius: 999px; margin-bottom: var(--sp-3);
}
.office__addr { font-size: .9375rem; color: var(--c-text); line-height: 1.9; }
.office__tel { margin-top: var(--sp-2); font-size: .875rem; color: var(--c-text-sub); line-height: 1.9; }
.office__tel a { font-weight: 800; color: var(--c-navy); text-decoration: none; }
.office__map { margin-top: var(--sp-3); font-size: .8125rem; }
.office__map a::after { content: " →"; }

/* ---------- 代表挨拶ページ ---------- */
.message--page { margin-top: var(--sp-6); }
.message__h {
	font-size: 1.125rem; color: var(--c-navy); line-height: 1.6;
	margin-top: var(--sp-7); margin-bottom: var(--sp-3);
	padding-left: var(--sp-4); border-left: 4px solid var(--c-blue);
}
.message__body .message__h:first-of-type { margin-top: var(--sp-6); }

/* 下層ページの流れ（本文幅が狭いので5列にしない） */
.flow--page { gap: var(--sp-4); }

/* 装飾なしのリンクリスト */
.relcol__list--plain { margin-top: var(--sp-3); }

/* ---------- 困りごとから選ぶ（ハブページ用）---------- */
.pick { display: grid; gap: var(--sp-3); }
.pick__item {
	padding: var(--sp-5); background: #fff; border: 1px solid var(--c-line);
	border-radius: 14px; box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pick__item:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,47,94,.16); }
.pick__q {
	position: relative; padding-left: 32px;
	font-size: 1rem; font-weight: 800; color: var(--c-navy); line-height: 1.6;
}
.pick__q::before {
	content: "?"; position: absolute; left: 0; top: 1px;
	width: 22px; height: 22px; border-radius: 50%;
	background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark)); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 800;
}
.pick__a { margin-top: var(--sp-2); font-size: .875rem; color: var(--c-text-sub); line-height: 1.9; }
.pick__more { margin-top: var(--sp-3); }
.pick__more a {
	display: inline-block; font-size: .875rem; font-weight: 700; text-decoration: none;
	border-bottom: 2px solid var(--c-blue); padding-bottom: 2px;
}
.pick__more a::after { content: " →"; }

.pick__price {
	display: inline-block; margin-top: var(--sp-2);
	font-size: 1.125rem; font-weight: 800; letter-spacing: .01em; color: var(--c-accent-dark);
}

/* セクション内の補足文 */
.sec__note { margin-top: var(--sp-4); font-size: .875rem; color: var(--c-text-sub); line-height: 1.95; }
.sec__note strong { color: var(--c-navy); }

/* セクション末尾の「くわしく見る」 */
.sec__more { margin-top: var(--sp-5); text-align: center; }
.sec__more a {
	display: inline-block; font-weight: 700; text-decoration: none;
	border-bottom: 2px solid var(--c-blue); padding-bottom: 2px;
}
.sec__more a::after { content: " →"; }

/* 下層ページに置く予約ブロック（トップの紺セクション内と違い、白地に乗るので背景を持たせる） */
.bpo__reserve--page {
	margin-top: var(--sp-7);
	background:
		radial-gradient(520px 240px at 10% 0%, rgba(0,113,188,.45), transparent 62%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
}

/* ---------- 業種カード（smilepartner_bizcards）---------- */
.bizlist { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.biz {
	position: relative; overflow: hidden;
	background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
	box-shadow: var(--shadow); scroll-margin-top: var(--sp-5);
}
.biz::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 60%, #ffd76a 100%);
}
.biz__head {
	display: flex; align-items: center; gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-5) var(--sp-4);
	border-bottom: 1px dashed var(--c-line);
}
.biz__icon {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 15px; color: #fff;
	background: linear-gradient(135deg, var(--c-navy) 0%, #12579f 60%, var(--c-blue) 100%);
	box-shadow: 0 8px 18px rgba(11,47,94,.26);
}
.biz__icon svg { width: 28px; height: 28px; }
.biz__name { font-size: 1.125rem; color: var(--c-navy); line-height: 1.5; }
.biz__lead { margin-top: 4px; font-size: .8125rem; color: var(--c-text-sub); line-height: 1.75; }
.biz__body { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
.biz__label {
	display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
	padding: 4px 14px; border-radius: 999px; margin-bottom: var(--sp-3);
}
.biz__label--case { background: var(--c-bg-soft); color: var(--c-text-sub); border: 1px solid var(--c-line); }
.biz__label--support { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%); color: #fff; }
.biz__list { display: grid; gap: var(--sp-2); }
.biz__list li {
	position: relative; padding-left: 20px; font-size: .875rem; line-height: 1.85; color: var(--c-text-sub);
}
.biz__list li::before {
	content: ""; position: absolute; left: 2px; top: .6em;
	width: 8px; height: 8px; border-radius: 50%; background: var(--c-line);
}
.biz__col:last-child .biz__list li { color: var(--c-text); }
.biz__col:last-child .biz__list li::before {
	background: linear-gradient(135deg, #ffd76a, var(--c-accent));
}
.biz__list strong { color: var(--c-navy); }

/* ---------- 実績バッジ（smilepartner_stats）---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stats__item {
	position: relative; overflow: hidden;
	padding: var(--sp-4) var(--sp-3); border-radius: 14px; text-align: center;
	background:
		radial-gradient(240px 120px at 50% 0%, rgba(0,113,188,.45), transparent 70%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	border: 1px solid rgba(255,215,106,.35);
	box-shadow: 0 10px 24px rgba(11,47,94,.22);
}
.stats__num {
	display: block; font-size: 1.4375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
	background: linear-gradient(180deg, #fff 0%, #ffd76a 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats__label { display: block; margin-top: 6px; font-size: .75rem; color: rgba(255,255,255,.88); line-height: 1.6; }

/* ---------- 補足の囲み ---------- */
.callout {
	margin-top: var(--sp-5); padding: var(--sp-5);
	border-radius: 14px; background: #fff; border: 1px solid var(--c-line);
	border-left: 5px solid var(--c-blue);
}
.callout--caution { border-left-color: var(--c-accent); background: #fffaf5; }
.callout__title { font-size: .9375rem; font-weight: 800; color: var(--c-navy); margin-bottom: var(--sp-2); }
.callout__body { font-size: .875rem; color: var(--c-text-sub); line-height: 1.95; }
.callout__body p + p { margin-top: var(--sp-3); }
/* 官公庁などの出典表記 */
.callout__src {
	margin-top: var(--sp-3); padding-top: var(--sp-2);
	border-top: 1px dotted var(--c-line);
	font-size: .75rem; color: var(--c-text-sub);
}

/* ---------- 比較表 ---------- */
.cmp {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem;
	background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
	min-width: 560px;
}
.cmp thead th {
	background: var(--c-navy); color: #fff; font-size: .8125rem; letter-spacing: .04em;
	padding: var(--sp-3) var(--sp-4); text-align: left; white-space: nowrap;
}
.cmp thead th.cmp__own {
	background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
}
.cmp tbody th, .cmp tbody td {
	padding: var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 700; color: var(--c-navy); width: 24%; white-space: nowrap; }
.cmp tbody td.cmp__own { background: var(--c-blue-pale); font-weight: 700; color: var(--c-navy); }
.cmp tbody td.cmp__own strong { color: var(--c-accent-dark); }

/* 表がはみ出す幅のときだけ「横にスクロールできます」を出す */
.scroll-hint { display: none; }
@media (max-width: 767px) {
	.scroll-hint {
		display: flex; align-items: center; gap: 6px;
		margin-bottom: var(--sp-2); font-size: .75rem; color: var(--c-text-sub);
	}
	.scroll-hint::before {
		content: ""; width: 14px; height: 8px;
		border-right: 2px solid var(--c-blue); border-top: 2px solid var(--c-blue);
		transform: rotate(45deg) translateY(-2px);
	}
	.table-wrap--cmp {
		border-right: 3px solid var(--c-blue-light); border-radius: 0 14px 14px 0;
	}
}

/* ---------- 料金表（自社料金は金枠で区別） ---------- */
.pricebox { margin-top: var(--sp-4); }
.price-table--own { border: 2px solid rgba(245,185,66,.6); }
.price-table__note { display: block; margin-top: 2px; font-size: .75rem; font-weight: 500; color: var(--c-text-sub); }

/* ---------- ページ内CTA ---------- */
.icta {
	display: grid; gap: var(--sp-4); align-items: center;
	margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-5); border-radius: 18px;
	background:
		radial-gradient(520px 240px at 10% 0%, rgba(0,113,188,.45), transparent 62%),
		linear-gradient(135deg, var(--c-navy-dark) 0%, var(--c-navy) 60%, #0f4a8a 100%);
	color: #fff; box-shadow: 0 18px 44px rgba(11,47,94,.28);
}
.icta__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.7; }
.icta__desc { margin-top: var(--sp-2); font-size: .8125rem; color: rgba(255,255,255,.85); line-height: 1.9; }
.icta__action { text-align: center; }
.icta__action .btn { width: 100%; }
.icta__tel { margin-top: var(--sp-3); font-size: .75rem; color: rgba(255,255,255,.8); }
.icta__tel a { color: #fff; font-weight: 800; font-size: 1.125rem; text-decoration: none; letter-spacing: .02em; }
.icta__tel a:hover { color: #ffd76a; }

/* ---------- 関連コラム ---------- */
.relcol {
	margin-top: var(--sp-8); padding: var(--sp-5);
	border-radius: 14px; background: var(--c-bg-soft); border: 1px solid var(--c-line);
}
.relcol__title {
	display: flex; align-items: center; gap: 10px;
	font-size: 1rem; color: var(--c-navy); margin-bottom: var(--sp-3);
}
.relcol__title::before {
	content: ""; width: 16px; height: 4px; border-radius: 2px;
	background: linear-gradient(90deg, var(--c-blue), var(--c-navy));
}
.relcol__list { display: grid; gap: var(--sp-2); }
.relcol__list a {
	position: relative; display: inline-block; padding-left: 18px;
	font-size: .875rem; color: var(--c-text); text-decoration: none; line-height: 1.8;
}
.relcol__list a::before { content: "›"; position: absolute; left: 0; color: var(--c-blue); font-weight: 700; }
.relcol__list a:hover { color: var(--c-blue); text-decoration: underline; }

/* ---------- 追加分のレスポンシブ ---------- */
@media (min-width: 768px) {
	.icards { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(4, 1fr); }
	.biz__body { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
	.pick { grid-template-columns: repeat(2, 1fr); }
	.office { grid-template-columns: repeat(2, 1fr); }
	.contactway { grid-template-columns: repeat(2, 1fr); }
	.cform { padding: var(--sp-7) var(--sp-6); }
	/* トップは5列だが、本文幅の狭い下層ページでは2列に留める */
	.flow--page { grid-template-columns: repeat(2, 1fr); }
	.toc__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-5); }
	.icta { grid-template-columns: 1fr minmax(260px, 300px); gap: var(--sp-6); padding: var(--sp-6); }
	.phero { padding: var(--sp-8) 0; }
	/* .direct は6枚（2026-08-28に洗濯機2本を追加）。768pxでは2列＝3行 */
	.direct { grid-template-columns: repeat(2, 1fr); }
	.bpo { grid-template-columns: repeat(3, 1fr); }
	.bpo__reserve { grid-template-columns: 1fr minmax(280px, 320px); gap: var(--sp-7); padding: var(--sp-6); }
	.sister { grid-template-columns: repeat(2, 1fr); }
	/* 得意エリアは全幅で目立たせる。最後の1件（その他＝全国）も全幅のまま。 */
	.areas__item--main { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.direct__link { padding: var(--sp-7) var(--sp-6) var(--sp-6); }
	/* 6枚になったので3列＝2行でちょうど埋まる */
	.direct { grid-template-columns: repeat(3, 1fr); }
	.bpo__item { padding: var(--sp-7) var(--sp-6); }
	.bpo__price-num { font-size: 1.75rem; }
	.sister__item { padding: var(--sp-7) var(--sp-6); }
}

/* =========================================================
   メディア掲載（2026-08-28 追加）
   ★番組の映像・サムネイル画像は使わない。文字と自前のSVGだけで作る。
   ========================================================= */

/* ---------- トップ：メイン画像の直下に置く帯 ---------- */
.mediabar {
	background: linear-gradient(100deg, var(--c-navy-dark), var(--c-navy) 55%, #0a3f7d);
	border-bottom: 3px solid var(--c-accent);
}
.mediabar__link {
	/* SPは3行に折り返すので、丸バッジは上端に合わせる（中央だと下に余白が空いて浮く） */
	display: grid; grid-template-columns: auto 1fr; align-items: start;
	gap: var(--sp-3); padding: var(--sp-4) 0;
	color: #fff; text-decoration: none;
}
.mediabar__badge {
	flex: none; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--c-accent); color: #fff;
	box-shadow: 0 0 0 5px rgba(236, 106, 30, .22);
}
.mediabar__badge svg { width: 18px; height: 18px; margin-left: 2px; }
.mediabar__label {
	display: inline-block; margin-right: 8px; padding: 1px 8px;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
	font-size: .625rem; font-weight: 800; letter-spacing: .12em; vertical-align: 2px;
}
.mediabar__text { font-size: .8125rem; line-height: 1.7; }
.mediabar__text strong { color: #ffd76a; }
.mediabar__more {
	grid-column: 2; justify-self: start;
	margin-top: 4px; font-size: .75rem; font-weight: 700; color: #ffd76a;
}
.mediabar__more::after { content: " ›"; }
.mediabar__link:hover .mediabar__more { text-decoration: underline; }

@media (min-width: 768px) {
	.mediabar__link { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4); }
	.mediabar__text { font-size: .9375rem; }
	.mediabar__more { grid-column: 3; margin-top: 0; justify-self: end; white-space: nowrap; }
}

/* ---------- /media/ の動画（クリックするまで読み込まない） ---------- */
.ytembed {
	position: relative; margin: var(--sp-5) 0 var(--sp-3);
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
	background: linear-gradient(135deg, var(--c-navy-dark), var(--c-navy) 60%, #0a4a8f);
	box-shadow: var(--shadow);
}
.ytembed__cover {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--sp-3); padding: var(--sp-5);
	background: none; border: 0; color: #fff; text-align: center; cursor: pointer;
	font-family: inherit;
}
.ytembed__play {
	display: grid; place-items: center;
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--c-accent); color: #fff;
	box-shadow: 0 0 0 8px rgba(236, 106, 30, .2);
	transition: transform .2s ease;
}
.ytembed__play svg { width: 26px; height: 26px; margin-left: 3px; }
.ytembed__cover:hover .ytembed__play { transform: scale(1.06); }
.ytembed__label { display: grid; gap: 4px; }
.ytembed__outlet { font-size: .75rem; font-weight: 700; color: #ffd76a; letter-spacing: .04em; }
.ytembed__title { font-size: .9375rem; font-weight: 800; line-height: 1.6; }
.ytembed__note { font-size: .6875rem; color: rgba(255, 255, 255, .75); }
.ytembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytembed__credit { font-size: .75rem; color: var(--c-text-sub); line-height: 1.8; }
.ytembed__credit a { color: var(--c-blue); }

@media (min-width: 768px) {
	.ytembed__play { width: 72px; height: 72px; }
	.ytembed__play svg { width: 32px; height: 32px; }
	.ytembed__title { font-size: 1.125rem; }
	.ytembed__outlet { font-size: .8125rem; }
}

/* ---------- 掲載の一覧 ---------- */
.medialist { display: grid; gap: var(--sp-4); }
.mediaitem {
	display: grid; gap: var(--sp-2);
	padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: 14px;
	background: #fff; box-shadow: var(--shadow);
}
.mediaitem__date {
	display: inline-block; justify-self: start;
	padding: 2px 10px; border-radius: 999px;
	background: var(--c-blue-light); color: var(--c-navy);
	font-size: .75rem; font-weight: 800;
}
.mediaitem__outlet { font-size: .8125rem; font-weight: 700; color: var(--c-blue); }
.mediaitem__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.6; margin: 0; }
.mediaitem__desc { font-size: .875rem; line-height: 1.9; margin: 0; }
.mediaitem__links { display: grid; gap: 6px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.mediaitem__links a {
	position: relative; display: inline-block; padding-left: 18px;
	font-size: .875rem; color: var(--c-text); text-decoration: none;
}
.mediaitem__links a::before { content: "›"; position: absolute; left: 0; color: var(--c-blue); font-weight: 700; }
.mediaitem__links a:hover { color: var(--c-blue); text-decoration: underline; }
.mediaitem__note { font-size: .75rem; color: var(--c-text-sub); margin: 0; }

@media (min-width: 768px) {
	.mediaitem { grid-template-columns: 120px 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; }
	.mediaitem__body { display: grid; gap: var(--sp-2); }
}

/* ----------------------------------------------------------------------
   コラム本文に直接埋め込まれている問い合わせフォーム
   ★★2026-09-04 追加。旧サイトから引き継ぐ本文HTMLの中に <form> が入っている
     （reibou-jositu / genintotaisakuhou / danbo-jyunbi の3本＝アクセス上位そのもの）。
     送信先は本番ルートの mail02.php。class は旧テーマの .input / .submit で、
     新テーマに定義が無く**素のHTMLのまま表示されていた**ので、ここで最低限を当てる。
   ★本文は触らない（クライアントが書いたもの）。CSSだけで見た目を成立させる。
   ---------------------------------------------------------------------- */
.entry form { margin-top: var(--sp-5); }

/* .entry table は横スクロール指定だが、フォームの表は入力欄なのでスクロールさせない */
.entry form table { display: table; width: 100%; table-layout: fixed; overflow: visible; }
.entry form th { width: 34%; vertical-align: middle; }

.entry .input {
	width: 100%; padding: 12px var(--sp-3);
	font-family: inherit; font-size: 1rem; color: var(--c-text); line-height: 1.6;
	background: #fff; border: 1px solid var(--c-line); border-radius: 8px;
}
.entry .input:focus {
	outline: none; border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(0,113,188,.16);
}
.entry textarea.input { resize: vertical; min-height: 140px; }

.entry .submit {
	display: inline-block; min-width: 260px; padding: 14px var(--sp-6);
	font-family: inherit; font-size: 1rem; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, #f2803a 0%, var(--c-accent) 45%, var(--c-accent-dark) 100%);
	border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: 0 8px 20px rgba(236, 106, 30, .3);
}
.entry .submit:hover { background: var(--c-accent-dark); }

/* スマホでは表を積み上げる（横スクロールさせない＝入力できなくなるため） */
@media (max-width: 599px) {
	.entry form table,
	.entry form tbody,
	.entry form tr,
	.entry form th,
	.entry form td { display: block; width: 100%; }
	.entry form th { border-bottom: 0; }
	.entry form td { border-top: 0; }
	.entry .submit { width: 100%; min-width: 0; }
}

/* ----------------------------------------------------------------------
   スマホ固定バー分の余白を確実に確保する
   ★★2026-09-05 発見。WordPress が head に出力する**インラインのグローバルスタイル**
     （`body{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}`）が、
     このCSSの `body{padding-bottom:68px}` と**同じ詳細度**でぶつかっていた。
     どちらが勝つかは読み込み順で決まるため、**ページによって 68px / 64px / 0px と
     バラバラになっていた**（0px のページは、最下部の要素が固定バーに隠れうる）。
   ★セレクタを `html body` にして詳細度を1つ上げ、テーマの指定が必ず勝つようにする。
     グローバルスタイル自体は消さない（ブロックの見た目を変えないため）。
   ---------------------------------------------------------------------- */
html body { padding-bottom: 68px; }
@media (min-width: 1024px) {
	html body { padding-bottom: 0; }
}

/* ==========================================================================
   旧サイトから引き継いだ記事本文のレイアウト（2026-09-05 追加）

   経緯: 旧テーマ(fake_tcd074)時代の記事は、表組み（table）とテーマ独自クラスで
   段組みを作っていた。テーマを差し替えたことでそのCSSが失われ、
   「レイアウト用のtable」が新テーマの“データ表”スタイル（罫線つき）で描かれて
   崩れて見えていた。記事本文は触らず、ここで受け止める。

   対象（2026-09-05 に全281記事を機械調査した実数）:
     table.strength            39本 … 画像＋見出し＋本文の特徴グリッド（1行1〜3セル）
     table.strength.strength04 11本 … th=画像／td=本文 の左右組み
     table.onayamai02          46本 … 1セルにポイント列挙を入れた囲み
     table[style*="border: none"] 46本 … 電話/問合せ/LINE/Instagram のバナー4枚
     .link_button              45本 … 旧テーマの黒ボタン（CSSが無く素のリンクに見えていた）
   ※ class付きでない“本物の表”は1本だけあり、そちらは既定の表スタイルのまま。
   ========================================================================== */

/* --- 共通: レイアウト目的のtableは「表」として飾らない --- */
.entry table.strength,
.entry table.onayamai02,
.entry table[style*="border: none"] {
	display: block; width: 100%; border: 0; overflow: visible; font-size: inherit;
}
.entry table.strength td, .entry table.strength th,
.entry table.onayamai02 td, .entry table.onayamai02 th,
.entry table[style*="border: none"] td {
	border: 0; padding: 0; background: none; vertical-align: top;
}

/* --- 特徴グリッド（strength） ---
   行(tr)の区切りを無視して全セルを1つのグリッドに流す。
   旧記事には「1行に2セル」と「1行に1セル」が混在していて、素のtableだと
   セルが足りない行に“空の列”ができて破綻していたため。 */
.entry table.strength { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.entry table.strength > tbody, .entry table.strength > tbody > tr, .entry table.strength > tr { display: contents; }
.entry table.strength td { display: flex; flex-direction: column; }
.entry table.strength td > div:first-child { margin: 0 0 var(--sp-3); }
.entry table.strength img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.entry table.strength h3 { margin-top: 0; font-size: 1rem; }
.entry table.strength p { font-size: .9375rem; line-height: 1.95; }

/* --- 画像左・本文右（strength04）---
   画像が縦に大きいと本文との間に空きができるので、画像列は狭め・横長にして行を詰める。 */
.entry table.strength.strength04 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-5); align-items: start; }
.entry table.strength.strength04 th { display: block; }
.entry table.strength.strength04 th img { aspect-ratio: 3 / 2; }
.entry table.strength.strength04 h3 { margin-top: 0; }

/* --- ポイント囲み（onayamai02）--- */
.entry table.onayamai02 {
	background: var(--c-blue-pale); border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-blue); border-radius: var(--radius); padding: var(--sp-5);
}
.entry table.onayamai02 td { display: block; }
.entry table.onayamai02 ul { list-style: none; padding-left: 0; margin: 0; }
.entry table.onayamai02 li + li { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.entry table.onayamai02 li > b { display: block; color: var(--c-navy); font-size: 1rem; margin-bottom: var(--sp-2); }
.entry table.onayamai02 li > p { margin: 0; font-size: .9375rem; line-height: 1.95; }

/* --- バナー4枚（電話・問合せ・LINE・Instagram）--- */
.entry table[style*="border: none"] {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3); max-width: 720px; margin-inline: auto;
}
.entry table[style*="border: none"] > tbody,
.entry table[style*="border: none"] > tbody > tr,
.entry table[style*="border: none"] > tr { display: contents; }
.entry table[style*="border: none"] td { display: block; }
.entry table[style*="border: none"] a { display: block; }
.entry table[style*="border: none"] img {
	width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: contain; border-radius: 6px;
}

/* --- 旧テーマのボタン（.link_button）--- */
.entry .link_button { text-align: center; margin: var(--sp-5) 0; }
.entry .link_button a {
	display: inline-block; min-width: 260px; padding: 15px 28px;
	background: var(--c-accent); color: #fff; border-radius: 999px;
	font-weight: 700; text-decoration: none; box-shadow: var(--shadow);
}
.entry .link_button a:hover { background: var(--c-accent-dark); color: #fff; }
.entry .index_content1 { width: auto; margin: 0; padding: 0; }

/* --- 旧テーマの見出し（.priceh4）--- */
.entry h4.priceh4 {
	margin-top: var(--sp-6); padding-left: var(--sp-3);
	border-left: 4px solid var(--c-blue); font-size: 1.0625rem;
}

/* --- タブレット以下は1カラムに落とす --- */
@media (max-width: 767px) {
	.entry table.strength,
	.entry table.strength.strength04,
	.entry table[style*="border: none"] { grid-template-columns: minmax(0, 1fr); }
	.entry table.strength { gap: var(--sp-6); }
	.entry table.onayamai02 { padding: var(--sp-4); }
	.entry .link_button a { min-width: 0; width: 100%; }
}

/* --- 記事本文が横スクロールを起こさないための保険（2026-09-05）---
   ・Word貼り付け由来の <span>&nbsp;</span> が行末で数px はみ出していた（1記事）
   ・Instagram等の埋め込みiframeは自前の幅を持つため上限をかける */
/* 本文の中身が何をしても、ページ全体を横スクロールさせない。
   overflow-x:clip はスクロールコンテナを作らないので、position:sticky等を壊さない。 */
.entry { overflow-wrap: anywhere; overflow-x: clip; }
.entry iframe, .entry embed, .entry object, .entry video { max-width: 100%; }
/* Instagram埋め込み: 元の max-width:540px は活かしたまま、狭い画面での min-width だけ外す。
   （max-width を 100% で上書きするとPCで iframe が横に伸びて破綻するので触らない） */
.entry .instagram-media { min-width: 0 !important; margin-inline: auto !important; }
/* 埋め込みスクリプトが差し込むiframeは、幅を自前で決めてコンテナからはみ出すことがある */
.entry iframe.instagram-media { max-width: 100% !important; width: 100% !important; }
/* 読み込み中だけ見えている素のblockquote（スクリプトがclassを外すのでdata属性で狙う） */
.entry blockquote[data-instgrm-permalink] { overflow: hidden; }
/* 埋め込みを包む箱（inc/template-tags.php の smilepartner_wrap_embeds が付ける）。
   スクリプトが幅をインライン!importantで決めてくるので、ここで確実に止める。 */
/* ★position:relative が要る。埋め込みスクリプトは計測中 iframe を position:absolute にするため、
   囲いが「配置の基準」になっていないと overflow の外へ逃げてしまう（2026-09-05 実測）。 */
.entry .sp-embed { position: relative; overflow: hidden; max-width: 100%; }