:root{
      --bg:#0b0d10; --text:#e8edf2; --muted:#9aa6b2; --accent:#56c2ff;
      --card:#14181e; --border:#22303c; --maxw:1100px; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
    }

    /* Base */
    .hero-text h1 {
      font-family: 'Shippori Mincho', serif;
      font-size: clamp(36px, 6vw, 64px) !important;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1.3;
      color: #fff;
      position: relative;
      text-shadow: 0 0 12px rgba(86,194,255,.6), 0 0 24px rgba(86,194,255,.4);
    }
    .hero-text h1 span.future {
      font-family: 'Orbitron', sans-serif;
      background: linear-gradient(90deg, #56c2ff, #9a6bff, #56c2ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shimmer 3s linear infinite;
      background-size: 200% 100%;
    }
    @keyframes shimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    *{box-sizing:border-box}
    body{margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg)}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    section{padding:72px 24px}
    h2{max-width:var(--maxw); margin:0 auto 24px; font-size:clamp(22px,3vw,28px)}

    /* ===== Header & Nav ===== */
    .site-header{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:rgba(10,12,15,.6); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); z-index:1002}
    .logo{font-weight:800; letter-spacing:.04em; font-size:18px}
    .main-nav ul{display:flex; gap:20px; list-style:none; margin:0; padding:0}
    .main-nav a{opacity:.9}
    .main-nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}

    /* ===== Mobile Nav (Hamburger) ===== */
    .nav-toggle{display:none; position:relative; width:44px; height:44px; border:1px solid var(--border); background:#0f141b; border-radius:10px; cursor:pointer; z-index:1003}
    .nav-toggle .bar{position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:transform .25s ease, opacity .2s ease, top .25s ease}
    .nav-toggle .bar:nth-child(1){top:14px}
    .nav-toggle .bar:nth-child(2){top:21px}
    .nav-toggle .bar:nth-child(3){top:28px}
    .nav-toggle[aria-expanded="true"] .bar:nth-child(1){top:21px; transform:rotate(45deg)}
    .nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
    .nav-toggle[aria-expanded="true"] .bar:nth-child(3){top:21px; transform:rotate(-45deg)}

    @media(max-width:900px){
      .nav-toggle{display:inline-block}
      .main-nav{
        position:fixed; top:0; right:0; bottom:auto; width:min(80%, 320px);
        background:#000; border-left:1px solid var(--border);
        transform:translateX(100%); transition:transform .25s ease;
        padding:calc(64px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
        box-shadow:var(--shadow); z-index:1001; height:100dvh; min-height:100vh;
        overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain
      }
      .main-nav.open{transform:translateX(0)}
      .main-nav ul{flex-direction:column; gap:18px}
    }
    /* Desktop reset to ensure menu visible */
    @media(min-width:901px){
      .main-nav{position:static!important; transform:none!important; height:auto!important; width:auto!important; background:transparent!important; border:none!important; padding:0!important; box-shadow:none!important}
      .main-nav ul{flex-direction:row!important}
    }

    /* === Added: 背面マスク & スクロール抑止 === */
    .nav-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1000;
    }
    .nav-backdrop.show{ opacity:1; pointer-events:auto; }
    body.no-scroll{ overflow:hidden; }

    /* ===== Hero ===== */
    .hero{position:relative; min-height:85vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden}
    .hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; filter:brightness(.6)}
    .hero-text{max-width:800px; padding:0 16px; text-align:center}
    .hero-text h1{font-size:clamp(32px,5vw,48px); margin:0 0 16px; line-height:1.2}
    .hero-text p{color:var(--muted); font-size:18px; margin:0 0 28px}
    .cta-button{display:inline-block; padding:12px 24px; border-radius:999px; background:var(--accent); color:#081018; font-weight:700; box-shadow:var(--shadow)}

    /* ===== Vision / Mission ===== */
    .vision-mission .wrap{max-width:var(--maxw); margin:0 auto}
    .vision-mission-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px}
    .hover-glow{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden}
    .hover-glow:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(86,194,255,.35); border-color:var(--accent)}
    .card-header{display:flex; align-items:center; gap:8px; margin-bottom:8px}
    .card-index{font-size:14px; color:var(--accent); font-weight:800}
    .card-title{font-size:14px; font-weight:700; color:#9fb9ff; letter-spacing:.08em}
    .slogan{font-weight:800; font-size:clamp(20px, 3.2vw, 28px); line-height:1.12; margin:6px 0 8px}
    .en{margin-top:8px; font-size:clamp(12px,1.6vw,14px); opacity:.9}
    .grad-vision,.grad-mission{
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-size:200% 100%; animation:shimmerSlow 3.2s ease-in-out infinite;
    }
    .grad-vision{background-image:linear-gradient(90deg,#56c2ff 0%,#9a6bff 50%,#56c2ff 100%)}
    .grad-mission{background-image:linear-gradient(90deg,#46f0a0 0%,#a5ffcc 50%,#46f0a0 100%)}
    @keyframes shimmerSlow{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    @media(max-width:960px){.vision-mission-grid{grid-template-columns:1fr}}

    /* News */
    .news .wrap{max-width:var(--maxw); margin:0 auto}
    .news-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow)}
    .news-item h3{margin:0 0 6px; font-size:18px}
    .news-item p{margin:8px 0; color:var(--muted)}
    .news time{color:#b8c6d6; font-size:14px}

    .tagline {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; font-size: 16px; color: var(--muted); margin-top: 12px;
    }
    .flag-icon { width: 20px; height: auto; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.25); }

    /* ===== Services (image cards) ===== */
    .services .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
    .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.2vw, 40px); }
    .service-card{
      position:relative; isolation:isolate; border-radius:var(--radius);
      background:#0b0d10; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
    }
    .service-media{
      position:relative; display:block; border-radius:calc(var(--radius) - 6px);
      overflow:hidden; margin:6px; aspect-ratio:16/10; min-height:200px;
    }
    .service-media img{ width:100%; height:100%; object-fit:cover; display:block; }
    .service-media::before{
      content:""; position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 70%); z-index:0;
    }
    .service-media .overlay{
      position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55);
      border-radius:0 0 calc(var(--radius) - 6px) calc(var(--radius) - 6px);
      padding:16px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.9); z-index:1;
    }
    .service-card h3{margin:0 0 4px; font-size:18px; font-weight:800}
    .service-card p{margin:0; font-size:14px}
    .service-card:hover{ border-color:rgba(86,194,255,.45); box-shadow:0 12px 30px rgba(86,194,255,.12); }

    @media(max-width:960px){ .services-grid{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:520px){ .services-grid{grid-template-columns:1fr} }
    @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }

    .company .wrap { max-width: var(--maxw); margin: 0 auto; }
    .company dl { display: grid; grid-template-columns: 120px 1fr; gap: 12px 24px; }
    .company dt { font-weight: 700; color: var(--accent); }
    .company dd { margin: 0; color: var(--text); line-height: 1.6; }
    .company a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

    .contact .wrap { max-width: var(--maxw); margin: 0 auto; }
    .contact form { display: flex; flex-direction: column; gap: 16px; }
    .contact label { font-weight: 600; margin-bottom: 4px; }
    .contact input, .contact textarea {
      padding: 12px; border-radius: var(--radius); border: 1px solid var(--border);
      background: #11161d; color: var(--text); font-size: 16px;
    }
    .contact input:focus, .contact textarea:focus {
      outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(86,194,255,.3);
    }
    .contact button { align-self: flex-start; }

    .partners .wrap{ max-width: var(--maxw); margin: 0 auto; }
    .partner-grid{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:clamp(16px,2.5vw,24px); grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 900px){ .partner-grid{ grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px){ .partner-grid{ grid-template-columns: 1fr; } }

    .partner-card{
      border:1px solid var(--border); background:var(--card); border-radius:var(--radius);
      box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .partner-card a{ display:block; padding:16px; height:100%; }
    .partner-card:hover{ transform: translateY(-3px); border-color: rgba(86,194,255,.45); box-shadow: 0 12px 30px rgba(86,194,255,.12); }

    .logo-box{
      display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio: 16/9; overflow:hidden;
      border-radius: calc(var(--radius) - 8px); background:#0b0d10; border:1px solid rgba(255,255,255,.08);
      margin-bottom:12px;
    }
    .logo-box img{ width:100%; height:100%; object-fit:contain; background-color: transparent; padding: 6px; }
    .logo-box.is-text{ color: var(--text); font-weight: 700; padding: 16px; text-align:center; font-size: clamp(14px, 2.9vw, 18px); }

    .partner-name{ font-weight:700; margin-bottom:4px; }
    .visit{ font-size:12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

    /* Footer (placeholder for spacing) */
    .site-footer{border-top:1px solid var(--border); padding:24px; text-align:center; color:var(--muted)}

/* --- ロゴ画像の表示調整（改良版） --- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0;       /* テキスト余白防止 */
  line-height: 0;
}

.logo img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1); /* 白ロゴ化（暗背景想定） */
  transition: transform 0.3s ease, filter 0.4s ease;
}

/* --- hover時: 白い部分だけが発光する --- */
.logo img:hover {
  transform: scale(1.05);
  filter:
    brightness(1.5) invert(1)
    drop-shadow(0 0 6px rgba(86, 194, 255, 0.7))
    drop-shadow(0 0 12px rgba(86, 194, 255, 0.5))
    drop-shadow(0 0 24px rgba(86, 194, 255, 0.3));
}



/* --- PCサイズ時にさらに少し大きく --- */
@media (min-width: 900px) {
  .logo img {
    height: 64px;     /* PCではやや拡大して存在感UP */
  }
}


/* ホバー時のわずかな反応 */
.site-header .logo:hover{ opacity:.9; }

/* --- フッター全体 --- */
.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 40px 16px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* --- ロゴとテキスト配置 --- */
.footer-inner {
  display: flex;
  flex-direction: column; /* スマホでは縦積み */
  align-items: center;
  gap: 16px;
}

/* --- ロゴを大きく表示 --- */
.footer-logo {
  height: 72px;            /* ←ここを変更（以前は48px） */
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* 白を保持 */
}

/* --- PCでの横並びレイアウト --- */
@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: center;
    gap: 28px;              /* ロゴと文字の間隔を少し広く */
  }
  .footer-logo {
    height: 64px;           /* ←PCでは少しだけ小さくしてバランス調整 */
  }
  .site-footer p {
    margin: 0;
    font-size: 15px;
  }
}

.footer-logo {
  height: 72px;               /* ロゴサイズ（必要に応じて調整） */
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* 白ロゴ前提 */
  transition: transform 0.3s ease, filter 0.4s ease;
}

/* --- hover時: 白い部分だけが光る（形状グロー）--- */
.footer-logo:hover {
  transform: scale(1.05);
  filter:
    brightness(1.5) invert(1)
    drop-shadow(0 0 6px rgba(86, 194, 255, 0.7))
    drop-shadow(0 0 12px rgba(86, 194, 255, 0.5))
    drop-shadow(0 0 24px rgba(86, 194, 255, 0.3));
}

/* --- PC時のサイズ微調整 --- */
@media (min-width: 900px) {
  .footer-logo {
    height: 80px;
  }
}
/* --- TOPに戻るボタン --- */
#backToTop {
  position: fixed;
  bottom: 28px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(86, 194, 255, 0.5);
  background: rgba(10, 15, 20, 0.8);
  color: #56c2ff;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  z-index: 1200;
  backdrop-filter: blur(8px);
}

/* --- 表示時（JSで .show を付与） --- */
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

/* --- hover時のグロー（ロゴと統一感） --- */
#backToTop:hover {
  transform: scale(1.1);
  background: rgba(86, 194, 255, 0.15);
  box-shadow:
    0 0 6px rgba(86, 194, 255, 0.6),
    0 0 16px rgba(86, 194, 255, 0.4);
}
html {
  scroll-behavior: smooth;
}