*{
    font-family:sans-serif;
}
body {
    margin:0;
}

div.main{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px; /* 固定の余白 */
}

div.header_game{
    width: 100%;
    background-color: #1471D6;
    position:sticky;
    top:0;
    z-index: 30;
    left: 0;
    right: 0;
}
div.game_wrap{
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
div.game{
    width: 100%;
    position: relative;
    color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    font-size: small;
    text-align: left;
    font-weight: lighter;
    margin:0;
    display: block;
}

div.header_date{
    width: 100%;
    background-color: #E7F3FF;
    z-index: 20;
    left: 0;
    right: 0;
    border-bottom: solid 2px blue;
}
div.date_wrap{
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
div.date{
    display: flex;
    justify-content: space-between;
    font-size: small;
    background-color: #E7F3FF;
    margin:0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    height: 30px;
    line-height: 5px;
}
div.timetable{
    margin-top: 20px;
    border-radius: 15px;
    background-color: rgb(244, 244, 244);
    padding: 2px 2px;
    /* border-radius: 3px; */
    box-shadow: inset -5px -5px 10px 0px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.ev_group_timetable{
    padding-left: 1rem;
    color: black;
    font-family:sans-serif;
    font-weight: bold;
    text-align: left;
    margin: 0;
    margin-top: 1rem;
}
.ev_group{
    padding-left: 1rem;
    color: black;
    font-family:sans-serif;
    font-weight: bold;
    text-align: left;
    margin: 0;
    margin-top: 3rem;
}
hr{
    display: none;
}
div.round{
    width: fit-content;
    font-weight: normal;
    margin: 1rem 0;
    color: black;
    padding: 0.2rem 1rem;
    text-align: left;
    font-size: 1rem;
    border: 1px solid #004896;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px #a6a4c6;
    background-color: #d4e3f7;
    /* box-shadow: inset -5px -5px 10px 0px rgba(255, 255, 255, 0.7), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3); */
}
div.ev_table_head{
    display: flex;
    justify-content: space-between;
    position: relative;
    color: #121212;
    /* padding-right: 1rem; */
    margin: 0.5rem 0;
    /* border: 1px solid red; */
}
.startlist{
    font-size: small;
    width: fit-content;
    border: 1px solid black;
    background-color: #1471D6;
    color: #fff;
    padding: 0px 5px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}span.heat_done{
    font-size: small;
    border: 1px solid darkgreen;
    background-color: lightgreen;
    padding: 0px 5px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}
span.waiting{
    border: 1px solid #8B8000;
    background-color: lemonchiffon;
    padding: 0px 5px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}
span.heat{
    /* padding-left: 1rem; */
    color: black;
    font-family:sans-serif;
    font-weight: bold;
    text-align: left;
    margin: 0;
}
div.overall{
    margin-top: 30px;
}
/* div.heat{
    border: 1px solid green;
} */
div.log_check{
    width:max-content;
    margin: 0;
    padding: 0;
    font-size: small;
    /* border: 1px solid blue; */
}

/* p class=bumon は「部門別」　h5と類似スタイル*/
p.bumon{
    /*width:max-content;*/
    font-weight:normal;
    font-size:1.5rem;
    text-align:center;
    padding:1px 2px;
    background: #121212;
    color: #7FF21C;
    padding-right: 20px;
    padding-left: 10px;
    margin-bottom: 0;
}

p.bumon::first-letter{
    font-size: 2rem;
}

/* div class=blue は「スタートリスト」　*/
div.blue{
    color:blue;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.2rem;
    
}

/* div class=red は「結果」　*/
div.red{
    color:red;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.2rem;
    
}

/* div class=right はDNS,DNFなど右寄せで表示します　*/
div.right{
    text-align: right;
    padding-right: 1rem;
    white-space: nowrap;
}
span.right{
    text-align: right;
    padding-right: 1rem;
    white-space: nowrap;
}
/* span class=false_start はFS1をやや小さめに表示します　*/
/* 右寄せではないけどclass名はright */
span.false_start{
    /* font-weight: bold; */
    font-size: smaller;
    /* background: #ff0; */
    text-align: right;
    padding-right: 0.5rem;
    white-space: nowrap;
}
/* span class=yellow はYCを黄色背景で表示します　*/
span.yellow{
    font-size: smaller;
    background: #ff0;
    padding-right: 0.5rem;
    /* width:fit-content; */
    max-width: 100%;
    margin-left:auto;
    margin-right: auto;
}

div.scroll_wrap{
    overflow-x: auto;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 2rem;
    box-shadow: 3px 3px 10px 0px #777777;
}
.hide{
    display: none;
}
table{
    width: 100%;
    min-width: 370px;
    border-collapse: collapse;
    border: 1px solid gray;
    margin-bottom: 2rem;
    box-shadow: 3px 3px 10px 0px #777777;
    font-size: 12px;
}
table.scroll_event{
    width: 100%;
    min-width: 370px;
    border-collapse: collapse;
    border: 1px solid gray;
    margin-bottom: 0;
    box-shadow: none;
}
table.event th, table.scroll_event th{
    background-color: #004896;
    color:white;
    font-weight: lighter;
    text-align: center;
    height: 1.5rem;
}
table.event tr{
    background-color: #fff;
}

table.ranking th{
    background-color: pink;
    color:black;
    font-weight: lighter;
    text-align: center;
    /* padding:10px 0; */
    height: 1.5rem;
    /* font-weight: bold; */
}
div.section_title{
    font-weight: bold;
    margin: 0;
    color: black;
    padding: 0.2rem;
    text-align: left;
}
table.by_section th{
    background-color: lightgreen;
    color:black;
    font-weight: lighter;
    text-align: center;
    /* padding:10px 0; */
    height: 1.5rem;
    /* font-weight: bold; */
}

table th,table td{
    border: 1px solid gray;
}

table td{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 3px;
    text-align: left;
}

table.event tr:nth-child(odd){
    background-color: #EAFAFF;
}
table.scroll_event tr:nth-child(odd){
    background-color: #EAFAFF;
}

table.ranking tr:nth-child(odd){
    background-color: rgb(255, 233, 237);
}

table.by_section tr:nth-child(odd){
    background-color: rgb(239, 255, 239);
}

/*　大会新を光らせる　ネオンサイン風な印象*/
div.spark{
    background-color: rgb(245, 96, 210);
    color: rgb(226, 233, 218);       /* 文字色を白に変更 */
    font-size: 1rem;   /* 文字サイズを50pxに指定 */
    font-weight: bold;
    width: max-content;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-right: auto;
    margin-left: auto;
    animation: flash 1s linear infinite;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

}

@keyframes flash {
    0%, 100% {
      /* 明るく光るよう影を重ねる */
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    }
    50% {
      /* 淡く光るよう影を重ねる */
    text-shadow: 0 0 10px #fff, 0 0 20px #fcfcfc, 0 0 30px #fcfcfc, 0 0 40px #fc00de;
    }
}
/* 徳マス新 */
div.tokumas{
    background-color: #2311c0;
    color:#eee;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    width:max-content;
    margin-right: auto;
    margin-left: auto;
    padding: 3px;

}

p.event{
    width: max-content;
    font-weight: normal;
    background-color: lightgray;
    color:darkgreen;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1.2rem;
    text-decoration: none;
    background: linear-gradient(transparent 60%, lightgreen 50%);
    margin-left: 2rem;
    margin-top: 0.3rem;
    
}

p.event_title{
    width: max-content;
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
    margin-top: 1rem;
    padding-top: 3rem;
}
div.legend{
    display: flex;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    margin-top: -1.5rem;
    margin-bottom: 1rem;
    /* background: #e7e7e7;
    border: 1px solid gray; */
}
ul.legend{
    width: fit-content;
    margin: 5px 0;
    text-align: left;
    font-size: small;
    color: #004896;
}

button.category-button{
    width: 100%;
    padding: 8px;
    background-color: white;
    border:solid 1px #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition-duration: 0.3s;
    font-size: 14px;
    box-shadow: 7px 6px 13px 2px #777777;
}
button.category-button.active{
    background-color: #72B92D;
    color: white;
    transition-duration: 0.3s;
}
div.button{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;;
    width: 50%;
    min-width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
td.completed {
    text-align: center;
    background: linear-gradient(45deg, #e3f7e7 0%, #25d417 50%, #e3f7e7 100%);
    background-size: 200% 100%; /* 背景のサイズを横に2倍に設定 */
    animation: slide 5s linear infinite alternate;
}

@keyframes slide {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes bgc_changed_completed {
    0%, 49% { background-color: darkgreen; }
    50%, 100% { background-color: lightgreen; }
}
@keyframes text_changed_completed {
    0%, 49% { color: white }
    50%, 100% { color: blue; }
}
td.completed.changed{
    animation-name: bgc_changed_completed;
    animation-duration: 1500ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
td.completed.changed a{
    animation-name: text_changed_completed;
    animation-duration: 1500ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes bgc_inprogress {
    0%, 49% { background-color: #8a8a00; }
    50%, 100% { background-color: #ffff8f;; }
}
@keyframes text_inprogress {
    0%, 49% { color: yellow }
    50%, 100% { color: black; }
}
td.inprogress{
    background-color: #ffffb4;
    text-align: center;
    animation-name: bgc_inprogress;
    animation-duration: 1500ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
td.inprogress a{
    animation: text_inprogress;
    animation-duration: 1500ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
td.waiting{
    background-color: #e6e6e6;
    text-align: center;
}
td.waiting a{
    pointer-events: none;
    text-decoration: none;
    color: black;
}
th.results{
    width: 50px;
}
th.starttime{
    width: 40px;
    text-align: center;
}
td.starttime{
    text-align: center;
}
table.event tr.dns_grayout{
    background-color: #C0C0C0;
    color: white;
}
table.event tr.dns_grayout a{
    display: none;
}
table.event tr.DqDnfNm a{
    display: none;
}
table.scroll_event tr.dns_grayout{
    background-color: #C0C0C0;
    color: white;
}
table.scroll_event tr.dns_grayout a{
    display: none;
}
table.scroll_event tr.DqDnfNm a{
    display: none;
}
th.rank, th.lane{
    width: 25px;
}
th.sogorank{
    width: 25px;
}
th.bib_num{
    width: 80px;
}
table.scroll_event td.pl5{
    padding-left: 5px;
}
table.scroll_event th.remarks{
    width: 100px;
}
table.scroll_event th.record{
    width: 56px;
}
td.athname, td.prefecture, td.record, td.remarks{
    padding-left: 2px;
    white-space: nowrap;
}
/* td.record{
    text-align: center;
    letter-spacing: 1px;
} */
td.rank, td.lane, td.bib_num{
    text-align: center;
}
table.event th.count, th.recorded_status{
    width: 60px;
}
table.event th.Q_q, th.heat{
    width: 50px;
}
table.event th.round{
    width: 160px;
}
table.event td.round, td.event{
    padding-left: 10px;
}
table.event td.heat, td.Q_q{
    text-align: center;
}
th.comb_ev, th.record{
    width: 56px;
}
th.prefecture{
    width: 120px;
}
th.attempt{
    width: 60px;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 2px;
}
td.attempt{
    font-size: 0.8rem;
    padding-left: 8px;
}
td.ox-r{
    font-size: 1rem;
    letter-spacing: 2px;
}
td.event:hover{
    cursor: pointer;
    background:linear-gradient(transparent 90%, #003A8E 70%);
}
/* td.event:active{
    border: 1px solid #037AD8;
    background-color: #CCE4F7;
} */
/* td.event.men{
    background-color: rgba(110, 216, 235, 0.5);
}
td.event.men:active{
    background-color: rgba(110, 216, 235, 0.8);
}
td.event.women{
    background-color: rgba(255, 192, 203, 0.5);
}
td.event.women:active{
    background-color: rgba(255, 192, 203, 0.8);
}
td.event.mixed{
    background-color: purple;
    color: #fff;
} */
p.return a{
    width: fit-content;
    font-weight: normal;
    background-color: #004896;
    color: #fff;        
    border:0.5px solid darkblue;
    border-radius: 5px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 0;
    margin-left: 1rem;
    font-size: 0.8rem;
    text-decoration: none;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}
p.return a:hover{
    background-color: #1a71cf;
}
p.return a:active{
    background-color: #218bfc;
}
div.updated_at{
    margin-right: auto;
    margin-left: auto;
    margin-top: 1rem;
    margin-bottom: -1rem;
}