/* =============================================================
   カビ取り業者ナビ トップページ（templates/top.php）専用スタイル
   - プレフィックス .top2-
   - custom.css の .kabi-* とは独立。body.kabi-top2 のときだけ効く
   - 方針: 角丸は控えめ（6〜12px）/ 影より 1px の線 / 紫・グロー・派手なグラデ禁止 /
           写真は実写 / 数字は Outfit（自前ホスト）、文字は端末のゴシック体（2026-10-10 に Zen Kaku Gothic New を外した。速度のため）
   ============================================================= */

:root {
	--t-navy:      #0e2b4d;
	--t-navy-2:    #143a66;
	--t-blue:      #1a6fbd;
	--t-blue-deep: #0f4f8f;
	--t-cyan:      #2fa8e0;
	--t-sky:       #eef5fb;
	--t-sky-2:     #dbe9f5;
	--t-ink:       #1c2733;
	--t-muted:     #5f6f80;
	--t-line:      #d8e3ee;
	--t-white:     #ffffff;
	--t-star:      #f2b01e;
	--t-font:      "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--t-font-num:  "Outfit", "Helvetica Neue", Arial, sans-serif;
	--t-container: 1160px;
	--t-radius:    10px;
	--t-radius-s:  6px;
	--t-header-h:  96px;
}

/* ---------- SWELL / custom.css の打ち消し ---------- */
.kabi-top2 {
	text-align: left;
	background: var(--t-white);
	color: var(--t-ink);
	font-family: var(--t-font);
	font-size: 15px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
.kabi-top2 .l-content,
.kabi-top2 .l-mainContent,
.kabi-top2 #content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.kabi-top2 .kabi-footer,
.kabi-top2 .l-footer,
.kabi-top2 #fix_bottom_menu,
.kabi-top2 .p-fixBtnWrap {
	display: none !important;
}
/* custom.css の body{overflow-x:hidden} は body をスクロールコンテナにして sticky ヘッダーを殺すので clip に置き換える
   （top.css はこのテンプレートでしか読み込まれない） */
body {
	overflow: visible !important;
	overflow-x: clip !important;
}
body.top2-drawer-open {
	overflow: hidden !important;
}

.top2,
.top2 * {
	box-sizing: border-box;
}
.top2 {
	text-align: left;
	overflow-x: clip;
}
.top2 h1, .top2 h2, .top2 h3, .top2 h4 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--t-font);
	line-height: 1.4;
	color: var(--t-navy);
}
.top2 h2::before, .top2 h3::before { display: none; }
.top2 p { margin: 0; }
.top2 ul, .top2 ol { list-style: none; margin: 0; padding: 0; }
.top2 a { color: inherit; text-decoration: none; }
.top2 img { display: block; max-width: 100%; height: auto; }
.top2 i[class^="fa-"] { line-height: 1; }

.top2-num {
	font-family: var(--t-font-num);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.top2-container {
	max-width: var(--t-container);
	margin: 0 auto;
	padding: 0 20px;
}
.top2-br-sp { display: none; }
@media (max-width: 767px) {
	.top2-br-sp { display: inline; }
}

/* chevron（→ や › を疑似要素ではなく細い線で） */
.top2-chev {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
	opacity: .7;
}
.top2-arrow {
	display: inline-block;
	margin-left: 8px;
	font-family: var(--t-font-num);
	transition: transform .2s;
}
a:hover .top2-arrow, button:hover .top2-arrow { transform: translateX(4px); }

/* ---------- ボタン ---------- */
.top2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	transition: background .2s, color .2s, border-color .2s;
	cursor: pointer;
}
.top2 .top2-btn--outline {
	border: 1.5px solid var(--t-blue);
	color: var(--t-blue);
	background: var(--t-white);
}
.top2 .top2-btn--outline:hover { background: var(--t-blue); color: #fff; }
.top2 .top2-btn--white {
	background: var(--t-white);
	color: var(--t-navy);
	min-height: 60px;
	font-size: 17px;
	padding: 0 40px;
}
.top2 .top2-btn--white:hover { background: var(--t-sky); color: var(--t-navy); }

/* =============================================================
   ヒーロー（支給ビジュアル1枚）
   ============================================================= */
.top2-hero {
	position: relative;
	/* 画像の両端の色に合わせた薄い水色（1440px 超のときに見える） */
	background: linear-gradient(90deg, #dfeefb, #eef6fd 50%, #dfeefb);
}
.top2-hero__visual {
	position: relative;
	display: block;
	line-height: 0;
	max-width: 1920px; /* 元画像 1920px を拡大しない */
	margin: 0 auto;
}
.top2-hero__visual img {
	width: 100%;
	height: auto;
	display: block;
}
/* 検索カード */
.top2-search {
	max-width: var(--t-container);
	margin: -20px auto 0; /* 画像下端のバッジに被らない程度に重ねる */
	padding: 0 20px 56px;
	position: relative;
	z-index: 2;
}
.top2-search__form {
	background: var(--t-white);
	color: var(--t-ink);
	border-radius: var(--t-radius);
	padding: 24px;
	box-shadow: 0 18px 40px -20px rgba(10, 33, 60, .45), 0 0 0 1px var(--t-line);
	max-width: 900px;
	margin: 0 auto;
}
.top2 .top2-search__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 18px;
	font-weight: 900;
	color: var(--t-navy);
	margin-bottom: 16px;
}
.top2-search__title i { color: var(--t-blue); font-size: 15px; }
.top2-search__title small {
	font-size: 12px;
	font-weight: 500;
	color: var(--t-muted);
}
.top2-search__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.top2-field { display: block; }
.top2-field__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--t-navy);
	margin-bottom: 6px;
}
.top2-field select {
	width: 100%;
	height: 50px;
	padding: 0 40px 0 14px;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius-s);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6f80' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
	font: inherit;
	font-size: 15px;
	color: var(--t-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.top2-field select:focus { outline: 2px solid var(--t-cyan); outline-offset: 1px; border-color: var(--t-blue); }
.top2-search__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	margin-top: 16px;
	border: 0;
	border-radius: 999px;
	background: var(--t-blue);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
}
.top2-search__btn:hover { background: var(--t-blue-deep); }
.top2-search__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 12px;
	color: var(--t-muted);
}
.top2-search__popular > span { margin-right: 4px; }
.top2-search__popular a {
	padding: 6px 14px;
	border: 1px solid var(--t-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--t-navy);
	transition: background .2s, border-color .2s;
}
.top2-search__popular a:hover { background: var(--t-sky); border-color: var(--t-sky-2); }

@media (max-width: 767px) {
	.top2-search { margin-top: 14px; padding-bottom: 32px; }
	.top2-search__form { padding: 18px 16px; }
	.top2 .top2-search__title { font-size: 16px; }
	.top2-search__fields { grid-template-columns: 1fr; gap: 12px; }
	.top2-search__btn { height: 52px; font-size: 16px; }
}

/* =============================================================
   セクション共通
   ============================================================= */
.top2-section {
	padding: 72px 0;
}
.top2-section__head {
	text-align: center;
	margin-bottom: 40px;
}
.top2-section__title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 900;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.top2-section__title b {
	font-family: var(--t-font-num);
	font-size: 1.35em;
	color: var(--t-blue);
	line-height: 1;
}
.top2-section__title i { color: var(--t-blue); font-size: .85em; }
.top2-section__title--left { display: block; text-align: left; }
.top2-section__lead {
	margin-top: 10px;
	font-size: 14px;
	color: var(--t-muted);
}
@media (max-width: 767px) {
	.top2-section { padding: 48px 0; }
	.top2-section__head { margin-bottom: 24px; }
	.top2-section__title { display: block; }
	.top2-section__title i { margin-right: 6px; }
	.top2-section__lead { font-size: 13px; }
}

/* =============================================================
   今日のカビ予報（天気予報風の2パネル）
   ============================================================= */
.top2-forecast {
	/* 空と葉の横長背景（1920×700）。下方向は白へフェードさせてタイルの可読性を確保 */
	background-color: #f6fafe;
	background-image:
		linear-gradient(180deg, rgba(246,250,254,0) 0, rgba(246,250,254,0) 260px, rgba(246,250,254,.85) 520px, #ffffff 720px),
		url("../img/forecast-bg.jpg");
	background-image:
		linear-gradient(180deg, rgba(246,250,254,0) 0, rgba(246,250,254,0) 260px, rgba(246,250,254,.85) 520px, #ffffff 720px),
		image-set(url("../img/forecast-bg.webp") type("image/webp"), url("../img/forecast-bg.jpg") type("image/jpeg"));
	background-repeat: no-repeat;
	background-position: center top, center top;
	background-size: 100% 100%, 100% auto;
	padding-top: 56px;
}
.top2-forecast__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 600px);
	gap: 24px;
	align-items: start;
	margin-bottom: 26px;
}
.top2-forecast__titlebox { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.top2-forecast__titlebox > div { min-width: 0; }
.top2-forecast__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 16px;
	background: #fff; color: var(--t-blue); font-size: 30px;
	border: 1px solid var(--t-line); flex-shrink: 0;
}
.top2 .top2-forecast__title { display: block; text-align: left; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; white-space: nowrap; }
.top2-forecast__date { font-size: .5em; font-weight: 500; color: var(--t-muted); margin-left: 10px; }
.top2-forecast__lead { margin-top: 10px; font-size: 14px; color: var(--t-ink); line-height: 1.8; }
.top2-forecast__summary {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
	padding: 14px 24px; background: rgba(255,255,255,.85); border: 1px solid var(--t-line); border-radius: 999px;
	font-size: 15px; color: var(--t-navy); font-weight: 700;
}
.top2-forecast__avgbox { display: flex; align-items: center; gap: 10px; }
.top2-forecast__avgnum { font-size: 34px; line-height: 1; color: var(--lv); }
.top2-forecast__pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--lv-bg); color: var(--lv); font-style: normal; }
.top2-forecast__counts { display: flex; gap: 18px; padding-left: 20px; border-left: 1px solid var(--t-line); font-size: 14px; }
.top2-forecast__counts span { color: var(--lv); }
.top2-forecast__counts b { font-size: 17px; color: var(--t-navy); margin: 0 2px; }
.top2-forecast__tagline { width: 100%; font-size: 12px; font-weight: 500; color: var(--t-muted); text-align: right; margin: 0; }

.top2-forecast__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.top2-forecast__panel { background: #fff; border: 1px solid var(--t-line); border-radius: 14px; padding: 20px 22px; }
.top2-forecast__panel-title { font-size: 17px; font-weight: 900; color: var(--t-navy); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.top2-forecast__panel-title i { color: #d9a623; }
.top2-forecast__panel--all .top2-forecast__panel-title i { color: var(--t-blue); }
.top2-forecast__panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.top2-forecast__panel-head .top2-forecast__panel-title { margin-bottom: 4px; }
.top2-forecast__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--t-muted); }
.top2-forecast__legend li { display: flex; align-items: center; gap: 5px; }
.top2-forecast__legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--lv); }
.top2-forecast__hint { font-size: 12.5px; color: var(--t-muted); margin: 0 0 14px; }

/* 上位5 */
.top2-forecast__top { display: flex; flex-direction: column; gap: 12px; }
.top2-forecast__card {
	position: relative; display: grid; grid-template-columns: 34px 56px 1fr 20px; align-items: center; gap: 12px;
	padding: 14px 14px 14px 12px; background: #f8fbfe; border: 1px solid var(--t-line); border-left: 4px solid var(--lv); border-radius: 10px;
}
.top2-forecast__rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e9eef4; color: #6b7a8b; font-size: 14px; }
.top2-forecast__rank--1 { background: #f6c443; color: #fff; }
.top2-forecast__rank--2 { background: #b8c1cc; color: #fff; }
.top2-forecast__rank--3 { background: #cf8a5b; color: #fff; }
.top2-forecast__index { font-size: 34px; line-height: 1; color: var(--lv); text-align: center; }
.top2-forecast__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.top2-forecast__name { font-weight: 900; font-size: 17px; color: var(--t-navy); display: flex; align-items: center; gap: 8px; }
.top2-forecast__meta { font-size: 12.5px; color: var(--t-muted); }
.top2-forecast__meta i { color: var(--t-blue); margin: 0 2px 0 8px; font-size: 11px; }
.top2-forecast__meta i:first-child { margin-left: 0; }
.top2-forecast__advice { font-size: 12px; color: var(--t-ink); line-height: 1.6; }
.top2-forecast__link { position: absolute; inset: 0; border-radius: 10px; }
.top2-forecast__link .top2-chev { position: absolute; right: 16px; top: 50%; margin-top: -5px; color: var(--t-muted); }
.top2-forecast__card:hover { border-color: var(--lv); }

/* 47タイル */
.top2-forecast__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.top2-forecast__grid li > a, .top2-forecast__grid li > span {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 4px 9px; background: #fff; border: 1px solid var(--t-line); border-radius: 10px;
	color: var(--t-navy); font-size: 12.5px; font-weight: 700; transition: border-color .15s, transform .15s;
}
.top2-forecast__grid li > a:hover { border-color: var(--lv); transform: translateY(-2px); }
.top2-forecast__grid b { display: inline-block; min-width: 46px; padding: 3px 8px; border-radius: 8px; background: var(--lv); color: #fff; font-size: 15px; line-height: 1.3; text-align: center; }
.top2-forecast__lv--mild .top2-forecast__grid b, .top2-forecast__grid li.top2-forecast__lv--mild b { color: #5a4a00; }
.top2-forecast__grid li.top2-forecast__lv--low b { color: var(--t-navy); }
.top2-forecast__note { margin-top: 16px; padding: 14px 16px; background: #f3f8fc; border-radius: 10px; font-size: 12.5px; color: var(--t-muted); line-height: 1.8; }
.top2-forecast__note p { margin: 0; }
.top2-forecast__note-main { display: flex; gap: 10px; align-items: flex-start; }
.top2-forecast__note-main i { color: var(--t-blue); font-size: 16px; margin-top: 3px; flex-shrink: 0; }
.top2-forecast__note-sub { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed var(--t-line); font-size: 12px; }
.top2-forecast__note a { text-decoration: underline; }
.top2-forecast__updated { white-space: nowrap; }

/* レベル色（凡例と同じ）: 警戒=赤 / 注意=橙 / やや注意=黄 / 低い=水色 */
.top2-forecast__lv--low    { --lv: #9cc8ea; --lv-bg: #e8f3fb; }
.top2-forecast__lv--mild   { --lv: #f2c12e; --lv-bg: #fdf4d6; }
.top2-forecast__lv--warn   { --lv: #f0722b; --lv-bg: #fdeadf; }
.top2-forecast__lv--danger { --lv: #d9342b; --lv-bg: #fbe3e1; }
.top2-forecast__lv--low .top2-forecast__pill { color: #2e6ea6; }
.top2-forecast__lv--mild .top2-forecast__pill { color: #8a6d00; }
.top2-forecast__lv--low .top2-forecast__index, .top2-forecast__lv--low.top2-forecast__avgnum { color: #2e6ea6; }
.top2-forecast__lv--mild .top2-forecast__index, .top2-forecast__lv--mild.top2-forecast__avgnum { color: #c99a00; }

@media (max-width: 1023px) {
	.top2-forecast__head { grid-template-columns: 1fr; }
	.top2-forecast__summary { border-radius: 14px; }
	.top2-forecast__layout { grid-template-columns: 1fr; }
	.top2-forecast__grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 767px) {
	.top2-forecast { padding-top: 40px; background-size: 100% 100%, auto 420px; background-position: center top, right top; }
	.top2-forecast__icon { width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
	.top2-forecast__date { display: block; margin: 4px 0 0; }
	.top2-forecast__summary { padding: 12px 16px; font-size: 14px; }
	.top2-forecast__counts { padding-left: 0; border-left: 0; }
	.top2-forecast__panel { padding: 16px 14px; }
	.top2-forecast__card { grid-template-columns: 28px 46px 1fr 16px; gap: 8px; padding: 12px 10px; }
	.top2-forecast__rank { width: 26px; height: 26px; font-size: 12px; }
	.top2-forecast__index { font-size: 28px; }
	.top2-forecast__name { font-size: 15px; }
	.top2-forecast__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.top2-forecast__grid li > a, .top2-forecast__grid li > span { font-size: 12px; padding: 8px 2px; }
	.top2-forecast__grid b { min-width: 40px; font-size: 14px; }
}

/* =============================================================
   対応箇所（写真カード）
   ============================================================= */
.top2-spot { background: var(--t-white); }
.top2-spot__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
/* PC は 5 列（9 件なので 2 行目の 4 件は中央寄せ → flex で組む） */
@media (min-width: 1024px) {
	.top2-spot__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}
	.top2-spot__grid > li {
		width: calc((100% - 16px * 4) / 5);
	}
	.top2-spot__body { padding: 12px 14px; gap: 8px; }
	.top2-spot__body i { display: none; }
	.top2-spot__name { font-size: 14px; white-space: nowrap; letter-spacing: -.01em; }
	.top2-spot__count { font-size: 11px; white-space: nowrap; }
}
.top2-spot__card {
	display: block;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color .2s, transform .2s;
}
.top2-spot__card:hover { border-color: var(--t-blue); transform: translateY(-2px); }
.top2-spot__photo {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--t-sky);
}
.top2-spot__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.top2-spot__card:hover .top2-spot__photo img { transform: scale(1.04); }
.top2-spot__body {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
}
.top2-spot__body i { color: var(--t-blue); font-size: 18px; width: 22px; text-align: center; }
.top2-spot__name { font-weight: 700; color: var(--t-navy); font-size: 15px; }
.top2-spot__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--t-muted);
	font-family: var(--t-font-num);
	font-weight: 500;
}
.top2-spot__body .top2-chev { color: var(--t-blue); }
.top2-spot__count + .top2-chev { margin-left: 4px; }
.top2-spot__name + .top2-chev { margin-left: auto; }
@media (max-width: 1023px) {
	.top2-spot__grid { gap: 14px; }
}
@media (max-width: 767px) {
	.top2-spot__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.top2-spot__body { padding: 10px 10px; gap: 6px; }
	.top2-spot__body i { display: none; }
	.top2-spot__name { font-size: 12.5px; white-space: nowrap; letter-spacing: -.01em; }
	.top2-spot__count { font-size: 11px; white-space: nowrap; }
}

/* =============================================================
   施設タイプ（アイコンカード）
   ============================================================= */
.top2-building { background: var(--t-sky); }
.top2-building__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.top2-building__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	color: var(--t-navy);
	font-weight: 700;
	font-size: 15px;
	transition: border-color .2s, transform .2s;
}
.top2-building__card:hover { border-color: var(--t-blue); transform: translateY(-2px); }
.top2-building__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--t-sky);
	color: var(--t-blue);
	font-size: 20px;
	flex-shrink: 0;
}
.top2-building__card .top2-chev { margin-left: auto; color: var(--t-blue); }
@media (max-width: 1023px) {
	.top2-building__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.top2-building__grid { gap: 10px; }
	.top2-building__card { padding: 12px 12px; font-size: 13px; gap: 10px; }
	.top2-building__icon { width: 40px; height: 40px; font-size: 17px; }
}

/* =============================================================
   エリア
   ============================================================= */
.top2-area { background: var(--t-white); }
.top2-area__layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: center;
}
.top2-area__map {
	color: var(--t-blue);
	padding: 20px;
}
.top2-area__map img { width: 100%; opacity: .9; }
.top2-area__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.top2-area__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	background: var(--t-sky);
	border-radius: var(--t-radius-s);
}
.top2-area__region {
	font-weight: 900;
	color: var(--t-navy);
	font-size: 15px;
}
.top2-area__prefs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 4px;
}
.top2-area__prefs a,
.top2-area__prefs span {
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--t-ink);
}
.top2-area__prefs a:hover { background: #fff; color: var(--t-blue); }
.top2-area__prefs span { color: var(--t-muted); }
@media (max-width: 1023px) {
	.top2-area__layout { grid-template-columns: 1fr; gap: 12px; }
	.top2-area__map { display: none; }
}
@media (max-width: 767px) {
	.top2-area__row { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
	.top2-area__region { font-size: 14px; }
	.top2-area__prefs a, .top2-area__prefs span { padding: 3px 7px; font-size: 12px; }
}

/* =============================================================
   3つの理由
   ============================================================= */
.top2-reason {
	background: var(--t-sky);
	position: relative;
	overflow: hidden;
}
/* 水面の気泡（控えめに 3 つだけ） */
.top2-reason::before,
.top2-reason::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(47, 168, 224, .35);
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%);
	pointer-events: none;
	z-index: 0;
}
.top2-reason::before { width: 140px; height: 140px; top: 30px; left: -40px; }
.top2-reason::after { width: 90px; height: 90px; right: 6%; bottom: 40px; }
.top2-reason__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
	z-index: 1;
}
.top2-reason__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	padding: 36px 28px 32px;
	text-align: center;
}
.top2-reason__num {
	position: absolute;
	top: 18px;
	left: 22px;
	font-size: 34px;
	color: var(--t-blue);
	line-height: 1;
}
.top2-reason__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--t-sky);
	color: var(--t-blue);
	font-size: 30px;
	margin-bottom: 18px;
}
.top2-reason__card h3 {
	font-size: 19px;
	font-weight: 900;
	margin-bottom: 12px;
}
.top2-reason__card p {
	font-size: 14px;
	color: var(--t-muted);
	text-align: left;
}
@media (max-width: 1023px) {
	.top2-reason__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.top2-reason__card { padding: 28px 20px 24px; }
	.top2-reason__num { font-size: 28px; top: 14px; left: 16px; }
	.top2-reason__icon { width: 60px; height: 60px; font-size: 26px; }
	.top2-reason__card h3 { font-size: 17px; }
	.top2-reason__card p { font-size: 13px; }
}

/* =============================================================
   最近の更新
   ============================================================= */
.top2-recent { background: var(--t-white); }
.top2-recent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.top2-recent__col { border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: 20px 22px; background: #fff; }
.top2-recent__col h3 { font-size: 16px; font-weight: 900; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.top2-recent__col h3 i { color: var(--t-blue); }
.top2-recent__col li { display: grid; grid-template-columns: 76px 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dashed var(--t-line); font-size: 14px; line-height: 1.6; }
.top2-recent__col li:last-child { border-bottom: 0; }
.top2-recent__col time { grid-row: 1 / span 2; font-family: var(--t-font-num); font-size: 12px; color: var(--t-muted); padding-top: 3px; }
.top2-recent__col li a { color: var(--t-navy); font-weight: 700; }
.top2-recent__col li a:hover { color: var(--t-blue); }
.top2-recent__meta { font-size: 12px; color: var(--t-muted); }
.top2-recent__meta i { color: var(--t-star); font-size: 11px; }
.top2-recent__stars { color: var(--t-star); letter-spacing: 1px; }
.top2-recent__more { margin-top: 12px; font-size: 13px; text-align: right; }
.top2-recent__more a { color: var(--t-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .top2-recent__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .top2-recent__col { padding: 16px; } .top2-recent__col li { grid-template-columns: 1fr; } .top2-recent__col time { grid-row: auto; } }

/* =============================================================
   Before / After
   ============================================================= */
.top2-ba { background: var(--t-white); }
.top2-ba__layout {
	display: grid;
	grid-template-columns: minmax(0, 420px) 1fr;
	gap: 48px;
	align-items: center;
}
.top2-ba__copy p {
	margin: 18px 0 28px;
	font-size: 15px;
	color: var(--t-muted);
}
.top2-ba__images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.top2-ba__img {
	position: relative;
	margin: 0;
	border-radius: var(--t-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--t-line);
}
.top2-ba__img img { width: 100%; height: 100%; object-fit: cover; }
.top2-ba__img figcaption {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(28, 39, 51, .8);
	color: #fff;
	font-family: var(--t-font-num);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
}
.top2-ba__img--after figcaption { background: var(--t-blue); }
@media (max-width: 1023px) {
	.top2-ba__layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
	.top2-ba__copy p { font-size: 14px; margin: 14px 0 20px; }
	.top2-ba__images { gap: 8px; }
}

/* =============================================================
   利用の流れ
   ============================================================= */
.top2-flow { background: var(--t-sky); }
.top2-flow__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	counter-reset: step;
}
.top2-flow__grid > li {
	position: relative;
	text-align: center;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	padding: 28px 20px 24px;
}
.top2-flow__grid > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -14px;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--t-cyan);
	border-right: 2px solid var(--t-cyan);
	transform: translateY(-50%) rotate(45deg);
}
.top2-flow__step {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 1.5px solid var(--t-sky-2);
	background: var(--t-sky);
	color: var(--t-blue);
	font-size: 30px;
	margin-bottom: 16px;
}
.top2-flow__step .top2-num {
	position: absolute;
	left: -6px;
	bottom: -4px;
	background: var(--t-blue);
	color: #fff;
	font-size: 13px;
	padding: 3px 8px;
	border-radius: 999px;
}
.top2-flow__grid h3 { font-size: 17px; font-weight: 900; margin-bottom: 8px; }
.top2-flow__grid p { font-size: 13px; color: var(--t-muted); }
@media (max-width: 1023px) {
	.top2-flow__grid { grid-template-columns: repeat(2, 1fr); }
	.top2-flow__grid > li:nth-child(2)::after { display: none; }
}
@media (max-width: 767px) {
	.top2-flow__grid { gap: 10px; }
	.top2-flow__grid > li { padding: 20px 12px 18px; }
	.top2-flow__grid > li:not(:last-child)::after { display: none; }
	.top2-flow__step { width: 68px; height: 68px; font-size: 24px; }
	.top2-flow__grid h3 { font-size: 15px; }
	.top2-flow__grid p { font-size: 12px; }
}

/* =============================================================
   利用者の声
   ============================================================= */
.top2-voice { background: var(--t-white); }
.top2-voice__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.top2-voice__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	background: #fff;
}
.top2-voice__stars { color: var(--t-star); font-size: 14px; letter-spacing: 2px; }
.top2-voice__card p { font-size: 14px; color: var(--t-ink); flex: 1; }
.top2-voice__company {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--t-blue);
	padding-top: 12px;
	border-top: 1px dashed var(--t-line);
}
@media (max-width: 1023px) {
	.top2-voice__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   読みもの（コラム）
   ============================================================= */
.top2-column { background: var(--t-sky); }
.top2-column__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.top2-column__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 20px 20px 16px;
	background: #fff;
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	transition: border-color .2s, transform .2s;
}
.top2-column__card:hover { border-color: var(--t-blue); transform: translateY(-2px); }
.top2-column__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--t-sky); color: var(--t-blue); font-size: 17px;
}
.top2-column__title { font-weight: 700; font-size: 15px; line-height: 1.55; color: var(--t-navy); flex: 1; }
.top2-column__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--t-muted); }
.top2-column__meta .top2-chev { color: var(--t-blue); }
.top2-column__more { text-align: center; margin-top: 28px; }
@media (max-width: 1023px) { .top2-column__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .top2-column__grid { grid-template-columns: 1fr; gap: 10px; } .top2-column__card { padding: 16px; } }

/* =============================================================
   CTA
   ============================================================= */
.top2-cta {
	position: relative;
	overflow: hidden;
	padding: 72px 0;
	background: var(--t-navy);
	color: #fff;
	text-align: center;
}
.top2-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 20%, rgba(47, 168, 224, .35), transparent 32%),
		radial-gradient(circle at 88% 80%, rgba(47, 168, 224, .25), transparent 30%);
	pointer-events: none;
}
.top2-cta .top2-container { position: relative; }
.top2 .top2-cta__title {
	color: #fff;
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 900;
	margin-bottom: 28px;
}
.top2 .top2-cta__points { /* .top2 ul の margin/padding リセットより優先させる */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin: 0;
	padding: 20px 0;    /* 上下 5mm（約 20px） */
}
.top2-cta__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
}
.top2-cta__points i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .5);
	font-size: 16px;
}
.top2-cta__points b { display: block; font-size: 15px; }
.top2-cta__points small { display: block; font-size: 12px; opacity: .85; }
.top2-cta__biz {
	margin-top: 20px;
	font-size: 13px;
	opacity: .85;
}
.top2-cta__biz a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.top2-cta { padding: 48px 0; }
	.top2-cta__title { font-size: 17px; }
	.top2-btn--white { width: 100%; font-size: 16px; }
	.top2 .top2-cta__points { flex-direction: column; align-items: flex-start; gap: 14px; max-width: 260px; margin: 0 auto; }
}

/* ---------- モーション控えめ設定 ---------- */
@media (prefers-reduced-motion: reduce) {
	.top2 * { transition: none !important; }
}