/* =====================================================================
   トップページ専用（front-page.php の body.home-v2 にだけ効く）。
   design.css は地域ページ等と共用なので、トップの見た目の変更はここに書く。
   方針: 目立たせるのはヒーローの「監視カメラのファインダー枠」1か所だけ。
   それ以外は飾り（英字ラベル・意味のない番号・カードの浮き上がり・スクロール演出）を外して静かにする。
   ===================================================================== */

/* ---- 動きを減らす：スクロールでの出現演出とホバーの浮き上がりを止める ---- */
html.js body.home-v2 .rv{opacity:1;transform:none;transition:none}
.home-v2 .svc-card:hover,.home-v2 .evidence-item:hover,.home-v2 .worry-item:hover{transform:none;box-shadow:none}
.home-v2 .faq-item:hover{background:none}
.home-v2 .about-ph:hover img,.home-v2 .reasons-ph:hover img{transform:none}

/* ---- キーボード操作時のフォーカス表示 ---- */
.home-v2 a:focus-visible,.home-v2 summary:focus-visible,.home-v2 button:focus-visible,.home-v2 input:focus-visible,.home-v2 textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ===== HERO：ファインダー枠 ===== */
.vf{position:absolute;z-index:2;top:134px;left:24px;right:24px;bottom:24px;pointer-events:none;color:rgba(255,255,255,.82);font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vf-c{position:absolute;width:30px;height:30px;border:0 solid rgba(255,255,255,.7)}
.vf-tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.vf-tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.vf-bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.vf-br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.vf-loc{position:absolute;top:14px;right:44px;color:rgba(255,255,255,.6)}
@media(max-width:640px){.vf{top:110px}}
/* スマホは動画が上部に16:9で載るので、枠も動画の上だけにかける */
@media(max-width:760px){
  .vf{top:calc(var(--hv-top) + 10px);bottom:auto;left:10px;right:10px;height:calc(56.25vw - 20px);font-size:10.5px}
  .vf-c{width:20px;height:20px}
  .vf-loc{top:8px;right:28px}
}
@media(max-width:380px){.vf-loc{display:none}}

/* ===== HERO：見出し・料金 ===== */
.home-v2 .hero-tag{border:0;border-radius:0;background:none;padding:0;margin-bottom:18px;color:rgba(224,190,110,.9);font-size:12px;letter-spacing:.06em}
.home-v2 .hero h1{font-size:clamp(32px,5.4vw,58px);line-height:1.32;letter-spacing:.04em;margin-bottom:24px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.home-v2 .hero h1 small{font-size:clamp(14px,1.6vw,17px);letter-spacing:.1em;margin-bottom:14px}
.home-v2 .hero p{margin-bottom:30px}
.hero-price{display:flex;flex-wrap:wrap;gap:14px 40px;margin:0 0 34px}
.hero-price div{border-left:2px solid var(--gold);padding-left:14px}
.hero-price dt{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.62)}
.hero-price dd{font-family:var(--serif);font-size:15px;color:#fff;line-height:1.3}
.hero-price dd b{font-size:clamp(26px,3.2vw,34px);color:#e0be6e;margin:0 2px;letter-spacing:.02em}
@media(max-width:760px){.hero-price{gap:12px 28px}}

/* ===== 見出しは左揃え（調査ファイルの見出しのように） ===== */
.home-v2 .sec-head{text-align:left;margin:0 0 48px;max-width:680px}
.home-v2 .sec-head h2{font-size:clamp(26px,3.4vw,38px);line-height:1.4}
.home-v2 .sec-head p{font-size:14.5px;color:#555}
.home-v2 .bg-dark .sec-head p{color:rgba(255,255,255,.65)}
.home-v2 .contact-wrap .sec-head{margin-bottom:36px}
.home-v2 .faq-list{margin:0;max-width:820px}

/* ===== リンク：青から墨色＋金の下線へ ===== */
.home-v2 .svc-more{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:1px;font-weight:500}
.home-v2 .svc-more:hover{color:var(--gold-dk)}

/* ===== WORRIES：カードではなく罫線のリスト ===== */
.home-v2 .worry-grid{background:none;border:0;gap:0 48px;margin-bottom:32px;border-bottom:1px solid var(--gray-2)}
.home-v2 .worry-item{background:none;padding:20px 0;border-top:1px solid var(--gray-2);font-size:15px}
.home-v2 .worry-note{text-align:left;font-size:19px}

/* ===== EVIDENCE：番号を外した代わりに上辺の太罫で区切る ===== */
.home-v2 .evidence-item{border-top:2px solid var(--ink);padding-top:18px}
.home-v2 .evidence-item h3{font-size:16px}

/* ===== SERVICE：一覧表のような行組み ===== */
.home-v2 #service .svc-grid{display:block;background:none;border:0;border-bottom:1px solid var(--gray-2)}
.home-v2 #service .svc-card{display:grid;grid-template-columns:200px 1fr auto;align-items:baseline;gap:6px 32px;padding:26px 0;background:none;border-top:1px solid var(--gray-2)}
.home-v2 #service .svc-card h3{font-size:19px;margin:0}
.home-v2 #service .svc-card p{font-size:14px;margin:0}
.home-v2 #service .svc-more{margin:0;white-space:nowrap}
@media(max-width:760px){.home-v2 #service .svc-card{grid-template-columns:1fr;padding:22px 0}.home-v2 #service .svc-more{justify-self:start;margin-top:6px}}

/* ===== AREA ===== */
.home-v2 .area-grid{gap:20px;background:none;border:0}
.home-v2 .area-card{border:1px solid var(--gray-2);border-top:3px solid var(--gold-dk);padding:32px 30px}
.home-v2 .area-card h3{font-size:20px}
.home-v2 .area-badge{font-size:12px;padding:4px 10px}
.area-more-head{font-family:var(--serif);font-size:18px;margin:56px 0 4px}
.area-more{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;border-bottom:1px solid var(--gray-2)}
.area-more a{display:block;padding:16px 0;border-top:1px solid var(--gray-2)}
.area-more b{display:block;font-family:var(--serif);font-size:16px}
.area-more span{display:block;font-size:13px;color:var(--gray-3);line-height:1.6;margin-top:2px}
.area-more a:hover b{color:var(--gold-dk)}
@media(max-width:700px){.area-more{grid-template-columns:1fr}}

/* ===== PRICE ===== */
.home-v2 .plan h3{margin-bottom:14px}
.home-v2 .plan .yen{font-size:40px;line-height:1.2}

/* ===== FAQ：開閉式（details/summary） ===== */
.home-v2 .faq-q{list-style:none;cursor:pointer;margin:0;padding-right:36px}
.home-v2 .faq-q::-webkit-details-marker{display:none}
.home-v2 .faq-q::after{content:"";position:absolute;right:6px;top:.55em;width:10px;height:10px;border-right:1.5px solid var(--gray-3);border-bottom:1.5px solid var(--gray-3);transform:rotate(45deg);transition:transform .2s ease}
.home-v2 .faq-item[open] .faq-q::after{transform:rotate(225deg);top:.8em}
.home-v2 .faq-item[open] .faq-q{margin-bottom:12px}
.home-v2 .faq-item{padding:22px 0}
@media(prefers-reduced-motion:reduce){.home-v2 .faq-q::after{transition:none}}

/* スマホ：枠の座標表示と届出番号が重ならないよう、文字の開始位置を少し下げる */
@media(max-width:760px){.home-v2 .hero{padding-top:calc(var(--hv-top) + 46px)}}
.home-v2 .hero .hero-micro{max-width:none}
@media(max-width:420px){.home-v2 .hero h1{font-size:clamp(24px,7.4vw,30px)}}
/* 日本語見出しを文節で折り返す（対応ブラウザのみ。非対応でも従来どおり折り返すだけ） */
.home-v2 h1,.home-v2 h2,.home-v2 .worry-note{word-break:auto-phrase}
.home-v2 .sec-head{max-width:780px}