@charset "UTF-8";
/* CSS Document */

/****------ヘッダー------****/
/* スクロール位置の微調整 */
/*sticky-top を使う際の「アンカーリンクのズレ」を防ぐ*/
html {
    scroll-padding-top: 80px; /* stfes_headerの高さに合わせる */
}

/* 商店街ヘッダーとストフェスヘッダーの連続性を保つ */
.navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}




/* --- Global Hamburger Round Style --- */
.icon-hamburger {
    width: 50px;
    height: 50px;
    position: relative;
    background: #eea2b4;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000; /* メニューの9999より上に設定 */
}

/* ホバー（マウスを乗せた）時 */
.icon-hamburger:hover {
    background: #e6007e; 
}

/* 線の位置を微調整 */
.menu-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    display: block; 
}

/* 【重要】通常時の3本線の共通設定 */
.menu-trigger span {
    position: absolute;
    left: 50% !important; /* 強制的に左右中央 */
    transform: translateX(-50%); 
    width: 26px;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.4s;
    transform-origin: center !important; /* 回転の軸を常に中心に固定 */
}

/* 通常時の縦並び（ここは!importantなしでOK） */
.menu-trigger span:nth-of-type(1) { top: 16px; }
.menu-trigger span:nth-of-type(2) { top: 24px; }
.menu-trigger span:nth-of-type(3) { top: 32px; }


/* 【最重要】×印になった時の設定（他からの干渉をすべてねじ伏せる） */
.menu-trigger.active span {
    top: 50% !important;  /* 中央に強制集結 */
    left: 50% !important; 
}

.menu-trigger.active span:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0 !important; /* 真ん中の棒を完全に消す */
}

.menu-trigger.active span:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}


/* ホバー（マウスを乗せた）時 */
.icon-hamburger:hover {
    background: #e6007e; /* 濃いピンクに変化！ */
}








/*--Globalhamburgerの中身--*/

/* 全体設定 */
/* メニュー本体の初期状態を修正 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(60, 60, 60, 0.98); /* 少し暗めにしてモダンに */
  z-index: 9999;
  
  /* 表示のアニメーション設定 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow-y: auto;
}


/* クラスがついた時の表示状態 */
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ハンバーガーボタンのアニメーション */
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}




  /* メニューリンク */
  .menu-links ul li { margin-bottom: 10px; }
  .menu-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 3rem;
    font-weight: bold;
    transition: 0.3s;
  }
  .menu-links ul li a.sub-link {
    font-size: 1.5rem;
    font-weight: normal;
  }
  .menu-links ul li a:hover { color: #00cccc; }

  .menu-divider {
    border-top: 2px solid #00cccc;
    width: 100%;
    max-width: 300px;
    margin: 20px 0;
    opacity: 1;
  }

  /* SNSラベル */
  .sns-label { font-weight: bold; margin-bottom: 10px; font-size: 1.3rem; }
  .label-pink { color: #f09199; }
  .label-yellow { color: #e9e34a; }

  /* SNSアイコン */
  .sns-icons a {
    color: #333;
    background: #fff;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    margin: 0 10px;
    text-decoration: none;
    transition: transform 0.3s;
  }
  .sns-icons a:hover { transform: scale(1.1); }

  /* お問合せボタン */
  .contact-btn {
    display: inline-block;
    background: #eee;
    color: #333;
    padding: 10px 30px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
  }

  /* スマホ調整 */
  @media (max-width: 767px) {
    .menu-links ul li a { font-size: 1.5rem; }
    .menu-links ul li a.sub-link { font-size: 1rem; }
    .menu-links { text-align: center; }
    .menu-links ul { padding-left: 0 !important; }
    .menu-divider { margin: 20px auto; }
  }









/* 商店街グローバルヘッダー専用のスタイル */
/* ピンクの下線 */
.global-header {
    border-bottom: 2px solid #de2296 !important;
}







/* ------ストフェスlocaheaderのコスプレ祭用メガメニュー設定------ */

/* PC版（1200px以上）の時だけの挙動 */
@media (min-width: 1200px) {
    /* マウスオーバーでメニューを表示 */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: fadeIn 0.3s;
    }

    /* メニューエリアの装飾 */
    .dropdown-menu {
        border-top: 3px solid #17cd47 !important;
        border-radius: 0 0 8px 8px;
        display: none; /* マウスホバー前は隠しておく */
    }

    .dropdown-item:hover {
        background-color: #f1fdf4;
        color: #17cd47;
    }
}

/* ふわっと出るアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 1200px未満（スマホ・タブレット版）の設定 */
/* navbar-expand-xl と合わせるため 1199px 以下に適用 */
@media (max-width: 1199px) {
    /* 💡 修正：ハンバーガーメニューが開いた時だけ中身が見えるようにする */
    .navbar-collapse .dropdown-menu {
        /* display: block !important; を外し、Bootstrapの開閉ロジックに任せる */
        position: static !important;
        float: none;
        width: 100%;
        
        box-shadow: none !important;
        border: 2px solid #17cd47 !important;
        border-radius: 12px !important;
        background-color: #ffffff !important;
        
        padding: 5px 0 !important;
        margin: 10px 0 !important;
    }

    /* 各項目のスタイル */
    .local-header .dropdown-item {
        padding: 14px 20px !important;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
        font-size: 0.95rem;
    }

    .local-header .dropdown-item:last-child {
        border-bottom: none;
    }

    /* 親メニュー「コスプレ祭」の強調 */
    .local-header .nav-item.dropdown > .nav-link {
        color: #17cd47 !important;
        font-weight: 800;
        padding-top: 15px;
    }
}












/* ------ストフェスlocalfooter設定------ */
/* フッター全体の微調整 */
.local-footer .bg-secondary {
    background-color: #666666 !important; /* 昨年のスクショに近い濃いグレー */
}

/* ホバー時に少し浮き上がる演出 */
.transition-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.transition-hover:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

/* SNSエリアのアイコン丸め */
.sns-icon img {
    border-radius: 50%;
    transition: opacity 0.2s;
}
.sns-icon:hover img {
    opacity: 0.8;
}

/* モバイル対応：スマホの時はバナーとボタンの間隔を調整 */
@media (max-width: 767px) {
    .local-footer .row.g-4 {
        gap: 1.5rem;
    }
}


/* PRESSとMAILの設定*/
.local-footer-press-style{
	background-color: #ff69b4; min-width: 100px; height: 80px; font-size: 1.25rem;
}
.local-footer-mail-style{
	background-color: #8fa0ff; min-width: 100px; height: 80px; font-size: 1.25rem;
}
@media (max-width: 1024px) {
	.local-footer-press-style{
	background-color: #ff69b4; min-width: 100px; height: 60px; font-size: 1.25rem;
	}
	.local-footer-mail-style{
	background-color: #8fa0ff; min-width: 100px; height: 60px; font-size: 1.25rem;
	}	
}
@media (max-width: 912px) {
	.local-footer-press-style{
	background-color: #ff69b4; min-width: 100px; height: 45px; font-size: 1.25rem;
	}
	.local-footer-mail-style{
	background-color: #8fa0ff; min-width: 100px; height: 45px; font-size: 1.25rem;
	}	
}
@media (max-width: 820px) {
	.local-footer-press-style{
	background-color: #ff69b4; min-width: 100px; height: 40px; font-size: 1.25rem;
	}
	.local-footer-mail-style{
	background-color: #8fa0ff; min-width: 100px; height: 40px; font-size: 1.25rem;
	}	
}
@media (max-width: 768px) {
	.local-footer-press-style{
	background-color: #ff69b4; min-width: 100px; height: 35px; font-size: 1rem;
	}
	.local-footer-mail-style{
	background-color: #8fa0ff; min-width: 100px; height: 35px; font-size: 1rem;
	}	
}










/* ------商店会Globalfooter設定------ */

/* SNSボックスのラベル調整 */
.global-footer .position-absolute {
    /* PC・スマホ共通のベース設定 */
    z-index: 1;
}

/* スマホ版（767px以下）の設定を上書き */
@media (max-width: 767px) {
    .global-footer .position-absolute {
        /* 文字サイズ縮小を削除 */
        font-size: 0.9rem !important; /* スマホで見切れる場合の微調整用（ほぼ1rem） */
        width: auto;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* 枠内のアイコンが窮屈にならないよう少し余白を追加 */
    .global-footer .border {
        margin-top: 10px;
    }
}





/* 運営者情報のアクセントライン */
.green-line-legacy {
    width: 100%;
    height: 4px;
    background: #e0e0e0; 
    position: relative;
}
.green-line-legacy::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30%; /* 昨年のデザイン通りの長さ */
    height: 100%;
    background-color: #4bd1a8; /* 商店会カラー */
}

/* 社名のフォントサイズ（レスポンシブ対応） */
.operator-info p {
    line-height: 1.2;
    letter-spacing: 0.02em;
}



/* グローバルフッター内の「運営者情報」のリンクに対する設定 */
.operator-info a {
    text-decoration: none !important; /* 下線を強制的に消す */
    color: #4bd1a8 !important;        /* 常に商店会カラーを維持 */
    transition: opacity 0.2s;        /* ホバー時の変化を滑らかに */
}

/* マウスを乗せた時（ホバー）の演出 */
.operator-info a:hover {
    opacity: 0.7; /* ほんの少し薄くして「押せる」ことを伝える */
    color: #4bd1a8; /* 色は変えない */
    text-decoration: none; /* ホバー時も下線は出さない */
}








/*------ 改行class ------*/
/* PCの時だけ改行したい（スマホでは改行させない） */
@media (max-width: 767px) {
  .pc-br {
    display: none !important;
  }
}

/* スマホの時だけ改行したい（PCでは改行させない） */
@media (min-width: 768px) {
  .smp-br {
    display: none !important;
  }
}










/*------ TOPカルーセル設定 ------*/
.main-img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 余白を出さず、枠いっぱいに表示 */
    object-position: center;
}

/* スマホ用の指定 */
@media (max-width: 767px) {
    .main-img {
        /* 800x1000の比率（4:5）を維持 */
        aspect-ratio: 4 / 5; 
        height: auto; /* 固定値を解除して比率に任せる */
        max-height: 550px; /* あまりに縦長になりすぎるのを防ぐガード */
    }
}

/* PC用の指定 */
@media (min-width: 768px) {
    .main-img {
        /* 1320x700の比率（約1.88:1）を維持 */
        aspect-ratio: 1320 / 700;
        max-height: 700px;
    }
}

/* ふわっと切り替わるアニメーション設定（carousel-fade使用時） */
.carousel-fade .carousel-item {
    transition-duration: 1.5s; /* 切り替わりを少しゆっくりにして優雅に */
}


/* カルーセルバナーのリンク範囲をわかりやすく */
.carousel-item a {
    display: block; /* リンクエリアを画像いっぱいに広げる */
    transition: opacity 0.3s;
}
.carousel-item a:hover {
    opacity: 0.7; /* マウスを乗せたら少し薄くする */
}






/* ------TOP新着情報カスタムスタイル------ */
.news-date {
    /* 0.9remから1.1remへ引き上げ */
    font-size: 1.1rem; 
    font-weight: 600; /* 文字を太めにして視認性を確保 */
    min-width: 140px; /* 文字が大きくなった分、幅も広げる */
    color: #444; /* グレーを少し濃くしてコントラストを強く */
}

.badge-news {
    /* バッジ内の文字も大きく */
    font-size: 1rem;
    width: 130px; 
    padding: 8px 0;
    letter-spacing: 1px; /* 文字の間隔を少し空けると読みやすい */
}
@media (max-width: 767px) {
	.badge-news {
    /* バッジ内の文字スマホは少し小さく */
    font-size: 0.7rem;
	width: 100px; 
    padding: 5px 0;	
	}
}


/* お知らせ本文 */
.news-content {
	font-size: 1.2rem; /* 本文は一番大きく */
    line-height: 1.5;  /* 行間をゆったり取って、視線の移動を楽にする */
    font-weight: 500;
}
@media (max-width: 767px) {
	.news-content {
	font-size: 1.0rem; /* スマホ向け少し小さく */
	}
}

/* カテゴリ別カラー（スクショの色味に合わせて調整） */
.bg-cosplay { background-color: #e60012 !important; } /* 赤 */
.bg-event { background-color: #92519c !important; }   /* 紫 */
.bg-traffic { background-color: #009944 !important; } /* 緑 */
.bg-other { background-color: #666666 !important; }   /* その他（グレー） */

/* ホバー時にテキストのアンダーラインを強調 */
.list-group-item-action:hover {
    background-color: #f8f9fa;
}


/* ---新着情報のスクロール設定--- */
.news-scroll-container {
    /* 1件あたりの高さ（パディング込） × 3件分 ＋ 枠線の微調整 */
    max-height: 200px; /* ここの数値は実際の見栄えで微調整してください */
    overflow-y: auto;  /* 縦方向にスクロールを出す */
    overflow-x: hidden; /* 横はみ出しは禁止 */
    padding-right: 10px; /* スクロールバーと文字が重ならないための余白 */
}

/* スマホ版（画面幅767px以下）の高さ設定 */
@media (max-width: 767px) {
    .news-scroll-container {
        max-height: 300px; /* スマホは縦に長いので、少し余裕を持たせる */
    }
}



/* スクロールバーのデザイン（任意：細めにしてスタイリッシュに） */
.news-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.news-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}






/* --- メガバナー専用スタイル --- */

/* 全体のホバー感 */
.mega-banner-link {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.mega-banner-link:hover {
    transform: scale(1.02); /* マウスを載せると少し大きく */
    opacity: 0.95;
}

/* 1. ふわふわ浮遊アニメーション */
.float-animation {
    animation: floatingBanner 4s ease-in-out infinite;
}

@keyframes floatingBanner {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* 15px上下に動かして目立たせる */
    100% { transform: translateY(0); }
}

/* 2. キラッと光るシャインエフェクト */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 30%;
    height: 200%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    animation: shineBanner 5s infinite; /* 5秒に1回キラッとさせる */
}

@keyframes shineBanner {
    0% { left: -100%; }
    20% { left: 150%; } /* 光が左から右へ駆け抜ける */
    100% { left: 150%; } /* 残りの時間は待機 */
}




/*-------TOPカテゴリバナーエフェクト---------*/
.hover-zoom {
    display: block;
    overflow: hidden;
    border-radius: 12px; /* 少し角を丸くすると淡い色味に合います */
    transition: transform 0.3s ease;
}

.hover-zoom:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 影も淡くすると綺麗 */
}






/* --------------- コンテンツ用↓ ------------------ */
/* --- 開催概要ページ専用（g_） --- */
.g_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.g_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.g_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.3em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.g_full_band h1 {
    font-size: 2.2rem;
	}
}



/* キャッチコピー */
.g_catch_area {
    margin-bottom: 50px;
}
.g_catch_area h2 {
    color: #17CD47;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 15px;
}
@media (min-width: 768px) {
	.g_catch_area h2 {
    font-size: 2.5rem;
	}
}
	

/* キャッチコピー下 */
.g_tagline {
	font-size: 1.2rem;
    font-weight: 500;
	line-height: 1.8;
}
@media (min-width: 768px) {
	.g_tagline {
	font-size: 1.6rem;
	}
}



.g_highlight {
    background: linear-gradient(transparent 70%, #fffb00 70%);
}


/* 見出し：第19回... */
.g_sub_ttl {
    color: #17CD47;
    border-left: 6px solid #17CD47;
    padding: 5px 15px;
    margin-bottom: 30px;
    font-weight: bold;
}

/* 情報テーブル */
.g_info_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}
@media (min-width: 768px) {
	.g_info_table {
    	font-size: 1.2rem;
	}
}


.g_info_table tr {
    border-bottom: 1px solid #ccc;
}
.g_info_table th, .g_info_table td {
    padding: 20px 10px;
    vertical-align: top;
}
.g_info_table th {
    width: 150px;
    font-weight: bold;
    white-space: nowrap;
	font-size: 1.3rem;
}
@media (min-width: 768px) {
	.g_info_table th {
    	font-size: 1.2rem;
	}
}


/* リスト形式 */
.g_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.g_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}
.g_list i {
    color: #17CD47;
    margin-right: 10px;
    margin-top: 4px;
}

/* リンクと警告 */
.g_link {
    color: #0044ff;
    text-decoration: underline;
}

.g_pink {
    color: #e91e63;
    font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .g_info_table th, .g_info_table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .g_info_table th { border: none; padding-bottom: 0; }
}


/* ぶら下げインデント（一部リンク版） */
.g_note {
    margin-bottom: 0.8rem; /* 行間を優しく広めに */
    color: #2D3430;        /* 目に優しい黒グレー */
}

.g_note-blue {
    margin-bottom: 0.8rem; /* 行間を優しく広めに */
    color:dodgerblue;       /* ここだけブルー */
}

/* リンク部分だけ青く、下線を引く */
.g_link {
    color: #0044ff;
    text-decoration: underline;
    font-weight: bold;
	background-color:lightcyan;
}




/* -------※印対策------- */
/* 注釈用のコンテナ */
.note-item {
  display: flex;
  gap: 0.5em;       /* ※と文字の間の余白（お好みで調整） */
  margin-bottom: 4px; /* 行間の調整 */
}

/* 「※」の部分 */
.note-mark {
  flex-shrink: 0;   /* 必須：これがないと「※」が潰れます */
  font-weight: bold; /* 少し目立たせたい場合 */
}

/* テキスト部分 */
.note-content {
  flex-grow: 1;
  line-height: 1.6; /* 2行目以降が読みやすくなる黄金比 */
}





/* --- コスプレイベント情報TOPページ専用（c_） --- */
.c_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.c_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.c_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.c_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}


/* -------CAUTIONテープ部分------- */
.c_caution_area {
    background-color: #fff9d7; /* 背景の薄い黄色 */
    position: relative;
    padding: 60px 20px;
    overflow: hidden;
}

/* テープの設定 */
.caution_tape {
    position: absolute;
    left: 0;
    width: 200%; /* ループ用に長めに取る */
    height: 40px;
    background-image: url('../img/cosplay/yellowblack_caution_bg.webp');
    background-repeat: repeat-x;
    background-size: contain;
    animation: scroll_tape 50s linear infinite;
}

.caution_tape.top { top: 0; }


.yellowblack_tape {
    position: absolute;
    left: 0;
    width: 200%; /* ループ用に長めに取る */
    height: 30px;
    background-image: url('../img/cosplay/yellowblack.webp');
    background-repeat: repeat-x;
    background-size: contain;
    animation: scroll_tape 50s linear infinite;
}

.yellowblack_tape.bottom { bottom: 0; }



/* テープを横に流すアニメーション */
@keyframes scroll_tape {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.txt_red {
    color: #e91e63;
    font-weight: bold;
}

.plus_maker {
    background: linear-gradient(transparent 70%, #fff200 70%);
}




/* 注意本文 */
.caution_text p {
    /* 読みやすさの黄金比 1.7〜1.8 */
    line-height: 1.75;
    
    /* 文字サイズは標準的な 1rem(16px) を確保 */
    font-size: 1rem;
    
    /* 段落と段落の間に適度な空間を作る */
    margin-bottom: 1.2rem;
    
    /* 左右の端がカチッとしすぎないよう、日本語は left が自然です */
    text-align: left;
    
    /* 文字の間隔をわずかに広げて圧迫感を減らす（隠し味） */
    letter-spacing: 0.02em;
	
	/* ぶら下げの設定 */
    hanging-punctuation: allow-end;
    
    /* ※セットで使うと効果的！文字の端を揃える設定 */
    text-align: justify;
}
@media (min-width: 768px) {
    .caution_text p {
        font-size: 1.25rem; 
        line-height: 1.8;
        margin-bottom: 1.5rem;
        font-weight: 500;
		padding: 0 3em;
    }
}



/* 黄色警告のタイトル部分 */
.caution_title {
    display: flex;
    align-items: center;      /* 上下の中央を合わせる */
    justify-content: center; /* 左右の中央に寄せる */
    gap: 15px;               /* アイコンと文字の間の隙間 */
    text-align: center;      /* テキストが改行された時用 */
    width: 100%;
    margin-bottom: 30px;     /* 下の文章との余白 */
    
    /* 文字の大きさ調整（2026年流の可変設定） */
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: bold;
}
@media (min-width: 768px) {
	.caution_title {
		margin-top: 20px;
	}
}


/* アイコンのサイズを微調整したい場合 */
.caution_title picture img {
    height: auto;
    width: clamp(30px, 5vw, 50px); /* 画面サイズに合わせてアイコンも伸縮 */
}





/* バナー３種全体のコンテナ */
.c_banner_wrapper {
    /* 1000pxの制限を外して、親要素（TOPページと同じ枠）いっぱいに広げる */
    width: 100%;
    max-width: 100%; 
    

    
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-sizing: border-box; /* 余白を含めて100%にする */
}

.c_banner_item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* 少し角丸にしてモダンアレンジ */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時の共通エフェクト（メガバナーと同じ感じ） */
.c_banner_item a:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* --- 1枚目専用：ふわふわアニメーション --- */
.float_animation {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* PC向け微調整 */
@media (min-width: 768px) {
    .c_banner_wrapper {
        gap: 40px; /* PCではもう少しゆったり配置 */
    }
}


/* 規約 */
/* 注意書きピンクの部分 */
.cosplay-notice {
    background-color: #e91e63; /* 指定の背景カラー */
    color: #ffffff;             /* テキストカラー（白） */
    text-align: center;         /* 中央揃え */
    padding: 10px 20px;         /* 上下左右の余白 */
    border-radius: 50px;        /* 左右の丸み */
    font-weight: bold;          /* 文字を太くして読みやすく */
    font-size: 26px;            /* 文字サイズ（適宜調整してください） */
    margin: 20px auto;          /* 上下の外側余白と中央配置 */
    max-width: fit-content;     /* テキストの長さに合わせる（横幅一杯なら削除） */
    line-height: 1.5;           /* 行間 */
	margin-top:3em;
  }

  /* スマホで見るときに端が詰まりすぎないよう調整 */
  @media (max-width: 600px) {
    .cosplay-notice {
      font-size: 14px;
      padding: 8px 15px;
      margin: 15px 10px;
    }
  }



/* 規約バナー　全体のコンテナ */
  .kiyaku-banner-container {
    display: flex;
    justify-content: center;
    gap: 15px;            /* バナー同士の隙間 */
    padding: 10px;
    max-width: 1000px;    /* 最大幅（サイトに合わせて調整してください） */
    margin: 0 auto;       /* 中央寄せ */
  }

  /* 各バナーのリンクエリア */
  .kiyaku-banner-item {
    flex: 1;              /* PCでは均等に横幅をとる */
    max-width: 400px;     /* 大きくなりすぎないよう制限 */
    text-decoration: none;
    transition: opacity 0.3s;
  }

  /* ホバー（マウスを乗せた時）の演出 */
  .kiyaku-banner-item:hover {
    opacity: 0.8;
  }

  /* 画像のレスポンシブ設定 */
  .kiyaku-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;   /* バナー自体にも少し丸みをつけると馴染みます */
  }

  /* スマホ用の設定（縦並び） */
  @media (max-width: 600px) {
    .kiyaku-banner-container {
      flex-direction: column; /* 縦に並べる */
      align-items: center;    /* 中央に寄せる */
    }
    .kiyaku-banner-item {
      width: 90%;             /* スマホでは画面幅に合わせて表示 */
    }
  }



/* 見出し：コスプレ撮影エリア＆開放時間 */
.c_sub_ttl {
    color: #17CD47;
    border-left: 6px solid #17CD47;
    padding: 5px 15px;
    margin-bottom: 30px;
    font-weight: bold;
	margin-top: 2em;
}



/* 表：コスプレ撮影エリア＆開放時間 */
.schedule-container {
    max-width: 600px;     /* 全体の横幅調整 */
    margin: 20px 0; 
    font-family: sans-serif;
  }

  .schedule-item {
    display: flex;
    justify-content: space-between; /* 左右に振り分ける */
    align-items: center;
    padding: 12px 0;               /* 行間の広さ */
    border-bottom: 1px dotted #ccc; /* 下点線を入れるとよりレガシー風に */
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  /* 最後の行の線は消す */
  .schedule-item:last-child {
    border-bottom: none;
  }

  .location {
    text-align: left;
    flex: 1;
  }

  .time {
    text-align: right;
    white-space: nowrap; /* 時間が途中で改行されないように */
    margin-left: 10px;
  }

  /* スマホ用の微調整 */
  @media (max-width: 480px) {
    .schedule-item {
      font-size: 14px; /* スマホでは少し文字を小さく */
      padding: 10px 0;
    }
  }


/* 表の下の※注意書き */
.cosplay-note-container{
	 font-size: 14px;
	margin-bottom: 3em;
}

@media (min-width: 768px) {
	.cosplay-note-container{
	 font-size: 20px;
	}
}








/* --- コスプレ更衣室＆参加証販売情報ページ専用（s_） --- */
.s_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.s_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.s_full_band h1 {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: 0em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.s_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}



/* ---------WEB早割--------- */
.campaign-section {
    background-color: #f0fff4;
    padding: 40px 20px;
    border-radius: 20px; /* 角丸を少し大きめに（sample.png風） */
    overflow: hidden;
	margin-bottom: 3em;
  }

  .campaign-inner {
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃え */
  }

  /* ベースのスタイル */
  .line-item {
    padding: 8px 18px;
    margin-bottom: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    font-size: 1.3rem;
    /* 初期状態：左に隠して透明にする */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
@media (min-width: 768px) {
	.line-item {
    font-size: 2.5rem;
  } 
}

/*販売期間だけ黄色に*/
.s_yellow-font {
	color:lemonchiffon;
}




  /* クラスがついたら表示状態にする */
  .line-item.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .line-blue { background-color: #3abcf4; }
  .line-green { background-color: #17cd47; }




/*早割注意書き・赤文字*/
.s_font-red {
	color:#ff4136;
	font-weight: bolder;
}



/*通常金額に戻る注意書き*/
.s_chocolate-font {
	color:chocolate;
}


/* 早割キャッチコピー下の※注意書き */
.sale-note-container{
	 font-size: 14px;
	margin-bottom: 1em;
}

@media (min-width: 768px) {
	.sale-note-container{
	 font-size: 20px;
	}
}


/*更衣室向け特別仕様*/
.more-large {
	font-size: 30px;
}
@media (max-width: 767px) {
	.more-large {
		font-size: 24px;
	}
}



/*外部ショップサイトへのリンクボタン部分*/
.shop-button-container {
    margin: 30px 0 0;
	text-align: center;
  }
@media (max-width: 767px) {
	.shop-button-container{
	     margin: 20px 0 30px;
	}
}


  .shop-button {
    display: inline-block;
    background-color: #ff4136; /* 注目を集める赤 */
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 40px;
    border-radius: 50px; /* 左右丸め */
    box-shadow: 0 4px 15px rgba(255, 65, 54, 0.4);
    transition: transform 0.2s;
  }

  .shop-button i {
    margin-right: 10px;
  }

  /* ホバー時に少し大きくする */
  .shop-button:hover {
    transform: scale(1.05);
    background-color: #ff574d;
    color: #fff;
  }

  /* 注目させるための「ふわふわ」アニメーション */
  .pulse-animation {
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 65, 54, 0.7);
    }
    70% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(255, 65, 54, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 65, 54, 0);
    }
  }


/* 外部ショップサイトへのリンクボタン部分下の※注意書き */
.sale-under-btn-note-container{
	 font-size: 14px;
	font-weight: bolder;
}

@media (min-width: 768px) {
	.sale-under-btn-note-container{
	 font-size: 20px;
	}
}

/*3月1日から販売開始の背景黄色設定*/
.s_bg-yellow{
	background-color: yellow;
	font-weight: bolder;
	padding: 5px;
}
@media (max-width: 767px) {
	.s_bg-yellow{
	display: block;
	text-align: center;
	}
}





/* 参加証販売ページ・バナー３種全体のコンテナ */
.s_banner_wrapper {
    /* 1000pxの制限を外して、親要素（TOPページと同じ枠）いっぱいに広げる */
    width: 100%;
    max-width: 100%; 
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-sizing: border-box; /* 余白を含めて100%にする魔法の言葉 */
}

.s_banner_item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* 少し角丸にして令和アレンジ */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時の共通エフェクト（メガバナーと同じ感じ） */
.s_banner_item a:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}



/* 冒頭WEB割バナー用のエフェクト↓ */
/* フェードアップの初期状態 */
.anim-fade-up {
    opacity: 0;
    transform: translateY(30px); /* 30pxほど下に下げておく */
    transition: opacity 1.0s ease-out, transform 1.0s ease-out; /* 1秒かけてじわっと */
}

/* 画面内に入った時に付与するクラス */
.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}





/* PC向け微調整 */
@media (min-width: 768px) {
    .s_banner_wrapper {
        gap: 40px; /* PCではもう少しゆったり配置 */
    }
}


.s_kiyaku_wrapper{
	margin-bottom: 3em;
}
@media (max-width: 767px) {
    .s_kiyaku_wrapper{
	margin-bottom: 0.7em;
	}
}


















/* --- コスプレ会場（更衣室）MAPページ専用（dm_） --- */
.dm_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.dm_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.dm_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.dm_full_band h1 {
    font-size: 2.2rem;
	}
}



/* マップ全体のコンテナ */
.dm_map_container {
    margin: 40px 0;
    text-align: center;
}

/* スマホ用ヒント：PCでは隠す */
.dm_map_hint {
    display: block;
    background: #f8f9fa;
    color: #666;
    font-size: 0.85rem;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* 地図ののぞき窓（スクロール設定） */
.dm_map_viewport {
    width: 100%;
    overflow-x: auto; /* 横スクロールを許可 */
    overflow-y: hidden;
    border: 3px solid #17CD47; /* ストフェスグリーン */
    background-color: #eee;
    -webkit-overflow-scrolling: touch; /* iPhoneのスクロールを滑らかに */
}

/* 地図画像本体 */
.dm_map_img {
    display: block;
    height: auto;
    /* 1396pxで固定して、スマホで縮小させないのがコツ */
    width: 1396px; 
    max-width: none; 
}

/* PDFボタンエリア */
.dm_pdf_link_area {
    margin-top: 30px;
}

.dm_pdf_btn {
    display: inline-block;
    background-color: #d93025; /* PDFの赤 */
    color: #fff;
    padding: 18px 35px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 #a0201a; /* 立体感を出して「押せる」感を演出 */
    transition: all 0.2s;
}

.dm_pdf_btn:active {
    box-shadow: none;
    transform: translateY(4px);
}

.dm_pdf_note {
    font-size: 0.85rem;
    color: #888;
    margin-top: 10px;
}

/* PC（768px以上）での調整 */
@media (min-width: 768px) {
    .dm_map_hint {
        display: none; /* PCではヒントを隠す */
    }
    .dm_map_viewport {
        overflow-x: hidden; /* PCでははみ出さないように */
    }
    .dm_map_img {
        width: 100%; /* PCではコンテナ幅にぴったり合わせる */
    }
}


/*------更衣室マップ上部の注意事項リスト設定-------*/

.dm_attention_area {}

.dm_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dm_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}
.dm_list i {
    color: #17CD47;
    margin-right: 10px;
    margin-top: 4px;
}

/* リンクと警告 */
.dm_link {
    color: #0044ff;
    text-decoration: underline;
}

.dm_pink {
    color: #e91e63;
    font-weight: bold;
}

/*---PC向けに文字を大きく---*/
@media (min-width: 768px) {
	.dm_list {
    	font-size: 1.2rem;
	}
}

















/* --- 定員制更衣室利用券付参加証ページ専用（dp_） --- */
.dp_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.dp_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.dp_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.dp_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}







/* --- コスプレパレードのご案内ページ専用（p_） --- */
.p_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.p_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.p_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.p_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}






/* --- ストフェス公式宿泊プランページ専用（h_） --- */
.h_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.h_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.h_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.h_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}










/* --- 参加規約（コスプレ）ページ専用（ca_） --- */
.ca_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.ca_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.ca_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.ca_full_band h1 {
    font-size: 2.2rem;
	}
}





/* コスプレ祭・冒頭ロゴ部分 */
  .rules-header {
    display: flex;
    align-items: center;    /* 垂直方向の中央揃え */
    justify-content: center;/* 水平方向の中央揃え */
    gap: 30px;              /* ロゴと枠の間の隙間 */
    margin-bottom: 10px;
  }

  /* ロゴ部分 */
  .header-logo img {
    max-width: 400px;       /* ロゴのサイズ調整 */
    height: auto;
    display: block;
  }

  /* オレンジのメッセージ枠 */
  .header-message {
    border: 2px solid #17cd47;
    padding: 15px 25px;
    font-weight: bold;
    color: #e60012;
    line-height: 1.6;
    background-color: #fff;
    text-align: left;
    position: relative;
	font-size: 1.5rem;
  }

  /* スマホ用のレスポンシブ設定 */
  @media (max-width: 650px) {
    .rules-header {
      flex-direction: column; /* 縦並びに切り替え */
      gap: 15px;
    }
    .header-logo img {
      max-width: 250px;  
    }
    .header-message {
      font-size: 1.1rem;
      padding: 10px 15px;
    }
  }




/*参加規約・中身*/
.rules-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.7;
    color: #333;
  }



  /* セクション見出し */

.highlight-orange {
	color: #eb6100;
	font-weight: bolder;
}

.highlight-red {
	color: #ff4136;
	font-weight: bolder;
}

.highlight-pink {
	color: #e4347f;
	font-weight: bolder;
}

.highlight-blue {
	color: dodgerblue;
	font-weight: bolder;
}



  .section-title {
    font-size: 1.25rem;
    padding: 10px 15px;
    color: #fff;
    margin: 40px 0 20px;
	  line-height: 1.6;
  }
  .blue-bg { background-color: #00a0e9; }
  .orange-bg { background-color: #ff8c00; }
  .deeporange-bg { background-color: #e54f00; }
  .pink-bg { background-color: #e4347f; }
  .yellow-bg { background-color: #fffacd; }


/* 見出し内の補足テキストを調整 */
.section-title small {
  display: inline-block; 
  font-size: 0.8em;    /* 親(h2)の文字サイズに対して80%の大きさに */
  font-weight: normal; /* 補足なので少し細くしてメリハリをつける */
  margin-top: 5px;     /* 見出し文字との隙間 */
  opacity: 0.9;        /* 少しだけ透けさせると馴染みます */
}



  .section-title-cosplay {
    font-size: 1.25rem;
    padding: 10px 15px;
    color: #e4347f;
    margin: 40px 0 20px;
	line-height: 1.6;
	border: 2px solid #db7093;
  }

  .section-title-camera {
    font-size: 1.25rem;
    padding: 10px 15px;
    color: #00a0e9;
    margin: 40px 0 20px;
	line-height: 1.6;
	border: 2px solid #00a0e9;
  }




.section-body {
	font-size: 1.1rem;
}
  @media (max-width: 600px) {
	.section-body {
	font-size: 1.0rem;
	}
  }



  /* 箇条書きリスト */
  .rules-list {
    list-style: none;
    padding: 0;
  }
  .rules-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  @media (max-width: 600px) {
	.rules-list li {
	font-size: 1.0rem;
	}
  }

  .rules-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #00a0e9;
  }



  /* 箇条書きリスト orange */
  .rules-list-orange {
    list-style: none;
    padding: 0;
  }
  .rules-list-orange li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  @media (max-width: 600px) {
	.rules-list-orange li {
	font-size: 1.0rem;
	}
  }

  .rules-list-orange li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #e54f00;
  }




  /* 箇条書きリスト pink */
  .rules-list-pink {
    list-style: none;
    padding: 0;
  }
  .rules-list-pink li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  @media (max-width: 600px) {
	.rules-list-pink li {
	font-size: 1.0rem;
	}
  }

  .rules-list-pink li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #ff69b4;
  }



  /* 箇条書きリスト blue */
  .rules-list-blue {
    list-style: none;
    padding: 0;
  }
  .rules-list-blue li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  @media (max-width: 600px) {
	.rules-list-blue li {
	font-size: 1.0rem;
	}
  }

  .rules-list-blue li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: deepskyblue ;
  }





/* 規約内の※や丸付き数字対応 */
.kiyaku-note-container{
	margin-bottom: 1em;
}




  /* ハイライトボックス（重要事項） */
  .highlight-box {
    border: 2px solid #ff4136;
    padding: 30px;
    border-radius: 8px;
    background-color: #fff5f5;
	font-size: 1.1rem;  
  }
 @media (max-width: 600px) {
	.highlight-box {
	font-size: 1.0rem;
	}
  }

  /* ハイライトボックス（重要事項）カメラ編 */
  .highlight-box-camera {
    border: 2px solid royalblue;
    padding: 30px;
    border-radius: 8px;
    background-color:aliceblue;
	font-size: 1.1rem;  
  }
 @media (max-width: 600px) {
	.highlight-box-camera {
	font-size: 1.0rem;
	}
  }





  .box-title {
    color: #ff4136;
    text-align: center;
    margin-top: 0;
	margin-bottom: 1em;
	font-size: 1.3rem;
	font-weight: bolder;
	 line-height: 1.4;
  }


  @media (max-width: 600px) {
    .rules-container { padding: 10px; }
    .section-title { font-size: 1.1rem;}
  }





/* --- 参加規約（カメラ）ページ専用（pa_） --- */
/* 規約の内容はca_と共通で使っている */
.pa_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.pa_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.pa_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.pa_full_band h1 {
    font-size: 2.2rem;
	}
}















/* --- 出展ブース＆ステージ情報ページ専用（e_） --- */
.e_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.e_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.e_full_band h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.e_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.2em;
	}
}





/* --- 交通規制情報ページ専用（t_） --- */
.t_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.t_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.t_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.3em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.t_full_band h1 {
    font-size: 2.2rem;
	}
}







/* --- 会場マップページ専用（m_） --- */
.m_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.m_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.m_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.3em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.m_full_band h1 {
    font-size: 2.2rem;
	}
}








/* --- 公式ガイドブック（gu_） --- */
.gu_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.gu_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.gu_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.gu_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.3em;
	}
}








/* --- プレス申請について（pr_） --- */
.pr_wrapper {
    color: #2D3430; /* 目に優しい黒グレー */
}

/* 全幅グリーンの帯 */
.pr_full_band {
    background-color: #17CD47;
    color: #fff;
    width: 100%;
    padding: 35px 0;
    margin-bottom: 40px;
    text-align: center;
}
.pr_full_band h1 {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    font-weight: bold;
}
@media (min-width: 768px) {
	.pr_full_band h1 {
    font-size: 2.2rem;
	letter-spacing: 0.3em;
	}
}







/* ------------共通利用------------ */
/* Coming Soonエリア（dp_を流用） */
.dp_coming_soon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* 画面に寂しさを感じさせない高さ */
    text-align: center;
}

.dp_cs_inner i {
    font-size: 3rem;
    color: #17CD47; /* ストフェスグリーン */
    margin-bottom: 15px;
    display: block;
}

.dp_cs_inner p {
    font-size: 2.5rem;
    font-weight: bold;
    color: #17CD47;
    margin: 0;
    line-height: 1;
    font-family: 'Arial Black', sans-serif; /* 少し太めのフォントでインパクトを */
}

.dp_cs_inner span {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
}


@media (min-width: 768px) {
    .dp_coming_soon {
        min-height: 450px; /* PCではもう少しゆったり */
    }
    .dp_cs_inner p {
        font-size: 4rem;
    }
	.dp_cs_inner span {
    margin-top: 30px;
    font-size: 1.1rem;
	}
}