@charset "UTF-8";
/* ============================================================
   takimoto-bassai.com 共通スタイル
   配色：fukuoka-carport.com の実測値に準拠（A案・工事色）
   モバイルファースト
   ============================================================ */

:root{
  --brand:#E25C15;          /* ブランド橙：CTA・見出しアクセント */
  --brand-dark:#C44C10;
  --brand-shadow:#A63C08;
  --accent:#FFD620;         /* 帯黄：ハイライト・第2CTA */
  --accent-shadow:#C9A200;
  --link:#1176D4;
  --alert:#E22323;          /* 価格 */
  --ok:#059152;
  --hero:#0E48BC;           /* ヒーロー背景 */
  --hero-dark:#0A3690;

  --ink:#333;
  --ink-soft:#666;
  --ink-faint:#888;
  --line:#e3e3e3;
  --bg:#fff;
  --bg-alt:#F7F7F7;
  --bg-cream:#FDF9EE;

  --max:1100px;
  --measure:720px;
  --radius:6px;
  --font:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.9;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:var(--link)}
h1,h2,h3,h4{line-height:1.5;margin:0 0 .6em;font-weight:700}
p{margin:0 0 1.2em}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto}
.section{padding:44px 0}
.section--alt{background:var(--bg-alt)}
.section--cream{background:var(--bg-cream)}
/* サイト要約（AI検索向けの事業者定義）。本文より少し大きく、落ち着いた地色で置く */
.section--summary{background:var(--bg-cream);border-bottom:1px solid #eee7d4;padding:30px 0}
/* AI検索向けの要約。本文より大きめに置いて、まずここを読ませる */
.section--summary p{font-size:16.5px;line-height:1.95;margin-bottom:1.1em;color:var(--ink)}
.section--summary p:last-child{margin-bottom:0}
@media (min-width:768px){
  .section--summary{padding:40px 0}
  .section--summary p{font-size:18px;line-height:2}
}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- ヘッダー ---------- */
/* ヘッダーは固定しない（PC・SPとも）。上下を固定すると表示領域が狭くなる。
   モバイルの下部固定CTA（.fixcta）は残す */
.hdr{border-bottom:3px solid var(--brand);background:#fff}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;max-width:var(--max);margin:0 auto}
.hdr__lg{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
/* ロゴは装飾。隣に社名テキストがあるので alt は空にしている */
.hdr__logo{width:38px;height:38px;flex:0 0 38px}
.hdr__lg-txt{display:block;min-width:0}
/* 「広島市の伐採業者」＝ 何屋かを先に見せる。地域＋サービスなので社名より優先度が高い */
.hdr__lg-sub{display:block;font-size:13.5px;font-weight:700;color:var(--brand);line-height:1.25;letter-spacing:.01em}
.hdr__lg-main{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;margin-top:1px}
/* --- モバイル：電話ボタン＋バーガー --- */
.hdr__mob{display:flex;align-items:center;gap:6px}
.hdr__ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:52px;min-height:46px;padding:5px 6px;border-radius:6px;text-decoration:none;
  font-size:10px;font-weight:700;line-height:1;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:inherit;cursor:pointer}
.hdr__ic:first-child{background:var(--brand);border-color:var(--brand);color:#fff}
.hdr__ic:active{transform:translateY(1px)}
.hdr__bars{display:block;width:19px;height:14px;position:relative}
.hdr__bars i{position:absolute;left:0;width:19px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .18s}
.hdr__bars i:nth-child(1){top:0}
.hdr__bars i:nth-child(2){top:5.75px}
.hdr__bars i:nth-child(3){top:11.5px}
.hdr__burger[aria-expanded="true"] .hdr__bars i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] .hdr__bars i:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] .hdr__bars i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}

/* 電話＋問い合わせボタン（大きい表示）はタブレット幅以上でのみ出す */
.hdr__cta{display:none}
.nav{display:none;border-bottom:1px solid var(--line);background:#fff}
.nav.is-open{display:block}
.nav ul{display:flex;flex-direction:column;gap:0;list-style:none;margin:0 auto;padding:0;max-width:var(--max)}
.nav li+li a{border-top:1px solid var(--line)}
.nav a{display:block;padding:14px 16px;font-size:15px;text-decoration:none;color:var(--ink);font-weight:700}
.nav a::after{content:"›";float:right;color:var(--ink-faint)}
.nav a[aria-current="page"]{color:var(--brand)}

/* ---------- ヒーロー ---------- */
.hero{background:linear-gradient(160deg,var(--hero),var(--hero-dark));color:#fff;padding:24px 0 22px}
.hero--img{
  background-image:
    linear-gradient(170deg, rgba(10,40,110,.84) 0%, rgba(12,58,155,.90) 40%, rgba(10,54,144,.95) 100%),
    var(--fv);
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}
/* モバイルは縦長のため横長写真が大きく引き伸ばされる。
   オーバーレイを薄くし、被写体が寄っている上寄りを見せる。 */
@media (max-width:767px){
  .hero--img{
    background-image:
      linear-gradient(180deg, rgba(8,32,92,.80) 0%, rgba(11,50,140,.89) 38%, rgba(10,54,144,.95) 100%),
      var(--fv);
    background-position:center 28%;
  }
}
.hero--img h1,.hero--img .hero__lead,.hero--img .hero__eyebrow{text-shadow:0 2px 12px rgba(0,15,45,.8)}
.hero--img .hero__eyebrow{text-shadow:none}
.hero--img .pills li{background:rgba(0,20,60,.42);border-color:rgba(255,255,255,.42)}
.hero__eyebrow{display:inline-block;background:var(--accent);color:#222;font-size:11px;font-weight:700;padding:4px 10px;border-radius:3px;margin-bottom:12px}
.hero h1{font-size:24px;line-height:1.45;margin:0 0 14px}
.hero h1 em{font-style:normal;background:var(--accent);color:#222;padding:0 3px}
.hero__lead{font-size:14px;line-height:1.8;margin:0 0 16px;opacity:.96}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:0;list-style:none}
.pills li{font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:5px;line-height:1.35;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34)}

/* ---------- CTA ---------- */
.cta{display:block;text-align:center;text-decoration:none;padding:14px;border-radius:var(--radius);font-weight:700;margin:0 0 10px}
.cta--tel{background:var(--brand);color:#fff;font-size:21px;line-height:1.25;box-shadow:0 4px 0 var(--brand-shadow)}
.cta--tel small{display:block;font-size:11px;font-weight:400;opacity:.92;margin-top:3px}
.cta--est{background:var(--accent);color:#222;font-size:16px;line-height:1.3;box-shadow:0 4px 0 var(--accent-shadow)}
.cta--est small{display:block;font-size:11px;font-weight:400;opacity:.8;margin-top:3px}
.cta--ghost{background:#fff;color:var(--hero);border:2px solid var(--hero);font-size:15px}
.cta:active{transform:translateY(2px);box-shadow:none}
.ctaband{background:var(--accent);padding:26px 0}
.ctaband h2{font-size:19px;text-align:center;margin-bottom:14px}
.ctaband .cta--est{background:#fff;box-shadow:0 4px 0 #d9d2b0}
.ctabox{max-width:420px;margin:0 auto}
.ctanote{font-size:12px;color:var(--ink-soft);text-align:center;margin:6px 0 0}

/* ---------- 信頼バー ---------- */
.trust{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.trust div{flex:1;background:#fff;padding:14px 6px;text-align:center}
/* 許可・資格を示す枠。補足まで読ませる必要があるので本文に近いサイズにする */
.trust b{display:block;font-size:16px;line-height:1.25;color:var(--brand)}
.trust small{display:block;font-size:12px;color:#555;line-height:1.55;margin-top:5px}

/* ---------- 見出し ---------- */
/* 見出しの上に置くラベル。セクションの役割を一言で示す */
.eyebrow{display:inline-block;font-size:12px;font-weight:700;color:var(--brand);
  letter-spacing:.1em;margin:0 0 7px;padding:0}
.eyebrow+h2{margin-top:0}
@media (min-width:768px){ .eyebrow{font-size:13px;margin-bottom:9px} }
.section h1{font-size:24px;margin-bottom:.8em}
.section h2{font-size:20px;border-left:5px solid var(--brand);padding-left:11px;margin-top:1.8em}
.section .wrap>h2:first-child,.section .wrap>.eyebrow:first-child+h2{margin-top:0}
.section h3{font-size:17px;color:#222;margin-top:1.4em}
.section h3.faq__q{margin-top:0}
.section h3:not(.faq__q)::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:7px;vertical-align:middle}

/* ---------- 表 ---------- */
.tablewrap{overflow-x:auto;margin:0 0 14px}
/* 料金表・比較表はこのサイトの主要素。本文と同等の可読性を確保する */
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.7;background:#fff}
th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--bg-alt);font-size:14px;color:#444;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
table strong{color:var(--alert)}
.note{font-size:12px;color:var(--ink-soft);margin:0 0 1.2em}

/* ---------- リスト ---------- */
.section ul,.section ol{padding-left:1.35em;margin:0 0 1.2em}
.section li{margin-bottom:.45em}
.section li::marker{color:var(--brand)}

/* ---------- 引用（お客様の声・法令引用） ---------- */
blockquote{margin:0 0 14px;padding:14px 16px;background:var(--bg-cream);border-left:4px solid var(--accent);font-size:14px}
blockquote p{margin:0 0 .5em}
blockquote p:last-child{margin:0}

/* ---------- FAQ（折りたたまず全文を表示する） ---------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:#fff}
.faq__q{margin:0;padding:14px 15px;font-weight:700;font-size:15.5px;background:var(--bg-alt);
  border-left:none;line-height:1.6;color:#222}
.faq__q::before{content:"Q";display:inline-block;color:#fff;background:var(--brand);
  width:22px;height:22px;line-height:22px;text-align:center;border-radius:4px;
  font-size:13px;margin-right:9px;vertical-align:2px}
.faq__a{padding:15px}
.faq__a>*:last-child{margin-bottom:0}
@media (min-width:768px){
  .faq__q{font-size:17px;padding:16px 18px}
  .faq__a{padding:18px}
}

/* ---------- カード ---------- */
.cards{display:grid;gap:12px;margin:0 0 1.2em}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff}
.card h3{margin-top:0}

/* ---------- リンクリスト ---------- */
.linklist{display:grid;gap:8px;list-style:none;padding:0;margin:0 0 1.2em}
.linklist a{display:block;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.linklist a::after{content:"→";float:right;color:var(--brand)}
.linklist a:hover{border-color:var(--brand)}
.linklist .ll__note{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400;margin-top:3px;line-height:1.6}

/* ---------- 写真 ---------- */
.gallery{display:grid;gap:10px;margin:0 0 1.4em}
.gallery--2{grid-template-columns:1fr}
.shot{margin:0}
.shot img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#f2f2f2}
.shot figcaption{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.6}

/* ---------- 対応エリア一覧 ---------- */
.arealist{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 1.5em}
.arealist a,.arealist span{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:14px 15px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.3}
.arealist small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-faint);margin-top:2px}
.arealist a{border-color:#f0c9a8}
.arealist a:hover{border-color:var(--brand);background:#fffaf6}
.arealist__go{color:var(--brand);font-weight:700;flex:0 0 auto}
@media (min-width:768px){
  .arealist{grid-template-columns:repeat(3,1fr);gap:11px}
  .arealist a,.arealist span{font-size:15.5px;padding:16px 18px}
}

/* ---------- パンくず ---------- */
.crumbs{font-size:11.5px;color:var(--ink-soft);padding:8px 16px;max-width:var(--max);margin:0 auto;overflow-x:auto;white-space:nowrap}
.crumbs a{color:var(--ink-soft)}

/* ---------- フォーム ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
.field .hint{font-weight:400;font-size:13px;color:#555;margin:-2px 0 6px;line-height:1.6}
.req{background:var(--alert);color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:1px}
.opt{background:#eee;color:#666;font-size:10px;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:1px}
.field input,.field select,.field textarea{width:100%;padding:11px;border:1px solid #ccc;border-radius:4px;font-size:16px;font-family:inherit}
.field textarea{min-height:110px;line-height:1.7}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.7;margin-bottom:14px}
.consent input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--brand)}
.hidden-field{position:absolute;left:-9999px}
.formnote{background:var(--bg-cream);border:1px solid #e8ddc0;border-radius:var(--radius);padding:12px 14px;font-size:13px;margin-bottom:16px}
.formnote p:last-child{margin:0}

/* ---------- 図表：料金カード ---------- */
.pricehead{background:var(--hero);color:#fff;padding:9px 12px;font-weight:700;font-size:14px;border-radius:var(--radius) var(--radius) 0 0}

/* ---------- フッター ---------- */
.foot{background:#2b2b2b;color:#ddd;padding:28px 0 90px;font-size:13px;margin-top:8px}
.foot a{color:#ddd}
.foot h2{font-size:14px;color:#fff;border:none;padding:0;margin:0 0 8px}
.foot__cols{display:grid;gap:20px;margin-bottom:20px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:6px}
.foot__nap{font-size:12.5px;line-height:1.8;color:#bbb}
.foot__cr{border-top:1px solid #444;padding-top:14px;font-size:11.5px;color:#999}

/* ---------- 固定CTA（モバイル） ---------- */
.fixcta{position:fixed;left:0;right:0;bottom:0;display:flex;gap:6px;padding:7px 10px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:60;box-shadow:0 -2px 10px rgba(0,0,0,.08)}
.fixcta a{flex:1;text-align:center;text-decoration:none;font-weight:700;padding:9px 4px;border-radius:5px;font-size:14px;line-height:1.25}
/* 電話側は番号そのものを出す。幅が画面の半分しかないので番号は15px・補足は9.5px */
.fixcta .t{background:var(--brand);color:#fff;font-size:15.5px;letter-spacing:-.01em}
.fixcta .t small{display:block;font-size:9.5px;font-weight:400;opacity:.92;margin-top:1px;letter-spacing:0}
.fixcta__ico{font-size:12px;margin-right:3px;vertical-align:1px}
.fixcta .e{background:var(--accent);color:#222;display:flex;flex-direction:column;justify-content:center}
.fixcta .e small{display:block;font-size:9.5px;font-weight:400;opacity:.8;margin-top:2px}

/* ============================================================
   タブレット以上
   ============================================================ */
@media (min-width:768px){
  body{font-size:17px}
  .hdr__in{padding:11px 20px}
  .hdr__lg{gap:12px}
  .hdr__logo{width:50px;height:50px;flex:0 0 50px}
  .hdr__lg-sub{font-size:16px}
  .hdr__lg-main{font-size:21px}
  .hdr__hrs{font-size:12px}
  .hdr__hrs{display:none}
  .hdr__cta{display:flex;align-items:center;gap:16px}
  .hdr__tel{text-align:right;line-height:1.2}
  .hdr__tel-lead{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:2px}
  .hdr__tel-num{display:block;font-size:27px;font-weight:700;color:var(--brand);text-decoration:none;letter-spacing:.005em;font-feature-settings:"tnum"}
  .hdr__tel-num:hover{color:var(--brand-dark)}
  .hdr__tel-hrs{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px}
  .hdr__btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#222;text-decoration:none;
    font-weight:700;padding:11px 18px;border-radius:7px;box-shadow:0 3px 0 var(--accent-shadow);white-space:nowrap;line-height:1.3}
  .hdr__btn:hover{filter:brightness(1.04)}
  .hdr__btn:active{transform:translateY(2px);box-shadow:none}
  .hdr__btn-ico{flex:0 0 20px}
  .hdr__btn-txt{font-size:15px}
  .hdr__btn-txt small{display:block;font-size:10.5px;font-weight:400}
  .hdr__mob{display:none}
  .nav{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav ul{flex-direction:row;white-space:nowrap}
  .nav li+li a{border-top:none}
  .nav a{font-size:14px;padding:12px 16px}
  .nav a::after{content:none}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
  .hero{padding:44px 0 40px}
  .hero h1{font-size:34px}
  .hero__lead{font-size:16px;max-width:640px}
  .pills{gap:10px;margin-bottom:24px}
  .pills li{font-size:15.5px;padding:11px 18px;border-radius:6px}
  .hero__cta{display:flex;gap:12px;max-width:660px}
  .hero__cta .cta{flex:1;margin-bottom:0}
  .section{padding:64px 0}
  table{font-size:16.5px}
  th,td{padding:14px 16px}
  thead th{font-size:15px}
  .section h1{font-size:32px}
  .section h2{font-size:25px}
  .section h3{font-size:19px}
  .trust div{padding:18px 10px}
  .trust b{font-size:20px}
  .trust small{font-size:14px;margin-top:6px}
  .gallery--2{grid-template-columns:1fr 1fr}
  .cards--2{grid-template-columns:1fr 1fr}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .linklist{grid-template-columns:1fr 1fr}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
  .foot{padding-bottom:28px}
  .fixcta{display:none}
  .ctaband .ctabox{display:flex;gap:12px;max-width:660px}
  .ctaband .cta{flex:1;margin-bottom:0}
}
@media (min-width:1024px){
  .hero h1{font-size:38px}
  .hdr__tel-num{font-size:31px}
  .hdr__cta{gap:20px}
  .hdr__btn{padding:12px 22px}
}

/* 送信ボタンは中央に置く（2026-09-30）。.cta は display:block のため幅も抑える */
.form-submit{display:flex;justify-content:center;margin-top:16px}
.form-submit .cta{margin:0;padding-left:28px;padding-right:28px;width:auto;min-width:min(320px,100%)}