@charset "UTF-8";

/* ==========================================================================
   1. 最優先：表示切り替えクラス
   ========================================================================== */
@media screen and (min-width: 768px) {
    .pc-only { display: block !important; }
    .sp-only { display: none !important; }
}

@media screen and (max-width: 767px) {
    .pc-only { display: none !important; }
    .sp-only { display: block !important; }
}

/* ==========================================================================
   2. 基本設定（サイト共通）
   ========================================================================== */
html, body {
    width: 100%;
    overflow-x: hidden; 
    background-color: #fbf9f4; 
    color: #333333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------
   3. ヘッダー（共通・スマホベースレイアウト）
------------------------------------------------------------ */

/* ヘッダーの白い帯（横幅100%で画面上部に固定） */
header.l-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(4px); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ヘッダーの内側（頭にheader.l-headerをつけて1200px縛りを自然に破壊） */
header.l-header div.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px; /* スマホ時のヘッダー高さ */
    padding: 0 0 0 15px; /* 右端は青ボタンをくっつけるため左だけ余白 */
    width: 100%;
    max-width: none;   /* !importantなしで縛りを解除 */
    margin: 0;         /* !importantなしで中央寄せを解除 */
}

/* 最新のHTML構造に合わせたロゴ設定（スマホ用） */
header.l-header .headerlogo {
    width: 160px; /* スマホ時のロゴ横幅 */
    height: auto;
    display: block;
}
header.l-header .headerlogo .logo,
header.l-header .headerlogo .logo a {
    display: block;
    width: 100%;
}
header.l-header .headerlogo .logo img.logo-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; /* 確実に左寄せ */
}

/* チェックボックスを非表示にする */
.drawer_hidden {
    display: none !important;
}

/* ハンバーガーアイコンの設置スペース（右端の青い四角） */
.drawer_open {
    display: flex;
    height: 70px; 
    width: 70px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1002;
    cursor: pointer;
    background-color: #0093AF; 
}

/* ハンバーガーメニューのアイコン（白い3本線） */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #ffffff;
    transition: 0.5s;
    position: absolute;
}
.drawer_open span:before { bottom: 8px; }
.drawer_open span:after { top: 8px; }

/* スマホ用ハンバーガーの開閉設定 */
.nav #drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
}
.nav #drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
}
.nav #drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* スマホ用全画面メニュー（オーバーレイ） */
.nav_content {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 100%; 
    z-index: 1001;
    background: #fbf9f4; 
    transition: 0.5s;
}

.nav #drawer_input:checked ~ .nav_content {
    left: 0;
}

/* スマホメニュー内のリストスタイル */
ul.nav_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.nav_list li {
    margin-bottom: 35px;
    list-style: none;
}
ul.nav_list a {
    text-decoration: none;
    color: #002B6B; 
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.05em;
    display: block;
}

/* 初期状態ではPCナビを非表示 */
.nav_pc {
    display: none;
}


/* ==========================================================================
   4. PCレイアウト専用設定 (画面幅 768px 以上)
   ========================================================================== */
@media screen and (min-width: 768px) {

    /* PC時はヘッダーを100%広げつつ、左右に40pxの余白を作る */
    header.l-header div.header__inner {
        height: 80px; 
        padding: 0 40px; 
    }

    /* PC時はハンバーガー関連を完全に非表示 */
    .nav {
        display: none !important;
    }

    /* PC時のロゴサイズを大きくする */
    header.l-header .headerlogo {
        width: 240px; 
    }

    /* PCナビを画面の右端に寄せる設定 */
    header.l-header .nav_pc {
        display: block;
        margin-left: auto; /* !importantなしで右端に吹っ飛ぶ */
        width: auto;
    }
    
    .nav_pc_list {
        display: flex;
        justify-content: flex-end; 
        align-items: center;
        gap: 20px; 
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .nav_pc_list li {
        list-style: none;
    }
    .nav_pc_list li a {
        text-decoration: none;
        color: #002B6B; 
        font-weight: bold;
        font-size: 12px; 
        line-height: 1.3;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
        display: block;
        text-align: center; 
    }
    .nav_pc_list li a:hover {
        color: #0093AF;
        opacity: 1;
    }

    /* ------------------------------------------------------------
       コンテンツ中身のPC配置設定
    ------------------------------------------------------------ */
   
   .fluid-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
   
   .footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .container-inner {
        max-width: 800px;
        margin: 0 auto;
    }

.campn {
margin-top: 40px;
}


    /* 各SVG画像の最大幅コントロール */
    .content-item img[src*="Intro_pc"] { max-width: 800px; }      
    .content-item img[src*="exhibitor_pc"] { max-width: 575px; } 
    .content-item img[src*="present_pc"] { max-width: 800px; }   
    .content-item img[src*="map_pc"] { max-width: 292px; }       
    .content-item img[src*="event_pc"] { max-width: 697px; }     
    .content-item img[src*="sale_pc"] { max-width: 697px; }

    /* カミングスーンの共通サイズ */
    .content-item.coming-soon img {
        max-width: 310px;
    }
    /* 区切り線のPC時の上下余白 */
    .container-inner .separator {
        margin: 80px auto; 
    }
}

/* 画面幅1200px以上のPCナビ微調整 */
@media screen and (min-width: 1200px) {
    .nav_pc_list {
        gap: 35px;
    }
    .nav_pc_list li a {
        font-size: 14px;
    }
}

/* 画面幅1400px以上のPCナビ微調整 */
@media screen and (min-width: 1400px) {
    .nav_pc_list {
        gap: 45px;
    }
    .nav_pc_list li a {
        font-size: 15px;
    }
}


/* ==========================================================================
   5. スマートフォンレイアウト専用設定 (画面幅 767px 以下)
   ========================================================================== */
@media screen and (max-width: 767px) {
    
    /* 各コンテンツの設定 */
    .content-item img[src*="Intro_sp"] { max-width: 90%; }
    .content-item img[src*="exhibitor_sp"] { max-width: 90%; }
    .content-item img[src*="present_sp"] { max-width: 90%; }  
    .content-item img[src*="map_sp"] { max-width: 48%; }
    .content-item img[src*="event_sp"] { max-width: 90%; }   
    .content-item img[src*="sale_sp"] { max-width: 90%; }

    .content-item {
        margin-bottom: 25px;
    }
    
    .content-item.coming-soon {
        margin-top: -10px;
        margin-bottom: 25px;
    }
    .content-item.coming-soon img {
        max-width: 240px;
    }
    .container-inner .separator {
        width: 84%;
        margin: 25px auto;
    }
    .footer {
        padding: 40px 0;
    }
    .campn {
margin-top: 35px;
}  
}

/* ==========================================================================
   6. 各セクションの個別ベース設定（メインビジュアル・フッター等）
   ========================================================================== */
.main-visual {
    width: 100%;
    background-color: #fbf9f4; 
    margin: 0;
    padding: 0;
    font-size: 0; 
    line-height: 0;
    overflow: hidden;
    margin-top: 80px; /* PCヘッダーの高さに合わせて押し下げ */
}
@media screen and (max-width: 767px) {
    .main-visual {
        margin-top: 70px; /* スマホヘッダーの高さに合わせて押し下げ */
    }
}

.main-visual img.mv-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.container {
    width: 100%;
    background-color: #fbf9f4;
    padding-top: 10px;
    padding-bottom: 40px;
}

.footer {
    width: 100%;
    background-color: #ffffff; 
    text-align: center;
    padding: 60px 0;
    font-size: 14px;
    line-height: 1.8;
}

.footer-logo-img {
    max-width: 240px; 
    margin: 0 auto;  
}

.content-item {
    margin-bottom: 40px;
    width: 100%;
}

.content-item:not(.is-intro) {
    margin-top: 50px;
}

.content-item:last-child {
    margin-bottom: 0;
}

.content-item.coming-soon {
    margin-top: -20px;
    margin-bottom: 40px;
}

.container-inner .separator {
    border: none;
    border-top: 2px solid #a5dede;
    margin: 40px auto;
    width: 100%;
}

.footer-title {
    margin: 0 0 15px 0;
}
.footer-logo {
    margin-bottom: 20px;
}
.footer-info {
    margin: 0;
    font-size: 12px;
}

/* ==========================================================================
   7. 追加セクション：出展企業・団体（アコーディオン ＆ グリッド）
   ========================================================================== */

/* --- 全体コンテナ --- */
.exhibitor-section {
    width: 100%;
    margin: 0 auto;
}

/* --- トリガー用のチェックボックスは非表示 --- */
.exhibitor-trigger {
    display: none !important;
}

/* --- アコーディオンボタン本体 --- */
.exhibitor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6F6E65; /* グレー */
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    
    /* SP等倍用デフォルト値 */
    width: 50.875vw; /* 460px / 640px */
    height: 7.8125vw; /* 50px / 640px */
    border-radius: 1.5625vw; /* 10px / 640px */
    margin: 0 auto 9.375vw auto; /* 下マージン60px相当 */
    font-size: 2.5vw; /* 16px相当 */
}
.exhibitor-btn:hover {
    background-color: #5e5d5a;
}

/* ボタン内のテキスト調整 */
.exhibitor-btn__txt {
    font-weight: bold;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 1.5625vw; /* 10px相当 */
}
.exhibitor-btn__sub {
    font-size: 1.875vw; /* 12px相当 */
    font-weight: normal;
}

/* プラス・マイナスアイコンの土台 */
.exhibitor-btn__icon {
    position: relative;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    
    /* SP等倍サイズ */
    width: 4.6875vw; /* 30px相当 */
    height: 4.6875vw;
    margin-left: 3.125vw; /* 20px相当 */
}

/* アイコンの「横棒（マイナス）」 */
.exhibitor-btn__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #72716e;
    
    /* SP等倍サイズ */
    width: 2.1875vw; /* 14px相当 */
    height: 0.3125vw; /* 2px相当 */
}

/* アイコンの「縦棒」 */
.exhibitor-btn__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    background-color: #72716e;
    transition: transform 0.3s ease, opacity 0.3s ease;
    
    /* SP等倍サイズ */
    width: 2.1875vw;
    height: 0.3125vw;
    opacity: 0;
}

/* ==========================================
   ★ここから（開閉アニメーション部分）を上書き
   ========================================== */

/* --- 開閉するコンテンツエリアの初期化（最新のスムーズGrid伸縮手法） --- */
.exhibitor-content {
    display: grid;
    grid-template-rows: 0fr; /* 最初は「高さが折りたたまれた状態」 */
    width: 100%;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* スルスル伸びる心地いい速度 */
}

/* 
   直下のグリッドエリアにアニメーションの魔法をかけます。
   ※これによって、高さが伸びるのに合わせて中のカードが少し遅れて下からスッと浮き上がります。
*/
.exhibitor-content > .exhibitor-grid {
    overflow: hidden;
    min-height: 0; /* これを入れることでGridの伸縮が効くようになります */
    
    /* カード全体のフェード＆浮き上がり初期設定 */
    opacity: 0;
    transform: translateY(20px); /* 最初は少し下に下げておく */
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- チェックボックスがON（開状態）のときのアコーディオン制御 --- */
.exhibitor-trigger:checked ~ .exhibitor-content {
    grid-template-rows: 1fr; /* 実高さ（コンテンツの本来の高さ）まで完全に滑らかに同期して伸びます */
}

/* 開いている時は、縦棒を非表示にして「マイナス」に */
.exhibitor-trigger:checked ~ .exhibitor-btn .exhibitor-btn__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* 閉じている時（チェックなし）は、縦棒を表示させて「プラス」に */
.exhibitor-trigger:not(:checked) ~ .exhibitor-btn .exhibitor-btn__icon::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(1);
}

/* 開いたときに、中のカード群を「少し遅れて」フワッ・スッと表示 */
.exhibitor-trigger:checked ~ .exhibitor-content > .exhibitor-grid {
    opacity: 1;
    transform: translateY(0); /* 本元の位置にスッと浮き上がる */
    transition-delay: 0.1s; /* 高さが伸び始めるのを少し待ってから動かすことで上品になります */
}

/* 閉じるときは遅延なしで即座にすっきり消えていく設定 */
.exhibitor-trigger:not(:checked) ~ .exhibitor-content > .exhibitor-grid {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- カード並び（グリッド）システム --- */
.exhibitor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    
    /* SP等倍用 */
    width: 84.375vw; 
    margin: 0 auto;
    gap: 9.375vw 7.8125vw; 
    padding-bottom: 9.375vw;
}

/* カード1枚のサイズ（SP時は2カラム） */
.exhibitor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* SP等倍用 (540pxの中から、間隔50pxを引いた2等分サイズ) */
    width: 38.28125vw; /* (540 - 50) / 2 = 245px ➔ 245 / 640 */
}

/* カード内の画像ラッパー */
.exhibitor-card__img {
    width: 100%;
    background-color: #FFFFFF; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* SP等倍サイズ */
    height: 29.6875vw; /* 190px相当。縦横比を綺麗に保つための高さ */
    margin-bottom: 3.125vw; /* 20px相当 */
}
.exhibitor-card__img img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* カード内のテキスト（15px / 行間1.5） */
.exhibitor-card__txt {
    width: 100%;
    font-size: 2.34375vw; /* 15px / 640px */
    line-height: 1.5;
    color: #333333;
    text-align: justify;
}


/* ==========================================================================
   PCレイアウト時の上書き設定 (768px以上)
   ========================================================================== */
@media screen and (min-width: 768px) {
    
    /* --- アコーディオンボタン --- */
    .exhibitor-btn {
        width: 409px; /* ラフ比率からPCでの美しさを考慮した固定幅 */
        height: 60px;
        border-radius: 10px;
        margin: 30px auto 60px auto; /* PC標準マージン80px */
        font-size: 18px;
    }
    .exhibitor-btn__txt {
        gap: 10px;
    }
    .exhibitor-btn__sub {
        font-size: 13px;
    }
    .exhibitor-btn__icon {
        width: 30px;
        height: 30px;
        margin-left: 20px;
    }
    .exhibitor-btn__icon::before,
    .exhibitor-btn__icon::after {
        width: 14px;
        height: 2px;
    }

    /* --- カード並び（グリッド）システム（PC時は3カラム） --- */
    .exhibitor-grid {
        /* PC時は1200px幅の中で、中央800pxに収まるようにvwベースで可変縮小（MAX800px） */
        width: 66.666vw; 
        max-width: 800px;
        /* カード間マージンを横に等間隔（今回は3等分なので隙間2箇所）で配置 */
        gap: 80px 4vw; /* 上下80px / 左右 48px相当 */
        padding-bottom: 6.666vw;
    }

    /* 画面幅が1200pxを超えたら、要素サイズは完全に固定値 */
    @media (min-width: 1200px) {
        .exhibitor-grid {
            gap: 80px 48px; /* 完全固定値 */
            padding-bottom: 80px;
        }
    }

    /* カード1枚のサイズ（PC時は3カラム） */
    .exhibitor-card {
        /* 3カラム時の幅計算：(800px - 隙間48px * 2) / 3 ＝ 約234px */
        width: 19.5vw; 
        max-width: 234px;
    }

    /* カード内の画像ラッパー */
    .exhibitor-card__img {
        height: 15vw;
        max-height: 180px;
        margin-bottom: 20px;
    }

    /* カード内のテキスト */
    .exhibitor-card__txt {
        font-size: 1.25vw;
        max-size: 15px; /* 15px以上には大きくしない */
    }
}

/* PC等倍時の文字サイズ上限ストッパー */
@media screen and (min-width: 1200px) {
    .exhibitor-card__txt {
        font-size: 15px;
    }
}


/* ==========================================================================
   8. セクション共通設定 ＆ SVG波仕切り（ラフ忠実版）
   ========================================================================== */

/* 各セクションのベース（背景色のみ） */
.l-section {
    width: 100%;
    position: relative;
    padding-top: 10px;    /* 上側の余白 */
    padding-bottom: 0px;    /* SVGが下に来るので0にする */
}

/* 各セクションの個別背景色 */
.is-exhibitor { background-color: #f9f7ee; }
.is-map       { background-color: #ffffff; }
.is-event     { background-color: #fff57f; }
.is-sale      { background-color: #f9f7ee; }

/* 波型SVGの共通スタイル */
.wave-separator {
    display: block;
    width: 100%;
    height: auto;  /* 等倍縮小 */
    margin-top: -10px; /* 稀にできる白い隙間を埋める */
    padding-top: 45px
}

/* PCレイアウト時の調整（768px以上） */
@media screen and (min-width: 768px) {
    .l-section {
        padding-top: 100px;
    }
.wave-separator {
    padding-top: 100px
}    
}


/* ==========================================================================
   9. イベント
   ========================================================================== */
.event-container {
  display: flex;
  flex-direction: column; /* スマホ時は縦に1本化 */
  gap: 20px; /* 列と列の間の隙間 */
}

/* 22日、23日のそれぞれの縦列 */
.event-column {
  display: flex;
  flex-direction: column;
  gap: 20px; 
  width: 100%;
}


/* 各イベント枠の基本設定 */
.event-card {
  position: relative; /* 透明リンクの基準位置にするため必須 */
  width: 100%; /* スマホ時は横幅いっぱい（1列） */
  box-sizing: border-box;
}

/* 各イベント画像 */
.event-img {
  display: block;
  width: 84%;
  height: auto;
}

/* 右側の赤ボタンの上に重ねる透明なリンク */
.button-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;  /* 赤ボタンが占める横幅（ここを書き出した画像のボタン幅に合わせて微調整してください） */
  height: 100%;
  background: rgba(255, 0, 0, 0); /* 完全に透明（確認時は 0 を 0.3 とかにすると赤く見えて調整しやすいです） */
  cursor: pointer;
  z-index: 2;
}

.col-22 {
  margin-bottom: 60px; /* ここの数値でお好みの広さに調整してください！ */
}

/* PC表示（画面幅が768px以上の場合に2列にする） */
@media (min-width: 768px) {
 .event-container {
    flex-direction: row; /* 2つの列（column）を横並びにする */
  }
 .event-column {
    width: calc(50% - 10px); /* 左右の列の幅を50%ずつにする */
  } 

  .event-img {
  width: 100%;
}
.col-22 {
    margin-bottom: 0;
  }
}


/* リンクボタン・画像リンクのホバー設定 */
a img,
.button-overlay,
.btn { 
  transition: opacity 0.3s ease; 
}

/* マウスを載せたとき（ホバー時） */
a:hover img,
.button-overlay:hover,
.btn:hover {
  opacity: 0.7; 
}

.event-card:has(.button-overlay:hover) .event-img {
  opacity: 0.7;
}