@charset "UTF-8";
/* 施策5 サービスページ改善で追加したコンポーネント。
   exterior-repair / rooftop-waterproofing / baikyaku の3ページで使用。
   pa- プレフィックスはモックアップ（build_common.py の PROPOSAL_CSS）からの移植であることを
   示すために維持している（モック⇄本番の差分を追いやすくするため）。
   レビュー注釈レイヤー（.pa-mockbar / .pa-anno / .pa-badge / #paTip / #paToggle /
   body.pa-annooff）とアコーディオン制御用の display 固定ルールは本番では不要なため移植していない。

   モックからの意図的な差異（2026-07-30）:
   .pa-reason / .pa-steps のカード見出しをモックの h4 から h3 に変更した。モックのままだと
   セクション見出し h2 の直下が h4 になり h3 を飛ばすため（h2→h4）。 */

/* ---- lead paragraph ---- */
.pa-lead{width:100%;font-feature-settings:"palt"}
.pa-lead p{color:#333;font-size:16px;line-height:30px;text-align:left;margin:0}
.pa-lead p + p{margin-top:14px}
.pa-lead .brand{color:#225594;font-weight:700}
.pa-note{color:#3c2f50;font-weight:700}
/* ---- check list ---- */
.pa-checks{width:100%;list-style:none;margin:0;padding:0;background:#fff;border:1px solid #d4d4d4;padding:6px 22px}
.pa-checks li{position:relative;padding:11px 0 11px 34px;color:#333;font-size:15px;line-height:1.7;border-bottom:1px dashed #d4d4d4;font-weight:500}
.pa-checks li:last-child{border-bottom:0}
.pa-checks li:before{content:"";position:absolute;left:2px;top:14px;width:20px;height:20px;border-radius:50%;background:#3c2f50}
.pa-checks li:after{content:"";position:absolute;left:8px;top:18px;width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.pa-navy .pa-checks li:before{background:#225594}
/* ---- reason cards ---- */
.pa-reasons{width:100%;display:grid;gap:16px}
.pa-reason{position:relative;background:#fff;border:1px solid #d4d4d4;border-left:5px solid #3c2f50;padding:22px 26px 20px 28px;overflow:hidden}
.pa-reason__bg{position:absolute;right:14px;top:2px;font-family:"Saira Extra Condensed",sans-serif;font-weight:700;font-size:70px;line-height:1;color:#eef1f6;pointer-events:none}
.pa-reason h3{margin:0 0 8px;color:#3c2f50;font-weight:700;font-size:19px;line-height:1.5;position:relative;padding-right:58px}
.pa-reason h3 .pa-num{color:#225594;margin-right:9px;font-family:"Saira Extra Condensed",sans-serif;font-size:23px;font-weight:700}
.pa-reason p{margin:0;color:#333;font-size:15px;line-height:28px;position:relative}
/* ---- table ---- */
.pa-tablewrap{width:100%;overflow-x:auto}
/* common.css がグローバルに table{table-layout:fixed} を当てており、列幅が均等固定になる。
   そのため長い項目名が語中で折り返したり、white-space:nowrap の内容がセル枠をはみ出す
   （SPで発生・クライアント指摘 2026-08-19）。テーマ自身も column-article.css で同じ解除を
   しているので、それに倣って内容に応じた列幅にする。はみ出す分は .pa-tablewrap が横スクロールする。 */
.pa-table{border-collapse:collapse;table-layout:auto;width:100%;background:#fff;font-size:15px;min-width:460px}
.pa-table thead th{background:#3c2f50;color:#fff;font-weight:700;padding:12px 16px;text-align:left;line-height:1.5}
.pa-table tbody th{background:#eaeff5;color:#3c2f50;font-weight:700;text-align:left;padding:12px 16px;vertical-align:top;border-top:1px solid #d4d4d4;line-height:1.6}
.pa-table tbody td{padding:12px 16px;border-top:1px solid #d4d4d4;color:#333;vertical-align:top;line-height:1.7}
.pa-table.-cycle tbody td:last-child{font-family:"Saira Extra Condensed",sans-serif;font-weight:700;color:#225594;font-size:17px;white-space:nowrap}
/* ---- steps ---- */
.pa-steps{width:100%;list-style:none;counter-reset:pa;margin:0;padding:0}
.pa-steps li{counter-increment:pa;position:relative;padding:0 0 22px 60px;min-height:40px}
.pa-steps li:before{content:counter(pa);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#3c2f50;color:#fff;font-family:"Saira Extra Condensed",sans-serif;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;z-index:1}
.pa-steps li:after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:#c9c5cf}
.pa-steps li:last-child{padding-bottom:0}
.pa-steps li:last-child:after{display:none}
.pa-steps h3{margin:8px 0 3px;color:#3c2f50;font-weight:700;font-size:17px;line-height:1.5}
.pa-steps p{margin:0;color:#333;font-size:15px;line-height:26px}
/* ---- area badges ---- */
.pa-area{display:flex;gap:10px;flex-wrap:wrap;width:100%;margin:2px 0}
.pa-area span{background:#eaeff5;color:#3c2f50;border:1px solid #c1cfe0;border-radius:30px;padding:6px 20px;font-weight:700;font-size:15px}
/* ---- summary box ---- */
.pa-summary{width:100%;background:#3c2f50;color:#fff;padding:30px 34px;box-sizing:border-box}
.pa-summary h3{margin:0 0 10px;font-size:20px;font-weight:700;color:#fff}
.pa-summary p{margin:0;color:#e7e4ec;font-size:15px;line-height:30px}
/* ---- tel / cta block ---- */
.pa-cta{width:100%;box-sizing:border-box;display:flex;gap:16px 34px;align-items:center;flex-wrap:wrap;justify-content:center;background:#eaeff5;border:1px solid #c1cfe0;padding:24px 28px}
.pa-cta__tel{text-align:left}
.pa-cta__tel .lab{display:block;font-size:12px;color:#555;letter-spacing:.04em}
.pa-cta__tel .n{font-family:"Saira Extra Condensed",sans-serif;font-weight:700;font-size:36px;color:#3c2f50;line-height:1;letter-spacing:.5px}
.pa-cta__tel .n:before{content:"\260E";font-size:21px;margin-right:7px}
.pa-cta__tel .hrs{font-size:12px;color:#555}
/* faq: Q prefix already in text; keep native accordion */
/* FAQ(.pa-faq)の開閉アイコンを見出しの高さに対して縦中央に置く（2026-07-30）。
   single.css の item__ac_item_a は top を固定値（PC 15px / SP 2.666vw）で置いているため、
   質問文が2行になると見出しが縦に伸びてアイコンだけ上に取り残される。
   テーマ自身が item__ac_item_b で使っている top:50% + translateY(-50%) と同じ方式に揃える。
   ブレークポイントに依らず正しくなるようメディアクエリの外に置く（single.css より後に
   読み込まれ、セレクタの詳細度は同値なので後勝ちで適用される）。 */
.pa-faq .item__ac_item_a_headline:before,
.pa-faq .item__ac_item_a_headline:after{top:50%;transform:translateY(-50%)}
/* ---- self-contained buttons (for new_answer template w/o single.css) ---- */
.pa-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;margin:4px 0}
.pa-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:15px;padding:15px 26px;border-radius:6px;border:2px solid #225594;color:#225594;background:#fff;transition:.2s;line-height:1.3}
.pa-btn:after{content:"→";font-size:13px}
.pa-btn:hover{background:#225594;color:#fff}
.pa-btn.-fill{background:#225594;color:#fff}
.pa-btn.-fill:hover{background:#173f6e;border-color:#173f6e}
/* ---- self-contained FAQ (details/summary) ---- */
.pa-faq2{width:100%}
.pa-faq2 details{background:#fff;border:1px solid #d4d4d4;margin:10px 0;overflow:hidden}
.pa-faq2 summary{list-style:none;cursor:pointer;padding:16px 48px 16px 52px;font-weight:700;color:#225594;position:relative;font-size:15.5px;line-height:1.6}
.pa-faq2 summary::-webkit-details-marker{display:none}
.pa-faq2 summary:before{content:"Q";position:absolute;left:18px;top:13px;color:#225594;font-family:"Saira Extra Condensed",sans-serif;font-size:23px;font-weight:700}
.pa-faq2 summary:after{content:"";position:absolute;right:22px;top:20px;width:9px;height:9px;border-right:2px solid #225594;border-bottom:2px solid #225594;transform:rotate(45deg);transition:.2s}
.pa-faq2 details[open] summary:after{transform:rotate(-135deg);top:24px}
.pa-faq2 .pa-a{padding:0 24px 18px 52px;color:#333;font-size:15px;line-height:1.95}
.pa-faq2 .pa-a a{color:#225594}
/* baikyaku (new_answer, navy #225594) variants */
.pa-navy .pa-reason{border-left-color:#225594}
.pa-navy .pa-reason h3{color:#225594}
.pa-navy .pa-table thead th{background:#225594}
.pa-navy .pa-table tbody th{background:#e2e9f1;color:#225594}
.pa-navy .pa-steps li:before{background:#225594}
.pa-navy .pa-steps h3{color:#225594}
.pa-navy .pa-summary{background:#225594}
.pa-navy .pa-area span{color:#225594}
.pa-navy .pa-cta__tel .n{color:#225594}
/* dark teal section (baikyaku -bg02): bare text on the section must be light */
.pa-navy .pa-lead p{color:#fff}
.pa-navy .pa-lead .brand{color:#ffd24a}
.pa-navy .pa-lead a{color:#ffd24a}
.pa-navy .pa-steps h3{color:#fff}
.pa-navy .pa-steps p{color:#e6eef7}
.pa-navy .pa-steps li:after{background:rgba(255,255,255,.45)}
@media(max-width:900px){.pa-reason h3{padding-right:44px}.pa-reason__bg{font-size:52px}}

/* ---- 帯見出しの h1 降格に伴う代替スタイル（exterior-repair / rooftop-waterproofing）----
   ページ内の h1 が「帯（建物管理・賃貸管理）」と「本文H1」で2本になっていたため、
   本文側の帯を <h1> から <div class="repair-headline__ttl"> に降格した。
   見た目は single.css の #repair_single > .headline .front h1 と同一（3ブレークポイント）。
   他の /management/repair/ 配下ページは <h1> のままなので single.css 側は変更していない。 */
@media screen and (min-width: 1024px) {
  #repair_single > .headline .front .repair-headline__ttl{color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:30px;line-height:1}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #repair_single > .headline .front .repair-headline__ttl{color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:2.7272727273vw;line-height:1}
}
@media screen and (max-width: 767px) {
  #repair_single > .headline .front .repair-headline__ttl{color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:6vw;line-height:1}
}

/* ---- 積み重ね時の縦間隔（baikyaku「不動産売却の流れと対応エリア」）----
   ol.pa-steps → div.pa-lead（対応エリア文）→ div.pa-area（バッジ）→ div.pa-lead（税金文）が
   余白ゼロで直に積まれていたため、この並びにだけ効く隣接セレクタで間隔を与える
   （クライアント指示 2026-07-30）。ext / roof では pa-area の前後が item__text_normal /
   item__link_button なのでこの3ルールは一致せず、影響しない。 */
.pa-steps + .pa-lead,
.pa-lead + .pa-area,
.pa-area + .pa-lead{margin-top:24px}

/* ---- 段落と表の間隔（baikyaku「売る／活用する」比較）----
   div.pa-lead（売却は選択肢の一つです…）→ div.pa-tablewrap（比較表）→ div.pa-lead（当社は…）が
   余白ゼロで直に積まれていたため間隔を与える（クライアント指示 2026-07-30）。
   t_methods は直前が h2・直後が SPC のためこの2ルールに一致しない。
   ext / roof の pa-tablewrap も前後が item__text_normal / アコーディオンなので影響しない。 */
.pa-lead + .pa-tablewrap,
.pa-tablewrap + .pa-lead{margin-top:24px}

/* =========================================================================
   SP調整（クライアント指示 2026-07-30）
   ブレークポイントはテーマ既存の max-width:767px に合わせる
   （common.css / main.css / answer.css / single.css と同一）。
   ========================================================================= */
@media screen and (max-width: 767px) {

  /* ---- よくある質問の左右に余裕を持たせる ----
     .pa-faq（exterior-repair / rooftop-waterproofing）は single.css の item__ac_item_a を
     流用しているが、SPでは headline に左右padding が無く、h3 も padding-right:0 /
     line-height:1 のため、right:0 に置かれた開閉アイコン（5.2vw）に質問文が重なって窮屈だった。 */
  .pa-faq{box-sizing:border-box;padding:0 4vw}
  .pa-faq .item__ac_item_a_headline{padding:4vw 0}
  .pa-faq .item__ac_item_a_headline h3{padding-right:9vw;line-height:1.5}

  /* baikyaku は details/summary 版（.pa-faq2）。左右52px/48pxで詰まってはいないが、
     左右のバランスを揃えて本文幅を少し広げる。 */
  .pa-faq2 summary{padding:14px 40px 14px 40px}
  .pa-faq2 summary:before{left:14px}
  .pa-faq2 summary:after{right:18px}
  .pa-faq2 .pa-a{padding:0 20px 16px 40px}

  /* ---- CTA ---- */
  /* 受付時間を電話番号の次の行から始める。従来は .n の直後にインラインで続き、
     「（平日）」だけが折り返して読みにくかった。 */
  .pa-cta{padding:22px 16px;gap:14px}
  .pa-cta__tel{width:100%}
  .pa-cta__tel .hrs{display:block;margin-top:4px}

  /* ボタンを横いっぱいに（baikyaku の pa-btn） */
  .pa-btns{flex-direction:column;gap:12px}
  .pa-btn{width:100%;box-sizing:border-box;justify-content:center}

  /* exterior-repair / rooftop-waterproofing の CTA は item__link_button を使っており
     SPでは .opt_size_small a が width:80vw 固定。pa-cta 内だけ100%にする。 */
  .pa-cta .item__link_button{width:100%}
  .pa-cta .item__link_button a,
  .pa-cta .item__link_button.opt_size_small a{width:100%;justify-content:center;padding-left:0}
}

/* 表セル内で括弧が途中改行して閉じ括弧だけ孤立するのを防ぐ（クライアント指示 2026-08-19）。
   例: 「不動産再生(フルリノベーショ / ン)」→「不動産再生 / (フルリノベーション)」 */
.pa-nb{white-space:nowrap}

/* ---- 工法紹介ブロック（カーボピンネット工法 / exterior-repair）----
   クライアント指示 2026-08-19。施工事例と対応エリアの節に、予防保全型工法の
   説明・比較図・before/after 写真を追加したもの。 */
.pa-method__ttl{width:100%;margin:0;color:#3c2f50;font-weight:700;font-size:19px;line-height:1.5}
.pa-figure{width:100%;margin:0;box-sizing:border-box;background:#fff;border:1px solid #d4d4d4;padding:16px;text-align:center}
.pa-figure img{max-width:100%;height:auto}
.pa-ba{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pa-ba figure{margin:0;box-sizing:border-box;background:#fff;border:1px solid #d4d4d4;padding:12px}
.pa-ba img{width:100%;height:auto;display:block}
.pa-ba figcaption{margin-top:8px;text-align:center;color:#3c2f50;font-family:"Saira Extra Condensed",sans-serif;font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
/* 積み重ね時の縦間隔（上の .pa-steps/.pa-lead/.pa-area 群と同じ考え方） */
.pa-lead + .pa-method__ttl{margin-top:26px}
.pa-method__ttl + .pa-lead,
.pa-lead + .pa-figure,
.pa-figure + .pa-ba{margin-top:16px}

/* ---- クライアント指示 2026-08-19 ----
   (1) CTAボタンのラベルを中央ぞろえに。
       single.css の .item__link_button a は justify-content:flex-start ＋ padding-left で
       ラベルが左に寄る。枠自体は opt_position_center で中央にあるがラベルだけ左寄せだった。
       矢印アイコンは :before/:after で右端に絶対配置されるため、中央寄せしても重ならない。
       対象は「現地調査・お見積りを無料で相談」の4本のみ（他は opt_size_small opt_position_left）。 */
.item__link_button.opt_size_large.opt_position_center a{justify-content:center;padding-left:0;padding-right:0}

/*  (2) 句点のあとの改行をそのまま表示する。
       テーマは .item__text_normal p と .item__ac_child_a_left p に white-space:pre-wrap を
       持つが、防水の工法説明（.item__ac_item_b_explain）だけ指定が無く改行が潰れていた。 */
.item__ac_item_b_explain p{white-space:pre-wrap}