/* ==========================================================
   header-footer.css — ヘッダー / ナビ / フッター
   ========================================================== */
.header-tagline{
  padding:6px 40px;font-size:11px;color:var(--muted);letter-spacing:.02em;
  background:#fff;position: absolute;font-weight: bold;max-width: 1230px;
    margin: auto;
    width: 100%;
    left: 0;
    right: 0;
	margin-top: 5px;
}
@media (max-width:860px){
  .header-tagline{padding:5px 16px;font-size:10px;}
}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding: 14px 40px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:12px;max-width: 1230px;margin: auto;
}
.brand{display:flex;align-items:center;gap:12px;padding-top: 16px;margin-bottom:-5px;}
.brand .mark{
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.brand .mark img{width:100%;height:100%;object-fit:contain;}
.brand .name-jp{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:.03em;line-height:1.3;}
.brand .name-en{font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--gold-dark);}

.contact-cluster{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.tel-block{text-align:right;font-size:12px;color:var(--muted);position:relative;font-weight:bold;}
.tel-block .num{font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    margin-top: 5px;}
.tel-block .num2{font-size:13px;font-weight:700;color:var(--navy);margin-top:2px;}
.tel-block .num svg, .tel-block .num2 svg{flex-shrink:0;}
.tel-block .num svg{width:30px;height:30px;}

.pill-btn svg{flex-shrink:0;width: 30px;height: 30px;}

.navbar{
  display:flex;justify-content:center;gap:40px;background:#fff;border-bottom:1px solid var(--border);
  padding:14px 20px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--navy);
}
.navbar li{list-style:none;} /* wp_nav_menu() が <ul> なしで <li> のみ出力するため、初期の黒丸を除去 */
.navbar a{padding:6px 2px;border-bottom:2px solid transparent;}
.navbar a:hover, .navbar a.active, .navbar li.current-menu-item > a{border-color:var(--gold);color:var(--gold-dark);}

footer.site-footer{background:#101a30;color:#aab0c2;padding:30px 40px;text-align:center;font-size:12.5px;}
.foot-links{
  display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:16px;color:#d7dae4;
  font-weight:600;font-size:13px;
}
.foot-links li{list-style:none;} /* 同上 */
.foot-links a{padding:0 14px;border-right:1px solid rgba(255,255,255,.22);line-height:1;}
.foot-links a:last-child{border-right:none;}
.foot-copy{color:#7c8298;font-size:11.5px;margin-top:10px;}

/* ===== ハンバーガーメニュー（モバイル用） ===== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--navy);
  margin:0 auto;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* 全画面メニュー内のCTA（電話・LINE・お問い合わせ）はモバイル専用。
   PC幅ではトップバー側の .pc-only ボタンが表示されるため、こちらは常に非表示にしておく。 */
.navbar-cta{display:none;}

@media (max-width:860px){
  .topbar{padding:12px 16px;}
  .contact-cluster{gap:8px;}
  .tel-block{display:none;} /* モバイルでは電話番号テキストを省略し、LINE/メールボタンとハンバーガーのみ表示 */

  .nav-toggle{
    display:flex;
    position:relative;
    z-index:1001; /* 全画面オーバーレイより手前に固定し、開いている間も×ボタンとして押せるようにする */
    border-color:rgba(255,255,255,.3);
  }
  .nav-toggle.is-active{background:transparent;border-color:rgba(255,255,255,.4);}
  .nav-toggle.is-active span{background:#fff;}

  /* ===== 全画面オーバーレイメニュー ===== */
  .navbar{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
    background:linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 100%);
    border-bottom:none;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.65,0,.35,1), opacity .35s ease, visibility 0s linear .5s;
  }
  .navbar.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition:transform .5s cubic-bezier(.65,0,.35,1), opacity .35s ease;
  }
  .navbar a{
    width:auto;
    max-width:80vw;
    text-align:center;
    padding:16px 0;
    margin:0 auto;
    border-bottom:1px solid rgba(255,255,255,.14);
    border-radius:0;
    color:#fff;
    font-size:20px;
    font-weight:600;
    letter-spacing:.04em;

    opacity:0;
    transform:translateY(16px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .navbar a:last-child{border-bottom:none;}
  .navbar a:hover, .navbar a.active, .navbar li.current-menu-item > a{
    background:transparent;
    color:var(--gold);
    border-color:var(--gold);
  }

  /* 開いたときに項目を上から順にふわっと表示（スタイリッシュな演出） */
  .navbar.is-open a{opacity:1;transform:translateY(0);}
  .navbar.is-open a:nth-child(1){transition-delay:.10s;}
  .navbar.is-open a:nth-child(2){transition-delay:.16s;}
  .navbar.is-open a:nth-child(3){transition-delay:.22s;}
  .navbar.is-open a:nth-child(4){transition-delay:.28s;}
  .navbar.is-open a:nth-child(5){transition-delay:.34s;}
  .navbar.is-open a:nth-child(6){transition-delay:.40s;}
  .navbar.is-open a:nth-child(7){transition-delay:.46s;}

  /* PC専用の電話番号・LINE・お問い合わせボタン（トップバー側）はモバイルで非表示 */
  .pc-only{display:none;}

  /* ===== 全画面メニュー内のCTA（電話・LINE・お問い合わせ） ===== */
  .navbar-cta{
    width:100%;
    max-width:280px;
    margin:32px auto 0;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.16);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;

    opacity:0;
    transform:translateY(16px);
    transition:opacity .4s ease, transform .4s ease;
    transition-delay:.5s;
  }
  .navbar.is-open .navbar-cta{opacity:1;transform:translateY(0);}

  .navbar-cta-tel{
    display:flex;align-items:center;gap:10px;color:#fff;
  }
  .navbar-cta-tel svg{color:var(--gold);flex-shrink:0;}
  .navbar-cta-tel .num{font-size:19px;font-weight:700;letter-spacing:.03em;}
  .navbar-cta-tel .hours{font-size:11px;color:rgba(255,255,255,.6);}

  .navbar-cta .pill-btn{
    width:100%;
    justify-content:center;
    font-size:13.5px;
    padding:12px 18px;
    border-bottom:none;
    border-radius:6px;
  }
  .navbar-cta .pill-btn small{display:none;} /* 全画面メニュー内は補足文なしですっきり見せる */
}

