:root {
      --bg: #0b0b0d;            /* 黒基調 */
      --bg-elev: #121216;       /* 1段明るい */
      --fg: #f2f2f2;            /* 本文 */
      --muted: #b7bcc7;         /* 補助テキスト */
      --line: #2a2a30;          /* 枠線 */
      --brand: #c6a34f;         /* ロゴに合わせた金色 */
      --brand-2: #59aabd;       /* ロゴの水色アクセント */
    }

    html,body { height: 100%; }
    body {
      font-family: 'Zen Antique', serif;
      color: var(--fg);
      background: url('assets/background.webp') center center / cover no-repeat fixed, 
                  linear-gradient(rgba(11,11,13,0.7), rgba(11,11,13,0.8));
      background-attachment: fixed;
    }

    /* Navbar */
    .navbar {
      backdrop-filter: blur(6px);
      background: rgb(255, 255, 255) !important;
      border-bottom: 1px solid #ddd;
      z-index: 1040;
    }
    .navbar-brand, .nav-link { color: #333 !important; }
    .navbar-brand { font-size: 1.25rem; text-decoration: underline; }
    .navbar-logo { 
      height: 32px; 
      width: auto; 
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); 
    }
    .nav-link:hover { text-decoration: underline; color: var(--brand) !important; }
    .btn-contact { font-weight: 700; background: var(--brand); border-color: var(--brand); color: #111; }
    .btn-contact:hover { opacity: .9; }

    /* ハンバーガーメニューアイコンのカスタマイズ */
    .navbar-toggler {
      border: none;
      padding: 4px 8px;
    }
    .navbar-toggler:focus {
      box-shadow: none;
    }
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Drawer */
    .custom-drawer {
      position: fixed; 
      top: 60px; 
      right: -320px; 
      width: 320px; 
      height: calc(100vh - 60px); /* calc(100% - 60px) から calc(100vh - 60px) に変更 */
      min-height: 500px; /* 最小高さを確保 */
      background: linear-gradient(180deg, #0f1116 0%, #151a22 100%);
      color: var(--fg);
      border-left: 1px solid var(--line);
      transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 1055;
      overflow-y: auto;
      box-shadow: -8px 0 32px rgba(0,0,0,0.4);
      backdrop-filter: blur(8px);
    }
    .custom-drawer.open { 
      right: 0px;
    }
    
    .bordered-text { 
      font-weight: 700; 
      font-size: 18px; 
      color: transparent; 
      -webkit-text-stroke: 1px var(--brand);
      text-align: center;
      margin-bottom: 1rem;
    }
    .drawer-links a { 
      color: var(--fg); 
      display: block; 
      margin: 8px 0; 
      padding: 12px 16px;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.2s ease;
      font-size: 16px;
    }
    .drawer-links a:hover {
      background: rgba(198,163,79,0.1);
      color: var(--brand);
      transform: translateX(4px);
    }
    .social-icons { 
      text-align: center; 
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }
    .social-icons img { 
      width: 28px; 
      height: 28px; 
      margin: 0 8px;
      transition: transform 0.2s ease;
      opacity: 0.8;
    }
    .social-icons img:hover {
      transform: scale(1.1);
      opacity: 1;
    }

    /* Hero */
    .hero-section {
      position: relative; display:flex; align-items:center; justify-content:center;
      height: 600px;
      background: linear-gradient(180deg, rgba(14,14,18,0) 0%, rgba(14,14,18,.8) 60%, rgba(14,14,18,1) 100%);
    }
    .hero-content { text-align:center; opacity:0; transform: translateY(24px); animation:fadeUp 1s ease .25s forwards; }
    .hero-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.25; }
    .hero-title .accent { color: var(--brand); text-shadow: 0 0 24px rgba(198,163,79,.2); }
    .hero-subtitle { font-size: clamp(14px, 2vw, 22px); opacity:.85; }
    .logo-mark { width: clamp(100px, 18vw, 180px); height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }

    .scroll-arrow { position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; opacity:0; transform-origin:center;
      animation: scrollArrowFadeIn 1.2s ease 1.2s forwards, bounce 1.6s infinite 2.4s;
    }
    .arrow-stick { width:4px; height:28px; background:#ddd; border-radius:2px; opacity:.35; margin-bottom:4px; }

    @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
    @keyframes scrollArrowFadeIn { to { opacity:1; } }
    @keyframes bounce { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-8px);} }

    /* Section Card 共通 */
    .section-card { position:relative; min-height: 420px; display:flex; align-items:center; padding: 3rem 1rem; margin-top: 80px; }
    .section-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(198,163,79,.12), rgba(17,17,19,.0)); pointer-events:none; }
    .section-card-inner{ position:relative; z-index:2; max-width: 1000px; margin:auto; }
    .section-title{ font-size: clamp(20px, 4vw, 36px); font-weight: 800; color: var(--fg); }
    .section-description{ font-size: clamp(14px, 2vw, 20px); opacity:.9; margin: 12px 0 20px; line-height:1.75; white-space: pre-line; }
    .section-button{ font-weight:700; border:1px solid var(--brand); color: var(--fg); }
    .section-button:hover{ background: var(--brand); color: #111; }

    /* 背景の装飾 */
    .vision-section { background: radial-gradient(60% 120% at 20% 20%, #15161c, #0b0b0d); }
    .business-section { background: radial-gradient(60% 120% at 80% 20%, #15161c, #0b0b0d); }

    /* News */
    .news-section { margin-top: 80px; text-align:center; }
    .news-title { font-size: clamp(18px, 3vw, 32px); font-weight:800; }
    .news-item { margin: 12px auto 0; max-width: 900px; background: var(--bg-elev); border:1px solid var(--line); border-radius: 12px; padding: 14px 18px; text-align:left; }
    .news-description { font-size: clamp(12px, 2vw, 18px); }
    .news-date { font-size: clamp(11px, 1.8vw, 14px); color: var(--muted); }
    .news-btn { margin-top: 12px; font-weight: 700; color: var(--fg); border: none; background: transparent; }
    .news-btn:hover { color: var(--brand); text-decoration: underline; }

    /* Recruit */
    .recruit-section{ margin-top: 80px; min-height: 360px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #0b0b0d 0%, #0e0e13 100%); border-block: 1px solid var(--line); }
    .recruit-box{ width: min(92%,1100px); background: rgba(18,18,22,.7); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
    .recruit-title{ font-size: clamp(18px,3vw,28px); font-weight: 700; color: var(--brand); }
    .recruit-text{ font-size: clamp(12px, 2vw, 18px); color: var(--fg); opacity: .9; margin-top: 10px; }
    .recruit-btn{ margin-top: 10px; font-weight: 700; color: var(--fg); border: none; background: transparent; }
    .recruit-btn:hover{ color: var(--brand); text-decoration: underline; }

    /* Contact */
    .contact-section{ text-align:center; padding: 44px 16px; margin-top: 80px; }
    .contact-text1{ font-size: clamp(12px,2vw,22px); color: var(--muted); }
    .contact-text2{ font-size: clamp(18px,3vw,34px); font-weight: 700; color: var(--fg); }
    .contact-button{ margin-top: 12px; background: var(--brand); color:#111; font-weight: 800; border:none; padding: 10px 24px; border-radius: 8px; }
    .contact-button:hover{ filter: brightness(1.05); }

    /* Footer */
    .footer{ border-top: 1px solid var(--line); background: rgba(12,12,15,.6); }
    .footer-brand{ color: var(--fg); text-decoration: underline; }
    .footer-link{ color: var(--fg); text-decoration:none; }
    .footer-link:hover{ color: var(--brand); text-decoration: underline; }

    /* Simple fade on scroll */
    .fadeup-on-scroll{ opacity:0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
    .fadeup-on-scroll.visible{ opacity:1; transform:none; }

    @media (max-width: 500px){
      .hero-section{ height: 500px; }
    }