@charset "utf-8";

/*
DESIGN TOKENS (:root)
===========================================
配色・フォント・角丸・影はここで一括管理する。
個別CSSでは var(--xxx) を参照し、生のhex/px値を直接書かないこと。
対象: base.css / page-index.css / orbit-anim.css / 各ページの local.css
除外: bootstrap.css, slick.css, magnific-popup.css, simplebar.css (ベンダー)
注意: メディアクエリの条件値には CSS変数は使えない。
*/

:root {
  /* ---- Brand / Navy ---- */
  --c-navy:            #192159;  /* 主色: 見出し・表文字・強調 */
  --c-navy-alt:        #1b2959;  /* 主色の濃淡違い(#192159とほぼ同色: 統合候補) */
  --c-navy-deep:       #0e1533;  /* 最濃ネイビー: 大見出し */
  --c-navy-soft:       #50578c;  /* 淡ネイビー: hover背景 */
  --c-navy-text:       #16326b;  /* パネル文字 */
  --c-indigo:          #4e65b8;  /* リンク(box内) */
  --c-indigo-dark:     #223fa6;  /* リンク focus */
  --c-link-blue:       #0033cc;  /* 表内リンク hover */

  /* ---- Brand / Blue-Cyan ---- */
  --c-blue:            #0068b6;  /* アクセント主色: 表ヘッダ・枠線 */
  --c-blue-dark:       #00538f;  /* パネル影・立体の陰 */
  --c-blue-mid:        #1a8fd4;  /* パネル ::before */
  --c-cyan:            #00aee2;  /* グローバルナビ・住所帯 */

  /* ---- Background ---- */
  --c-bg-page:         #d9f8ff;  /* ページ地色 */
  --c-bg-table:        #e7f0f2;  /* 表セル地色 */
  --c-bg-beige:        #f2e9da;  /* 表セル地色(別系統) */
  --c-bg-lavender:     #e7e9f2;  /* striped表 奇数行 */
  --c-panel-1:         #f4fbff;  /* パネル グラデ上 */
  --c-panel-2:         #dff1fc;  /* パネル グラデ中 */
  --c-panel-3:         #c5e6f9;  /* パネル グラデ下 */
  --c-panel-hover-1:   #eaf7fe;  /* パネル hover グラデ */
  --c-panel-hover-2:   #d5edfb;  /* パネル hover グラデ */

  /* ---- Gold / Yellow ---- */
  --c-gold:            #ae9600;  /* タブ・スクロールバー */
  --c-gold-light:      #eddc7e;  /* タブ active */
  --c-gold-mid:        #deb425;  /* 緊急告知帯 */
  --c-gold-border:     #e8ce37;  /* パネル枠線 */
  --c-yellow:          #f9cc35;  /* 見出し背景 */
  --c-yellow-marker:   #ffd700;  /* 文字ハイライト */
  --c-amber:           #ffb400;  /* focus-visible outline */

  /* ---- Red / Orange / Accent ---- */
  --c-red:             #e72410;  /* カウントダウン数字・btn hover */
  --c-red-btn:         #d12d36;  /* トップへ戻るボタン */
  --c-red-strong:      #e50012;  /* 表 tbody 強調 */
  --c-orange:          #e3401e;  /* btn-primary active */
  --c-orange-alt:      #e3542b;  /* 表 tbody グラデ */
  --c-salmon:          #f2b7aa;  /* 表 tbody グラデ */
  --c-ins-orange:      #ff7a00;  /* Instagram グラデ */
  --c-ins-pink:        #ff0169;  /* Instagram グラデ */
  --c-ins-purple:      #d300c5;  /* Instagram グラデ */
  --c-facebook:        #1877f2;  /* Facebook ブランド色 */

  /* ---- Neutral ---- */
  --c-white:           #ffffff;  /* 白 (#fff / #ffffff を統合) */
  --c-black:           #000000;  /* 黒: 既定リンク色 */
  --c-ink:             #222222;  /* 本文文字 */
  --c-ink-2:           #27272a;  /* タブ active 文字 */
  --c-ink-3:           #3d3d3d;  /* disabled リンク文字 */
  --c-slate:           #3b4952;  /* 投票ボタン背景 */
  --c-brown:           #493825;  /* パネル文字(旧) */
  --c-near-black:      #060001;  /* 暗色グラデ端 */

  /* ---- Gray scale ---- */
  --c-gray-050:        #f7f7f7;  /* disabled パネル グラデ */
  --c-gray-100:        #f4f4f4;  /* インタビュー box 背景 */
  --c-gray-150:        #f2f2f2;  /* 見出し背景 */
  --c-gray-200:        #ededed;  /* disabled パネル グラデ */
  --c-gray-250:        #dfdfdf;  /* disabled パネル グラデ */
  --c-gray-300:        #dddddd;  /* 枠線 */
  --c-gray-350:        #cccccc;  /* 枠線・slick dots */
  --c-gray-400:        #c9c9c9;  /* disabled 背景 */
  --c-gray-450:        #b4b4b4;  /* disabled 枠線 */
  --c-gray-500:        #b0b0b0;  /* disabled ::before */
  --c-gray-550:        #a6a6a6;  /* disabled 下線 */
  --c-gray-600:        #999999;  /* disabled 枠線 (#9a9a9aとほぼ同色: 統合候補) */
  --c-gray-620:        #9a9a9a;  /* disabled パネル影 (#999999とほぼ同色: 統合候補) */
  --c-gray-650:        #909090;  /* disabled ::before */
  --c-gray-700:        #808080;  /* リンク無効文字 */
  --c-gray-750:        #7a7a7a;  /* disabled パネル文字 */
  --c-gray-800:        #787878;  /* timeover 文字影 */
  --c-gray-850:        #767676;  /* disabled ::before */

  /* ---- Font ---- */
  --font-base: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;  /* 全体の既定フォント */
  --font-alt: Arial, Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;  /* パネル等の別指定 */

  /* ---- Radius ---- */
  --radius-xs:         1px;
  --radius-sm:         4px;  /* ボタン・バッジ既定 */
  --radius-md:         5px;
  --radius-lg:         8px;  /* カード */
  --radius-xl:         10px;
  --radius-2xl:        12px;
  --radius-3xl:        14px;  /* パネル */
  --radius-full:       50%;  /* 円形 */

  /* ---- Shadow ---- */
  --shadow-panel: 0 3px 5px 2px rgba(0, 0, 0, 0.2);  /* 浮きボタン */
  --shadow-card: 0 1px 2px 0.5px rgb(9 9 11 / 30%);  /* カード既定 */
  --shadow-card-sm: 0 0 1px 0.5px rgb(9 9 11 / 30%);  /* カード(弱) */
  --shadow-soft: 0 2px 5px rgba(0, 60, 120, 0.3);  /* 青系ソフト影 */
  --shadow-outline: 0 0 2px rgba(0, 0, 0, 0.4);  /* 輪郭影 */
  --shadow-heavy: 0 0 10px rgba(0, 0, 0, 0.8);  /* 強い影 */
}

html {
  background-color: var(--c-white);
  height: -webkit-fill-available;
}

body {
  position: relative;
  left: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /*animation: bgcchange 20s ease infinite;*/
  color: var(--c-ink);
  font-family: var(--font-base);
  font-feature-settings: "palt";
  overflow-x: hidden;
  font-size: 18px;
  line-height: 1.5;
  background-color: var(--c-bg-page);
}

a {
  color: var(--c-black);
}

/* マウスクリック時は非表示 */
a:focus:not(:focus-visible),button:focus:not(:focus-visible) {
  outline: none;
}

/* キーボード（Tab）操作時だけ、青背景でも見える枠を表示 */
a:focus-visible,button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

/*
CLASSES
===========================================
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

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

  .sp {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .pc-br:after {
    content: "";
    display: block;
  }

  .for-sp {
    display: none;
  }
}

/*
BOOTSTRAP EXTENTIONS
===========================================
*/

.container {
  max-width: 1100px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: auto;
}

#page-visual .container {
  max-width: none;
}

.img-cover {
  width: 100%;
  height: auto;
}

/* navbar */

.navbar {
  border-radius: 0;
  min-height: 48px;
}

.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
  padding: 0 !important;
  border-top: 0 none;
}

.navbar-header {
  background: var(--c-white);
  background: no-repeat url("../img/bg_paper.png");
  width: auto;
}

.navbar-brand {
  margin: 0 !important;
  padding: 15px 0 !important;
  width: 100%;
}

.navbar-brand .img-cover {
  width: 85%;
  height: auto;
  display: flex !important;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container-fluid {
    padding: 0;
  }

  .navbar-header {
    width: 221px;
  }

  .navbar-brand {
    height: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .navbar-brand {
    margin-left: 15px !important;
  }
}

/* BACKGROUND ORBIT
--------------------- */

/* 下層ページの背景アニメーション。position:fixed でスクロールに追従し、
   スクロール量に応じてリング中心が「画面下寄り」→「画面中央」へ移動する。
   #page { position:relative; z-index:1 } の下に敷くので z-index:0。
   実体は img/index/TopAnimetion/orbit-bg2.svg（色とネオンの動きはSVG内で完結）。 */

.bg-orbit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;

  --ga75-p: 0; /* スクロール進捗 0→1（scripts/orbit-bg.js が指数緩和して更新） */

  /* 基準は 1920×1080。SVG幅 1582px / リング中心Y 996px。
     max() で vw基準と vh基準の大きい方を採るので、background-size:cover と
     同じ挙動になり、ウィンドウの縦横比が変わっても構図が崩れない。
       1582/1920 = 82.396vw   1582/1080 = 146.48vh
        996/1920 = 51.875vw    996/1080 =  92.222vh   */
  --ga75-bg-w: max(82.396vw, 146.48vh); /* SVGの幅。リング直径 = 幅 × 0.7252 */
  --ga75-bg-y0: max(51.875vw, 92.222vh); /* スクロール0のときのリング中心Y */
}

.bg-orbit img {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ga75-bg-w);
  height: auto;

  /* top を動かすと毎フレーム レイアウト＋再ラスタが走る（1333px の動く SVG）。
     translate3d なら合成のみで済むので、スクロール追従が滑らかになる。
     Y は「リング中心の画面上の位置」から自身の高さの半分を引いた値。 */
  transform: translate3d(
    -50%,
    calc(var(--ga75-bg-y0) + (50vh - var(--ga75-bg-y0)) * var(--ga75-p) - 50%),
    0
  );
  will-change: transform;
}

@media (max-width: 767px) {
  .bg-orbit {
    --ga75-bg-w: 125vw;
    --ga75-bg-y0: 98vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orbit img {
    visibility: hidden;
  }
}

/*
OBJECT LAYOUT
===========================================
*/

#page {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-top: 86px;
}

.visual {
  position: relative;
  text-align: center;
  overflow: hidden;
  background-color: var(--c-white);
}

@media (min-width: 767px) {
  #page {
    min-height: 100vh;
    padding-bottom: 292px;
    /*padding-bottomにfooterの高さを指定する*/
  }
}

/*
SECTION TYPE
===========================================*/

/* BASE SECTION */

/* CONTENT SECTION */

.content {
  padding: 50px 0;
}

.content.darkblue {
  background-image: linear-gradient(to bottom, var(--c-near-black), var(--c-navy-alt));
  background-color: var(--c-navy);
}

.content.blue {
  color: var(--c-navy-alt);
}

.content .title {
  font-size: 32px;
  font-weight: bold;
  padding-bottom: 25px;
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  color: var(--c-navy);
}

.content .title img {
  max-width: 100%;
  height: auto;
}

.content .title span {
  display: block;
  font-size: 0.5em;
  font-style: normal;
  margin: 0.5em 0;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .content {
    padding: 30px 0;
  }
}

/*
VISUAL
===========================================
*/

@media (min-width: 1600.1px) {
  .visual {
    position: relative;
    background: url(../img/index/top_lg_pc2nd.png) no-repeat scroll center top;
    padding-bottom: 4px;
    border-bottom: 4px solid var(--c-blue);
    height: 160px;
  }

  .visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--c-navy);
    width: 100%;
    top: 0;
    left: 0;
    height: 160px;
  }
}

@media (min-width: 965px) and (max-width: 1600px) {
  .visual {
    position: relative;
    background: url(../img/index/top_pc2nd.png) no-repeat scroll center top;
    padding-bottom: 4px;
    border-bottom: 4px solid var(--c-blue);
    height: 160px;
  }

  .visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--c-navy);
    width: 100%;
    top: 0;
    left: 0;
    height: 160px;
  }
}

@media (min-width: 965px) and (max-width: 1399.98px) {
  .visual {
    width: 100%;
    height: auto;
    background-size: cover;
  }

  .visual:before {
    content: "";
    display: block;
    padding-top: 11.4%;
    /* 高さを幅の11.4%に固定 */
  }
}

@media (max-width: 964px) {
  .visual .for-sp {
    display: block;
  }

}

/* HEADER MENU
===========================================*/

.navbar,
.navbar-toggle {
  border: 0 none;
}

#page-header {
  line-height: 12px;
  margin: 0;
  background-color: var(--c-white);
  box-shadow: var(--shadow-panel);
}

#page-header .menu {
  font-size: 14px;
  margin: 0;
}

#page-header .menu>li {
  display: table;
  letter-spacing: 0.05em;
  margin-left: -1px;
  width: 14%;
  position: relative;
}

#page-header .menu>li>a,
#page-header .menu>li>span {
  display: table-cell;
  width: 100%;
  height: 86px;
  vertical-align: middle;
  padding: 0;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 700;
  color: var(--c-navy);
}

#page-header .menu>li a:hover,
#page-header .menu>li a:focus,
#page-header .menu>li.open>a,
#body-top #page-header .menu>li.gnav_top>a,
#body-yoso #page-header .menu>li.gnav_yoso>a,
#body-timetable #page-header .menu>li.gnav_timetable>a,
#body-events #page-header .menu>li.gnav_events>a,
#body-camp #page-header .menu>li.gnav_camp>a,
#body-prosports #page-header .menu>li.gnav_prosports>a,
#body-access #page-header .menu>li.gnav_access>a,
#body-foodfes #page-header .menu>li.gnav_foodfes>a {
  color: var(--c-white);
  background-color: var(--c-cyan);
  text-decoration: none;
}

/* 出場予定選手・アクセス　アイコン付きメニュー */
.gnav_entry a,
.gnav_access a {
  padding: 10px;
}

.gnav_entry span,
.gnav_access span {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}

.gnav_entry span::after,
.gnav_access span::after {
  content: "";
  display: inline-block;
  background-size: 18px 18px;
  background-position: right center;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -9px;
}

.gnav_entry span::after {
  background-image: url(../img/icon_keirinjp.svg);
}

.gnav_entry a:hover span::after {
  filter: brightness(10) grayscale(100%);
  ;
}

.gnav_access span::after {
  background-image: url(../img/icon_global.svg);
}

#body-access .gnav_access>a span::after,
.nav .open.gnav_access>a span::after,
.gnav_access a:focus span::after,
.gnav_access a:hover span::after {
  background-image: url(../img/icon_global_hover.svg);
}

/* .dropdown-toggle 下矢印アイコン付きメニュー */

.dropdown-toggle {
  position: relative;
}

.dropdown-toggle::before {
  content: "";
  display: inline-block;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  background-image: url(../img/icon_arrow_d.svg);
}

#body-yoso .gnav_yoso>a.dropdown-toggle::before,
#body-access .gnav_access>a.dropdown-toggle::before,
.nav .open>a.dropdown-toggle::before,
.dropdown-toggle:focus::before,
.dropdown-toggle:hover::before {
  background-image: url(../img/icon_arrow_d_hover.svg);
}

/* .dropdown-menu ドロップダウンメニュー指定 */

.dropdown-menu,
.navbar-nav .open .dropdown-menu {
  padding: 0;
  background-color: var(--c-white);
  color: var(--c-navy);
}

.dropdown-menu>li>a {
  color: var(--c-navy);
  font-weight: 700;
  padding: 8px 16px;
}

.navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-nav .open .dropdown-menu>li>a:hover {
  color: var(--c-white);
  background-color: var(--c-navy);
}

@media (min-width: 1200px) {
  #page-header .menu {
    width: calc(100% - 221px);
    background-color: var(--c-white);
  }

  .navbar-toggle {
    display: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
  }

  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }

  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }

  #page-header .menu>li.gnav_prosports {
    width: 16%;
  }

  #page-header .menu>li::after {
    content: "";
    display: block;
    width: 1px;
    height: 56px;
    background-color: var(--c-cyan);
    position: absolute;
    top: 15px;
    right: 0px;
  }

  #page-header .menu>li:last-child:after {
    display: none;
  }
}

/* スマホ版グローバルナビゲーション指定 */

@media (max-width: 1199px) {

  /* ナビゲーションが開いたときに背景を固定する */
  .is-fixed {
    height: 100%;
    overflow: hidden;
  }

  .bg-navbar {
    display: none;
  }

  .is-fixed .bg-navbar {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1029;
    /*.navbar-fixed-topがz-index: 1030;なので*/
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  /*.navbarの高さと同じサイズ*/
  #page {
    padding-top: 88px;
  }

  /* .navbar-toggle スマホ版グローバルナビゲーション開閉ボタン */
  .navbar-toggle {
    display: block;
    margin: 0;
    padding: 10px;
    color: var(--c-white);
    background-color: var(--c-cyan);
    text-decoration: none;
    width: 88px;
    height: 88px;
    border-radius: 0;
  }

  .navbar-toggle .icon-bar {
    background-color: var(--c-white);
    -webkit-transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
    margin: auto;
  }

  .opened .navbar-toggle .icon-bar {
    -webkit-transform: translateY(6px) rotate(45deg);
    transform: translateY(6px) rotate(45deg);
  }

  .opened .navbar-toggle .icon-bar::after {
    background-color: var(--c-white);
    content: "";
    display: block;
    height: 2px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 22px;
  }

  .opened .navbar-toggle .icon-bar+.icon-bar {
    opacity: 0;
  }

  .navbar-collapse.in {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .navbar-fixed-top .navbar-collapse.in {
    max-height: calc(100vh - 88px);
  }

  #page-header .menu {
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 16px;
  }

  .container-fluid>.navbar-collapse {
    margin: 0;
  }

  #page-header .menu>li {
    display: block;
    text-align: left;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
    border-top: 1px solid var(--c-gray-350);
    color: var(--c-white);
    font-size: 1.2rem;
    height: auto;
    min-height: 50px;
  }

  #page-header .menu>li:nth-child(5) {
    width: 100%;
  }

  #page-header .menu>li>a {
    display: block;
    text-align: left;
    padding: 0 1em;
  }

  #page-header .menu>li>a,
  #page-header .menu>li>span {
    width: 100%;
    height: auto;
    line-height: 50px;
  }

  #page-header .menu>li.open>a,
  #page-header .menu>li.open>a:hover,
  #page-header .menu>li.open>a:focus {
    color: var(--c-white);
    background-color: var(--c-cyan);
    text-decoration: none;
  }

  .dropdown-toggle {
    position: relative;
  }

  .dropdown-toggle::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 1em;
    left: auto;
    margin-left: 0;
    margin-top: -8px;
  }

  .navbar-nav .open .dropdown-menu {
    border-radius: 0;
  }
}

@media (max-width: 768px) {

  /*.navbarの高さと同じサイズ*/
  #page {
    padding-top: 48px;
  }

  .navbar-brand {
    padding: 4px 10px !important;
    height: 48px;
    width: auto;
  }

  .navbar-brand img,
  .navbar-brand img.img-cover {
    width: auto;
    height: 40px;
    margin: 0;
    padding-left: 12px;
  }

  .navbar-toggle {
    width: 48px;
    height: 48px;
  }

  .navbar-fixed-top .navbar-collapse.in {
    max-height: calc(100vh - 48px);
  }
}

/* FOOTER
=========================================== */

@media (min-width: 768px) {
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 292px;
  }
}

/* #page-address*/

#page-address {
  color: var(--c-white);
  background-color: var(--c-cyan);
  text-decoration: none;
  padding: 60px 0;
}

a.footer_link {
  color: var(--c-white);
  text-decoration: underline;
}

.footer_link:hover {
  text-decoration: none;
}

/* copyright */

#page-footer {
  position: relative;
  background-color: var(--c-white);
}

#page-footer .copyright {
  text-align: center;
  font-size: 0.9em;
  color: var(--c-navy);
}

/*
LINKS
===========================================
*/

#page-links {
  color: var(--c-gray-350);
  background-color: var(--c-navy-alt);
  padding: 40px 0;
}

/*
box
===========================================
*/

.content-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  background-color: var(--c-cyan);
  border: 4pt solid var(--c-blue);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 50px;
}

.content-box::after {
  z-index: 1;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.content-box-title {
  font-size: 1.4em;
  padding: 20px;
  text-align: center;
  color: var(--c-white);
  font-weight: bold;
  letter-spacing: 0.05em;
}

.content-box-title h3 {
  font-size: 1.4em;
  line-height: 1.2;
  font-weight: bold;
}

.content-box > .content-box-inner {
  padding: 20px;
  background-color: var(--c-white);
  margin: 0 auto;
}

.btn-camp {
  color: var(--c-white);
  background-color: var(--c-navy);
  border-color: var(--c-white);
}

.btn-camp:hover,.btn-camp:focus {
  color: var(--c-white) !important;
  background-color: var(--c-navy-soft);
}

/*
btn-jump
===========================================
*/

a.content-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  background-color: var(--c-blue);
  border-left: 4px solid var(--c-white);
  border-right: 4px solid var(--c-white);
  letter-spacing: 0;
  overflow: hidden;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: var(--c-white);
  padding: 20px 0;
}

a.content-btn:hover {
  top: 2px;
  opacity: 0.95;
}

.menu a:hover,.menu a:focus{
  color: var(--c-white);
  background-color: var(--c-navy-soft);
}

.content-btn::before,
.content-btn::after {
  content: "";
  position: absolute;
  display: block;
  height: 4px;
  width: 100%;
  left: 0;
  background-color: var(--c-white);
}

.content-btn::before {
  top: 0;
}

.content-btn::after {
  bottom: 0;
}

/*
TABLE_base
===========================================
*/

.table_base {
  border: 2px solid var(--c-white);
  width: 100%;
  box-shadow: var(--shadow-panel);
}

.table_base th {
  border: 2px solid var(--c-white);
  /*padding: 3px;*/
  background-color: var(--c-navy);
  color: var(--c-white);
  text-align: center;
  vertical-align: middle;
}

.table_base>thead>tr>th {
  border-bottom: 4px solid var(--c-white);
}

.table_base td {
  border: 2px solid var(--c-white);
  padding: 15px;
  background-color: var(--c-bg-beige);
  color: var(--c-ink);
}

.table.table_base>tbody>tr>th,
.table.table_base>tbody>tr>td {
  vertical-align: middle;
}

.table_base td a {
  color: var(--c-navy);
}

.table_base td a:hover {
  color: var(--c-link-blue);
}

.table_base tbody {
  color: var(--c-white);
  background-color: var(--c-red-strong);
  background-image: linear-gradient(to right, var(--c-salmon) 0%, var(--c-orange-alt) 25% 75%, var(--c-salmon) 100%);
}

.table_base thead th {
  color: var(--c-white);
  background: var(--c-navy);
}

/* Button
=========================================== */

a.btn-panel {
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: var(--c-brown);
}

.btn-panel-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* #section-menu 側は page-index.css で全面上書き。残る利用箇所は #section-movie のみ */
#section-movie .btn-panel-text {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3em;
  padding: 5px;
}

.btn-panel-img {
  padding: 10px 0;
  width: 160px;
  height: 140px;
  /*width: 128px;*/
  /*height: 128px;*/
  margin: 10px auto;
  box-sizing: border-box;
  position: relative;
}

a.link_disabled {
  pointer-events: none;
  position: relative;
  display: block;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-gray-700) !important;
}

a.disabled {
  pointer-events: none;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  overflow: hidden;
  font-feature-settings: "palt";
  white-space: nowrap;
  border-radius: var(--radius-lg);
  border: 6px solid var(--c-gray-600);
}

@media (max-width: 768px) {
  .btn-panel-img {
    padding: 10px 0;
    width: 130px;
    height: 105px;
    /*width: 128px;*/
    /*height: 128px;*/
    margin: 10px auto;
    box-sizing: border-box;
    position: relative;
  }
}

/* box
*************************************************/

.box {
  margin-bottom: 30px;
  border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: var(--shadow-heavy);
  color: var(--c-ink);
  overflow: hidden;
}

.box-inner {
  padding: 20px 10px;
  text-align: left;
}

.box-title01 {
  margin-top: 0;
  padding: 10px;
  background-repeat: repeat;
  background-color: var(--c-yellow);
  font-weight: bold;
}

.box-title02 {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
}

.box-title02:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 5px;
  background-color: var(--c-navy);
}

.box-title03 {
  margin: 30px 0 20px 0;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--c-gray-150);
  box-shadow: var(--shadow-outline);
  border: 1px solid var(--c-white);
  font-weight: bold;
}

.mt_0 {
  margin-top: 0;
}

.box-title {
  font-size: 1rem;
}

.box a {
  color: var(--c-indigo);
}

.box a:hover,
.box a:focus {
  color: var(--c-indigo-dark);
}

@media (min-width: 768px) {
  .box-inner {
    padding: 30px;
  }

  .box-title {
    font-size: 1rem;
  }

  .box-title01 {
    padding: 10px 30px;
  }

  .box-title02 {
    padding-bottom: 20px;
  }
}

/*
Others
=========================================== */

@media (max-width: 767px) {
  .sp-br:after {
    content: "";
    display: block;
  }

  .for-pc {
    display: none;
  }
}

/* .row style */

.row-0 {
  margin-left: 0;
  margin-right: 0;
}

.row-0>div {
  padding-right: 0;
  padding-left: 0;
}

.row-8 {
  margin-left: -4px;
  margin-right: -4px;
}

.row-8>div {
  padding-right: 4px;
  padding-left: 4px;
}

/* margin */

.mb-60px {
  margin-bottom: 60px;
}

.mb-30px {
  margin-bottom: 30px;
}

.mb-10px {
  margin-bottom: 10px;
}

/*
movie(レスポンシブ用)
=========================================== */

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 文字
=========================================== */

.bold {
  font-weight: bold;
}

.text-middle {
  font-size: 1.1em;
}

.text-background {
  background-color: var(--c-yellow-marker);
  font-size: 120%;
  font-weight: bold;
}

/*
見出し
=========================================== */

.heading {
  color: var(--c-black);
  font-size: 1.1em;
  font-weight: bold;
}

/*
footerArea フローティングメニュー領域
+=========================================================+ */
#floatingNaviTohyo {
  background: rgba(59 74 82 / 80%);
  position: fixed;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  bottom: 0;
  z-index: 99;
  width: 240px;
  height: 0;
  box-shadow: var(--shadow-card);
  transition: height 0.3s;
}

#floatingNaviTohyo.active::before {
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background-color: var(--c-slate);
}

/* 開閉ボタン */
.btn-toggle-tohyo {
  position: absolute;
  top: -32px;
  left: 8px;
  width: 80px;
  height: 32px;
  background: url("https://www.tachikawakeirin.jp/images/icon_arrow_up.svg") 50% 50% / 28px 16.8px no-repeat var(--c-slate);
  border: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-card-sm);
}

.btn-toggle-tohyo:hover {
  background: url("https://www.tachikawakeirin.jp/images/icon_arrow_up.svg") 50% 50% / 28px 16.8px no-repeat var(--c-slate);
}

.active .btn-toggle-tohyo {
  background-image: url("https://www.tachikawakeirin.jp/images/icon_arrow_down.svg");
  background-size: 28px 16.8px;
}

.floating-content {
  padding: 8px;
  text-align: center;
  /*  background-color: rgba(209, 45, 54, 0.8);*/
}

#floatingNaviTohyo.active {
  height: 160px;
}

.justify-content-center {
  justify-content: center !important;
}

/* ソーシャルメディアボタン */
.floating-content .btn-tohyonavi {
  display: block;
  padding: 2px 4px;
  background-color: rgb(255 255 255 / 90%);
  border: 2px solid var(--c-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* トップへ遷移ボタン */
.btn-top {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding-top: 7px;
  font-size: 11px;
  color: var(--c-white);
  text-decoration: none;
  background-color: rgb(209 45 54 / 90%);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* ホバー時 */
.btn-top:hover,.btn-top:focus {
  color: var(--c-white);
  background-color: var(--c-red);
}

#floatingNaviTohyo .a:active,
a:focus,
a:hover {
  color: var(--c-blue);
  text-decoration: none;
}

#floatingNaviTohyo a:hover>img {
  opacity: 0.8;
}

@media (max-width: 991px) {

  #floatingNaviTohyo,
  .btn-top {
    z-index: 1031;
  }

  body:has(.navbar-toggle[aria-expanded="true"]) #floatingNaviTohyo {
    z-index: 4;
  }

  body:has(.navbar-toggle[aria-expanded="true"]) .btn-top {
    z-index: 5;
  }
}

@media (min-width: 992px) {
  #floatingNaviTohyo {
    width: 100vw;
  }

  #floatingNaviTohyo.active {
    height: 72px;
  }

  /* 開閉ボタン */
  .btn-toggle-tohyo {
    width: 64px;
  }

  .floating-content {
    justify-content: center;
    padding: 8px 64px;
  }

  /* ソーシャルメディアボタン */
  .floating-content .btn-tohyonavi {
    padding: 2px 8px;
  }

  /* 投票メニュー開催モード / トップへ遷移ボタン
+=========================================================+ */
  .btn-top {
    background-color: var(--c-red-btn);
    right: 20px;
    bottom: 14px;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
}

.row2 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.floating-content {
  padding: 8px;
  text-align: center;
}

#floatingNaviTohyo .img-fluid {
  max-width: 100%;
  height: auto;
}

/* チャットボット
+=========================================================+ */
#chat_banner {
  bottom: 80px !important;
  z-index: 9998 !important;
}

/* #emergency 緊急メッセージ表示領域
+=========================================================+ */
/* #emergencyArea {
display:none;
} */
#emergencyArea,
#emergency02 {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 8.5rem 3.5rem 1.5rem 3.5rem;
  margin-bottom: -88px;
  font-size: 1.25em;
  text-align: center;
  background: var(--c-gold-mid);
}

#emergencyArea h2::before,
#emergency02 h2::before {
  display: block;
  width: 36px;
  height: 32px;
  margin: 0 auto 16px auto;
  content: "";
  background: url("https://www.tachikawakeirin.jp/images/home/icon_emergency.svg") no-repeat top center;
}

#emergencyArea h2,
#emergency02 h2 {
  font-size: 1.125em;
  font-weight: bold;
}

.fixed-top {
  position: sticky;
}

@media (max-width: 768px) {
  #emergencyArea {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 7.5rem 2.5rem 1.5rem 2.5rem;
    margin-bottom: -48px;
    font-size: 1.25em;
    text-align: center;
    background: var(--c-gold-mid);
  }
}

/*
ページ別背景色、フォントカラー、表カラー
===========================================
*/

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th {
  color: var(--c-navy-deep);
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: var(--c-bg-lavender);
}

.title {
  text-shadow: 2px 2px var(--c-white), -2px 2px var(--c-white), 2px -2px var(--c-white), -2px -2px var(--c-white);
}

#body-top {
  background-color: var(--c-bg-page);
}

#body-timetable thead th {
  background-color: var(--c-navy);
}

#body-timetable th {
  background-color: var(--c-blue);
  color: var(--c-white);
}

#body-timetable .title,
#body-timetable td {
  color: var(--c-navy);
}

#body-timetable td {
  background-color: var(--c-bg-table);
}

#body-events thead th {
  background-color: var(--c-navy);
  color: var(--c-white);
}

#body-events th {
  background-color: var(--c-blue);
  color: var(--c-white);
}

#body-events td {
  background-color: var(--c-bg-table);
}

#body-events .title,
#body-events td {
  color: var(--c-navy);
}

#body-events .content-box .a:active,
#body-events .content-box a:focus,
#body-events .content-box a:hover,
#body-events .table_base td a:hover {
  color: var(--c-navy);
  text-decoration: underline;
}

#body-camp thead th {
  background-color: var(--c-navy);
  color: var(--c-white);
}

#body-camp th {
  background-color: var(--c-blue);
  color: var(--c-white);
}

#body-camp td {
  background-color: var(--c-bg-table);
}

#body-camp .title,
#body-camp td {
  color: var(--c-navy);
}

.table-reset td {
  background-color: transparent !important;
}

/*
ファーストビューアニメーション
===========================================
*/
/*配置固定*/
.top_z0,
.top_z990{
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  background-size: cover;
}

.top_z0 {
  background-image: url(../img/index/TopAnimetion/top_main_pc_z1.png);
  z-index: -70;
}

.top_z990 {
  background-image: url(../img/index/TopAnimetion/top_main_pc_z999.png);
  z-index: 5;
}

@media (max-width: 767px){

    .top_z0 {
        background-image: url(../img/index/TopAnimetion/top_main_sp_z1.png);
        z-index: -70;
    }

    .top_z990 {
        background-image: url(../img/index/TopAnimetion/top_main_sp_z999.png);
        z-index: 5;
    }
}