/* =========================================================
   common.css  (KTS common style)
   - base / tokens
   - header / nav
   - footer
   - utilities
   - back-to-top button
   ========================================================= */

:root{
  /* Light theme */
  --bg:#ffffff;
  --alt:#f3f4f6;      /* 明るい灰 */
  --surface:#ffffff;  /* カード面 */
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);

  --accent:#2563eb;
  --accent2:#0ea5e9;

  --radius:16px;
  --shadow:0 12px 30px rgba(2,6,23,.10);
  --max:1120px;

  --header-h:72px;

  --logo-header-h: 38px; /* ヘッダー（文字なし） */
  --logo-footer-h: 56px; /* フッター（文字あり） */
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.7;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

/* ===== Common typography helpers ===== */
.eyebrow{
  color:var(--muted);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
h1,h2,h3{ line-height:1.2; margin:0 0 12px; }
p{ margin:0 0 14px; }
.muted{ color:var(--muted); }

/* =========================================================
   Header
   ========================================================= */
.header,
.header *{
  line-height: 1.2;
}

.header{
  position: fixed;   /* ← stickyやめる */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  height: var(--header-h);
  display:flex;
  align-items:center;

  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);

  transition: transform .25s ease;
  will-change: transform;

  transform: translate3d(0,0,0) !important; /* ←常に基準は表示 */
}

.header.is-hidden{
  transform: translate3d(0,-110%,0) !important; /* ←確実に隠す */
}


/* fixedにした分、本文がヘッダーに潜らないように */
main{
  padding-top: var(--header-h);
}

/* 3カラム（左：ロゴ / 中：ナビ / 右：空）で “ナビ中央寄せ” を作る */
.header__inner{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.brand{
  justify-self:start;
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.02em;
}

/* 既存の四角マークは未使用（ロゴ画像に統一） */
.brand__mark{ display:none; }

.logo-img{
  display:block;
  width:auto;
  height:100%;
  object-fit:contain;
}

/* ヘッダー用ロゴ枠 */
.brand__logo{
  height: var(--logo-header-h);
  width:auto;
  display:block;
}

/* ナビは中央 */
.nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;              /* 狭い時も折り返せる */
  justify-content:center;
}
.nav a{
  color:var(--muted);
  font-weight:800;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover{ background: rgba(2,6,23,.06); color:var(--text); }

/* 右側の空要素（中央寄せの“つり合い”用） */
.header__spacer{
  justify-self:end;
}

.actions{ display:flex; gap:10px; align-items:center; }
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:12px 14px;
    border-radius:12px;
    font-weight:900;
    border:1px solid transparent;
    cursor:pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, filter .15s ease;
    white-space:nowrap;
    font-size:14px;
}
.btn:active{ transform: translateY(1px); }
.btn--ghost{
    background: transparent;
    border-color: rgba(15,23,42,.18);
    color:var(--text);
}
.btn--ghost:hover{ background: rgba(2,6,23,.06); }
.btn--primary{
    background: linear-gradient(135deg, var(--accent), #60a5fa);
    color:#ffffff;
    box-shadow: 0 16px 30px rgba(37,99,235,.18);
}
.btn--primary:hover{ filter: brightness(1.03); }

/* ===== iPhone含む狭い幅：ロゴの下にナビを出す（消さない） ===== */
@media (max-width: 980px){
  .header{
    height: auto;              /* ★2段になっても高さが伸びる */
    min-height: var(--header-h);
    padding: 10px 0;           /* 少し余白（見た目安定） */
  }

  .header__inner{
    grid-template-columns: 1fr;
    justify-items:center;
    gap:10px;
  }
  .brand{ justify-self:center; }
  .header__spacer{ display:none; }

  .nav{
    width:100%;
    gap:10px;
  }
  .nav a{
    font-size:13px;
    padding:8px 10px;
  }
}

/* 狭い画面はロゴを少し小さく */
@media (max-width: 980px){
  :root{
    --logo-header-h: 34px;
    --logo-footer-h: 50px;
  }
}

/* =========================================================
   Footer
   ========================================================= */
footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  color:var(--muted);
  font-size:13px;
  background:#fff;
}

.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:16px;
}
.footer__grid a{ color:var(--muted); }
.footer__grid a:hover{ color:var(--text); }

/* フッター用ロゴ枠 */
.footer__logo{
  height: var(--logo-footer-h);
  width:auto;
}

/* =========================================================
   Back to top
   ========================================================= */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;

  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;

  box-shadow: 0 18px 40px rgba(2,6,23,.14);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.back-to-top:hover{ background: #ffffff; }
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   Mobile drawer nav (MENU)  - no JS
   iPhone 5s想定で発動: 420px以下
   ========================================================= */

/* hidden checkbox */
.nav-toggle{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  border:0;
  overflow:hidden;
  clip: rect(0 0 0 0);
  white-space:nowrap;
}

/* MENU button (default: hidden) */
.nav-btn{ display:none; }

/* drawer wrapper (default: normal flow) */
.nav-drawer{ display: contents; } /* 通常はレイアウトを崩さない */

@media (max-width: 590px){
  .header__inner{
    justify-items:stretch;
    grid-template-columns: 1fr auto; /* 左：ロゴ / 右：ボタン */
    gap:10px;
    align-items:center;
  }

  .brand{
    justify-self:start;
    max-width: 75%; /* ロゴはみ出し防止 */
  }
  .brand__logo{
    max-width: 100%;
    height: var(--logo-header-h);
    width: auto;
    object-fit: contain;
  }

  .header__spacer{ display:none; }

  /* 520px以下は通常ナビを消して、2段自体を発生させない */
  .nav-drawer{ display:block; } /* display:contents を無効化 */
  .nav{ display:none; }

  /* ボタン表示 */
  .nav-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-self:end;

    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.18);
    background: rgba(255,255,255,.92);
    color: var(--text);
    font-weight:900;
    cursor:pointer;
    user-select:none;
  }
  .nav-btn:hover{ background:#fff; }

  .nav-btn__label{ display:none; } /* MENU文字は消す */

  /* 3本線 */
  .nav-btn__icon{
    width:18px;
    height:12px;
    position:relative;
    display:inline-block;
  }
  .nav-btn__icon::before,
  .nav-btn__icon::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    background: var(--text);
    border-radius:2px;
  }
  .nav-btn__icon::before{ top:0; box-shadow: 0 5px 0 var(--text); }
  .nav-btn__icon::after{ bottom:0; }

  /* ドロワー（開くまでは非表示） */
  .nav-drawer{
    position:absolute;
    left:0; right:0;
    top:100%;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow: 0 18px 40px rgba(2,6,23,.14);
    padding:10px 0;

    opacity:0;
    transform: translateY(-6px);
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
  }

  /* ドロワー内の nav は表示（※ .nav を上で消しているので上書き） */
  .nav-drawer .nav{
    display:flex;
    width:min(var(--max), calc(100% - 40px));
    margin:0 auto;
    flex-direction:column;
    align-items:stretch;
    gap:6px;

    overflow: visible;
    flex-wrap: nowrap;
    justify-content:flex-start;
  }
  .nav-drawer .nav a{
    padding:12px 12px;
    border-radius:12px;
    font-size:14px;
  }

  /* 開いたら表示 */
  .nav-toggle:checked ~ .nav-btn .nav-btn__icon::before{
    top:5px;
    box-shadow:none;
    transform: rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-btn .nav-btn__icon::after{
    bottom:5px;
    transform: rotate(-45deg);
  }
  .nav-toggle:checked ~ .nav-drawer{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
}