/* リセットCSS */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 /* スムーススクロール用のオフセット */
 html {
   scroll-behavior: smooth;
   scroll-padding-top: 70px;
 }

 body {
   font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium', 'Meiryo', sans-serif;
   line-height: 1.7;
   color: #333;
   background-color: #f8f9fa;
   font-size: 14px;
 }

 /* ヘッダー */
 .header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 1rem 0;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   height: 70px;
 }

 .header__container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .header__logo {
   font-size: 1.5rem;
   font-weight: bold;
   text-decoration: none;
   color: white;
 }

 .header__nav li {
   display: flex;
   align-items: center;
 }

 .header__nav ul {
   display: flex;
   align-items: center;
   list-style: none;
   gap: 2rem;
 }

 .header__nav a {
   color: white;
   text-decoration: none;
   transition: opacity 0.3s ease;
 }

 .header__nav a:hover {
   opacity: 0.8;
 }

 .header__logo img {
   height: 40px;
   /* ロゴの高さを指定します */
   width: auto;
   /* 高さに合わせて幅は自動で調整されます */
   vertical-align: middle;
   /* 画像がテキストなどと並んだ際の縦位置をきれいに揃えます */
 }

 /* ヒーローセクション */
 .hero {
   /* background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); */
   color: white;
   text-align: center;
   position: relative;
   overflow: hidden;
   min-height: 710px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .hero__container {
   max-width: 800px;
   margin: 0 auto;
   position: relative;
   z-index: 3;
 }

 .hero__title {
   font-size: clamp(2rem, 4.5vw, 3.5rem);
   font-weight: bold;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   white-space: nowrap;
   width: 100%;
   text-align: center;
   letter-spacing: 0.5px;
 }

 .hero__subtitle {
   font-size: clamp(1.0rem, 2vw, 1.4rem);
   margin-bottom: 2rem;
   opacity: 0.9;
 }

 .hero__date {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 1rem 2rem;
   border-radius: 50px;
   display: inline-block;
   margin-bottom: 2rem;
   font-size: 1.2rem;
   font-weight: bold;
   border: 1px solid rgba(255, 255, 255, 0.2);
   margin-top: 3rem;
 }

 .hero__cta {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
 }

 .btn {
   display: inline-block;
   padding: 1rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   font-weight: bold;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
   font-size: 1rem;
 }

 .btn--primary {
   background: linear-gradient(45deg, #667eea, #764ba2);
   color: white;
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
 }

 .btn--primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }

 .btn--secondary {
   background: rgba(255, 255, 255, 0.1);
   color: white;
   border: 2px solid white;
   backdrop-filter: blur(10px);
 }

 .btn--secondary:hover {
   background: white;
   color: #333;
 }

 /* ▼ここから新しいCSSを追加▼ */

 /* 背景動画用のスタイル */
 .hero-video {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   object-fit: cover;
   z-index: 1;
 }

 /* 動画の上のオーバーレイ */
 .hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   z-index: 2;
 }

 /* PCとスマホで動画を切り替える設定 */
 .hero-video-pc {
   display: none;
   /* スマホではPC用動画を隠す */
 }

 .hero-video-mobile {
   display: block;
   /* スマホではモバイル用動画を表示 */
 }

 /* 画面幅が769px以上（タブレットやPC）の場合 */
 @media (min-width: 769px) {
   .hero-video-pc {
     display: block;
     /* PCではPC用動画を表示 */
   }

   .hero-video-mobile {
     display: none;
     /* PCではモバイル用動画を隠す */
   }
 }

 /* オーバービューセクション */
 .overview {
   padding: 4rem 1rem;
   background: white;
 }

 .section__container {
   max-width: 1200px;
   margin: 0 auto;
 }

 .section__title {
   text-align: center;
   font-size: 2.5rem;
   margin-bottom: 3rem;
   color: #333;
   position: relative;
 }

 .section__title::after {
   content: '';
   display: block;
   width: 60px;
   height: 4px;
   background: linear-gradient(45deg, #667eea, #764ba2);
   margin: 1rem auto;
   border-radius: 2px;
 }

 .event-info {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
   margin-bottom: 3rem;
 }

 .info-card {
   background: #f8f9fa;
   padding: 2rem;
   border-radius: 15px;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: 1px solid #e9ecef;
 }

 .info-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .info-card__icon {
   font-size: 3rem;
   margin-bottom: 1rem;
 }

 .info-card__title {
   font-size: 1.3rem;
   font-weight: bold;
   margin-bottom: 0.5rem;
   color: #333;
 }

 .info-card__text {
   color: #666;
 }

 /* 特徴セクション */
 .features {
   padding: 4rem 1rem;
   background: white;
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 3rem;
 }

 .feature-card {
   background: #f8f9fa;
   border: 1px solid #e9ecef;
   padding: 2.5rem;
   border-radius: 20px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }

 .feature-card:hover {
   transform: translateY(-10px);
 }

 .feature-card__icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(45deg, #667eea, #764ba2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   font-size: 2rem;
   color: white;
 }

 .feature-card__title {
   font-size: 1.4rem;
   font-weight: bold;
   margin-bottom: 1rem;
   color: #333;
 }

 .feature-card__text {
   color: #666;
   line-height: 1.8;
 }

 /* 出展者向けセクション */
 .exhibitors {
   padding: 4rem 1rem;
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }

 .exhibitors__content {
   text-align: center;
   margin-bottom: 3rem;
 }

 .exhibitors__text {
   font-size: 1.1rem;
   color: #666;
   max-width: 900px;
   margin: 0 auto 2rem;
   line-height: 1.8;
 }

 .exhibitor-benefits {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
   margin-top: 3rem;
 }

 .benefit-item {
   background: white;
   padding: 2rem;
   border-radius: 15px;
   border-left: 5px solid #667eea;
   transition: transform 0.3s ease;
 }

 .benefit-item:hover {
   transform: translateX(5px);
 }

 .benefit-item__title {
   font-weight: bold;
   margin-bottom: 0.5rem;
   color: #333;
 }

 .benefit-item__text {
   color: #666;
   font-size: 0.9rem;
 }

 /* アクセス情報 */
 .access {
   padding: 5rem 1rem;
   background: #f8f9fa;
 }

 .access-info {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
 }

 .access-card {
   background: white;
   padding: 2.5rem;
   border-radius: 15px;
   box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
 }

 .access-card__title {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 1rem;
   color: #333;
   border-bottom: 2px solid #667eea;
   padding-bottom: 0.5rem;
 }

 .access-card__content {
   color: #666;
 }

 /* フッター */
 .footer {
   background: #333;
   color: white;
   padding: 3rem 1rem 1rem;
   text-align: center;
 }

 .footer__content {
   max-width: 1200px;
   margin: 0 auto;
 }

 .footer__contact {
   margin-bottom: 2rem;
 }

 .footer__contact-title {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 1rem;
 }

 .footer__contact-info {
   color: #ccc;
   line-height: 1.8;
 }

 .footer__bottom {
   border-top: 1px solid #555;
   padding-top: 1rem;
   margin-top: 2rem;
   color: #999;
   font-size: 0.9rem;
 }

 .footer__contact-info a {
   color: rgb(0, 102, 204)
     /* 暗い背景なので白（#ffffff）に変更 */
 }

 /* レスポンシブデザイン */
 @media (max-width: 768px) {
   .header__nav {
     display: none;
   }

   .hero {
     padding: 4rem 1rem 3rem;
     min-height: 60vh;
     /* スマホでは高さを調整 */
   }

   .hero__title {
     white-space: normal;
     font-size: clamp(1.5rem, 7vw, 2.2rem);
     line-height: 1.2;
   }

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

   .btn {
     width: 100%;
     max-width: 300px;
   }

   .features-grid {
     grid-template-columns: 1fr;
   }

   .section__title {
     font-size: 2rem;
   }
 }

 /* アクセシビリティ */
 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
 }

 /* フォーカス表示 */
 a:focus,
 button:focus {
   outline: 3px solid #667eea;
   outline-offset: 2px;
 }

 /* スクリーンリーダー用非表示テキスト */
 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }