@charset "UTF-8";
/* ==========================================================
   kawai-sougi-map.css — トップ（FV・地図・各セクション）と地域一覧（2026-11-11）
   色はサイトの変数（--color_main #113883 など）と、試作 sougi-map-prototype.html の値を使う
   ========================================================== */
.sr-top, .sr-finder, .sr-arealist, .sr-sec { --sr-main: var(--color_main, #113883); --sr-htag: var(--color_htag, #011f58); --sr-red: var(--color_deep01, #ce4a2f); --sr-beige: #F8F5EA; --sr-hd: #0d1a34; --sr-line: #e3e1da; }

/* ---------- 共通の部品 ---------- */
.sr-pill { position: relative; display: inline-block; padding: 5px 16px; border-radius: 999px; background: var(--sr-main); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.sr-pill::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--sr-main); }
.sr-red { color: var(--sr-red); }
.sr-mk { background: linear-gradient(transparent 58%, #fff1a0 58%); font-weight: 700; }

/* ---------- FV ---------- */
.sr-top { margin-bottom: 0; }
.post_content .sr-pr { max-width: 1200px; margin: 0 calc(50% - 50vw) !important; padding: 4px max(48px, calc(50vw - 552px)) !important; font-size: 11px; color: #7a6f5c; }
.sr-fv { margin: 0 calc(50% - 50vw); padding: 22px 0 26px; background: var(--sr-beige); }
.sr-fv__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 48px; }
#body_wrap .post_content .sr-fv__ttl { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sr-htag) !important; font-size: 32px !important; line-height: 1.45 !important; font-weight: 700; letter-spacing: .06em; }
#body_wrap .post_content .sr-fv__ttl::before, #body_wrap .post_content .sr-fv__ttl::after { display: none !important; }
.post_content .sr-fv__lead { margin: 4px 0 0 !important; font-size: 15px; line-height: 1.8; }
.post_content .sr-fv__chips { display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; flex: 0 0 auto; }
.post_content .sr-fv__chips li { margin: 0 !important; padding: 0 !important; }
.post_content .sr-fv__chips li::before { display: none !important; }
.sr-fv__chips li > a, .sr-fv__chips li > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(56,43,19,.08); color: var(--sr-hd); font-size: 13px; font-weight: 700; text-decoration: none; }
.sr-fv__chips li > a::before, .sr-fv__chips li > span::before { content: "✓"; color: var(--sr-main); }
.sr-fv__lead .sp_only, .sr-fv__ttl .sp_only { display: none; }

/* ---------- 地図から探す ---------- */
.sr-finder { position: relative; display: grid; grid-template-columns: minmax(360px, 46%) 1fr; margin: 20px 0 8px; background: #fff; border: 1px solid var(--sr-line); border-radius: 16px; box-shadow: 0 4px 16px rgba(17,56,131,.06); color: var(--color_text, #382b13); }
.sr-finder__mapcol { display: flex; flex-direction: column; padding: 20px 22px 10px; border-right: 1px solid var(--sr-line); }
.post_content .sr-finder__ttl { display: flex; align-items: center; gap: 6px; margin: 0 !important; color: var(--sr-htag); font-size: 19px; font-weight: 700; line-height: 1.4; }
.sr-finder__ttl::before { content: ""; width: 10px; height: 14px; background: var(--sr-red); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.post_content .sr-finder__note { margin: 4px 0 0 16px !important; color: #8a806e; font-size: 12px; }
.sr-finder__map { height: 384px; margin-top: 2px; }
.sr-jmap { display: block; width: 100%; height: 100%; }
.sr-jmap .sr-pref { fill: var(--rc); stroke: #fff; stroke-width: .6; cursor: pointer; transition: opacity .15s, filter .15s; }
.sr-jmap .sr-pref.is-soon { fill: #e6e3dc; cursor: default; }
.sr-jmap .sr-region { opacity: .55; transition: opacity .15s; cursor: pointer; }
.sr-jmap .sr-region.is-on { opacity: 1; }
.sr-jmap .sr-region.is-on .sr-pref:not(.is-soon):hover { filter: brightness(.88); }
.sr-jmap .sr-leader { stroke: #9aa3b5; stroke-width: .7; }
.sr-jmap .sr-dot { fill: var(--sr-main); }
.sr-jmap .sr-lbox { fill: #fff; stroke: #c9cfdb; stroke-width: .7; }
.sr-jmap .sr-ltxt { font-size: 11px; font-weight: 700; fill: var(--sr-hd); letter-spacing: .04em; }
.sr-jmap .sr-lbl { cursor: pointer; }
.sr-jmap .sr-okitxt { font-size: 8px; fill: #8a93a6; }
.sr-jmap .sr-lbl.is-on .sr-lbox { fill: var(--sr-main); stroke: var(--sr-main); }
.sr-jmap .sr-lbl.is-on .sr-ltxt { fill: #fff; }
.sr-finder__panel { padding: 22px 26px 34px; }
.post_content .sr-finder__ptitle { margin: 22px 0 10px !important; color: var(--sr-htag); font-size: 15px; font-weight: 700; }
.post_content .sr-finder__ptitle.-first { margin-top: 0 !important; }
.sr-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sr-tab { padding: 10px 4px; border: 0; border-radius: 8px; background: rgba(17,56,131,.07); color: var(--sr-hd); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.sr-tab.is-on { background: var(--sr-main); color: #fff; }
.sr-tab:focus-visible, .sr-plist a:focus-visible { outline: 3px solid #fff1a0; outline-offset: 2px; }
.post_content .sr-plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.post_content .sr-plist li { margin: 0 !important; padding: 0 !important; }
.post_content .sr-plist li::before { display: none !important; }
.sr-plist a, .sr-plist .is-soon { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid #d5d8e0; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 #d5d8e0; color: var(--sr-hd); font-size: 14px; font-weight: 700; text-decoration: none; }
.sr-plist a::after { content: "›"; color: var(--sr-main); font-size: 1.3em; line-height: 1; }
.sr-plist .is-soon { background: #f3f2ef; color: #a59f93; box-shadow: none; cursor: default; }
.sr-plist .is-soon small, .sr-arealist .is-soon small { font-size: .72em; color: #a59f93; font-weight: 700; }
.post_content .sr-finder__foot { margin: 16px 0 0 !important; color: #8a806e; font-size: 12px; }
.sr-finder__foot a { margin-left: 1em; color: var(--sr-main); font-weight: 700; text-decoration: none; }
.sr-finder__foot a::after { content: " ›"; }
.sr-finder__credit { position: absolute; right: 10px; bottom: 6px; color: #9aa3b5; font-size: 9px; letter-spacing: 0; }

/* 広い画面では、地図のカードを FV と同じ幅（1104px）にする（記事の幅より広げる） */
@media (min-width: 1160px) {
	.sr-finder { grid-template-columns: 520px 1fr; width: 1104px; margin-left: calc(50% - 552px); }
}

/* ---------- トップの各セクション ---------- */
.sr-sec { margin: 56px 0 0; }
.post_content .sr-sec__label { margin: 0 0 14px !important; text-align: center; }
#body_wrap .post_content .sr-sec__ttl { margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sr-htag) !important; font-size: 24px !important; text-align: center; line-height: 1.5; }
#body_wrap .post_content .sr-sec__ttl::before, #body_wrap .post_content .sr-sec__ttl::after { display: none !important; }
.post_content .sr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.post_content .sr-cards li { margin: 0 !important; padding: 0 !important; }
.post_content .sr-cards li::before { display: none !important; }
.sr-card { display: block; height: 100%; padding: 18px 18px 16px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(56,43,19,.08); color: var(--color_text, #382b13); text-decoration: none; }
.sr-card__ttl { display: block; margin-bottom: 6px; color: var(--sr-htag); font-weight: 700; line-height: 1.5; }
.sr-card__txt { display: block; font-size: 13px; line-height: 1.7; }
.sr-card__more { display: block; margin-top: 8px; color: var(--sr-main); font-size: 13px; font-weight: 700; }
.sr-card__more::after { content: " ›"; }
.sr-box { padding: 20px 22px; border-radius: 12px; background: var(--sr-beige); }
.post_content .sr-box p { margin: 0 0 .6em !important; }
.sr-more { text-align: right; font-weight: 700; }
.sr-more a { color: var(--sr-main); text-decoration: none; }
.sr-more a::after { content: " ›"; }

/* ---------- 47 都道府県の一覧 ---------- */
.sr-finder + .sr-arealist { margin-top: 40px; }
.sr-arealist__region { margin: 0 0 22px; scroll-margin-top: 90px; }
#body_wrap .post_content .sr-arealist__ttl { margin: 0 0 10px !important; padding: 0 0 0 12px !important; border: 0 !important; border-left: 4px solid var(--sr-main) !important; background: none !important; color: var(--sr-htag) !important; font-size: 17px !important; line-height: 1.5; }
#body_wrap .post_content .sr-arealist__ttl::before, #body_wrap .post_content .sr-arealist__ttl::after { display: none !important; }
.post_content .sr-arealist__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.post_content .sr-arealist__list li { margin: 0 !important; padding: 0 !important; }
.post_content .sr-arealist__list li::before { display: none !important; }
.sr-arealist__list a, .sr-arealist__list .is-soon { display: inline-block; padding: 6px 12px; border: 1px solid #d5d8e0; border-radius: 8px; background: #fff; color: var(--sr-hd); font-size: 14px; font-weight: 700; text-decoration: none; }
.sr-arealist__list .is-soon { background: #f3f2ef; color: #a59f93; }
.sr-arealist__list .is-soon small { margin-left: .4em; }

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 959px) {
	.sr-finder { grid-template-columns: 1fr; }
	.sr-finder__mapcol { border-right: 0; padding: 12px 12px 0; }
	.sr-finder__map { height: 236px; }
	.sr-jmap .sr-lbl { display: none; } /* スマホは地方単位で押す。ラベルは出さず、タブで選ぶ */
	.sr-finder__panel { padding: 6px 12px 30px; }
	.post_content .sr-finder__ptitle.-first { display: none; }
	.post_content .sr-finder__ptitle { margin: 12px 0 8px !important; font-size: 13px; }
	.sr-tabs { gap: 6px; }
	.sr-tab { padding: 8px 2px; font-size: 11.5px; }
	.post_content .sr-plist { grid-template-columns: repeat(2, 1fr); gap: 7px; }
	.sr-plist a, .sr-plist .is-soon { padding: 10px; font-size: 13px; }
	.sr-fv { padding: 14px 0 16px; text-align: center; }
	.sr-fv__inner { display: block; padding: 0 16px; }
	.post_content .sr-pr { padding: 3px 16px 4px !important; }
	#body_wrap .post_content .sr-fv__ttl { margin-top: 13px !important; font-size: 22px !important; line-height: 1.5 !important; }
	.post_content .sr-fv__lead { font-size: 12.5px; line-height: 1.75; }
	.sr-fv__lead .sp_only, .sr-fv__ttl .sp_only { display: inline; }
	.sr-fv__lead .pc_only { display: none; }
	.post_content .sr-fv__chips { display: none; }
	.sr-pill { font-size: 11.5px; padding: 4px 13px; }
	.post_content .sr-cards { grid-template-columns: 1fr; }
	#body_wrap .post_content .sr-sec__ttl { font-size: 20px !important; }
	.sr-sec { margin-top: 40px; }
}

/* ==========================================================
   デザイン案 2（トップの FV より下）2026-11-11
   ========================================================== */
.sr-steps, .sr-wide, .sr-rows, .sr-arealist.-cards, .sr-box.-icon { --sr-main: var(--color_main, #113883); --sr-htag: var(--color_htag, #011f58); --sr-beige: #F8F5EA; --sr-line: #e3e1da; }
.sr-ico { width: 44px; height: 44px; flex: 0 0 auto; }
.sr-ico, .sr-ico * { fill: none !important; stroke: var(--color_main, #113883) !important; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* SWELL が svg の中の塗りを付けるので線だけにする */

/* はじめての方へ（生成りの帯・3 ステップ） */
.sr-steps { margin: 40px calc(50% - 50vw) 0; padding: 28px max(16px, calc(50vw - 552px)) 32px; background: var(--sr-beige); }
#body_wrap .post_content .sr-steps__ttl { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--sr-htag) !important; font-size: 22px !important; text-align: center; letter-spacing: .06em; }
#body_wrap .post_content .sr-steps__ttl::before, #body_wrap .post_content .sr-steps__ttl::after { display: none !important; }
.sr-steps__ttl span { background: linear-gradient(transparent 62%, #fff1a0 62%); }
.post_content .sr-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none; }
.post_content .sr-step { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 0 !important; padding: 18px 16px !important; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(56,43,19,.06); }
.post_content .sr-step::before { display: none !important; }
.sr-step + .sr-step::after { content: "→"; position: absolute; left: -29px; top: 50%; transform: translateY(-50%); color: var(--sr-main); font-size: 22px; font-weight: 700; }
.post_content .sr-step__ttl { display: flex; align-items: center; gap: 6px; margin: 0 0 4px !important; color: var(--sr-htag); font-size: 15px; font-weight: 700; line-height: 1.4; }
.post_content .sr-step__txt { margin: 0 !important; font-size: 13px; line-height: 1.7; }
.sr-step__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--sr-main); color: #fff; font-size: 12px; font-weight: 700; }

/* 吹き出しラベルの見出し（h2） */
#body_wrap .post_content .sr-sec__pill { position: relative; display: table; margin: 0 auto 18px !important; padding: 5px 18px !important; border: 0 !important; border-radius: 999px; background: var(--color_main, #113883) !important; color: #fff !important; font-size: 14px !important; line-height: 1.5; letter-spacing: .04em; }
#body_wrap .post_content .sr-sec__pill::before { display: none !important; }
#body_wrap .post_content .sr-sec__pill::after { content: "" !important; display: block !important; position: absolute; left: 50%; bottom: -7px; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--color_main, #113883); background: none !important; }

/* 調査方法（横長のカードに 3 つの指標） */
.sr-wide { padding: 22px 24px 14px; background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; box-shadow: 0 2px 10px rgba(56,43,19,.05); }
.post_content .sr-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.post_content .sr-points > li { margin: 0 !important; padding: 0 18px !important; font-size: 13px; line-height: 1.7; }
.post_content .sr-points > li::before { display: none !important; }
.post_content .sr-points > li + li { border-left: 1px solid var(--sr-line); }
.post_content .sr-points p { margin: 0 !important; }
.post_content .sr-points__ttl { display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; color: var(--sr-htag); font-size: 14px; font-weight: 700; }

/* 葬儀の基礎知識（アイコン付きの行） */
.post_content .sr-rows { margin: 0 !important; padding: 0 !important; list-style: none !important; background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; overflow: hidden; }
.post_content .sr-rows > li { margin: 0 !important; padding: 0 !important; }
.post_content .sr-rows > li::before { display: none !important; }
.sr-rows > li + li { border-top: 1px solid var(--sr-line); }
.sr-rows a { display: flex; align-items: center; gap: 14px; padding: 12px 18px; color: var(--sr-htag); font-weight: 700; text-decoration: none; }
.sr-rows a::after { content: "›"; margin-left: auto; color: var(--sr-main); font-size: 1.4em; line-height: 1; }
.sr-rows a:hover { background: #faf9f5; }
.sr-rows .sr-ico { width: 28px; height: 28px; }

/* 47 都道府県（地方ごとのカード、2 列） */
.sr-arealist.-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sr-arealist.-cards .sr-arealist__region { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; }
#body_wrap .post_content .sr-arealist.-cards .sr-arealist__ttl { flex: 0 0 6.5em; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; font-size: 14px !important; }
.sr-arealist.-cards .sr-arealist__list { gap: 6px; }
.sr-arealist.-cards .sr-arealist__list a, .sr-arealist.-cards .sr-arealist__list .is-soon { padding: 3px 9px; font-size: 13px; }

/* 運営者について（アイコン付き） */
.sr-box.-icon { display: flex; gap: 18px; align-items: center; }
.sr-box.-icon .sr-ico { width: 56px; height: 56px; }
.sr-box.-icon > div { flex: 1; }

@media (max-width: 959px) {
	.sr-steps { margin-top: 28px; padding: 20px 16px 24px; }
	#body_wrap .post_content .sr-steps__ttl { font-size: 18px !important; }
	.post_content .sr-steps__list { grid-template-columns: 1fr; gap: 22px; }
	.sr-step + .sr-step::after { content: "↓"; left: 50%; top: -21px; transform: translateX(-50%); font-size: 16px; }
	.post_content .sr-points { grid-template-columns: 1fr; gap: 12px; }
	.post_content .sr-points > li { padding: 0 !important; }
	.post_content .sr-points > li + li { border-left: 0; border-top: 1px solid var(--sr-line); padding-top: 12px !important; }
	.sr-wide { padding: 16px 14px 10px; }
	.sr-arealist.-cards { grid-template-columns: 1fr; }
	.sr-box.-icon { flex-direction: column; text-align: left; align-items: flex-start; }
}