/* =========================================================
     さわやか案(2026-09-24)
     本番と同じHTML・style.cssの上に、このファイルを最後に重ねて色と書体だけ差し替える。
     方針: 白×明るい青(#1E6FD9)、アクセントは青の濃淡のみ。見出しは明朝→Noto Sans JP太字、英字はJost→Montserrat。
     暗い面(サイドバー/強み/お問い合わせ)は白・薄い青へ。対応エリアの帯だけ青の面にして、ページに締まりを残す
     ========================================================= */
  :root{
    --navy: #1f2a3a;          /* 見出し・濃い文字(本番の紺の役) */
    --navy-deep: #0f3a73;     /* 写真の下地・フッター */
    --navy-soft: #2a5a9e;
    --cream: #f3f7fb;         /* 薄い青の面 */
    --paper: #ffffff;
    --ink: #1f2a3a;
    --ink-soft: #5b6b80;
    --amber: #1e6fd9;         /* 本番の金の役 → 明るい青 */
    --amber-bright: #1e6fd9;
    --blue: #1e6fd9;
    --blue-deep: #1558b0;
    --blue-pale: #e8f1fc;
    --line: rgba(31,42,58,0.10);
    --line-light: rgba(31,42,58,0.12);
  }

  /* ---- 書体 ---- */
  h1,h2,h3,.brand,.pre-logo,.faq-item summary{
    font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif !important;
    font-weight:700;letter-spacing:.05em;
  }
  .en,.eyebrow,.hero-tag,.brand small,.pre-logo small,.feat-num,.svc-row .n,.license-list li span.mark,
  .approach-loop span,.flow-step .step-num,.job-row dt,.tel-num,.foot-sns{
    font-family:"Montserrat",sans-serif !important;
  }
  .eyebrow,.hero-tag{font-weight:600;}
  .eyebrow{color:var(--blue);}
  .eyebrow::before{background:var(--blue);}
  .features .eyebrow,.contact .eyebrow{color:var(--blue);}
  .info .eyebrow{color:#fff;}
  .info .eyebrow::before{background:#fff;}

  /* ---- サイドバー(PC)・ヘッダー ---- */
  header{
    background:#fff;
    border-right:1px solid var(--line);
  }
  .brand{color:var(--ink);}
  .brand small{color:var(--blue);font-weight:600;}
  .nav-links a{color:var(--ink);font-weight:500;}
  .nav-links a:hover{color:var(--blue);}
  .nav-cta{color:var(--blue);font-weight:700;}
  .nav-cta:hover{color:var(--blue-deep);}
  .nav-cta .icon-circ{border-color:rgba(30,111,217,.4);}
  .nav-cta:hover .icon-circ{border-color:var(--blue);}
  .menu-btn span{background:var(--ink);}
  @media(max-width:900px){
    header,header.is-scrolled{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);}
    header.is-scrolled{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
    header.menu-open{background:#fff;border-bottom-color:var(--line);}
    .nav-panel{background:#fff;}
  }

  /* ---- 写真のヒーロー: 黒い影 → 青みの薄い影にして写真を明るく ---- */
  .hero{background:var(--navy-deep);}
  .hero-slide img{opacity:1;}
  .hero-scrim{
    background:linear-gradient(180deg, rgba(15,58,115,.10) 0%, rgba(15,58,115,.18) 40%, rgba(15,58,115,.62) 78%, rgba(15,58,115,.82) 100%);
  }
  .hero-tag{color:#fff;}
  .hero-tag::before{background:#fff;}
  @media(max-width:760px){
    .hero-scrim{background:linear-gradient(180deg, rgba(15,58,115,0) 38%, rgba(15,58,115,.5) 60%, rgba(15,58,115,.86) 84%, var(--navy-deep) 100%);}
  }

  /* ---- ボタン(明るい面の上は青) ---- */
  .btn-outline{color:var(--blue);font-weight:500;}
  .contact .btn-primary{color:var(--blue);font-weight:500;}

  /* ---- メッセージ ---- */
  .message h2{color:var(--ink);}
  .message h2 .accent{color:var(--blue);}
  .approach-loop span{color:rgba(30,111,217,.06);font-weight:600;}
  .typing .caret{background:var(--blue);}

  /* ---- 強み・応募の流れなど(本番は濃紺の帯) → 薄い青の面 ---- */
  .features{background:var(--cream);color:var(--ink);}
  .features::before{background:radial-gradient(ellipse at 20% 0%, rgba(30,111,217,.08), transparent 55%);}
  .features h2{color:var(--ink);}
  .features .head p{color:var(--ink-soft);}
  .feat-card{border-top-color:rgba(30,111,217,.25);}
  .feat-card h3{color:var(--ink);}
  .feat-card p{color:var(--ink-soft);}
  .fp-overlay{background:linear-gradient(180deg, rgba(15,58,115,.05) 0%, rgba(15,58,115,.35) 50%, rgba(15,58,115,.85) 100%);}
  .feat-panel:hover .fp-overlay{background:linear-gradient(180deg, rgba(15,58,115,0) 0%, rgba(15,58,115,.28) 50%, rgba(15,58,115,.8) 100%);}
  .feat-num{color:#fff;font-weight:600;}
  .feat-card .feat-num{color:var(--blue);}
  .fp-content p{color:rgba(255,255,255,.85);}
  /* 採用: 応募の流れ */
  .flow-step{border-bottom-color:rgba(30,111,217,.18);}
  .flow-step .step-num{color:var(--blue);font-weight:500;}
  .flow-step h3{color:var(--ink);}
  .flow-step p{color:var(--ink-soft);}
  .flow-glow-light{background:radial-gradient(closest-side,rgba(30,111,217,.16),transparent);}

  /* ---- 事業内容・施工実績 ---- */
  .svc-row h3{color:var(--ink);}
  .svc-row .n{color:var(--blue);font-weight:500;}
  .svc-chip{color:var(--ink);background:#fff;border-color:rgba(30,111,217,.2);}
  .works-grid figcaption,.works-loop-cap{background:linear-gradient(180deg,transparent,rgba(15,58,115,.78));}

  /* ---- 対応エリア・資格: ページで唯一の青い面 ---- */
  .info{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);}
  .info p{color:rgba(255,255,255,.88);}
  .tag,.property-row span{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08);}
  .license-list li{border-bottom-color:rgba(255,255,255,.3);color:#fff;}
  .license-list li span.mark{color:#fff;font-weight:600;}

  /* ---- 会社概要・FAQ ---- */
  .company-link{color:var(--blue);}
  .faq-item summary{color:var(--ink);}
  .faq-item summary .plus{color:var(--blue);border-color:rgba(30,111,217,.3);}

  /* ---- お問い合わせ: 濃紺 → 薄い青、電話は青塗りボタン ---- */
  .contact{background:var(--cream);color:var(--ink);}
  .contact::before{background:radial-gradient(ellipse at 50% 100%, rgba(30,111,217,.08), transparent 60%);}
  .contact h2{color:var(--ink);}
  .contact p{color:var(--ink-soft);}
  .tel-btn{background:var(--blue);border-color:var(--blue);color:#fff;border-radius:999px;font-weight:700;
    box-shadow:0 8px 20px -10px rgba(30,111,217,.6);}
  .tel-btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
  .tel-num{color:var(--ink-soft);}
  .contact-or{color:var(--ink-soft);}
  .contact-or::before,.contact-or::after{background:rgba(31,42,58,.15);}
  .form-group label{color:var(--ink);}
  .form-group label span{color:var(--blue);}
  .contact-form input,.contact-form textarea{background:#fff;border-color:rgba(31,42,58,.18);color:var(--ink);border-radius:6px;}
  .contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue);background:#fff;}
  .contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(31,42,58,.38);}
  .form-note{color:var(--ink-soft);}

  /* ---- フッター(濃い青) ---- */
  footer{background:var(--navy-deep);color:rgba(255,255,255,.7);border-top:0;}
  .foot-sns,.foot-nav a{color:rgba(255,255,255,.85);}
  .foot-sns:hover,.foot-nav a:hover{color:#fff;}
  footer .brand small{color:rgba(255,255,255,.75);}
  footer .brand{color:#fff;}
  .foot-bottom{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6);}

  /* ---- 開いたときの画面 ---- */
  .preloader{background:#fff;}
  .pre-logo{color:var(--ink);}
  .pre-logo small{color:var(--blue);}

  /* ---- 面の交互(白/薄い青)。本番の「暗い面・明るい面の交互」に当たるリズムを、ページごとの並びに関係なく保つ。
     1番目はヒーロー、対応エリア(.info)は青の面なので対象外 ---- */
  section:not(.hero):not(.info):nth-of-type(even){background:#fff;}
  section:not(.hero):not(.info):nth-of-type(odd){background:var(--cream);}

  /* ゴシックは明朝より字幅が広く、スマホで「まるごと|一社で。」と割れたため、色付きの語句をひとかたまりで折り返す。
     採用の見出しはタイピング表示で1文字ずつ分かれているので対象外 */
  .message h2:not(.typing-target) .accent{display:inline-block;}

  /* 写真に重ねていた青のグラデは全て取る(9/24 優奈さん)。
     写真の上の白文字は、影だけで読めるようにする */
  .hero-scrim,.fp-overlay,.feat-panel:hover .fp-overlay{background:none !important;}
  .works-grid figcaption,.works-loop-cap{background:none;}
  .hero-tag,.hero h1,.fp-content,.works-grid figcaption,.works-loop-cap{
    text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35);
  }

  /* 強みの3枚: 写真の上に文字を重ねず、写真(上)+文字(下の白い面)のカードにする */
  .feat-panel{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:0;padding-top:240px;background-color:#fff;
    background-size:100% 240px;background-position:top center;background-repeat:no-repeat;
    box-shadow:0 10px 30px -18px rgba(15,58,115,.35);
  }
  .fp-overlay{display:none;}
  .fp-content{text-shadow:none;padding:26px 24px 30px;}
  .feat-num{color:var(--blue);}
  .fp-content h3{color:var(--ink);}
  .fp-content p{color:var(--ink-soft);}
  @media(max-width:900px){.feat-panel{padding-top:220px;background-size:100% 220px;}}

  /* 施工実績の写真の見出し: グラデの代わりに白い小さな札 */
  .works-grid figcaption,.works-loop-cap{
    left:12px;right:auto;bottom:12px;padding:6px 12px;
    background:rgba(255,255,255,.94);color:var(--ink);text-shadow:none;
    font-weight:500;transform:none;opacity:1;
  }
  /* 明るい写真(木の梁・工事中)に切り替わっても見出しが沈まないよう、ヒーローだけ影を少し強める */
  .hero-tag,.hero h1{text-shadow:0 1px 4px rgba(0,0,0,.65),0 0 24px rgba(0,0,0,.45);}
  .hero-tag{font-weight:700;}