@charset "utf-8";
/*==============================================
    ウマいレポート
================================================
0.0 - 共通パーツ
0.1 - レポートテーブル
1.0 - スクラッチの使い方
==============================================*/
/*----------------------------------------------
    0.0 - 共通パーツ
----------------------------------------------*/
img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}
/*----------------------------------------------
    0.1 - レポートテーブル
----------------------------------------------*/
.ReportAboutWrap{
    position: relative;
    border-radius: 15px 15px 0 0;
    background: #076DE5;
    margin-bottom: 2.6667vw;
    padding: 5.6vw 0vw 2.6667vw 2.6667vw;
}
.ReportAboutWrap .reportTitle{
    width: 100%;
}
.ReportAboutWrap .ScContentTitle{
    position: absolute;
    width: 14.133333333333335vw;
    height: 14.133333333333335vw;
    top: 28.133333vw;
    right: 1.266667vw;
}
.PreWakuWrap > p,
.ReportAboutWrap > p{
    font-size: 3.733333333333334vw;
    color: #fff;
    text-align: center;
    line-height: 1.3636363636363635;
    font-weight: bold;
    margin-bottom: 4.5333vw;
}
.PreWakuWrap > p span{
    color: #F0F070;
}
.PreWakuAbout{
    margin: 0 5.3333vw 5.3333vw 2.6667vw;
    padding: 4.5333vw 5.3333vw 5.3333vw;
    background-color: #0C4C98;
    border-radius: 2.6667vw;
}
.PreWakuAbout dl dt h3{
    width: 57.6vw;
    height: 6.9333vw;
    margin:0 auto 6.4vw;
}
.PreWakuAbout dl dd{
    color: #fff;
    font-size: 3.4667vw;
    margin-bottom: 3.4667vw;
    letter-spacing: -0.1px;
}
.PreWakuAbout dl dd span{
    font-weight: bold;
    font-size: 4.0vw;
}
.PreWakuAbout a{
    display: block;
    width: fit-content;
    margin: 6px auto 5.3333vw;
    font-size: 3.4667vw;
    font-weight: bold;
    color: #FFF;
    padding-bottom: 5px;
    border-bottom: 2px solid #fff;
}
a.PopBtn_howto{
    display: block;
    font-size: 3.4667vw;
    font-weight: bold;
    color: #F0F070;
    margin:0 auto 4.0vw;
    width: fit-content;
}
a.PopBtn_howto svg{
    vertical-align: bottom;
    margin-right: 5px;
    width: 1em;
    height: 1em;
}
.ReportFlag p{
    display: block;
    width: fit-content;
    height: 5.8667vw;
    line-height: 5.8667vw;
    border-radius: 5.8667vw;
    text-align: center;
    font-size: 3.4667vw;
    margin:0 auto 3.2vw;
}
.ReportFlag p span{
    font-weight: bold;
}
.ReportFlag p.active{
    width: 78.6667vw;
    position: relative;
    color: #fff;
    background-color: #222222;
}
.ReportFlag p.active:after{
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #222222 transparent transparent transparent;
    border-width: 7px 2.6667vw 0vw 2.6667vw;
    left: 50%;
    transform: translate(-50%, 0);

}
.ReportFlag p.pending{
    width: 91.6667vw;
    color: #222222;
    background-color: #F2F254;
    letter-spacing: -0.7px;
}
.ReportFlag p.closed{
    width: 86.6667vw;
    color: #fff;
    background-color: #888888;
}.Race_YosoArea01 .YosoTableWrap{
    flex-direction: column;
    width: 100%;
}
.Race_YosoArea01 .YosoTableWrap .YosoTableHead{
    height: 28px;
    font-size: 11px;
    color: #777777;
    line-height: 26px;
    background: #eaeaea;
    text-align: center;
    border-left: 1px double #dadada;
}
.Race_YosoArea01 .YosoTableWrap .YosoTableBody{
    white-space: nowrap;
    overflow-x: auto;
    border-left: 1px double #dadada;
    padding-left: 1px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    position: relative;
    display: flex;
    width: 100%;
}
.Race_YosoArea01 dl{
    width: auto;
}
.Race_YosoArea01 dl dt{
    height: 36px;
    background: #eaeaea;
    text-align: center;
}
.Race_YosoArea01 dl dt .PopBtn_label{
    position: relative;
    top: 2px;
}
 .Race_YosoArea01 dl.Umaban dt{
    width: 1.7em;
 }
.Race_YosoArea01 > dl dt{
    height: 64px;
    font-size: 13px;
}
.Race_YosoArea01 .CheckMark{
    width: 42px;
}
.Race_YosoArea01 dl.Horse_Info dt{
    width: auto;
}
.Race_YosoArea01 dl.Label dt{
    width: 100px;
    font-size: 11px;
    font-weight: normal;
    color: #777777;
}
.Race_YosoArea01 .HorseList .HorseCheckBtn {
    width: 25px;
    height: 25px;
    background: #fff;
    border: 1px solid #DADADA;
    position: relative;
    border-radius: 25px;
}
.Race_YosoArea01 li.HorseList .HorseCheck_Select:checked + label {
    background: #ef5350;
    border: 1px solid #ef5350;
}
.Race_YosoArea01 li.HorseList:has(input:disabled) {
  background: #E5E5E5;
}

.Race_YosoArea01 li.HorseList:has(input:disabled) label {
  background: #D5D5D5 !important;
    border: none !important;
}

.Race_YosoArea01 li.HorseList:has(input:disabled) label:after {
  border-right: 1px solid #BFBFBF;
  border-bottom: 1px solid #BFBFBF;
}

.Race_YosoArea01 dl dd{
    border-left: 1px solid #DADADA;
}
.Race_YosoArea01 dl ul{
    border-bottom: 2px solid #DADADA;
}
.Race_YosoArea01 dl ul li{
    font-weight: normal;
    height: 36px;
    padding: 8px;
    color: #999999;
    border-top: 2px solid #DADADA;
}
.Race_YosoArea01 dl ul li.Purchased{
    color: #555555;
    font-weight: bold;
}
.Race_YosoArea01 dl.Horse_Info ul li{
    font-weight: bold;
}

.Race_YosoArea01 dl.Label ul li[class*="Label_"] span{
    display: block;
    background-image: url(../img/yoso/report/repo_label.png);
    background-repeat: no-repeat;
    background-size: 84px 209px;
    width: 84px;
    height: 24px;
}
.Race_YosoArea01 dl.Label ul li.Label_Close{
    background-color: #fff;
}
.Race_YosoArea01 dl.Label ul li.Label_Close span{
    background-position: 0 0;
}
.Race_YosoArea01 dl.Label ul li.Label_Gekiatsu{
    background-color: #FFEFEF;
}
.Race_YosoArea01 dl.Label ul li.Label_Gekiatsu span{
    background-position: 0 -34px;
}
.Race_YosoArea01 dl.Label ul li.Label_Kai{
    background-color: #FFF4EB;
}
.Race_YosoArea01 dl.Label ul li.Label_Kai span{
    background-position: 0 -72px;
}
.Race_YosoArea01 dl.Label ul li.Label_Datou{
    background-color: #E2EDC6;
}
.Race_YosoArea01 dl.Label ul li.Label_Datou span{
    background-position: 0 -110px;
}
.Race_YosoArea01 dl.Label ul li.Label_Miokuri{
    background-color: #EDF4FF;
}
.Race_YosoArea01 dl.Label ul li.Label_Miokuri span{
    background-position: 0 -146px;
}
.Race_YosoArea01 dl.Label ul li.Label_Kiken{
    background-color: #E3E3E3;
}
.Race_YosoArea01 dl.Label ul li.Label_Kiken span{
    background-position: 0 -185px;
}
.Race_YosoArea01 dl.Mark ul li.Mark_Open{
    color: #666666;
    font-size: 13px;
}
.Race_YosoArea01 dl.Mark ul li.Mark_Close{
    color: #999999;
    font-size: 13px;
    font-weight: normal;
}
span.Icon_Shirushi{
    display: block;
    background-image: url(../img/yoso/report/repo_mark_icon.png);
    background-repeat: no-repeat;
    background-size: 631px 16px;
    width: 16px;
    height: 16px;
    margin: auto;
}
.Mark_Pro span.Icon_Taikou{
    background-position: -88px 0;
}
.Mark_Pro span.Icon_Kurosan {
    background-position: -176px 0px;
}
.Mark_Pro span.Icon_Osae {
    background-position: -263px 0;
}
.Mark_Pro span.Icon_Hoshi {
    background-position: -350px 0;
}
.Mark_Pro span.Icon_Keshi {
    background-position: -441px 0;
}
.Mark_Pro span.Icon_KuroHoshi {
    background-position: -527px 0;
}
.Mark_Pro span.Icon_Chuui {
    background-position: -526px 0;
}
.Mark_Pro span.Icon_Mujirushi {
    background-position: -612px 0;
    transform: rotate(0);
    opacity: 1;
    width: 18px;
}

.ReportBtnWrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
}
.ReportBtnInner {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}
.ReportBtn {
    text-align: center;
}
button#ReportButton {
    border: none;
    width: 256px;
    height: 39px;
    line-height: 39px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
    background: #CACACA;
    pointer-events: none;
}
button#ReportButton.active {
    background: #EF5350;
    pointer-events: auto;
    cursor: pointer;
}
.ReportBtnTxt {
    text-align: center;
    color: #FFF;
    font-size: 13px;
    margin-top: 8px;
}


#PopUpBG{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9998;
}
.PopUp_Body{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 95%;
    height: 70vh;
    max-width: 480px;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
}
.PopUp_Body.PopUp_Body.confirm{
    width: 350px;
    border-radius: 4px;
}
.PopUp_Body.PopUp_Body.confirm .PopUpContent{
    height: 100%;
    overflow-y: auto;
}
span[class^='close_'] {
  position: absolute;
  top: -42px;
  right: 0;
  width: 7.2vw;
  height: 7.2vw;
  cursor: pointer;
}

span[class^='close_']::before,
span[class^='close_']::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.2vw;
  height: 0.8vw;
  background-color: #fff;
  transform-origin: center;
  border-radius: 0.8vw;
}

span[class^='close_']::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

span[class^='close_']::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.PopUpContent{
    position: relative;
    background: #fff;
    border-radius: 4px;
    padding: 5.3333vw 5.3333vw 4.5333vw 5.3333vw;
        text-align: left;
}
.PopUp_Body.confirm .PopUpContent{
    padding: 5.3333vw 0 4.5333vw 0;
}
.PopUpTitle{
    font-size: 4.8vw;
    font-weight: bold;
    color: #333333;
    margin-bottom: 7.7333vw;
    text-align: center;
}
.PopUpContent > p{
    font-size: 3.4667vw;
    color:#666666;
    line-height: 1.5384615384615385;
    margin-bottom: 5.3333vw;
    text-wrap: initial;
}
.PointUsed {
    color: #666;
    font-size: 3.4667vw;
    margin-bottom: 2.6667vw;
}
.PointUsed dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 2.6667vw;
}
.PointUsed dl dt {
    font-weight: 600;
}
.PointUsed dl dd span {
    font-size: 5.3333vw;
    color: #E3B749;
    font-weight: 600;
}
.RepoPopAlert{
    padding: 2.6667vw 8.0vw;
    background: #FFF2F0;
    color: #B74443;
    font-size: 3.2vw;
    margin-bottom: 2.6667vw;
}
.RepoPopAlertTitle {
    font-size: 4.0vw;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2.6667vw;
}
.RepoPopAlert p {
    line-height: 1.6;
    color: #B74443;
    text-align: center;
    margin-bottom: 0vw;
}
.RepoPopAlert p.sm_txt {
    font-size: 2.9333vw;
    text-align: left;
}
.RepoPopPointTotalWrap {
    background: #F3F3F3;
    padding: 2.6667vw;
    margin: 0 5.3333vw;
    border-radius: 4px;
}
.RepoPopPointTotalBar>dl>dt {
    background: #FFF;
    border-radius: 4px;
    padding: 2.6667vw;
}
.RepoPopPointTotalBar>dl>dd {
    padding: 2.6667vw 2.6667vw 0 2.6667vw;
    font-size: 3.2vw;
    color: #666;
}
.RepoPopPointTotalBar>dl>dd>dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.6667vw;
}
.RepoPopPointTotalBar>dl>dd>dl:last-child {
    margin-bottom: 0vw;
}
.RepoPopPointTotalBar dl dt dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666;
    cursor: pointer;
}
.RepoPopPointTotalBar dl dt dl dt {
    font-size: 3.4667vw;
}
.RepoPopPointTotalBar>dl>dd>dl.details {
    font-size: 2.9333vw;
    color: #999;
    padding-left: 2.6667vw;
}
.RepoPopPointTotalBar dl dt dl dd {
    font-size: 3.7333vw;
    display: flex;
    align-items: center;
}
.RepoPopPointTotalBar dl dt dl dd span {
    font-size: 4.0vw;
    color: #E3B749;
    font-weight: 600;
}
.RepoPopPointTotalBar dl dt dl dd span.Icon_ArrowB {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #666;
}
.RepoPopPointTotalBar dl dt dl dd span.Icon_ArrowT {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #666;
}
.RepoPopPointTotalBar dl dt dl dd span:last-child {
    margin-left: 5px;
}

.RepoPopBtnWrap {
    text-align: center;
    margin-bottom: 5.3333vw;
    padding: 0 2.6667vw;
}
.RepoPopBtnWrap a {
    display: inline-block;
    background: #E3B749;
    border-radius: 4px;
    color: #FFF;
    font-size: 4.5333vw;
    font-weight: 600;
    padding: 2.6667vw;
    width: 100%;
    max-width: 68.2667vw;
}
.RepoPopNote {
    color: #939393;
    font-size: 2.9333vw;
    text-align: left;

}
.RepoPopNote p {
    line-height: 1.6;
    font-weight: normal;
    padding: 2.6667vw 5.3333vw 5.3333vw 5.3333vw;
}

@media only screen and (min-width: 768px) {
    .ReportAboutWrap{
        padding: 26.88px 0.0px 12.8px 12.8px;
    }
    .PreWakuWrap > p, .ReportAboutWrap > p{
        font-size: 14.08px;
        line-height: 1.3636363636363635;
        margin-bottom: 21.76px;
    }
    .ReportAboutWrap .ScContentTitle{
        width: 67.84px;
        height: 67.84px;
        top: 106.24px;
        right: 20.48px
    }
    .PreWakuAbout{
        margin: 0 25.6px 25.6px 12.8px;
        padding: 21.76px 25.6px 25.6px;
        border-radius: 12.8px;
    }
    .PreWakuAbout dl dt h3{
        width: 276.48px;
        height: 33.28px;
        margin:0 auto 30.72px;
    }
    .PreWakuAbout dl dd{
        font-size: 16.64px;
        margin-bottom: 16.64px;
        letter-spacing: -0.1px;
    }
    .PreWakuAbout dl dd span{
        font-size: 19.2px;
    }
    .PreWakuAbout a{
        margin: 6px auto 25.6px;
        font-size: 16.64px;
        padding-bottom: 5px;
        border-bottom: 2px solid #fff;
    }
    a.PopBtn_howto{
        font-size: 16.64px;
        margin:0 auto 19.2px;
    }
    a.PopBtn_howto svg{
        margin-right: 5px;
        width: 1em;
        height: 1em;
    }
    .ReportFlag p{
        height: 28.16px;
        line-height: 28.16px;
        border-radius: 28.16px;
        font-size: 16.64px;
        margin:0 auto 15.36px;
    }
    .ReportFlag p.active{
        width: 377.6px;
    }
    .ReportFlag p.active:after{
        border-width: 7px 12.8px 0.0px 12.8px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .ReportFlag p.pending{
        width: 416.0px;
        letter-spacing: -0.7px;
    }
    .ReportFlag p.closed{
        width: 416.0px;
    }
    .PopUp_Body{
        max-width: 614.4px;
    }
    span[class^='close_'] {
        top: -42px;
        width: 34.56px;
        height: 34.56px;
    }
    span[class^='close_']::before,
    span[class^='close_']::after {
        left: 50%;
        top: 50%;
        width: 34.56px;
        height: 3.84px;
        border-radius: 3.84px;
    }
    span[class^='close_']::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    span[class^='close_']::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    .PopUpContent{
        border-radius: 4px;
        padding: 25.6px 25.6px 21.76px 25.6px;
    }
    .PopUp_Body.PopUp_Body.confirm{
        height: fit-content;
        max-height: 570px;
    }
    .PopUp_Body.confirm .PopUpContent{
        padding: 25.6px 0 21.76px 0;
    }
    .PopUpTitle{
        font-size: 23.04px;
        margin-bottom: 37.12px;
    }
    .PopUpContent > p{
        font-size: 16.64px;
        margin-bottom: 25.6px;
    }
.PointUsed {
    font-size: 13px;
    margin-bottom: 10px;
}
.PointUsed dl {
    gap: 0 10px;
}
.PointUsed dl dd span {
    font-size: 20px;
}
.RepoPopAlert {
    padding: 10px 30px;
    font-size: 12px;
    margin-bottom: 10px;
}
.RepoPopAlertTitle {
    font-size: 15px;
    margin-bottom: 10px;
}
.RepoPopAlert p.sm_txt {
    font-size: 11px;
}
.RepoPopPointTotalWrap {
    padding: 10px;
    margin: 0 20px;
}
.RepoPopPointTotalBar>dl>dd {
    padding: 10px 10px 0 10px;
    font-size: 12px;
}
.RepoPopPointTotalBar>dl>dd>dl {
    margin-bottom: 10px;
}
.RepoPopPointTotalBar>dl>dd>dl.details {
    font-size: 11px;
    padding-left: 10px;
}
.RepoPopPointTotalBar dl dt dl dt {
    font-size: 13px;
}
.RepoPopPointTotalBar>dl>dt {
    background: #FFF;
    border-radius: 4px;
    padding: 10px;
}
.RepoPopPointTotalBar dl dt dl dd {
    font-size: 14px;
}
.RepoPopPointTotalBar dl dt dl dd span {
    font-size: 15px;
}
.RepoPopPointTotalBar dl dt dl dd span:last-child {
    margin-left: 5px;
}
.RepoPopBtnWrap {
    margin-bottom: 20px;
    padding: 0 10px;
}
.RepoPopBtnWrap a {
    font-size: 17px;
    padding: 10px;
    max-width: 256px;
}
.RepoPopNote p {
    font-size: 11px;
    padding: 10px 20px 20px 20px;
}


}