@charset "utf-8";
/*
 * 整備工場LP（seibi-koujou）専用CSS
 *
 * reference/kotonohalpAv28.html の <style> 内容を外部化したもの（確定版v28基準）。
 * WordPress移植のための機械的調整のみ実施：
 *   - body{...} セレクタを body.lp-seibi-koujou{...} へ限定（スコープ化）
 * 上記以外のCSS内容（色・余白・文字サイズ・レイアウト・レスポンシブ）はv28のまま。
 * common.css を前提にせず、本ファイル単独でv28の表示が成立する。
 *
 * @package kotonohalab
 */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body.lp-seibi-koujou{margin:0;-webkit-font-smoothing:antialiased;word-break:auto-phrase;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 20px;}
  h1,h2,h3{line-height:1.6;letter-spacing:.015em;font-feature-settings:"palt";}
  p{margin:0 0 1.2em;}
  a{color:inherit;}
  a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
  ::selection{background:rgba(46,117,182,.16);}
  section{padding:76px 0;position:relative;overflow:hidden;}
  section p{max-width:780px;}
  .pc-only{display:none;}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
  .brand{display:flex;align-items:center;}
  .brand-logo{display:block;height:26px;width:auto;}
  .symptoms b{font-weight:inherit;color:inherit;} /* 太字は使わず全文を静かに読ませる */
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary{list-style:none;cursor:pointer;position:relative;}
  footer.site .foot-logo{display:block;height:32px;width:auto;margin:0 0 14px;}
  @media(min-width:640px){.wrap{padding:0 32px;}}
  @media(min-width:900px){.wrap{padding:0 48px;}.pc-only{display:inline;}}

  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

  :root{
    --blue:#2e75b6;--blue-deep:#235a8e;--navy:#17334f;
    --ink:#38424c;--muted:#687582;
    --base:#fafbfc;--tint:#edf3f8;--steel:#f4f7fa;
    --sand:#c2a566;--sand-deep:#a2854b;
    --line:#dfe4ea;--line-cool:#d5e1ec;--gridline:#e5edf4;
  }
  body.lp-seibi-koujou{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--base);font-size:16px;line-height:2.0;letter-spacing:.02em;}
  h1,h2,h3{font-weight:700;}

  header.site{background:rgba(250,251,252,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
  .nav-cta{color:var(--blue-deep);text-decoration:none;font-size:14px;font-weight:700;padding:9px 20px;border:1px solid var(--blue);border-radius:5px;white-space:nowrap;transition:background .15s,color .15s;}
  .nav-cta:hover{background:var(--blue);color:#fff;}

  .kicker{color:var(--sand-deep);font-size:13.5px;letter-spacing:.22em;font-weight:700;margin:0 0 20px;display:flex;align-items:center;gap:14px;}
  .kicker::before{content:"";flex:none;width:26px;height:1px;background:var(--sand);}
  h2.sec{font-size:24px;color:var(--navy);margin:0 0 14px;line-height:1.65;}
  .sec-lead{color:var(--muted);font-size:15.5px;margin:14px 0 0;}
  .sec-a{background:#fff;}
  .sec-b{background:var(--tint);}
  .sec-c{background:var(--steel);}
  .sec-d{background:#fff;}

  .hero{
    /* 薄いブルーグレーのグラデーションを基本に、方眼は右側40%程度のみ。
       左の文章側は上掛けのグラデーションで方眼を自然に消す。線は薄く、間隔は32pxに拡大 */
    background:
      linear-gradient(90deg,#f4f7fa 0%,#f2f6f9 46%,rgba(242,246,249,.55) 62%,rgba(242,246,249,0) 78%),
      linear-gradient(rgba(30,58,88,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(30,58,88,.05) 1px,transparent 1px),
      linear-gradient(163deg,#f4f7fa 0%,#e7eef5 100%);
    background-size:auto,32px 32px,32px 32px,auto;
    border-bottom:1px solid var(--line-cool);
    padding:84px 0 88px;
  }
  .hero .catch{font-size:17.5px;font-weight:600;color:var(--navy);line-height:2.0;margin:0 0 26px;border-left:3px solid var(--sand);padding-left:16px;}
  .hero h1{font-size:31px;color:var(--navy);margin:0 0 26px;line-height:1.55;font-weight:800;}
  .hero .fv-body{color:#45515d;font-size:16.5px;margin:0;}

  .lead-in{font-size:16px;margin:22px 0 0;}
  .symptoms{list-style:none;margin:34px 0 0;padding:0;max-width:900px;border-top:1px solid var(--line);}
  .symptoms li{position:relative;padding:21px 4px 21px 40px;border-bottom:1px solid var(--line);font-size:16px;line-height:2.0;}
  .symptoms li::before{content:"";position:absolute;left:6px;top:31px;width:12px;height:12px;border:1.5px solid var(--sand);transform:rotate(45deg);background:#fff;}

  .two-lines{margin:26px 0 0;} /* 次の文と同じフォント・サイズ・色（強調なし） */

  /* 工程フロー：矢羽根（進むほど濃くなる） */
  .hflow{display:flex;flex-direction:column;max-width:230px;margin:34px 0 40px;}
  .arr{display:none;}
  .hnode{
    text-align:center;font-weight:700;font-size:15px;color:var(--navy);
    padding:13px 10px 22px;margin-top:-9px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),50% 100%,0 calc(100% - 11px));
  }
  .hnode:first-child{margin-top:0;}
  .hnode:last-child{clip-path:none;padding-bottom:13px;border-radius:0 0 4px 4px;}
  .hnode:nth-child(1){background:#dce9f5;}
  .hnode:nth-child(3){background:#c8def0;}
  .hnode:nth-child(5){background:#abcce8;}
  .hnode:nth-child(7){background:#84b3da;color:#fff;}
  .hnode:nth-child(9){background:#548fc2;color:#fff;}
  .hnode:nth-child(11){background:#2e75b6;color:#fff;}

  .points-lead{font-size:16px;font-weight:600;color:var(--navy);margin:0 0 4px;}

  /* 段取り・手順・共有：改善のステップ（縦レール） */
  .points{position:relative;margin:26px 0 40px;padding-left:48px;counter-reset:pt;}
  .points::before{content:"";position:absolute;left:16px;top:10px;bottom:14px;width:2px;background:#bed2e4;}
  .point{position:relative;counter-increment:pt;padding:0 0 32px;}
  .point:last-child{padding-bottom:0;}
  .point::before{
    content:counter(pt,decimal-leading-zero);
    position:absolute;left:-48px;top:0;
    width:34px;height:34px;border-radius:50%;
    background:var(--navy);color:#fff;
    font-size:12.5px;font-weight:700;letter-spacing:.04em;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 4px var(--tint);
  }
  .point .pt{font-size:19px;font-weight:700;color:var(--navy);margin:2px 0 8px;line-height:1.5;}
  .point .pd{font-size:15.5px;margin:0;line-height:2.0;max-width:680px;}

  /* 強み：現場→管理→指導のキャリアライン */
  .strength-grid{display:block;margin-top:32px;}
  .cred-box{position:relative;margin:0 0 40px;padding:4px 0 4px 30px;max-width:520px;}
  .cred-box::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;background:#c9b788;}
  .cred-box p{position:relative;margin:0 0 24px;font-size:16px;font-weight:700;color:var(--navy);line-height:1.9;}
  .cred-box p:last-child{margin-bottom:0;}
  .cred-box p::before{content:"";position:absolute;left:-29px;top:11px;width:11px;height:11px;background:var(--sand);box-shadow:0 0 0 4px var(--steel);}
  .cred-box p b{color:var(--blue-deep);font-size:20px;font-weight:800;}
  .strength-body p{font-size:16px;max-width:780px;}
  /* 詰まりを見つける／実行できる形にする：アイコン＋見出し＋説明の2ブロック */
  .how{display:grid;grid-template-columns:1fr;gap:30px;margin-top:36px;}
  .how-item{border-left:2px solid var(--line-cool);padding-left:22px;}
  .how-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
  .how-icon{flex:none;width:46px;height:46px;border-radius:50%;background:#e7eff7;display:flex;align-items:center;justify-content:center;color:var(--navy);}
  .how-icon svg{width:24px;height:24px;}
  .how-title{font-size:17.5px;font-weight:700;color:var(--navy);margin:0;line-height:1.6;}
  .how-text{font-size:15.5px;line-height:2.0;margin:0;color:var(--ink);}

  .case-list{margin-top:34px;border-top:1px solid var(--line);}
  .case-row{border-bottom:1px solid var(--line);padding:26px 4px;display:flex;flex-direction:column;gap:6px;transition:background .18s;}
  .case-row:hover{background:#f5f9fc;}
  .case-row .co{font-size:13px;color:var(--sand-deep);font-weight:700;letter-spacing:.08em;margin:0;}
  .case-row h3{font-size:17px;color:var(--navy);margin:0;line-height:1.7;font-weight:600;}
  .case-row .more{font-size:14px;color:var(--blue);text-decoration:none;font-weight:600;margin-top:4px;white-space:nowrap;}
  .case-row:hover .more{text-decoration:underline;}

  .faq-sec{background:#f8fafc;border-top:1px solid var(--line);}
  .faq{margin-top:32px;max-width:900px;border-top:1px solid var(--line);}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{font-weight:600;color:var(--navy);font-size:16px;padding:21px 42px 21px 0;line-height:1.8;}
  .faq summary:hover{color:var(--blue-deep);}
  .faq summary::after{content:"＋";position:absolute;right:6px;top:20px;color:var(--sand-deep);font-weight:400;font-size:19px;}
  .faq details[open] summary::after{content:"−";}
  .faq .a{padding:2px 0 26px;font-size:15.5px;line-height:2.0;max-width:800px;}
  .faq .a p{margin:0;}
  .faq-link{display:inline-block;margin-top:12px;color:var(--blue);font-weight:600;font-size:14px;text-decoration:none;}
  .faq-link:hover{text-decoration:underline;}

  .contact{
    /* ごく薄いベージュ背景に白いCTAカードを1枚置く。FAQ→フッターの流れに自然に収める */
    background:#f8f5ef;border-top:1px solid var(--line);
    scroll-margin-top:72px;padding:80px 0;
  }
  .cta-card{
    background:#fff;border:1px solid #e9e3d5;border-radius:10px;
    padding:36px 22px;max-width:980px;margin:0 auto;
    box-shadow:0 2px 12px rgba(70,58,32,.05);
  }
  .contact h2.sec{line-height:1.75;margin-bottom:24px;}
  .contact p{color:var(--ink);margin-bottom:1.35em;}
  .cta-area{margin-top:34px;}
  .btn{display:inline-block;background:var(--sand);color:#2a2110;text-decoration:none;font-weight:700;font-size:16.5px;padding:15px 40px;border-radius:6px;letter-spacing:.03em;white-space:nowrap;box-shadow:0 1px 4px rgba(70,58,32,.14);transition:transform .15s,background .15s;}
  .btn:hover{transform:translateY(-1px);background:#cbb078;}
  .btn:focus-visible{outline:2px solid var(--sand-deep);outline-offset:3px;}

  footer.site{background:#fff;border-top:1px solid var(--line);color:var(--muted);padding:52px 0;font-size:13.5px;line-height:2.0;text-align:center;}
  footer.site .foot-logo{margin:0 auto 16px;}
  footer.site .tag{color:var(--sand-deep);margin:0 0 14px;font-size:14.5px;font-weight:600;letter-spacing:.08em;}
  footer.site .info{margin:0 0 4px;}
  footer.site .site-link{margin:0;}
  footer.site a{color:var(--blue);}

  @media(min-width:640px){
    /* 工程フロー：横の矢羽根に切り替え */
    .hflow{flex-direction:row;max-width:920px;margin:38px 0 44px;}
    .hnode{
      flex:1 1 0;min-width:0;padding:15px 8px 15px 18px;margin:0 0 0 -12px;font-size:15px;
      clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);
      border-radius:0;
    }
    .hnode:first-child{margin-left:0;padding-left:12px;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);}
    .hnode:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,15px 50%);padding-bottom:15px;}
  }
  @media(min-width:900px){
    body.lp-seibi-koujou{font-size:17px;}
    section{padding:108px 0;}
    .hero{padding:120px 0 124px;}
    .hero .catch{font-size:20px;padding-left:18px;}
    .hero h1{font-size:46px;letter-spacing:.01em;}
    .hero .fv-body{font-size:17.5px;}
    h2.sec{font-size:30px;}
    h2.one-line{letter-spacing:0;white-space:nowrap;}
    .kicker{margin-bottom:22px;}
    .sec-lead{font-size:16px;}
    .lead-in{font-size:16.5px;}
    .symptoms li{padding:24px 8px 24px 48px;font-size:16.5px;}
    .symptoms li::before{left:8px;top:34px;}
    .hnode{font-size:15.5px;}
    .points-lead{font-size:16.5px;}
    .points{padding-left:56px;margin:30px 0 44px;}
    .points::before{left:18px;}
    .point{padding-bottom:38px;}
    .point::before{left:-56px;width:38px;height:38px;font-size:13.5px;}
    .point .pt{font-size:20px;}
    .point .pd{font-size:16px;}
    /* 強み：3つの実績を1本の線上に（現場→管理→指導） */
    .cred-box{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:960px;padding:34px 0 0;margin:40px 0 44px;}
    .cred-box::before{left:10%;right:10%;top:9px;bottom:auto;width:auto;height:2px;}
    .cred-box p{margin:0;text-align:center;font-size:16px;}
    .cred-box p::before{left:50%;top:-30px;transform:translateX(-50%);box-shadow:0 0 0 4px var(--steel);}
    .cred-box p b{font-size:21px;}
    .strength-body p{font-size:16.5px;}
    .how{grid-template-columns:1fr 1fr;gap:48px;max-width:960px;}
    .how-title{font-size:18px;}
    .case-row{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;padding:30px 8px;}
    .case-row .body{flex:1;}
    .case-row h3{font-size:18px;}
    .case-row .more{margin-top:0;flex:none;}
    .faq summary{font-size:16.5px;padding:24px 44px 24px 0;}
    .faq summary::after{top:23px;}
    .faq .a{font-size:16px;}
    .contact{padding:112px 0;}
    .cta-card{padding:56px 64px;}
    .brand-logo{height:28px;}
    footer.site .foot-logo{height:34px;}
  }

  @media(min-width:1280px){
    body.lp-seibi-koujou{font-size:18px;}
    .wrap{max-width:1300px;padding:0 64px;}
    section{padding:124px 0;}
    .hero{padding:136px 0 140px;}
    .hero .catch{font-size:21px;}
    .hero h1{font-size:50px;}
    .hero .fv-body{font-size:18px;max-width:820px;}
    h2.sec{font-size:32px;}
    .kicker{font-size:14.5px;}
    .sec-lead{font-size:17px;}
    section p{max-width:860px;}
    .symptoms{max-width:1000px;}
    .symptoms li{font-size:17px;}
    .hflow{max-width:1040px;}
    .hnode{font-size:16px;}
    .point .pd{max-width:760px;font-size:16.5px;}
    .cred-box{max-width:1060px;}
    .strength-body p{font-size:17px;max-width:1060px;} /* 実績ラインと同幅 */
    .how{max-width:1060px;gap:56px;}
    .how-title{font-size:19px;}
    .how-text{font-size:16px;}
    .case-row h3{font-size:18.5px;}
    .faq{max-width:1000px;}
    .faq summary{font-size:17px;}
    .faq .a{font-size:16.5px;}
    .contact{padding:120px 0;}
    .cta-card{max-width:1060px;padding:60px 72px;}
    footer.site{font-size:14px;}
  }