:root {
 --text:#19405C;
 --blue: #076FB8;
 --ye:#DEB616;
 --gray:#A6A6A6;
 --line_gray: #e6e6e6;
 --gray_sub: #BAC8D6;
 --green: #3AB7A2;
 --orange:#EA5614;
 --day18:#3AB7A2;
 --day18sub:#3AB7A233;
 --day19:#6BA7D4;
 --day19sub:#6BA7D433;
}


/* 全体の基本設定 */
body {
    line-height: 1.8;
    color: var(--text);
    /* サイズ変更を0.3秒かけて滑らかにする */
    transition: font-size 0.3s ease;
    margin: 0;


font-family: "M PLUS Rounded 1c", sans-serif;
}

a {
    text-decoration: none; /* 下線を消す */
}

ul {
  list-style: none; /* 点を消す */
  padding-left: 0;  /* 左の余白を消す */
}

footer{
 background-color: var(--blue);
 color:#ffffff;
 padding:3rem 2rem;
}

footer a{
 color: #ffffff;
 font-weight: bold;
}

img{
 width: 100%;
 display: block;
}

.container{
 max-width: 1040px;
 margin: 0 auto;
 padding: 3.75rem 0;
}

section{
 padding: 4rem 6.25rem 5rem 6.25rem;
 border-radius: 10px;
 background-color: #ffffff;
 margin-bottom:3.75rem;
}

.cr{
 text-align: center;
}

.f_c_info{
 margin-bottom:1.5rem;
}

/**お問合せ先メールアドレスのラッパー用**/
.contact-wrapper {
    display: flex;    
}
/********文字サイズ変更*********/

/* --- 1. ルート（html）の基準サイズを設定 --- */
html {
    /* ブラウザ標準（16px）を100%とする */
    font-size: 100%; 
    transition: font-size 0.3s ease;

}

/* --- 2. 文字サイズ変更用のクラス（htmlに付与する） --- */
/* 小：そのまま */
html.font-small {
    font-size: 100%;
}

/* 中：105% */
html.font-medium {
    font-size: 120%;
}

/* 大：110% */
html.font-large {
    font-size: 140%;
}



/* ボタン周りの装飾 */
.controls {
    color:#ffffff;
    border-radius: 8px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    color:#ffffff;
        background-color: var(--blue)
}

button:hover {
    border: solid 3px #ffffff;
}

.font-size-buttons button {
  margin-right: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--blue);
}

.active{
 border: solid #ffffff 3px;
}

/**********検索窓***********/
/* 検索バー全体の配置 */
.search-container {
    max-width: 500px; /* 横幅の最大値 */
    padding: 10px;
}

/* フォームのレイアウト（横並び） */
.search-form {
    display: flex; /* 入力欄とボタンを横に並べる */
}

/* 入力欄（input）の装飾 */
.search-input {
    flex-grow: 1; /* 余ったスペースをすべて入力欄に割り当てる */
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #ddd;
    outline: none; /* クリック時の青い枠線を消す（後で独自に設定） */
    transition: border-color 0.3s;
    border-radius: 4px 0 0 4px;
}

/* 入力欄にフォーカス（クリック）したときの色 */
.search-input:focus {
    border-color: #007bff; /* 青色に変更 */
}

/* 検索ボタンの装飾 */
.search-button {
    padding: 10px 15px;
    background-color: #ffffff;
    color: rgb(184, 184, 184);
    border: none;
    border-radius: 0 4px 4px 0; /* 角を丸くする */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* ボタンにマウスを乗せたとき */
.search-button:hover {
    background-color: #0056b3; /* 少し濃い青に */
}

/*******header********/

header{
 background-color: #076FB8;
 padding:0.2rem 2rem;
}

.tk_logo_t_s{
 display: flex;
     justify-content: space-between;
         align-items: center;
}

.t_s{
 display: flex;
 justify-content: end;
 align-items: center;
}

.tk_logo {
    font-size: 1rem;
    white-space: nowrap;
}

.tk_logo img{
    margin-right: 1rem;
}

.tk_logo a{
 color: #ffffff;
 text-decoration: none; 
}

.tk_logo a {
  display: flex;
  align-items: center; /* ← 縦中央揃え */
  gap: 8px;            /* 画像と文字の間隔（任意） */
  text-decoration: none;
}

.tk_logo img {
  display: block;
}

header {
  margin-bottom: 30px;
}
/* ===============================
   グローバルメニュー（完全版）
   =============================== */

/* ▼ ナビ本体 */
.global-nav {
  position: sticky;   /* 画面上部で固定 */
  top: 1.5rem;
  z-index: 9999;

  max-width: 1040px;
  margin:0 auto;
  background: #ffffff;
  border-bottom: 1px solid #ddd;

  border-radius: 10px;;

  /* 固定時に少し高級感 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


/* ▼ 横並びレイアウト */
.global-nav ul {
  display: flex;
  align-items: center;

  max-width: 1200px;   /* 中央寄せしたい場合 */
  margin: 0 auto;
  padding: 6px 44px 6px 20px;

  list-style: none;

  
}


/* ▼ ロゴを左端へ */
.global-nav .logo {
  margin-right: auto;
}


/* ▼ メニュー項目 */
.global-nav ul li {
  margin-left: 24px;
}


/* ▼ リンクデザイン */
.global-nav a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  display: block;
}


/* ▼ hover */
.global-nav a:hover {
  opacity: 0.7;
}


/**カルーセル***/
/* 全体 */
.carousel {
  max-width: 700px;
  margin: 0 auto;
}

/* メイン画像 */
.carousel-main {
  background: #eee;
}

.carousel-main img {
  width: 100%;
  display: block;
}

/* サムネイル列 */
.carousel-thumbs {
    display: flex;
    flex-wrap: wrap;       /* 子要素の折り返しを許可（これが最重要） */
    justify-content: center; /* 中央寄せ */
    gap: 0.8rem;           /* サムネイル同士の間隔 */
    margin: 1rem auto 0;   /* 上に余白、左右中央寄せ */
}

/* サムネイルの親要素（.thumb-wrapper）のサイズ調整 */
.carousel-thumbs .thumb-wrapper {
    flex: 0 0 calc(10% - 0.8rem); /* 1行に最大5枚並べる設定（20%） */
    min-width: 30px;              /* スマホで小さくなりすぎないように */
}

/* サムネイル画像自体の調整 */
.carousel-thumbs img.thumb {
    width: 100%;                  /* 親要素の幅いっぱいに広げる */
    height: auto;
    aspect-ratio: 4 / 3;          /* 比率を統一（必要に応じて） */
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;           /* 角を少し丸くすると綺麗です */
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* アクティブ時のスタイル */
.carousel-thumbs img.thumb.active {
    opacity: 1;
    border-color: var(--orange);  /* オレンジの枠線 */
    transform: scale(1.05);       /* 少し大きく */
}
/* サムネ */
.carousel-thumbs img {
  width: 30px;
  height: 20px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
}

/* 選択中 */
.carousel-thumbs img.active {
  opacity: 1;
  border: 2px solid #4a90e2;
}

/************/
.fv_area{
 margin-top: -103px;
}

.content_area{
 background-image: url(../images/2026/bg.webp);
     background-size: 90%;
    background-repeat: repeat;


    position: relative; /* 子要素（ロケット）の基準点になる */
    overflow: hidden;    /* 枠からはみ出たロケットを隠す */
    width: 100%;         /* 必要に応じて調整 */
}

.sec_h2{
 font-size:2rem;
 text-align: center;
 font-weight: bold;
 margin-top: 0;
}

.sec_h2_span{
 font-size:0.875rem;
}

.sec_p{
 font-size:0.875rem;
 margin:0;
}

.oubo .sec_p {
    font-size: 1.5rem;
}

.kakomi_con{
 border: solid 2px var(--line_gray);
 border-radius: 10px;
 padding:2.5rem;
 margin: 5rem 0;
}

.kakomi_h3{
 border-radius: 4px;
 padding: 0.5rem 1.2rem;
 background-color: var(--green);
 color: #ffffff;
 width: fit-content;
 margin: -4rem auto 0 auto;
}

.kakomi_con p{
 padding-top:1rem;
}

.kakomi_con.hatsu{
 margin-bottom:0;
}

.map iframe{
 width: 100%;
}

.nk{
 font-weight: bold;
 margin-bottom:1rem;
}


.nk_ad a{
 display: block;
 margin-top:1.5rem;
}


.link_btn a{
 display: block;
 background-color: var(--orange);
 color: #ffffff;
 padding: 1rem 4rem;
 font-weight: bold;
 width: fit-content;
 border-radius: 4px;
 margin:3rem auto 0;
}







.booking{
 background-color: var(--orange);
 color: var(--text);
 font-weight: bold;
 text-align: center;
 padding:2rem 0;
 border-radius: 4px;
 color: #ffffff;
 transition: transform 0.3s ease;
}


.booking:hover {
  /* 1.05倍の大きさに拡大 */
  transform: scale(1.05);
}

.shien{
 border: solid 1px var(--text);
 border-radius: 4px;
}

.tk_logo img {
    max-width: 5rem;
}

.list_body{
     background-image: url(../images/2026/bg.webp);
    background-size: 90%;
    background-repeat: repeat;
}

.list_body .content_area {
    background-image: none;
}



/* 親要素：リストコンテナ */
.card-list {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効にする */
  align-items: flex-start;  /* アイテムを一番上のラインで揃える */
  justify-content: space-between;
  padding: 0;
  list-style: none;

  margin-top:2rem;
}

/* 子要素：リストアイテム */
.card-item {
 flex: 0 0 calc((100% - 20px * 2) / 3);
  box-sizing: border-box;
  
  /* 数字を垂直中央に並べるためにFlexboxを適用 */
  display: flex;
  align-items: center;
  gap: 1rem; /* 数字とテキストの間の距離 */
      margin-bottom: 2rem;


}






/* ボタンの基本スタイル */
.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

/* 活性化（クリックされた）時のボタン */
.tab-btn.day18.is-active,
.tab-btn.day18:hover {
  background: var(--day18);
  border:2px solid var(--day18);
  color: #fff;
}

.tab-btn.day18{
 background-color: var(--day18sub);
 color: var(--day18);
 border:2px solid var(--day18);
}

.tab-btn.day19.is-active,
.tab-btn.day19:hover {
  background: var(--day19);
  border:2px solid var(--day19);
  color: #fff;
}

.tab-btn.day19{
 background-color: var(--day19sub);
 color: var(--day19);
 border:2px solid var(--day19);
}

/* コンテンツの制御 */
.tab-item {
  display: none; /* 基本は隠す */
}

.tab-item.is-active {
  display: block; /* クラスがついたら出す */
}


span.hj {
    margin-right: 1rem;
}


.filter-buttons {
  margin-bottom: 2rem;
 }
.filter-btn {
 padding: 8px 16px;
 cursor: pointer;
 margin-right: 0.5rem;
}


.filter-btn.btn_all:hover,
.filter-btn.btn_all.is-active {
 background: #19405C;
 border:2px solid #19405C;
 color: #fff;
}

.filter-btn.btn_all{
 background-color: #19405C33;
 color: #19405C;
 border: 2px solid #19405C;
}

.filter-btn.btn_18:hover,
.filter-btn.btn_18.is-active {
 background: var(--day18);
 border:2px solid var(--day18);
 color: #fff;
}

.filter-btn.btn_18 {
 background: var(--day18sub);
 color: var(--day18);
  border:2px solid var(--day18);
}

.filter-btn.btn_19:hover,
.filter-btn.btn_19.is-active {
 background: var(--day19);
 border:2px solid var(--day19);
 color: #fff;
}

.filter-btn.btn_19 {
 background: var(--day19sub);
 color: var(--day19);
  border:2px solid var(--day19);
}

/* 非表示用クラス */
.is-hidden {
  display: none !important;
}



.art_area{
 display: flex;
 justify-content: space-between;
}

.shutensha{
 border:2px solid var(--line_gray);
 padding:2.5rem;
 border-radius: 10px;
 margin-bottom: 2rem;
}

.shutensha h3{
 margin-top:0;
 margin-bottom: 0;
 font-size:1rem;
}


.shutensha h5{
 border:1px solid var(--gray_sub);
 border-radius: 4px;
 font-size: 0.625rem;
 padding: 0 1rem;
 font-weight: 400;
 width: fit-content;
 margin:0 0 1rem 0;

}

span.day_kakomi18 {
    display: block;
    background-color: var(--day18);
    color: #fff;
    width: fit-content;
    border-radius: 4px;
    padding: 0 4px;
    font-size:0.625rem;
    margin-bottom: 0.5rem;
}

span.day_kakomi19 {
    display: block;
    background-color: var(--day19);
    color: #fff;
    width: fit-content;
    border-radius: 4px;
    padding: 0 4px;
    font-size:0.625rem;
    margin-bottom: 0.5rem;
}

span.b_num {
    padding-left: 1rem;
    font-size: 1rem;
}

.t_gaiyou{
 font-size: 0.875rem;
 margin-bottom:0;
}

.entry_btn a{
 display: block;
 color:#fff;
 background-color: var(--orange);
 text-align: center;
 padding: 0.3rem;
 border-radius: 4px;
 font-weight: 600;

 transition: transform 0.3s ease;
}

.entry_btn a:hover {
  /* 1.05倍の大きさに拡大 */
  transform: scale(1.05);
}

.no_entry{
 border: 1px solid var(--orange);
 color: var(--orange);
 font-weight: 600;
 text-align: center;
 border-radius: 4px;
}


.booth {
    font-size: 0.875rem;
}


/* 丸囲み数字の基本スタイル */

.maru_18{
display: inline-flex;      /* 中の数字を上下左右中央にするため */
  justify-content: center;
  align-items: center;
  
  width: 1.5rem;              /* 丸の幅（文字サイズに連動） */
  height: 1.5rem;             /* 丸の高さ */
  flex-shrink: 0;
  
  background-color: var(--day18); /* 背景色：緑系 */
  color: #ffffff;            /* 数字の色：白 */
  
  border-radius: 50%;        /* 正方形を完璧な丸にする */
  
  font-size: 0.8rem;         /* 数字の大きさを少し小さめに調整 */
  font-weight: bold;
  
  margin-right: 0.5rem;      /* 右側のテキストとの距離 */
  
  /* 数字が少し下にズレて見える場合の微調整 */
  line-height: 1;
}

.maru_19{
display: inline-flex;      /* 中の数字を上下左右中央にするため */
  justify-content: center;
  align-items: center;
  
  width: 1.5rem;              /* 丸の幅（文字サイズに連動） */
  height: 1.5rem;             /* 丸の高さ */
  flex-shrink: 0;
  
  background-color: var(--day19); /* 背景色：緑系 */
  color: #ffffff;            /* 数字の色：白 */
  
  border-radius: 50%;        /* 正方形を完璧な丸にする */
  
  font-size: 0.8rem;         /* 数字の大きさを少し小さめに調整 */
  font-weight: bold;
  
  margin-right: 0.5rem;      /* 右側のテキストとの距離 */
  
  /* 数字が少し下にズレて見える場合の微調整 */
  line-height: 1;
}




/* リンク全体のテキスト装飾を整える（お好みで） */
.card-item a {
  display: flex;
  align-items: start;
  color: var(--text);
  text-decoration: none;
}

.card-item a:hover {
  text-decoration: underline;
}




.kakomi_con .oubo_p{
 font-weight: bold;
 text-align: center;
 padding-top:2rem;
}

.aubo_btn a{
 display: block;
 margin: 0 auto;
 width: 80%;
}


.gsc-control-cse.gsc-control-cse-ja {
    padding: 0;
}

form.gsc-search-box.gsc-search-box-tools {
    margin: 0;
    max-width: 300px;
}


/* カルーセルメインの親要素 */
.carousel-main {
  width: 100%;             /* 横幅は親（carousel）に合わせる */
  aspect-ratio: 4 / 3;    /* 横4：縦3の比率を固定（横÷縦 = 4/3） */
  background-color: #fff; /* 画像がない部分や余白を埋める色（お好みで） */
  overflow: hidden;        /* はみ出し防止 */
  border-radius: 8px;      /* 他のパーツと合わせた角丸（任意） */
  
  /* 中の画像を中央に配置するため */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メイン画像自体の設定 */
.carousel-main img {
  width: 100%;
  height: 100%;
  
  /* --- ここが魔法のプロパティ --- */
  object-fit: contain;    /* 比率を維持して、見切れないように枠内に収める */
  /* ---------------------------- */
  
  display: block;
}






/*******背景アニメーションSTART*******/
/* 2. ロケット：z-indexを「0」に設定 */
.rocket-animation {
    position: absolute;
    width: 60px;
    z-index: 0; /* 背面に配置 */
    animation: rocket-fly 20s linear infinite;
    pointer-events: none; /* マウス反応を無効化（文字選択などを邪魔しないため） */
}

/* 3. コンテンツ（文字や画像）が入る容器：z-indexを「1」以上に設定 */
.content_area .container {
    position: relative; /* z-indexを有効にするために必要 */
    z-index: 1;        /* ロケット(0)より上の数字にする */
}


.rocket-animation3 {
    position: absolute;
    width: 60px;
    z-index: 0; /* 背面に配置 */
    animation: rocket-fly 60s linear infinite;
    pointer-events: none; /* マウス反応を無効化（文字選択などを邪魔しないため） */
}

/* アニメーションの中身は前回と同じでOK */
@keyframes rocket-fly {
    0% {
        bottom: -10%;
        left: -10%;
        transform: rotate(-15deg);
    }
    100% {
        bottom: 110%;
        left: 110%;
        transform: rotate(-15deg);
    }
}

.rocket-animation2 {
    position: absolute;
    width: 80px;
    z-index: 0; /* 背面に配置 */
    animation: rocket-fly2 30s linear infinite;
    pointer-events: none; /* マウス反応を無効化（文字選択などを邪魔しないため） */
}



@keyframes rocket-fly2 {
    0% {
        bottom: -10%;
        right: -10%;
        transform: rotate(-115deg);
    }
    100% {
        bottom: 110%;
        right: 110%;
        transform: rotate(-115deg);
    }
}


.rocket-animation4 {
    position: absolute;
    width: 80px;
    z-index: 0; /* 背面に配置 */
    animation: rocket-fly3 10s linear infinite;
    pointer-events: none; /* マウス反応を無効化（文字選択などを邪魔しないため） */
}

@keyframes rocket-fly3 {
    0% {
        top: -10%;
        left: -10%;
        transform: rotate(80deg);
    }
    100% {
        top: 20%;
        left: 110%;
        transform: rotate(80deg);
    }
}









/* 親要素の設定 */
.pick,
.about {
    position: relative; /* 画像の基準点 */
    overflow: hidden;    /* 枠外に出た画像を隠す */
}

/* 共通設定 */
.zigzag-img {
    position: absolute;
    width: 60px;        /* 画像サイズはお好みで */
    z-index: 0;         /* 文字より下に配置 */
    pointer-events: none;
}

/* --- 画像1: 右端を上から下へ --- */
.right-down {
    right: 2rem; /* 右端からの余白 */
    animation: zigzag-down 30s linear infinite;
}

.right-down2 {
    right: 2rem; /* 右端からの余白 */
    animation: zigzag-down 60s linear infinite;
}

@keyframes zigzag-down {
    0% {
        top: -5%;
        transform: translateX(0);
    }
    25% { transform: translateX(-6.25rem); } /* 左へ */
    50% { transform: translateX(0); }         /* 中央へ */
    75% { transform: translateX(-6.25rem); } /* 左へ */
    100% {
        top: 110%;
        transform: translateX(0);
    }
}

/* --- 画像2: 左端を下から上へ --- */
.left-up {
    left: 2rem; /* 左端からの余白 */
    animation: zigzag-up 30s linear infinite;
}

.left-up2 {
    left: 2rem; /* 左端からの余白 */
    animation: zigzag-up 60s linear infinite;
}

@keyframes zigzag-up {
    0% {
        bottom: -10%;
        transform: translateX(0);
    }
    25% { transform: translateX(6.25rem); }  /* 右へ */
    50% { transform: translateX(0); }         /* 中央へ */
    75% { transform: translateX(6.25rem); }  /* 右へ */
    100% {
        bottom: 110%;
        transform: translateX(0);
    }
}

/* コンテンツが画像の上にくるように設定 */
.about > *:not(.zigzag-img) {
    position: relative;
    z-index: 1;
}






/* 親要素：土台を安定させる */
.access {
    position: relative;
    overflow: hidden; /* 画像がはみ出さないように */
}

/* 共通設定 */
.access-bg {
    position: absolute;
    width: 60px;        /* サイズはお好みで */
    z-index: 0;          /* コンテンツの下 */
    pointer-events: none;
}

/* --- 画像1: 右上で回転 --- */
.rotate-img {
    top: 5%;
    right: 5%;
    animation: bg-rotate 10s linear infinite;
}

@keyframes bg-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- 画像2: 左下でゆらゆら --- */
.swing-img {
    bottom: 5%;
    left: 5%;
    /* 起点を画像の中心下側にすると「振り子」のようになります */
    transform-origin: center bottom;
    animation: bg-swing 4s ease-in-out infinite;
}

@keyframes bg-swing {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

/* コンテンツを最前面へ */
.access > *:not(.access-bg) {
    position: relative;
    z-index: 1;
}


/*******背景アニメーションEND********/








.act th,
.act td{
 border: solid 1px var(--line_gray);
}

.act{
    border-collapse: collapse;
}










@media (min-width: 769px) {
 .pc{
  display: block;
 }

 .sp{
  display: none;
 }


.menu-trigger {
  display: none;
}








 .ad_map{
  display: flex;
  align-items: center;
 }

 .address{
  width: 40%;
 }
 .map{
  width: 58%;
 }

 .f_link ul{
  display: flex;
 }

 .f_link li{
  margin-right: 1.5rem;
 }

 .shu_img{
 width: 40%;

 display: flex;
  flex-direction: column;         /* 縦に並べる */
  justify-content: space-between; /* 最初を上、最後を下に配置！ */
  gap: 1rem;
}

.shu_text{
 width: 56%;

}


.side-banner {
    display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;

  position: fixed;
  bottom: 1rem;
  right: 1rem;

  width: 250px;
  z-index: 910;

  opacity: 0;
  transition: opacity .5s ease-out;
}





}





@media (max-width: 768px) {
  .pc{
  display: none;
 }

 .sp{
  display: block;
 }

/* メニュー本体の初期状態（非表示・右からスライドイン） */
  .nav-content {
    position: fixed;
    top: 50px;
    right: -100%; /* 画面の外に隠す */
    width: 80%;    /* メニューの幅 */
    height: 100vh;
    background-color: #076FB8; /* ヘッダーと同じ青 */
    padding: 2rem 1rem;
    transition: all 0.4s ease; /* アニメーション速度 */
    z-index: 999;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    overflow-y: auto; /* メニューが長い場合にスクロール可能に */
  }

  /* メニューが開いた時の状態 */
  .nav-content.is-active {
    right: 0; /* 画面内に戻る */
  }

  /* ハンバーガーボタンの装飾 */
  .menu-trigger {
    position: relative;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    z-index: 1000; /* メニューより上に表示 */
    cursor: pointer;
  }

  .menu-trigger:hover{
   border: none;
  }

  .menu-trigger span {
    display: block;
    position: absolute;
    left: 5px;
    width: 30px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.4s;
  }

  /* 三本線の位置 */
  .menu-trigger span:nth-child(1) { top: 5px; }
  .menu-trigger span:nth-child(2) { top: 15px; }
  .menu-trigger span:nth-child(3) { top: 25px; }

  /* ボタンがアクティブ（開いている時）のアニメーション（×印にする） */
  .menu-trigger.is-active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
  }
  .menu-trigger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .menu-trigger.is-active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
  }

  /* スマホ版メニュー内のレイアウト調整 */
  .nav-content .t_s, 
  .nav-content .global-nav ul {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nav-content .global-nav ul li {
    margin: 15px 0;
    width: 100%;
  }

  .nav-content .global-nav a {
    color: var(--blue);
    border-bottom: 2px solid var(--ye);
    font-weight: bold;
  }

  /* ロゴが消えないように横幅を確保 */
  .tk_logo {
    display: block !important;
    position: relative;
    z-index: 1001; /* ハンバーガーメニューより上に設定 */
  }

  /* ロゴの中のリンクを調整（文字が折り返さないように） */
  .tk_logo.tokyo a {
   margin-top:2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #ffffff;
  }



  /* ロゴ画像のサイズ固定 */
  .tk_logo img {
    width: 130px; /* お好みのサイズに */
    height: auto;
    margin-right: 5px;
  }

  /* 親要素のフレックス調整 */
  .tk_logo_t_s {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px; /* ヘッダーの高さを固定すると安定します */
  }

  header {
  background-color: var(--blue);
  padding: 0.2rem 1rem;

  position: relative; /* 重なり順（z-index）を有効にするために必要 */

  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box; /* paddingを含めて100%にする設定（超重要） */
    padding: 0.2rem 1rem;
    background-color: var(--blue);
    z-index: 1100;

}



.global-nav ul{
 margin-top:2rem;
     padding: 1rem 2rem;
     text-align: center;
}


.search-container {
   padding: 0;
   margin: 2rem 0 1rem 0;
    width: 100%;
}



 .card-item {
    /* 1列設定：幅を100%に */
    flex: 0 0 100%;
  }

 .art_area{
  flex-direction: column-reverse;
 }

.side-banner {
  display: flex;
  position: fixed;
  bottom: 0rem;
  right: 0;

  z-index: 910;

  opacity: 0;
  transition: opacity .5s ease-out;

  flex-direction: row-reverse; /* HTMLの順序を維持しつつ、右と左を入れ替える */
  align-items: stretch;        /* 子要素の高さを揃える（重要！） */
}

.side-banner a{
 display: block;
 width: 50%;
}

.booking {
    padding: 1rem 0;
}

a.booking {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.fv_area {
    margin-top: 1rem;
}

.content_area {
    background-size: 300%;
}

.container {
    padding: 2rem 1rem;
}

section {
    padding: 1rem 1rem 2rem 1rem;
}

.sec_h2 {
    font-size: 1.5rem;
}

.oubo .sec_p  {
    font-size: 1.25rem;
}

.kakomi_con {
    padding: 2.5rem 0.5rem 1rem;
   }

   .map {
    margin: 2rem 0;
}

.access-bg {
    width: 40px;
}

.rotate-img {
    top: 2%;
    right: 4%;
}

.swing-img {
    bottom: 1%;
   }

   section.pick {
    margin-top: 4rem;
}

.tab-buttons {
    margin-top: 2rem;
}

.shutensha {
    padding: 1rem 0.5rem;
   }

   .shu_img {
    margin-top: 1rem 0;
}

.entry_btn,
.no_entry {
    margin-top: 2rem;
}


section.accessibility {
    margin-top: 4rem;
}

/**モバイルの時は縦**/
.contact-wrapper {
    flex-direction: column;
}

}




/* --- ロケットを最前面に表示する修正 --- */

.rocket-animation,
.rocket-animation2,
.rocket-animation3,
.rocket-animation4 {
    position: absolute;
    width: 120px; /* 各ロケットの元のサイズに合わせて調整してください */
    
    /* 修正ポイント：z-indexを非常に高い値に設定 */
    /*z-index: 9999 !important; */
    
    /* 追加ポイント：クリックを無効化（下のボタンやリンクを押せるようにする） */
    pointer-events: none; 
    
    /* 補足：親要素のスタック文脈から独立させるため */
    display: block;
}

/* 親要素である .content_area の重なり順も念のため確保 */
.content_area {
    position: relative;
    z-index: 10; /* 他の背景要素よりは上に、ロケットよりは下に */
    overflow: hidden; /* はみ出したロケットを隠す */
}

/* 逆に、ロケットに隠れてほしくない「ボタン」や「メニュー」がある場合は
   それらのz-indexを10000以上に設定する必要があります */


@media (769px <= width <= 905px) {
 .font-size-buttons button {
    margin-right: 8px;
    padding: 0.4rem 0.4rem;
    cursor: pointer;
    font-size: 0.6rem;
    background: var(--blue);
}

.font-size-buttons.controls span {
    font-size: 0.7rem;
}

.tk_logo {
    font-size: 0.7rem;
    white-space: nowrap;
}

form.gsc-search-box.gsc-search-box-tools {
    margin: 0;
    max-width: 200px;
}



}