/* Styles for Jekyll build */
:root{
  --bg:#0e0f12;
  --fg:#ffffff;
  --muted:#b3b6bd;
  --accent:#50c8ff;
  --surface:rgba(255,255,255,.06);
  --radius:14px;
  --space:16px;
  --maxw:1200px;
  --ff:'Afacad',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-notosans:'Noto Sans JP',sans-serif;
  --fs-xs:12px;
  --fs-sm:14px;
  --fs:16px;
  --fs-lg:20px;
  --fs-xl:28px;
  --fs-2xl:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:#0b0d11 url('../img/bg.png') center/cover no-repeat fixed;
  font:400 var(--fs)/1.7 var(--ff);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.container{
  max-width:var(--maxw);margin-inline:auto;padding-inline:20px
}
.site-header{
  margin-top: 32px;
  padding-block:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: relative; /* anchor positioned elements like small logo */
}
.nav{
  display:flex;
  align-items:center;
  width:100%;
}
.nav__links{
  margin-left:auto;
  display:flex;
  gap:28px;
  font-size: var(--fs);
}
.nav__links a{
  color:#e6e8ec;
  text-decoration:none;
  font-weight:600
}
.nav__links a:hover{
  opacity:.8
}
.nav__toggle{
  order:-1;
  margin-left:0;
  margin-right:auto;
  position:absolute;
  left:16px;
  top:16px;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:36px;
  height:32px;
  background:transparent;
  border:0;
  cursor:pointer;
  z-index:200;
}
.nav__bar{
  display:block;
  height:2px;
  background:var(--fg);
  margin:6px 0
}
@media (max-width: 700px){
  .nav__links{
    display:none
  }
  .site-logo-small{
    display:none
  }
}
.drawer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  font-family: var(--ff-notosans);
}
.drawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  opacity:0;
  transition:opacity 0.3s;
  z-index: 1; /* below panel, above page */
}
.drawer__panel{
  position:absolute;inset:0 auto 0 0;
  width:min(82vw,360px);
  background:linear-gradient(180deg,#111827,#0b0d11);
  transform:translateX(-100%);
  transition:.25s transform;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.drawer__list{
  list-style:none;
  padding:0;
  margin-top: 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drawer__list a{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--fg);
  text-decoration:none;
  padding:12px 10px;
  border-radius:10px;
}
.drawer__list a:hover{
  background:rgba(255,255,255,.06)
}
.drawer.is-open{
  pointer-events:auto;
}
.drawer.is-open .drawer__panel{
  transform:translateX(0);
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.top{
  position:relative;
  min-height:70vh;
  display:grid;
  align-content:center;
  justify-items:start; /* place children to the left inside grid */
}
.tagline{
  position: absolute;
  right: auto;
  text-align: left;
  top: 20px;
}
.tagline__text{
  color: #FFF;
  font-family: Afacad;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 120%; /* 33.6px */
  letter-spacing: 1.12px;
}
.main_logo{
  display:block;
  margin:0; /* remove default centering margins */
  padding:0;
  text-align:left; /* ensure inline content aligns left */
  align-self:flex-start; /* if inside flex container, stick to left */
  /* Optional: tweak this to crop any transparent tail on the right of the SVG */
  --logo-trim-right: 0px;
}
.main_logo svg,
.main_logo img{
  display:block;
  width:min(546px, 92vw); /* explicit width to avoid 100% stretching */
  height:auto;
  /* If the exported SVG has extra transparent space on the right, enable clipping */
  clip-path: inset(0 var(--logo-trim-right) 0 0);
}

/* Small site logo (PC only, non-top pages) */
.site-logo-small {
  position: absolute;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 30;
}
.site-logo-small img {
  display: block;
  height: 20px;
  width: auto;
}

@media (min-width: 701px) {
  .site-logo-small { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Center logo and scale down on small screens */
@media (max-width: 700px){
  .top{ justify-items:center; }
  .main_logo{
    margin: 12px auto 0; /* center the wrapper */
    text-align: center;
    align-self: center;
  }
  .main_logo svg,
  .main_logo img{
    width: min(82vw, 460px); /* smaller on mobile */
    height: auto;
    clip-path: inset(0 0 0 0); /* avoid accidental clipping when centered */
  }
}
.page-title{
  font-size:clamp(50px,3vw,60px);
  margin:40px 0 24px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
}

@media (max-width: 700px){
  .page-title{
    font-size:clamp(48px,3vw,36px);
    margin:40px 0 24px;
    font-weight:800;
    letter-spacing:.04em;
    text-align:left;
  }
}

.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.08)
}
/* ===== Business page cards ===== */
.biz-card{
  background:#ffffff;
  color:#111111;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden; /* round the image corners */
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.biz-card__thumb img{
  display:block;
  width:100%;
  height:auto;
}
.biz-card__body{
  padding:14px 16px 16px;
  font-family: var(--ff-notosans);
}
.biz-card__headline{ margin:8px 0 8px; }
.biz-card__title{
  display:block;
  font-size:17px;
  font-weight:800;
  line-height:1.35;
  color:#111;
  text-align: center;
}
.biz-card__desc{ margin:0; font-size:13px; line-height:1.75; color:#111; opacity:.85; }
.member{
  display:flex;gap:16px;
  align-items:center;
  font-family:'Noto Sans JP',sans-serif
}
.member__avatar{
  border-radius:50%;
  flex:0 0 auto;box-shadow:0 8px 18px rgba(0,0,0,.35)
}
.member__name{
  margin:0 0 2px;
  font-size:18px;
  font-weight:700
}
.member__role{
  margin:0 0 8px;
  color:var(--fg);
  opacity: .7;
}
.member__links{
  display:flex;gap:8px
}
.team{
  display:grid;gap:22px;
  list-style:none;padding:0
}
@media (min-width:600px){
  .team{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
/* map-card base styles are consolidated below in the Contact section */
.map{
  border-radius:12px;
  overflow:hidden;
}
.map__caption{
  margin:12px 0;
  color:#d1d5db;
  font-size:14px;
}
.btn-ghost{
  display:inline-block;
  margin: 3px 0;
  padding:6px 12px;
  border-radius:999px;
  border: 0;
  color:var(--fg);
  text-decoration:none;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.06)
}
.contact-actions{
  font-family: var(--ff-notosans);
  margin:28px 0
}
/* === Contact page — center layout & wide map (CSS only) === */
.map-card{
  margin: 0 auto;
  text-align: center;
  padding: 0;
  border: 0;
}
/* Make the embedded map wide & flat */
.map iframe{
  width: min(920px, 92vw);
  height: clamp(160px, 22vw, 260px);
  border: 0;
  border-radius: 10px;
}
/* Put address and the Google Map button on the same line */
.map__caption{
  margin: 8px 0;
  display: inline;
}
.map-card .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}
/* Center the mail button and recolor it */
.contact-actions{
  display: flex;
  justify-content: center;
}

/* base .btn-pill is defined later with unified styles */
.site-footer {
  font-family: var(--ff-notosans);
  padding-block: 1rem;
  color: var(--fg);
  font-size: 0.875rem;
  text-align: right;
}

/* === Contact icons adjustment === */
.btn-pill svg {
  vertical-align: middle;
  margin-right: 8px;
  height: 18px;
  width: 18px;
}
.btn-pill {
  font-family: var(--ff-notosans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 999px;
  background: #3b3f46;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Force tagline right-align on small screens up to 900px */
@media (max-width: 700px){
  .tagline{
    top: 56px;
    right: 16px;
    left: auto;
    text-align: right;
  }
  .tagline__text{
    color: #FFF;
    text-align: right;
    font-family: Afacad;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 120%; /* 24px */
    letter-spacing: 0.8px;
  }
  /* Page message: left-align only on small screens */
  .page-message{
    text-align: left !important;
  }
}


/* =========================
 * Mobile Hamburger Menu
 * ========================= */
/* generic 3-column grid for Business page */
.grid-3{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:700px){
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px){
  .nav__toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:36px;
    height:32px;
    background:transparent;
    border:0;
    cursor:pointer;
    z-index:100;
    position:relative;
    order:-1;
    margin-left:0;
  }
  .nav__bar{
    width:22px;
    height:2px;
    background:var(--fg);
    margin:3px 0;
    border-radius:2px;
    transition:0.3s;
  }
  .nav__toggle.active .nav__bar:nth-child(1){
    transform:rotate(45deg) translateY(6px);
  }
  .nav__toggle.active .nav__bar:nth-child(2){
    opacity:0;
  }
  .nav__toggle.active .nav__bar:nth-child(3){
    transform:rotate(-45deg) translateY(-6px);
  }

  /* Drawer */
  /* Mobile-specific refinements only */
  .drawer__panel{ width:min(80vw,320px); padding:24px; gap:20px; z-index:2; }
  .drawer__list{ margin:0; gap:16px; }
  .drawer__list a{ font-size:18px; font-weight:600; }
}

/* Hide hamburger icon when drawer is open (mobile only) */
@media (max-width: 700px){
  /* Modern browsers: react to drawer open state */
  body:has(.drawer.is-open) .nav__toggle{
    opacity: 0;
    pointer-events: none;
  }
  /* Fallback: if toggle gets .active class during open */
  .nav__toggle.active{
    opacity: 0;
    pointer-events: none;
  }
}