/* =============================================================================
   TSUGIKINOMORI – Final CSS (A11y/UX Refined + Dark Mode + Mobile Ready)
   ---------------------------------------------------------------------------
   - CSS Variables with light/dark themes
   - Accessible focus states / color contrast
   - Smooth mobile nav
   - Components: hero, grid, card, table, form, member, media, compare, photo
   - Buttons variants, CTA grid
   ========================================================================== */

:root{
  /* Layout */
  --header-h: 64px;
  --container-w: min(1200px, 92vw);
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);

  /* Light theme */
  --surface: #ffffff;
  --surface-weak: rgba(255,255,255,.85);
  --text: #111;
  --muted: #444;              /* コントラスト改善 */
  --accent: #1c7c54;          /* グリーン */
  --primary: #0066cc;         /* ブルー（任意） */
  --focus-ring-color: #1c7c54;
}

/* =======================
   Dark theme (manual toggle)
   ======================= */
body.dark-mode{
  --surface: #1e1e1e;
  --surface-weak: rgba(40,40,40,.85);
  --text: #f5f5f5;
  --muted: #bbb;
  --accent: #4fd18a;
  --primary: #3399ff;
  --focus-ring-color: #4fd18a;
  --shadow: 0 6px 24px rgba(0,0,0,.6);
  background: var(--surface);
  color: var(--text);
}

/* =======================
   Base / Resets
   ======================= */
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
html{ scroll-behavior:smooth; }
body{
  color:var(--text);
  background:#fff;
  font-family:"メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", sans-serif;
  line-height:1.7;
  padding-top:var(--header-h);
}
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* =======================
   Header / Global Nav
   ======================= */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:1000;
}
body.dark-mode .site-header{
  background:rgba(30,30,30,.95);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  width:var(--container-w); margin:0 auto; height:100%;
  padding:0 12px;
  gap:12px;
}
.logo img{
  height:40px; width:auto; display:block;
}
.global-nav ul{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
.global-nav a{ font-weight:600; padding:8px 2px; }
.global-nav a:hover,
.global-nav a[aria-current="page"]{ color:var(--accent); }

/* Theme toggle button (🌙/☀️) */
.theme-toggle{
  background:none; border:none; font-size:22px; cursor:pointer;
  margin-left:12px; line-height:1;
}
.theme-toggle:focus-visible{ outline:2px solid var(--focus-ring-color); }

/* Hamburger button */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:36px; height:28px; background:none; border:none; cursor:pointer;
}
.menu-toggle span{
  display:block; height:3px; width:100%; background:#333; border-radius:2px; transition:.3s;
}
body.dark-mode .menu-toggle span{ background:#ddd; }

/* Mobile Nav */
@media(max-width:768px){
  .menu-toggle{ display:flex; }
  .global-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    background:var(--surface);
    max-height:0; overflow:hidden;
    opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .3s ease;
    border-bottom:1px solid rgba(0,0,0,.1);
  }
  body.dark-mode .global-nav{ border-bottom:1px solid rgba(255,255,255,.1); }
  .global-nav.open{
    max-height:100vh; opacity:1; visibility:visible;
  }
  .global-nav ul{ flex-direction:column; gap:0; padding:8px 0; }
  .global-nav li{ border-top:1px solid rgba(0,0,0,.06); }
  .global-nav li:last-child{ border-bottom:1px solid rgba(0,0,0,.06); }
  body.dark-mode .global-nav li{ border-color:rgba(255,255,255,.1); }
  .global-nav a{ display:block; padding:14px 20px; font-size:16px; }

  /* X (close) animation */
  .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); }
}

/* Mobile logo size (最後に配置して上書き) */
@media (max-width: 640px) {
  .logo img { height: 32px; }
}

/* =======================
   Hero
   ======================= */
.hero{
  position:relative; min-height:80vh;
  display:grid; place-items:center;
  padding:12vh 0 8vh;
  background-size:cover; background-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25));
}
.hero .content{
  position:relative; text-align:center; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.4); margin:0 16px;
}
.hero h1{ font-size:clamp(26px,6vw,48px); margin:0 0 12px; }
.hero .sub{ font-size:clamp(14px,4vw,20px); margin:0; }

/* CTA buttons */
.cta-grid{
  position:relative; margin-top:28px;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  width:min(800px,92vw);
}
.btn{
  padding:14px; border-radius:var(--radius); font-weight:700;
  background:var(--surface-weak); color:#111;
  text-align:center; box-shadow:var(--shadow);
  backdrop-filter:blur(2px);
  transition:transform .2s, background .2s, color .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--primary{ background:var(--primary); color:#fff; }

/* =======================
   Page hero / Layout
   ======================= */
.page-hero{ background:#f7faf8; border-bottom:1px solid rgba(0,0,0,.06); }
body.dark-mode .page-hero{ background:#222; border-bottom:1px solid rgba(255,255,255,.08); }
.page-title{ font-size:clamp(22px,4vw,36px); margin:0; padding:20px 0; }
.lead{ color:var(--muted); margin-top:6px; }

.container{ width:var(--container-w); margin:0 auto; padding:32px 0 48px; }

/* =======================
   Split / Grid
   ======================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; } }

.grid{ display:grid; gap:24px; }
.grid.col-2{ grid-template-columns:repeat(2,1fr); }
.grid.col-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .grid.col-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid.col-2, .grid.col-3{ grid-template-columns:1fr; } }

/* =======================
   Card
   ======================= */
.card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.05); overflow:hidden;
}
body.dark-mode .card{ background:#2a2a2a; border:1px solid rgba(255,255,255,.08); }
.card .media{ background:#e9eef0; }
.card .media img{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08);
  object-fit:cover;
}
.card .body{ padding:16px; }
.card .title{ margin:0 0 8px; font-weight:800; }
.role{ color:var(--muted); font-size:.95rem; }

/* =======================
   Compare (Before/After)
   ======================= */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare .pane{ background:#eef3f2; aspect-ratio:16/10; border-radius:12px; position:relative; }
.compare .label{
  position:absolute; top:8px; left:8px; background:#000; color:#fff;
  padding:4px 8px; border-radius:6px; font-size:12px; font-weight:700;
}
@media(max-width:700px){ .compare{ grid-template-columns:1fr; } }

/* =======================
   Media list (メディア掲載)
   ======================= */
.media-list{ display:grid; gap:16px; }
.media-item{
  display:grid; grid-template-columns:150px 1fr; gap:16px;
  padding:14px; border:1px solid rgba(0,0,0,.06); border-radius:12px; background:#fff;
}
body.dark-mode .media-item{ background:#2a2a2a; border:1px solid rgba(255,255,255,.08); }
.media-thumb{ aspect-ratio:16/10; background:#e9eef0; border-radius:8px; }
@media(max-width:640px){ .media-item{ grid-template-columns:1fr; } }

/* =======================
   Table
   ======================= */
.table{ width:100%; border-collapse:collapse; background:#fff; }
body.dark-mode .table{ background:#2a2a2a; border:1px solid rgba(255,255,255,.08); }
.table th,.table td{ padding:12px; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; }
.table th{ background:#f2f6f4; font-weight:700; }
body.dark-mode .table th{ background:#333; color:var(--text); }
body.dark-mode .table th, body.dark-mode .table td{ border-bottom:1px solid rgba(255,255,255,.08); }

/* =======================
   Form
   ======================= */
.form{ display:grid; gap:16px; }
.input, textarea, select{
  width:100%; padding:12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; background:#fff;
}
textarea{ min-height:160px; resize:vertical; }
body.dark-mode .input, body.dark-mode textarea, body.dark-mode select{
  background:#222; color:var(--text); border-color:rgba(255,255,255,.15);
}

/* Buttons row */
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* =======================
   Footer
   ======================= */
.site-footer{
  padding:20px; background:#fff; color:var(--muted);
  border-top:1px solid rgba(0,0,0,.06); text-align:center; font-size:.9rem;
}
body.dark-mode .site-footer{
  background:#111; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.1);
}

/* =======================
   Members (h-card)
   ======================= */
.member-list{ display:grid; gap:20px; }
.card.member{
  display:flex; align-items:center; gap:20px; padding:16px;
}
.card.member .avatar{
  flex:0 0 100px; height:100px; border-radius:50%;
  overflow:hidden; background:#e9eef0; box-shadow:0 2px 10px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
}
.card.member .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.card.member .body{ flex:1; text-align:left; }
.card.member .title{ margin:0; font-weight:700; font-size:1.1rem; }
.card.member .role{ margin:4px 0 8px; }
.card.member .badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{
  display:inline-block; background:#f2f6f4; color:#333;
  padding:4px 8px; border-radius:6px; font-size:.8rem;
}
body.dark-mode .badge{ background:#333; color:var(--text); }
@media(max-width:640px){
  .card.member{ flex-direction:column; align-items:flex-start; }
  .card.member .avatar{ flex:none; margin-bottom:8px; }
}

/* =======================
   Company photo (落ち着いたトーン)
   ======================= */
.company-photo{
  text-align:center; margin:40px auto 48px;
  max-width:900px; padding:0 16px;
}
.company-photo img{
  width:100%; height:auto; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.06);
}
body.dark-mode .company-photo img{ box-shadow:0 4px 16px rgba(0,0,0,.9); }
.company-photo .caption{
  margin-top:10px; font-size:.9rem; color:var(--muted); font-style:italic;
}