@charset "UTF-8";
/* ============================================================
   むすこの手 — トップページ専用スタイル
   （front-page.php とセット。トップページでのみ読み込まれる）

   カラーは「サイト色味（AIより）.rtf」に準拠。ただし2点だけ補正：
     ・リンク色     #C65F0A → #A94F08（対白 4.2:1 → 5.5:1）
     ・主要CTA地色  #D96F0B → #A94F08（白文字で 3.4:1 → 5.5:1）
   いずれも WCAG AA（4.5:1）未達だったため。50〜60代が読むサイトなので優先した。
   LINEボタンのみ、ブランド識別を優先して公式の #06C755 を維持している。
   ============================================================ */

/* ---------- トークン ---------- */
.mk-front {
	--mk-orange:   #F28C1B;
	--mk-orange-d: #D96F0B;
	--mk-brown:    #5A3620;
	--mk-text:     #3B2A22;
	--mk-sub:      #75685F;
	--mk-bg:       #FFF9F1;
	--mk-bg2:      #F3E7D5;
	--mk-link:     #A94F08;
	--mk-border:   #E5D5C2;
	--mk-white:    #FFFFFF;

	/* KVの円の直径 */
	--kv-d: clamp(26rem, 58vw, 58rem);

	color: var(--mk-text);
	background: var(--mk-white);
	line-height: 1.9;
}

/* ---------- ヘッダー上部のオレンジ帯を隠す（トップのみ） ----------
   キャッチフレーズ「日野/多摩/八王子/国立周辺の…」は、すぐ下のKVで
   同じ文言をアイキャッチとして出しているため、トップでは重複になる。
   RSS・検索アイコンも一緒に消える（同じ帯の中にある）。
   front-page.css はトップページでのみ読み込まれるので、下層には影響しない。 */
.l-header__bar { display: none; }

/* ---------- SWELLコンテナからの脱出 ---------- */
body { overflow-x: hidden; }
.mk-front > * { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
#content .mk-front, .l-content .mk-front { margin: 0; padding: 0; }
/* SWELLの #content 上パディング(64px)を打ち消してFVをヘッダー直下に付ける。
   下は margin-bottom:96px が入っていて、最後の写真とフッターの間に
   地色の帯ができる（フッターに色が付いていると白い隙間として目立つ）ので併せて消す。 */
#content:has(> .mk-front) { padding-top: 0; margin-bottom: 0; }

/* ---------- 共通 ---------- */
.mk-front :is(h1, h2, h3) { line-height: 1.45; letter-spacing: .02em; }
.mk-front a { color: var(--mk-link); }
.mk-inner { width: min(1080px, 90vw); margin-inline: auto; }

.mk-sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; background: var(--mk-white); }
.mk-reviews, .mk-services, .mk-message, .mk-faq { background: var(--mk-bg); }

/* 英字ラベルの前に短い罫線を入れる。ロゴのタグライン（—日野市の…—）と同じ処理で、
   ブランドの見え方を揃える。線は擬似要素なのでマークアップは変えない。 */
.mk-sec__label {
	display: flex; align-items: center; gap: .8em;
	font-size: .8rem; font-weight: 700; letter-spacing: .18em;
	color: var(--mk-orange-d); margin-bottom: .5em;
}
.mk-sec__label::before {
	content: ""; flex: none;
	width: 2.4em; height: 2px;
	background: currentColor; border-radius: 1px;
}
.mk-sec__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; color: var(--mk-brown); margin-bottom: 1.2em; text-wrap: balance; }
.mk-sec__desc  { color: var(--mk-sub); margin-bottom: 2em; }

.mk-placeholder {
	display: grid; place-items: center; min-height: 8rem;
	background: var(--mk-bg2); color: var(--mk-sub);
	border: 1px dashed var(--mk-border); border-radius: 8px; font-size: .9rem;
}
.mk-placeholder--portrait { aspect-ratio: 3 / 4; min-height: 0; }

/* 文字だけだとリンクに見えないので、右へ進む矢印を丸で囲って添える。
   下線は文字にだけ掛けたいので、テキストは <span> で包んである
   （リンク全体に下線を掛けると、丸アイコンにも線が突き抜ける）。 */
.mk-more { margin-top: 2rem; text-align: center; }
.mk-more a {
	display: inline-flex; align-items: center; gap: .6em;
	font-weight: 700; text-decoration: none;
}
.mk-more a > span {
	text-decoration: underline;
	text-underline-offset: .25em;
	text-decoration-thickness: 1px;
}
.mk-more a::after {
	content: "→";
	flex: none;
	display: grid; place-items: center;
	width: 1.75em; height: 1.75em;
	font-size: .85em; line-height: 1;
	border: 1px solid currentColor; border-radius: 50%;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mk-more a:hover > span { text-decoration-thickness: 2px; }
.mk-more a:hover::after {
	background: var(--mk-link); color: var(--mk-bg);
	transform: translateX(3px);
}
.mk-more a:focus-visible { outline: 3px solid var(--mk-brown); outline-offset: 4px; border-radius: 4px; }

/* ---------- ボタン ---------- */
.mk-btn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .15em; padding: 1em 2em; border-radius: 999px;
	font-weight: 700; text-align: center; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mk-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(90, 54, 32, .18); }
.mk-btn:focus-visible { outline: 3px solid var(--mk-brown); outline-offset: 3px; }
.mk-btn--lg { min-width: 16rem; font-size: 1.05rem; }

.mk-front .mk-btn--primary { background: #A94F08; color: #fff; }
.mk-front .mk-btn--primary:hover { background: #8E4207; }
.mk-front .mk-btn--line { background: #06C755; color: #fff; }
.mk-front .mk-btn--tel  { background: var(--mk-white); color: var(--mk-brown); border: 2px solid #A94F08; }
.mk-btn__num { font-size: 1.6rem; letter-spacing: .04em; }
.mk-btn__sub { font-size: .78rem; font-weight: 500; opacity: .85; }

/* ============================================================
   1. ファーストビュー — 円形マスク
   写真を円で切り抜いて右に置き、テキストは無地の左半分に置く。
   スクリムで覆わないので写真の顔が沈まない。
   ============================================================ */
.mk-fv {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center;
	min-height: clamp(30rem, 78vh, 46rem);
	background: var(--mk-bg);
}

/* 写真（円） */
.mk-fv__media {
	position: absolute; z-index: 0;
	top: 50%; right: -10vw;
	width: var(--kv-d); height: var(--kv-d);
	transform: translateY(-50%);
	border-radius: 50%; overflow: hidden;
	background: var(--mk-bg2);
	box-shadow: 0 24px 60px rgba(90, 54, 32, .14);
}
.mk-fv__slide {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 40%;
}
/* 3枚をゆっくりクロスフェード（1周24秒／1枚あたり約8秒表示）＋緩やかなズーム
   重なり順は下から base(家族) → s2(河川敷) → s3(街並み)。上の2枚が順に消えて切り替わる。

   ズームは「共有の短い周期」ではなく、各スライドが自分の表示区間だけ拡大し、
   不可視のあいだに等倍へ戻す。こうしないと、クロスフェードで2枚とも見えている
   最中にスケールが同時にリセットされ、縮小がそのまま見えてしまう。
   タイミング関数は linear。区間ごとに緩急がつくと拡大が不均一に見えるため。 */
.mk-fv__slide {
	transform-origin: center 45%;
	will-change: opacity, transform;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 24s;
	animation-delay: 2.6s;   /* 登場演出が終わってからループを始める */
}
.mk-fv__slide--base { animation-name: mk-kv-base; }
.mk-fv__slide--s2   { animation-name: mk-kv-s2; }
.mk-fv__slide--s3   { animation-name: mk-kv-s3; }

/* 街並み：0〜8秒 表示（0〜33%） */
@keyframes mk-kv-s3 {
	0%   { opacity: 1; transform: scale(1); }
	29%  { opacity: 1; }
	36%  { opacity: 0; transform: scale(1.08); }   /* ここで既に不可視 */
	55%  { transform: scale(1); }                  /* 見えないうちに等倍へ戻す */
	96%  { opacity: 0; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}

/* 河川敷：8〜16秒 表示（33〜66%）。それ以前は街並みの下に隠れている */
@keyframes mk-kv-s2 {
	0%   { opacity: 1; transform: scale(1); }
	29%  { opacity: 1; transform: scale(1); }
	62%  { opacity: 1; }
	69%  { opacity: 0; transform: scale(1.08); }
	88%  { transform: scale(1); }
	96%  { opacity: 0; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}

/* 家族：16〜24秒 表示（66〜100%）。常に最下段にあるので不透明度は動かさない */
@keyframes mk-kv-base {
	0%   { transform: scale(1); }
	62%  { transform: scale(1); }
	100% { transform: scale(1.08); }               /* 戻りは上2枚に隠れる */
}

@media (prefers-reduced-motion: reduce) {
	.mk-fv__slide { animation: none; transform: none; }
	.mk-fv__slide--s2 { opacity: 0; }
	.mk-fv__slide--s3 { opacity: 1; }
}

/* 円の後ろに添える細いリング（少しずらして奥行きを出す） */
.mk-fv__ring {
	position: absolute; z-index: 0;
	top: 50%; right: calc(-10vw + 2rem);
	width: var(--kv-d); height: var(--kv-d);
	transform: translateY(calc(-50% + 1.4rem));
	border: 1px solid var(--mk-orange); border-radius: 50%;
	opacity: .45; pointer-events: none;
}

/* テキスト */
.mk-fv__inner { position: relative; z-index: 1; width: min(1080px, 90vw); margin-inline: auto; }
.mk-fv__text  { max-width: min(30rem, 46%); }
.mk-fv__eyebrow { font-size: .9rem; font-weight: 700; color: var(--mk-orange-d); }
/* メイン見出しとサブテキストを「セット」として2種類重ね、交互に入れ替える。
   高さはグリッドが両者の最大に合わせるので、切り替わりでレイアウトが動かない。 */
.mk-fv__sets { display: grid; }
.mk-fv__set  { grid-area: 1 / 1; }
.mk-fv__title {
	font-size: clamp(2rem, 5.2vw, 3.2rem); font-weight: 700;
	color: var(--mk-brown); margin: .3em 0 .3em;
	/* ②のメインは <p>（h1が2つにならないよう）なので、
	   :is(h1,h2,h3) の行間指定が効かない。ここで明示して両者を揃える。 */
	line-height: 1.45; letter-spacing: .02em;
}
.mk-fv__ln { display: block; }
.mk-fv__lead { font-size: clamp(.98rem, 1.6vw, 1.12rem); margin-bottom: 1.8em; }
.mk-fv__cta  { display: flex; flex-wrap: wrap; gap: .9rem; }
.mk-fv__note { margin-top: 1.2em; font-size: .85rem; color: var(--mk-sub); }

/* FV下のサービスタグ。主役のCTAを邪魔しないよう、線と小さな文字だけで構成する。
   テキスト列より少しだけ広く取るが、右の円には掛からない幅に留めている。 */
.mk-fv__tags {
	display: flex; flex-wrap: wrap; gap: .4rem;
	margin-top: 1.5rem;
	/* 8つが2行に収まる幅。テキスト列(30rem)より広く取るが、右の円には届かせない。
	   円は幅に対して 58vw で伸びるため、狭い画面ほど余白が減る。
	   実測・計算では左端から円までの余白が約 0.47×画面幅 なので、46vw を上限にする。 */
	max-width: min(34rem, 46vw);
}
.mk-front .mk-fv__tag {
	display: inline-block;
	padding: .32em .8em;
	border: 1px solid var(--mk-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: var(--mk-brown);
	font-size: .74rem;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mk-front .mk-fv__tag:hover {
	border-color: var(--mk-orange);
	background: #fff;
	color: #A94F08;
}
.mk-front .mk-fv__tag:focus-visible { outline: 2px solid var(--mk-brown); outline-offset: 2px; }

/* リンクを持たない付帯対応のタグ。見た目は他のタグと同じで、ホバーの色変化とカーソルだけ打ち消す。 */
.mk-front .mk-fv__tag--plain,
.mk-front .mk-fv__tag--plain:hover {
	border-color: var(--mk-border);
	background: rgba(255, 255, 255, .72);
	color: var(--mk-brown);
	cursor: default;
}

/* 1200px以下は円の取り分が増えて余白が細るので、タグ自体を一段小さくして2行を維持する */
@media (max-width: 1200px) {
	.mk-front .mk-fv__tag { font-size: .70rem; padding: .3em .7em; }
}
@media (max-width: 1000px) {
	.mk-fv__tags { max-width: none; }
	.mk-front .mk-fv__tag { font-size: .72rem; padding: .32em .8em; }
}
@media (max-width: 520px) {
	.mk-fv__tags { gap: .35rem; }
	.mk-front .mk-fv__tag { font-size: .7rem; padding: .3em .75em; }
}

/* SP：写真を横帯にして上に、テキストを下に積む。
   ・円形にしない … 横並びにならないので、円だと左右に無駄な余白ができる
   ・上をヘッダーに密着させる … 帯の上に余白があると宙に浮いて見える
   ・円を大きく取ると1画面目が写真だけになり、見出しとCTAが折り返しの下へ落ちる */
@media (max-width: 1000px) {
	.mk-fv { display: block; min-height: 0; padding: 0 0 2.4rem; }
	.mk-fv__media {
		position: relative; top: auto; right: auto; transform: none;
		width: 100%; height: min(52vw, 17rem);
		margin: 0 0 1.6rem;
		border-radius: 0;
		box-shadow: none;
	}
	.mk-fv__ring { display: none; }
	.mk-fv__text { max-width: none; }
	/* 28文字あるので、既定の .9rem では2行に割れる。
	   画面幅に比例した字送りにして必ず1行へ収める
	   （2.95vw × 29.5文字ぶん ≒ 87vw で、本文幅の90vwに収まる）。
	   「国立」→「国立市」で1文字増えたぶん、3.05vw から下げてある。 */
	.mk-fv__eyebrow {
		line-height: 1.5;
		font-size: min(.9rem, 2.95vw);
		white-space: nowrap;
	}
	.mk-fv__title { margin: .25em 0 .4em; }
	.mk-fv__lead { margin-bottom: 1.2em; }
	.mk-fv__note { margin-top: .9em; }
	.mk-fv__tags { margin-top: 1.1rem; }

	/* 2つのCTAは横並びを保つ。縦に積むと画面を占有して、
	   下のタグやお知らせまで届かなくなる。 */
	.mk-fv__cta { flex-wrap: nowrap; gap: .6rem; }
	.mk-fv__cta .mk-btn {
		flex: 1 1 0; min-width: 0;
		padding: .95em .5em;
		font-size: clamp(.82rem, 3.4vw, 1rem);
		white-space: nowrap;
	}
}

/* SP専用の改行。長いキャッチを意味の切れ目で折る */
.mk-br-sp { display: none; }
@media (max-width: 1000px) {
	.mk-br-sp { display: inline; }
}

/* ============================================================
   FV の登場演出（読み込み直後の一度きり）
   JSは使わず animation-delay だけで順番をつくる。
   見出し → 円 → リング → 補足 → CTA → タグ の順。
   円の中のクロスフェード／ズームは 2.6秒 遅延させてあるので、
   登場中は静止したまま、演出が終わってからループが始まる。
   ============================================================ */
@keyframes mk-in-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mk-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-in-media {
	from { opacity: 0; transform: translateY(-50%) scale(.94); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes mk-in-media-sp {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes mk-in-ring {
	from { opacity: 0; transform: translateY(calc(-50% + 1.4rem)) scale(.96); }
	to   { opacity: .45; transform: translateY(calc(-50% + 1.4rem)) scale(1); }
}

.mk-fv__eyebrow,
.mk-fv__note,
.mk-fv__cta .mk-btn,
.mk-fv__tag        { animation: mk-in-up .55s cubic-bezier(.22,.7,.3,1) both; }
.mk-fv__media      { animation: mk-in-media .9s cubic-bezier(.22,.7,.3,1) both; }
.mk-fv__ring       { animation: mk-in-ring .8s ease-out both; }

.mk-fv__media                   { animation-delay: .90s; }
.mk-fv__ring                    { animation-delay: 1.20s; }
.mk-fv__eyebrow                 { animation-delay: 1.40s; }
.mk-fv__cta .mk-btn:nth-child(1){ animation-delay: 1.80s; }
.mk-fv__cta .mk-btn:nth-child(2){ animation-delay: 1.88s; }
.mk-fv__note                    { animation-delay: 2.10s; }

/* タグは左から順に連鎖させる */
.mk-fv__tag:nth-child(1) { animation-delay: 2.30s; }
.mk-fv__tag:nth-child(2) { animation-delay: 2.33s; }
.mk-fv__tag:nth-child(3) { animation-delay: 2.36s; }
.mk-fv__tag:nth-child(4) { animation-delay: 2.39s; }
.mk-fv__tag:nth-child(5) { animation-delay: 2.42s; }
.mk-fv__tag:nth-child(6) { animation-delay: 2.45s; }
.mk-fv__tag:nth-child(7) { animation-delay: 2.48s; }
.mk-fv__tag:nth-child(8) { animation-delay: 2.51s; }
.mk-fv__tag:nth-child(9) { animation-delay: 2.54s; }
.mk-fv__tag:nth-child(10) { animation-delay: 2.57s; }
.mk-fv__tag:nth-child(11) { animation-delay: 2.60s; }

@media (max-width: 1000px) {
	/* SPでは円が静的配置になるため、translateY(-50%)を含まない版に差し替える */
	.mk-fv__media { animation-name: mk-in-media-sp; }
}

/* 動きを減らす設定の人には演出を出さない。
   animation:none で通常のCSS（位置・不透明度）に戻るので、完成状態がそのまま出る。 */
@media (prefers-reduced-motion: reduce) {
		.mk-fv__eyebrow,
		.mk-fv__note,
	.mk-fv__cta .mk-btn,
	.mk-fv__tag,
	.mk-fv__media,
	.mk-fv__ring { animation: none; }
}

/* ---------- 2. お知らせ ---------- */
.mk-news { background: var(--mk-bg2); }
.mk-news__inner {
	width: min(1080px, 90vw); margin-inline: auto;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: .9rem 0; font-size: .92rem;
}
.mk-news__label { background: #A94F08; color: #fff; padding: .15em 1em; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.mk-news__date { color: var(--mk-sub); flex: none; }
.mk-front .mk-news__link { color: var(--mk-text); text-decoration: none; }
.mk-front .mk-news__link:hover { text-decoration: underline; }

/* 最新5件を8秒おきに入れ替える。
   全件をグリッドの同じマスに重ねるので、行数が変わってもバーの高さは動かない
   （高さは常に一番背の高い1件に揃う）。
   フェードは重ならないように組んである。1行の文字どうしが重なると、
   一瞬とはいえ二重に見えて読めなくなるため、消えきってから次を出している。 */
.mk-news__list { display: grid; flex: 1 1 auto; min-width: 0; }

/* スマホでも「お知らせ」ラベルと見出しを横一列に保つ。
   折り返すと2段になってバーが厚くなり、KV直下の情報密度が落ちる。
   幅が足りないぶんは見出し側を三点リーダーで詰める。 */
@media (max-width: 767px) {
	.mk-news__inner { flex-wrap: nowrap; gap: .7rem; padding: .75rem 0; }
	.mk-news__label { flex: none; }
	.mk-news__item { gap: .7rem; }
	.mk-news__date { font-size: .82rem; }
	.mk-news__link {
		min-width: 0;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
}
@media (max-width: 420px) {
	/* この幅では日付まで入れると見出しがほぼ読めなくなるので日付を落とす */
	.mk-news__date { display: none; }
}
.mk-news__item {
	grid-area: 1 / 1;
	display: flex; align-items: center; gap: 1rem; min-width: 0;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;

	/* アニメーションが動かない環境（iOSの低電力モードなど）では
	   全件が同じマスに重なって文字が潰れる。素の状態では1件目だけを見せ、
	   切り替えはアニメーションが動いたときの上書きに任せる。 */
	opacity: 0;
}
.mk-news__item:first-child { opacity: 1; }

/* 遅延は calc(var(--i)*8s) ではなく実数で書く。
   カスタムプロパティを含む calc をアニメーション時間に使うと、
   解釈しない環境では全件が遅延0になり同時に表示されてしまう。 */
.mk-news__item:nth-child(1) { animation-delay: 0s; }
.mk-news__item:nth-child(2) { animation-delay: 8s; }
.mk-news__item:nth-child(3) { animation-delay: 16s; }
.mk-news__item:nth-child(4) { animation-delay: 24s; }
.mk-news__item:nth-child(5) { animation-delay: 32s; }
.mk-news__list[data-count="1"] .mk-news__item { animation: none; }
.mk-news__list[data-count="2"] .mk-news__item { animation-name: mk-news-2; animation-duration: 16s; }
.mk-news__list[data-count="3"] .mk-news__item { animation-name: mk-news-3; animation-duration: 24s; }
.mk-news__list[data-count="4"] .mk-news__item { animation-name: mk-news-4; animation-duration: 32s; }
.mk-news__list[data-count="5"] .mk-news__item { animation-name: mk-news-5; animation-duration: 40s; }

/* 表示8秒のうち、前後0.25秒がフェード。件数で1周が変わるので百分率も件数ぶん用意する。
   前の件が消えきる瞬間に次が出はじめるので、文字が重なることも、
   バーが空になる時間ができることもない。 */
@keyframes mk-news-2 { 0%{opacity:0} 1.5625%{opacity:1} 48.4375%{opacity:1} 50%{opacity:0} 100%{opacity:0} }
@keyframes mk-news-3 { 0%{opacity:0} 1.0417%{opacity:1} 32.2917%{opacity:1} 33.3333%{opacity:0} 100%{opacity:0} }
@keyframes mk-news-4 { 0%{opacity:0} .78125%{opacity:1} 24.21875%{opacity:1} 25%{opacity:0} 100%{opacity:0} }
@keyframes mk-news-5 { 0%{opacity:0} .625%{opacity:1} 19.375%{opacity:1} 20%{opacity:0} 100%{opacity:0} }

/* キーボード操作で「見えないお知らせ」にフォーカスが飛ばないよう、
   タブが入ったら切り替えを止めて全件を縦に並べる。 */
.mk-news__list:focus-within { grid-auto-flow: row; row-gap: .35rem; }
.mk-news__list:focus-within .mk-news__item { grid-area: auto; animation: none; opacity: 1; }

/* 動きを減らす設定でも、お知らせの入れ替えは止めない。
   ここは不透明度が変わるだけで移動を伴わないうえ、止めると最新1件しか読めなくなる。
   （KVの見出しと同じ考え方。移動を伴う演出だけを止める方針にしている） */

/* ---------- 3. Googleクチコミ ---------- */
/* Trustindexプラグインが出力するウィジェットの受け皿。
   プラグイン側のCSSが効くので、ここでは配置と代替表示のみを整える。 */
/* 背景に日野市周辺の地形図を敷く。等高線＋市域境界＋主要道路＋河川。
   日野市も近隣も同じ扱い（どこもサービス範囲なので、色分けはしない）。
   ・等高線は国土地理院の標高タイル（DEM10B）から10m間隔で起こしたもの
   ・市域境界／道路／河川は OpenStreetMap（ODbL）
   ・線が8万本あるためベクターではなく画像。セクションの地色を焼き込んであるので、
     配置先の背景が --mk-bg であることが前提
   ・isolation:isolate で z-index:-1 をこのセクション内に閉じ込め、
     セクション自身の地色より前・本文より後ろに置く */
.mk-reviews { position: relative; overflow: hidden; isolation: isolate; }
.mk-reviews::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("../img/map/hino-contour.webp") no-repeat center / cover;
	opacity: .23;
	pointer-events: none;
}

/* 見出しの左に代表の写真を添える。コンセプトのバブルと同じ円形だが、
   ここは主役がクチコミなので、ひと回り小さくして脇役に留めている。 */
.mk-reviews__head {
	display: flex; align-items: center;
	gap: clamp(1.1rem, 3vw, 2rem);
	margin-bottom: 1.6rem;
}
.mk-reviews__photo {
	flex: none; margin: 0;
	width: clamp(6rem, 12vw, 8.5rem); aspect-ratio: 1;
	border-radius: 50%; overflow: hidden;
	background: var(--mk-bg2);
	box-shadow: 0 12px 28px rgba(90, 54, 32, .16);
}
.mk-reviews__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 見出しの下余白は .mk-reviews__head 側で持つ */
.mk-reviews__head .mk-sec__title { margin-bottom: 0; }

/* スマホでも写真と見出しは横並びのまま。
   写真に取られるぶん、日本語の見出しを画面幅に応じて小さくして2行に収める。 */
@media (max-width: 600px) {
	.mk-reviews__head { gap: .8rem; align-items: center; }
	.mk-reviews__photo { width: 4.4rem; margin-bottom: 0; }
	.mk-reviews__heading { min-width: 0; }
	.mk-reviews .mk-reviews__head .mk-sec__label { font-size: .68rem; letter-spacing: .12em; margin-bottom: .3em; }
	.mk-reviews .mk-reviews__head .mk-sec__label::before { width: 1.6em; }
	/* 後段に .mk-reviews .mk-sec__title（同じ強さ）があるため、
	   セレクタを1つ深くして確実に上書きする */
	.mk-reviews .mk-reviews__head .mk-sec__title {
		font-size: clamp(.9rem, 4.2vw, 1.15rem);
		line-height: 1.55;
	}
}

/* 背景地図の出典（フッターの著作権表示の下）。
   .mk-front の外に出るのでセレクタは入れ子にしない。
   小さくても読めないと表示の意味がないので、コントラストは確保する。 */
.mk-map-credit {
	margin: .4em 0 0;
	text-align: center;
	font-size: .72rem; line-height: 1.6; color: #6E6057;
}
.mk-map-credit a { color: #6E6057; text-decoration: underline; text-underline-offset: .2em; }
.mk-map-credit a:hover { color: #A94F08; }

.mk-reviews__widget { margin-top: .5rem; }
.mk-reviews__widget .ti-widget { margin: 0 !important; }
.mk-reviews__fallback {
	background: var(--mk-white); border: 1px solid var(--mk-border);
	border-radius: 10px; padding: 1.6rem; text-align: center;
}
.mk-reviews__fallback strong { color: var(--mk-brown); font-size: 1.15em; }

/* ---------- 4. コンセプト ---------- */
.mk-concept__body { max-width: 46rem; }
.mk-concept__body p + p { margin-top: 1.4em; }
.mk-concept__body strong { color: var(--mk-brown); }

.mk-features {
	list-style: none; padding: 0; margin: 3.5rem 0 0;
	display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.mk-features__item { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: 10px; padding: 1.8rem 1.6rem; }
.mk-features__num { font-size: .78rem; font-weight: 700; color: var(--mk-orange-d); }
.mk-features__title { font-size: 1.1rem; margin: .4em 0 .6em; color: var(--mk-brown); }
.mk-features__body { font-size: .93rem; color: var(--mk-sub); line-height: 1.85; }

/* ---------- コンセプト：バブル写真 ---------- */
.mk-concept__grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	align-items: center;
}
.mk-concept__body { max-width: 40rem; }

.mk-bubbles { position: relative; aspect-ratio: 1 / .92; }
.mk-bubble { margin: 0; position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	box-shadow: 0 14px 34px rgba(90, 54, 32, .16); background: var(--mk-bg2); }
.mk-bubble img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 各バブルは2枚を重ね、上の1枚が出入りして中身が入れ替わる。
   3つの周期を 9 / 11 / 13 秒（互いに素）にしてあるので、
   重なって同時に切り替わることがなく、ばらばらに“ふわふわ”変わって見える。 */
.mk-bubble__b {
	animation-name: mk-bubble-swap;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: opacity;
}
.mk-bubble--1 .mk-bubble__b { animation-duration: 9s;  animation-delay: 1.5s; }
.mk-bubble--2 .mk-bubble__b { animation-duration: 11s; animation-delay: 4s; }
.mk-bubble--3 .mk-bubble__b { animation-duration: 13s; animation-delay: 7s; }

/* フェードは長めに取り、切り替わりの角を立てない */
@keyframes mk-bubble-swap {
	0%,  38% { opacity: 0; }
	50%, 88% { opacity: 1; }
	100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-bubble__b { animation: none; opacity: 0; }
}
.mk-bubble--1 { width: 58%; left: 0;    top: 0;    z-index: 2; }
.mk-bubble--2 { width: 46%; right: 0%;  top: 16%;  z-index: 1; }
.mk-bubble--3 { width: 41%; left: 31%;  bottom: 0; z-index: 3;
	border: 3px solid var(--mk-bg); }

@media (max-width: 900px) {
	.mk-concept__grid { grid-template-columns: 1fr; }
	/* 横並びにすると1枚30%＝100px程度まで縮み、何の写真か判別できない。
	   このセクションは本文で読ませる場所なので、スマホでは写真ごと落とす。 */
	.mk-bubbles { display: none; }
}

/* ---------- 特徴カードのサムネ ---------- */
.mk-features__item { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mk-features__thumb { margin: 0; aspect-ratio: 16 / 9; background: var(--mk-bg2); }
.mk-features__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-features__item > :not(.mk-features__thumb) { padding-inline: 1.6rem; }
.mk-features__num { padding-top: 1.4rem; display: block; }
.mk-features__body { padding-bottom: 1.8rem; }

/* ---------- 代表写真 ---------- */
.mk-message__photo { margin: 0; }
.mk-message__photo img {
	width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
	border-radius: 50%; box-shadow: 0 14px 34px rgba(90, 54, 32, .16);
}

/* ---------- 5. サービス ---------- */
.mk-services__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.mk-front .mk-services__link {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: .5rem; height: 100%; padding: 2rem 1.2rem;
	background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: 10px;
	text-decoration: none; color: var(--mk-text);
	transition: border-color .15s ease, transform .15s ease;
}
.mk-front .mk-services__link:hover { border-color: var(--mk-orange); transform: translateY(-3px); }
.mk-services__icon { width: 72px; height: 72px; object-fit: contain; }
.mk-services__title { font-weight: 700; color: var(--mk-brown); }
.mk-services__lead { font-size: .82rem; color: var(--mk-sub); line-height: 1.7; }

/* ---------- 6. 3つの安心 ---------- */
.mk-anshin__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.mk-anshin__item { background: var(--mk-white); border-top: 4px solid var(--mk-orange); border-radius: 4px; padding: 2rem 1.6rem; box-shadow: 0 2px 10px rgba(90, 54, 32, .06); }
.mk-anshin__num { font-size: 1.6rem; font-weight: 700; color: var(--mk-orange-d); }
.mk-anshin__title { font-size: 1.15rem; margin: .2em 0 .7em; color: var(--mk-brown); }
.mk-anshin__body { font-size: .92rem; color: var(--mk-sub); line-height: 1.85; }

/* ---------- 7. 代表メッセージ ---------- */
.mk-message__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; }
@media (max-width: 767px) { .mk-message__inner { grid-template-columns: 1fr; } }
.mk-message__lead {
	font-size: clamp(1.05rem, 1.9vw, 1.24rem); font-weight: 700;
	color: var(--mk-brown); line-height: 1.7; margin-bottom: 1.1em;
}
.mk-message__body p + p { margin-top: 1.2em; }
.mk-message__body { font-size: .95rem; }
.mk-message__sign { margin-top: 1.5em; font-weight: 700; color: var(--mk-brown); }

/* ---------- 8. ご依頼の流れ ---------- */
.mk-flow__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mk-flow__item { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: 10px; padding: 1.8rem 1.4rem; }
.mk-flow__step { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #A94F08; color: #fff; font-weight: 700; font-size: .9rem; }
.mk-flow__item h3 { font-size: 1.05rem; margin: .7em 0 .4em; color: var(--mk-brown); }
.mk-flow__item p { font-size: .88rem; color: var(--mk-sub); line-height: 1.8; }

/* スマホでは番号を左に置き、見出しと本文を右に積む。
   番号が単独で1行を占めると、4項目ぶんの縦が無駄に伸びる。 */
@media (max-width: 767px) {
	.mk-flow__item {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: .9rem;
		align-items: start;
		padding: 1.2rem 1.1rem;
	}
	.mk-flow__step { grid-row: 1 / span 2; }
	.mk-flow__item h3 { margin: 0 0 .35em; align-self: center; }
	.mk-flow__item p { margin: 0; }
}

/* ---------- 9. FAQ ---------- */
.mk-faq__list { margin: 0; }
.mk-faq__item { border-bottom: 1px solid var(--mk-border); padding: 1.4rem 0; }
.mk-faq__q { font-weight: 700; color: var(--mk-brown); position: relative; padding-left: 1.9em; }
.mk-faq__q::before { content: "Q"; position: absolute; left: 0; top: 0; color: var(--mk-orange-d); font-size: 1.05em; }
.mk-faq__a { margin: .7em 0 0; padding-left: 1.9em; color: var(--mk-sub); font-size: .93rem; position: relative; }
.mk-faq__a::before { content: "A"; position: absolute; left: 0; top: 0; color: var(--mk-sub); font-weight: 700; }

/* ---------- 10. お問い合わせ ---------- */
.mk-contact { background: var(--mk-brown); color: #fff; text-align: center; }
.mk-contact .mk-contact__title { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; color: #fff; margin-bottom: .6em; }
.mk-contact__lead { margin-bottom: 2.4em; }
.mk-contact__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: stretch; }
.mk-front .mk-contact a.mk-btn--primary,
.mk-front .mk-contact a.mk-btn--line { color: #fff; }
.mk-contact__area { margin-top: 2em; font-size: .85rem; opacity: .85; }

/* ---------- 3つの安心カードのサムネ（6章の定義を上書きするため末尾に置く） ---------- */
.mk-anshin__item {
	padding: 0; overflow: hidden;
	border-top: 0; border-radius: 10px;
}
.mk-anshin__thumb { margin: 0; aspect-ratio: 16 / 9; background: var(--mk-bg2); }
.mk-anshin__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-anshin__item > :not(.mk-anshin__thumb) { padding-inline: 1.6rem; }
.mk-anshin__num { display: block; padding-top: 1.3rem; }
.mk-anshin__body { padding-bottom: 2rem; }

/* ============================================================
   本文サイズの引き上げ（コンセプト以下）
   閲覧者に50〜60代が多いため、各セクションの本文を約1割大きくする。
   KV と Googleクチコミは現状維持のため、見出しは全体を上げたうえで
   .mk-reviews だけ元のサイズに戻している。
   ============================================================ */
.mk-sec__title          { font-size: clamp(1.62rem, 3.6vw, 2.25rem); }
.mk-reviews .mk-sec__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.mk-sec__desc           { font-size: 1.05rem; }
.mk-more a              { font-size: 1.02rem; }

/* コンセプト */
.mk-concept__body       { font-size: 1.06rem; }
.mk-features__title     { font-size: 1.18rem; }
.mk-features__body      { font-size: 1rem; }
.mk-features__num       { font-size: .84rem; }

/* できること */
.mk-services__title     { font-size: 1.06rem; }
.mk-services__lead      { font-size: .92rem; }

/* 3つの安心 */
.mk-anshin__title       { font-size: 1.24rem; }
.mk-anshin__body        { font-size: 1rem; }
.mk-anshin__num         { font-size: 1.75rem; }

/* 代表あいさつ */
.mk-message__lead       { font-size: clamp(1.14rem, 2vw, 1.34rem); }
.mk-message__body       { font-size: 1.03rem; }
.mk-message__sign       { font-size: 1.02rem; }

/* ご依頼の流れ */
.mk-flow__item h3       { font-size: 1.14rem; }
.mk-flow__item p        { font-size: .96rem; }

/* よくあるご質問 */
.mk-faq__q              { font-size: 1.08rem; }
.mk-faq__a              { font-size: 1rem; }

/* お問い合わせ */
.mk-contact__lead       { font-size: 1.06rem; }
.mk-contact__area       { font-size: .92rem; }

/* ============================================================
   11. 日野の景色（お問い合わせとフッターの間の締めビジュアル）
   全幅の帯。文字は載せず、写真だけで土地の空気を残す。
   ============================================================ */
/* 締めの写真。生成りの地に少し透かして重ね、主張を抑える。 */
.mk-scenery { display: block; line-height: 0; background: var(--mk-bg); }
.mk-scenery img {
	width: 100%;
	height: clamp(25rem, 57.5vh, 42.5rem);
	object-fit: cover;
	object-position: center 48%;
	display: block;
	opacity: .86;
}
@media (max-width: 767px) {
	.mk-scenery img { height: clamp(20rem, 55vh, 32.5rem); object-position: center 45%; }
}

/* ============================================================
   セットのテレコ切り替え（1周24秒／各12秒）
   ・登場：文字が1つずつ下から持ち上がる（約1.7秒＋文字ごとに45msずつ遅延）
   ・退場：セット単位で一括フェード（0.2秒）
     退場も文字ごとにずらすと、消えきるまで約0.9秒かかって間延びする。
     退場だけセット側に持たせることで、全文字が同時に0.2秒で引ける。
   ・文字は重なると読めないため、①が消えきってから②を出す。
   ============================================================ */
.mk-fv__set {
	animation-duration: 24s; animation-timing-function: linear;
	animation-iteration-count: infinite; animation-fill-mode: both;
	animation-delay: .2s;
	will-change: opacity;
}
.mk-fv__set--1 { animation-name: mk-set-a; }
.mk-fv__set--2 { animation-name: mk-set-b; }

/* アニメーションが動かない環境では①②が重なって読めなくなる。
   素の状態では①だけを見せ、入れ替えはアニメーションの上書きに任せる。 */
.mk-fv__set--1 { opacity: 1; }
.mk-fv__set--2 { opacity: 0; }

/* 退場は 0.2秒（0.85%）のフェード。消えきったあと 0.2秒（0.83%）の間を置いて次を出す。
   間がまったく無いと入れ替わりが唐突に見えるので、ひと呼吸ぶんだけ空けている。
     ① 47% 保持 → 47.85% 消滅 →〈間0.2秒〉→ ② 48.7% 立ち上がり
     ② 98.3% 保持 → 99.17% 消滅 →〈間0.2秒〉→ 100%（＝次周0%）で①が立ち上がり
   ①②の空き時間を同じにするため、退場のキーはセットも文字も同じ値に揃えてある。 */
@keyframes mk-set-a {
	0%,     47%   { opacity: 1; }
	47.85%, 99.9% { opacity: 0; }
	100%          { opacity: 1; }
}
@keyframes mk-set-b {
	0%,     48.6% { opacity: 0; }
	48.7%,  98.3% { opacity: 1; }
	99.17%, 100%  { opacity: 0; }
}

/* ---- メイン：1文字ずつ下からゆっくり登場（退場はセット側が担当） ---- */
.mk-c {
	display: inline-block;
	animation-duration: 24s;
	animation-timing-function: cubic-bezier(.22,.7,.3,1);
	animation-iteration-count: infinite; animation-fill-mode: both;
	animation-delay: calc(.2s + var(--i) * .045s);
	will-change: opacity, transform;
}
.mk-fv__set--1 .mk-c { animation-name: mk-char-a; }
.mk-fv__set--2 .mk-c { animation-name: mk-char-b; }

/* 立ち上がりは 3%（約0.72秒）。以前は 7%（1.7秒）掛けていて、
   消えてから読めるまでの空白が長く感じられた。 */
@keyframes mk-char-a {
	0%           { opacity: 0; transform: translateY(18px); }
	3%,    47%   { opacity: 1; transform: translateY(0); }
	47.85%, 100% { opacity: 0; transform: translateY(18px); }
}
@keyframes mk-char-b {
	0%,     48.7% { opacity: 0; transform: translateY(18px); }
	51.7%,  98.3% { opacity: 1; transform: translateY(0); }
	99.17%, 100%  { opacity: 0; transform: translateY(18px); }
}

/* ---- サブ：フェードインのみ。メインが出そろってから入る ---- */
.mk-fv__lead {
	animation-duration: 24s; animation-timing-function: ease-out;
	animation-iteration-count: infinite; animation-fill-mode: both;
	animation-delay: .2s;
}
.mk-fv__set--1 .mk-fv__lead { animation-name: mk-lead-a; }
.mk-fv__set--2 .mk-fv__lead { animation-name: mk-lead-b; }

@keyframes mk-lead-a {
	0%,     4%   { opacity: 0; }
	11%,    47%  { opacity: 1; }
	47.85%, 100% { opacity: 0; }
}
@keyframes mk-lead-b {
	0%,     52.8% { opacity: 0; }
	59.8%,  98.3% { opacity: 1; }
	99.17%, 100%  { opacity: 0; }
}

/* 動きを減らす設定（Windowsの「アニメーション効果 オフ」、Macの「視差効果を減らす」）。
   以前はここで①②の入れ替えごと止めていたが、それだと①が出たきり動かず、
   「アニメーションが効いていない」状態になってしまう。
   この設定が避けたいのは移動・拡大などの動きであって、内容の入れ替えそのものではない。
   1文字ずつの持ち上がり（translateY と時間差）だけをやめ、
   セット単位のゆっくりしたクロスフェードは残す。 */
@media (prefers-reduced-motion: reduce) {
	.mk-c, .mk-fv__lead { animation: none; transform: none; opacity: 1; }
}

/* ============================================================
   追従の問い合わせ吹き出し
   KVを過ぎたらふわっと出る（表示切替は front-page.js の is-visible）。
   ボタンではなく「代表が声をかけている」見せ方にしたいので、
   白い吹き出し＋しっぽを代表イラストに向ける構成にしている。
   全体が1つの <a> なので、吹き出し・イラストどちらを押しても遷移する。
   ============================================================ */
.mk-fab {
	position: fixed; right: clamp(.8rem, 2.5vw, 1.6rem);
	bottom: clamp(.8rem, 2.5vw, 1.4rem);
	z-index: 90;
	/* gap はしっぽ（吹き出しの右へ約11px出る）がイラストに隠れない幅にしてある */
	display: inline-flex; align-items: flex-end; gap: .8rem;
	text-decoration: none;
	/* 初期は隠す。JSが is-visible を付けたら出る */
	opacity: 0; visibility: hidden;
	transform: translateY(14px) scale(.96);
	transition: opacity .45s ease, transform .45s cubic-bezier(.22,.7,.3,1), visibility .45s;
}
.mk-fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* ---- 吹き出し本体 ---- */
.mk-fab__bubble {
	position: relative;
	display: flex; flex-direction: column; gap: .18em;
	margin-bottom: 2.2rem;   /* イラストの肩の高さに合わせる */
	padding: .8em 1.1em;
	background: #fff;
	border: 2px solid #A94F08;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(90, 54, 32, .22);
	transition: background .25s ease, box-shadow .25s ease;
}
/* しっぽ。正方形を45度回して、外側の2辺だけ枠線を残す */
.mk-fab__bubble::after {
	content: ""; position: absolute;
	right: -8px; top: 50%;
	width: 13px; height: 13px;
	background: inherit;
	border-right: 2px solid #A94F08;
	border-top: 2px solid #A94F08;
	border-radius: 0 3px 0 0;
	transform: translateY(-50%) rotate(45deg);
}
.mk-fab__lead {
	font-size: .8rem; font-weight: 700; line-height: 1.4;
	color: #5A3620; letter-spacing: .02em;
}
.mk-fab__cta {
	font-size: 1.08rem; font-weight: 700; line-height: 1.35;
	color: #A94F08; letter-spacing: .02em;
	display: inline-flex; align-items: center; gap: .35em;
}
.mk-fab__cta::after {
	content: ""; flex: none;
	width: .5em; height: .5em;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease;
}
.mk-fab:hover .mk-fab__bubble {
	background: #FFF6EA;
	box-shadow: 0 12px 30px rgba(90, 54, 32, .3);
}
.mk-fab:hover .mk-fab__cta::after { transform: rotate(45deg) translate(2px, -2px); }
.mk-fab:focus-visible { outline: 3px solid #5A3620; outline-offset: 4px; border-radius: 14px; }

/* ---- 代表イラスト ----
   白円＋primaryの枠線は画像に焼き込んである。イラストの体は円でマスクされており、
   その円と正確に同心でないと縁がずれるため、CSSの擬似要素ではなく画像側で処理した。
   頭と腕は元の絵の時点で円の外に出ているので、そのまま活かしている。 */
.mk-fab__illust { flex: none; display: block; width: 144px; }
.mk-fab__illust img {
	width: 100%; height: auto; display: block;
	filter: drop-shadow(0 6px 14px rgba(90, 54, 32, .22));
}

/* ゆっくり上下に揺れて“ふわふわ”させる */
@keyframes mk-fab-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}
.mk-fab.is-visible .mk-fab__illust { animation: mk-fab-float 3.2s ease-in-out infinite; }

@media (max-width: 600px) {
	.mk-fab__bubble { padding: .65em .85em; margin-bottom: 1.6rem; border-radius: 12px; }
	.mk-fab__lead { font-size: .68rem; }
	.mk-fab__cta  { font-size: .92rem; }
	.mk-fab__illust { width: 104px; }
}
@media (max-width: 380px) {
	.mk-fab__lead { display: none; }
	.mk-fab__illust { width: 86px; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-fab { transition: opacity .2s ease, visibility .2s; transform: none; }
	.mk-fab.is-visible { transform: none; }
	.mk-fab.is-visible .mk-fab__illust { animation: none; }
}

/* SWELLの「TOPへ戻る」ボタンを画面下部の中央へ。
   右下は問い合わせボタンに譲る。front-page.css はトップページのみ読み込まれるため、
   この指定もトップページ限定で効く。 */
.p-fixBtnWrap {
	right: auto; left: 50%;
	transform: translateX(-50%);
}
/* スマホは画面が狭く、中央に寄せても問い合わせ吹き出しと重なる。
   ページが縦に長いぶん惜しいが、CTAを優先して隠す。 */
@media (max-width: 767px) {
	.p-fixBtnWrap { display: none; }
}

/* ============================================================
   白セクションの背景装飾（KVのリングと同じ細い円）
   対象：コンセプト／3つの安心／ご依頼の流れ
   ・擬似要素なのでマークアップは変えない
   ・overflow:hidden で外にはみ出した分を切り、横スクロールを出さない
   ・content は .mk-inner に z-index を与えて必ず円より前に置く
   ============================================================ */
.mk-concept, .mk-anshin, .mk-flow { position: relative; overflow: hidden; }
.mk-concept > .mk-inner,
.mk-anshin  > .mk-inner,
.mk-flow    > .mk-inner { position: relative; z-index: 1; }

.mk-concept::before, .mk-concept::after,
.mk-anshin::before,  .mk-anshin::after,
.mk-flow::before {
	content: ""; position: absolute; z-index: 0;
	border: clamp(2px, .28vw, 4px) solid var(--mk-orange);
	border-radius: 50%;
	opacity: .13;
	pointer-events: none;
}

/* コンセプト：右上に大きく、左下に中位 */
.mk-concept::before {
	width: clamp(28rem, 54vw, 50rem); aspect-ratio: 1;
	right: -14vw; top: -26%;
}
.mk-concept::after {
	width: clamp(14rem, 26vw, 23rem); aspect-ratio: 1;
	left: -7vw; bottom: -16%;
	opacity: .15;
}

/* 3つの安心：右へ大きく逃がす */
.mk-anshin::before {
	width: clamp(32rem, 62vw, 58rem); aspect-ratio: 1;
	right: -22vw; top: -34%;
}
.mk-anshin::after {
	width: clamp(9rem, 15vw, 13rem); aspect-ratio: 1;
	left: 3vw; bottom: 10%;
	opacity: .18;
}

/* 3つの安心：右下にもう1つ。セクションの ::before/::after は使用済みのため、
   .mk-inner 側の擬似要素を z-index:-1 で敷いて3つ目を作る。 */
.mk-anshin > .mk-inner::after {
	content: ""; position: absolute; z-index: -1;
	/* 元寸から 25% → 10% → 20% → 10% → 10% と重ねて、ちょうど約2倍。
	   値はすべて px / vw の偶数に丸めてある。
	   112→224px ／ 12→24vw ／ 176→352px */
	width: clamp(224px, 24vw, 352px); aspect-ratio: 1;
	right: -6vw; bottom: -8%;
	/* 下へ 15px ＋ さらに 50px ＝ 65px。
	   bottom は % 指定（親の高さ基準）なので、px で動かすなら translate のほうが確実 */
	transform: translateY(65px);
	border: clamp(2px, .28vw, 4px) solid var(--mk-orange);
	border-radius: 50%;
	opacity: .18;
	pointer-events: none;
}

/* ご依頼の流れ：左にひとつだけ、静かに */
.mk-flow::before {
	/* 10%拡大。3つの安心の円に合わせて px / vw の偶数に丸めてある。
	   416→457.6→458px ／ 48→52.8→52vw ／ 704→774.4→774px */
	width: clamp(458px, 52vw, 774px); aspect-ratio: 1;
	left: -16vw; top: -20%;
}

@media (max-width: 767px) {
	/* 画面が狭いと円が主張しすぎるので、数を減らして薄くする */
	.mk-anshin::after, .mk-anshin > .mk-inner::after { display: none; }
	.mk-concept::before, .mk-anshin::before, .mk-flow::before { opacity: .1; }
}

/* ============================================================
   スクロールに応じて下からフェードイン
   クラスは front-page.js が付与する。JSが動かない環境では
   .mk-reveal 自体が付かないため、内容が隠れたままになることはない。
   ============================================================ */
.mk-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.22, .7, .3, 1);
	transition-delay: var(--d, 0s);
}
.mk-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mk-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- KVの背景リングをもう1つ ----------
   既存の .mk-fv__ring と同寸・同位置で、10pxだけ上へずらした二重線。
   ::before は擬似要素の中で最初に描画されるため、写真の円より後ろに回り込む。
   （::after だと最後に描画され、写真の上に乗ってしまう） */
.mk-fv::before {
	content: ""; position: absolute; z-index: 0;
	top: 50%; right: calc(-10vw + 2rem);
	width: var(--kv-d); aspect-ratio: 1;
	transform: translateY(calc(-50% + 1.4rem - 27px));
	border: 1px solid var(--mk-orange);
	border-radius: 50%;
	opacity: .35;
	pointer-events: none;
	/* 1本目と同じタイミング・同じ動きで現れる（別々に出ると二重線に見えない） */
	animation: mk-in-ring2 .8s ease-out 1.20s both;
}
@keyframes mk-in-ring2 {
	from { opacity: 0;   transform: translateY(calc(-50% + 1.4rem - 27px)) scale(.96); }
	to   { opacity: .35; transform: translateY(calc(-50% + 1.4rem - 27px)) scale(1); }
}
@media (max-width: 1000px) {
	.mk-fv::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-fv::before { animation: none; }
}