@charset "UTF-8";
/*書き換え禁止*/
* ,*::before,*::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.iks_logo_left, .iks_logo_right {display: none !important;}
#header_bot {display: none !important;}
/*書き換え禁止*/

/*ここから書いてね*/

html{scroll-behavior: smooth;}

.hamburger-fade__wrapper {
  background-color: #052f56; /*ハンバーガーメニューの背景色を変えられるよ*/
}

html, body {
  overflow-x: hidden;
}

img, svg {
  user-select: none;            /* 選択不可 */
  -webkit-user-drag: none;      /* Chrome, Safari */
  -khtml-user-drag: none;       /* 古いKonqueror */
  -moz-user-drag: none;         /* Firefox */
  -o-user-drag: none;           /* Opera古い */
  pointer-events: auto;          /* 必要ならクリックは有効に */
}

body{
  background-color:#052f56; 
  font-family: 'Zen Kurenaido',sans-serif;
}

.kerning{
  padding-left:1%;
  padding-right:1%;
}

.first-view-introduction {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
  align-items: center;     /* 縦方向中央揃え */
  gap: 5%;                 /* 要素間の横幅の間隔（％指定） */
  flex-wrap: wrap;         /* 狭い画面では折り返し */
}

.first-view{
  position:relative;
  height:256px;
  width:100%;
  background-color:#032039;
}

.first-view-1{
  position:absolute;
  width:256px;
  height:256px;
  top:0px;
  left:0%;
  z-index:2;
}


.first-view-2{
  position:absolute;  
  width:128px;
  height:128px;
  top:0px;
  left:192px;
  z-index:2;
}

.first-view-3{
  position:absolute;  
  width:128px;
  height:128px;
  top:128px;
  left:193px;
  z-index:2;
}

.first-view-wagara1{
  position:absolute;
  top:0px;
  left:131.4px;
  width:251.5px;
  height:128px;
}

.first-view-wagara2{
  position:absolute;
  bottom: 0px;
  left:128px;
  width:256px;
  height:128px;
}

.musubi-b{
  color:#c0a17b;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),  /* 白の柔らかい光 */
    0 0 12px rgba(180, 220, 255, 0.4); /* 少し青白い光を外側に */
}

.title-musubi{
  font-size:20px;
  color:#ffffff;
  writing-mode: vertical-rl; /* 縦書き（右→左） */
  text-orientation: upright; /* 文字を立てて表示 */
  top: 63px;
  position: absolute;
  right: 4px;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),  /* 白の柔らかい光 */
    0 0 12px rgba(180, 220, 255, 0.4); /* 少し青白い光を外側に */
}

.title-ya{
  font-size: 60px;
  color: #a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);
  top: -15px;
  left: 50px;
  position: absolute;
  z-index: 10;
}

.title-sai{
  font-size:60px;
  color:#ffffff;
  text-shadow: 2px 2px 0px #a73824,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  left: 5px;
  top: 40px;
}

.title-toku{
  font-size:60px;
  color:#a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  bottom: 40px;
  left: 5px;
}

.title-syu{
  font-size:60px;
  color:#a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  bottom: -8px;
  left: 50px;
}

.introduction{
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ダイヤの親 */
.introduction-diamond {
  position: relative;
  height: 205px;
  width: 205px;
  margin: 0 auto; /* 中央配置 */
  background-color: #ffffff0d;
  transform: rotate(45deg); /* ダイヤ形に */
  display: flex;
  align-items: center;
  justify-content: center;

}

/* 雲画像：ダイヤの真ん中に重ねる（背面） */
.introduction-cloud {
  position: absolute;

  transform: translate(-50%, -50%);
  width: 170%;      /* 少し余裕をもたせてダイヤ内にフィットさせる */
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform:rotate(-45deg);
}

/* テキストを回転で補正して正立に表示（前面）*/
.introduction-text {
  position: relative;   /* flexの中で中央にいる */
  z-index: 2;
  transform: rotate(-45deg); /* 親の回転を打ち消す */
  text-align: center;
  padding: 0 8px; /* 画像とぶつかるときの余白（任意） */
}

/* 本文スタイル */
.introduction-s {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 12px rgba(180, 220, 255, 0.4);
  font-size: 24px;
  text-align: center;
  white-space: nowrap; /* 折り返さない（必要なければ削除） */
}

/* ハイライト色 */
.is-c {
  color: #fad0a9;
}

/* フェードイン用（既存のアニメーション） */
.introduction-line {
  opacity: 0;
  transition: opacity 0.6s ease;
  display: inline-block;
}

.introduction-line.show {
  opacity: 1;
}

.char {
  opacity: 0;
  transform: scale(1.3);
  filter: blur(4px);
  display: inline-block;
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}

.char.show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}


.anchor-link-s{
  color:#ffffff;
  font-size:16px;
  text-align: center;
  text-decoration: none;
}

.anchor {
  display: flex;
  flex-wrap: wrap;   /* 折り返し可能にする */
  gap: 10px;         /* 要素同士の間隔を10px */
  justify-content: center; /* 中央寄せしたい場合 */
  margin: 0 auto;
}

.anchor_link{
 width:180px;
 height:30px;
 background-color:#032039;
 flex: 0 0 calc(50% - 10px); /* 横幅を2個並ぶように設定 */
 box-sizing: border-box;
 text-align: center; /* リンク文字を中央寄せ */
    padding-top: 4px;
    text-decoration: none; /* 下線を消す */
}

/*中身　共通*/
.title {
  display: inline-block;       /* 幅を文字列に合わせる */
  background-color: #052f56;  /* 背景色 */
  color: #ffffff;
  font-size: 25px;
  padding: 5px 20px;           /* 上下左右の余白 */
}

/*実施日時*/
.date {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.box-d {
  width: 306px;      /* 中のボックス本体 */
  height: 500px;
  margin:  auto;
  background: #ffffff3d;
  position: relative; /* 擬似要素を置くために必要 */
  border:2px solid #f0d7693d;
  overflow: visible; /* SVGがはみ出しても表示される */
  position:relative;
}

.date-wrap {
  display: flex;
  align-items: center;   /* 左右を縦方向中央ぞろえ */
  justify-content: center; /* 横方向中央ぞろえ（必要なら中央寄せ） */
  gap: 30px; /* 左と右の間隔 */
  position: relative; /* 子要素のabsolute対策 */
  margin-top:20px;
}

.first-d {
  width: 75px;
  height: 75px;
  transform: rotate(45deg);
  background-color: #052f564d;
  flex-shrink: 0;
  display: flex;              /* 中身を中央寄せするため */
  align-items: center;
  justify-content: center;
}

.second-d {
  width: 75px;
  height: 75px;
  transform: rotate(45deg);
  background-color: #052f5680;
  flex-shrink: 0;
  display: flex;              /* 中身を中央寄せするため */
  align-items: center;
  justify-content: center;
}

.first-d-s {
  transform: rotate(-45deg);  /* 中のテキストだけ逆回転 */
  color: #ffffff;             /* テキスト色（任意） */
  font-size: 10px;            /* 好きな大きさに調整 */
  text-align: center;
  white-space: nowrap; /* ←ここを追加 */ 
  line-height: 1.6; 
}


/* 共通設定 */
.first-d-s span {
  display: inline-block;
}

/* 「月」と「・」の間を少し詰める */
.first-d-s .mo {
  margin-right: -0.3em;
}

/* 「・」自体の前後バランスを取る */
.first-d-s .dot {
  margin-left: -0.05em;
  margin-right: -0.3em;
}

/* 「・」と「祝」の間をほんの少し広げる */
.first-d-s .hol {
  margin-left: 0.02em;
}

.decoration-wrapper {
  display: flex;
  align-items: center;      /* 上下中央ぞろえ */
  justify-content: center;  /* 横中央に配置 */
  gap: 18px;                /* 要素の間隔を18px */
  margin-top:20px;
}

.d-line {
  width: 103px;
  height: 0.5px;
  background-color: #032039;
}

.d-diamond {
  width: 18px;
  height: 18px;
  background-color: #032039;
  transform: rotate(45deg);
}


.f18px{
  font-size: 18px;
}

.f14px{
 font-size:14px;
}


.right-box {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;    /* 中央ぞろえ */
  gap: 8px; /* imgとdetailの間隔 */
}

.date-img {
  width: 137px;
  height: 87px;
}

.detail {
  width: 96px;
  height: 21px;
  background-color: #2e293080;
  border-radius: 9px;
  display: flex;
  align-items: center; /* 文字を縦中央 */
  justify-content: center; /* 文字を横中央 */
}

.detail a{
  text-decoration:none;
  color: #ffffff;
  font-size: 12px;
}

/*タイムテーブル*/
.tt {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.box-t {
  width: 306px;      /* 中のボックス本体 */
  height:auto;
  margin:  auto;
  background: #ffffff3d;
  position: relative; /* 擬似要素を置くために必要 */
  border:2px solid #f0d7693d;
  overflow: visible; /* SVGがはみ出しても表示される */
  position:relative;
}



/*コンテンツ詳細*/
.contents {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.box-c {
  width: 306px;
  /* height: 1035px; ←削除 or コメントアウト */
  height: auto;
  margin: auto;
  background: #ffffff3d;
  position: relative;
  border: 2px solid #f0d7693d;
  overflow: visible; /* はそのままでOK */
}

.groups{
  color:#ffffff;
  text-decoration: underline;
  text-decoration-color: #052f5680;   /* 下線の色 */
  text-decoration-thickness: 4px; /* 線の太さ */
  font-size:25px;
}

.kanematsu-wrapper {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;
  gap: 2px; /* ← ほぼくっつくくらいの間隔 */
  margin: 20px auto;
}

.kanematsu-diamond {
  width: 13px;
  height: 13px;
  background-color: #052f56;
  transform: rotate(45deg);
}

.kanematsu-text {
  color: #ffffff;
  font-size: 20px;
  white-space: nowrap;          /* 折り返さない */
  text-align: center;           /* 中央揃え */

}



.kanematsu-wrapper {
  display: inline-flex;       /* 幅をテキスト＋ダイヤ分に自動調整 */
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
  margin: 20px auto;          /* ページ中央 */ 
      width: 200%;
      margin-bottom: 0px;
}

.kanematsu-diamond:first-child {
  margin-right: 10px;         /* 左ダイヤとテキストの間隔 */
}

.kanematsu-diamond:last-child {
  margin-left: 10px;          /* 右ダイヤとテキストの間隔 */
}

.finale-diamond {
  width: 20px;
  height: 20px;
  background-color: #052f56;
  transform: rotate(45deg);
}

.finale-text {
  color: #ffffff;
  font-size: 20px;
}


.content-d {
  width: 84px;
  height: 84px;
  transform: rotate(45deg);
  background-color: #052f56;
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
}

/* 📸 画像：大きさ・位置そのまま（中央固定） */
/* シンプルで推奨（object-fit を使う） */
.content-img {
  width: 90px;
  height: 90px;
  display: block;
  object-fit: cover;      /* 中央を基準に拡大して枠を覆い、はみ出し部分をトリミング */
  object-position: center;/* トリミングの基準点（中央） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}


/* 🔼 団体名：画像の上端にぴったり */
.group-name {
  position: absolute;
  left: 50%;
  bottom: 50%;              /* 画像中心まで */
  margin-bottom: 45px;      /* 画像の半分の高さ分だけ上にずらす */
  transform: translateX(-50%) rotate(0deg);
  font-size: 15px;
  z-index: 2;
  display: inline-block;
  min-width: 135px;         /* ←120pxまでは1行で広がる */
  max-width: 120px;         /* ←超えたら折り返す */
  white-space: normal;      /* 折り返し許可 */
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}

/* 🔽 ステージ名：画像の下端にぴったり */
.stage-name {
  position: absolute;
  left: 50%;
  top: 50%;                 /* 画像中心まで */
  margin-top: 48px;         /* 画像の半分の高さ分だけ下にずらす */
  transform: translateX(-50%) rotate(0deg);
  font-size: 14px;
  z-index: 2;
  display: inline-block;
  min-width: 160px;
  max-width: 120px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}



.diamond-wrapper {
  display: flex;
  gap: 65px;          /* diamond 同士の間隔 */
  justify-content: center; /* 横方向中央揃え */
  align-items: center;     /* 高さ中央揃え */
  flex-wrap: wrap;         /* 画面幅に応じて折り返す場合 */
  margin-top:60px;
  margin-bottom:95px;
}

 /*モーダル*/
/* モーダルを開くボタン */
.modal-open{
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 60px;
  color: #fff;
  background: #000;
  border: none;
  cursor: pointer;
  translate: -50% -50%;
}

/* モーダルと背景の指定 */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 9999; /* ←これを追加！最前面に固定 */
}

/* モーダルの擬似要素の指定 */
.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

/* モーダル内側の指定 */
.modal-container{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  width: 90%;
  height:175px;
  background-color:#c9d1d6;
}

/* モーダルを閉じるボタンの指定 */
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #052f56;
  border-radius: 50%;
  cursor: pointer;
  z-index:50;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content{
  background: #c9d1d6;
  text-align: left;
  line-height: 1.8;
  padding: 20px;
  position:relative;
  text-align:center;
}

/* モーダルのコンテンツ部分のテキストの指定 */


.modal-wagara {
    bottom: 0px;
    right: 0px;
    width: 90px;
    height: 180px;
    position: absolute;
    opacity: 0.7;
}

.modal-stagename {
  color: #000;
  font-size: 24px;
  background-image: linear-gradient(#052f5680 0 0);
  background-position: 0 88%;
  background-repeat: no-repeat;
  background-size: 100% 4px;
  line-height: 1.4;
  display: inline;
}

.modal-groupname{
 color:#000000;
 font-size:18px;
 text-align:center;
 display: block;          /* pタグでも確実にmarginが効くように */
 margin-bottom:5px;
}
.modal-about{
 color:#000000;
 font-size:12px;
 text-align:justify;
}

.pv-d {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  flex-direction: column;  /* 縦並び */
  width: 200px;            
  height: 200px;
  background-color: #052f5680;
  transform: rotate(45deg);
  margin: 50px auto;
  flex-direction: column;  /* 縦並びに変更 */
  margin-bottom:80px;
  margin-top: 75px;
}

.finalepv {
  display: none;
}

.finalepv {
  width: 140%;            /* ← 枠より少し大きく */
  padding-bottom: 78.75%; /* ← 縦横比維持（16:9 × 1.4） */
  position: relative;
  transform: rotate(-45deg); /* 親の回転を打ち消す */
}

.finalepv {
  display: none;
}

.comingsoon{
  transform: rotate(-45deg);
  font-size:16px;
  justify-content:center;
  text-align:center;
  color:#ffffff;
}

.finalepv iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;  /* finalepv 内でサイズ固定 */
  top: 0;
  left: 0;
}

.finalepv-s {
  display: block !important;         /* 非表示を上書きして必ず表示 */
  visibility: visible !important;    /* 見える状態を強制 */
  opacity: 1 !important;             /* 透明にならないようにする */
  position: relative;                /* 他要素の下に隠れないように調整可 */
  z-index: 10;                       /* 前面に出す */

  color: #ffffff;
  font-size: 20px;
  text-align: center;
  margin-top: -30px;
}


/*神輿レース*/
.race {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.f8px{
  font-size:10px;
}

.box-r {
  width: 306px;      /* 中のボックス本体 */
  height:auto;
  margin:  auto;
  background: #ffffff3d;
  position: relative; /* 擬似要素を置くために必要 */
  border:2px solid #f0d7693d;
  overflow: visible; /* SVGがはみ出しても表示される */
  position:relative;
  margin-bottom:90px;
}

/*タブ全体*/
.tab {
  display: flex;
  font-weight: 500;
  font-size: 14px;
  justify-content: center; /* 横方向中央 */
  align-items: stretch;    /* 高さを揃える */
  margin-top: 10px;
  width: 285px;
  height: 23px; /* 高さを固定したいならここで */
  border-collapse: collapse; /* くっつけ効果 */
  margin: 10px auto; /* ←これで中央寄せ */
}

/*タブ項目（li）*/
.tab li {
  list-style-type: none;
  flex: 1; /* ←均等に幅を割り当て */
  margin: 0; /* ←間隔をなくす */
  padding: 0;
}

/* タブ */
.tab li a {
  display: flex;
  text-align: center;
  background-color: #032039;
  color:#ffffff;
  text-decoration: none;
  padding: 5px;
  transition: 0.3s;
  height:22px;
  justify-content: center;   /* 横方向中央 */
  align-items: center;       /* 縦方向中央 */
}

/* タブが選ばれたときの見た目 */
.tab li a.active {
  background-color: #f0d76980; /* 背景色 */
  color: #ffffff;              /* 文字色 */
}

/* コンテンツエリア */
.area {
  display: none;       /* 非表示 */
  position: relative;
}

.area.active {
  display: block;      /* アクティブのときだけ表示 */
}


@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.time-wrapper {
  display: flex;              /* 子要素を横並び */
  justify-content: center;    /* 子要素を中央寄せ */
  margin: 0 auto;             /* 親divを画面中央に */
  width: fit-content;         /* 子要素分の幅に自動調整 */
  align-items: center;         /* 縦方向中央 ←追加！ */
  gap:15px;
  margin-bottom:20px;
}

.time{
  font-size:10px;
  color:#f0d769
}

.time-line{
  background-color: #f0d769;
  width:234px;
  height:1px;
}

.festival-name-front{
  font-size:14px;
  color:#f0d769;
}

.festival-name-auditorium{
  font-size:14px;
  color:#f0d769;
}

.festival-name-auditorium-f{
  font-size:14px;
  color:#f0d769;
  margin-left: 30%;
}

.festival-name-wrapper{
  display: flex;
  gap: 51px;
  margin-left: 50px;
  margin-bottom: 10px;
}

.f10px{
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  margin-top: 0px;
}

.f9px{
  font-size:9px;
  color:#f0d769;
}

.f9px-w{
  font-size:9px;
  color:#ffffff;
}


.flex_content{
  display:flex;
  flex-direction:row;
}


.place_special{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-right:10px;
  margin-left:40px;
}


.kanematu{
  font-size:15px;
}


.place_first{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-left:10px;
  margin-right:20px;
}


.kanematu_stage{
  font-size:15px;
}


.place_second1{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-right:10px;
  margin-left:40px;
}


.place_second2{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-left:10px;
  margin-right:20px;
}


.kanematu_stage{
  font-size:15px;
}


.place_finale{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}


.kanematu_stage{
  font-size:15px;
}
.contents_title{
  color:#f0d769;
  font-size:20px;
  margin-bottom:20px;
  display:block;
  position:relative;
}


.wrap{
  display:flex;
  width:100%;
  margin-bottom:20px;
}

.wrap-f{
  display:flex;
  width:100%;
  margin-bottom:20px;
}


.timename{
  color:#f0d769;
  margin-left:30%;
}


.timepoint {
  font-size: 12px;
  display: grid;
  grid-template-rows: repeat(40, 13px);
  margin-right: 3%;
  margin-top: 31px;
}

.timepoint-f {
  font-size: 12px;
  display: grid;
  grid-template-rows: repeat(40, 13px);
  margin-right: 3%;
  margin-top: 31px;
}



.timepoint_finale{
  margin-left:10%;
}


#line00 {
  grid-row-start: 1;
}


#line01 {
  grid-row-start: calc(1 + 12* 1);
}


#line02 {
  grid-row-start: calc(1 + 12* 2);
}


#line03 {
  grid-row-start: calc(1 + 12* 3);
}


.contents_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: repeat(40, 13px);
}


.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  margin-top: 40px;
}


.flex {
  display: flex;
  justify-content: space-between;
  width: 200%;
}


.flex.dayone {
  width: 150%;
  margin-top:40px;
  margin-right:5%;
}


.flex.dayone.daythree{
  margin-right:0%;
}


.stage {
  width: 50%;
}


.stage_finale{
  width:75%;
}


.timeline{
  border-top:1px solid #f0d769;
  grid-column:1/4;
}


.item {
  background-color: #041f3cE6;
  border: 1px solid var(--themelightblue);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  grid-column-start: 2;
  padding: 3%;
}


.event_time{
  font-size:10px;
  color:#ffffff;
  align-self: flex-start;
}

.one-flash {
  position: relative;
  top: -5px; /* 上に5px移動 */
}



.event_name{
  font-size:11px;
  color:#ffffff;
  text-wrap:nowrap;
}


.mogikon{
  font-size:10px;
}


.event_by{
  font-size:8px;
  color:#f0d769;
  align-self: flex-end;
}


/* FINALEだけ中央寄せにする */
.finale .flex {
  justify-content: center; /* 横中央寄せ */
}

/* ステージの幅も調整したい場合（お好みで） */
.finale .stage {
  width: 60%; /* 50〜70%ぐらいで自然に見える */
  margin: 0 auto;
}

.finalewrapper{
  display: flex;
  gap:0px;
}

.race-d{
    position: relative;
    height: 205px;
    width: 205px;
    margin: 0 auto;
    background-color: #052f56;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ひし形：高さが正確に11pxになるように計算 */
.race-join-text {
  display: inline-flex;
  align-items: center; /* 縦位置を揃える */
  gap: 6px; /* ひし形と文字の間隔（調整可） */
  font-family: "Zen Kurenaido", sans-serif;
  white-space: nowrap; /* 改行防止 */
  margin-top:20px;
}

/* ひし形：高さが正確に11pxになるように計算 */
.race-diamond {
  width: 7.78px;           /* 11 / √2 ≒ 7.78 */
  height: 7.78px;
  background: #052f56;
  transform: rotate(45deg);
  transform-origin: center;
  display: inline-block;
}

/* テキストも高さ11pxに合わせる */
.race-label {
  font-size: 11px;
  line-height: 11px;
  color: #ffffff;

}



.race-s {
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  white-space: nowrap; /* 折り返さない */
  transform: rotate(-45deg);
}

.race-i{
  margin-top:90px;
  margin-bottom:90px;
}

.f20px{
  font-size:20px;
  color:#FFD68B;
}

.mikoshi{
  height: 65px;
  width: 86px;
  position: absolute;
  top: 280px;
  right: 15px;
}

.cloud{
  height: 50px;
  width: 113px;
  position: absolute;
  top: 300px;
  left: 0px;
}

.rain{
  font-size:11px;
  color:#ffffff;
  text-align:center;
}

.detail-wrapper{
  display:flex;
  gap:20px;
  justify-content: center;
  margin-top:10px;
  margin-bottom:40px;
}

.detail-r {
    width: 120px;
    height: 25px;
    background-color: #2e293080;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-r a{
  text-decoration:none;
  color: #ffffff;
  font-size: 12px;
}

.LINE{
  font-size:7px;
  position:absolute;
  right:10px;
  margin-top:25px;
  margin-bottom:30px;
  color:#ffffff;
}

.pagetop-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 35px;
  height: 35px;
  background-color: #032039;
  transform: rotate(45deg); /* ひし形 */
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4),
              0 0 20px rgba(255, 255, 255, 0.2);
}

/* 文字だけ傾きを打ち消す */
.pagetop-btn span {
  display: inline-block;
  transform: rotate(-45deg); /* 文字を水平に戻す */
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8),
               0 0 8px rgba(255, 255, 255, 0.6),
               0 0 12px rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
    margin-right: 3px;
}

/* ホバー効果 */
.pagetop-btn:hover {
  background-color: #06376a;
  transform: rotate(45deg) scale(1.1); /* ボタンは拡大 */
}

/* 全体スクロールバー */
::-webkit-scrollbar {
    width: 12px;
}

/* トラック（背景） */
::-webkit-scrollbar-track {
    background: #032039;   /* ページの背景に合わせる */
    border-radius: 6px;
}

/* サム（つまみ） */
::-webkit-scrollbar-thumb {
    background: #4a6572;   /* 落ち着いたグレー青系 */
    border-radius: 6px;
    border: 3px solid #032039; /* トラックと間隔を作る */
}

/* サムをホバーした時 */
::-webkit-scrollbar-thumb:hover {
    background: #7a92a0;   /* 少し明るめにして視認性確保 */
}




/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/







/*PC版*/
@media screen and (min-width:1024px){
  /*書き換え禁止*/
header {position: absolute;}
.hamburger-fade {display: none;}
main {padding-top: 65px;}
  /*書き換え禁止*/


  /*ここから書いてね*/
.first-view {
  position: relative;
  height: 40vw;                    /* 縦幅を40vwに固定 */
  width: calc(40vw * 375 / 256);   /* 縦幅に合わせて横幅を比率通りに調整 */
  background-color: #032039;
  left:0%;
}

img, svg {
  user-select: none;            /* 選択不可 */
  -webkit-user-drag: none;      /* Chrome, Safari */
  -khtml-user-drag: none;       /* 古いKonqueror */
  -moz-user-drag: none;         /* Firefox */
  -o-user-drag: none;           /* Opera古い */
  pointer-events: auto;          /* 必要ならクリックは有効に */
}

.first-view-introduction {
  display: flex;
  justify-content: flex-start;
  align-items: center;     /* 縦方向中央揃え */
  gap: 5%;                 /* 要素間の横幅の間隔（％指定） */
  flex-wrap: wrap;         /* 狭い画面では折り返し */
  background-color:#032039;
}


.first-view-1{
  position: absolute;    
  width: 68%;
  height: 100%;
  top: 0px;
  left: 0%;
  z-index: 2;
}

.first-view-2{
  position: absolute;
  width: 34.5%;
  height: 50%;
  top: 0px;
  left: 50.65%;
  z-index: 2;
}

.first-view-3{
  position: absolute;
  width: 34.5%;
  height: 50%;
  top: 50%;
  left: 51.2%;
  z-index: 2;
}

.first-view-wagara1{
  position:absolute;
  top:0px;
  left: 34.2%;
  height: 50%;
  width:68%;
}

.first-view-wagara2{
  position: absolute;
  bottom: 0px;
  left: 34%;
  height: 50%;
  width:68%;
}

.musubi-b{
  color:#c0a17b;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),  /* 白の柔らかい光 */
    0 0 12px rgba(180, 220, 255, 0.4); /* 少し青白い光を外側に */
}

.title-musubi{
  font-size: 3vw;
  color: #ffffff;
  writing-mode: vertical-rl;
  text-orientation: upright;
  top: 18%;
  position: absolute;
  right: 0%;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 12px rgba(180, 220, 255, 0.4);
}

.title-ya{
  font-size: 8vw;
  color: #a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);
  top: -5%;
  left: 13%;
  position: absolute;
  z-index: 10;
}

.title-sai{
  font-size:8vw;
  color:#ffffff;
  text-shadow: 2px 2px 0px #a73824,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  left: 2%;
  top: 14%;
}

.title-toku{
  font-size:8vw;
  color:#a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  bottom: 16%;
  left: 2%;
}

.title-syu{
  font-size:8vw;
  color:#a73824;
  text-shadow: 2px 2px 0px #ffffff,0 0 6px rgba(255, 255, 255, 0.7),0 0 12px rgba(174, 224, 255, 0.4),0 0 20px rgba(174, 224, 255, 0.2);  
  z-index: 10;
  position: absolute;
  bottom: -2%;
  left: 14%;
}




.introduction-s {
  color: #ffffff;
  font-size: 2.4vw;
  text-align: center;
  white-space: nowrap; /* 折り返さない */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 12px rgba(180, 220, 255, 0.4);
}


.introduction-diamond {
  position: relative;
  height: 20vw;
  width: 20vw;
  margin: 0 auto;
  background-color: #ffffff0d;
  transform: rotate(45deg);
  margin-right: -30%;
}

.introduction-text,
.introduction-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.introduction-text {
  transform: translate(-50%, -50%) rotate(-45deg); /* 中の文字を元に戻す */
  text-align: center;
  z-index: 2; /* 前面 */
}

.introduction-cloud {
  width: 41vw;
  height: auto;
  z-index: 1;
  opacity: 0.8;
  transform: translate(-50%, -50%) rotate(-45deg);
}


.is-c{
  color:#fad0a9;
}

.introduction-line {
  opacity: 0;
  transition: opacity 0.6s ease;
  display: inline-block;
}

.introduction-line.show {
  opacity: 1;
}

.char {
  opacity: 0;
  transform: scale(1.3);
  filter: blur(4px);
  display: inline-block;
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}

.char.show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}


.anchor {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  gap: 10px;               /* ボタンの間隔 */
  margin: 0 auto;
  flex-wrap: nowrap;       /* 折り返さない */
  width: 100%;             /* 横幅を明示的に指定 */
  overflow-x: auto;        /* はみ出してもスクロール可能（保険） */
  margin-top:30px;
  padding-left: 20px;
        padding-right: 20px;
}

.anchor_link {
  flex: 1;                 /* 均等幅で4つ並ぶ */
  width: 200%;        /* 幅が広すぎないように制限（任意） */
  height: 40px;
  background-color: #032039;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;  text-decoration: none; /* 下線を消す */
}

.anchor_link:hover {
  background-color: #052f564d; /* ホバー時の背景色 */
  color: #2e2930;           /* 文字色を反転など */
  transition: 0.3s;         /* スムーズに変化させる（任意） */
}

.anchor-link-s {
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
}



/*中身　共通*/
.title {
  display: inline-block;       /* 幅を文字列に合わせる */
  background-color: #052f56;  /* 背景色 */
  color: #ffffff;
  font-size: 36px;
  padding: 5px 20px;           /* 上下左右の余白 */
}

.date {
   margin-top: 60px; text-align: center; /* タイトルとボックスを中央寄せ */ }

/* --- 全体横並び --- */
.box-d {
  width:80%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 各ブロックの間隔 */
  flex-wrap: nowrap; /* 横並び固定 */
  margin: 0 auto;
  background: #ffffff3d;
  border: 2px solid #f0d7693d;
}

/* --- 各date-wrap（縦方向に並ぶ）--- */
.date-wrap {
  display: flex;
  flex-direction: column; /* 中身を縦に並べる */
  align-items: center;
  justify-content: center;
  gap: 10px; /* 要素間の間隔 */
}

/* 中夜祭（2番目）の並び順を変更 */
.date-wrap:nth-of-type(3) .date-img {
  order: 1; /* 一番上 */
}

.date-wrap:nth-of-type(3) .second-d {
  order: 2; /* 真ん中 */
}

.date-wrap:nth-of-type(3) .detail {
  order: 3; /* 一番下 */
}

/* 中夜祭（2番目）の .right-box のスタイルをリセット */
.date-wrap:nth-of-type(3) .right-box {
  all: unset; /* すべてのCSS指定を無効化（リセット） */
  display: contents; /* 要素の親としてのレイアウトのみ維持 */
}


/* --- decoration-wrapper（縦方向の線とひし形）--- */
.decoration-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* 縦線とひし形 */
.d-line {
  width: 2px;
  height: 135px;
  background-color: #032039;
}

.d-diamond {
  width: 30px;
  height: 30px;
  background-color: #032039;
  transform: rotate(45deg);
}

/* --- ダイヤの中の文字ブロック --- */
.first-d, .second-d {
  width: 150px;
  height: 150px;
  transform: rotate(45deg);
  background-color: #052f564d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 25px;  
}

.second-d {
  background-color: #052f5680;
}

/* テキスト（元のスタイル維持） */
.first-d-s {
  transform: rotate(-45deg);
  color: #ffffff;
  font-size: 21px;
  text-align: center;
  white-space: nowrap;
}

/* 画像 */
.date-img {
  width: 190px;
  height: 120px;
}

/* 詳細ボタン */
.detail {
  width: 120px;
  height: 30px;
  background-color: #2e293080;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.detail:hover {
  background-color: #052f56; /* ホバー時の背景色 */
  color: #2e2930;           /* 文字色を反転など */
  transition: 0.3s;         /* スムーズに変化させる（任意） */
}

.detail a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
}

/* フォントサイズ補助 */
.f18px { font-size: 29px; }
.f14px { font-size: 25px; }



/*タイムテーブル*/
.tt {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.box-t {
  width: 80%;      /* 中のボックス本体 */
  height:auto;
  margin:  auto;
  background: #ffffff3d;
  position: relative; /* 擬似要素を置くために必要 */
  border:2px solid #f0d7693d;
  overflow: visible; /* SVGがはみ出しても表示される */
  position:relative;
}



/*コンテンツ詳細*/
.contents {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}

.box-c {
  width: 80%;
  /* height: 1035px; ←削除 or コメントアウト */
  height: auto;
  margin: auto;
  background: #ffffff3d;
  position: relative;
  border: 2px solid #f0d7693d;
  overflow: visible; /* はそのままでOK */
}

.groups{
  color:#ffffff;
  text-decoration: underline;
  text-decoration-color: #052f5680;   /* 下線の色 */
  text-decoration-thickness: 4px; /* 線の太さ */
  font-size:41px;
}

.f10px{
  font-size: 20px;
  text-align: center;
  color: #ffffff;
  margin-top: 0px;
margin-bottom: 13px;
}

.kanematsu-wrapper {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;
  gap: 2px; /* ← ほぼくっつくくらいの間隔 */
  margin: 20px auto;
}

.kanematsu-diamond {
  width: 20px;
  height: 20px;
  background-color: #052f56;
  transform: rotate(45deg);
}

.kanematsu-text {
  color: #ffffff;
  font-size: 31px;
  white-space: nowrap;          /* 折り返さない */
  text-align: center;           /* 中央揃え */

}



.kanematsu-wrapper {
  display: inline-flex;       /* 幅をテキスト＋ダイヤ分に自動調整 */
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
  margin: 20px auto;          /* ページ中央 */
      width: 200%;
}

.kanematsu-diamond:first-child {
  margin-right: 10px;         /* 左ダイヤとテキストの間隔 */
}

.kanematsu-diamond:last-child {
  margin-left: 10px;          /* 右ダイヤとテキストの間隔 */
}

.finale-diamond {
  width: 20px;
  height: 20px;
  background-color: #052f56;
  transform: rotate(45deg);
}

.finale-text {
  color: #ffffff;
  font-size: 20px;
}


.content-d {
  width: 160px;
  height: 160px;
  transform: rotate(45deg);
  background-color: #052f56;
  position: relative;
  cursor: pointer;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
}

/* 📸 画像：大きさ・位置そのまま（中央固定） */
/* シンプルで推奨（object-fit を使う） */
.content-img {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: cover;      /* 枠いっぱいにトリミング */
  object-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease; /* ← 通常状態に書く */
}

.content-img:hover {
  transform: translate(-50%, -50%) scale(1.05); /* 少し拡大 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);    /* 影（任意） */
}



/* 🔼 団体名：画像の上端にぴったり */
.group-name {
  position: absolute;
  left: 50%;
  bottom: 70%;              /* 画像中心まで */
  margin-bottom: 45px;      /* 画像の半分の高さ分だけ上にずらす */
  transform: translateX(-50%) rotate(0deg);
  font-size: 26px;
  z-index: 2;
  display: inline-block;
  min-width: 235px;
  max-width: 160px;         /* ←超えたら折り返す */
  white-space: normal;      /* 折り返し許可 */
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}

/* 🔽 ステージ名：画像の下端にぴったり */
.stage-name {
  position: absolute;
  left: 50%;
  top: 70%;                 /* 画像中心まで */
  margin-top: 45px;         /* 画像の半分の高さ分だけ下にずらす */
  transform: translateX(-50%) rotate(0deg);
  font-size: 25px;
  z-index: 2;
  display: inline-block;
  min-width: 230px;
  max-width: 120px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.2;
}

.diamond-wrapper{
  gap:100px;
  margin-bottom: 70px;
}

.res {
  display: flex;
  flex-wrap: wrap;          /* 折り返し許可 */
  justify-content: center;  /* 横中央揃え */
  align-items: center;      /* 縦中央揃え */
  gap: 100px;                /* diamond 同士の間隔 */
  margin-top: 10px;
  margin-bottom: 20px;
}

/* 中の diamond 要素（例：.res > .diamond） */
.res > .diamond {
  flex: 0 1 calc(33.333% - 43.333px); /* 横幅33% - gap半分を引く */
  max-width: 300px;                    /* 任意：最大幅調整 */
}

 /*モーダル*/
/* モーダルを開くボタン */
.modal-open{
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 60px;
  color: #fff;
  background: #000;
  border: none;
  cursor: pointer;
  translate: -50% -50%;
}

/* モーダルと背景の指定 */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 9999; /* ←これを追加！最前面に固定 */
}

/* モーダルの擬似要素の指定 */
.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

/* モーダル内側の指定 */
.modal-container{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  width: 90%;
  height:175px;
  background-color:#c9d1d6;
}

/* モーダルを閉じるボタンの指定 */
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #052f56;
  border-radius: 50%;
  cursor: pointer;
  z-index:50;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content{
  background: #c9d1d6;
  text-align: left;
  line-height: 1.8;
  padding: 20px;
  position:relative;
  text-align:center;
}

/* モーダルのコンテンツ部分のテキストの指定 */


.modal-wagara {
    bottom: 0px;
    right: 0px;
    width: 90px;
    height: 180px;
    position: absolute;
    opacity: 0.7;
}

.modal-stagename {
  color: #000;
  font-size: 28px;
  background-image: linear-gradient(#052f5680 0 0);
  background-position: 0 88%;
  background-repeat: no-repeat;
  background-size: 100% 4px;
  line-height: 1.4;
  display: inline;
}

.modal-groupname{
 color:#000000;
 font-size:22px;
 text-align:center;
 display: block;          /* pタグでも確実にmarginが効くように */
 margin-bottom:5px;
}
.modal-about{
 color:#000000;
 font-size:16px;
 text-align:justify;
}

.pv-d {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  flex-direction: column;  /* 縦並び */
  width: 280px;            
  height: 280px;
  background-color: #052f5680;
  transform: rotate(45deg);
  margin: 50px auto;
  margin-bottom: 75px;
  margin-top: 80px;
}

.finalepv {
  width: 140%;            /* 枠より少し大きく */
  padding-bottom: 78.75%; /* 縦横比維持（16:9 × 1.4） */
  position: relative;
  transform: rotate(-45deg); /* 親の回転を打ち消す */
}

.finalepv iframe {
  display: none; /* ←動画だけ非表示 */
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;  /* finalepv 内でサイズ固定 */
  top: 0;
  left: 0;
}

.finalepv-s {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff;
  font-size: 31px;
  text-align: center;
  margin-top: -45px;
  position: relative;
  z-index: 10; /* 前面に出す */
}


.comingsoon {
  transform: rotate(-45deg);
  font-size: 24px;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}


/*神輿レース*/
.race {
  margin-top: 60px;
  text-align: center; /* タイトルとボックスを中央寄せ */
}


.box-r {
  width: 80%;      /* 中のボックス本体 */
  height:auto;
  gap:10%;
  margin:  auto;
  background: #ffffff3d;
  position: relative; /* 擬似要素を置くために必要 */
  border:2px solid #f0d7693d;
  overflow: visible; /* SVGがはみ出しても表示される */
  position:relative;
  margin-bottom:90px;
  display: flex;
    align-items: center;     /* 上下中央揃え */
    justify-content:center;
}

/*タブ全体*/
.tab {
  display: flex;
  font-weight: 500;
  font-size: 25px;
  justify-content: center; /* 横方向中央 */
  align-items: stretch;    /* 高さを揃える */
  margin-top: 10px;
  width: 75%;
  height: 60px; /* 高さを固定したいならここで */
  border-collapse: collapse; /* くっつけ効果 */
  margin: 10px auto; /* ←これで中央寄せ */
}

/*タブ項目（li）*/
.tab li {
  list-style-type: none;
  flex: 1; /* ←均等に幅を割り当て */
  margin: 0; /* ←間隔をなくす */
  padding: 0;
}

/* タブ */
.tab li a {
  display: flex;
  text-align: center;
  background-color: #032039;
  color:#ffffff;
  text-decoration: none;
  padding: 5px;
  transition: 0.3s;
  height:40px;
  justify-content: center;   /* 横方向中央 */
  align-items: center;       /* 縦方向中央 */
}

.tab li a:hover {
  opacity: 0.6;
  background-color: #052f56;
}

/* タブが選ばれたときの見た目 */
.tab li a.active {
  background-color: #f0d76980; /* 背景色 */
  color: #ffffff;              /* 文字色 */
}

/* コンテンツエリア */
.area {
  display: none;       /* 非表示 */
  position: relative;
}

.area.active {
  display: block;      /* アクティブのときだけ表示 */
}


@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.time-wrapper {
  display: flex;              /* 子要素を横並び */
  justify-content: center;    /* 子要素を中央寄せ */
  margin: 0 auto;             /* 親divを画面中央に */
  width: fit-content;         /* 子要素分の幅に自動調整 */
  align-items: center;         /* 縦方向中央 ←追加！ */
  gap:15px;
  margin-bottom:20px;
}

.time{
  font-size:10px;
  color:#f0d769
}

.time-line{
  background-color: #f0d769;
  width:234px;
  height:1px;
}

.festival-name-wrapper {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;     /* 縦中央寄せ */
  gap: 51px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.festival-name-front,
.festival-name-auditorium {
  font-size: 23px;
  color: #f0d769;
  width: auto; /* ← 50%を削除 */
  text-align: center;
margin-left: 13%;
        margin-right: 15%;
}

.festival-name-auditorium-f {
  font-size: 23px;
  color: #f0d769;
  width: auto; /* ← 50%を削除 */
  text-align: center;
margin-left: 13%;
        margin-right: 13%;
}

.f9px{
  font-size:15px;
  color:#f0d769;
}

.f9px-w{
  font-size:20px;
  color:#ffffff;
}

.flex_content{
  display:flex;
  flex-direction:row;
}


.place_special{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-right:10px;
  margin-left:40px;
}


.kanematu{
  font-size:15px;
}


.place_first{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-left:10px;
  margin-right:20px;
}


.kanematu_stage{
  font-size:15px;
}


.place_second1{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-right:10px;
  margin-left:40px;
}


.place_second2{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width:50%;
  text-align:center;
  margin-left:10px;
  margin-right:20px;
}


.kanematu_stage{
  font-size:15px;
}


.place_finale{
  color:#f0d769;
  font-size:10px;
  height:40px;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}


.kanematu_stage{
  font-size:15px;
}
.contents_title{
  color:#f0d769;
  font-size:20px;
  margin-bottom:20px;
  display:block;
  position:relative;
}


.wrap{
  display:flex;
  width:100%;
}

.timepoint-f {
font-size: 24px;
        display: grid;
        grid-template-rows: repeat(49, 24px);
margin-right: -18%;
        margin-top: 31px;
}

.wrap-f{
  display:flex;
  width:100%;
  margin-bottom:20px;
  margin-left: 20%;
}


.timename{
  color:#f0d769;
  margin-left:30%;
}


.timepoint {
font-size: 24px;
        display: grid
;
        grid-template-rows: repeat(49, 24px);
        margin-right: 3%;
        margin-top: 31px;
}


.timepoint_finale{
  margin-left:10%;
}


#line00 {
  grid-row-start: 1;
}


#line01 {
  grid-row-start: calc(1 + 12* 1);
}


#line02 {
  grid-row-start: calc(1 + 12* 2);
}


#line03 {
  grid-row-start: calc(1 + 12* 3);
}


.contents_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: repeat(40,24px);
}


.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  margin-top: 40px;
}


.flex {
  display: flex;
  justify-content: space-between;
  width: 200%;
}


.flex.dayone {
  width: 150%;
  margin-top:40px;
  margin-right:5%;
}


.flex.dayone.daythree{
  margin-right:0%;
}


.stage {
  width: 50%;
}


.stage_finale{
  width:75%;
}


.timeline{
  border-top:1px solid #f0d769;
  grid-column:1/4;
}


.item {
  background-color: #041f3cE6;
  border: 1px solid var(--themelightblue);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  grid-column-start: 2;
  padding: 3%;
}


.event_time{
  font-size:18px;
  color:#ffffff;
  align-self: flex-start;
}

.one-flash {
  position: relative;
  top: -5px; /* 上に5px移動 */
}



.event_name{
  font-size:20px;
  color:#ffffff;
  text-wrap:nowrap;
}


.mogikon{
  font-size:10px;
}


.event_by{
  font-size:8px;
  color:#f0d769;
  align-self: flex-end;
}


/* FINALEだけ中央寄せにする */
.finale .flex {
  justify-content: center; /* 横中央寄せ */
}

/* ステージの幅も調整したい場合（お好みで） */
.finale .stage {
  width: 60%; /* 50〜70%ぐらいで自然に見える */
  margin: 0 auto;
}

.finalewrapper{
  display: flex;
  gap:0px;
}

.race-d{
    position: relative;
    height: 300px;
    width: 300px;
    margin: 0 auto;
    background-color: #052f56;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ひし形：高さが正確に11pxになるように計算 */
.race-join-text {
  display: inline-flex;
  align-items: center; /* 縦位置を揃える */
  gap: 6px; /* ひし形と文字の間隔（調整可） */
  font-family: "Zen Kurenaido", sans-serif;
  white-space: nowrap; /* 改行防止 */
  margin-top:35px;
}

/* ひし形：高さが正確に11pxになるように計算 */
.race-diamond {
  width: 15.78px;           /* 11 / √2 ≒ 7.78 */
  height: 15.78px;
  background: #052f56;
  transform: rotate(45deg);
  transform-origin: center;
  display: inline-block;
}

/* テキストも高さ11pxに合わせる */
.race-label {
  font-size: 18px;
  line-height: 18px;
  color: #ffffff;

}



.race-s {
  color: #ffffff;
  font-size: 25px;
  text-align: center;
  white-space: nowrap; /* 折り返さない */
  transform: rotate(-45deg);
}

.race-i{
  margin-top:90px;
  margin-bottom:90px;
  position:relative;
  margin-left: 10%;
}

.f20px{
  font-size:31px;
  color:#FFD68B;
}

.mikoshi{
  height: 80px;
  width: 100px;
  position: absolute;
        top: 90%;
        right: -20%;
}

.cloud{
height: 60px;
        width: 125px;
  position: absolute;
top: 96%;
        left: -20%;
}

.rain{
  font-size:22px;
  color:#ffffff;
  text-align:center;
}

.detail-wrapper{
  display:flex;
  gap:20px;
  justify-content: center;
  margin-top:15px;
  margin-bottom:40px;
}

.detail-r {
    width: 170px;
    height: 55px;
  background-color: #2e293080;
  border-radius: 20px;
  display: flex;
  align-items: center; /* 文字を縦中央 */
  justify-content: center; /* 文字を横中央 */
  cursor: pointer;
  padding-left:6px;
  padding-right:6px;
}

.detail-r a{
  text-decoration:none;
  color: #ffffff;
  font-size: 18px;
}

.detail-r:hover {
  background-color: #052f56; /* ホバー時の背景色 */
  color: #2e2930;           /* 文字色を反転など */
  transition: 0.3s;         /* スムーズに変化させる（任意） */
}

.LINE{
  font-size:17px;
   text-align: center; /* 左右中央寄せに修正 */
  margin:65px auto; 
  color:#ffffff;
}

.res_race{
    display: flex;
  justify-content: center;
  align-items: center;
   flex-direction: column;     /* 中の要素を縦に並べる */
}

.f8px{
  font-size:13px;
}


.pagetop-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  background-color: #032039;
  transform: rotate(45deg); /* ひし形 */
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4),
              0 0 20px rgba(255, 255, 255, 0.2);
}

/* 文字だけ傾きを打ち消す */
.pagetop-btn span {
  display: inline-block;
  transform: rotate(-45deg); /* 文字を水平に戻す */
  color: #ffffff;
  font-size: 24px;
  text-decoration: none;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8),
               0 0 8px rgba(255, 255, 255, 0.6),
               0 0 12px rgba(255, 255, 255, 0.4);
  margin-bottom: 5px;
  margin-right: 5px;
}

/* ホバー効果 */
.pagetop-btn:hover {
  background-color: #06376a;
  transform: rotate(45deg) scale(1.1); /* ボタンは拡大 */
}

/* 全体スクロールバー */
::-webkit-scrollbar {
    width: 12px;
}

/* トラック（背景） */
::-webkit-scrollbar-track {
    background: #032039;   /* ページの背景に合わせる */
    border-radius: 6px;
}

/* サム（つまみ） */
::-webkit-scrollbar-thumb {
    background: #4a6572;   /* 落ち着いたグレー青系 */
    border-radius: 6px;
    border: 3px solid #032039; /* トラックと間隔を作る */
}

/* サムをホバーした時 */
::-webkit-scrollbar-thumb:hover {
    background: #7a92a0;   /* 少し明るめにして視認性確保 */
}


html{scroll-behavior: smooth;}



/* 共通設定 */
.first-d-s span {
  display: inline-block;
}

/* 「月」と「・」の間を少し詰める */
.first-d-s .mo {
  margin-right: -0.3em;
}

/* 「・」自体の前後バランスを取る */
.first-d-s .dot {
  margin-left: -0.05em;
  margin-right: -0.3em;
}

/* 「・」と「祝」の間をほんの少し広げる */
.first-d-s .hol {
  margin-left: 0.02em;
}

}