/* =============== Base / Reset =============== */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}
html,body{height:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
body{
  margin:0;color:#111;background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Arial,"Meiryo",sans-serif;
  line-height:1.8;letter-spacing:.02em;
}

/* =============== Vars =============== */
:root{
  --max:1060px;
  --gutter:24px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --accent:#111;
  --hero-min-h:68vh;
  --topbar-h:64px; /* PC header height */
}
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}

/* =============== Header =============== */
.topbar{background:#fff;color:#000;border-bottom:1px solid #eee;position:sticky;top:0;z-index:40}
.topbar-inner{height:var(--topbar-h);display:flex;align-items:center;gap:20px}
.brand-badge img{height:48px;width:auto;display:block}

/* PC: menu right */
.nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav a{font-size:13px;padding:8px 12px}
.btn-outline{border:1px solid #111;border-radius:999px}

/* hamburger button (hidden on PC) */
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid #111;border-radius:8px;background:#fff;
  align-items:center;justify-content:center;gap:5px
}
.nav-toggle span{width:20px;height:2px;background:#111;display:block;transition:.25s}

/* scrim (overlay for drawer) */
.nav-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s;z-index:35
}
.nav-scrim.show{opacity:1;pointer-events:auto}

/* ========== Drawer (<=960px) ========== */
@media (max-width:960px){
  :root{--topbar-h:58px}
  .topbar-inner{height:var(--topbar-h)}
  .brand-badge img{height:40px}
  .nav-toggle{display:inline-flex}

  .nav{
    position:fixed;top:var(--topbar-h);right:0;left:auto;
    width:min(86vw,320px);height:calc(100dvh - var(--topbar-h));
    background:#fff;border-left:1px solid #eee;box-shadow:-8px 0 24px rgba(0,0,0,.08);
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px;
    transform:translateX(100%);opacity:0;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease;z-index:45;
  }
  .nav a{padding:14px 14px;border-radius:10px;font-size:15px}
  .nav a:hover{background:#f5f5f5}
  .nav .btn-outline{text-align:center;margin-top:6px}
  .nav.open{transform:translateX(0);opacity:1;pointer-events:auto}

  /* 3 bars → X */
  .nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:560px){ :root{--topbar-h:56px} }
body.nav-open{overflow:hidden}

/* =============== Sections / Hero (既存) =============== */
.section{padding:60px 0}
.section.gray{background:#f3f3f3}
.hd{text-align:center;font-size:22px;font-weight:800;margin:0 0 28px;letter-spacing:.15em}
.hero{position:relative;color:#fff;background:#0b0b0b;min-height:var(--hero-min-h);display:flex;align-items:end}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(1200px 400px at 50% 8%,rgba(255,255,255,.08),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55))}
.hero-inner{position:relative;padding:72px var(--gutter) 46px;width:100%}
.hero h1{font-size:clamp(24px,3.6vw,40px);font-weight:900;letter-spacing:.04em;margin:0 0 16px}
.hero p{margin:6px 0;color:#f0f0f0;font-size:14px}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{background:#000 url("/assets/img/hero.jpg") center/cover no-repeat}
}

/* cards etc.（既存） */
.company{display:grid;grid-template-columns:1.3fr .6fr;gap:36px;align-items:start}
.company .text{font-size:13.5px;color:#222}
.company .badge img{width:100%;border-radius:4px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid #e5e5e5}
.card .cap{text-align:center;font-size:12px;font-weight:800;padding:16px 10px 8px}
.message{max-width:760px;margin-inline:auto;color:#222;font-size:13.5px}
.message p{margin:0 0 14px}
.sign-right{float:right;text-align:left;display:inline-block;margin-top:24px;font-size:14px;letter-spacing:.05em;color:#222}

/* CTA */
.cta-wrap{background:#f8f8f8;padding:60px 0;text-align:center}
.cta-wrap small{display:block;margin-bottom:10px;font-size:14px;color:#555}
.btn{display:inline-block;padding:14px 34px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;border:1px solid #000;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.cta-wrap .btn{padding:14px 38px;letter-spacing:1px;transition:.3s}
.cta-wrap .btn:hover{background:#444}

/* Footer */
footer{background:#0b0b0b;color:#fff;padding:42px 0 64px}
.footer-logo{height:60px;margin:0 auto 12px}
.footbox{text-align:center;font-size:12px;color:#d6d6d6;line-height:1.9}
footer .sns-links{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:22px}
footer .sns-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;transition:background-color .25s,transform .25s,opacity .25s}
footer .sns-icon:hover{background-color:rgba(255,255,255,.14);transform:translateY(-2px)}
footer .sns-icon img{width:20px;height:20px;display:block}
@media (max-width:560px){footer .sns-icon{width:40px;height:40px}footer .sns-icon img{width:18px;height:18px}}

/* Contact form（既存） */
#contactForm .container{max-width:760px}
#contactForm form{margin-top:8px}
#contactForm .f-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:12px 20px;margin-bottom:16px}
#contactForm .f-row label{font-weight:700}
#contactForm .f-row input[type="text"],#contactForm .f-row input[type="email"],#contactForm .f-row input[type="tel"],#contactForm .f-row textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font-size:14px;background:#fff}
#contactForm .f-row input:focus,#contactForm .f-row textarea:focus{outline:2px solid #111;outline-offset:2px}
#contactForm .f-row textarea{min-height:140px;resize:vertical}
#contactForm .f-accept{margin:10px 0 22px}
#contactForm .f-accept label{display:flex;align-items:center;gap:10px;font-size:14px}
#contactForm .btn{padding:14px 34px;border-radius:999px}

/* Responsive helpers */
@media (max-width:1024px){.company{grid-template-columns:1fr}}
@media (max-width:840px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:720px){#contactForm .f-row{grid-template-columns:1fr}#contactForm .f-row label{margin-bottom:6px}}
@media (max-width:560px){.hero-inner{padding:58px var(--gutter) 34px}.cards{grid-template-columns:1fr}.section{padding:44px 0}}

/* =============== Page fade / reveal =============== */
body.page-enter{opacity:0;transform:translateY(6px)}
body.page-ready{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
@media (prefers-reduced-motion:reduce){body.page-enter{opacity:1;transform:none}body.page-ready{transition:none}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* =============== Privacy page (single, consolidated) =============== */
.privacy-page{max-width:960px;margin:0 auto;padding:96px 28px 104px;background:#fff;color:#141414}
.privacy-page h1.hd{
  text-align:center;font-weight:800;font-size:clamp(28px,2.2vw + 18px,40px);line-height:1.35;margin:0 0 32px
}
.privacy-page h1.hd small{display:block;margin-top:8px;color:#555;font-size:.7em;font-weight:600}
.privacy-page h1.hd::after{content:"";display:block;width:96px;height:2px;margin:20px auto 0;background:#111;opacity:.12}
.privacy-page .container>p:first-of-type{max-width:72ch;margin:0 auto 30px;font-size:clamp(15px,.25vw + 14px,18px);line-height:1.95;color:#222}
.privacy-page p,.privacy-page ol,.privacy-page ul{max-width:78ch;margin:0 0 16px;line-height:1.95;letter-spacing:.01em}
.privacy-page ol,.privacy-page ul{list-style:none;padding-left:0}
.privacy-page li{position:relative;padding-left:1.6em;margin:0 0 10px}
.privacy-page ul>li::before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.5em;border-radius:50%;background:#111;opacity:.22}
.privacy-page ol{counter-reset:num}
.privacy-page ol>li::before{counter-increment:num;content:counter(num) ".";position:absolute;left:0;top:0;color:#111;opacity:.55;font-weight:700}
.privacy-page h2.hd{position:relative;width:fit-content;font-size:clamp(17px,.45vw + 16px,22px);font-weight:700;margin:64px 0 16px;padding-left:14px}
.privacy-page h2.hd::before{content:"";position:absolute;left:0;top:.22em;width:6px;height:1.15em;background:#111;border-radius:3px;opacity:.9}
.privacy-page hr{border:none;height:1px;margin:46px 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent)}
.privacy-page small{color:#666;font-size:13px;line-height:1.75;display:block}
@media (max-width:560px){.privacy-page{padding:78px 18px 88px}}



/* === Patch: circular hamburger icon (no layout change) === */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1.5px solid #111;
  border-radius:50%;
  background:#fff;
  align-items:center; justify-content:center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span{
  width:18px; height:2px;
  background:#111;
  display:block;
  transition:transform .25s, opacity .25s;
}
.nav-toggle span + span{ margin-top:4px; }
.nav-toggle.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:960px){
  .brand-badge{ margin-right:auto; }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .nav{ margin-left:0; }
}

/* === Patch: hero video fallback (white screen guard) === */
.video-failed .hero-video{ display:none; }
.video-failed .hero{ background:#000 url("./assets/img/hero.jpg") center/cover no-repeat; }



/* === Hamburger: rounded-square, dark fill with white outline/bars === */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #111;
  align-items: center; justify-content: center;
  gap: 5px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.nav-toggle span{
  width: 18px; height: 2px;
  background: #fff;
  display: block;
  transition: transform .25s, opacity .25s;
}
.nav-toggle span + span{ margin-top: 4px; }
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; margin-left:auto; }
}
/* Keep "X" animation on active */
.nav-toggle.active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity: 0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* === Safety patch: ensure hamburger is clickable and above layers === */
.topbar-inner{ position: relative; }
.nav-toggle{ position: relative; z-index: 60; cursor: pointer; }
.nav{ z-index: 55; }

/* === Fix: raise header z-index for safety === */
.topbar{ z-index: 1000; }
.nav-toggle{ pointer-events:auto; }

/* === Fix: ensure drawer transform is GPU-accelerated === */
@media (max-width:960px){
  .nav{ will-change: transform, opacity; }
}

/* === MESSAGEセクション署名・余白調整 === */
#message {
  padding: 90px 0 100px; /* 上下余白を広げて呼吸感を確保 */
}

.message {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
  color: #222;
  text-align: left;
}

.message p {
  margin-bottom: 22px;
}

.message .sign-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  text-align: right;
  margin-top: 48px; /* 上余白をしっかり確保 */
  font-size: 14px;
  line-height: 1.9;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.message .sign-right br {
  display: none; /* 改行タグを除去して見た目で調整 */
}

.message .sign-right span {
  display: block;
}

.message .sign-right .corp {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.message .sign-right .ceo {
  font-weight: 700;
  font-size: 14px;
}

@media (max-width: 768px) {
  #message {
    padding: 70px 0 80px;
  }
  .message {
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.9;
  }
  .message .sign-right {
    align-items: flex-end;
    margin-top: 36px;
  }
}

/* ===== MESSAGE：余白と署名の最終調整（上書きパッチ） ===== */

/* 1) セクション下余白をしっかり確保（CTAとの間が詰まるのを防ぐ） */
#message.section{ padding-bottom: 110px !important; }  /* 目安 100–120px */

/* 2) 段落の下余白を統一（文章がダラつかないように） */
.message p{ margin: 0 0 22px !important; line-height: 2; }

/* 3) 署名のレイアウトを“浮かせない”：float解除＋右寄せだけに */
.sign-right{
  float: none !important;
  display: block !important;
  text-align: right !important;
  margin: 42px 0 0 !important;  /* 本文との距離だけ確保、下は詰める */
  font-size: 14.5px; line-height: 1.9; letter-spacing: .03em;
  color:#222;
}

/* 4) モバイルはややコンパクトに（はみ出し防止） */
@media (max-width: 768px){
  #message.section{ padding-bottom: 88px !important; }
  .message{ padding: 0 20px; }
  .message p{ margin: 0 0 18px !important; }
  .sign-right{ margin-top: 34px !important; font-size: 14px; }
}