/* ===== リセット & 基本設定 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
          }
        
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #0c0c1c;
  color: #fff;
  line-height: 1.8;
  overflow-x: hidden;
}
        
        /* ===== フォントスタイル ===== */
        .section-title {
            font-size: 48px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 40px;
            letter-spacing: 2px;
        }
        
        .sub-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .body-text {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .caption {
            font-size: 14px;
            color: #999999;
            margin-top: 8px;
        }
        
        /* ===== レイアウト ===== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 100px 0;
            position: relative;
        }
        
 /* ====== 追加ここから：ハンバーガーメニュー & ドロワー & CTA ====== */

.p-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(12, 12, 28, 0.95);
    padding: 16px 20px;
  }
  
  .p-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    min-width: 95%;
    margin: 0 auto;
  }
  
  .p-header__logo a {
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
  }
  
  .p-header__menu {
    display: flex;
    gap: 30px;
    list-style: none;
  }
  
  .p-header__menu-item a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 24px;
    position: relative;
  }
  
 
  .c-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
  }

  .hamburger-inner, 
  .hamburger-inner::before, 
  .hamburger-inner::after {
background-color: #fff;
  }

 
  .hamburger-inner,
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #fff;
  }
  
  .p-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: #0C0C1C;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }
  
  .p-drawer.is-active {
    display: block;
    transform: translateX(0);
  }
  
  .p-drawer__inner {
    padding: 60px 20px;
  }
  
  .p-drawer__menu {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .p-drawer__menu-item a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
  }
  
  body.is-fixed {
    overflow: hidden;
  }
  
  /* 固定CTA */
  .p-fixed-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #8E5AFF;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none;
    z-index: 1100;
  }

  .site-header {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.5s ease-in-out;
  }
  
  .site-header.scrolled {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* スマホ表示時のメニュー切り替え */
  @media (max-width: 768px) {
    .p-header__menu {
      display: none;
    }
    .c-hamburger {
      display: block;
    }
  }
  
  /* ====== 追加ここまで ====== */
  
        
        /* ===== ヒーローセクション ===== */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #0C0C1C 0%, #1A1A36 100%);
            background-size: cover;
            background-image: url(../img/Hero-1.jpg); /* 背景画像を指定 */
            background-position: center;
            background-repeat: no-repeat;
            margin-bottom: 160px;
        }
        
        .hero-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .hero-text {
            position: absolute;
            top: 40%;
            left: 10%;
            width: 55%;
        }
        
        .hero-title {
            font-size: 64px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero-subtext {
            font-size: 20px;
            margin-bottom: 40px;
        }
        
        .hero-img {
            width: 45%;
            text-align: right;
        }
        
        .hero-img img {
            max-width: 100%;
            height: auto;
        }
        
        .scroll-icon-container {
            position: absolute; /* または fixed で画面に固定 */
            bottom: 40px; /* 表示位置 (お好みで調整) */
            left: 50%;
            transform: translateX(-50%);
            z-index: 10; /* 必要に応じて他の要素より手前に表示 */
          }
          
          .scroll-icon-fa {
            font-size: 48px; /* アイコンサイズを大きく */
            color: #00FFFF; /* ネオンカラー (明るいシアン) - 好みの色に変更可 */
            display: block; /* アニメーションや影の適用のため */
          
            /* ネオン風の光彩効果 (text-shadowを重ねて表現) */
            text-shadow:
              0 0 7px rgba(0, 255, 255, 1),    /* アイコン色で強く */
              0 0 10px rgba(0, 255, 255, 1),   /* アイコン色でさらに */
              0 0 21px rgba(0, 255, 255, 1),   /* 広がる光 */
              0 0 42px rgba(0, 255, 255, 0.8), /* もっと広がる光 (少し薄く) */
              0 0 82px rgba(0, 255, 255, 0.6), /* さらに広がる光 */
              0 0 92px rgba(0, 255, 255, 0.4);  /* ぼんやりした外側の光 */
              /* 白い光を少し混ぜると芯のある光に見えることも */
              /* 0 0 5px rgba(255, 255, 255, 0.8); */
          
            /* アニメーション設定: 上下動 + ネオンの明滅 */
            animation:
              gentle-bounce 2.5s infinite ease-in-out, /* 滑らかな上下動 */
              neon-flicker 2s infinite alternate ease-in-out; /* ネオンの明滅 */
          }
          
          /* 滑らかな上下動のアニメーション */
          @keyframes gentle-bounce {
            0%, 100% {
              transform: translateY(0);
            }
            50% {
              transform: translateY(-15px); /* 上に移動する量 */
            }
          }
          
          /* ネオンの明滅 (text-shadowとopacityを変化させる) */
          @keyframes neon-flicker {
            from {
              /* 通常の光 */
              text-shadow:
                0 0 7px rgba(0, 255, 255, 1),
                0 0 10px rgba(0, 255, 255, 1),
                0 0 21px rgba(0, 255, 255, 1),
                0 0 42px rgba(0, 255, 255, 0.8),
                0 0 82px rgba(0, 255, 255, 0.6),
                0 0 92px rgba(0, 255, 255, 0.4);
              opacity: 1;
            }
            to {
              /* 少し抑えた光 (消えかけ) */
              text-shadow:
                0 0 5px rgba(0, 255, 255, 0.8),
                0 0 8px rgba(0, 255, 255, 0.8),
                0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.6),
                0 0 60px rgba(0, 255, 255, 0.4),
                0 0 70px rgba(0, 255, 255, 0.2);
              opacity: 0.8; /* 少し透明度を下げる */
            }
          }

          .scroll-icon-fa:active {
            transform: scale(0.9); /* クリック時に少し小さくなる */
            opacity: 0.7; /* クリック時に少し薄くなる */
            /* ネオンの影も少し弱めるなど調整可能 */
            text-shadow:
              0 0 5px rgba(0, 255, 255, 0.8),
              0 0 8px rgba(0, 255, 255, 0.8),
              0 0 15px rgba(0, 255, 255, 0.8); /* 例: 影を少し抑える */
            transition: transform 0.1s ease, opacity 0.1s ease, text-shadow 0.1s ease; /* 素早い変化 */
          }
        /* ===== メッセージセクション ===== */
        .message {
            background: linear-gradient(135deg, #0C0C1C 0%, #1A1A36 100%);
            position: relative;
            overflow: hidden;
        }
        
        .message-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .message-text {
            width: 50%;
            padding-right: 50px;
        }
        
        .message-img {
            width: 45%;
            position: relative;
        }
        
        .message-img img {
            max-width: 100%;
            height: auto;
            position: relative;
            z-index: 2;
        }
        
        .message-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background: linear-gradient(135deg, rgba(142, 90, 255, 0.2), rgba(102, 204, 255, 0.2));
            transform: skewX(-15deg);
        }
        
        /* ===== WORKSセクション ===== */
        .works {
            background-color: #0C0C1C;
        }
        
        .works-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .works-img {
            width: 100%;
            max-width: 1000px;
            margin-bottom: 50px;
            position: relative;
        }
        
        .works-img img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .works-text {
            width: 100%;
            max-width: 800px;
            text-align: center;
        }
        
        /* ===== INTERVIEWセクション ===== */
        .interview {
            background-color: #0F0F24;
        }
        
        .interview-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 60px;
        }
        
        .interview-card {
            background-color: #161630;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .interview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .interview-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            object-position: top;
        }
        
        .interview-thumb {
            width: 100%;
            height: 320px;
            object-fit: cover;
        }
        
        .interview-info {
            padding: 20px;
        }
        
        .interview-name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .interview-position {
            color: #66CCFF;
            margin-bottom: 15px;
        }
        
        /* ===== BLOGセクション ===== */
        .blog {
            background-color: #0C0C1C;
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin: 124px auto;
        }
        
        .blog-card {
            background-color: #161630;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .blog-thumb {
            width: 100%;
            height: 240px;
            object-fit: cover;
            object-position: top;
        }
        
        .blog-info {
            padding: 20px;
        }
        
        .blog-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .blog-date {
            color: #999999;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .blog-more {
            text-align: center;
            margin-top: 50px;
        }
        
        /* ===== フッター ===== */
        footer {
            background-color: #08081A;
            padding: 60px 0;
            text-align: center;
        }

        footer a {
            margin: 60px auto;
        }
        
        .footer-menu {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .footer-link {
            margin: 0 20px;
            color: #FFFFFF;
            text-decoration: none;
        }
        
        .copyright {
            color: #999999;
            font-size: 14px;
        }
        
        /* ===== ボタン ===== */
        .btn-primary {
            display: inline-block;
            padding: 12px 30px;
            background-color: #8E5AFF;
            color: #FFFFFF;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s ease;
            border: 2px solid #8E5AFF;
        }
        
        .btn-primary:hover {
            background-color: #ffffffb8;
            color: #8E5AFF;
        }
        
        /* ===== 波紋エフェクト ===== */
        a {
            position: relative;
            overflow: hidden;
        }
        
        a::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        a:hover::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
        
        /* ===== レスポンシブ設定 ===== */
        @media (max-width: 768px) {
            .section-title {
                font-size: 36px;
            }

            .hero-text{
                top: 20%;
                left: 10%;
                h1 {
                    font-size: 40px;
                }
            }
            
            .hero-img, .message-img {
                margin-bottom: 30px;
            }
            
            .interview-grid, .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            
            .message-bg {
                width: 66%;

                top: 120px;
            }
        }
        
        @media (max-width: 480px) {

            section {
                padding: 0;
                margin-bottom: 40px;

            }
            .section-title {
                font-size: 32px;
            }
            
            .sub-title {
                font-size: 20px;
            }
            
            .body-text {
                font-size: 16px;
                margin-bottom: 40px;
            }
            
            .interview-grid, .blog-grid {
                grid-template-columns: 1fr;
            }
            
            .interview-card {
                margin-bottom: 24px;
            }
            
            .scroll-icon {
                display: none;
            }
            
            .works-img {
                margin-bottom: 30px;
            }

            .hero-text{
                top: 20%;
                left: 10%;
                width: 75%;

                h1 {
                    font-size: 24px;
                }
                p {
                    font-size: 18px;
                }
            }

            .btn-primary {
                font-size: 18px;
                padding: 14px 10px;
                width: 100%;
                margin-top: 0;
                text-align: center;
                span {
                    display: none;
                }

            }

            .p-header__logo a {
                font-size: 24px;
            }

            .message-content {
                flex-direction: column;
                align-items: center;
            }

            .message-text {
                width: 100%;
                padding-right: 0px;
                }

                .message-img {
                    width: 100%;
                }

                .footer-menu{
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 30px;
                }

                .footer-link {
                    margin: 10px;
                }

        }