/* =========================================================
   header-footer.css — global header, navigation, footer

   Desktop (≥1101px): the full original header — brand, contact info,
   business hours, ACCESS badge, and the nav row are all visible at
   once, exactly as designed.
   Mobile/tablet (≤1100px): the header collapses to just the logo and
   the MENU button; navigation, contact info, hours and the access/map
   link all move into the slide-down menu instead (see .mobile-menu-*
   below), which is also where their content actually lives in the
   markup — nothing is duplicated by a second copy of the same links.
   --nav-h (used for main's padding-top and the mobile menu's top
   padding) is measured from the real header at runtime in main.js
   rather than hardcoded, since its height differs between the two
   layouts above and depends on web font metrics.
   ========================================================= */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 90;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .5s var(--ease);
}
.header.is-scrolled{ box-shadow: 0 2px 20px rgba(30,74,120,.09); }

.header-top-bar{ position: relative; display: flex; justify-content: flex-end; height: 0; }
.header-access{
  position: absolute; top: 0; right: 0;
  background: var(--navy-deep); color: #fff;
  padding: 10px 32px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .4s var(--ease);
}
.header-access:hover{ background: var(--accent); }
.header-access .en{ font-family: var(--serif-en); font-size: 15px; letter-spacing: .22em; font-weight: 500; }
.header-access .jp{ font-family: var(--sans-jp); font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.85); }

.header-main{
  padding: 20px var(--pad-x) 16px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(20px, 3vw, 40px);
  max-width: 1400px; margin: 0 auto;
}
.header-brand{ display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-brand .logo-mark{
  width: 56px; height: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 3px; flex-shrink: 0;
}
.header-brand .logo-mark span{ background: var(--navy); display: block; }
.header-brand .logo-mark span:nth-child(1){ grid-column: 1; grid-row: 2 / 4; background: var(--accent); }
.header-brand .logo-mark span:nth-child(2){ grid-column: 2; grid-row: 1 / 4; }
.header-brand .logo-mark span:nth-child(3){ grid-column: 3; grid-row: 3 / 4; background: var(--sky); }

.header-brand .brand-txt{ display: flex; flex-direction: column; gap: 4px; line-height: 1.2; min-width: 0; }
.header-brand .brand-jp{
  font-family: var(--serif-jp); font-size: 26px; font-weight: 600;
  color: var(--navy); letter-spacing: .06em;
  /* Keep "合同会社" etc. from breaking mid-word onto its own line —
     only wrap at real word boundaries (e.g. the space before it). */
  word-break: keep-all; overflow-wrap: break-word;
}
.header-brand .brand-en{
  font-family: var(--sans-jp); font-size: 10.5px; font-weight: 500;
  color: var(--accent); letter-spacing: .24em;
}
.header-brand .brand-badge{
  margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #E8D9A8, #B8A06A);
  color: #fff; font-family: var(--serif-en); flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 8px rgba(184,160,106,.3);
}
.header-brand .brand-badge .n{ font-size: 22px; font-weight: 500; line-height: 1; margin-top: 4px; }
.header-brand .brand-badge .n .th{ font-size: 12px; font-style: italic; vertical-align: super; }
.header-brand .brand-badge .lb{ font-size: 7px; letter-spacing: .12em; margin-top: 2px; opacity: .9; }

.header-info{
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  justify-content: flex-end; flex-wrap: wrap;
}
.header-contact{ display: flex; flex-direction: column; gap: 6px; }
.header-contact-item{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans-jp); font-weight: 500; color: var(--navy);
}
.header-contact-item .ico{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}
.header-contact-item.tel .val{ font-family: var(--serif-num); font-size: 24px; font-weight: 500; letter-spacing: .04em; }
.header-contact-item.mail .val{ font-size: 16px; letter-spacing: .04em; }

.header-hours{
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--navy-ink); padding-right: 100px;
}
.header-hours-row{ display: flex; align-items: center; gap: 10px; }
.header-hours-row .lb{
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--navy);
  font-size: 10.5px; letter-spacing: .14em; font-weight: 500;
  color: var(--navy); min-width: 56px; text-align: center;
}
.header-hours-row .val{ font-size: 12.5px; letter-spacing: .06em; }

/* Nav row — stays visible on desktop even after scroll */
.header-nav{
  border-top: 1px solid var(--line);
  padding: 0 var(--pad-x);
  max-width: 1400px; margin: 0 auto;
}
.nav-desktop{
  display: flex; align-items: stretch;
  justify-content: space-between; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav-desktop li{ flex: 1; display: flex; }
.nav-link{
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 8px;
  font-family: var(--sans-jp);
  font-size: 14px; font-weight: 500;
  color: var(--navy-ink);
  letter-spacing: .06em;
  text-align: center; line-height: 1.4;
  transition: color .4s var(--ease), background .4s var(--ease), padding .4s var(--ease), font-size .4s var(--ease);
  border-right: 1px solid var(--line-soft);
}
.nav-desktop li:first-child .nav-link{ border-left: 1px solid var(--line-soft); }
.nav-link::before{
  content: "＞";
  display: inline-block;
  margin-right: 6px;
  color: var(--accent); font-size: 12px;
  transition: transform .4s var(--ease);
}
.nav-link:hover,
.nav-link.is-active,
.nav-desktop .current-menu-item > .nav-link{ color: var(--accent); background: var(--sky-pale); }
.nav-link:hover::before,
.nav-link.is-active::before,
.nav-desktop .current-menu-item > .nav-link::before{ color: var(--accent); transform: translateX(2px); }

.header.is-scrolled .header-main{ padding: 10px var(--pad-x) 8px; }

/* The scroll-shrink sizes below are tuned against the desktop resting
   sizes (56px logo, 26px brand text, …) and end up LARGER than the
   already-reduced mobile resting sizes (36px logo, 18px text — see the
   640px breakpoint), so on phones this read as the logo/brand text
   *growing* on scroll instead of shrinking. Desktop-only. */
@media (min-width: 1101px){
  .header.is-scrolled .header-brand .logo-mark{ width: 42px; height: 42px; }
  .header.is-scrolled .header-brand .brand-jp{ font-size: 20px; }
  .header.is-scrolled .header-brand .brand-en{ font-size: 9.5px; }
  .header.is-scrolled .header-brand .brand-badge{ width: 54px; height: 54px; }
  .header.is-scrolled .header-brand .brand-badge .n{ font-size: 17px; }
  .header.is-scrolled .header-contact-item.tel .val{ font-size: 20px; }
  .header.is-scrolled .header-contact-item.mail .val{ font-size: 14px; }
  .header.is-scrolled .nav-link{ padding: 12px 8px; font-size: 13px; }
}

.menu-btn{
  display:none; align-items:center; gap:12px;
  font-family: var(--serif-en);
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--navy);
}
.menu-btn .bars{ width: 26px; height: 12px; position: relative; }
.menu-btn .bars::before,
.menu-btn .bars::after{
  content:""; position:absolute; left:0; right:0; height:1px; background: currentColor;
  transition: transform .5s var(--ease), top .3s var(--ease);
}
.menu-btn .bars::before{ top: 3px; }
.menu-btn .bars::after{  top: 9px; }
.is-menu-open .menu-btn .bars::before{ top:6px; transform: rotate(45deg); }
.is-menu-open .menu-btn .bars::after{  top:6px; transform: rotate(-45deg); }

/* =============== Slide-down menu (mobile/tablet only) =============== */
.mobile-menu{
  position: fixed; inset: 0; z-index: 85;
  background: #FFFFFF; color: var(--navy);
  display:flex; flex-direction:column;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) 32px;
  transform: translateY(-100%);
  transition: transform .7s var(--ease2);
  overflow-y: auto;
}
.is-menu-open .mobile-menu{ transform: translateY(0); }

.mobile-menu-contact{
  display:flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.mobile-contact-item{
  display:flex; align-items:center; gap: 8px;
  font-family: var(--sans-jp); font-weight: 500; color: var(--navy);
}
.mobile-contact-item .ico{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; flex-shrink: 0;
}
.mobile-contact-item.tel .val{ font-family: var(--serif-num); font-size: 16px; letter-spacing: .04em; }
.mobile-contact-item.mail .val{ font-size: 12.5px; letter-spacing: .02em; }
.mobile-hours{
  display:flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--gray-500); letter-spacing: .04em;
}

.mobile-nav{
  display:flex; flex-direction: column; gap: 12px;
  padding-top: 18px;
  list-style: none; margin:0;
}
.mobile-nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap: 12px;
  font-family: var(--serif-jp);
  font-size: 15.5px; letter-spacing: .08em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--navy);
}
.mobile-nav a::before{ content: "＞ "; color: var(--accent); }
.mobile-nav a .en{ font-family: var(--serif-en); font-style: italic; font-size:10px; letter-spacing:.16em; color: var(--accent); flex-shrink: 0; }

.mobile-access-link{
  display:flex; align-items:center; justify-content: space-between;
  margin-top: 18px; padding: 12px 16px;
  background: var(--sky-pale); border: 1px solid var(--line);
}
.mobile-access-link .en{ font-family: var(--serif-en); font-size: 11px; letter-spacing: .2em; color: var(--navy); }
.mobile-access-link .jp{ font-family: var(--sans-jp); font-size: 10.5px; letter-spacing: .06em; color: var(--gray-500); }

.mobile-menu-foot{
  margin-top: auto; padding-top: 24px;
  font-size: 10px; letter-spacing: .1em; color: var(--gray-500);
  line-height: 1.9;
}

/* Mobile / tablet — switch to hamburger */
@media (max-width: 1100px){
  .header-nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .header-hours{ display: none; }
  .header-main{ grid-template-columns: auto 1fr auto; padding: 14px var(--pad-x); }
  .header-brand .brand-badge{ display: none; }
  .header-info{ gap: 12px; }
  .header-contact{ display: none; }
  /* Below desktop width the visible bar is logo + MENU only — nothing
     else. The ACCESS badge (and everything the badge would have
     linked to) is reached through .mobile-access-link inside the
     slide-down menu instead, not shown here at all. */
  .header-top-bar{ display: none; }
}
@media (max-width: 640px){
  .header-brand .brand-jp{ font-size: 18px; }
  .header-brand .brand-en{ font-size: 8.5px; }
  .header-brand .logo-mark{ width: 36px; height: 36px; }
}
@media (max-width: 380px){
  .header-main{ padding: 10px 16px; gap: 10px; }
}

/* On wide screens the slide-down menu is the only nav surface (there is
   no separate desktop bar visible once it's open), so its content is
   centered and capped in width instead of stretching full-bleed. It
   only actually opens below 1100px in normal use (that's the only
   width where the MENU button is shown), but this keeps it looking
   right if it's ever triggered wider too. */
.mobile-menu-contact, .mobile-nav, .mobile-access-link, .mobile-menu-foot{
  width: 100%; max-width: 640px; margin-left: auto; margin-right: auto;
}

/* =================== FOOTER =================== */
.footer{
  background: linear-gradient(180deg, var(--navy-ink) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,.75);
  padding: clamp(70px, 8vw, 120px) 0 40px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px 30px; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer h4{
  color: var(--sky-light); font-family: var(--serif-en); font-style: italic; font-weight: 400;
  font-size: 12px; letter-spacing: .2em; margin-bottom: 22px;
}
.footer-brand .brand-mark{ color:#fff; font-size: 24px; font-family: var(--serif-jp); font-weight: 500; letter-spacing: .06em; }
.footer-brand .brand-sub{ color: var(--sky-light); margin-top: 8px; font-size: 11px; letter-spacing: .24em; }
.footer-brand p{ font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 2; letter-spacing:.06em; margin-top: 24px; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links a{ display:block; padding: 8px 0; font-size: 13px; color: rgba(255,255,255,.85); font-family: var(--serif-jp); letter-spacing:.08em; position: relative; }
.footer-links a::after{
  content:""; position:absolute; left:0; bottom:6px; height:1px; width: 20px; background: var(--sky-light);
  transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease);
}
.footer-links a:hover{ color: #fff; }
.footer-links a:hover::after{ transform: scaleX(1); }
.footer-address{ font-size: 12.5px; line-height: 2; color: rgba(255,255,255,.75); font-family: var(--serif-jp); letter-spacing:.06em; }
.footer-address strong{ color: #fff; font-weight: 500; }
.footer-bottom{
  display:flex; justify-content: space-between; align-items:center; padding-top: 30px;
  font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.45);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom-links a{ margin-left: 22px; }
.footer-bottom-links a:first-child{ margin-left: 0; }