/* /common/header-footer.css */

/* ===== tokens（必要最小限） ===== */
:root{
  --primary-dark:#0A1A2F;
  --primary-blue:hsl(215,56%,23%);
  --accent-gold:#C5A047;

  --white:#fff;

  --header-rgb: 1, 15, 40;
  --nav-height: 84px;

  --radius-full: 9999px;

  --transition-smooth: all 0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-elegant: all 0.35s cubic-bezier(0.22,1,0.36,1);
}

/* 固定ヘッダー分の余白（どのページでも崩れない） */
html{ scroll-padding-top: var(--nav-height); }
body{ padding-top: var(--nav-height); }

/* ===== Navbar ===== */
.navbar,
.navbar.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;

  padding: 1.2rem 0;

  background: rgb(1, 15, 40) !important;
  background-color: rgb(1, 15, 40) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-bottom: none !important;

  box-shadow: none !important;

  transition:
    padding .35s ease;
}

.nav-container{
  display:flex;
  justify-content: space-between;
  align-items:center;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.nav-logo{ display:flex; align-items:center; gap:.75rem; }
.nav-logo img{ display:block; height:auto; }

.nav-menu{ display:flex; gap:2.5rem; pointer-events: none; pointer-events: auto;}

.nav-link{
  color: rgba(255,255,255,0.78);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.04em;
  position:relative;
  padding:.5rem 0;
  transition: color .35s ease, letter-spacing .35s ease, opacity .35s ease;
}

.navbar.is-fixed .nav-link{ color: rgba(255,255,255,0.92); }

.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:2px;
  background: linear-gradient(
    90deg,
    rgba(197,160,71,0.0),
    rgba(197,160,71,0.92),
    rgba(197,160,71,0.0)
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1);
  opacity:.95;
}
.nav-link:hover{ color: var(--accent-gold); letter-spacing:.08em; }
.nav-link:hover::after{ transform: scaleX(1); }

/* CTA nav link */
.nav-link--cta{
  color: var(--white) !important;
  background: linear-gradient(135deg, var(--accent-gold) 0%, #a8842e 100%);
  padding: .45rem 1.1rem !important;
  border-radius: 6px;
  letter-spacing: .04em;
}
.nav-link--cta::after{ display:none; }
.nav-link--cta:hover{
  background: linear-gradient(135deg, #d4ae56 0%, var(--accent-gold) 100%);
  letter-spacing: .04em !important;
  opacity: .92;
}

.nav-actions{ display:flex; align-items:center; gap:1.25rem; }

/* Language switch */
.language-switcher{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.25rem .5rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.language-switcher a{
  text-decoration:none;
  color: rgba(255,255,255,0.72);
  font-weight:600;
  letter-spacing:.08em;
  font-size:.86rem;
  padding:.25rem .35rem;
  border-radius: 8px;
  transition: color .25s ease, background .25s ease, opacity .25s ease;
}
.language-switcher a.active{
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.04);
}
.language-switcher a:not(.active){ opacity:.55; }
.language-switcher a:hover{
  opacity:.95;
  color: rgba(255,255,255,0.92);
  background: rgba(197,160,71,0.10);
}
.lang-separator{ opacity:.28; color: rgba(255,255,255,0.65); }

/* Hamburger */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:20px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: var(--transition-smooth);
}
.menu-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(6px, 6px); }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

/* Backdrop for mobile menu */
.nav-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.45);
}

/* ===== Footer ===== */
#site-footer{
  background: var(--primary-dark);
  color: #fff;
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
}
#site-footer::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,71,0.3), transparent);
}

.footer-container{
  max-width: 1280px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding: 0 2rem;
}
.footer-column{ display:flex; flex-direction:column; }

.footer-column h3{
  color: var(--accent-gold);
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
  position: relative;
  padding-bottom: .5rem;
  font-weight: 600;
  letter-spacing: .5px;
}
.footer-column h3::after{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:30px; height:2px;
  background-color: var(--accent-gold);
  border-radius: var(--radius-full);
}

.footer-column p{
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  margin-bottom: 1.2rem;
  font-size: .9rem;
}

.footer-column ul{ list-style:none; margin:0; padding:0; }
.footer-column li{ margin-bottom:.6rem; }

.footer-column a{
  color: rgba(255,255,255,0.78);
  text-decoration:none;
  transition: .18s ease;
  font-size:.9rem;
  display:inline-block;
  padding:.15rem 0;
  position:relative;
}
.footer-column a:hover{ color: var(--accent-gold); padding-left: 8px; }
.footer-column a::before{
  content:'›';
  position:absolute;
  left:-12px;
  opacity:0;
  transition:.18s ease;
  color: var(--accent-gold);
}
.footer-column a:hover::before{ left:0; opacity:1; }

.contact-info{ margin-top:1rem; }
.contact-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.8rem;
}
.contact-icon{
  color: var(--accent-gold);
  font-size:.9rem;
  min-width:16px;
  text-align:center;
  flex-shrink: 0;
}
.footer-contact-canvas,
#footer-tel-canvas,
#footer-mail-canvas{
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

.copyright{
  text-align:center;
  padding-top:2rem;
  margin-top:2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.62);
  font-size:.85rem;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:2rem;
  padding-right:2rem;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  :root{
    --nav-height: 72px;
  }

  body{
    padding-top: var(--nav-height);
  }

  body.menu-open{
    overflow: hidden !important;
  }

  #siteHeader,
  #siteHeader .navbar,
  .navbar,
  .navbar.is-fixed{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000000 !important;
    background: rgb(1, 15, 40) !important;
  }

  .nav-container{
    padding: 0 1rem;
  }

  .menu-toggle{
    display: flex !important;
    position: relative !important;
    z-index: 1000002 !important;
    pointer-events: auto !important;
  }

  .nav-menu{
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding: 2rem !important;
    gap: 0 !important;

    background: rgb(1, 15, 40) !important;

    transform: translateY(-120%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 1000001 !important;

    transition:
      transform .35s ease,
      opacity .35s ease,
      visibility .35s ease;
  }

  .nav-menu.active{
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav-menu.active a,
  .nav-menu.active button{
    pointer-events: auto !important;
  }

  .nav-link{
    width: 100% !important;
    text-align: center !important;
    padding: 1.1rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 1.05rem !important;
  }

  .nav-link:last-child{
    border-bottom: none !important;
  }

  .footer-container{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .nav-logo img{ width: 200px; }

  .footer-container{ grid-template-columns: 1fr; }
  #site-footer{ padding: 3rem 0 1.5rem; }
  .copyright{ padding: 1.5rem 1.5rem 0; margin-top: 1.5rem; }
}

@media (max-width: 480px){
  .nav-logo img{ width: 180px; }
}
@media (max-width: 360px){
  .nav-logo img{ width: 160px; }
}

/* hero上端の境界線を削除 */
.hero {
  border-top: none !important;
}
.hero::before {
  border-top: none !important;
}

/* hero-content 中央寄せ強制 */
.hero-content{
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title,
.hero-subtitle,
.hero-content h3{
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0 auto 1.5rem;
}