@charset "utf-8";
/* ============================================================
   チョコサポ福井 — 本体スタイル
   本部LP（chocosapo.com/fukui/）および姉妹サイト aichi-benriya.com の
   SWELL 2.16.0 の見た目を静的HTMLで再現したもの。
   色・フォント・幅の値は tokens.css（computedStyle 実測）に従う。
   モバイルファースト。
   ============================================================ */

/* サイト固有の追加色。tokens.css は SWELL の実測値のみを置く方針のため、
   実測に無い色はここで定義する。 */
:root{
  --color_tel:#c0271f;       /* 電話CTAの濃い赤。FV画像の赤帯に寄せた色 */
  --color_tel_dark:#a01f18;
  /* 中段CTAのラベル地色・枠線。aichi-benriya.com の .cap_box_ttl / .cap_box_content 実測値 */
  --color_capbox:#e82217;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color_bg);
  color:var(--color_text);
  font-family:var(--font_family);
  font-weight:var(--font_weight);
  font-size:var(--fz--content);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color_link);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration:none}
:focus-visible{outline:3px solid var(--color_main_dark);outline-offset:2px}

/* ---------- レイアウト ---------- */
/* SWELL と同じく、--container_size / --article_size は「padding の内側」の幅。
   max-width に padding を足さないと、画面が広いほど中身が痩せる（box-sizing:border-box のため）。 */
.l-container{max-width:calc(var(--container_size) + var(--pad_container) * 2);margin-inline:auto;padding-inline:var(--pad_container)}
/* .l-article は常に .l-container と同じ要素に付く（単独使用なし）ため、同じく padding を足す */
.l-article{max-width:calc(var(--article_size) + var(--pad_container) * 2);margin-inline:auto}
main{display:block}
section{margin-block:0}
.u-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}

/* フルワイド帯（SWELL swell-block-fullWide 相当） */
.p-band{padding-block:2.5rem}
.p-band--tint{background:var(--color_pale04)}
.p-band--gray{background:var(--color_gray)}
.p-band--main{background:var(--color_main_thin)}

/* ---------- 見出し ---------- */
h1,h2,h3,h4{line-height:1.5;font-weight:700;margin:0 0 .6em}
.c-pageTitle{font-size:1.5rem;margin:0 0 .8em}

/* SWELL is-style-section_ttl：中央揃え＋左右に細い横線 */
.c-secTtl{
  position:relative;
  text-align:center;
  font-size:var(--fz--h2);
  font-weight:700;
  color:var(--color_text);
  margin:2.6rem 0 1.4rem;
  padding-inline:1rem;
}
.c-secTtl::before,.c-secTtl::after{
  content:"";position:absolute;bottom:-.55em;
  width:76px;height:1px;background:var(--color_text);
}
.c-secTtl::before{left:50%;transform:translateX(-100%) translateX(-52px)}
.c-secTtl::after{left:50%;transform:translateX(52px)}
@media (max-width:480px){
  .c-secTtl::before,.c-secTtl::after{width:40px}
  .c-secTtl::before{transform:translateX(-100%) translateX(-36px)}
  .c-secTtl::after{transform:translateX(36px)}
}

h3{font-size:1.15em;border-left:4px solid var(--color_main);padding-left:.6em;margin-top:1.8em}
h4{font-size:1.05em;margin-top:1.4em}

p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.4em}
li{margin-bottom:.4em}
strong{font-weight:700}

/* ---------- ヘッダー（takimoto-bassai の構造に準拠） ---------- */
/* ヘッダーは固定しない。上下を固定すると表示領域が狭くなる。
   モバイルの下部固定CTA（.p-fixCta）は残す。 */
/* ロゴ画像が白背景（透過なし）のため、ヘッダー地色も白にそろえる */
.l-header{background:#fff;border-bottom:3px solid var(--color_main)}
.l-header__inner{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px var(--pad_container);max-width:calc(var(--container_size) + var(--pad_container) * 2);margin:0 auto}
/* ロゴはマスコット＋「チョコサポ」＋「福井の便利屋さん」が1枚に入った横型（800×226）。
   社名も業種もロゴ内にテキストとして入っているため、隣にテキストは置かず alt で読ませる。 */
/* 縦横比 800:226（≒3.54:1）。高さ固定＋max-width:100% だと、
   flex で幅だけ縮められて横に潰れる。幅を指定して height:auto にする。 */
.c-headLogo{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.c-headLogo img{display:block;width:112px;height:auto}
@media (min-width:360px){.c-headLogo img{width:132px}}
@media (min-width:400px){.c-headLogo img{width:156px}}
/* PC は本文（17px／コンテンツ幅 800px）に対して過大にならない高さに抑える。
   176px → 高さ 49.7px。ヘッダー全体で約 65px。 */
@media (min-width:768px){.c-headLogo img{width:176px}}

/* モバイル：電話ボタン＋バーガー */
.l-header__mob{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.c-hdrIc{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(--color_border);
  background:#fff;color:var(--color_text);font-family:inherit;cursor:pointer}
.c-hdrIc:active{transform:translateY(1px)}
/* モバイルの電話は番号そのものを出す（アイコンボタンにしない） */
.c-telBtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--color_tel);color:#fff;font-weight:700;text-decoration:none;
  border-radius:6px;padding:.35rem .7rem;line-height:1.2;box-shadow:var(--btn_shadow);
  font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;min-height:46px}
.c-telBtn small{display:block;font-size:9px;font-weight:500;opacity:.92;margin-top:1px;letter-spacing:0}
.c-telBtn:hover{background:var(--color_tel_dark);color:#fff;text-decoration:none}
@media (min-width:400px){.c-telBtn{font-size:15px;padding:.35rem .9rem}.c-telBtn small{font-size:9.5px}}
/* 〜399px はロゴ・電話・バーガーが1行に収まらないため、電話ボタンを詰める */
@media (max-width:399px){
  .c-telBtn{font-size:12.5px;padding:.3rem .5rem}
  .c-telBtn small{font-size:8.5px}
  .l-header__inner{gap:6px;padding-inline:10px}
  .c-hdrIc{min-width:46px;padding:5px 4px}
}
.c-hdrIc__bars{display:block;width:19px;height:14px;position:relative}
.c-hdrIc__bars i{position:absolute;left:0;width:19px;height:2.5px;background:var(--color_text);
  border-radius:2px;transition:transform .18s,opacity .18s}
.c-hdrIc__bars i:nth-child(1){top:0}
.c-hdrIc__bars i:nth-child(2){top:5.75px}
.c-hdrIc__bars i:nth-child(3){top:11.5px}
.c-hdrIc--burger[aria-expanded="true"] .c-hdrIc__bars i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
.c-hdrIc--burger[aria-expanded="true"] .c-hdrIc__bars i:nth-child(2){opacity:0}
.c-hdrIc--burger[aria-expanded="true"] .c-hdrIc__bars i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}

/* PC：電話＋問い合わせボタン。タブレット幅以上でのみ出す */
.l-header__cta{display:none}
.c-hdrTel{text-align:right;line-height:1.3}
.c-hdrTel__lead{display:block;font-size:10px;color:#666}
.c-hdrTel__num{display:block;font-size:19px;font-weight:700;color:var(--color_tel);text-decoration:none;letter-spacing:.01em}
.c-hdrTel__num:hover{color:var(--color_tel_dark);text-decoration:none}
.c-hdrTel__hrs{display:block;font-size:10px;color:#666}
.c-hdrBtn{display:inline-flex;align-items:center;gap:6px;background:var(--color_main);color:var(--color_text);
  font-weight:700;text-decoration:none;border-radius:6px;padding:.5em .95em;box-shadow:var(--btn_shadow);font-size:.86rem}
.c-hdrBtn:hover{background:var(--color_main_dark);color:#fff;text-decoration:none}
.c-hdrBtn small{display:block;font-size:.72em;font-weight:400}

/* グローバルナビ：モバイルはバーガーで開閉、768px以上で常時横並び */
.l-nav{display:none;border-bottom:1px solid var(--color_border);background:#fff}
.l-nav.is-open{display:block}
.l-nav ul{display:flex;flex-direction:column;gap:0;list-style:none;margin:0 auto;padding:0;max-width:calc(var(--container_size) + var(--pad_container) * 2)}
.l-nav li{margin:0}
.l-nav li+li a{border-top:1px solid var(--color_border)}
.l-nav a{display:block;padding:14px var(--pad_container);font-size:15px;text-decoration:none;
  color:var(--color_text);font-weight:700}
.l-nav a::after{content:"›";float:right;color:#aaa}
.l-nav a[aria-current="page"]{color:var(--color_main_dark)}

@media (min-width:768px){
  .l-header__mob{display:none}
  .l-header__inner{padding-block:5px}
  .l-header__cta{display:flex;align-items:center;gap:12px}
  .l-nav{display:block;background:var(--color_main_thin)}
  .l-nav ul{flex-direction:row;flex-wrap:wrap;gap:.2rem 1.1rem;padding:.25rem var(--pad_container);font-size:.85rem}
  .l-nav li+li a{border-top:0}
  .l-nav a{padding:.3rem 0;font-size:.85rem}
  .l-nav a::after{content:none}
}

/* ---------- ヒーロー ---------- */
/* PC用（横長 1536×939）とスマホ用（縦長 1086×1316）を picture で出し分ける。
   縦横比が違うので、CSS 側で幅ごとに aspect-ratio を指定して
   読み込み前のレイアウトシフト（CLS）を防ぐ。 */
/* aspect-ratio は FV（picture 内）だけに効かせる。
   .p-hero img で指定すると、同じセクション内の他の画像（正方形の onayami など）まで
   引き伸ばしてしまう。 */
.p-hero picture{display:block}
/* FV は本家 aichi-benriya.com と同じく、全幅ではなく本文と同じコンテンツ幅に収める。
   実測（1520px幅）：本家の FV は表示幅 800px・左位置 360px の中央寄せ。
   SP（375px幅）も 345px・左位置 15px でコンテナ内。PC/SP とも全幅ではない。 */
.p-hero picture{max-width:calc(var(--container_size) + var(--pad_container) * 2);
  margin-inline:auto;padding-inline:var(--pad_container);padding-top:2rem}
.p-hero picture img{width:100%;height:auto;aspect-ratio:1086/1316}
@media (min-width:768px){.p-hero picture img{aspect-ratio:1536/939}}
.p-hero__lead{padding-top:1.6rem}

/* ---------- テーブル ---------- */
.c-tableWrap{overflow-x:auto;margin:0 0 1.5rem}
table{border-collapse:collapse;width:100%;font-size:.92em;background:#fff}
th,td{border:1px solid var(--color_border--table);padding:.6em .7em;text-align:left;vertical-align:top}
thead th{background:var(--color_pale04);font-weight:700;white-space:nowrap}
tbody th{background:var(--color_gray);font-weight:700}
td.u-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- ボックス ---------- */
.c-box{background:var(--color_pale04);border:1px solid var(--color_border);border-radius:4px;padding:var(--box_padding);margin:0 0 1.5rem}
.c-box--note{background:var(--color_icon_announce_bg);border-color:var(--color_icon_announce)}
.c-box--quote{background:var(--color_pale02);border-left:4px solid var(--color_deep02)}
.c-box p:last-child,.c-box ul:last-child{margin-bottom:0}
blockquote{margin:0 0 1.5rem;padding:1rem 1.2rem;background:var(--color_pale02);border-left:4px solid var(--color_deep02);font-size:.95em}
blockquote p:last-child{margin-bottom:0}
blockquote cite{display:block;margin-top:.6em;font-size:.86em;font-style:normal;color:#666}

/* キャップボックス（SWELL cap_box is-style-onborder_ttl2 相当） */
.c-capBox{position:relative;border:2px solid var(--color_main);border-radius:6px;padding:1.6rem 1.2rem 1.2rem;margin:2rem 0}
.c-capBox__ttl{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--color_bg);padding:0 .8em;font-weight:700;font-size:.95em;white-space:nowrap}
.c-capBox p:last-child{margin-bottom:0}

/* お客様の声 */
.c-voice{display:flex;gap:.9rem;align-items:flex-start;
  background:#fff;border:1px solid var(--color_border);border-radius:4px;padding:1rem 1.1rem;margin:0 0 1rem;box-shadow:var(--box_shadow)}
.c-voice__meta{font-weight:700;font-size:.9em;color:var(--color_main_dark);margin:0 0 .5em}
.c-voice p:last-child{margin-bottom:0}
.c-voice__body{min-width:0}

/* ---------- 番号つきリスト（SWELL is-style-num_circle ＋ -list-under-dashed 相当） ---------- */
/* 本家 aichi-benriya.com の同一リストの computedStyle 実測値。
   実測（コンテンツ 1em = 18.56px 時）：
     ul  list-style:none / padding-left .25em / margin-bottom 2em / counter-reset
     li  padding-left 2em / padding-bottom .75em / margin-bottom .75em / line-height 1.5
         下線 1px dashed rgba(199,199,199,.5)（最終行にも引く＝本家と同じ）
     ::before  counter(li) / 1.8em の円 / 背景 #f4cf5f（--color_list_check）/ 白文字 / top -.15em / left 1px */
.c-numList{list-style:none;counter-reset:li;padding-left:.25em;margin:0 0 2em}
.c-numList li{position:relative;counter-increment:li;padding-left:2em;
  padding-bottom:.75em;margin-bottom:.75em;line-height:1.5;
  border-bottom:1px dashed rgba(199,199,199,.5)}
.c-numList li::before{content:counter(li);position:absolute;left:1px;top:-.15em;
  width:1.8em;height:1.8em;line-height:1.8em;border-radius:50%;
  background:var(--color_list_check);color:#fff;text-align:center;font-weight:500}

/* 男女のアイコン。装飾なので属性（70代男性など）は .c-voice__meta のテキストが担う。
   色は tokens.css の SWELL 実測パレットから：男性=deep02/pale02（青）、女性=deep01/pale01（赤）。 */
.c-voice__ico{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden}
.c-voice__ico svg{width:34px;height:34px;display:block;transform:translateY(2px)}
.c-voice__ico--m{background:var(--color_pale02)}
.c-voice__ico--m svg{fill:var(--color_deep02)}
.c-voice__ico--f{background:var(--color_pale01)}
.c-voice__ico--f svg{fill:var(--color_deep01)}
@media (max-width:480px){
  .c-voice{gap:.7rem;padding:.9rem 1rem}
  .c-voice__ico{width:38px;height:38px}
  .c-voice__ico svg{width:29px;height:29px}
}

/* ステップ */
.c-step{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:step}
.c-step>li{counter-increment:step;position:relative;padding:0 0 1.4rem 3rem;border-left:2px solid var(--color_main);margin-left:1rem}
.c-step>li:last-child{border-left-color:transparent;padding-bottom:0}
.c-step>li::before{
  content:"STEP " counter(step);position:absolute;left:-1rem;top:0;
  background:var(--color_main);color:var(--color_text);font-weight:700;font-size:.7rem;
  border-radius:3px;padding:.15em .5em;white-space:nowrap;
}
.c-step h3{border:0;padding:0;margin:1.6rem 0 .4em;font-size:1.05em}

/* FAQ（details/summary） */
/* FAQ は折りたたまない（[[page-types]] ハードルール／2026-09-09）。
   質問は h3＋「Q」バッジ、回答は直下に常時表示する。
   折りたたむとクローラーではなく「人が読まない」ため。 */
.c-faq{border:1px solid var(--color_border);border-radius:4px;margin:0 0 .8rem;background:#fff;overflow:hidden}
.c-faq__q{margin:0;padding:.85em 1.1em .85em 2.6em;position:relative;font-size:1em;font-weight:700;
  background:var(--color_pale04);border:0;line-height:1.5}
.c-faq__q::before{content:"Q";position:absolute;left:1em;top:.85em;color:var(--color_faq_q);font-weight:700}
.c-faq__a{padding:.9em 1.2em 1em 2.6em;position:relative}
.c-faq__a::before{content:"A";position:absolute;left:1em;top:.9em;color:var(--color_faq_a);font-weight:700}
.c-faq__a p:last-child{margin-bottom:0}

/* サービス料金カード */
.c-priceGrid{display:grid;gap:1rem;grid-template-columns:1fr;margin:0 0 1.5rem;padding:0;list-style:none}
@media (min-width:600px){.c-priceGrid{grid-template-columns:1fr 1fr}}
.c-priceCard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--color_border);border-radius:4px;background:#fff;margin:0;padding:0}
/* 写真はチョコサポの実際の作業事例（依頼者確認済み・2026-09-17）。640×360（16:9）に統一。
   ただし福井で撮影したものではないため、「福井の施工事例」とは書かない。
   お客様の声を「チョコサポにいただいた声」と表記しているのと同じ扱い。 */
.c-priceCard__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.c-priceCard__body{padding:1rem;display:flex;flex-direction:column;flex:1 1 auto}
.c-priceCard h3{border:0;padding:0;margin:0 0 .3em;font-size:1em}
.c-priceCard__fee{font-weight:700;color:var(--color_main_dark);font-size:1.15em;margin:0 0 .5em}
.c-priceCard ul{margin:0;padding-left:1.2em;font-size:.9em}
.c-priceGrid{align-items:stretch}

/* CTA帯 */
.p-cta{background:var(--color_main_thin);border-block:2px solid var(--color_main);padding:1.8rem 0;margin:2.5rem 0;text-align:center}
.p-cta__tel{display:inline-block;font-size:1.6rem;font-weight:700;color:var(--color_tel);text-decoration:none;letter-spacing:.02em}
.p-cta__tel:hover{color:var(--color_tel_dark);text-decoration:none}
.p-cta__note{font-size:.86em;color:#555;margin:.2em 0 1em}
.c-btn{display:inline-block;background:var(--color_main);color:var(--color_text);font-weight:700;
  text-decoration:none;border-radius:6px;padding:.8em 1.8em;box-shadow:var(--btn_shadow)}
.c-btn:hover{background:var(--color_main_dark);color:#fff;text-decoration:none}

/* パンくず */
.c-breadcrumb{font-size:.78rem;color:#666;padding:.6rem 0 0}
.c-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3em;margin:0;padding:0}
.c-breadcrumb li::after{content:"›";margin-left:.3em;color:#aaa}
.c-breadcrumb li:last-child::after{content:""}
.c-breadcrumb a{color:#666}

/* 内部リンク一覧 */
.c-linkList{list-style:none;padding:0;display:grid;gap:.5rem;grid-template-columns:1fr}
@media (min-width:600px){.c-linkList{grid-template-columns:1fr 1fr}}
.c-linkList a{display:block;border:1px solid var(--color_border);border-radius:4px;
  padding:.7em .9em;background:#fff;text-decoration:none;color:var(--color_text);font-weight:700;font-size:.95em}
.c-linkList a:hover{background:var(--color_pale04);text-decoration:none}
.c-linkList span{display:block;font-weight:500;font-size:.82em;color:#666;margin-top:.2em}

/* ---------- フッター ---------- */
.l-footer{background:var(--color_footer_bg);color:var(--color_footer_text);margin-top:3rem;padding:2rem 0 1.4rem}
.l-footer a{color:var(--color_footer_text)}
.l-footer__nav{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.5em 1.2em;font-size:.88rem}
.l-footer__note{font-size:.8rem;line-height:1.8;margin:0 0 1rem}
.l-footer__copy{font-size:.75rem;margin:0}

/* 固定CTA（モバイル）— takimoto-bassai の .fixcta デザインに準拠 */
.p-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(--color_border);z-index:60;
  box-shadow:0 -2px 10px rgba(0,0,0,.08)}
.p-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}
/* 電話側は番号そのものを出す。幅が画面の半分しかないので番号は15.5px・補足は9.5px */
.p-fixCta .t{background:var(--color_tel);color:#fff;font-size:15.5px;letter-spacing:-.01em}
.p-fixCta .t small{display:block;font-size:9.5px;font-weight:400;opacity:.92;margin-top:1px;letter-spacing:0}
.p-fixCta__ico{font-size:12px;margin-right:3px;vertical-align:1px}
.p-fixCta .e{background:var(--color_main);color:var(--color_text);display:flex;flex-direction:column;justify-content:center}
.p-fixCta .e small{display:block;font-size:9.5px;font-weight:400;opacity:.8;margin-top:2px}
/* /contact では自ページへのリンクを出さない（[[component-library]]
   「Contact page layout (JP)」— no redundant self-linking CTA）。電話のみ全幅。 */
.p-fixCta--telOnly .t{flex:1 1 100%}
@media (min-width:768px){.p-fixCta{display:none}}
@media (max-width:767px){body{padding-bottom:4.2rem}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ---------- 中段CTA（ラベル付きボックス＋吹き出し） ---------- */
/* 本家 aichi-benriya.com の SWELL ブロック
     .swell-block-capbox.is-style-onborder_ttl2 ＋ .swell-block-balloon(-bln-left / yellow)
   の computedStyle 実測値を静的CSSで再現したもの。
   実測（コンテンツ 1em = 18.56px 時）：
     ラベル   背景 #e82217 / 文字 .85em / padding .5em .75em / 左インセット 1em / 枠線に対し上下中央
     枠        1px solid #e82217、中身 padding 1.5em 1.25em 1.25em
     アイコン  60×60 円形・border 2px #ececec、吹き出しとの間隔 24px
     吹き出し  背景 #f9f7d2 / radius 8px / padding 1em / font-size .95em、尻尾は上から16px */
.c-midCta{margin-block:2.5rem}
.c-midCta__ttl{position:relative;top:1em;left:1em;display:inline-flex;
  background:var(--color_capbox);color:#fff;font-weight:700;font-size:.85em;
  line-height:1;padding:.5em .75em}
.c-midCta__body{border:1px solid var(--color_capbox);background:#fff;
  padding:1.5em 1.25em 1.25em}
.c-balloon{display:flex}
/* マスコットは既存のロゴ画像（800×226）から背景位置で切り出す。
   専用アイコンを別ファイルで持たず、ヘッダーで読み込み済みの画像を再利用する。
   マスコットの実バウンディングボックスは canvas の画素走査で実測：x 8〜183 / y 8〜215（176×208）。
   円の内側に 3px の余白を残して収まるよう、背景サイズと位置を算出している。 */
.c-balloon__icon{flex:0 0 auto;width:60px;height:60px;border-radius:50%;
  border:2px solid #ececec;background:#fff url(/img/logo_head.webp) no-repeat;
  background-size:208px auto;background-position:5px 1px}
.c-balloon__text{position:relative;margin-left:24px;margin-top:4px;
  background:#f9f7d2;border-radius:8px;padding:1em;font-size:.95em;line-height:1.6}
.c-balloon__text::before{content:"";position:absolute;left:-10px;top:16px;
  width:0;height:0;border-style:solid;border-width:8px 10px 8px 0;
  border-color:transparent #f9f7d2 transparent transparent}
.c-balloon__text p{margin:0}
.c-balloon__text a{font-weight:700}
.c-balloon__em{color:var(--color_deep01);font-size:1.2em}
/* 狭い画面ではアイコンを小さくし、吹き出しの余白を詰める */
@media (max-width:480px){
  .c-midCta__body{padding:1.5em 1em 1em}
  .c-balloon__icon{width:46px;height:46px;background-size:154px auto;background-position:4.5px 1.5px}
  .c-balloon__text{margin-left:14px;padding:.85em}
  .c-balloon__em{font-size:1.1em}
}

/* 自社調査の出典表記。本文より小さく、控えめに。 */
.c-src{font-size:.8em;color:#666;margin:-.5em 0 1.5em}

/* 本文中の赤字ボールド。SWELL実測の --color_deep01（#e44141）を使う。 */
.u-red{color:var(--color_deep01);font-weight:700}

/* ---------- お問い合わせフォーム ---------- */
/* [[component-library]]「Contact page layout (JP) — Hard Rules」に従う。
   3. 営業お断りの注意書きをフォームの上に置く
   4. フォームはカードにして、入力欄は白で浮かせる
   5. 注意書きとフォームの幅を揃え、どちらにも margin-inline:auto を効かせる
      （幅を切るだけでは中央に来ない。祖先の中央寄せは継承されない）
   6. 送信後の注記は中央寄せ・上に余白 */
.c-contactTel{display:inline-flex;flex-direction:column;align-items:center;margin:1rem 0 0}
.c-contactTel__hrs{margin:.2em 0 0;font-size:.85em;color:#666}

.c-formNote,.c-form,.c-formPrivacy{max-width:600px;margin-inline:auto}
.c-formNote{background:var(--color_pale04);border-left:6px solid var(--color_main);
  padding:.9em 1.1em;margin-block:1.2rem}
.c-formNote p{margin:0;font-size:.92em}

.c-form{background:var(--color_gray);border-radius:6px;padding:1.4rem 1.2rem}
.c-form__field{margin:0 0 1.1rem}
.c-form__field label{display:block;font-weight:700;font-size:.95em;margin:0 0 .35em}
.c-form__field input,.c-form__field select,.c-form__field textarea{
  display:block;width:100%;background:#fff;border:1px solid var(--color_border--table);
  border-radius:4px;padding:.65em .7em;font-family:inherit;font-size:1em;color:var(--color_text)}
.c-form__field textarea{resize:vertical}
.c-form__req,.c-form__opt{display:inline-block;margin-left:.5em;padding:.1em .5em;
  border-radius:3px;font-size:.72em;font-weight:700;vertical-align:middle}
.c-form__req{background:var(--color_tel);color:#fff}
.c-form__opt{background:#ddd;color:#555}
.c-form__help{margin:.4em 0 0;font-size:.82em;color:#666}
.c-form__consent{margin:0 0 1.1rem;font-size:.92em}
.c-form__consent label{display:flex;gap:.6em;align-items:flex-start;cursor:pointer}
.c-form__consent input{flex:0 0 auto;margin-top:.25em;width:1.1em;height:1.1em}
.c-form__submit{display:block;width:100%;text-align:center;border:0;cursor:pointer;
  font-family:inherit;font-size:1.05em}
.c-form .h-captcha{margin:0 0 1.1rem}
.c-formPrivacy{text-align:center;margin-top:20px;font-size:.85em;color:#666}

/* ハニーポット。display:none だと埋めないボットがいるため画面外に飛ばす */
.u-honeypot{position:absolute;left:-9999px;opacity:0}