@charset "UTF-8";
/* ==============================================================
#loading ローディング
============================================================== */
#loading {
    position: fixed;
    width:100%;
    height:100vh;
    overflow: hidden;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;   /* 縦に並べる */
    justify-content: center;  /* 縦方向中央 */
    align-items: center;      /* 横方向中央 */
    z-index: 10;
}

.spinner-wrapper {
    position: absolute;
    width: 400px;
    height: 400px;
}
  
.spinner-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    z-index: 4;
}
  
/* ==============================================================
main
============================================================== */
main {
    width:100%;
    margin: 0;
}
.base-color {
    position: absolute;
    width:100%;
    height:100%;
    z-index: -3;
    background-color: #6db27d;
}
/* ==============================================================
ファーストビュー
============================================================== */
.page {
    width: 100%;
}
.first-view {
    width:100%;
    min-height:100vh;
    position: relative;
}

.bak-anime-area {
    width:100%;
    height:100vh;
    overflow: hidden;
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
}
.mode-kaisai .bak-anime-area {
    width:100%;
    height:150%;
    min-height: 100vh;
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
}

.bak-anime-area .hikaisai {
    display: none;
}
.mode-jogai .bak-anime-area .hikaisai,
.mode-hikaisai .bak-anime-area .hikaisai {
    display: block;
}

.mode-kaisai .bak-anime-area .kaisai {
    width: 100%;
    height: 100%;
}
.mode-kaisai .anime-kaisai {
    background-color: #a7dcff;
    width: 100%;
    height: 100%;
}

.kaisai {
    display: none;
}
.mode-kaisai .kaisai {
    display: block;
}
.mode-kaisai .hikaisai {
    display: none;
}

.first-view-m1,
.first-view-m2{
    width:100%;
    height:100%;
    position: absolute;
}

.first-view-m1 {
    z-index:-1;
}
.first-view-m2 {
    z-index:-2;
}


.kaisai #honjo-info-next {
    display: none;
}

/* ==============================================================
開催情報レイヤー
============================================================== */
.mode-jogai .today-raceinfo01,
.mode-hikaisai .today-raceinfo01 {
    width: 100%;
    padding-top: 75px;
    padding-left: 20px;
}
.mode-jogai .first-view .today-raceinfo01 .container,
.mode-hikaisai .first-view .today-raceinfo01 .container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    max-width: none;
    display: flex;
}
.mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai,
.mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai {
    width:calc(65px * 0.85 / 55 * 450);
    height:auto;
    margin:10px 20px;
    padding: 0.5rem 0px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
}
@media screen and (max-width: 991px){
    .mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai,
    .mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai {
        padding: 1rem 0px;
    }
}
.mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai .row,
.mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai .row {
    padding: 0;
    margin: 0;
}
.mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai .col-lg-6,
.mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai .col-lg-6 {
    width:100%;
}

.mode-kaisai .first-view .today-raceinfo01 .container .view-hikaisai .row {
    margin-bottom: 1.5rem;
}

.mode-kaisai .first-view .today-raceinfo01 .container .view-hikaisai .row-12 {
    --bs-gutter-x: 0rem;
}
.mode-kaisai .first-view .today-raceinfo01 .container .view-hikaisai .row-12 .row {
    --bs-gutter-x: 1.5rem;
}

.autorace-area {
    display: flex;
    justify-content: center;
    width: 100%;
}
.autorace-area  button{
    margin: 0 auto;
}

.mode-jogai .jogai-accordion,
.mode-hikaisai .jogai-accordion {
    display: none;
}
.mode-kaisai .jogai-accordion {
    display: block;
}
.jogai-accordion.is-open {
    display: block;
}
.mode-kaisai .accordion {
    display: none;
}

.mode-jogai .raceinfo-mb,
.mode-hikaisai .raceinfo-mb {
    padding: 0;
}
.mode-kaisai .raceinfo-mb {
    margin-bottom: 0;
}
@media screen and (max-width: 991px){
    .mode-jogai .jogai-accordion,
    .mode-hikaisai .jogai-accordion {
        display: block;
    }
    .accordion {
        display: none;
    }
    .mode-kaisai .raceinfo-mb {
        margin-bottom: 1.5rem !important;
    }
}
.btn-accordion {
    position: absolute;
    right: calc(var(--bs-gutter-x) * .5);
    top: 50.5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
}

.btn-accordion::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    background-color: #ff6600;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.btn-accordion::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 3px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.btn-accordion::before,
.btn-accordion::after,
.btn-accordion span {
  pointer-events: none;
}
.btn-accordion span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 15px;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform-origin: center;
    z-index: 2;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-accordion.is-open span {
    transform: translate(-50%, -50%) rotate(90deg) scale(0);
    opacity: 0;
}
  
.movie-link {
    display: flex;
    align-items: center;
    height: 65px;
}
.movie-link a {
    text-decoration: none;
    color: #2d2d2d;
    background-color: rgba(255, 255, 255, 0.9);
    height: 65%;
    padding: 0px 10px;
    border-radius: 8px;
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
}

.movie-link img {
    width:3vw;
    aspect-ratio: 1/1;
    margin-left: 10px;
}
.movie-link .movie-link-text {
    display: flex;
    align-items: center;
}
.movie-link a:hover .movie-link-text {
    text-decoration: underline;
}

.movie-link .movie-link-click {
    color: #fff;
    background-color: #e65227;
    padding: 1px 10px;
    border-radius: 16px;
    height:25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.movie-link a:hover .movie-link-click {
    background-color: #f27753;
}

.movie-link .tail {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 20px solid rgba(255, 255, 255, 0.9);
    margin-right: -1px;
    margin-left: 5px;
}
@media screen and (max-width: 1024px){
    .mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai,
    .mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai {
        width: 35vw;
        height: auto;
    }
    .mode-jogai .today-raceinfo01,
    .mode-hikaisai .today-raceinfo01 {
        padding-top: 60px;
    }
}
@media screen and (max-width: 991px){
    .mode-jogai .today-raceinfo01,
    .mode-hikaisai .today-raceinfo01 {
        width: 100%;
        padding-top: 145px;
        padding-right: var(--bs-gutter-x, .75rem);
        padding-left: var(--bs-gutter-x, .75rem);
        margin-right: auto;
        margin-left: auto;
    }
    .mode-kaisai .today-raceinfo01 {
        padding-top: 145px;
        margin: 0 auto;
    }
    .mode-kaisai .mb-md-4 {
        margin-bottom: 1.5rem!important;
    }
    .mode-jogai .first-view .today-raceinfo01 .container .view-hikaisai,
    .mode-hikaisai .first-view .today-raceinfo01 .container .view-hikaisai {
        width: 100%;
        margin: 10px 20px;
        padding: 1rem 0px;
        padding-top: 0;
    }
    .today-date-y {
        font-size: 16px;
    }
    .today-date-md {
        font-size: 32px;
    }
    .text-opentime {
        font-size: 20px;
    }
    .today-open {
        font-size: 16px;
    }
    .today-status {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 5px;
    }
    #honjo-info-next {
        padding-top: 0;
        padding-bottom: 0;

    }
    #honjo-racename {
        font-size: 20px;
    }
    #today-honjo {
        margin-bottom: 0px;
    }
    .mode-kaisai .section-kaisaibanner,
    .mode-kaisai .section-jogai-info {
        padding: 16px 24px;
    }
    .movie-link {
        display: none;
    }
}

/* ==============================================================
ファーストビューアニメーション
============================================================== */
/* アニメーション地面
------------------------------------------------------------ */
.anime-ground {
    position: absolute;
    width:100%;
    height:15%;
    left:0;
    bottom:0;
}
.ground-base,
.ground-line {
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.ground-base {
    background:
    linear-gradient(to top,
  #60c1fb 11.666666%,
  #a95950 11.666666%,#a95950 24.666666%,
  #667f66 24.666666%);
}
.ground-line {
    background:
    linear-gradient(to top,
  #60c1fb00 11.666666%,
  #a9595000 11.666666%,#a9595000 24.666666%,
  #fff 24.666666%,#fff 27.333333%,
  #667f6600 27.333333%,#667f6600 46.666666%,
  #fff 46.666666%,#fff 49.333333%,
  #667f6600 49.333333%,#667f6600 89.333333%,
  #fddc2d 89.333333%,#fddc2d 92.666666%,
  #667f6600 92.666666%,#667f6600 100%);
}
.ground-move {
    position: absolute;
    width:100%;
    height:100%;
    animation: slideRight 15s linear infinite;
}
.goal-line,
.goal-erea {
    position: absolute;
    width:22.9%;
    top:0;
    left: 4.6%;
}
.goal-line {
    height:100%;
    background:
    linear-gradient(to right,
    #fff 0%,#fff 1%,#81a9c800 1%);
}
.goal-erea {
    height:72.333333%;
    background:
    linear-gradient(to right,
    #ffffff00 0%,#ffffff00 1%,#81a9c8 1%);
}

/* 猫の動き
------------------------------------------------------------ */
.anime-cat {
    position: absolute;
    width:100%;
    bottom:0;
}
@keyframes cat-move{
    0% {
        transform: translateX(130vw);
        opacity: 1;
    }
    100% {
        transform: translateX(-30vw);
        opacity: 1;
    }
}

.cat_1, .cat_2, .cat_3, .cat_4, .cat_5, .cat_6, .cat_7,.cat_8,.cat_9{
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}

.lottie-container {
    width: 100%;
    height: 100%;
}

.cat_1, .cat_2, .cat_3, .cat_4, .cat_5, .cat_6, .cat_7,.cat_8,.cat_9{
    width: 220px;
    height: 220px;
}

.cat_1{
    animation: cat-move 11s ease-in 0s infinite normal;
    bottom: 85px;
    z-index: 5;
}

.cat_2{
    animation: cat-move 14s ease-in-out 2s infinite normal;
    bottom: 80px;
    z-index: 6;
}

.cat_3{
    animation: cat-move 12s ease-out 4s infinite normal;
    bottom: 70px;
    z-index: 7;
}

.cat_4{
    animation: cat-move 16s ease-in-out 8s infinite normal;
    bottom: 68px;
    z-index: 8;
}

.cat_5{
    animation: cat-move 12s ease-out 10.2s infinite normal;
    bottom: 64px;
    z-index: 9;
}

.cat_6{
    animation: cat-move 13s ease-in 6.5s infinite normal;
    bottom: 50px;
    z-index: 10;
}
.cat_7{
    animation: cat-move 18s ease-in 6.5s infinite normal;
    bottom: 47px;
    z-index: 11;
}

.cat_8{
    animation: cat-move 9s ease-in 6.5s infinite normal;
    bottom: 44px;
    z-index: 12;
}

.cat_9{
    animation: cat-move 14s ease-in 6.5s infinite normal;
    bottom: 37px;
    z-index: 13;
}

@media screen and (max-width: 991px){
    .first-view-m1 {
        background-image:none;
    }
    .ground-move {
        animation: slideRight 5s linear infinite;
    }
    @keyframes cat-move{
        0% {
            transform: translateX(130vw);
            opacity: 1;
        }
        100% {
            transform: translateX(-130vw);
            opacity: 1;
        }
    }
    .cat_1{
        animation: cat-move 6s ease-in 0s infinite normal;
    }
    
    .cat_2{
        animation: cat-move 9s ease-in-out 2s infinite normal;
    }
    
    .cat_3{
        animation: cat-move 7s ease-out 4s infinite normal;
    }
    
}

@keyframes slideRight {
    0% {
      right: 100%;
    }
    100% {
      right: -100%;
    }
}

/* 背景動画レイヤー
------------------------------------------------------------ */
.first-view-m2 .videoplayer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000; /* 背景チラ見え防止 */
}

img.grade-poster {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ← これが重要 */
}


/* 共通スタイル */
.first-view-m2 video {
    position: absolute;
    inset: 0;              /* top/left/transform不要 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;            /* 初期は両方0 */
    z-index: 1;
    transition: opacity 1s ease;
}

/* 表示中の動画だけ1にする */
.first-view-m2 video.active {
    opacity: 1;
    z-index: 2;
}


/* ==============================================================
主要関連バナー
============================================================== */
.top-pickup {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #6db27d;
}
.top-pickup .row>*{
    margin-bottom:16px;
}
a.btn-pickup{
    position:relative;
    display:block;
    height:100%;
    padding:4px;
    line-height:1.2;
    color: #2d2d2d !important;;
    text-align:center;
    text-decoration:none;
    background-color:#fff;
    border-radius:4px;
    box-shadow:0 4px 4px rgba(0,0,0,.1);
}
a.btn-pickup:hover{
    top:2px;
}
a.btn-pickup span{
    display:block;
    min-height:2em;
    padding:.5rem 0;
    font-size:.875rem;
}
.top-pickup .swiper-slide img {
    aspect-ratio: 265/82.81;
    width: 100%;
    object-fit: contain;
}  
.top-pickup .container .row .swiper-slide {
    flex: 0 0 auto;
    width: 50%;
}
@media (min-width: 768px) {
    .top-pickup .container .row .swiper-slide {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
@media (min-width: 992px) {
    .top-pickup .container .row .swiper-slide {
        flex: 0 0 auto;
        width: 25%;
    }
}
/* ==============================================================
お知らせ・キャンペーン、スライドバナー
============================================================== */
/*縞背景*/
.topics-slider {
    background-image: linear-gradient(225deg, #f7f1dd 25%, #ead9a4 25%, #ead9a4 50%, #f7f1dd 50%, #f7f1dd 75%, #ead9a4 75%);
    background-size: 50px 50px;
    background-color: #e0c26b66;
}
.title-img {
    display: flex;
    width: 60%;
    margin:0 auto;
    padding: 2%;
}
@media screen and (max-width: 767px) {
    .title-img {
        width: 100%;
    }
}
.topics,
.slider {
    width:100%;
    height: 100%;
    background-color:#fff;
    border-radius:4px;
}

/*トピックス*/
.topics h3 {
    color: #643232;
}
.topics-moon {
    font-weight: bold;
    font-size: 1.5rem;
}
.date-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.date-line .badge-news {
    height: 1.2rem;
}
/* ---------------------------
   セクションヘッダー
--------------------------- */
.section-information-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3%;
    padding-bottom: 0;
}

@media screen and (min-width: 768px) {
    .section-information-header {
        flex-direction: row;
    }
}

/* ---------------------------
   リストボタン
--------------------------- */
.list-button a {
    position: relative;
    display: block;
    width: 100%;
    padding: 4px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: #e95419;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

/* ---------------------------
   リスト情報
--------------------------- */
.list-information {
    height: 475px;
    padding: 3%;
    overflow-y: scroll;
    list-style: none;
}

.list-information li {
    margin-bottom: 15px; /* 下マージン統一 */
}

.list-information .date {
    display: block;
    font-size: 1.2rem;
}
@media screen and (max-width: 991px){
    .list-information {
        height: 340px;
    } 
}
/* 日付・マーク
--------------------------------------------------------- */
.mark-info .date::after,
.mark-camp .date::after {
    display: inline-block;
    width: 80px;
    margin: 0 3px 0 3px;
    font-size: 12px;
    text-align: center;
    border-radius: 12px;
}

.mark-info .date::after {
    content: "お知らせ";
    background-color: #ffe100;
}

.mark-camp .date::after {
    content: "キャンペーン";
    background-color: #33ffdc;
}

/* メインビジュアル画像
--------------------------------------------------------- */
.slider {
    padding-top: 3%;
    padding-bottom: 3%;
}
#mainVisual {
    position: relative;
    width: 90%;
    margin: 0 auto;
}
#mainVisual #mainvisual-slider {
    width:100%;
}
#mainVisual .splide__track {
    width:100%;
    position: relative;
    top: 0;
}
#mainVisual img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 縦横比を保ったまま収める */
    object-position: center;    /* 中央寄せ */
    display: block;
    padding-bottom: 3%;
}
/* 前後ボタン
--------------------------------------------------------- */
#mainVisual .custom-controls {
    width:100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#mainVisual .prev-arrow {
    border: none;
    color: transparent;
    cursor: pointer;
    width:40px;
    aspect-ratio: 1/1;
    background-image: url(../images/btn_arrow_prev.svg);
    background-position: left center;
}
#mainVisual .next-arrow {
    border: none;
    color: transparent;
    cursor: pointer;
    width:40px;
    aspect-ratio: 1/1;
    background-image: url(../images/btn_arrow_next.svg);
    background-position: right center;
}

#mainVisual .splide__arrow {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
#mainVisual .splide__arrow svg {
    fill: #fff;
    width: 20px;
    height: 20px;
}
#mainVisual .splide__arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}
/* ドット
--------------------------------------------------------- */
#mainVisual .swiper-pagination {
    position: static;
    width:calc(100% - 40px - 45px - 40px - 40px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    z-index: 1!important;
}
#mainVisual .swiper-pagination-bullet {
    background: #3d3d3d;
    border: none;
    margin: 4px;
}
#mainVisual .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ff0000;
}
/* 再生停止
--------------------------------------------------------- */
#swiper-toggle {
    width:40px;
    height:40px;
    background: none;
    border: none;
    color: transparent;
    cursor: pointer;
}
#swiper-toggle::after {
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-image: url(../images/btn_pause.svg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 20px;
}
#swiper-toggle.slide-start::after {
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-image: url(../images/btn_pause.svg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 20px;
}

#swiper-toggle.slide-stop::after {
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background-image: url(../images/btn_play.svg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 20px;
}

/* ==============================================================
開催日程
============================================================== */
.top-schedule {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-image: url(../images/page-index/bg_information.jpg);
    background-repeat: no-repeat;
    background-size: 200%;
    position: relative;
}

.fc-scrollgrid-section-header>th:first-child {
    overflow: hidden;
    height: 56px !important;
    background-color: #ffe10000;
}

.kumamine-calendar-cat {
    content: "";
    display: inline-block;
    background-image: url(../images/page-index/pic_kumamine_calender.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top:1vw;
    right: 40vw;
    width: 100px;
    height:100px;
}

.under-items {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
button.autorace {
    position: relative;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(to right, #302e2c, #cd1720);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    height: 40px;
    transition: background 0.6s ease;
}
button.autorace:hover {
    top: 2px;
    background: linear-gradient(to right, #d80913, #857d73);
}
.btn-arrow {
    position: relative;
    padding-right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 16px;
}
  
/* 疑似要素で矢印 */
.btn-arrow::after,
.fc-linkBtn-button::after,
.btn-below::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../images/arrow_right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;

}

.fc-linkBtn-button::after {
    margin-left: 8px;
}
.btn-below::after {
    content: "";
    margin-left: 5px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(../images/arrow_below.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    filter: brightness(1.0);
}
/* クリックやホバーで矢印を動かしたい場合 */
.btn-arrow:hover::after,
.fc-linkBtn-button:hover::after {
    transform: translateX(2px); /* 右にスライド */
}

@media screen and (max-width: 991px) {
    .kumamine-calendar-cat {
        right: 25vw;
    }
}
@media screen and (max-width: 767px) {
    .kumamine-calendar-cat {
        display: none;
    }
    .under-items {
        flex-wrap: wrap;
    }
    button.autorace {
        width:100%;
    }

    .fc .fc-toolbar {
        display: flex;
        flex-wrap: wrap;
    }
    .fc-toolbar .fc-toolbar-chunk {
        width: 100%;
    }
    .fc-toolbar-title {
        width:100%;
    }
    .fc-toolbar .fc-toolbar-chunk:last-child {
        width: 100%;
        margin-top: 1.0rem;
    }
    .fc-linkBtn-button {
        width:100%;
    }
    .btn-arrow {
        justify-content: center;
    }
}

/* ==============================================================
別府競輪ってどんなところ
============================================================== */
.top-facility{
    padding:24px 24px 16px;
    background-color: #6fb37f;
    background-size:10px 10px;
}

.top-facility .container {
    background-color:#fff;
    border-radius:4px;
    padding-top: 1rem;
}

.top-facility h2::before {
    content: "";
    display: inline-block;

    width: 1.5em;     /* 文字サイズ基準 */
    height: 1.5em;

    margin-right: 0.3em;
    vertical-align: middle;

    background: url(../images/page-index/pic_kumamine_monky.png)
        no-repeat center / contain;
}

a.btn-facility{
    position:relative;
    display:block;
    height:100%;
    padding:8px 4px;
    font-size:.875rem;
    color:#2d2d2d;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
}
a.btn-facility img{
    object-fit: contain;
}
a.btn-facility:hover{
    top:2px
}
/* ==============================================================
バナースライダー
============================================================== */
#bnrSlider {
    width:100%;
    position: relative;
}
#bnrSlider .swiper-slide {
    padding: 0 8px;
}
#bnrSlider .custom-controls {
    display: none;
}
@media screen and (max-width: 991px) {
    #bnrSlider .custom-controls {
        position: absolute;
        top:0;
        z-index: 2;
        display: block;
        opacity:1;
        pointer-events:auto;
        width:100%;
        height:100%;
    }
    #bnrSlider .custom-controls .prev-arrow{
        position: absolute;
        top: 25%;
        height:50%;
        aspect-ratio: 1/1;
        background-image: url(../images/btn_arrow_prev.svg);
        background-position: left center;
        border: none;
        left:-20px;
    }
    #bnrSlider .custom-controls .next-arrow{
        position: absolute;
        top: 25%;
        height:50%;
        aspect-ratio: 1/1;
        background-image: url(../images/btn_arrow_next.svg);
        background-position: right center;
        border: none;
        right:-20px;
    }
}
/* ==============================================================
関連バナー
============================================================== */
.top-keirininfo {
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    background-color:#f2d79e;
    overflow: hidden;
}
.top-keirininfo .row > * {
    margin-bottom:8px;
}

.top-banner-slider {
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    overflow:hidden;
    background-color:#636363;
    background-image:linear-gradient(135deg, #6e6e6e 25%, #707070 25%, #707070 50%, #6e6e6e 50%, #6e6e6e 75%, #707070 75%);
    background-size:10px 10px;
}
.slick-banner {
    display:none;
}
.slick-banner.slick-initialized {
    display:block;
}
.slick-banner .prev-arrow {
    top:50%;
    left:-24px;
    margin-top:-24px;
}
.slick-banner .next-arrow {
    top:50%;
    right:-24px;
    margin-top:-24px;
}
.slick-banner .prev-arrow:hover,
.slick-banner .next-arrow:hover {
    top:calc(50% + 2px);
}
.slick-banner .slick-slide {
    padding:0 8px;
}

/* ==============================================================
緊急メッセージ
============================================================== */
#information-push{
    padding:20px;
    text-align:center;
    font-size: 24px;
}
.top-mainvisual{
    padding-top:24px;
    padding-bottom:56px
}
#information-push{
    padding:1rem;
    color:#000;
    text-align:center;
    background-color:#fff;
    border: #3c3c3c 3px solid;
}
#information-push h2{
    font-size:1.5rem;
}
#information-push h2::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    vertical-align: middle;
    background: url(../images/page-index/icon_emergency.svg) no-repeat center / contain;

    /* SVG色を赤に変更 */
    filter: invert(24%) sepia(95%) saturate(7500%) hue-rotate(345deg) brightness(65%) contrast(105%);
}
@media screen and (max-width: 991px){
    #information-push{
        margin-top: 50px;
    }
}

/* ==============================================================
画像ポップアップ表示
============================================================== */
#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    display: visible;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
}

/* ==============================================================
開催モード装飾
============================================================== */
@media screen and (min-width: 992px){
    .mode-kaisai .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .mode-kaisai .container {
        max-width:1320px
    }
}
.mode-kaisai .today-raceinfo-wrap {
    position: relative;
}
.mode-kaisai .today-raceinfo01 h3::before {
    content: "";
    display: inline-block;
    width: 70px;
    height: 70px;
    margin-right: 0.3em;
    vertical-align: middle;
}

.jimoto-racers h3::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat1.png) no-repeat center / contain;
}
.box-bankcondition h3::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat2.png) no-repeat center / contain;
}
.title-racelist::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat9.png) no-repeat center / contain;
}
.title-racer-comment::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat7.png) no-repeat center / contain;
}
.title-line::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat8.png) no-repeat center / contain;
}
.box-pickup3races-header h3::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat3.png) no-repeat center / contain;
}
.today-jogai-icon::before {
    background: url(../images/page-index/kaisai/pic_kumamine_cat4.png) no-repeat center / contain;
}

.mode-kaisai .today-raceinfo01 {
    margin-top: 0px;
    margin-left: 0px;
    width:100%;
    height: auto;
}

.mode-kaisai #todayrace {
    width:100%;
    box-shadow:none;
    overflow: visible;
}
@media screen and (min-width: 768px) {
    .mode-kaisai .today-raceinfo01 {
        padding-top: 145px;
        margin: 0 auto;
    }
}
@media screen and (min-width: 992px) {
    .mode-kaisai .today-raceinfo01 {
        padding-top: 95px;
        margin-left: 20px;
        width:calc(100% - 65px - 40px - 10px);
        position: relative;
    }
    .today-raceinfo-wrap {
        margin-left: 20px;
        width: calc(100% - 65px - 40px - 10px);
    }
}

/* 開催情報テストページ用 */
.mode-kaisai.mode-jogai #today-status-jogai,
.mode-kaisai.mode-hikaisai #today-status-hikaisai {
  display: none;
}

/* プロモーションリンク
------------------------------------------------------------ */
#movie-link {
    display:none;
}
.mode-jogai #movie-link,
.mode-hikaisai #movie-link {
    display:flex;
}
.mode-kaisai #movie-link {
    display:none;
}
@media screen and (max-width: 991px) {
    .mode-jogai #movie-link,
    .mode-hikaisai #movie-link {
        display:none;
    }
}
/* 場外発売モード
------------------------------------------------------------ */
.mode-jogai #today-status-jogai {
  display: block;
}
.mode-jogai #today-status-kaisai {
    display: none;
}

/* 非開催モード
------------------------------------------------------------ */
.mode-hikaisai #today-status-hikaisai {
  display: block;
}
.mode-jogai #today-status-kaisai,
.mode-hikaisai #today-status-kaisai {
    display: none;
}

/* ==============================================================
レース情報
============================================================== */
.hikaisai #todayrace {
    background-color: rgba(255, 255, 255, 0.9);
}
.today-date-y {
    margin-right:8px;
    font-size: 16px;
}
.today-date-md {
    margin-right:8px;
    font-size:32px
}
.today-date-dow {
    display:inline-block;
    padding:4px;
    font-size:16px;
    line-height:1;
    border:1px solid;
    border-radius:4px
}
.today-open {
    margin-left:16px;
    font-size:16px
}
.text-opentime {
    font-size:20px
}
.today-status{
    margin:0 auto 16px;
    font-size:20px;
    font-weight:bold;
    line-height:28px;
    text-align:center;
    border-radius:18px
}
.mode-cancel1 .today-status,
.mode-cancel2 .today-status {
    width:160px;
}
@media screen and (min-width: 768px){
    .mode-jogai .today-date-y,
    .mode-hikaisai .today-date-y {
        font-size:20px
    }
    .mode-jogai .today-date-md,
    .mode-hikaisai .today-date-md {
        font-size:42px
    }
    .mode-jogai .today-date-dow,
    .mode-hikaisai .today-date-dow {
        font-size:15px
    }
    .mode-jogai .today-open,
    .mode-hikaisai .today-open {
        font-size:20px
    }
    .mode-jogai .text-opentime,
    .mode-hikaisai .text-opentime {
        font-size:20px
    }
}
@media screen and (min-width: 992px){
    .mode-jogai .today-date-md,
    .mode-hikaisai .today-date-md {
        font-size:25px
    }
    .mode-kaisai .today-date-y {
        font-size:20px
    }
    .mode-kaisai .today-date-md {
        font-size:42px
    }
    .mode-kaisai .today-date-dow {
        font-size:15px
    }
    .mode-kaisai .today-open {
        font-size:20px
    }
    .mode-kaisai .text-opentime {
        font-size:20px
    }
    .mode-kaisai .today-status {
        font-size: 30px;
    }
}
@media screen and (min-width: 1281px){
    .mode-kaisai .today-date-y{
        font-size:25px
    }
    .mode-kaisai .today-date-md{
        font-size:50px
    }
    .mode-kaisai .today-date-dow{
        font-size:20px
    }
    .mode-kaisai .today-open{
        font-size:25px
    }
    .mode-kaisai .text-opentime{
        font-size:25px
    }

    .mode-jogai .today-date-y,
    .mode-hikaisai .today-date-y {
        font-size:20px
    }
    .mode-jogai .today-date-dow,
    .mode-hikaisai .today-date-dow {
        font-size:20px
    }
    .mode-jogai .today-open,
    .mode-hikaisai .today-open {
        font-size:20px
    }
    .mode-jogai .text-opentime,
    .mode-hikaisai .text-opentime {
        font-size:20px
    }
}

.day-info {
    color: #e65227;
}
#today-status-cancel1.today-status{
    color:#fff;
    background-color:#e42c1f;
}
#today-status-cancel2.today-status{
    color:#fff;
    background-color:#e42c1f;
}


#honjo-date{
    display:block;
    font-size:16px
}
@media screen and (min-width: 768px){
    #honjo-date{
        display:inline-block
    }
}

.mark-square-gp::before,
.mark-square-g1::before,
.mark-square-g2::before,
.mark-square-g3::before,
.mark-square-f1::before,
.mark-square-f2::before{
    position:absolute;
    top:0;
    left:0;
    display:block;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    border:1px solid #fff;
    border-radius:4px;
    font-weight: bold;
}
.mark-square-gp::before{
    content:"GP";
    background-image:linear-gradient(45deg, #fcee6c 0%, #ffbf35 72%, #bd9131 100%)
}
.mark-square-g1::before{
    content:"GI";
    /*background-image:linear-gradient(45deg, #ed6c4d 0%, #e62e02 72%, #e62e02 100%)*/
    background-image:linear-gradient(45deg, #ee6ca8 0%, #e62780 72%, #e62780 100%)
}
.mark-square-g2::before{
    content:"GII";
    background-image:linear-gradient(45deg, #9a68bf 0%, #744199 72%, #744199 100%)
}
.mark-square-g3::before{
    content:"GIII";
    background-image:linear-gradient(45deg, #9a68bf 0%, #744199 72%, #744199 100%)
    /*background-image:linear-gradient(45deg, #5852eb 0%, #2e27e6 72%, #2e27e6 100%)*/
}
.mark-square-f1::before{
    content:"FI";
    background-image:linear-gradient(45deg, #ffa333 0%, #ff8c00 72%, #ff8c00 100%)
}
.mark-square-f2::before{
    content:"FII";
    background-image:linear-gradient(45deg, #63c9f1 0%, #3a82d4 72%, #0880cf 100%);
    
}
.mark-nighter,
.mark-midnight,
.mark-morning,
.mark-summertime,
.mark-girls{
    display:inline-block;
    width:64px;
    height:0;
    padding-top:14px;
    overflow:hidden;
    vertical-align:middle;
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:64px 14px
}
.mark-nighter{
    background-image:url(../images/icon_nighter_long.png);
}
.mark-midnight{
    background-image:url(../images/icon_midnight_long.png);
}
.mark-morning{
    background-image:url(../images/icon_morning_long.png);
}
.mark-summertime{
    background-image:url(../images/icon_summertime_long.png);
}
.mark-girls{
    background-image:url(../images/icon_girls_long.png);
}

#honjo-grade{
    position:relative;
    padding:0 8px 8px 56px
}
#honjo-racename{
    display:inline;
    font-size:24px;
    line-height:1.2;
}
@media screen and (min-width: 768px){
    .kaisai #honjo-racename{
        font-size:24px;
    }
    .hikaisai #honjo-racename{
        font-size:20px;
        line-height:1.2;
    }
}
a#honjo-naiteipdf .btn-pdf-inner{
    margin-top:-4px
}
#today-honjo header::after{
    position:absolute;
    bottom:0;
    left:0;
    display:block;
    width:100%;
    height:1px;
    content:"";
    background-image:linear-gradient(-45deg, #f4d923 0%, #e5301e 100%)
}

#honjo-info-nodata{
    display:table-cell;
    font-size:14px;
    text-align:right
}
.text-cancel{
    font-weight:bold;
    color:#e62e27
}
#honjo-info-next{
    padding:8px;
    font-size:16px
}
#honjo-grade,
#honjo-grade a{
    color:#2d2d2d;
}

a.btn-pdf{
    position:relative;
    display:block;
    padding:4px;
    color: #fff !important;;
    text-decoration:none;
    background-color:#3c3c3c;
    box-shadow:0 4px 4px rgba(0,0,0,.1)
}
a.btn-pdf::before{
    display:block;
    float:left;
    width:20px;
    height:20px;
    margin-right:1px;
    content:"";
    background-image:url(../images/icon_pdf.svg);
    background-repeat:no-repeat;
    background-position:left center;
    background-size:20px 20px
}
a.btn-pdf:hover{
    top:2px;
    background-color:#2d2d2d
}
a.btn-pdf .btn-pdf-inner{
    float:right;
    margin-top:-4px;
    font-size:14px
}
a.btn-pdf .category{
    display:block;
    padding:0 2px 4px;
    font-size:12px;
    line-height:12px;
    text-align:center;
    background-color:#636363;
    border-radius:6px
}
a.btn-pdf::after{
    display:block;
    clear:both;
    content:""
}
a.btn-pdf[href=""]{
    display:none !important
}
#today-jogai a.btn-pdf .btn-pdf-inner{
    display:inline-block;
    margin-top:-4px
}
#jogai-info-next{
    padding:8px;
    margin-bottom:0;
    font-size:16px
}

#today-honjo .mark-square-gp::before,
#today-honjo .mark-square-g1::before,
#today-honjo .mark-square-g2::before,
#today-honjo .mark-square-g3::before,
#today-honjo .mark-square-f1::before,
#today-honjo .mark-square-f2::before{
    left:8px;
    width:40px;
    height:40px;
    font-size:18px;
    line-height:40px
}
@media screen and (min-width: 992px){
    #honjo-grade{
        padding:0 8px 8px 72px
    }
    #today-honjo .mark-square-gp::before,
    #today-honjo .mark-square-g1::before,
    #today-honjo .mark-square-g2::before,
    #today-honjo .mark-square-g3::before,
    #today-honjo .mark-square-f1::before,
    #today-honjo .mark-square-f2::before{
        left:8px;
        width:56px;
        height:56px;
        font-size:24px;
        line-height:56px
    }
}
@media screen and (min-width: 768px){
    #today-honjo .mark-nighter,
    #today-honjo .mark-midnight,
    #today-honjo .mark-morning,
    #today-honjo .mark-summertime,
    #today-honjo .mark-girls{
        width:73.142px;
        padding-top:16px;
        background-size:73.142px 16px
    }
}
@media screen and (min-width: 1400px){
    #today-honjo .mark-nighter,
    #today-honjo .mark-midnight,
    #today-honjo .mark-morning,
    #today-honjo .mark-summertime,
    #today-honjo .mark-girls{
        width:82.285px;
        padding-top:18px;
        background-size:82.285px 18px
    }
}
#today-jogai .mark-square-gp::before,
#today-jogai .mark-square-g1::before,
#today-jogai .mark-square-g2::before,
#today-jogai .mark-square-g3::before,
#today-jogai .mark-square-f1::before,
#today-jogai .mark-square-f2::before{
    top:8px;
    left:8px;
    width:32px;
    height:32px;
    font-size:16px;
    line-height:28px;
    border-radius:2px
}
#today-honjo{
    padding:4px;
    margin-bottom:16px;
    color:#2d2d2d;
}
#today-honjo header{
    position:relative;
    display:table;
    width:100%;
    padding:4px 8px;
    font-size:18px
}
#today-honjo header h3{
    display:table-cell;
    font-size:18px
}

.today-jogai-info header{
    position:relative;
    display:table;
    width:100%;
    padding:4px 8px;
    font-size:18px
}
.today-jogai-info header h3{
    display:table-cell;
    font-size:18px
}
#jogai-info{
    display:table-cell;
    font-size:14px;
    text-align:right
}
.list-todayrace{
    padding-left:0;
    margin-bottom:0;
    list-style:none
}
.list-todayrace li{
    position:relative;
    display:table;
    width:100%;
    padding:8px 8px 8px 48px;
    margin-bottom: 5px;
    border-radius: 8px;
    background-color:#ffffff;
    box-shadow:0 4px 4px rgba(0,0,0,.1);
}
.list-todayrace li h4{
    margin-bottom:0;
    font-size:16px;
    line-height:1.2;
    text-decoration:underline
}
.list-todayrace li p{
    margin-bottom:0;
    font-size:12px;
}
.list-todayrace li:first-child{
    border-top:none;
}
.list-todayrace li.hidden{
    display:none
}
.list-todayrace a{
    display:table-cell;
    vertical-align:top
}
.list-todayrace a.jogai-url{
    color:#2d2d2d;
    text-decoration:none
}
.list-todayrace a.jogai-url[href=""]{
    pointer-events:none
}
.list-todayrace a.jogai-url[href=""] h4{
    text-decoration:none
}
.list-todayrace a.btn-pdf{
    width:80px;
    text-align:center
}
.list-todayrace a.btn-pdf::before{
    display:none
}
.list-todayrace a.btn-pdf[href=""]{
    display:none
}
.list-todayrace a.btn-pdf .btn-pdf-inner{
    float:none
}

/* ==============================================================
ライブ映像
============================================================== */
.mode-kaisai .today-raceinfo01-01{
    padding:1rem 10px;
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 10px;
}
.movie-area{
    padding:0 16px
}
.movie-area video{
    width:100%;
    height:64%;
    background-color:#3c3c3c
}
@media screen and (min-width: 768px){
    .movie-area{
        padding:16px 0 0
    }
}

/* ==============================================================
地元出場選手
============================================================== */

.jimoto-racers {
    position: relative;
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
}
.racer-fade {
    overflow: hidden;
}
.racer-box {
    display: flex;
    height:150px;
    gap: 12px;
    background: #ffd478;
    color: #2d2d2d;
    border-radius: 8px;
    padding: 8px;
    align-items: center;
}
.racer-box.grade-S {
    background: #ffd478;
}
.racer-box.grade-A {
    background: #78ffbc;
}
.racer-box.grade-L {
    background: #ffb2b0;
}
.racer-box img {
    width: 35%;
    border-radius: 8px;
    object-fit: cover;
}
.racer-box p {
    text-align: center;
    margin: 0;
    line-height: 1.2;
}
.racer-name {
    text-wrap: nowrap;
}
.entry-race {
    font-size: 1.5rem;
    font-weight: bold;
    text-wrap: nowrap;
}
.jimoto-racers .swiper-button-prev,
.jimoto-racers .swiper-button-next {
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s ease;
    opacity: 0;
}
.jimoto-racers .swiper-button-next {
    background-image: url(../images/btn_arrow_next.svg);
    background-position: right center;
}
.jimoto-racers .swiper-button-prev {
    background-image: url(../images/btn_arrow_prev.svg);
    background-position: left center;
}
.jimoto-racers .swiper:hover .swiper-button-prev,
.jimoto-racers .swiper:hover .swiper-button-next {
    opacity: 1;
}
.jimoto-racers .swiper-pagination-bullet {
    background: #ffffff;
    border: #000 1px solid;
    opacity: 0.8;
}
.jimoto-racers .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height:12px;
    width:12px;
    background: #ff0000;
    border: #fff 1px solid;
}

.jimoto-racers .swiper-pagination {
    bottom: 0px!important;
}
@media screen and (max-width: 1200px){
    #jimotoSplide {
        font-size: 13px;
    }
    .entry-race {
        font-size: 1.2rem;
        font-weight: bold;
    }
    .racer-box {
        gap: 8px;
        padding: 8px;
    }
}
@media screen and (max-width: 1024px){
    .racer-box {
        gap: 6px;
        padding: 8px;
    }
}
@media screen and (max-width: 991px){
    #jimotoSplide {
        font-size: 16px;
    }
    .entry-race {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .racer-box {
        gap: 12px;
        padding: 8px;
    }
    .jimoto-racers .swiper .swiper-button-prev,
    .jimoto-racers .swiper .swiper-button-next {
        display: none;
    }
}
/* ==============================================================
バンクコンディション
============================================================== */
.box-bankcondition{
    overflow:hidden;
    border-radius:2px;
    box-shadow:0 4px 4px rgba(0,0,0,.1);
    background-color: #ffffffcc;
    padding: 10px;
    border-radius: 8px;
}
.box-bankcondition-header{
    padding:4px;
}
.box-bankcondition-header h3{
    margin-bottom:0;
    line-height:1.2;
}

.btn-keirinjp,
a.btn-keirinjp{
    padding:.5rem .25rem;
}
a.btn-kaisai,
button.btn-kaisai {
    position: relative;
    display: inline-flex;
    padding: .5rem .25rem;
    text-decoration: none;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(to right, #1abc9c, #a3e635);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.6s ease;
}

a.btn-kaisai:hover,
button.btn-kaisai:hover {
    background: linear-gradient(to right, #a3e635, #1abc9c);
    top: 2px;
}

.condition-header-note{
    margin-bottom:0;
}

/*縦の大きさ均等に*/
@media screen and (min-width: 768px) {
    .condition-wrap .row-4 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
      
    .condition-wrap .row-4 > .col-md-12 {
        flex: 1;
    }
    .p-important {
        padding-left: 0!important;
    }    
}
  
/* 風向 */
.condition-windflow {
    position: relative;
    padding: 8px 16px;
    text-align: center;
    background-color: #2d2d2d;
}
  
.windflow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: translateX(-50%);
}
  
.windflow0 {
    background-image: url(../images/page-index/bank/arrow_windflow0.png);
}

.windflow45 {
    background-image: url(../images/page-index/bank/arrow_windflow45.png);
}

.windflow90 {
    background-image: url(../images/page-index/bank/arrow_windflow90.png);
}

.windflow135 {
    background-image: url(../images/page-index/bank/arrow_windflow135.png);
}

.windflow180 {
    background-image: url(../images/page-index/bank/arrow_windflow180.png);
}

.windflow225 {
    background-image: url(../images/page-index/bank/arrow_windflow225.png);
}

.windflow270 {
    background-image: url(../images/page-index/bank/arrow_windflow270.png);
}

.windflow315 {
    background-image: url(../images/page-index/bank/arrow_windflow315.png);
}

.condition-time {
    position: absolute;
    right: 8px;
    bottom: 0;
    font-size: 12px;
    text-align: right;
}

.condition-wrap {
    padding-top: 8px;
}

.condition-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 8px 8px 4px;
    background-color: #2d2d2d;
    border-radius: 2px;
}
.condition-data > div {
    height: 100%;
    line-height: 1;
}

.weather {
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 48px 48px;
}
.weather::after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    line-height: 1;
    text-align: center;
}

.weather-fine {
    background-image: url(../images/page-index/bank/weather_fine.svg);
}
.weather-fine::after {
    content: "晴れ";
}

.weather-cloud {
    background-image: url(../images/page-index/bank/weather_cloud.svg);
}
.weather-cloud::after {
    content: "曇り";
}

.weather-rain {
    background-image: url(../images/page-index/bank/weather_rain.svg);
}
.weather-rain::after {
    content: "雨";
}

.weather-snow {
    background-image: url(../images/page-index/bank/weather_snow.svg);
}
.weather-snow::after {
    content: "雪";
}

.weather-other {
    background-image: url(../images/page-index/bank/weather_other.svg);
}
.weather-other::after {
    content: "その他";
}

.weather-hyphen {
    background-image: url(../images/page-index/bank/weather_hyphen.svg);
}

.icon-condition {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}

.icon-condition-note {
    line-height: 1;
}

.text-condition-data {
    font-size: 24px;
}

.templ, .windspeed {
    display: flex;
    align-items: center;
}

@media screen and (min-width: 576px) {
    .box-bankcondition-header {
        padding: 4px 8px;
    }
}
@media screen and (min-width: 768px) {
    .box-bankcondition {
        margin-top: auto;
        font-size: 16px;
    }
    .box-bankcondition-header {
        padding: 8px;
    }
    .condition-windflow {
        padding: 16px 24px;
    }
}
@media screen and (min-width: 992px) {
    .condition-windflow {
        padding: 24px 32px;
    }
    .weather {
        background-size: 30px 30px;
    }
    .icon-condition {
        width: 28px;
        height: 28px;
    }
    .icon-condition-note {
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) {
    .weather {
        background-size: 35px 35px;
    }
    .icon-condition {
        width: 30px;
        height: 30px;
    }
}
@media screen and (min-width: 1100px) {
    .weather {
        background-size: 40px 40px;
    }
}
@media screen and (min-width: 1200px) {
    .icon-condition {
        width: 40px;
        height: 40px;
    }
    .weather {
        background-size: 48px 48px;
    }
    .icon-condition-note {
        font-size: 16px;
    }
    .condition-windflow {
        padding: 24px 48px;
    }
}
  
.icon-condition-note,
.text-condition-data,
.condition-wrap,
.condition-time{
    color: #fff;
}

/* ==============================================================
出走表～並び予想 表示調整
============================================================== */
.mode-kaisai #today-honjo{
    background-color:rgba(0,0,0,0);
    box-shadow:none
}
.mode-kaisai #today-honjo header::after{
    display:none
}
.mode-kaisai #honjo-info-next{
    display:none
}

.mode-kaisai #today-status-kaisai,
.mode-kaisai .movie-area{
    display:block
}
.mode-kaisai #today-status-kaisai::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.3em;
    vertical-align: middle;
    background: url(../images/page-index/pic_kumamine_monky.png) no-repeat center / contain;
}
.mode-kaisai.mode-day #today-status-kaisai::after {
    content: "　昼間";
}
.mode-kaisai.mode-day #today-status-kaisai::before {
    background: url(../images/page-index/kaisai/icon_day.png) no-repeat center / contain;
}
.mode-kaisai.mode-nighter #today-status-kaisai::after {
    content: "　ナイター";
}
.mode-kaisai.mode-nighter #today-status-kaisai::before {
    background: url(../images/page-index/kaisai/icon_nighter.png) no-repeat center / contain;
}
.mode-kaisai.mode-midnight #today-status-kaisai::after {
    content: "　ミッドナイト";
}
.mode-kaisai.mode-midnight #today-status-kaisai::before {
    background: url(../images/page-index/kaisai/icon_midnight.png) no-repeat center / contain;
}
.mode-kaisai.mode-morning #today-status-kaisai::after {
    content: "　モーニング";
}
.mode-kaisai.mode-morning #today-status-kaisai::before {
    background: url(../images/page-index/kaisai/icon_morning.png) no-repeat center / contain;
}

.mode-kaisai #honjo-info-title,
.mode-kaisai #honjo-info-nodata{
    display:none
}
.mode-kaisai .section-kaisaibanner{
    padding-bottom:24px
}
.mode-kaisai .section-jogai-info{
    padding-bottom:24px
}
.mode-kaisai.mode-cancel1 #today-status-cancel1{
    display:block
}
.mode-kaisai.mode-cancel1 #today-status-kaisai{
    display:none
}
.mode-kaisai.mode-cancel2 #today-status-cancel2{
    display:block
}
.mode-kaisai.mode-cancel2 #today-status-kaisai{
    display:none
}

.mode-kaisai .today-raceinfo02-01-inner{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.mode-kaisai .section-kaisaibanner{
    padding: 16px 24px;
}
.mode-kaisai .section-jogai-info{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.mode-kaisai .section-kaisaibanner{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.tab-content .box-racelist-header {
    border-top:2px solid #3c3c3c;
    padding-top:25px;
    margin-top: 50px;
}
@media screen and (max-width: 767px){
    .mode-kaisai .today-raceinfo01-02-inner{
        padding:24px
    }
    .mode-kaisai .today-raceinfo02-01-inner{
        padding:24px
    }
    /*
    .mode-kaisai .today-raceinfo02-02-inner{
        padding:0 24px 24px
    }
    /*
    .mode-kaisai .box-pickup3races{
        margin-right:-24px;
        margin-left:-24px
    }
        */
    .mode-kaisai .box-pickup3races-header h3{
        letter-spacing:-0.1em
    }
    /*
    .mode-kaisai .section-kaisaibanner{
        padding-bottom:0
    }
        */
}
@media screen and (min-width: 768px){
    .mode-kaisai .today-raceinfo01-02{
        width:40%
    }
    .mode-kaisai .today-raceinfo01-02-inner{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        height:100%;
        padding:0px;
    }
    .mode-kaisai .today-raceinfo02-01-inner{
        padding:16px 24px;
    }
    .mode-kaisai .section-kaisaibanner{
        padding: 16px 24px;
    }
    .mode-kaisai #todayrace{
        padding:0;
    }
    .today-raceinfo01>.row,
    .today-raceinfo02>.row{
        flex-direction:row;
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }
    .today-status{
        font-size:36px;
        line-height:40px
    }
    .mode-cancel1 .today-status,
    .mode-cancel2 .today-status {
        width:240px;
    }
}
@media screen and (min-width: 992px){
    .mode-kaisai .col.today-raceinfo01-01{
        flex:0 0 auto;
        width:60%;
        height: 90%;
        box-shadow:0 4px 4px rgba(0,0,0,.1)
    }
    .mode-kaisai .col.today-raceinfo01-02{
        flex:0 0 auto;width:40%
    }
}
.text-teikyo{
    font-size:16px
}

/* ==============================================================
出走表
============================================================== */
/*レース切り替えボタン*/
.box-racelist .nav-tabs-toggle{
    display:none;
}
.box-racelist .nav-tabs{
    border-bottom-color:#ffffff00;
}
.box-racelist .nav-tabs .nav-link{
    padding:8px 2px;
    font-size:14px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    background-color:#3c3c3c;;
    border-color:#fff;
    border-top-left-radius:0;
    border-top-right-radius:0;
    transition:none;
}
.box-racelist .nav-tabs .nav-link.active{
    background-color:#fb641f;
}
.box-racelist .nav-tabs .nav-link :hover{
    background-color:#575757;
}
.box-racelist .nav-tabs .nav-item{
    min-width:8.33%;
}
@media screen and (max-width: 575px){
    .box-racelist .nav-tabs .nav-item{
        width:25%;
    }
}
@media screen and (max-width: 767px){
    .box-racelist .nav-tabs-toggle{
        display:block;
    }
    #spTabOpener {
        display: none;
    }
}
@media screen and (min-width: 576px){
    .nav-tabs-opener{
        display:none;
    }
    .box-racelist .nav-tabs-toggle{
        display:block !important;
    }
    .box-racelist .nav-item,
    .box-racelist .nav-tabs:has(#tab08) .nav-item{
        flex:0 0 auto;
        width:8.33333333%;
        max-width:14.2%;
    }
}
/*出走表情報*/
.racelist-title{
    position:relative;
    padding:4px 8px 4px 44px;
    color:#fff;
    background-image:linear-gradient(-45deg, #1abc9c 0%, #a3e635 100%);
}
.racelist-no{
    position:absolute;
    top:50%;
    left:8px;
    display:block;
    width:32px;
    height:0;
    padding-top:32px;
    margin-bottom:0;
    overflow:hidden;
    font-weight:bold;
    color:#2d2d2d;
    text-align:center;
    background-color:#ffe100;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:contain;
    border-radius:4px;
    transform:translateY(-50%);
}
#racelist1 .racelist-no{
    background-image:url(../images/page-index/racelist/text_01r.svg);
}
#racelist2 .racelist-no{
    background-image:url(../images/page-index/racelist/text_02r.svg);
}
#racelist3 .racelist-no{
    background-image:url(../images/page-index/racelist/text_03r.svg);
}
#racelist4 .racelist-no{
    background-image:url(../images/page-index/racelist/text_04r.svg);
}
#racelist5 .racelist-no{
    background-image:url(../images/page-index/racelist/text_05r.svg);
}
#racelist6 .racelist-no{
    background-image:url(../images/page-index/racelist/text_06r.svg);
}
#racelist7 .racelist-no{
    background-image:url(../images/page-index/racelist/text_07r.svg);
}
#racelist8 .racelist-no{
    background-image:url(../images/page-index/racelist/text_08r.svg);
}
#racelist9 .racelist-no{
    background-image:url(../images/page-index/racelist/text_09r.svg);
}
#racelist10 .racelist-no{
    background-image:url(../images/page-index/racelist/text_10r.svg);
}
#racelist11 .racelist-no{
    background-image:url(../images/page-index/racelist/text_11r.svg);
}
#racelist12 .racelist-no{
    background-image:url(../images/page-index/racelist/text_12r.svg);
}
.racelist-name{
    margin-bottom:0;
    line-height:1.5;
}
.text-startingtime{
    margin-bottom:0;
    font-size:14px;
    line-height:1.2;
}
.table-racelist{
    width:100%;
    text-align:center;
    white-space:nowrap;
}
.table-racelist th,
.table-racelist td{
    padding:4px;
    font-size:11px;
    white-space:nowrap;
    border:1px solid #fff;
}
.table-racelist th{
    line-height:1.5;
    color:#fff;
    background-color:#3c3c3c;
}
.table-racelist th.bg-lightgray{
    color:#2d2d2d;
    background-color:#f5f4f2;
}
.td-player{
    line-height:1.2;
    text-align:left;
}
.td-player a{
    position:relative;
    display:block;
    min-height:32px;
    padding-left:40px;
    color:#2d2d2d;
    text-decoration:none;
}
.td-player a:hover{
    opacity:0.8;
}
.td-player a::after{
    position:absolute;
    right:0;
    bottom:0;
    display:block;
    width:8px;
    height:8px;
    clip-path:polygon(100% 0, 100% 100%, 0 100%);
    content:"";
    background-color:#636363;
}
.player-photo{
    position:absolute;
    top:0;
    left:0;
}
.img-player{
    width:32px;
    height:32px;
    border:1px solid #ccc;
    border-radius:4px;
    object-fit:cover;
    object-position:50% 20%;
}
.table-comment{
    width:100%;
}
.table-comment th,
.table-comment td{
    padding:4px;
    font-size:12px;
    border:1px solid #fff;
}
.td-mark,
.td-syaban{
    width:24px;
    text-align:center;
}
.tr-syaban01{
    background-color:#fbfbfd;
}
.tr-syaban01 .td-syaban{
    background-color:#fbfbfd;
}
.tr-syaban02{
    background-color:#f5f5f5;
}
.tr-syaban02 .td-syaban{
    color:#fff;
    background-color:#404040;
}
.tr-syaban03{
    background-color:#fff0f0;
}
.tr-syaban03 .td-syaban{
    color:#fff;
    background-color:#e42c1f;
}
.tr-syaban04{
    background-color:#f0f5ff;
}
.tr-syaban04 .td-syaban{
    color:#fff;
    background-color:#06c;
}
.tr-syaban05{
    background-color:#fffcf0;
}
.tr-syaban05 .td-syaban{
    background-color:#ffe100;
}
.tr-syaban06{
    background-color:#f0ffeb;
}
.tr-syaban06 .td-syaban{
    color:#fff;
    background-color:#228900;
}
.tr-syaban07{
    background-color:#fff8eb;
}
.tr-syaban07 .td-syaban{
    color:#fff;
    background-color:#ff9500;
}
.tr-syaban08{
    background-color:#fceaf4;
}
.tr-syaban08 .td-syaban{
    color:#fff;
    background-color:#e84ea3;
}
.tr-syaban09{
    background-color:#f6ecfc;
}
.tr-syaban09 .td-syaban{
    color:#fff;
    background-color:#aa40e4;
}
.box-narabi{
    position:relative;
    padding-left:24px;
}
.box-narabi::before{
    position:absolute;
    top:4px;
    left:4px;
    display:inline-block;
    content:"←";
}
.table-narabi{
    width:100%;
    text-align:center;
    table-layout:fixed;
}
.syaban1,
.syaban2,
.syaban3,
.syaban4,
.syaban5,
.syaban6,
.syaban7,
.syaban8,
.syaban9{
    padding:2px;
    border:solid 1px #404040;
}
.syaban1{
    background-color:#fbfbfd;
}
.syaban2{
    color:#fff;
    background-color:#404040;
}
.syaban3{
    color:#fff;
    background-color:#e42c1f;
}
.syaban4{
    color:#fff;
    background-color:#06c;
}
.syaban5{
    background-color:#ffe100;
}
.syaban6{
    color:#fff;
    background-color:#228900;
}
.syaban7{
    color:#fff;
    background-color:#ff9500;
}
.syaban8{
    color:#fff;
    background-color:#e84ea3;
}
.syaban9{
    color:#fff;
    background-color:#aa40e4;
}
@media screen and (min-width: 576px){
    .table-racelist th,
    .table-racelist td{
        font-size:12px;
    }
}
@media screen and (min-width: 768px){
    .box-racelist-header .text-wait{
        padding:16px 0 8px 8px;
    }
    .pickup3races-note{
        font-size:14px;
    }
    .box-pickup3races{
        padding:16px;
    }
    .table-racelist th,
    .table-racelist td{
        font-size:12px;
    }
    .table-racelist td{
        font-size:16px;
    }
    .table-comment th,
    .table-comment td{
        font-size:16px;
    }
    .td-player a{
        min-height:40px;
        padding-left:48px;
    }
    .img-player{
        width:40px;
        height:40px;
    }
    .racelist-title{
        padding:4px 8px 4px 56px;
    }
    .racelist-title .racelist-no{
        width:40px;
        padding-top:40px;
    }
}
@media screen and (min-width: 768px){
    .mode-kaisai .section-jogai-info{
        padding:16px 10px;
    }
}
@media screen and (min-width: 1200px){
    .td-player a{
        min-height:48px;
        padding-left:56px;
    }
    .img-player{
        width:48px;
        height:48px;
    }
}
.racelist-title{
    padding:8px 8px 8px 64px;
}
.racelist-title .racelist-no{
    width:48px;
    padding-top:48px;
}
.today-jogai-info{
    padding:4px;
    margin: 4px;
    color:#2d2d2d;
}
.box-racelist-footer,
#twelfthRaceCommentTable {
    margin-bottom: 50px;
}

/* ==============================================================
注目3レース
============================================================== */
.box-pickup3races{
    padding:16px 24px;
    margin-bottom:1rem;
    background-color: #ffffffcc;
    box-shadow:0 4px 4px rgba(0,0,0,.1);
    border-radius: 8px;
}
.box-pickup3races .box-header{
    padding:4px 8px;
    margin:-8px -8px 8px;
    font-size:16px;
    color:#fff;
    background-image:linear-gradient(-45deg, #1abc9c 0%, #a3e635 100%);
}
.box-pickup3races .box-round{
    padding:8px;
    margin-top:16px;
    overflow:hidden;
}
.box-pickup3races .box-round:last-child{
    margin-bottom:0;
}
.box-pickup3races h5{
    font-size:14px;
}
.box-pickup3races .text-update{
    margin-bottom:0;
}
.box-pickup3races-header{
    color:#2d2d2d;
}
.box-pickup3races-header h3{
    margin-bottom:0;
}
.box-pickup3races-header .pickup3races-note{
    margin-bottom:8px;
    font-size:12px;
}


/* ==============================================================
カラー設定
============================================================== */
.mode-kaisai .today-raceinfo01,
.mode-kaisai .today-raceinfo01 h3,
.mode-kaisai .text-teikyo,
.mode-kaisai .text-update {
    color:#001e64;
}

.day-info {
    color: #e65227;
}

.mode-kaisai .today-raceinfo01-01{
    background-color: #ffffffcc;
}

.mode-kaisai .day-info {
    color: #001e64;
}
.mode-kaisai.mode-morning .day-info {
    color: #fb641f;
}
.box-bankcondition{
    background-color: #ffffffcc;
}

.mode-kaisai .today-raceinfo02-01-inner{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.mode-kaisai .section-jogai-info{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.mode-kaisai .section-kaisaibanner{
    background-color: #ffffffcc;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    border-radius: 8px;
}

.box-racelist .nav-tabs .nav-link.active{
    background-color:#fb641f;
}
.box-racelist .nav-tabs .nav-link :hover{
    background-color:#575757;
}
.racelist-no{
    color:#2d2d2d;
    background-color:#ffe100;
}

.mode-kaisai.mode-day a.btn-kaisai:hover,
.mode-kaisai.mode-day button.btn-kaisai:hover {
    background: linear-gradient(-45deg, #a3e635, #1abc9c);
}
.mode-kaisai.mode-nighter a.btn-kaisai:hover,
.mode-kaisai.mode-nighter button.btn-kaisai:hover {
    background: linear-gradient(-45deg, #bb7cc4, #005fd7);
}
.mode-kaisai.mode-midnight a.btn-kaisai:hover,
.mode-kaisai.mode-midnight button.btn-kaisai:hover {
    background: linear-gradient(-45deg, #1e1e68, #840091);
}
.mode-kaisai.mode-morning a.btn-kaisai:hover,
.mode-kaisai.mode-morning button.btn-kaisai:hover {
    background: linear-gradient(-45deg, #7ea8fd, #ffdc28);
}

.mode-kaisai.mode-day .racelist-title,
.mode-kaisai.mode-day .box-pickup3races .box-header,
.mode-kaisai.mode-day a.btn-kaisai,
.mode-kaisai.mode-day button.btn-kaisai {
    color:#fff;
    background-image:linear-gradient(-45deg, #1abc9c 0%, #a3e635 100%);
}
.mode-kaisai.mode-nighter .racelist-title,
.mode-kaisai.mode-nighter .box-pickup3races .box-header,
.mode-kaisai.mode-nighter a.btn-kaisai,
.mode-kaisai.mode-nighter button.btn-kaisai {
    color:#fff;
    background-image:linear-gradient(-45deg, #005fd7 0%, #bb7cc4 100%);
}
.mode-kaisai.mode-midnight .racelist-title,
.mode-kaisai.mode-midnight .box-pickup3races .box-header,
.mode-kaisai.mode-midnight a.btn-kaisai,
.mode-kaisai.mode-midnight button.btn-kaisai {
    color:#fff;
    background-image:linear-gradient(-45deg, #840091 0%, #1e1e68 100%);
}
.mode-kaisai.mode-morning .racelist-title,
.mode-kaisai.mode-morning .box-pickup3races .box-header,
.mode-kaisai.mode-morning a.btn-kaisai,
.mode-kaisai.mode-morning button.btn-kaisai {
    color:#fff;
    background-image:linear-gradient(-45deg, #ffdc28 0%, #7ea8fd 100%);
}

.mode-kaisai .racelist-title,
.mode-kaisai .box-pickup3races .box-header,
.mode-kaisai a.btn-kaisai,
.mode-kaisai button.btn-kaisai {
    text-shadow:
    0 0 2px #001e64,
    1px 1px 2px #001e64,
    -1px 1px 2px #001e64,
    1px -1px 2px #001e64,
    -1px -1px 2px #001e64;
}

.mode-kaisai .box-bankcondition .btn-arrow::after,
.mode-kaisai .jimoto-racers .btn-below::after {
    filter:
    drop-shadow(0 0 1.5px #001e64)
    drop-shadow(0 0 1px #001e64);
}

.mode-kaisai.mode-morning .box-bankcondition .btn-arrow::after,
.mode-kaisai.mode-morning .jimoto-racers .btn-below::after {
    filter:
    drop-shadow(0 0 1.5px #001e64)
    drop-shadow(0 0 1px #001e64);
}

.mode-kaisai .btn-keirinjp span::before {
    filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 1px #fff);
}

/* ==============================================================
専門誌表示
============================================================== */
.mode-kaisai .senmonshi,
.mode-kaisai .senmonshi-morning,
.mode-kaisai .senmonshi-midnight {
    display: none;
}

.mode-kaisai:not(.mode-morning):not(.mode-midnight) .senmonshi {
    display: flex;
}

.mode-kaisai.mode-morning .senmonshi-morning {
    display: flex;
}

.mode-kaisai.mode-midnight .senmonshi-midnight {
    display: flex;
}

/* ==============================================================
開催アニメーション
============================================================== */
/* 昼間
------------------------------------------------------------ */
.mode-kaisai {
    position: relative;
    height: 100vh;
}
  
.mode-kaisai.mode-day .anime-kaisai {
    background-color: #a7dcff;
}

.mode-kaisai {
    position: relative;
    height: 100vh;
}

.anime-kaisai {
    position: relative;
    width: 100%;
    height: 100%;
}

.anime-day {
    width:100%;
    height:100%;
}
  
.sun {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    background: #ffcc33;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    
    /* 輝くふち */
    box-shadow:
        0 0 8px 2px #fff,    /* 内側の光 */
        0 0 20px 5px #ffea70, /* 外側の光 */
        0 0 30px 10px #ffe066;
}

.anime-day .cloud {
    position: absolute;
    width: 10vw;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* ナイター
------------------------------------------------------------ */
.mode-kaisai.mode-nighter .anime-kaisai {
    background: linear-gradient(to bottom, #001e64, #8e4672);
}

.moon {
    position: absolute;
    width: 10vw;
    left: 10%;
    top: 80px;
    aspect-ratio: 1;
    background-image: url("/images/page-index/anime/pic_moon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  
    /* 光 */
    filter: drop-shadow(0 0 6px rgba(255,255,220,0.6))
            drop-shadow(0 0 18px rgba(255,240,180,0.8))
            drop-shadow(0 0 30px rgba(255,230,150,0.9));
}

.star {
position: absolute;
border-radius: 50%;
background: white;
opacity: 0.8;
}

/* ミッドナイト
------------------------------------------------------------ */
.mode-kaisai.mode-midnight .anime-kaisai {
    background: linear-gradient(to bottom, #000a20, #1e162c);
}
.svg-star {
    position: absolute;
    user-select: none;
}

/* モーニング
------------------------------------------------------------ */
.mode-kaisai.mode-morning .anime-kaisai{
    background: #f6ffc5;
}
.mode-kaisai.mode-morning .anime-kaisai .anime-day{
    position: fixed;
    width:100%;
    height:100vh;
    overflow: hidden;
}
.mode-kaisai.mode-morning .anime-kaisai .anime-morning {
    background: linear-gradient(to bottom, #9bb7f3 20%, #fff1b5);
}
.anime-morning {
    position: absolute;
    width:100%;
    height:85vh;
    overflow: hidden;
}
.morning-sun {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    background: #ffd84d;
    z-index: 2;

    /* ちょっとだけぼかし */
    filter: blur(2px);
}

/* 朝用 太陽光（大きな円） */
.morning-sun-glow {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 120vw;
    height: 120vw;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 15%,
        rgba(255, 216, 77, 0.35) 38%,
        rgba(255, 216, 77, 0.22) 55%,
        rgba(255, 216, 77, 0.12) 70%,
        rgba(255, 216, 77, 0.04) 85%,
        rgba(255, 216, 77, 0.0) 100%
    );

    filter: blur(18px);
}
  
.morning-sun-reflection {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    background: #fff892;
    z-index: 0;
    
    filter: blur(10px);
}