/* --- CSS設定 (カラーパレット_BGHUB_color_260116.pdf に準拠) --- */
      
      html {
          overflow-x: hidden;
          scroll-behavior: smooth;
      }
      
       :root {
          --primary-yellow: #ffcc00;
          /* アクセントカラー */
          --bg-light: #fff5cc;
          /* 薄い青背景 */
          --bg-accent: #debc1e;
          /* (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_effect {
          transition: all 0.3s ease;
          cursor: pointer;
      }
      
      .link_effect:hover {
          opacity: 0.7;
          transform: translateY(-3px);
      }
      /* 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-light {
          color: #fff5ccc1 !important;
      }
      
      .bg-light {
          background-color: #fff5ccc1 !important;
      }
      
      .border-light {
          border-color: #fff5ccc1 !important;
      }
      
      .btn-light {
          background-color: #fff5ccc1;
          border-color: #fff5ccc1;
      }
      
      .btn-light:hover {
          background-color: #fff5ccc1;
          border-color: #fff5ccc1;
      }
      /* info */
      
      .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);
      }
      /* --- ヘッダー --- */
      
      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;
      }
      
      .header-cta:hover {
          border: solid 3px black !important;
          opacity: 0.8;
      }
      /* --- ヒーローエリア --- */
      
      .hero {
          background: linear-gradient(135deg, white 0%, #fff 100%);
          text-align: center;
      }
      
      .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.7) 80%);
          -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;
      }
      
      @media (max-width: 991px) {
          #catch_text {
              font-size: 1.2rem;
          }
      }
      /* --- Gallery Section --- */
      
      #gallery {
          position: relative;
          overflow: hidden;
          padding: 40px 0;
          background-color: var(--white);
      }
      
      .gallery-bg-text {
          position: absolute;
          top: 17.2%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: var(--font-en);
          font-size: 5vw;
          font-weight: 900;
          color: var(--text-blue);
          opacity: 0.1;
          /* Opacity 50 (0.5) is too strong for BG, using 0.1 for watermark effect */
          z-index: 0;
          pointer-events: none;
          white-space: nowrap;
          user-select: none;
      }
      
      .gallery-slider-wrapper {
          position: relative;
          width: 100%;
          height: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          perspective: 1000px;
      }
      
      .gallery-track {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      
      .gallery-item {
          position: absolute;
          width: 30%;
          /* Fits 5 items (approx 100% / 5) */
          height: 13vw;
          /* Maintain aspect ratio */
          left: 50%;
          transform: translateX(-50%);
          transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
          border-radius: 12px;
          overflow: hidden;
          /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); */
          cursor: pointer;
          background: #fff;
      }
      
      .gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
      }
      
      .gallery-item:hover img {
          transform: scale(1.1);
      }
      /* Modal */
      
      .gallery-modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          /* Opacity 30 */
          z-index: 9999;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(3px);
      }
      
      .gallery-modal img {
          max-width: 90%;
          max-height: 90%;
          border-radius: 8px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          animation: zoomIn 0.3s ease;
      }
      
      .close-btn {
          position: absolute;
          top: 30px;
          right: 40px;
          background: none;
          border: none;
          color: white;
          font-size: 3rem;
          cursor: pointer;
          z-index: 10000;
          line-height: 1;
          text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      }
      
      @keyframes zoomIn {
          from {
              transform: scale(0.9);
              opacity: 0;
          }
          to {
              transform: scale(1);
              opacity: 1;
          }
      }
      
      @media (max-width: 768px) {
          .gallery-item {
              width: 200px;
              height: 150px;
          }
          .gallery-bg-text {
              font-size: 20vw;
              top: 18.2%;
          }
      }
      
      #catch_text::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 60px;
          height: 4px;
          background-color: var(--primary-yellow);
          border-radius: 2px;
      }
      /* Center underline on mobile to match text-center */
      
      @media (max-width: 991px) {
          #catch_text::after {
              left: 50%;
              transform: translateX(-50%);
          }
      }
      
      .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;
      }


        /* 6 points kitemeete */

    #kite-points {
      font-family: 'Noto Sans JP', sans-serif;
      background: #fff;
    }

    #kite-points .section-label {
      display: inline-block;
      background: #F9D71C;
      color: #000;
      font-family: 'Poppins', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 2px;
      margin-bottom: 15px;
    }

    #kite-points .section-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 800;
      color: #111;
      line-height: 1.2;
      margin-bottom: 12px;
    }

    #kite-points .section-title span {
      color: #F9D71C;
    }

    #kite-points .section-subtitle {
      font-size: 0.95rem;
      color: #555;
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.8;
    }

    /* Point Cards */
    #kite-points .point-card {
      background: #fff;
      border: 2px solid #f0f0f0;
      border-radius: 14px;
      padding: 28px 24px ;
      height: 100%;
      position: relative;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
      overflow: hidden;
    }

    #kite-points .point-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: #F9D71C;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s ease;
      border-radius: 14px 14px 0 0;
    }

    #kite-points .point-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.10);
      border-color: #F9D71C;
    }

    #kite-points .point-card:hover::before {
      transform: scaleX(1);
    }

    /* Number badge */
    #kite-points .point-num {
      position: absolute;
      top: 16px;
      right: 18px;
      font-family: 'Poppins', sans-serif;
      font-size: 3rem;
      font-weight: 900;
      color: #F9D71C;
      opacity: 0.85;
      line-height: 1;
      user-select: none;
    text-shadow: 4px 4px 0 #000; /* shadow hitam, geser kanan bawah */
    }

    /* Icon area */
    #kite-points .point-icon-wrap {
      width: 52px;
      height: 52px;
      background: #FFF8D6;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      font-size: 1.5rem;
      transition: background 0.25s;
    }
    .point-icon-wrap .bi {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    }
    #kite-points .point-card:hover .point-icon-wrap {
      background: #F9D71C;
    }

    #kite-points .point-title {
      font-size: 1rem;
      font-weight: 700;
      color: #111;
      margin-bottom: 8px;
      line-height: 1.4;
      border-bottom: solid 1px #695a01;
    }

    #kite-points .point-desc {
      font-size: 0.875rem;
      color: #666;
      line-height: 1.75;
      margin: 0;
    }

    /* Webinar banner */
    #kite-points .webinar-banner {
      background: #111;
      border-radius: 16px;
      padding: 36px 40px;
      position: relative;
      overflow: hidden;
      margin-top: 56px;
    }

    #kite-points .webinar-banner::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 220px; height: 220px;
      background: #F9D71C;
      border-radius: 50%;
      opacity: 0.08;
    }

    #kite-points .webinar-banner::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -40px;
      width: 280px; height: 280px;
      background: #F9D71C;
      border-radius: 50%;
      opacity: 0.05;
    }

    #kite-points .webinar-tag {
      display: inline-block;
      background: #F9D71C;
      color: #000;
      font-family: 'Poppins', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 2px;
      margin-bottom: 14px;
    }

    #kite-points .webinar-title {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.2rem, 3vw, 1.6rem);
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
    }

    #kite-points .webinar-title span {
      color: #F9D71C;
    }

    #kite-points .webinar-desc {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.72);
      line-height: 1.8;
      /* max-width: 620px; */
    }

    #kite-points .webinar-highlight {
      background: rgba(249,215,28,0.12);
      border-left: 3px solid #F9D71C;
      border-radius: 4px;
      padding: 12px 18px;
      margin-top: 20px;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.85);
      line-height: 1.7;
    }

    #kite-points .webinar-highlight strong {
      color: #F9D71C;
    }

    #kite-points .btn-consult {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #F9D71C;
      color: #000;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 13px 28px;
      border-radius: 8px;
      text-decoration: none;
      border: none;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
      margin-top: 24px;
      white-space: nowrap;
    }

    #kite-points .btn-consult:hover {
      background: #f0cb00;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(249,215,28,0.4);
      color: #000;
      text-decoration: none;
    }

    #kite-points .btn-consult svg {
      transition: transform 0.2s;
    }

    #kite-points .btn-consult:hover svg {
      transform: translateX(4px);
    }

    /* Divider dots */
    #kite-points .dots-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 16px 0 40px;
    }
    #kite-points .dots-divider span {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #F9D71C;
      display: inline-block;
    }
    #kite-points .dots-divider span:nth-child(2) {
      width: 24px;
      border-radius: 4px;
    }
    #kite-points .dots-divider span:nth-child(3) {
      opacity: 0.4;
    }

    /* Animate on scroll */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #kite-points .animate-card {
      animation: fadeUp 0.55s ease both;
    }
    #kite-points .animate-card:nth-child(1) { animation-delay: 0.05s; }
    #kite-points .animate-card:nth-child(2) { animation-delay: 0.12s; }
    #kite-points .animate-card:nth-child(3) { animation-delay: 0.19s; }
    #kite-points .animate-card:nth-child(4) { animation-delay: 0.26s; }
    #kite-points .animate-card:nth-child(5) { animation-delay: 0.33s; }
    #kite-points .animate-card:nth-child(6) { animation-delay: 0.40s; }

    @media (max-width: 767px) {
      #kite-points .webinar-banner { padding: 28px 22px; }
      #kite-points .btn-consult { width: 100%; justify-content: center; }
    }
      /* --- 連携イベントセクション --- */
      
      .collaboration {
          text-align: center;
          /* background-color: var(--white); */
      }
      
      .collab-box {
          border: 2px solid var(--accent-blue);
          padding: 30px;
          border-radius: 8px;
          margin-top: 30px;
      }
      
      .gallery-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 15px;
          margin-top: 40px;
      }
      
      .gallery-item {
          background-color: #ddd;
          /* 画像プレースホルダー */
          height: 250px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
          border-radius: 4px;
          overflow: hidden;
      }
      
      .gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      /* --- セミナー紹介 (カード) --- */
      
      .seminars {
          background-color: var(--bg-light);
      }
      
      .section-title {
          text-align: center;
          font-size: 2rem;
          margin-bottom: 50px;
          font-family: var(--font-en);
          color: black;
      }
      
      .card-container {
          display: flex;
          flex-wrap: wrap;
          gap: 30px;
          justify-content: center;
      }
      
      .card {
          background: white;
          border-radius: 8px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
          width: 100%;
          max-width: 450px;
          overflow: hidden;
          border-top: 5px solid var(--accent-blue);
      }
      
      .card-header {
          padding: 15px 20px;
          background-color: #f9f9f9;
          border-bottom: 1px solid #eee;
          font-family: var(--font-en);
          font-weight: bold;
          font-size: 1.2rem;
          color: var(--black);
      }
      
      .card-body {
          padding: 25px;
          display: flex;
          gap: 20px;
      }
      
      .card-content {
          flex: 1;
      }
      
      .card-title {
          font-size: 1.1rem;
          font-weight: bold;
          color: var(--black);
          margin-bottom: 10px;
          line-height: 1.5;
      }
      
      .card-desc {
          font-size: 0.9rem;
          color: #555;
      }
      
      .card-image {
          width: 100px;
          height: 100px;
          background-color: #ccc;
          border-radius: 50%;
          /* 顔写真用 */
          flex-shrink: 0;
          overflow: hidden;
      }
      
      .card-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      .card-footer {
          padding: 15px 20px;
          background-color: white;
          font-size: 0.9rem;
          color: var(--text-blue);
          font-weight: bold;
          border-top: 1px solid #eee;
      }
      /* --- アクセス --- */
      
      .access-container {
          display: flex;
          flex-wrap: wrap;
          gap: 40px;
          align-items: flex-start;
      }
      
      .access-info {
          flex: 1;
          min-width: 300px;
      }
      
      .access-map {
          flex: 1;
          min-width: 300px;
          height: 500px;
          background-color: #eee;
      }
      
      .access-detail {
          margin-bottom: 20px;
          border-left: 4px solid var(--primary-yellow);
          padding-left: 15px;
      }
      
      .access-detail h4 {
          margin-bottom: 5px;
          font-size: 1.1rem;
      }
      /* --- フォーム --- */
      
      .form-section {
          background-color: var(--bg-accent);
          text-align: center;
      }
      
      .form-wrapper {
          background: white;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
      .form-container{
        width:100%;
        height:auto;
      }
      .form-container iframe{
        border:none; 
        height: 2480px;
      }
      @media (max-width: 768px) {
        .form-container iframe{
            border:none; 
            height: 2450px;
        }
      }
      /* --- フッター --- */
      
      footer {
          background-color: var(--bg-accent);
          color: black;
          text-align: center;
          padding: 20px 0;
          font-size: 0.9rem;
          font-family: var(--font-en);
      }
      /* --- スマホ対応 (Responsive) --- */
      
      @media (max-width: 768px) {
          .hero h1 {
              font-size: 1.8rem;
          }
          .hero-date {
              font-size: 1.5rem;
          }
          .card-body {
              flex-direction: column-reverse;
              text-align: center;
          }
          .card-image {
              margin: 0 auto;
          }
          .header-cta span {
              display: none;
          }
          /* スマホでは「無料」の文字だけ消すなどの調整 */
          /* .header-cta::after {
              content: "予約";
          } */
      }
      
      .catch-copy {
          color: black;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
      }
      
      .catch-copy::after {
          content: "";
          display: block;
          width: 150px;
          height: 3px;
          background-color: black;
          margin: 30px auto 0;
      }
      
      @media (min-width: 992px) {
          .fs-lg-4 {
              font-size: 1.5rem !important;
          }
          .fs-lg-3 {
              font-size: 2rem !important;
          }
      }
      
      .gallery-slider-wrapper {
          position: relative;
      }
      
      .gallery-nav-btn {
          position: absolute;
          top: 67%;
          transform: translateY(-50%);
          background-color: rgba(255, 255, 255, 0.7);
          border: none;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          z-index: 20;
          color: var(--text-blue);
          transition: background-color 0.3s;
      }
      
      .gallery-nav-btn:hover {
          background-color: rgba(255, 255, 255, 1);
      }
      
      .prev-btn {
          left: 10px;
      }
      
      .next-btn {
          right: 10px;
      }
      
      @media (min-width: 768px) {
          .gallery-nav-btn {
              width: 50px;
              height: 50px;
          }
          .prev-btn {
              left: 20px;
          }
          .next-btn {
              right: 20px;
          }
      }
      
      .section-bg-text {
          position: absolute;
          top: 10px;
          left: 50%;
          transform: translateX(-50%);
          font-family: var(--font-en);
          font-size: 5vw;
          font-weight: 900;
          color: #ffcc00;
          opacity: 0.15;
          z-index: 0;
          pointer-events: none;
          white-space: nowrap;
          user-select: none;
      }
      
      .form-section .section-bg-text {
          color: #0000009d;
      }
      
      @media (max-width: 768px) {
          .section-bg-text {
              font-size: 20vw;
              top: 5px;
          }
      }
      
      .access-detail {
          position: relative;
          border-left: 6px solid var(--bg-accent);
          padding: 30px 10px 10px 30px;
          margin-bottom: 2rem;
          margin-top: 25px;
      }
      
      .access-icon {
          position: absolute;
          top: -25px;
          left: -27px;
          width: 50px;
          height: 50px;
          background-color: #fff;
          border: 1px solid var(--bg-accent);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: var(--bg-accent);
      }
      /* Webinar Card Styles */
      
      .webinar-card {
          overflow: hidden;
          font-size: 16px;
          overflow: auto;
          height: 200px;
          border-radius: 1rem;
          margin: 0.5rem;
          background-color: #fff;
          border: solid 2px var(--primary);
          box-shadow: 0 .25rem .5rem var(--primary-03);
          cursor: pointer;
          transition: all .3s ease
      }
      
      @media(max-width:767.98px) {
          .webinar-card {
              font-size: 14px;
          }
      }
      
      .webinar-card-opening {
          margin: 1rem;
          margin-top: calc(1rem + 80px);
          height: 140px;
      }
      
      .webinar-card .desctiption {
          padding: .1em
      }
      
      .webinar-card .desctiption .webinar {
          font-weight: 700
      }
      
      .webinar-card .desctiption .company {
          font-size: 15px !important;
          padding-left: 7px;
      }
      
      .webinar-card .desctiption .webinar {
          display: block;
          padding: 1px 6px 1px 6px;
          margin-bottom: -2em;
          min-height: 110px;
      }
      
      .shadow_bg_1 {
          border-color: #2bff00c1 !important;
          border: solid 2px #2bff00c1;
      }
      
      .shadow_bg_2 {
          border-color: #fffb00cb !important;
          border: solid 2px #fffb00cb;
      }
      
      .shadow_bg_3 {
          border-color: #5d00ff51 !important;
          border: solid 2px #5d00ff51;
      }
      
      .shadow_bg_1:hover {
          border: solid 2px #2bff00c1;
          box-shadow: 0 .25rem .8rem #2bff00c1;
          transform: scale(1.02)
      }
      
      .shadow_bg_2:hover {
          border: solid 2px #fffb00cb;
          box-shadow: 0 .25rem .8rem #fffb00cb;
          transform: scale(1.02)
      }
      
      .shadow_bg_3:hover {
          border: solid 2px #5d00ff51;
          box-shadow: 0 .25rem .8rem #5d00ff51;
          transform: scale(1.02)
      }
      /* 省人化 - warna hijau*/
      
      .cat_bg_1A,
      .cat_bg_1B,
      .cat_bg_1C,
      .cat_bg_1D,
      .cat_bg_1E,
      .cat_bg_1F,
      .cat_bg_1G,
      .cat_bg_1H,
      .cat_bg_1I,
      .cat_bg_1J,
      .cat_bg_1K,
      .cat_bg_1L,
      .cat_bg_1M,
      .cat_bg_1N,
      .cat_bg_1O,
      .cat_bg_1P,
      .cat_bg_1Q,
      .cat_bg_1R,
      .cat_bg_1S,
      .cat_bg_1T,
      .cat_bg_1U,
      .cat_bg_1V,
      .cat_bg_1W,
      .cat_bg_1X,
      .cat_bg_1Y,
      .cat_bg_1Z {
          background-color: #2bff00c1;
          color: white;
      }
      /* 省エネ・省資源 - warna kuning  */
      
      .cat_bg_2A,
      .cat_bg_2B,
      .cat_bg_2C,
      .cat_bg_2D,
      .cat_bg_2E,
      .cat_bg_2F,
      .cat_bg_2G,
      .cat_bg_2H,
      .cat_bg_2I,
      .cat_bg_2J,
      .cat_bg_2K,
      .cat_bg_2L,
      .cat_bg_2M,
      .cat_bg_2N,
      .cat_bg_2O,
      .cat_bg_2P,
      .cat_bg_2Q,
      .cat_bg_2R,
      .cat_bg_2S,
      .cat_bg_2T,
      .cat_bg_2U,
      .cat_bg_2V,
      .cat_bg_2W,
      .cat_bg_2X,
      .cat_bg_2Y,
      .cat_bg_2Z {
          color: white;
          background-color: #fffb00cb;
      }
      /* 付加価値アップ - warna ungu */
      
      .cat_bg_3A,
      .cat_bg_3B,
      .cat_bg_3C,
      .cat_bg_3D,
      .cat_bg_3E,
      .cat_bg_3F,
      .cat_bg_3G,
      .cat_bg_3H,
      .cat_bg_3I,
      .cat_bg_3J,
      .cat_bg_3K,
      .cat_bg_3L,
      .cat_bg_3M,
      .cat_bg_3N,
      .cat_bg_3O,
      .cat_bg_3P,
      .cat_bg_3Q,
      .cat_bg_3R,
      .cat_bg_3S,
      .cat_bg_3T,
      .cat_bg_3U,
      .cat_bg_3V,
      .cat_bg_3W,
      .cat_bg_3X,
      .cat_bg_3Y,
      .cat_bg_3Z {
          background-color: #5d00ff51;
          color: white;
      }
      .shadow_bg_Z {
          border-color: #9c9c9ccb !important;
          border: solid 2px #9c9c9ccb;
      }
      .shadow_bg_Z:hover {
          border: solid 2px #9c9c9ccb;
          box-shadow: 0 .25rem .8rem #9c9c9ccb;
          transform: scale(1.02)
      }
      .cat_bg_ZZ {
          background-color: #9c9c9ccb;
          color: white;
      }