/* =====================================================================
   header-footer.css ― コーポレートサイトと同じヘッダー／フッターを
   ブログ（Cocoon）に再現するための自己完結スタイル。
   Cocoon本体と衝突しないよう、すべて #bpc-corp-header / #bpc-corp-footer /
   .bpc-sp-cta 配下にスコープしている。配色・寸法はコーポレートの
   style.css + brand.css + custom.css の最終適用値をそのまま写している。
   ===================================================================== */
:root{
  --bpc-navy:#113662; --bpc-navy-d:#0d2a4d;
  --bpc-teal:#15aab8; --bpc-teal-d:#0f8a96;
}

/* --- Cocoon標準のヘッダー／フッター／トップ戻りボタンを隠す --- */
#header-container,#header,#navi,#navi-in,.navi-menu-button,
#footer,.footer,#footer-in,.go-to-top-button,#go-to-top{
  display:none !important;
}

/* ===================== ヘッダー ===================== */
#bpc-corp-header *{box-sizing:border-box}
#bpc-corp-header a{text-decoration:none}
#bpc-corp-header img{max-width:100%;display:block}
#bpc-corp-header .site-header{
  position:sticky;top:0;z-index:9999;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(17,54,98,.12);
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:14px;line-height:1.9;letter-spacing:.02em;color:var(--bpc-navy);
}
#bpc-corp-header .header-inner{
  width:100%;max-width:none;margin:0 auto;padding:0 30px;
  display:flex;align-items:center;justify-content:flex-start;
  min-height:72px;gap:20px;
}
#bpc-corp-header .logo{display:inline-flex;align-items:center;min-width:78px}
#bpc-corp-header .logo-img{width:auto;height:48px;object-fit:contain}

#bpc-corp-header .global-nav{
  display:flex;align-items:center;gap:18px;
  font-size:12px;white-space:nowrap;margin-left:40px;
}
#bpc-corp-header .global-nav a{
  padding:6px 0;border-bottom:1px solid transparent;
  color:var(--bpc-navy);line-height:1.9;
}
#bpc-corp-header .global-nav a:hover,
#bpc-corp-header .global-nav a.is-active{border-color:var(--bpc-teal)}

#bpc-corp-header .header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
#bpc-corp-header .menu-button{
  display:none;width:auto;height:44px;border:0;background:transparent;
  cursor:pointer;color:var(--bpc-navy);padding:0;
  align-items:center;gap:8px;
  /* button 要素はフォントを継承しないため、明示しないと MENU の文字幅が
     テーマ（Cocoon）まかせになり、コーポレートとボタン幅がずれる。 */
  font-family:inherit;
}
/* ボタン左の文字。閉じている間は MENU、開くと CLOSE。 */
#bpc-corp-header .menu-button-label{display:block}
#bpc-corp-header .menu-button-label:before{
  content:"MENU";font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--bpc-navy);line-height:1;
}
body.menu-open #bpc-corp-header .menu-button-label:before{content:"CLOSE"}
/* CSSで描くハンバーガー（Font Awesome非依存）。開くと×に変形する。 */
#bpc-corp-header .menu-bars,
#bpc-corp-header .menu-bars:before,
#bpc-corp-header .menu-bars:after{
  display:block;width:26px;height:2.5px;background:var(--bpc-navy);border-radius:2px;
  transition:transform .25s ease,top .25s ease,background-color .15s ease;
}
#bpc-corp-header .menu-bars{position:relative}
#bpc-corp-header .menu-bars:before,
#bpc-corp-header .menu-bars:after{content:"";position:absolute;left:0}
#bpc-corp-header .menu-bars:before{top:-8px}
#bpc-corp-header .menu-bars:after{top:8px}
/* 開いている間は中央のバーを消し、上下を交差させて × にする */
body.menu-open #bpc-corp-header .menu-bars{background:transparent}
body.menu-open #bpc-corp-header .menu-bars:before{top:0;transform:rotate(45deg)}
body.menu-open #bpc-corp-header .menu-bars:after{top:0;transform:rotate(-45deg)}

#bpc-corp-header .nav-dropdown{position:relative;display:flex}
#bpc-corp-header .nav-service-trigger{display:inline-flex;gap:6px;color:var(--bpc-navy);cursor:pointer}
#bpc-corp-header .nav-service-trigger:after{content:"⌄";font-size:11px}
/* 寸法・影・余白はコーポレートの最終適用値の実測に合わせている
   （1440px で 幅640 / padding18 / gap8 / 2列298px、トリガーの真下に密着）。 */
#bpc-corp-header .service-popover{
  position:absolute;top:100%;left:50%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  width:min(640px,calc(100vw - 48px));padding:18px;background:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:.18s;z-index:90;
}
#bpc-corp-header .service-popover:before{
  content:"";position:absolute;top:-7px;left:50%;
  width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg);
}
#bpc-corp-header .nav-dropdown:hover .service-popover,
#bpc-corp-header .nav-dropdown:focus-within .service-popover{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
#bpc-corp-header .service-popover a{
  display:grid;gap:4px;padding:12px 14px;border-bottom:0;background:#f5f5f2;
}
#bpc-corp-header .service-popover a:hover{background:var(--bpc-navy)}
#bpc-corp-header .service-popover a:hover strong,
#bpc-corp-header .service-popover a:hover span{color:#fff;opacity:1}
#bpc-corp-header .service-popover strong{color:var(--bpc-navy);font-size:13px;font-weight:700;line-height:1.45}
#bpc-corp-header .service-popover span{color:#111;font-size:10px;line-height:1.5}

/* ヘッダー内ボタン（お見積り相談CTA） */
#bpc-corp-header .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border:0;color:#fff;background:var(--bpc-teal);
  font-size:13px;white-space:nowrap;transition:.18s;border-radius:999px;cursor:pointer;
}
#bpc-corp-header .btn:hover{background:var(--bpc-teal-d);color:#fff}
#bpc-corp-header .btn.secondary{background:#fff;color:var(--bpc-navy);border:1px solid var(--bpc-navy)}
#bpc-corp-header .btn.secondary:hover{background:var(--bpc-navy);color:#fff}

/* ===================== フッター ===================== */
#bpc-corp-footer *{box-sizing:border-box}
#bpc-corp-footer a{text-decoration:none;color:inherit}
#bpc-corp-footer img{max-width:100%;display:block}
#bpc-corp-footer .site-footer{
  padding:48px 0 28px;background:var(--bpc-navy);color:#fff;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:14px;line-height:1.9;letter-spacing:.02em;
}
#bpc-corp-footer .container{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
#bpc-corp-footer .footer-grid{
  display:grid;grid-template-columns:1fr 2fr;
  grid-template-areas:"logo links" "vision links" "address links" "pmark links";
  gap:12px 40px;align-items:start;
}
#bpc-corp-footer .footer-logo{
  grid-area:logo;margin:0;display:inline-block;width:84px;height:33px;
  background:url("assets/img/logo-white.svg") no-repeat left center;background-size:contain;
}
#bpc-corp-footer .footer-logo .logo-img{display:none}
#bpc-corp-footer .footer-vision{grid-area:vision;margin:0}
#bpc-corp-footer .footer-address{grid-area:address;margin:0;line-height:1.8}
#bpc-corp-footer .small{color:rgba(255,255,255,.65);font-size:12px}
#bpc-corp-footer .footer-links{grid-area:links;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* 列見出し（サービス/コンテンツ/会社情報）。コーポレートと同じ白文字で表示する。
   Cocoonのh3スタイルを継承しないよう、寸法・配色・装飾を明示する。 */
#bpc-corp-footer .footer-links h3{
  display:block;margin:0 0 12px;padding:0;border:0;background:none;
  color:#fff;font-size:13px;font-weight:700;line-height:1.55;
}
#bpc-corp-footer .footer-links h3:before,
#bpc-corp-footer .footer-links h3:after{content:none}
#bpc-corp-footer .footer-links a{display:block;margin-top:10px;color:rgba(255,255,255,.78);font-size:12px}
#bpc-corp-footer .footer-links a:hover{color:#fff}
#bpc-corp-footer .footer-bottom-row{grid-area:pmark;margin:10px 0 0;display:flex;align-items:center;gap:16px}
#bpc-corp-footer .footer-pmark{margin:0}
#bpc-corp-footer .footer-pmark img{display:block;width:72px;height:72px;border-radius:6px}
/* マークは privacymark.jp（JIPDEC）へのリンク。
   img が display:block なので、囲みの <a> も行の高さを持たせない。 */
#bpc-corp-footer .footer-pmark a{
  display:inline-block;line-height:0;border-radius:6px;text-decoration:none;
  transition:opacity .2s ease;
}
#bpc-corp-footer .footer-pmark a:hover{opacity:.82}
#bpc-corp-footer .footer-pmark a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 読み上げ用の補足。親テーマ側の定義に頼らず、この子テーマで閉じておく。 */
#bpc-corp-footer .screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
/* 外部リンクアイコンを足すプラグインが入っていても、マークに重ねない。 */
#bpc-corp-header .wpel-icon,
#bpc-corp-footer .wpel-icon{display:none!important}
#bpc-corp-footer .footer-dl-btn{display:none}
#bpc-corp-footer .copyright{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;color:rgba(255,255,255,.65);
}

/* ===================== スマホ下部の常時CTAバー ===================== */
.bpc-sp-cta{display:none}

/* ===== レスポンシブ（〜1080px）: ナビを一段小さく（コーポレートと同値） ===== */
@media (max-width:1080px){
  #bpc-corp-header .global-nav{gap:10px;font-size:10.5px}
}

/* ===================== レスポンシブ（〜900px） ===================== */
@media (max-width:900px){
  #bpc-corp-header .header-inner{padding:0 20px}
  #bpc-corp-header .logo-img{height:36px}
  #bpc-corp-header .global-nav{
    position:fixed;top:72px;left:0;right:0;bottom:0;z-index:9990;display:none;
    /* gap はコーポレートと同じ 10px（style.css の 〜1100px 指定が
       ドロワーの gap:0 より後ろにあるため、実機では10pxが効いている） */
    flex-direction:column;align-items:stretch;gap:10px;
    /* 最後の項目が押しやすいよう下に指1本分の余白（コーポレートと同じ40px） */
    padding:12px 24px calc(40px + env(safe-area-inset-bottom));
    background:#fff;border-bottom:1px solid rgba(0,0,0,.08);
    margin-left:0;
    /* メニュー自体をスクロール可能にする（画面より長くても下まで見られる） */
    max-height:calc(100vh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* 長い項目は折り返し、横スクロール（左右のズレ）を防ぐ */
    white-space:normal;overflow-x:hidden;
  }
  #bpc-corp-header .global-nav.is-open{display:flex}
  #bpc-corp-header .global-nav a,
  #bpc-corp-header .nav-service-trigger{
    padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08);
    white-space:normal;word-break:break-word;
  }
  #bpc-corp-header .menu-button{display:inline-flex;align-items:center}
  #bpc-corp-header .header-actions .btn{display:none}
  #bpc-corp-header .nav-dropdown{display:grid}
  #bpc-corp-header .service-popover{
    position:static;visibility:visible;opacity:1;transform:none;width:100%;max-width:100%;
    grid-template-columns:1fr;padding:4px 0 4px 14px;box-shadow:none;background:transparent;
    transition:none;                    /* 横スライドのアニメを止める */
  }
  /* PC用の hover 変形(translate(-50%))がスマホのタップでも効いて左に
     ズレていたのを、モバイルでは無効化する（クリックで横に動く不具合の修正） */
  /* サブメニューは閉じた状態から始め、見出しのタップで開く（コーポレートと同じ）。
     サービス10件＋会社概要8件が常に開いていると縦に長すぎるため。 */
  #bpc-corp-header .nav-service-trigger{
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    justify-content:space-between;width:100%;
  }
  #bpc-corp-header .nav-service-trigger:after{transition:transform .2s ease}
  #bpc-corp-header .nav-dropdown.is-open > .nav-service-trigger:after{transform:rotate(180deg)}
  /* 閉じる側は :not(.is-open) で指定する（:hover / :focus-within に負けないため） */
  #bpc-corp-header .nav-dropdown:not(.is-open) .service-popover{display:none!important}
  #bpc-corp-header .nav-dropdown.is-open .service-popover{display:grid!important}
  /* 上の display:none より詳細度を高くしておく（記述順に左右されないように） */
  #bpc-corp-header .global-nav .company-popover .nav-sub-top{display:block!important}
  #bpc-corp-header .nav-dropdown:hover .service-popover,
  #bpc-corp-header .nav-dropdown:focus-within .service-popover{
    transform:none !important;left:auto !important;top:auto !important;
  }
  /* ドロワーの中では各項目の下地は出さない（コーポレートと同じ） */
  #bpc-corp-header .service-popover a{white-space:normal;padding:10px 0;grid-template-columns:1fr;background:transparent}
  #bpc-corp-header .service-popover strong{white-space:normal;word-break:break-word}
  /* スマホでは説明文は省き、サービス名だけを表示（シンプルに） */
  #bpc-corp-header .service-popover span{display:none !important}
  #bpc-corp-header .service-popover:before{content:none}

  #bpc-corp-footer .container{padding:0 30px}
  #bpc-corp-footer .footer-grid{display:flex;flex-direction:column;gap:16px;grid-template-areas:none}
  /* スマホもコーポレートと同じ3列。項目名が長いので字間を詰めて折り返しを許す。 */
  #bpc-corp-footer .footer-links{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  #bpc-corp-footer .footer-links h3{font-size:11px;margin-bottom:8px}
  #bpc-corp-footer .footer-links a{
    font-size:10px;line-height:1.45;margin-top:7px;
    letter-spacing:0;overflow-wrap:anywhere;word-break:normal;
  }
  #bpc-corp-footer .footer-dl-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 22px;border-radius:999px;background:#25b7c1;color:#fff;
    font-weight:700;font-size:14px;
  }

  /* 独立したCTAバーは出さない（お問い合わせは下部固定メニュー内のボタンに集約）。
     下部メニューが無い環境でだけ、JSが body.bpc-cta-bar-fallback を付けて復活させる。 */
  .bpc-sp-cta{display:none}
  body.bpc-cta-bar-fallback .bpc-sp-cta{
    position:fixed !important;left:0;right:0;bottom:0;z-index:2147483000 !important;
    display:flex;align-items:center;justify-content:center;
    min-height:56px;padding:0 16px;padding-bottom:env(safe-area-inset-bottom);
    background:var(--bpc-teal);color:#fff;font-weight:700;font-size:15px;
    text-align:center;box-shadow:0 -6px 20px rgba(0,0,0,.18);
    transition:transform .25s ease;text-decoration:none;
  }
  .bpc-sp-cta:active{background:var(--bpc-teal-d)}
  .bpc-sp-cta.is-hidden-top{transform:translateY(110%)}
  body.menu-open{overflow:hidden}
  /* ハンバーガーを開いている間は、画面下部の固定メニュー／CTAバーを隠す。
     Cocoonのモバイルフッターメニューは環境によりクラス名が異なるため候補を列挙し、
     さらにJSが実物へ .bpc-fixed-bottom-menu を付けて確実に隠せるようにしている。 */
  body.menu-open .bpc-sp-cta,
  body.menu-open .mobile-menu-buttons,
  body.menu-open .mobile-footer-menu-buttons,
  body.menu-open #mobile-footer-menu-buttons,
  body.menu-open .footer-mobile-buttons,
  body.menu-open #footer-mobile-buttons,
  body.menu-open .mobile-footer-menu,
  body.menu-open .bpc-fixed-bottom-menu{display:none !important}
  /* バー用の余白は、バーを出す場合だけ確保する（下部メニューの余白はCocoon側が持つ） */
  body.bpc-cta-bar-fallback{padding-bottom:56px !important}
}

/* 幅の狭い端末：フッター3列の項目名が収まるよう一段小さく（コーポレートと同じ） */
@media (max-width:400px){
  #bpc-corp-footer .footer-links{gap:8px}
  #bpc-corp-footer .footer-links a{font-size:9.5px}
}

/* ===== 下部固定メニュー内の「お問い合わせ」ボタン（JSが既存ボタンを複製して追加） =====
   レイアウトは複製元のボタンに従うので、ここでは配色とアイコンだけ整える。 */
.bpc-menu-cta,
.bpc-menu-cta a{background:var(--bpc-teal) !important;color:#fff !important;text-decoration:none}
.bpc-menu-cta *{color:#fff !important;border-color:transparent !important}
.bpc-menu-cta:active,
.bpc-menu-cta a:active{background:var(--bpc-teal-d) !important}
.bpc-menu-cta svg{width:22px;height:22px;display:block;margin:0 auto;fill:currentColor}
.bpc-menu-cta [class*="caption"]{white-space:nowrap}

/* ヘッダー：「会社概要」の吹き出し（コーポレート custom.css と同じ指定） */
#bpc-corp-header .service-popover.company-popover{
  grid-template-columns:minmax(200px,1fr)!important;
  width:min(260px,calc(100vw - 48px))!important;padding:10px!important;
}
#bpc-corp-header .company-popover a{padding:9px 12px!important;gap:0!important}
#bpc-corp-header .company-popover strong{font-size:12.5px;line-height:1.6}
/* 「会社概要トップ」はスマホ専用。PCは見出し自体がページへのリンクなので出さない。 */
#bpc-corp-header .company-popover .nav-sub-top{display:none!important}
@media (max-width:900px){
  #bpc-corp-header .service-popover.company-popover{width:100%!important;padding:8px 0 8px 14px!important}
  #bpc-corp-header .company-popover a{padding:10px 0!important}
}