@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

/* =========================================================
   波之上 SW ヘッダー/フッター (静的LP用・独立ネームスペース)
   - LP側のクラスと絶対衝突しないよう "_" プレフィックス
   - rem/em に依存しない px ベース
   - SP <= 767px / PC >= 768px の一段ブレークポイント
========================================================= */

/* ---- 共通トークン(SP固定CTAバー等 header外でも使えるよう :root にも定義) ---- */
:root{
  --hf-primary: #02284d;
  --hf-accent:  #1f4999;
  --hf-cta:     #1e4999;
  --hf-cta-hover: #193d80;
  --hf-warn:    #ffe41a;
  --hf-sky:     #005bac;
  --hf-line:    #e5ecf3;
  --hf-bg-soft: #f2f7fa;
  --hf-h-sp: 74px;
  --hf-h-pc: 84px;
  --hf-h-cta-sp: 60px;
  --hf-font: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --hf-quicksand: "Quicksand", sans-serif;
}

._l-header, ._l-footer{
  --hf-font: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --hf-quicksand: "Quicksand", sans-serif;
  --hf-primary: #02284d;
  --hf-accent:  #1f4999;
  --hf-cta:     #1e4999;      /* 本サイトのヘッダーCTAと同じ青 */
  --hf-cta-hover: #193d80;
  --hf-warn:    #ffe41a;      /* 本サイトのアクセントイエロー */
  --hf-sky:     #005bac;      /* 本サイトのハンバーガーと同じスカイブルー */
  --hf-line:    #e5ecf3;
  --hf-bg-soft: #f2f7fa;
  --hf-h-sp: 74px;            /* 本サイトのSPヘッダー高(4.625rem)に合わせる */
  --hf-h-pc: 84px;
  --hf-h-cta-sp: 60px;        /* SP固定CTAバーの高さ(SPのみ表示) */
  font-family: var(--hf-font);
  color: var(--hf-primary);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
._l-header *, ._l-footer *, ._l-header *::before, ._l-footer *::before, ._l-header *::after, ._l-footer *::after{
  box-sizing: border-box;
}
._l-header ul, ._l-footer ul{ list-style: none; margin: 0; padding: 0; }
._l-header li, ._l-footer li{ list-style: none; }
._l-header a, ._l-footer a{ color: inherit; text-decoration: none; }
._l-header img, ._l-footer img{ max-width: 100%; height: auto; display: block; }
._l-header svg, ._l-footer svg{ display: inline-block; vertical-align: middle; fill: currentColor; }
._l-header button, ._l-footer button{ font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
._l-header h1,._l-header h2,._l-header h3, ._l-footer h1,._l-footer h2,._l-footer h3{ margin: 0; font-weight: inherit; }
._l-header p, ._l-footer p{ margin: 0; }
._l-header dl,._l-header dd, ._l-footer dl,._l-footer dd{ margin: 0; }

/* ---- LP本体の押し下げ (SP時はヘッダー+固定CTAバー高さ分) ---- */
._nami-offset{ padding-top: calc(var(--hf-h-sp) + var(--hf-h-cta-sp)); }
@media (min-width: 768px){ ._nami-offset{ padding-top: calc(var(--hf-h-pc) + 24px); } }

/* =========================================================
   ヘッダー (SP: <=767px)
========================================================= */
._l-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hf-h-sp);
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--hf-line);
  z-index: 500;
}
._l-header-logo{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
._l-header-logo h3{ font-size: 9px; font-weight: 400; line-height: 1.2; color: var(--hf-primary); white-space: nowrap; }
._l-header-logo img{ width: 160px; max-width: 52vw; }
._l-header__wrap{ display: none; }
._l-header-menu{ margin-left: auto; }
._c-btn-menu{
  position: relative; width: 48px; height: 48px; background: transparent; border: 0; cursor: pointer; margin-right: -8px;
}
._c-btn-menu span{
  position: absolute; left: 8px; right: 8px; height: 2px; background: var(--hf-sky);
  transition: transform .3s, top .3s, opacity .3s;
}
._c-btn-menu span:nth-child(1){ top: 18px; }
._c-btn-menu span:nth-child(2){ top: 28px; }
._l-header._is-nav-open ._c-btn-menu span:nth-child(1){ top: 23px; transform: rotate(45deg); }
._l-header._is-nav-open ._c-btn-menu span:nth-child(2){ top: 23px; transform: rotate(-45deg); }

/* ドロワー (SP) */
._l-header-drawer{
  position: fixed; left: 0; right: 0; top: var(--hf-h-sp);
  max-height: calc(100dvh - var(--hf-h-sp));
  overflow-y: auto; padding: 20px 16px 32px;
  background: var(--hf-bg-soft);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
._l-header._is-nav-open ._l-header-drawer{ opacity: 1; pointer-events: auto; transform: none; }
._l-header-drawer__wrap{ max-width: 480px; margin: 0 auto; }
._l-header-drawer__nav{ display: flex; flex-direction: column; }
._cm-nav-drawer-block{ border-bottom: 1px solid #dae4ec; }
/* LP本体の `body a{color:#0f60ac}` および `._l-header button{font:inherit}` 等の
   リセットに確実に勝つよう !important 併用。<button>と<a>で太さ/サイズ/色を統一 */
._l-header ._cm-nav-drawer-block__link,
._l-header ._cm-nav-drawer-block__link:link,
._l-header ._cm-nav-drawer-block__link:visited{
  width: 100% !important;
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 14px 16px !important;
  font-family: var(--hf-font) !important;
  font-size: 16px !important; line-height: 1.4 !important;
  font-weight: 700 !important; color: var(--hf-primary) !important;
  background: transparent !important; border: 0 !important; cursor: pointer;
  text-align: left !important;
  text-decoration: none !important;
}
._l-header ._cm-nav-drawer-block__link *{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
._cm-nav-drawer-block__link i{ display: inline-flex; }
._cm-nav-drawer-block__list{ display: none; padding: 0 4px 12px; }
._cm-nav-drawer-block__link._is-open + ._cm-nav-drawer-block__list{ display: block; }
._cm-nav-drawer-block__sub{ display: block; padding: 6px 0 6px 12px; font-size: 13px; color: var(--hf-primary); }
._l-header-drawer-info{ padding: 24px 4px 0; text-align: center; }
._l-header-drawer-info__tel{ font-family: var(--hf-quicksand); font-weight: 700; font-size: 26px; line-height: 1; }
._l-header-drawer-info__tel a{ color: var(--hf-accent); }
._l-header-drawer-info__open{ font-size: 12px; margin-top: 6px; }
._l-header-drawer__cta{ margin: 16px auto 0; width: min(300px, 100%); display: flex; flex-direction: column; gap: 10px; }
._l-header-drawer__cta a{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 16px; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4;
}
/* メールでお問い合わせ: 本サイトの c-btn-round--drawer 相当 */
._l-header-drawer__cta a._c-btn-round--drawer,
._l-header-drawer__cta a._c-btn-round--drawer:link,
._l-header-drawer__cta a._c-btn-round--drawer:visited{
  background: var(--hf-accent) !important; color: #fff !important; border-radius: 1.75rem;
  text-decoration: none !important;
}
._l-header-drawer__cta a._c-btn-round--drawer:hover{ background: #193d80; }
/* 体験申し込み: 本サイトの c-btn-trial 相当 */
._l-header-drawer__cta a._c-btn-trial,
._l-header-drawer__cta a._c-btn-trial:link,
._l-header-drawer__cta a._c-btn-trial:visited{
  background: var(--hf-warn) !important; color: var(--hf-primary) !important; border-radius: .5rem;
  text-decoration: none !important;
}
._l-header-drawer__cta a._c-btn-trial:hover{ background: #ffd500; }
._l-header-drawer__cta ._c-btn-round__email{ display: inline-flex; }
._l-header-drawer__cta ._c-btn-trial__pic{ margin: 0; width: 2rem; flex: none; }

/* ---- SP 画面下 常時表示 CTAバー (左右 50/50) ---- */
/* 上部に固定していたが、本要望で下部(bottom:0)へ移動 */
body ._l-header-sp-cta{ display: none !important; }
@media only screen and (max-width: 767px){
  body ._l-header-sp-cta{
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important; right: 0 !important; width: 100% !important;
    height: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    z-index: 9000 !important;
    margin: 0 !important; padding: 0 !important;
    box-shadow: 0 -2px 6px rgba(2,40,77,.18) !important;
  }
  body ._l-header-sp-cta > a,
  body ._l-header-sp-cta > a:link,
  body ._l-header-sp-cta > a:visited{
    flex: 1 1 0 !important; min-width: 0 !important; width: 50% !important; height: 60px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    padding: 0 8px !important; text-align: center !important;
    font-family: "Zen Maru Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
    font-weight: 700 !important; font-size: 13px !important; line-height: 1.25 !important;
    white-space: nowrap !important; text-decoration: none !important;
    box-sizing: border-box !important;
  }
  /* レスポンシブ: ボタン名が長くなった場合SPで文字詰める */
  body ._l-header-sp-cta > a > span{ font-size: 12px !important; }
  body ._l-header-sp-cta > a > i,
  body ._l-header-sp-cta > a > i > svg{ display: inline-flex !important; flex: none !important; }
  /* アイコンの色を親ボタンの color に追従(塗り潰し)  ←これで紺ボタンに紺アイコン・白ボタンに白アイコン */
  body ._l-header-sp-cta svg,
  body ._l-header-sp-cta svg use,
  body ._l-header-sp-cta svg path{ fill: currentColor !important; }
  body ._l-header-sp-cta > a._c-btn-mail-sp,
  body ._lheader-sp-cta > a._c-btn-mail-sp,
  body ._l-header-sp-cta > a._c-btn-mail-sp:link,
  body ._l-header-sp-cta > a._c-btn-mail-sp:visited{ background: #1f4999 !important; color: #ffffff !important; }
  body ._l-header-sp-cta > a._c-btn-mail-sp:hover{ background: #193d80 !important; }
  body ._l-header-sp-cta > a._c-btn-tel-sp,
  body ._l-header-sp-cta > a._c-btn-tel-sp:link,
  body ._l-header-sp-cta > a._c-btn-tel-sp:visited{ background: #ffe41a !important; color: #02284d !important; }
  body ._l-header-sp-cta > a._c-btn-tel-sp:hover{ background: #ffd500 !important; }
  body ._l-header-drawer__cta{ display: none !important; }
  /* バーが高さ60pxでコンテンツを覆うので、wrapper 下に余白 */
  body{ padding-bottom: 60px !important; }
  ._nami-offset{ padding-bottom: 60px !important; box-sizing: border-box !important; }
}

/* =========================================================
   ヘッダー (PC: >=768px)
========================================================= */
@media (min-width: 768px){
  ._l-header{
    top: 16px; left: 50%; right: auto; transform: translateX(-50%);
    width: min(1200px, calc(100% - 32px));
    height: var(--hf-h-pc);
    padding: 10px 24px;
    border-radius: 999px;
    border-bottom: 0;
    box-shadow: 0 6px 20px rgba(2, 40, 77, .08);
  }
  ._l-header-logo h3{ font-size: 10px; }
  ._l-header-logo img{ width: 180px; max-width: none; }
  ._l-header-menu{ display: none; }
  ._l-header__wrap{
    display: grid; flex: 1; margin-left: 20px;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "nav2 info action"
      "nav  nav  action";
    gap: 4px 16px;
    align-items: center;
  }
  ._l-header-nav2{
    grid-area: nav2; display: flex; justify-content: flex-end; gap: 14px;
  }
  ._l-header-nav2 li a{
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 11px; color: var(--hf-primary); line-height: 1;
  }
  ._c-btn-ico__ico{ display: inline-flex; }
  ._c-btn-ico__ico svg{ width: 18px; height: 18px; }
  ._l-header-info{
    grid-area: info; display: flex; align-items: center; gap: 10px;
  }
  ._l-header-info__tel{
    font-family: var(--hf-quicksand); font-weight: 700; font-size: 22px; color: var(--hf-accent); line-height: 1;
    display: inline-flex; align-items: baseline; gap: 4px;
  }
  ._l-header-info__tel span:first-child{ font-size: 13px; }
  ._l-header-info__info{ font-size: 11px; line-height: 1.35; color: var(--hf-primary); }
  ._l-header-action{ grid-area: action; }
  /* LP本体の `body a{color:#0f60ac}` (0,1,1) が同じ具体度で勝ってしまうため、
     !important を付けて確実に上書き。link/visited 疑似も含めて対応 */
  ._l-header ._c-btn-header,
  ._l-header ._c-btn-header:link,
  ._l-header ._c-btn-header:visited{
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 150px !important; height: 48px !important; padding: 0 24px !important;
    background: var(--hf-cta) !important; color: #ffffff !important;
    border-radius: 999px !important; font-weight: 700 !important; font-size: 15px !important;
    white-space: nowrap; text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(30, 73, 153, .28);
  }
  ._l-header ._c-btn-header:hover{ background: var(--hf-cta-hover) !important; color: #ffffff !important; }
  /* タブレット幅(768-1023px)では要素を詰めて収める */
  @media (max-width: 1023px){
    ._cm-nav-header{ gap: 12px; }
    ._cm-nav-header__link{ font-size: 12px; }
    ._l-header ._c-btn-header,
    ._l-header ._c-btn-header:link,
    ._l-header ._c-btn-header:visited{ min-width: 130px !important; font-size: 13px !important; color: #ffffff !important; }
    ._l-header-info__tel{ font-size: 18px; }
  }
  ._l-header-nav{ grid-area: nav; }
  ._cm-nav-header{ display: flex; gap: 18px; justify-content: flex-end; }
  ._cm-nav-header__lv1{ position: relative; }
  ._cm-nav-header__link{
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 0;
    font-size: 13px; font-weight: 500; color: var(--hf-primary);
  }
  ._cm-nav-header__link svg{ width: 10px; height: 10px; }
  ._cm-nav-header-child{
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--hf-line); border-radius: 10px;
    box-shadow: 0 8px 22px rgba(2,40,77,.08); padding: 8px 0; min-width: 200px; z-index: 5;
  }
  ._cm-nav-header__lv1:hover ._cm-nav-header-child,
  ._cm-nav-header__lv1._is-open ._cm-nav-header-child{ display: block; }
  ._cm-nav-header-child__wrap{ display: flex; flex-direction: column; }
  ._cm-nav-header-child__link{ display: block; padding: 8px 16px; font-size: 13px; color: var(--hf-primary); white-space: nowrap; }
  ._cm-nav-header-child__link:hover{ background: var(--hf-bg-soft); }
  ._l-header-drawer{ display: none; }
}

/* =========================================================
   フッター (SP <=767px 縦積み → PC >=768px 2カラム相当)
========================================================= */
._l-footer{
  position: relative;
  background: #fff; color: var(--hf-primary);
  padding: 32px 16px 24px;
  overflow: hidden;
}
._l-footer__bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .08; }
._l-footer__bg img{ width: 100%; height: 100%; object-fit: cover; }
._l-footer .l-container, ._l-container{ position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 8px; }
._l-footer__wrap{ display: flex; flex-direction: column; gap: 24px; }

._l-footer-logo{ order: 1; display: flex; flex-direction: column; gap: 4px; }
._l-footer-logo h3{ font-size: 10px; font-weight: 400; color: var(--hf-primary); line-height: 1.3; }
._l-footer-logo img{ width: 200px; max-width: 60vw; }

._l-footer-info{ order: 2; }
._l-footer-info__tel{ font-family: var(--hf-quicksand); font-weight: 700; font-size: 22px; line-height: 1; }
._l-footer-info__tel a{ color: var(--hf-primary); }
._l-footer-info__info{ margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; }
._l-footer-info__info dl{ display: flex; gap: 8px; }
._l-footer-info__info dt{ width: 4em; font-weight: 500; }
._l-footer-info__info dd{ flex: 1; }

._l-footer-sns{ order: 3; display: flex; gap: 16px; }
._l-footer-sns li{ width: 28px; }

._l-footer-nav{ order: 4; }
._cm-nav-footer{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px;
}
._cm-nav-footer-block__link{
  display: inline-block; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--hf-primary);
}
._cm-nav-footer-block__list{ padding: 4px 0 8px 8px; }
._cm-nav-footer-block__sub{ display: block; padding: 3px 0; font-size: 12px; color: #324b73; }

._l-footer-nav2{ order: 5; display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; }
._l-footer-nav2 a{ color: var(--hf-primary); }
._c-link-external{ display: inline-flex; align-items: center; gap: 4px; }
._c-link-external svg{ width: 12px; height: 12px; }

._l-footer-copyright{
  order: 6; text-align: center;
  font-family: var(--hf-quicksand); font-weight: 700; font-size: 11px; color: #999;
  padding-top: 12px; border-top: 1px solid var(--hf-line);
}

@media (min-width: 768px){
  ._l-footer{ padding: 64px 24px 32px; }
  ._l-footer__wrap{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nav  logo"
      "nav  info"
      "nav  sns"
      "nav2 nav2"
      "copyright copyright";
    gap: 12px 48px;
  }
  ._l-footer-nav{ grid-area: nav; order: 0; }
  ._cm-nav-footer{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  ._l-footer-logo{ grid-area: logo; order: 0; text-align: right; align-items: flex-end; }
  ._l-footer-info{ grid-area: info; order: 0; text-align: right; }
  ._l-footer-info__info{ align-items: flex-end; }
  ._l-footer-info__info dl{ justify-content: flex-end; }
  ._l-footer-sns{ grid-area: sns; order: 0; justify-content: flex-end; }
  ._l-footer-nav2{ grid-area: nav2; order: 0; justify-content: flex-start; padding-top: 24px; border-top: 1px solid var(--hf-line); }
  ._l-footer-copyright{ grid-area: copyright; order: 0; text-align: center; padding-top: 20px; border-top: 0; }
}

@media (min-width: 1024px){
  ._cm-nav-footer{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}