@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tbody, tfoot, thead, tr, th, td,
article, canvas, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     font-weight: normal;
     vertical-align:baseline;
     background:transparent;
     list-style: none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    /*background-color: #4f4f4f;*/
    background-color: #121111;
    color: rgb(51,51,51);
    font-family: "ヒラギノ角ゴ ProN W3", arial, "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", sans-serif;
    text-shadow: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.light-mode {
    background-color: #ffffff;
}
.notice {
    margin-top: 100px;
    color: yellow;
}
.sc-hint {
    background-image: url("/content/svg/swipe.svg");
    position: absolute;
    left: 240px;
    display: block;
    opacity: 30%;
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 10%;
}
.past-date-navi > ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
}
.past-date-navi > ul > li:first-child {
    border-left: 1px solid darkgray;
}
.past-date-navi > ul > li {
    display: block;
    padding: 5px;
    border-top: 1px solid darkgray;
    border-bottom: 1px solid darkgray;
    border-right: 1px solid darkgray;
}
.past-date-navi a {
    text-decoration: none;
    color: darkgray;
    font-weight: 700;
    letter-spacing: 2;
}
.past-race-date-dsp {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    color: ghostwhite;
    font-weight: 600;
}
.race-navi > ul {
    /*background-color: #242526;*/
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}
.race-navi > ul > li {
    width: 90px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.race-navi > ul > li > a {
    background-color: #3a3b3c;
    text-decoration: none;
    color: ghostwhite;
    font-weight: 700;
    letter-spacing: 1;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
}
.prev:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../content/svg/prev.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.next:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../content/svg/next.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.course-dsp {
    background: none;
    color: ghostwhite;
    font-weight: 500;
}
.no-data-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}
.no-data-notice h4 {
    color: ghostwhite;
}

.add-area {
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-area span{
    margin: 10px;
}

/* デザインB（タブレット） */
@media screen and (min-width: 600px) {
    
}

/* デザインC(PC) */
@media screen and (min-width: 1025px) {
    .sc-hint {
        display: none;
        
    }
}

#mode-switch-area {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center; 
}
/* スイッチのスタイル */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 20px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #f38d21;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* アイコンのスタイル */
.icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.moon-icon {
    background-image: url("../content/svg/moon.svg");
    visibility: visible;
}

.sun-icon {
    background-image: url("../content/svg/day.svg");
    /*visibility: hidden;*/
}

input:checked + .slider .sun-icon {
     /*visibility: visible;*/
}

input:checked + .slider .moon-icon {
    /*visibility: hidden;*/
}