@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ===================================
   基本設定
   =================================== */
:root {
    --primary-color: #00a0e9;
    --accent-color: #f36c21;
    --text-color: #333;
    --bg-light-blue: #e8f7ff;
    --bg-dark-blue: #003355;
}

/* remの計算を簡単にするため（1rem = 10px）*/
html {
    font-size: 62.5%; 
}

body {
    font-family: 'Noto Sans JP', 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1.6rem; /* 標準のフォントサイズ (16px) */
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.container {
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    text-align: center;
    font-size: 3.2rem;
    margin-bottom: 4rem;
    margin-top:1rem;
}
.btn {
  display: inline-block;
  background-color: #DE4024;
  border:1px solid  #DE4024;
  color: #fff;
  padding: 1.5rem 8rem;
  border-radius: 5rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 4.8rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
  position: relative; /* 疑似要素を配置するための基準 */
  z-index: 1; /* テキストが背景より手前に来るように */
  overflow: hidden; /* はみ出した背景を隠す */
  transition: color 0.4s; /* 文字色の変化をアニメーション */
}
.btn span {
    position: relative;
    z-index: 2;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 1px);
    height: 100%;
    background-color: #fff;
    
    /* 最初は左に隠しておく */
    transform: translateX(-100%);
    transition: transform 0.4s ease-in-out;
    z-index: -1;
}

/* ホバー時のスタイル */
.btn:hover {
    color: #DE4024; /* 文字色をオレンジに */
    border:1px solid;
    box-sizing: border-box;
}

.btn:hover::before {
    /* 白い背景をスライドインさせる */
    transform: translateX(0); 
}


.text-center {
    text-align: center;
}

/* ===================================
   ヘッダー (修正版)
   =================================== */
/* ヘッダー全体を囲むラッパー */
.site-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}

/* ヘッダー本体（白い背景とぼかしの部分）*/
.site-header {
    background-color: #fff;
    padding: 1.5rem 0 3rem;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

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

.header-logo img {
    height: 4rem;
}

/* PC用ナビゲーション */
.header-nav-pc ul {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-nav-pc a {
    color: #000;
    font-size:1.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}
.header-nav-pc a:hover {
    color: #007bff;
}

/* スマホ用ハンバーガーボタン */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    position: absolute; /* 位置を絶対指定に変更 */
    top: 2rem; /* 上からの位置を調整 */
    right: 2rem; /* 右からの位置を調整 */
    z-index: 1010; /* オーバーレイ(999)より大きい値を指定 */
}
.hamburger-btn span {
    display: block;
    background-color: #333;
    height: 0.2rem;
    width: 100%;
    position: absolute;
    left: 0;
    transition: all 0.3s;
}
.hamburger-btn span:nth-child(1) { top: 0.5rem; }
.hamburger-btn span:nth-child(2) { top: 1.4rem; }
.hamburger-btn span:nth-child(3) { bottom: 0.5rem; }

/* ハンバーガーが開いた時（is-open）のスタイル */
.hamburger-btn.is-open span {
    background-color: #fff;
}
.hamburger-btn.is-open span:nth-child(1) {
    transform: translateY(0.9rem) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-open span:nth-child(3) {
    transform: translateY(-0.9rem) rotate(-45deg);
}

/* スマホ用ナビゲーション（オーバーレイ） */
.header-nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.88);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    /* z-indexを追加して念のため重なり順を調整 */
    z-index: 999;
}
.header-nav-mobile.is-open {
    opacity: 1;
    visibility: visible;
}
.header-nav-mobile ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
.header-nav-mobile li {
    margin-bottom: 3rem;
}
.header-nav-mobile a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
}


/* レスポンシブ対応 (900px以下で切り替え) */
@media (max-width: 945px) {
    .header-nav-pc {
        display: none;
    }
    .hamburger-btn {
        display: block;
    }
}

/* ===================================
   各セクション
   =================================== */

/* ===================================
   メインビジュアル (hero)
   =================================== */
.hero {
    /* 背景画像を指定 */
    background-image: url('../images/hero-background.png');
    background-color: #005f9e; /* 画像が読み込めない場合の背景色 */
    background-size: cover;
    background-position: center;
    
    /* 高さを画面の80%に設定（調整可能） */
    height: 80vh;
    min-height: 700px;
    
    /* 中の要素を上下に配置するためflexboxを使用 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下に要素を振り分ける */
}

.hero-content {
    flex-grow: 1; /* 残りの高さいっぱいに広がる */
    display: flex;
    flex-direction: column;
    justify-content: center; /* テキストを垂直中央に */
    align-items: center; /* テキストを水平中央に */
    text-align: center;
    color: #fff;
    padding: 4rem 0 2rem;
    max-width: 1200px;
    margin: auto;
}

.hero-catchcopy {
    font-size: 1.8rem;
    font-weight: 500;
}

.hero-tag {
    background-color: #fff;
    color: #003366;
    font-size: 2rem;
    font-weight: 700;
    padding: 0.8rem 3rem;
    border-radius: 5rem;
    margin: 2rem 0;
}

.hero-title {
    font-size: 8rem;
    font-weight: 900; /* 最も太いウェイト */
    color: #fff800; /* 明るい黄色 */
    letter-spacing: 0.05em;
    text-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3); /* 文字を際立たせる影 */
    margin: 1.5rem 0;
}

.hero-description {
    font-size: 2rem;
    line-height: 1.8;
}

.hero-date-bar {
    background-color: #000;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    font-size: 1.8rem;
    white-space: nowrap; /* テキスト全体が改行しないように */
}
.hero-date-bar p {
    margin: 0;
}
.hero-date-bar strong {
    font-size: 3.2rem;
    vertical-align: inherit;
}

/* 丸で囲む曜日のスタイル */
.day-circle {
    display: inline-block; 
    background-color: #fff;
    color: #000;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 50%; /* 正円にする */
    width: 2.8rem; /* 円の幅 */
    height: 2.8rem; /* 円の高さ */
    line-height: 2.8rem; /* 文字を円の垂直中央に */
    text-align: center;
    margin: 0 0.5rem;
    vertical-align: text-bottom;
}

.venue-info {
    display: inline-block; /* 単語の途中での改行を防ぐ */
    font-weight: bold;
    vertical-align: text-bottom;
}

.separator {
    margin: 0 1.5rem;
    vertical-align: middle;
}



/* レスポンシブ対応 (768px以下) */
@media (max-width: 768px) {
    .hero{
        height: 100%;
        padding-bottom: 0;
        min-height: 500px;
    }
    .hero-content{
        padding:0;
    }
    .venue-info {
    display: block;
}
}
.btn-area{
    margin:4rem auto 11rem;
    text-align: center;
}
/* ===================================
   JAPAN PACKとは (about) 
   =================================== */
.about {
    background: linear-gradient(214.05deg, #9CC9EE 7.84%, #90DFD6 47.9%, #9CC9EE 89.53%);
    border-radius: 80px 80px 0px 0px;
    padding: 8rem 0 8rem;
    position: relative;
    margin-top: -7rem;
}

/* 左の縦書きテキストを疑似要素で作成 */
.about-bg-text{
   position: relative;
   max-width: 112rem;
   margin: auto;
   z-index: 1000;
}

.about-bg-text::before{
        content: "Japan's largest packaging industry exhibition";
        position: absolute;
        top: 17rem;
        left: -15rem;
        transform: rotate(-90deg);
        font-size: 1.4rem;
        color: #fff;
        letter-spacing: 0.1em;
}
.about-bg-text::after {
    content: '';
    position: absolute;
    top: 38rem;
    left: 2rem;
    width: 0.1rem;
    height: 170rem;
    background-color: #ffffff;
}

/* コンテンツが背景より手前に来るように設定 */
.about .container, .about-solution, .about-features-wrapper {
    position: relative;
    z-index: 1;
}

.about-header,
.about-showcase {
    text-align: center;
}

/* タグの形をclip-pathで再現 */
.about-tag {
    display: inline-block;
    background: linear-gradient(to right, #00a0e9, #009e6c);
    color: #fff;
    font-weight: bold;
    padding: 1.2rem 5rem; /* 横の余白を調整 */
    font-size: 2rem;

    transform: skewX(-20deg);
}
.about-tag-text {
    display: inline-block; /* transformを適用するため */
    transform: skewX(20deg); /* 親とは逆方向に傾けて、傾きをリセットする */
}
/* 1行目「現場の課題を解決する」のスタイル */
.about-title {
    display: block; /* 表示形式をリセット */
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    margin: 3rem 0 0;
    background: none;
    padding: 0;
    box-shadow: none;
}

/* 2行目「国内最大規模の包装産業展」のスタイル */
.about-title-main {
    display: block; /* 独立したブロックとして表示し、改行させる */
    margin-top: 1rem;
    background-color: #fff;
    max-width: 720px;
    margin:auto
}
.about-title-main-txt {
    font-size: 5.5rem; /* 文字サイズを大きく */
    font-weight: bold;    
    background: linear-gradient(to right, #0082d5, #009e6c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* レスポンシブ調整 */
@media (max-width: 768px) {
    .about-title {
        font-size: 2rem;
    }
    .about-title-main-txt {
        font-size: 3.2rem;
    }
}

.about-description {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 0;
}

.about-showcase {margin-top: 0;background-image: url(../images/about-showcase-bg.png);background-repeat: no-repeat;background-size: 100% 100%;background-position: top;}
.about-showcase-image {
    margin: 0 auto;
}

.about-solution{margin-top: 4rem;background-image: url(../images/about-solution-bg.png);background-repeat: no-repeat;background-size: auto;background-position: top;padding-bottom: 8rem;}


@media (max-width: 1100px) {
    .about-bg-text {
        display: none; /* スマホでは縦書きテキストを非表示 */
    }
}
/* レスポンシブ調整 */
@media (max-width: 768px) {

    .about-title {
        font-size: 2.8rem;
        padding: 1rem 1.5rem;
    }
    .about-description {
        font-size: 1.6rem;
    }
}



.about-header,
.about-showcase,
.about-solution,
.about-features-wrapper {
    text-align: center;
    position: relative; /* 番号表示の基準点 */
}



/* 「01」のデザイン */
.about-features-wrapper::before {
    content: '01';
    position: absolute;
    top: -7rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20rem;
    font-weight: bold;
    color: rgba(225, 240, 240, 0.65);
    z-index: -1;
    line-height: 1;
}
/* 特徴エリア（濃い青背景） */
.about-features-wrapper {
    padding: 6rem 0;
    margin-top: 6rem; /* 上のセクションとの間隔 */
}
.about-features-image {
    max-width: 91rem;
    margin: 0 auto;
}

.about-features-text{
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.8;
}

/* 「02」のデザイン */
.about-solution::before {
    content: '02';
    position: absolute;
    top: -12rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20rem;
    font-weight: bold;
    color: rgba(225, 240, 240, 0.65);
    z-index: -1;
    line-height: 1;
}

.about-solution-text {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.8;
}
.about-solution-image {
    margin: 3rem auto 0;
}
.about-features-text strong,.about-solution-text strong{
    font-size:2.4rem;
    color:#008589;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
    .about::before {
        display: none; /* スマホでは縦書きテキストを非表示 */
    }
    .about-title {
        font-size: 2.8rem;
    }
    .about-description, .about-showcase-text {
        font-size: 1.6rem;
    }
    .about-features-wrapper::before{
            top: -4rem;
    }
    .about-features-wrapper::before, .about-solution::before {
        font-size: 12rem;
    }
    .about-features-text,.about-solution-text {
        font-size: 1.8rem;
    }
}
/* ===================================
   来場する5つの理由 (reasons) 
   =================================== */
.reasons {
    background-color: #fff;
    padding: 8rem 0;
    border-radius: 80px 80px 0 0;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1001;
    margin-top: -8rem;
}

.reasons-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-tag-red {
    display: inline-block;
    color:  #d43c1b;
    font-weight: bold;
    border-radius: 5rem;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

.reasons .section-title {
    margin-top: 1rem;
}

.reasons-grid {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 5rem 3rem;
}

.reason-card {
    width: calc(33.333% - 2rem); /* 3列レイアウトの基本幅を指定 */
    min-width: 32rem; /* 最小幅を保証 */
}

.reason-image-wrapper {
    position: relative;
}

.reason-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.reason-innovation-tag {
    font-size: 1.2rem;
    color:  #d43c1b;;
    font-weight: bold;
    text-shadow: none
}

.reason-number-overlay {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-size: 8rem;
    font-weight: 800;
    color: #3ED4FF;
    opacity: 0.3;
    line-height: 1;
}

.reason-content {
    padding-top: 2rem;
}

.reason-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 0;
    min-height: 8rem;
    display: flex;
    align-items: center;
}
.reason-description {
    font-size: 1.5rem;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 992px) {
    .reason-card {
        width: calc(50% - 1.5rem); /* タブレットでは2列に */
    }
}

@media (max-width: 768px) {
    .reason-card {
        width: 100%; /* スマホでは1列に */
        min-width: 0;
    }
    .reasons-grid {
        gap: 5rem 0;
    }
}

/* ===================================
   出展者の信頼と実力 (trust)
   =================================== */
.trust {
    position: relative;
    padding: 8rem 0;
     /* 上下のセクションとの間隔 */
     /* 全体に角丸を適用 */
    overflow: hidden; /* 角丸の外側を隠す */

    /* 背景画像と、テキストを読みやすくするためのグラデーションを重ねる */
    background-image: url('../images/trust-bg.png'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25);
}

.trust .container {
    position: relative;
    z-index: 1;
}

.trust-title {
    font-size: 3.2rem;
    color: #333;
    margin: 1.5rem 0 3rem;
}

.trust-description p {
    font-size: 1.6rem;
    line-height: 2;
    color: #333;
}


/* レスポンシブ対応 (768px以下) */
@media (max-width: 768px) {
    .trust {
        background-size: auto;
    }
    .trust-title {
        font-size: 2.6rem;
    }
    .trust-description p br {
        display: none; /* スマホでは改行を解除 */
    }
}

/* ===================================
   特別展示・展示紹介 (exhibits)
   =================================== */
.exhibits {
    padding: 8rem 0 20rem;
    background-image: url('../images/exhibits-bg.png'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
    background-color: #F5F8EF; /* 背景色（または背景画像） */
}

.exhibits-header {
    text-align: center;
    margin-bottom: 5rem;
}

.exhibits-list {
    display: grid;
    gap: 2.5rem; /* カード間の余白 */
}
/* ===================================
   特別展示・展示紹介 カード詳細デザイン
   =================================== */

.exhibit-card {
    display: flex;
    align-items: flex-start;
    background-color: #fff; /* カードの背景色 */
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.07);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #e9ecef; /* 細い枠線を追加 */
}


.exhibit-content {
    flex: 1;
    padding-right: 3rem;
}

/* タグと左の「・」をまとめるラッパー */
.exhibit-tag-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}


/* タグのスタイルをグラデーションに変更 */
.exhibit-tag {
    display: inline-block;
    background: linear-gradient(90deg, #00a0e9 0%, #00c3a2 100%);
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 0.6rem 2rem;
    border-radius: 5rem;
}
/* CSSで「・」を作成 */
.exhibit-tag::before {
    content: '';
    display:inline-block;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 1rem;
}
/* タイトルのスタイル */
.exhibit-title {
    font-size: 2.4rem;
    color: #018CD6; /* 濃い青色に変更 */
    text-transform: uppercase; /* 大文字に変換 */
    margin: 0 0 1rem;
}

/* 説明文のスタイル */
.exhibit-description {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #555; /* 少し濃いグレーに変更 */
    margin: 0;
}

/* 画像のスタイル */
.exhibit-image {
    width: 30rem; /* 横幅を少し調整 */
    height: 16rem; /* 高さを少し調整 */
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}

.exhibit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exhibits-cta{
    margin: 8rem auto 0;
    text-align: center;
}

/* レスポンシブ対応 (768px以下) */
@media (max-width: 768px) {
    .exhibit-card {
        flex-direction: column;
        padding: 2rem;
    }
    .exhibit-content {
        order: 2;
        padding-right: 0;
        margin-top: 2rem;
    }
    .exhibit-image {
        order: 1;
        width: 100%;
        height: 18rem;
    }
    .exhibit-title {
        font-size: 1.8rem;
    }
    .exhibit-description br {
        display: none;
    }
}
/* ===================================
   開催概要・アクセス (access)
   =================================== */
.access {
    background-color: #fff;
    padding: 8rem 0;
    margin-top: -10rem;
    border-radius: 80px 80px 0 0;
    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.25);
}

.access-header {
    text-align: center;
    margin-bottom: 5rem;
}


.access-outline {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 3rem;
}

.outline-info {
    flex: 1;
}
.outline-image {
    width: 52%;
    flex-shrink: 0;
}
.outline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

.info-block {
    margin-bottom: 3rem;
}

.info-title {
    font-size: 1.8rem;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
/* タイトル前の赤い縦線 */
.info-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 1.8rem;
    background-color: #d43c1b;
}

.info-date {
    font-size: 2.2rem;
}
.info-date strong {
    font-size: 3.6rem;
}
.info-time {
    font-size: 1.8rem;
}
.info-block p {
    line-height: 1.8;
}

.access-map {
    margin-bottom: 3rem;
    line-height: 0; /* iframe下の余白対策 */
}
.access-map iframe {
    border-radius: 1rem;
}

.access-transport {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    background-color: #fff;
    padding: 5rem;
    border-radius: 3rem; 
    box-shadow: 0 0 4rem rgba(0, 0, 0, 0.1);
    margin-bottom: 5rem;
    margin-top: 5rem;
}

.transport-title {
    font-size: 2rem;
    margin-bottom: 2.5rem;
}

.transport-col ul {
    list-style: none;
    padding: 0;
}

.transport-col > ul > li {
    margin-bottom: 2.5rem;
}

.main-route {
    font-size: 1.8rem;
    font-weight: bold;
    position: relative;
    padding-left: 2rem;
    margin: 0;
    color: #DF0615;
}

/* ■ のマーク */
.main-route::before {
    content: '■';
    position: absolute;
    left: 0;
    color: #DF0615;
    font-size: 1.8rem;
    top: -2px;
}

.sub-routes {
    list-style: none;
    padding-left: 2rem;
    margin-top: 1rem;
}
.sub-routes li, .route-detail {
    font-size: 1.5rem;
    margin-top: 0.8rem;
}

/* レスポンシブ対応 (900px以下) */
@media (max-width: 900px) {
    .access-transport {
        grid-template-columns: 1fr;
        padding: 3rem;
    }
}
@media (max-width: 768px) {
  .access-transport {
    gap:1rem;
  }
}

.venue-map-image img {
    width: 100%;
}


/* レスポンシブ対応 (900px以下) */
@media (max-width: 900px) {
    .access-outline {
        flex-direction: column-reverse;
    }
    .outline-image {
        width: 100%;
    }
}



/* ===================================
   フッター (site-footer)
   =================================== */
.footer-cta {
    background-image: url('../images/footer-bg.png');
    background-color: #001f3f; /* 画像がない場合の背景色 */
    background-size: cover;
    background-position: top;
    padding: 6rem 0 8rem;
    text-align: center;
    color: #fff;
    position: relative;
}

.cta-sub-text {
    font-size: 2rem;
    line-height: 1.8;
    margin: 0;
}

.cta-main-text {
    font-size: 6.4rem;
    font-weight: bold;
    margin: 2rem 0;
    line-height: 1.25;
}

.text-highlight {
    color: #FFF100; /* 黄色のハイライト */
}

.footer-cta .btn {
    margin-top: 3rem;
    padding: 1.8rem 5rem;
    font-size: 1.8rem;
}

.footer-button-area {
    /* ボタンの背景がCTAエリアと同じになるように設定 */
    text-align: center;
    position: absolute;
    z-index: 2; /* CTAやINFOエリアより手前に表示 */
    top: 0rem;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.footer-info {
    background-color: #1a1a1a;
    position: relative;
    z-index: 1; /* ボタンより奥に表示 */
    color: #aaa;
    padding: 8rem 0 2rem;
    text-align: center;
    font-size: 1.2rem;
}

.footer-logo {
    max-width: 20rem;
    margin: 0 auto 3rem;
}

.footer-logo img {
    width: 100%;
}

.footer-organizer {
    display: inline-flex; /* 中央揃えにしつつ内部をflexにする */
    margin-bottom: 4rem;
}
.organizer-logo img {
    width: 100%;
}
.privacy-link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 3rem;
    font-size: 1.6rem;
}
.privacy-link span img{
    vertical-align: baseline;

}
.privacy-link:hover {
    text-decoration: underline;
}

.footer-copyright {
    font-size: 1.1rem;
    color: #777;
}

footer a img:hover{
    opacity: 0.75;
}


/* レスポンシブ対応 (768px以下) */
@media (max-width: 768px) {
    .cta-main-text {
        font-size: 3.2rem;
    }
    .cta-sub-text {
        font-size: 1.6rem;
    }
    .footer-organizer {
        flex-direction: column; /* 縦並びに */
        border: none;
        padding-top: 2rem;
    }
}
/* ===================================
   レスポンシブ対応 (768px以下)
   =================================== */
@media (max-width: 768px) {
    .section-title { font-size: 2.8rem; }

    main section { padding: 6rem 0; }

    .hero-title { font-size: 3rem; }
    .hero-image-placeholder { height: 25rem; }

    .intro-items {
        flex-direction: column;
        gap: 4rem;
    }

    .exhibitor-item {
        flex-direction: column;
        text-align: center;
    }

    .footer-cta-title { font-size: 2.6rem; }
    .btn-large { font-size: 1.8rem; padding: 1.8rem 4rem; }


.btn {
  display: inline-block;
  background-color: #DE4024;
  color: #fff;
  padding: 1.5rem 3rem;
  border-radius: 5rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 2.5rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, color 0.3s, transform 0.2s ease-in-out;
}


.about , .reasons , .access {
border-radius: 40px 40px 0 0;
}

.btn-area {
    margin: 0rem auto 8rem;
    padding: 2rem 0;
    text-align: center;
}

}
.sp_br{
  display: none;
}
.word_nowrap{
        display: inline-block;
    }
@media (max-width: 450px) {
    .sp_br{
        display: block;
    }
}
/* ===================================
   ページトップへ戻るボタン
   =================================== */
#page-top-btn {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    z-index: 1012;

    /* ボタンのデザイン */
    background-color: rgba(0, 0, 0, 0.7);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;

    /* 表示/非表示のアニメーション */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

#page-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
}

#page-top-btn:hover {
    transform: translateY(-0.5rem);
}

/* SVGアイコンの色 */
#page-top-btn svg {
    width: 3rem;
    height: 3rem;
    fill: #fff;
}