/* --- CSS設定 (カラーパレット_BGHUB_color_260116.pdf に準拠) --- */
      
      html {
          overflow-x: hidden;
          scroll-behavior: smooth;
      }


       :root {
          --primary-yellow: #ffcc00;
          /* ffcc00 btn orange
            ffcc00 border  */
          /* ebca00 orange dot */
          --yellow-dot: #ebca00;
          /* e3edf0 bg light blue */
          --light-blue: #e3edf0;
          /* アクセントカラー */
          --bg-light: #fff5cc;
          /* c00000 bg danger btun  */
          --red: #c00000;
          /* 薄い青背景 */
          --bg-accent: #debc1e;
          /* bg orange */
          --bg-orange-1: #e9d04f;
          --bg-orange-2: #e1c023;
          /* (PDFのカラーコードに近い値を採用) */
          --accent-blue: #6ca0cc;
          /* 中間の青 */
          --text-blue: #3b689b;
          /* メインテキスト色 */
          --black: #000000;
          --white: #fdfefe;
          --font-jp: 'Zen Kaku Gothic New', sans-serif;
          /* A1ゴシック代替 */
          --font-en: 'Oswald', sans-serif;
          /* DIN代替 */
      }
      /* animation | hover */
      .link{
        padding-bottom: 2px;
        text-decoration: underline;
        color: blue;
      }
      .link_effect {
          transition: all 0.3s ease;
          cursor: pointer;
      }
      
      .link_effect:hover {
          opacity: 0.9;
          transform: translateY(-3px);
      }
      .link_effect_border {
            text-decoration: none;
            display: inline-block;
            position: relative;
            color: #000; /* Warna teks bisa disesuaikan */
            padding-bottom: 2px; /* Memberi ruang untuk garis */
        }

        .link_effect_border::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px; /* Ketebalan garis */
            bottom: 0;
            left: 0;
            background-color: #000; /* Warna garis */
            transition: width 0.3s ease-in-out; /* Durasi dan efek animasi */
        }

        .link_effect_border:hover::after {
            width: 100%; /* Garis memanjang penuh saat hover */
        }
      .button_effect {
        display: inline-block;
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        outline: none;
        /* Memberikan sedikit bayangan dasar agar terlihat seperti tombol */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .button_effect:hover {
        /* Sedikit membesar, memberikan kesan tombol mendekat ke user */
        transform: translateY(-2px) scale(1.03);
        
        /* Bayangan menjadi lebih lembut dan lebar (efek melayang/pop-up) */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        
        /* Membuat warna sedikit lebih terang, bukan transparan */
        filter: brightness(1.1);
    }

    .button_effect:active {
        /* Efek saat benar-benar ditekan (penting untuk UX Jepang) */
        transform: translateY(1px) scale(0.98);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        filter: brightness(0.9);
    }
      /* bootstrap */
      /* 
        --primary-yellow: #ffcc00;
        --text-blue: #3b689b;
        --bg-light: #e3edf0;
        --bg-accent: #debc1e;
        --accent-blue: #6ca0cc;
      */
      /* primary */
      
      .text-primary {
          color: #3b689b !important;
      }
      
      .bg-primary {
          background-color: #3b689b !important;
      }
      
      .border-primary {
          border-color: #3b689b !important;
      }
      
      .btn-primary {
          background-color: #3b689b;
          border-color: #3b689b;
      }
      
      .btn-primary:hover {
          background-color: #2c507a;
          border-color: #264367;
      }
      
      .btn-outline-primary {
          color: #3b689b;
          border-color: #3b689b;
      }
      
      .btn-outline-primary:hover {
          background-color: #3b689b;
          color: #fff;
      }
      /* secondary */
      
      .text-secondary {
          color: #ffcc00 !important;
      }
      
      .bg-secondary {
          background-color: #ffcc00 !important;
      }
      
      .border-secondary {
          border-color: #ffcc00 !important;
      }
      
      .btn-secondary {
          background-color: #ffcc00;
          border-color: #ffcc00;
      }
      
      .btn-secondary:hover {
          background-color: #e6b800;
          border-color: #d9ad00;
      }
      
      .btn-outline-secondary {
          color: #ffcc00;
          border-color: #ffcc00;
      }
      
      .btn-outline-secondary:hover {
          background-color: #ffcc00;
          color: #000;
      }
      /* light */
      
      .text-info {
          color: #debc1e !important;
      }
      
      .bg-info {
          background-color: #debc1e !important;
      }
      
      .border-info {
          border-color: #debc1e !important;
      }
      
      .btn-info {
          background-color: #debc1e;
          border-color: #debc1e;
      }
      
      .btn-info:hover {
          background-color: #c5a91a;
          border-color: #b89c18;
      }
      /* warning */
      
      .text-warning {
          color: #6ca0cc !important;
      }
      
      .bg-warning {
          background-color: #6ca0cc !important;
      }
      
      .border-warning {
          border-color: #6ca0cc !important;
      }
      
      .btn-warning {
          background-color: #6ca0cc;
          border-color: #6ca0cc;
      }
      
      .btn-warning:hover {
          background-color: #598db3;
          border-color: #5180a3;
      }
      /* bootstrap */
      /* --- リセット & 基本設定 --- */
      
      body {
          margin: 0;
          padding: 0;
          font-family: var(--font-jp);
          color: var(--black);
          line-height: 1.6;
          background-color: var(--white);
          overflow-x: hidden;
      }
      
      h1,
      h2,
      h3 {
          margin: 0;
          color: black;
          font-weight: 700;
      }
      img {
          max-width: 100%;
          height: auto;
          vertical-align: bottom;
      }
      
      a {
          text-decoration: none;
          color: inherit;
      }
      
      .container {
          max-width: 1000px;
          margin: 0 auto;
          padding: 0 20px;
      }
      
      .section {
          padding: 60px 0;
      }
      
      .bg-light {
          background-color: var(--bg-light);
      }

      .text-shadow{
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      }
      /* --- ヘッダー --- */
      
      header {
          background-color: var(--white);
          padding: 15px 0;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          position: sticky;
          top: 0;
          z-index: 100;
      }
      
      .header-inner {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      
      .logo {
          font-weight: bold;
          font-size: 1.2rem;
          color: var(--text-blue);
      }
      
      .header-cta {
          /* background-color: var(--primary-yellow);
          color: var(--black); */
          /* border: solid 3px black; */
          padding: 10px 20px;
          border-radius: 4px;
          transition: all ease 0.3s;
          display: inline-block;
          font-weight: bolder;
          position: relative;
          border: solid black 1px;
      }
      
      .header-cta span {
          position: relative;
      }

      .header-cta span::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 0;
          height: 2px;
          background-color: currentColor;
          transition: width 0.3s ease;
      }

      .header-cta:hover span::after {
          width: 100%;
      }
      /* --- ヒーローエリア --- */
      
      .hero {
          background-color: #e1c023;
          background-image: radial-gradient(circle at top left, #e9d04f, transparent 40%);
      }
      
      .hero h1 {
          font-size: 2.5rem;
          margin-bottom: 20px;
          line-height: 1.4;
      }
      
      #catch_text {
          font-size: 2rem;
          font-weight: 700;
          /* Techy Gradient Text */
          background: linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0.656) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          color: var(--primary-yellow);
          /* Fallback */
          /* Decoration */
          position: relative;
          padding-bottom: 15px;
          letter-spacing: 0.05em;
      }
      
      .btn-hero {
            text-align: center;
            height: 95px;
            background-color: white;
            padding: 10px;
            /* 1. Mencegah perubahan posisi/layout shift */
            /* Kita pasang border transparan sbg placeholder */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.21);
            cursor: pointer;
            font-weight: bolder;
            position: relative;
            border-radius: 0px !important;
            /* 2. Membuat 4 Garis menggunakan Gradient */
            background-image: 
                linear-gradient(#000, #000), /* Garis Kiri */
                linear-gradient(#000, #000), /* Garis Atas */
                linear-gradient(#000, #000), /* Garis Kanan */
                linear-gradient(#000, #000); /* Garis Bawah */
            
            background-repeat: no-repeat;

            /* 3. MENENTUKAN ARAH GERAK (Titik Jangkar) */
            /* Logika: Supaya bergerak DARI Bawah KE Atas, jangkarnya harus di Bawah (Bottom) */
            background-position: 
                left bottom,   /* Kiri: Start dari Bawah */
                left top,      /* Atas: Start dari Kiri */
                right top,     /* Kanan: Start dari Atas */
                right bottom;  /* Bawah: Start dari Kanan */

            /* 4. UKURAN AWAL (Nol / Tersembunyi) */
            background-size: 
                3px 0%,   /* Lebar 2px, Tinggi 0 */
                0% 3px,   /* Lebar 0, Tinggi 2px */
                3px 0%, 
                0% 3px;

            /* 5. Transisi Semua Sekaligus */
            transition: all 0.3s ease-in-out, filter 0.3s;
        }

        .btn-hero:hover {
            filter: brightness(1.3);
            opacity: 1 !important;
            /* 6. UKURAN AKHIR (Penuh) */
            /* Saat hover, semua size menjadi 100% secara bersamaan */
            background-size: 
                3px 100%, 
                100% 3px, 
                3px 100%, 
                100% 3px;
        }

        /* Efek Klik */
        .btn-hero:active {
            transform: scale(0.98);
        }
        
        .btn-hero-outline {
            /* Tambahkan ini agar border tidak menambah ukuran elemen */
            box-sizing: border-box; 
            
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            
            /* Gunakan min-height agar lebih fleksibel */
            min-height: 95px; 
            padding: 10px;
            cursor: pointer;
            font-weight: bolder;
            position: relative;
            border-radius: 0px !important;
            border: 3px solid black; 
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }

        /* Efek Klik */
        .btn-hero-outline:active {
            transform: scale(0.98);
        }

        @media (max-width: 768px) {
            .btn-hero, .btn-hero-outline {
                /* Gunakan min-height juga di sini */
                min-height: 60px; 
                height: auto;
                padding: 5px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            }
        }

      @media (max-width: 991px) {
          #catch_text {
              font-size: 1.2rem;
          }
      }
      .hero-date {
          font-family: var(--font-en);
          font-size: 2rem;
          color: var(--black);
          margin-bottom: 30px;
          font-weight: 700;
      }
      
      .hero-copy {
          font-size: 1.2rem;
          margin-bottom: 40px;
          font-weight: 500;
      }
      
      .hero-video-wrapper {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
      }
      
      .hero-video {
          width: 100%;
          height: auto;
          object-fit: cover;
          display: block;
      }
      .webiste-link {
          background-color: #e1c023;
          background-image: radial-gradient(circle at top left, #e9d04f, transparent 40%);
      }
      .achievements{
        background-color: var(--light-blue);
      }
      .achievement-box {
        min-height: 200px;
        min-width: 200px;
        border: solid var(--bg-accent);
        border-radius: 10px;
        background-color: white;
        text-align: black;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }
      @media (max-width: 768px) {
        .achievement-box {
            min-height: 160px;
            min-width: 160px;
        }
      }
      .exhibit-flow{
          background-color: #e1c023;
          background-image: radial-gradient(circle at top left, #e9d04f, transparent 40%);
      }
      .webinar-logo-image{
            width:460px;
      }
      .ww_button{
        position:absolute;
        right: 0;
        bottom: 0;
        z-index: 10;
      }
      @media (max-width: 768px) {
        .ww_button{
            position:initial;
        }
      }
      .kitemeete{
        background-color: var(--light-blue);
      }
      @media (max-width: 768px) {
        .webinar-logo-image{
            width:300px;
        }
      }
      @media (min-width: 768px) {
        .kitemitekai-image{
                max-width:560px;
                margin: auto;
        }
      }
      .form{
        /* max-width: 1400px; */
        margin: auto;
        background-repeat: no-repeat;
        background-position: right 20% center;
        background-size: cover;
        padding: 20px 20px 160px 20px ;
      }
      .footer_logo{
        max-width: 400px;
      }
      @media (max-width: 768px) {
        .form {
            background-position: left center;
            padding: 15px 15px 40px 15px ;
        }
      .footer_logo{
        max-width: 270px;
      }
      }

      /* form page  */
      .form-title::after {
                        content: '';
                        display: block;
                        width: 60px;
                        height: 3px;
                        background-color: black;
                        margin: 15px auto 0;
                        border-radius: 2px;
      }