@charset "utf-8";
/* 鍵屋キーファイブ エリアページ 追加スタイル
   2026-10-20 作成 → 同日に配色を作り直し。

   最初は紺（#1b3f73）＋白＋中央揃えの見出しで組んだが、ユーザーから
   「ネイビーがどうしてもAIっぽく見える」との指摘。紺はこのサイトに元々無い色で、
   こちらが勝手に持ち込んだものだった。

   **キーファイブ本来の色に戻した。**
     ロゴ          … 水色のグラデーション（画像から実測）
     ナビ          … #FF9900（オレンジ）※ common/shikuStyle.css で8回使われている
     見出し        … #3366CC（同 10回）
     金額・強調    … #CC0000
   この「水色＋オレンジ」がキーファイブの持ち色なので、それで組み直している。
   見出しも中央揃え＋下線をやめ、左揃え＋オレンジの縦帯にした（既存サイトの延長）。

   手本の構成はカギ本舗（https://keyhonpho.org/ の吹田市ページ）。
   白を基調に、セクションごとに大きな余白、番号付きのカードで整理している。

   共通CSS（common/shikuStyle.css）は読み込んだうえで、このファイルで上書きする。
   エリアページだけが読むので、他のページには影響しない。
------------------------------------------------------------------ */

/* ===== 1. 土台 ===================================================== */
:root{
	--blue:#0e86c8;      /* ロゴの水色。見出し・主色 */
	--blue-d:#0a6b9e;
	--blue-l:#eaf6fc;    /* 薄い背景 */
	--orange:#ff9900;    /* 既存のナビの色。アクセント */
	--orange-d:#f07c00;
	--red:#cc0000;       /* 既存。金額・電話 */
	--ink:#333333;       /* 既存の本文色 */
	--sub:#6f7b85;
	--line:#d7e8f2;
	--white:#ffffff;
}

#wrap{
	background:var(--white);
}
#wrap p,#wrap li,#wrap dd,#wrap dt,#wrap td,#wrap th{
	color:var(--ink);
	font-size:16px;
	line-height:1.9;
}

/* セクションの間隔。現行は詰まっていて境目が分からなかった */
#wrap > section{
	margin:0;
	padding:30px 0 34px 0;
}
#wrap > section.tint{
	background:var(--blue-l);
}
#wrap > section > .content2{
	width:auto;
	max-width:1000px;
	margin:0 auto;
	padding:0 22px;
	box-sizing:border-box;
	overflow:visible;
}

/* 現行の水色・緑の箱をやめる。情報が詰まって見える原因だった */
#wrap .bgB,#wrap .bgG{
	background:none;
	border:none;
	padding:0;
	width:auto;
}

/* 飾りの区切り線（lineKey.png）は余白で代わりになるので消す */
#wrap img.banner[src*="lineKey"]{
	display:none;
}

/* ===== 2. セクション見出し ========================================= */
/* 中央揃え＋下線はやめた（没個性に見えるとの指摘）。
   既存サイトの見出し色 #3366CC 系を水色にし、左にオレンジの縦帯を置く。 */
#wrap .content2 h2{
	margin:0 0 22px 0;
	padding:2px 0 2px 16px;
	border-left:6px solid var(--orange);
	color:var(--blue);
	font-size:26px;
	line-height:1.55;
	font-weight:bold;
	text-align:left;
}
#wrap .content2 h2::after{
	display:none;
}
#wrap .content2 .lead{
	margin:-10px 0 24px 22px;
	max-width:860px;
	color:var(--ink);
	font-size:15px;
	line-height:1.9;
}

/* ===== 3. ヘッダー ================================================= */
/* 2026-10-22 ユーザー指示（ダスキンのページを手本に作り直し）。
   「左端にロゴ、その横に『鍵屋キーファイブは地域密着の鍵屋さん』、
     その横にメニューボタン」。電話の画像とオレンジのメニュー帯はやめた。
   開閉は <details> で行う（JS に頼らない）。 */
#wrap header.hd5{
	display:block;
	max-width:none;
	margin:0;
	padding:0;
	background:var(--white);
	border-bottom:1px solid var(--line);
	overflow:visible;
	/* 開いたメニューがファーストビューの画像の下に潜らないように */
	position:relative;
	z-index:1300;
}
.hd5in{
	display:flex;
	align-items:center;
	gap:14px;
	max-width:1000px;
	margin:0 auto;
	padding:9px 16px;
	box-sizing:border-box;
}
.hd5logo{
	flex:0 0 auto;
	display:block;
	line-height:0;
}
.hd5logo img{
	display:block;
	width:52px;
	height:auto;
}
#wrap .hd5catch{
	flex:1 1 auto;
	margin:0;
	padding:0;
	color:var(--ink);
	font-size:15px;
	font-weight:bold;
	line-height:1.5;
}
.hd5menu{
	flex:0 0 auto;
	margin-left:auto;
	position:relative;
}
.hd5menu > summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:54px;
	min-height:44px;
	padding:4px 0;
}
.hd5menu > summary::-webkit-details-marker{
	display:none;
}
.hd5menu > summary::marker{
	content:'';
}
.hd5bars{
	display:block;
	width:28px;
}
.hd5bars i{
	display:block;
	height:3px;
	margin:5px 0;
	border-radius:2px;
	background:var(--ink);
}
.hd5label{
	display:block;
	margin-top:3px;
	font-size:10px;
	font-weight:bold;
	letter-spacing:.08em;
	color:var(--ink);
}
/* 共通CSS が要素セレクタで nav{height:40px;background:#FF9900} を当てている。
   このパネルも nav なので、打ち消さないと中身があふれる。 */
#wrap nav.hd5nav{
	position:absolute;
	right:0;
	top:100%;
	z-index:1200;
	width:auto;
	height:auto;
	min-width:230px;
	clear:none;
	text-align:left;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:6px;
	box-shadow:0 8px 20px rgba(0,0,0,.16);
}
#wrap nav.hd5nav ul{
	margin:0;
	padding:4px 0;
	list-style:none;
}
#wrap nav.hd5nav li{
	margin:0;
}
#wrap nav.hd5nav a{
	display:block;
	padding:13px 18px;
	font-size:15px;
	line-height:1.4;
	color:var(--ink);
	text-decoration:none;
	border-bottom:1px solid var(--blue-l);
}
#wrap nav.hd5nav li:last-child a{
	border-bottom:none;
}
#wrap nav.hd5nav a:hover{
	background:var(--blue-l);
	color:var(--blue-d);
}
/* パンくずは左端にそろえる（2026-10-22 ユーザー指示）。
   共通CSS が margin-left:40px を当てていた。 */
#wrap #pan{
	margin-left:0;
	padding-left:14px;
}
/* 共通CSS の「#content1 p span{font-size:14px}」が効いて、赤文字（.fcR）だけ
   本文より小さく見えていた（2026-10-22 指摘）。本文と同じ大きさに戻す。 */
#wrap #content1 p span{
	font-size:inherit;
}
#wrap #pan,#wrap #pan a{
	color:var(--sub);
	font-size:13px;
	line-height:1.8;
}
#wrap #catch{
	margin-top:16px;
	color:var(--sub);
	font-size:15px;
	text-align:center;
}
#wrap article h1{
	margin:6px 0 0 0;
	color:var(--blue);
	font-size:32px;
	line-height:1.45;
	font-weight:bold;
	text-align:center;
}
/* 共通CSSで上下に 1px の線が入っていた（2026-10-21 指摘）。線を消し、左右に余白を取る */
#wrap #content1{
	width:auto;
	max-width:1000px;
	margin:22px auto 0 auto;
	padding:0 22px 4px 22px;
	border:none;
	box-sizing:border-box;
}
#wrap #content1 p:last-child{
	margin-bottom:0;
}
#wrap #content1 h2{
	font-size:21px;
	line-height:1.7;
	padding-top:4px;
	margin-bottom:14px;
	overflow:visible;
}
#wrap #banner{
	width:auto;
	max-width:1000px;
	margin:22px auto 0 auto;
	padding:0 22px;
	box-sizing:border-box;
	text-align:center;
}

/* ===== 3-2. ファーストビュー ======================================= */
/* 2026-10-20：2度作り直したが、ユーザー指示で**元の main.png の形に戻した**。
   1回目 水色グラデーション＋ピル型タグ → 「AIっぽい」
   2回目 ベタ塗り＋実写真          → 「元に戻してください」
   いまは共通CSSのまま。ここには何も足さない。 */
#wrap #mainImg{
	margin-top:14px;
}
#wrap #mainImg img{
	max-width:100%;
	height:auto;
}

/* ===== 4. ページ内の目次 =========================================== */
/* 2026-10-20 ユーザー指示「縦だとページが長くなり離脱の原因になるので横に」。
   スマホでも折り返さず、1行に収める。 */
.pagenav{
	width:auto;
	max-width:1000px;
	margin:20px auto 0 auto;
	padding:0 22px;
	box-sizing:border-box;
	display:flex;
	flex-wrap:nowrap;
	gap:10px;
}
/* 2026-10-20：ベタ塗り＋矢印に変えたが、ユーザー指示で元の形（白地＋青枠）に戻した。 */
.pagenav a{
	flex:1 1 0;
	min-width:0;
	padding:15px 6px;
	background:var(--white);
	border:2px solid var(--blue);
	border-radius:3px;
	color:var(--blue);
	font-size:15px;
	line-height:1.5;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	white-space:nowrap;
}
.pagenav a:hover{
	background:var(--blue);
	color:var(--white);
}

/* ===== 5. 選ばれる理由 ============================================= */
.reasons{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
}
.reason{
	position:relative;
	flex:1 1 calc(50% - 9px);
	min-width:0;
	padding:26px 24px 24px 24px;
	background:var(--white);
	border:1px solid var(--line);
	border-top:4px solid var(--orange);
	border-radius:2px;
	box-sizing:border-box;
}
.reason .no{
	display:block;
	width:38px;
	height:38px;
	margin-bottom:12px;
	background:var(--orange);
	border-radius:50%;
	color:var(--white);
	font-size:17px;
	line-height:38px;
	font-weight:bold;
	text-align:center;
}
#wrap .reason h3{
	margin:0 0 10px 0;
	padding:0;
	color:var(--blue);
	font-size:20px;
	line-height:1.5;
	font-weight:bold;
	border:none;
}
#wrap .reason p{
	font-size:15px;
	line-height:1.9;
	color:var(--ink);
}

/* ===== 6. 料金表 =================================================== */
/* 現行はアイコン画像＋金額の羅列で、どれがどの対象の料金か分かりにくかった。
   対象ごとの小さな表を2つずつ並べる。 */
.pricegrid{
	display:flex;
	flex-wrap:wrap;
	gap:22px;
}
.pricegrid > .pricebox{
	flex:1 1 calc(50% - 11px);
	min-width:0;
}
.pricetable{
	width:100%;
	border-collapse:collapse;
	background:var(--white);
}
/* 対象の見出し。もとはページ上部にあった「家・会社・店舗」などのアイコンを、
   2026-10-20 ユーザー指示でここへ移した。 */
.pricetable caption{
	padding:0 0 10px 0;
	color:var(--blue);
	font-size:17px;
	font-weight:bold;
	text-align:left;
}
.pricehead{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:2px solid var(--blue-l);
}
.pricehead img{
	width:56px;
	height:auto;
	flex:0 0 auto;
}
#wrap .pricehead h3{
	margin:0;
	padding:0;
	color:var(--blue);
	font-size:18px;
	line-height:1.5;
	font-weight:bold;
	border:none;
}
.pricetable th,.pricetable td{
	padding:14px 16px;
	border:1px solid var(--line);
	text-align:left;
	vertical-align:middle;
}
.pricetable tbody th{
	width:46%;
	background:var(--blue-l);
	color:var(--ink);
	font-size:15px;
	font-weight:normal;
}
#wrap .pricetable td{
	color:var(--red);
	font-size:17px;
	font-weight:bold;
}
#wrap .notes{
	margin-top:16px;
	color:var(--sub);
	font-size:13px;
	line-height:1.9;
}

/* ===== 6-2. 対応実績（SFA の受付明細から）========================= */
/* 2026-10-22 新設。競合が出せない数字を、数えたまま見せる。 */
.statrow{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin:22px 0 10px 0;
}
.statcard{
	flex:1 1 180px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:18px 12px;
	background:var(--blue-l);
	border:1px solid var(--line);
	border-radius:6px;
	text-align:center;
}
.statnum{
	display:block;
	color:var(--red);
	font-size:34px;
	font-weight:bold;
	line-height:1.1;
	letter-spacing:-.01em;
}
.statlabel{
	display:block;
	margin-top:8px;
	color:var(--ink);
	font-size:14px;
	font-weight:bold;
	line-height:1.5;
}
.statnote{
	display:block;
	margin-top:4px;
	color:var(--sub);
	font-size:12px;
	line-height:1.5;
}
#wrap .content2 h3{
	margin:26px 0 10px 0;
	padding-left:11px;
	border-left:4px solid var(--blue);
	color:var(--blue-d);
	font-size:17px;
	font-weight:bold;
	line-height:1.5;
}
table.stattable{
	width:100%;
	border-collapse:collapse;
	border:1px solid var(--line);
}
table.stattable th,table.stattable td{
	padding:11px 14px;
	border-bottom:1px solid var(--line);
	font-size:15px;
	text-align:left;
}
table.stattable thead th{
	background:var(--blue-l);
	color:var(--blue-d);
	font-weight:bold;
	font-size:14px;
}
table.stattable tbody th{
	width:36%;
	font-weight:bold;
	background:var(--white);
}
table.stattable td{
	color:var(--ink);
}
table.stattable tbody tr:last-child th,
table.stattable tbody tr:last-child td{
	border-bottom:none;
}
#wrap .statfoot{
	margin-top:8px;
	color:var(--sub);
	font-size:13px;
	line-height:1.8;
}
#wrap .statlead{
	margin:0 0 10px 0;
	color:var(--ink);
	font-size:15px;
	line-height:1.8;
}
/* かかった費用（2026-10-22）。表にするとスマホで見出しが重なったので、
   1 作業 1 本の積み上げの帯にした。 */
.cb1{ background:#d6ecf8; }
.cb2{ background:#9ed3ee; }
.cb3{ background:#54b1de; }
.cb4{ background:#1f86c2; }
.cb5{ background:#0a5c8a; }
ul.costlegend{
	display:flex;
	flex-wrap:wrap;
	gap:6px 16px;
	margin:0 0 12px 0;
	padding:0;
	list-style:none;
}
#wrap ul.costlegend li{
	display:flex;
	align-items:center;
	gap:6px;
	margin:0;
	color:var(--sub);
	font-size:13px;
	line-height:1.5;
}
ul.costlegend i{
	display:block;
	width:14px;
	height:14px;
	border-radius:3px;
}
.coststacks{
	margin:0;
}
.costrow{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 0;
}
.costname{
	flex:0 0 112px;
	color:var(--ink);
	font-size:15px;
	line-height:1.4;
}
.coststack{
	flex:1 1 auto;
	display:flex;
	height:30px;
	border-radius:4px;
	overflow:hidden;
	background:var(--blue-l);
}
.cs{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
	overflow:hidden;
}
.cs em{
	font-style:normal;
	font-size:12px;
	font-weight:bold;
	line-height:1;
	white-space:nowrap;
	color:var(--ink);
}
.cs.cb4 em,.cs.cb5 em{
	color:var(--white);
}
ul.statbars{
	margin:0;
	padding:0;
	list-style:none;
}
#wrap ul.statbars li{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:7px 0;
	font-size:15px;
	line-height:1.5;
}
.sbname{
	flex:0 0 150px;
	color:var(--ink);
}
.sbbar{
	flex:1 1 auto;
	display:block;
	height:14px;
	background:var(--blue-l);
	border-radius:7px;
	overflow:hidden;
}
.sbbar i{
	display:block;
	height:100%;
	background:var(--blue);
	border-radius:7px;
}
.sbnum{
	flex:0 0 62px;
	text-align:right;
	color:var(--sub);
	font-size:14px;
}

/* ===== 7. 施工事例 / お客様の声 ==================================== */
.works,.voices{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
}
.workitem{
	flex:1 1 calc(50% - 9px);
	min-width:0;
	padding:20px 22px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
	box-sizing:border-box;
}
#wrap .workitem h3{
	margin:0 0 14px 0;
	padding:0 0 12px 0;
	color:var(--blue);
	font-size:17px;
	line-height:1.6;
	font-weight:bold;
	border-bottom:2px solid var(--blue-l);
}
.workitem dl{
	display:flex;
	flex-wrap:wrap;
	margin:0;
}
#wrap .workitem dt{
	width:7em;
	color:var(--sub);
	font-size:14px;
	line-height:1.9;
}
#wrap .workitem dd{
	width:calc(100% - 7em);
	margin:0;
	font-size:15px;
	line-height:1.9;
}
#wrap .workitem dd.yen{
	color:var(--red);
	font-weight:bold;
}
.voiceitem{
	flex:1 1 100%;
	padding:20px 22px;
	background:var(--white);
	border:1px solid var(--line);
	border-left:4px solid var(--orange);
	border-radius:2px;
	box-sizing:border-box;
}
.voiceitem .head{
	margin-bottom:10px;
	color:var(--sub);
	font-size:14px;
}
.voiceitem .star{
	margin-right:10px;
	color:var(--orange);
	font-size:17px;
	letter-spacing:2px;
}

/* 施工事例（2026-10-23。事例ぜんぶを1つの枠に入れる。キー助の見せ方が手本）。
   写真は現場のものではなくイメージなので、画像に SAMPLE の透かしを焼き、
   下に「イメージ写真」と出し、枠の末尾にも注記を置く。 */
.workbox{
	padding:0;
	background:var(--white);
	border:2px solid var(--blue);
	border-radius:4px;
	/* 事例は箱の中でスクロールさせる（2026-10-23 ユーザー指示。キー助と同じ）。
	   中身は HTML に残るので検索エンジンからは全部読める。 */
	max-height:440px;
	overflow-y:auto;
	overflow-x:hidden;
	scrollbar-width:thin;
}
.workbox::-webkit-scrollbar{
	width:10px;
}
.workbox::-webkit-scrollbar-track{
	background:#eef3f7;
}
.workbox::-webkit-scrollbar-thumb{
	background:#9fb6c6;
	border-radius:5px;
}

.workcard{
	padding:0 0 18px 0;
	border-bottom:1px dashed var(--line);
}
.workcard:last-of-type{
	border-bottom:none;
	padding-bottom:10px;
}
#wrap .workbox h3.wbar{
	margin:0 0 14px 0;
	padding:9px 16px;
	background:var(--blue-d);
	border:none;
	color:var(--white);
	font-size:16px;
	line-height:1.5;
	font-weight:bold;
}
.wmain{
	padding:0 16px;
	overflow:hidden;
}
/* 写真は本文の右に回り込ませる。大きくしない。 */
figure.workphoto{
	float:right;
	width:180px;
	margin:0 0 8px 16px;
}
figure.workphoto img{
	display:block;
	width:100%;
	height:auto;
	border:1px solid var(--line);
	border-radius:4px;
}
#wrap figure.workphoto figcaption{
	margin-top:3px;
	color:var(--sub);
	font-size:11px;
	line-height:1.4;
	text-align:center;
}
dl.workmeta{
	display:flex;
	flex-wrap:wrap;
	gap:6px 7px;
	margin:0 0 10px 0;
}
dl.workmeta > div{
	display:flex;
	align-items:center;
	gap:6px;
	padding:3px 9px;
	background:var(--blue-l);
	border-radius:4px;
}
#wrap dl.workmeta dt{
	margin:0;
	color:var(--sub);
	font-size:12px;
	font-weight:normal;
}
#wrap dl.workmeta dd{
	margin:0;
	color:var(--ink);
	font-size:14px;
	font-weight:bold;
}
#wrap dl.workmeta dd.wprice{
	color:var(--red);
}
#wrap p.wtext{
	margin:0;
	font-size:15px;
	line-height:1.9;
}
.workvoice{
	clear:both;
	margin-top:12px;
	padding:11px 14px;
	background:#fffaf0;
	border-left:4px solid var(--orange);
	border-radius:0 5px 5px 0;
}
#wrap .workvoice p.vhead{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:4px 10px;
	margin:0 0 5px 0;
	line-height:1.4;
}
.vlabel{
	padding:2px 8px;
	background:var(--orange);
	border-radius:3px;
	color:var(--white);
	font-size:12px;
	font-weight:bold;
}
.vstars{
	color:var(--orange);
	font-size:16px;
	letter-spacing:.06em;
}
.vwho{
	color:var(--sub);
	font-size:13px;
}
#wrap .workvoice p.vtext{
	margin:0;
	font-size:14px;
	line-height:1.85;
}

/* ===== 8. サービスの説明（折りたたみ）============================== */
/* 現行は5つ × 各2〜5項目の長文が全部開いていて、ページの半分を占めていた。
   details にすると、中身は HTML に残ったまま画面が短くなる。 */
.servicelist{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}
details.servicedetail{
	flex:1 1 calc(50% - 6px);
	min-width:0;
	margin:0;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
	box-sizing:border-box;
	overflow:hidden;
}
details.servicedetail > summary{
	display:block;
	position:relative;
	padding:17px 50px 17px 20px;
	cursor:pointer;
	list-style:none;
	background:var(--white);
}
details.servicedetail > summary::-webkit-details-marker{
	display:none;
}
#wrap details.servicedetail > summary h3{
	margin:0;
	padding:0;
	color:var(--blue);
	font-size:17px;
	line-height:1.6;
	font-weight:bold;
	border:none;
}
details.servicedetail > summary::after{
	content:"";
	position:absolute;
	right:20px;
	top:50%;
	width:10px;
	height:10px;
	margin-top:-7px;
	border-right:2px solid var(--orange);
	border-bottom:2px solid var(--orange);
	transform:rotate(45deg);
}
details.servicedetail[open] > summary::after{
	margin-top:-2px;
	transform:rotate(-135deg);
}
details.servicedetail[open] > summary{
	background:var(--blue-l);
	border-bottom:1px solid var(--line);
}
.servicedetail .dbody{
	padding:17px 20px 20px 20px;
}
#wrap .servicedetail .dbody p{
	font-size:15px;
	line-height:1.95;
	margin-bottom:1em;
}
#wrap .servicedetail .dbody p:last-child{
	margin-bottom:0;
}

/* ===== 9. 対応エリア =============================================== */
/* 2026-10-20「h2 と h3 で分けるならデザインも変えて」。
   h2（セクション）と h3（駅・路線・町名）が同じ見え方だったので、
   h3 は白抜きの帯にして、h2 と明らかに違う形にした。 */
.arealist .detail{
	margin-bottom:18px;
	background:var(--white);
	border:1px solid var(--line);
}
#wrap .arealist h3{
	margin:0;
	padding:11px 16px;
	background:var(--blue);
	color:#ffffff;
	font-size:16px;
	line-height:1.6;
	font-weight:bold;
	border:none;
}
.arealist .detail .taglist{
	padding:14px 16px;
}
.taglist{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
}
#wrap .taglist span{
	padding:5px 12px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:3px;
	color:var(--ink);
	font-size:14px;
	line-height:1.6;
}

/* ===== 10. 対応箇所やメーカー（折りたたみ）========================= */
details.maker{
	margin-bottom:10px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
	overflow:hidden;
}
details.maker > summary{
	display:block;
	position:relative;
	padding:15px 50px 15px 20px;
	cursor:pointer;
	list-style:none;
}
details.maker > summary::-webkit-details-marker{
	display:none;
}
#wrap details.maker > summary h4{
	margin:0;
	padding:0;
	color:var(--blue);
	font-size:16px;
	line-height:1.6;
	font-weight:bold;
	border:none;
}
details.maker > summary::after{
	content:"";
	position:absolute;
	right:20px;
	top:50%;
	width:9px;
	height:9px;
	margin-top:-6px;
	border-right:2px solid var(--orange);
	border-bottom:2px solid var(--orange);
	transform:rotate(45deg);
}
details.maker[open] > summary::after{
	margin-top:-2px;
	transform:rotate(-135deg);
}
details.maker[open] > summary{
	background:var(--blue-l);
	border-bottom:1px solid var(--line);
}
#wrap details.maker p{
	padding:15px 20px 18px 20px;
	color:var(--ink);
	font-size:14px;
	line-height:2;
}

/* ===== 10-2. ご利用の流れ ========================================== */
/* 2026-10-20 ユーザー指示「サービスの流れはボタンで他ページに飛ばさず、
   このページに置く。イラストが安っぽいので対処する」。
   flowImg.png（Step1〜3のイラスト）を使わず、文字と番号で組む。
   中身は /flow.html の記述から。到着時間とキャンセル料は、サイト内で
   記述が食い違っているので書いていない（README に報告あり）。 */
.flowsteps{
	counter-reset:flowstep;
	display:flex;
	flex-direction:column;
	gap:0;
}
.flowstep{
	position:relative;
	display:flex;
	gap:20px;
	padding:0 0 26px 0;
}
.flowstep:last-child{
	padding-bottom:0;
}
/* 縦に通る線。最後の1つには出さない */
.flowstep:not(:last-child)::before{
	content:"";
	position:absolute;
	left:23px;
	top:52px;
	bottom:4px;
	width:2px;
	background:var(--line);
}
.flowstep .num{
	position:relative;
	z-index:1;
	flex:0 0 auto;
	width:48px;
	height:48px;
	background:var(--blue);
	border-radius:50%;
	color:#ffffff;
	font-size:19px;
	line-height:48px;
	font-weight:bold;
	text-align:center;
}
.flowstep .body{
	flex:1 1 auto;
	padding-top:2px;
}
#wrap .flowstep h3{
	margin:0 0 6px 0;
	padding:0;
	color:var(--blue);
	font-size:19px;
	line-height:1.5;
	font-weight:bold;
	border:none;
}
#wrap .flowstep p{
	font-size:15px;
	line-height:1.9;
}

/* ===== 10-3. 対応できる鍵 ========================================== */
/* 2026-10-21 ユーザー指示（A4）。「鍵のトラブル対応箇所やメーカー」を消したことで
   「うちの鍵は対応してもらえるのか」が分からなくなったので、写真のカードで戻す。
   元の長い羅列は details の中に畳む。写真は images-web の nb-place-*。 */
.covers{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
.cover{
	flex:1 1 calc(25% - 12px);
	min-width:0;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
	overflow:hidden;
	box-sizing:border-box;
}
.cover img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
	object-fit:cover;
}
#wrap .cover h3{
	margin:0;
	padding:11px 12px 4px 12px;
	color:var(--blue);
	font-size:16px;
	line-height:1.5;
	font-weight:bold;
	border:none;
}
#wrap .cover p{
	padding:0 12px 12px 12px;
	color:var(--sub);
	font-size:13px;
	line-height:1.7;
}
.coverlist{
	margin-top:18px;
}

/* ===== 10-4. よくある質問 ========================================== */
/* 2026-10-21 ユーザー指示（C1）。中身はすべて確定済みの事実だけ。
   競合でこれを持つのは鍵猿だけ。 */
details.faq{
	margin-bottom:10px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
	overflow:hidden;
}
details.faq > summary{
	display:block;
	position:relative;
	padding:16px 50px 16px 54px;
	cursor:pointer;
	list-style:none;
	color:var(--blue);
	font-size:16px;
	line-height:1.6;
	font-weight:bold;
}
details.faq > summary::-webkit-details-marker{
	display:none;
}
details.faq > summary .q{
	position:absolute;
	left:16px;
	top:50%;
	width:26px;
	height:26px;
	margin-top:-13px;
	background:var(--blue);
	border-radius:50%;
	color:#ffffff;
	font-size:14px;
	line-height:26px;
	font-weight:bold;
	text-align:center;
}
details.faq > summary::after{
	content:"";
	position:absolute;
	right:20px;
	top:50%;
	width:9px;
	height:9px;
	margin-top:-6px;
	border-right:2px solid var(--orange);
	border-bottom:2px solid var(--orange);
	transform:rotate(45deg);
}
details.faq[open] > summary::after{
	margin-top:-2px;
	transform:rotate(-135deg);
}
details.faq[open] > summary{
	background:var(--blue-l);
	border-bottom:1px solid var(--line);
}
#wrap details.faq .a{
	position:relative;
	margin:0;
	padding:16px 20px 18px 54px;
	font-size:15px;
	line-height:1.9;
}
#wrap details.faq .a .amark{
	position:absolute;
	left:16px;
	top:16px;
	width:26px;
	height:26px;
	background:var(--orange);
	border-radius:50%;
	color:#ffffff;
	font-size:14px;
	line-height:26px;
	font-weight:bold;
	text-align:center;
}

/* ===== 10-4b. お支払い方法 ========================================= */
/* 2026-10-22：現金・クレジット・電子マネーの3列をやめ、1つの枠にまとめた。 */
.payone{
	padding:22px 20px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:2px;
}
#wrap .payone .logos{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:14px 18px;
	margin:0;
	max-width:none;
}
.payone .logos img{
	height:32px;
	width:auto;
}
.payone .logos img.cash{
	height:72px;
}

/* ===== 10-5. 会社情報 ============================================== */
/* 2026-10-21 ユーザー指示（A2）。吹田市に拠点があることを画面に出す。
   住所は README「会社表記（確定済み）」から。 */
.bizinfo{
	width:100%;
	border-collapse:collapse;
	background:var(--white);
}
.bizinfo th,.bizinfo td{
	padding:13px 16px;
	border:1px solid var(--line);
	text-align:left;
	vertical-align:middle;
}
.bizinfo th{
	width:180px;
	background:var(--blue-l);
	color:var(--blue);
	font-size:15px;
	font-weight:bold;
}
#wrap .bizinfo td{
	font-size:15px;
}
/* 2026-10-21：H2 と見分けがつかないと指摘。帯と色をやめ、ふつうの一文にした */
.localnote{
	margin:0 0 16px 0;
	padding:0;
	background:none;
	border:none;
	color:var(--ink);
	font-size:15px;
	line-height:1.9;
	font-weight:normal;
}

/* ===== 11. 電話ブロック ============================================ */
/* 2026-10-21 指摘「キー助と瓜二つなので変えて。赤を入れると目立つ。
   電話番号が最も目立つ設計に」。
   見本をなぞるのをやめ、赤い帯＋白地に特大の番号という作りにした。
   番号は 56px（それまでは 46px）で、ページ内で最も大きい文字。 */
.telbox{
	display:block;
	max-width:700px;
	margin:26px auto 0 auto;
	background:var(--white);
	border:3px solid var(--red);
	border-radius:6px;
	overflow:hidden;
	text-decoration:none;
	box-shadow:0 3px 0 rgba(140,0,0,.25);
}
#wrap .telbox .cond{
	margin:0;
	max-width:none;
	padding:9px 14px;
	background:var(--red);
	color:#ffffff;
	font-size:15px;
	line-height:1.5;
	font-weight:bold;
	text-align:center;
	letter-spacing:.02em;
}
.telbox .numrow{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	padding:12px 16px 2px 16px;
}
.telbox .freemark{
	flex:0 0 auto;
	padding:3px 9px;
	background:#2aa84a;
	border-radius:3px;
	color:#ffffff;
	font-size:12px;
	line-height:1.5;
	font-weight:bold;
}
#wrap .telbox .num{
	color:var(--red);
	white-space:nowrap;
	font-size:56px;
	line-height:1.1;
	font-weight:bold;
	letter-spacing:.01em;
}
.telbox .tapline{
	display:block;
	margin:0 16px 12px 16px;
	padding:9px 10px;
	background:var(--orange);
	border-radius:4px;
	color:#ffffff;
	font-size:16px;
	line-height:1.4;
	font-weight:bold;
	text-align:center;
}
#wrap .telbox .hours{
	margin:0;
	max-width:none;
	padding:0 16px 12px 16px;
	color:var(--ink);
	font-size:14px;
	line-height:1.6;
	text-align:center;
}
#wrap .telbox .pay{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:7px;
	margin:0;
	max-width:none;
	padding:9px 14px;
	background:var(--blue-l);
	color:var(--sub);
	font-size:12px;
	line-height:1.6;
	text-align:center;
}
.telbox .pay img{
	height:19px;
	width:auto;
}
.telbox:active{
	box-shadow:0 1px 0 rgba(140,0,0,.25);
	transform:translateY(2px);
}
/* section の外に置く電話ブロックの入れもの（2026-10-22）。
   「対応できる鍵」の下と、ページのいちばん下。 */
.telwrap{
	padding:0 16px 34px 16px;
	background:var(--white);
}
.telwrap-last{
	padding:0 16px 40px 16px;
}

/* ===== 12. データ待ちの枠 ========================================== */
.placeholder{
	flex:1 1 100%;
	padding:38px 24px;
	background:var(--white);
	border:1px dashed #c3ced6;
	border-radius:2px;
	color:var(--sub);
	font-size:14px;
	line-height:1.95;
	text-align:center;
	box-sizing:border-box;
}

/* ===== 13. その他 ================================================== */
#wrap .toplink{
	margin-top:26px;
	text-align:right;
}
#wrap .toplink a{
	color:var(--sub);
	font-size:14px;
	text-decoration:none;
}
#wrap section > .content2 > img.banner{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
}
#wrap footer{
	margin-top:0;
	padding:26px 0;
	background:var(--blue-d);
}
#wrap footer h3,#wrap footer p,#wrap footer a{
	color:#ffffff;
	font-size:14px;
	line-height:1.8;
	text-align:center;
}
#wrap .object img{
	max-width:100%;
	height:auto;
}

/* ===== 14. スマホ（600px以下）====================================== */
@media only screen and (max-width: 600px){

#wrap p,#wrap li,#wrap dd,#wrap dt,#wrap td,#wrap th{
	font-size:15px;
	line-height:1.85;
}
#wrap > section{
	padding:26px 0 30px 0;
}
#wrap > section > .content2,
#wrap #content1,#wrap #banner,.pagenav{
	width:100%;
	max-width:none;
	padding-left:14px;
	padding-right:14px;
	box-sizing:border-box;
}
#wrap #content1{
	margin-top:16px;
}
#wrap .content2 h2{
	margin-bottom:22px;
	padding-left:12px;
	border-left-width:5px;
	font-size:20px;
}
#wrap .content2 .lead{
	margin-left:17px;
	font-size:14px;
}
#wrap #content1 h2{
	font-size:18px;
}
#wrap article h1{
	font-size:20px;
	line-height:1.5;
	padding:0 14px;
	box-sizing:border-box;
	word-break:auto-phrase;
}
#wrap #catch{
	margin-top:18px;
	font-size:14px;
}
.hd5in{
	gap:10px;
	padding:7px 12px;
}
.hd5logo img{
	width:44px;
}
#wrap .hd5catch{
	font-size:13px;
	line-height:1.4;
}
.hd5menu > summary{
	width:48px;
}
#wrap nav.hd5nav{
	min-width:0;
	width:calc(100vw - 24px);
	max-width:320px;
}

/* ファーストビュー。スマホは写真を小さく右下に置き、文字は回り込ませない */
.fv{
	margin:10px 0 0 0;
}
.fvbody{
	padding:20px 16px 16px 16px;
}
.fvphoto{
	position:static;
	display:block;
	width:150px;
	margin:-26px 0 0 auto;
}
#wrap .fv .fvsub{
	margin-bottom:8px;
	padding:3px 10px;
	font-size:13px;
}
#wrap .fv h1{
	margin-bottom:14px;
	font-size:25px;
	padding:0;
}
.fvpoint{
	margin-bottom:16px;
	border-width:1px;
}
#wrap .fvpoint li{
	width:50%;
	padding:7px 10px;
	font-size:12.5px;
	border-right-width:1px;
	box-sizing:border-box;
}
#wrap .fvpoint li:nth-child(2n){
	border-right:none;
}
#wrap .fvpoint li:nth-child(-n+2){
	border-bottom:1px solid #ffffff;
}
.fvtel{
	display:block;
	padding:10px 14px 9px 14px;
	text-align:center;
}
#wrap .fvtel .lbl{
	font-size:12px;
}
#wrap .fvtel .num{
	font-size:30px;
}

/* 目次は横1行のまま（縦に積むとページが伸びるため。2026-10-20 ユーザー指示） */
.pagenav{
	margin-top:16px;
	gap:6px;
}
.pagenav a{
	flex:1 1 0;
	padding:12px 2px;
	font-size:12px;
	border-width:1px;
	letter-spacing:-.02em;
}

.reasons,.works,.voices{
	gap:12px;
}
.reason,.workitem{
	flex:1 1 100%;
	padding:20px 18px;
}
.reason .no{
	width:34px;
	height:34px;
	line-height:34px;
	font-size:16px;
	margin-bottom:10px;
}
#wrap .reason h3{
	font-size:18px;
}
#wrap .reason p,#wrap .workitem dd{
	font-size:14px;
}

.pricegrid{
	gap:16px;
}
.pricegrid > .pricebox{
	flex:1 1 100%;
}
/* 料金表は対象ごとに「作業名／料金」の2列なので、スマホでもそのまま2列で読める */
.pricetable caption{
	font-size:16px;
}
.pricetable th,.pricetable td{
	padding:11px 13px;
}
.pricetable tbody th{
	width:50%;
	font-size:14px;
}
#wrap .pricetable td{
	font-size:15px;
	white-space:nowrap;
}

.servicelist{
	gap:9px;
}
details.servicedetail{
	flex:1 1 100%;
}
details.servicedetail > summary{
	padding:15px 42px 15px 16px;
}
#wrap details.servicedetail > summary h3{
	font-size:16px;
}
.servicedetail .dbody{
	padding:15px 16px;
}
#wrap .servicedetail .dbody p{
	font-size:14px;
}

#wrap .arealist h3{
	font-size:16px;
}
#wrap .taglist span{
	font-size:13px;
	padding:4px 10px;
}
details.maker > summary{
	padding:13px 42px 13px 16px;
}
#wrap details.maker > summary h4{
	font-size:15px;
}
#wrap details.maker p{
	padding:13px 16px 16px 16px;
	font-size:13px;
}

.pricehead img{
	width:46px;
}
#wrap .pricehead h3{
	font-size:16px;
}

.flowstep{
	gap:14px;
	padding-bottom:20px;
}
.flowstep:not(:last-child)::before{
	left:19px;
	top:44px;
}
.flowstep .num{
	width:40px;
	height:40px;
	font-size:17px;
	line-height:40px;
}
#wrap .flowstep h3{
	font-size:17px;
}
#wrap .flowstep p{
	font-size:14px;
}

.covers{
	gap:8px;
}
.cover{
	flex:1 1 calc(50% - 4px);
}
.cover img{
	aspect-ratio:3 / 2;
}
#wrap .cover h3{
	padding:9px 10px 3px 10px;
	font-size:14px;
}
#wrap .cover p{
	padding:0 10px 10px 10px;
	font-size:12px;
	line-height:1.6;
}
details.faq > summary{
	padding:14px 40px 14px 48px;
	font-size:15px;
}
#wrap details.faq .a{
	padding:14px 16px 16px 48px;
	font-size:14px;
}
.payone{
	padding:16px 12px;
}
#wrap .payone .logos{
	gap:10px 12px;
}
.payone .logos img{
	height:26px;
}
.payone .logos img.cash{
	height:58px;
}
.bizinfo,.bizinfo tbody,.bizinfo tr,.bizinfo th,.bizinfo td{
	display:block;
	width:100%;
	box-sizing:border-box;
}
.bizinfo tr{
	margin-bottom:10px;
	border:1px solid var(--line);
}
/* 2026-10-22：文字が枠の上に寄っていたので、上下の余白をそろえた */
.bizinfo th,.bizinfo td{
	border:none;
	padding:11px 14px;
	display:flex;
	align-items:center;
	min-height:44px;
	box-sizing:border-box;
}
.bizinfo th{
	width:100%;
	font-size:14px;
}
#wrap .bizinfo td{
	font-size:14px;
	padding-top:11px;
}
.localnote{
	padding:12px 14px;
	font-size:14px;
}

/* 電話ブロック（スマホ）。番号は画面幅いっぱいに大きく */
.telbox{
	margin-top:20px;
	border-width:2px;
}
#wrap .telbox .cond{
	padding:8px 10px;
	font-size:12.5px;
	line-height:1.6;
}
.telbox .numrow{
	gap:8px;
	padding:10px 10px 2px 10px;
}
.telbox .freemark{
	padding:2px 7px;
	font-size:11px;
}
#wrap .telbox .num{
	font-size:34px;
	white-space:nowrap;
}
.telbox .tapline{
	margin:0 10px 10px 10px;
	padding:11px 8px;
	font-size:15px;
}
#wrap .telbox .hours{
	padding:0 10px 11px 10px;
	font-size:13px;
}
#wrap .telbox .pay{
	padding:8px 10px;
	font-size:11px;
	gap:6px;
}
.telbox .pay img{
	height:17px;
}

#wrap .arealist h3{
	padding:10px 14px;
	font-size:15px;
}
.arealist .detail .taglist{
	padding:12px 14px;
}
.placeholder{
	padding:26px 16px;
	font-size:13px;
}

/* 下部の追従バナーが 150px あり、画面の18%を隠していた */
.footertel{
	padding-top:4px;
}

/* 対応実績（2026-10-22）。4枚を2列にし、表と棒を狭い幅に収める。 */
.statrow{
	gap:10px;
	margin:18px 0 6px 0;
}
.statcard{
	flex:1 1 calc(50% - 9px);
	min-width:0;
	padding:13px 6px;
}
.statnum{
	font-size:27px;
}
.statlabel{
	margin-top:6px;
	font-size:12px;
}
.statnote{
	font-size:11px;
}
#wrap .content2 h3{
	margin:22px 0 8px 0;
	font-size:16px;
}
table.stattable th,table.stattable td{
	padding:9px 7px;
	font-size:13px;
	white-space:nowrap;
}
table.stattable tbody th{
	width:auto;
	white-space:normal;
}
/* 施工事例（2026-10-23）。写真は小さくして本文の右に回り込ませ、
   タイトルまわりの余白も詰める（ユーザー指摘「余白がある」「写真が大きい」）。 */
.workbox{
	max-height:380px;
}
.workcard{
	padding-bottom:14px;
}
#wrap .workbox h3.wbar{
	margin:0 0 10px 0;
	padding:8px 12px;
	font-size:15px;
	line-height:1.45;
}
.wmain{
	padding:0 12px;
}
figure.workphoto{
	width:130px;
	margin:2px 0 8px 10px;
}
#wrap figure.workphoto figcaption{
	font-size:10px;
}
dl.workmeta{
	gap:5px 6px;
	margin-bottom:8px;
}
dl.workmeta > div{
	padding:3px 8px;
}
#wrap dl.workmeta dd{
	font-size:13px;
}
#wrap p.wtext{
	font-size:14px;
	line-height:1.85;
}
.workvoice{
	margin-top:10px;
	padding:9px 11px;
}
#wrap .workvoice p.vtext{
	font-size:13px;
}

/* かかった費用の帯（2026-10-22）。スマホでは名前を上に出して2段にする。 */
.costrow{
	display:block;
	padding:7px 0;
}
.costname{
	display:block;
	margin-bottom:4px;
	font-size:14px;
	font-weight:bold;
}
.coststack{
	display:flex;
	height:28px;
}
#wrap ul.costlegend li{
	font-size:12px;
}
ul.costlegend{
	gap:5px 12px;
}
#wrap .statfoot{
	font-size:12px;
	line-height:1.7;
}
#wrap ul.statbars li{
	gap:7px;
	padding:6px 0;
	font-size:13px;
}
.sbname{
	flex:0 0 104px;
}
.sbbar{
	height:12px;
}
.sbnum{
	flex:0 0 46px;
	font-size:12px;
}

}

/* ===== 15. 共通CSSの手直し ========================================= */
/* 下部の追従バナーより、ご利用の流れの番号（丸）が手前に出て重なっていた
   （2026-10-20 指摘）。追従バナーを最前面にする。 */
.footertel{
	z-index:1000;
}
/* 元のオレンジのメニュー帯（nav）と「≡ メニュー」ボタンは、
   2026-10-22 のユーザー指示で HTML ごと外した。ヘッダーの MENU に一本化した。
   2026-10-22 の指摘「メニューボタンを押すと何も開かない」の原因は、
   ここにあった .button-toggle の上書きが PC でも効き、共通CSS の
   「601px 以上ではボタンを隠す」を詳細度で打ち消していたこと。
   共通CSS を上書きするときは、元がメディアクエリの中にあるかを確かめ、
   同じ範囲のメディアクエリで囲む。 */

/* PC では電話ブロックを押せないようにする（2026-10-22 ユーザー指示）。
   パソコンからは電話をかけられないので、押せる見た目にしない。 */
@media only screen and (min-width: 601px){
#wrap .telbox{
	pointer-events:none;
	cursor:default;
}
}

/* ヘッダーのすぐ下がファーストビュー。間をあけない（2026-10-22）。 */
@media only screen and (max-width: 600px){
#wrap #mainImg{
	margin:0;
}
}