@charset "utf-8";

/* ====== 共通の軽量CSS（LCP配慮 & 余白を広く） ====== */
.area-wrap{max-width:1120px;margin:0 auto;padding:36px 28px;}
@media (max-width:1200px){ .area-wrap{padding:34px 24px;} }
@media (max-width:1024px){ .area-wrap{padding:32px 22px;} }
@media (max-width:820px){  .area-wrap{padding:30px 20px;} }
@media (max-width:600px){  .area-wrap{padding:28px 18px;} }
@media (max-width:480px){  .area-wrap{padding:26px 16px;} }

/* タブレットで上部がヘッダーに隠れないための余白（header.phpで--mhが入っている前提） */
@media (max-width:1024px){
  .area-wrap{ padding-top: calc( var(--mh, 60px) + 22px ); }
}

.area-lead{margin:10px 0 18px}
.area-lead .eyebrow{font-size:.92rem;opacity:.8}
.area-hero h1{font-size:clamp(22px,3.6vw,33px);line-height:1.35;margin:.35em 0}
.area-hero p{opacity:.92}
.kv{margin:1.2rem 1px 1.6rem;border:1px solid #eee;border-radius:12px;padding:18px;background:#fafafa}
.kv strong{font-weight:700}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin:.9rem 0 1.4rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.08rem;border-radius:9999px;font-weight:700;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn-red{background:#ff0033;color:#fff;border-color:#ff0033}
.btn-gray{background:#f4f4f5;color:#222;border-color:#e5e7eb}

/* インデックス／都道府県 共通 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem;margin-top:.8rem}
.grid a{display:block;padding:.7rem .9rem;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#222;background:#fff}
.small-note{font-size:.92rem;opacity:.8;margin:.5rem 0}

/* セクション余白を大きめに */
.sec{margin: clamp(28px, 5.6vw, 64px) 0}
.sec h2{font-size:clamp(18px,3.2vw,24px);margin:.65rem 0 .8rem}
.sec h3{font-size:clamp(16px,3vw,20px);margin:.48rem 0 .24rem}
.sec p{margin:.48rem 0}

/* 比較ボックス（市区町村ページ用の旧シンプル）も残す */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem}
.compare .box{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:.9rem}
.compare h4{margin:.2rem 0 .45rem;font-size:1rem}
.compare ul{margin:.2rem 0 .45rem .95rem}
@media (max-width:700px){ .compare{grid-template-columns:1fr;} }

/* ====== 市区町村ページ：リッチUI用の追加CSS ====== */
.flow-grid,.erase-grid,.cert-grid{display:grid;gap:.9rem;margin:.7rem 0 0;list-style:none;padding-left:0;margin-left:0;}

/* 画像は“横に伸ばさない” — サイズ固定せず、原寸を上限に縮小のみ */
.area-wrap img{ max-width:100%; height:auto; display:block; }
.thumb{margin:0 0 .55rem; border-radius:12px; overflow:hidden; background:#fff; border:1px solid #e5e7eb}
.thumb > img{ width:100%; height:auto; }

/* Flow */
.flow-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.flow-grid li{ list-style:none; border:1px solid #e5e7eb; border-radius:12px; padding:.85rem; background:#fff}
.flow-grid .sub{opacity:.9}
@media (max-width:900px){ .flow-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .flow-grid{grid-template-columns:1fr;} }

/* Erase + Destroy */
.erase-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.erase-box{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:.95rem}
@media (max-width:780px){ .erase-grid{grid-template-columns:1fr;} }
.erase-box .thumb img{max-width:280px;width:100%;height:auto;margin:0 auto;}
@media (max-width:780px){.erase-box .thumb img{max-width:720px;}}

/* Certificate：PC横並び、スマホは直列（テキスト可読域を広く） */
.cert-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
.cert-item{ display:grid; grid-template-columns: 1fr; gap:.7rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:.95rem; }
.cert-item .cert-flex{ display:grid; grid-template-columns: 1fr 1.2fr; gap:.8rem; align-items:start; }
.cert-item .cert-text p{ margin:.35rem 0; }
@media (max-width:780px){
  .cert-grid{ grid-template-columns:1fr; }
  .cert-item .cert-flex{ grid-template-columns: 1fr; } /* 直列表示 */
}

.faq-list .faq-item{border:1px solid #e5e7eb;border-radius:10px;background:#fff;margin:.6rem 0;padding:.7rem .9rem}
.faq-item .q{font-weight:700; margin:0 0 .35rem;}
.faq-item .a{margin:0}

.area-divider{display:none !important;}

.back-link a{display:inline-block;padding:.7rem 1.4rem;border:1px solid #ccc;border-radius:9999px;text-decoration:none;color:#222;background:#f9f9f9;}
.back-link a:hover{background:#eee;}