/*--------------------------------------
共通
----------------------------------------*/
@media screen and (max-width:599px){
    body{
        background-image: url(/img/up/red/back_dot_sp.webp);
        background-repeat: repeat-y;
        background-size: contain;
        padding-top: 20.67vw;
    }
    body::after{
        height: 70.33vw;
        background-size: cover;
        background-position: center;
    }
    .content{
        padding-top: 7.25vw;
        padding-bottom: 7.25vw;
    }
    .mainContentWidth{max-width: 90.5vw;}
    .mainTextArea{
        width: 100%;
        padding: 0 7.25vw;
    }
    .textArea{margin: 2em 0;}
    .flexArea{
        flex-direction: column;
    }
    .whiteBox{border: 3px solid #000;padding: 8.09vw 16px;}
    h1{font-size: 13.29vw;margin-bottom: 9.66vw;}
    h1 span{font-size: 4.35vw;}
    h1 span::before,
    h1 span::after{height: 1.45vw;}
    h2{font-size: 4.11vw;}
    h2::after{height: 1.93vw;}
    h3{
        background: url(/img/up/red/h3_sp.webp) no-repeat;
        background-size: cover;
        height: 16.18vw;
        font-size: 4.35vw;
        padding: 12px 2em;
    }
    h4{font-size: 3.62vw;}
    .font35{font-size: 4.35vw;}
    .font30{font-size: 4.32vw;}
    .font25{font-size: 3.88vw;}
    .font20{font-size: 3.38vw;}
    .pole{height: 2.13vw;}
    .toChat{
        width: 19.32vw;
        right: 20px;
        bottom: 100px;
    }
    .totopbtn{
        width: 14.31vw;
        bottom: 30vw;
        right: 5vw;
    }
    .bigBanner{width:100%;}
    .whiteBoxTitle{padding: .5em;}
}
/*--------------------------------------
ヘッダー
----------------------------------------*/
@media screen and (max-width:599px){
    .header{padding: 10px 0;}
    .headerBox{padding: 0 7.25vw;}
    .topRogo{width: 50px; height:45px;}
    .hamburger{
        font-size: 1.8rem;
        padding: .5em;
    }
    .hamburger span,
    .hamburger span::after,
    .hamburger span::before{ 
        width: 16px;
        height: 2px;
    }
    .hamburger span::before {top: -5px;}
    .hamburger span::after {bottom: -5px;}
    .headerStatus{padding: .5em 1em;}
    .headerStatus p{font-size: 2.42vw;}
}
/*--------------------------------------
ヘッダーメニュー
----------------------------------------*/
@media screen and (max-width:599px){
.menuWindow{
    padding-top: 80px; 
    display:block;
}
.menuRogo{
    position: absolute;
    top: -60px;
}
.menuBox p{
    font-size: 3rem;
}
.menuBox{
    width: 92%;
    margin: 0 auto 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.menuRow1,.menuRow2{
    flex-direction: column;
    margin-bottom: 0;
}
.menuItem{
    width: 100%;
    filter: drop-shadow(5px 5px 0 #0000003d);
}
}
/*------------------------------------
フォーム
--------------------------------------*/
@media screen and (max-width:599px){
    .contactMail,
    .contactTextarea{
        margin-bottom: 3.91vw;
    }
    .submitBtn{
        width: 100%;
        height: 14.69vw;
        font-size: 6.04vw;
        text-shadow: 2px 2px 4px #000000;
    }
}
/*--------------------------------------
フッター
----------------------------------------*/
@media screen and (max-width:599px){
    .footerRogo{width: 47.47vw;padding: 30px 0;}
    .footerArea{width: 92%;}
    .footerMenuList{flex-direction: column;}
    .f_MenuItem{
        width: 100%;
        height: 19.53vw;
        background: url(/img/up/red/black_menu_sp.webp) no-repeat;
        background-size: contain;
        font-size: 5.33vw;
        font-weight: 500;
        margin-bottom: 3vw;
    }
    .toTopBtn{font-size: 6.67vw;}
    .copy{font-size: 3.2vw;padding: 1em 0 100px;}/*--spメニュー用スペース--*/
}
/*--------------------------------------
ファーストビュー
----------------------------------------*/
@media screen and (max-width:599px){
    .indexRogo{width: 37.68vw;}
    .topBadge{width: 36.23vw;left: 50px;}
    .fvTopic{
        padding: 1.5em 2em 1em;
        margin-bottom: 2.6vw;
        margin-left: 30px;
        margin-right: 30px;
    }
    .fvTopicTitle{font-size: 3.38vw;}
    .f_t_day{font-size: 2.9vw;}
    .f_t_race{font-size: 5.56vw;}
    .f_t_sub{font-size: 2.42vw;}
}
/*--------------------------------------
新規登録
----------------------------------------*/
@media screen and (max-width:599px){
    .Entry{
        width: 100%;
        padding: 15px 30px;
    }
    .tourokuBtn{
        width: 100%;
        height: 14.98vw;
        font-size: 5.56vw;
    }
    .formSubText{
        font-size: 2.66vw;
        text-align: left;
    }
    .window{
        box-shadow:none !important;
        background:none;
    }
    .window::before{display:none;}
}
/*--------------------------------------
的中実績スライダー
----------------------------------------*/
@media screen and (max-width:599px){
.slick-list.draggable{
    padding: 10px 30px !important;
}
.resultBox{
    width: 63.98vw;
    height: 138.2vw;
    background: url(/img/up/red/result_sp.webp)no-repeat;
    background-size: contain;
    flex-direction: column;
    outline: 2px solid #fff;
}
.resultBox::after {
    width: 22.38vw;
    height: 22.11vw;
    bottom: -2.6vw;
}
.resultLeft img{
    border-radius: 10px 10px 0 0;
}
.resultLeft{
    width: 100%;
    height: auto;
}
.resultTitle{
    font-size: 5.8vw;
}
.resultMoney{
    font-size: 9.66vw;
}
.resultText{
    font-size: 3.14vw;
    font-weight: 600;
}
.resultSubTitle{
    font-size: 3.14vw;
    margin-left: 2%;
}
.resultTextBox{
    width: 96%;
    background: #fff;
    margin: 0 auto;
    padding:1em;
}
.resultTextBox p{
    font-size: 2.9vw;
}
}
/*--------------------------------------
無料コンテンツ
----------------------------------------*/
@media screen and (max-width:599px){
    .contCord{
        flex-direction: column;
    }
    .contCord:nth-last-child(1){
        margin-bottom: 12.08vw;
    }
    .ccImg{
        width: 100%;
        height: auto;
        transform: translateY(100%);
    }
    .ccImg p{font-size: 8.7vw;}
    .ccText{
        position: static;
        width: 100%;
        height: auto;
        transform: translateX(-100%);
    }
/*----スクロール時------*/
.contCord.show .ccImg,
.contCord.reverse.show .ccImg{
    transform: translateY(0%);
}
.contCord.show .ccText,
.contCord.reverse.show .ccText{
    transform: translateX(0%);
}
}
/*--------------------------------------------------
こんなあなたにおすすめ
---------------------------------------------------*/
@media screen and (max-width:599px){
    .checkList{
        font-size: 3.08vw;
    }
    .checkList span::after{
        top: 0;
        width: 3.16vw;
        height: 2.23vw;
        border-left: 3px solid #C30000;
        border-bottom: 3px solid #C30000;
    }
}
/*--------------------------------------------------
当社が優れている点(テーブル),おすすめポイント
---------------------------------------------------*/
@media screen and (max-width:599px){
.topTable tr{width: 100%;}
.topTable tr .black{font-size: 4.83vw;}
.redBackTitle{font-size: 4.35vw;}
}
/*--------------------------------------------------
ナビゲーター
---------------------------------------------------*/
@media screen and (max-width:599px){
    .flexArea {
        gap: 25px;
    }
    .naviBox{
        width: 100%;
        display: flex;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .readmore{
        flex: 1;
    }
    .naviImgBox {
        height: 100%;
        width: 110px;
        background: transparent;
    }
    .naviImgBox img{
        position: static;
        width: 100%;
    }
    .naviName{
        width: 100%;
        height: fit-content;
        top: -2em;
    }
    .naviBtn{
        position: absolute;
        bottom: 0;
        border-radius:0;
        font-size: 1.8rem;
    }
    .hide-text1,
    .hide-text2,
    .hide-text3 {
        margin-bottom: 35px;
    }
}
/*--------------------------------------------------
利用者の声
---------------------------------------------------*/
@media screen and (max-width:599px){
    .voicegridArea{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .voiceWide{
        gap: 40px;
        margin: 30px 0 50px;
    }
    .voiceBox{box-shadow: 10px 10px 0 #C30000;}
    .voiceBox:nth-child(even){box-shadow:   10px 10px 0 #000000;}
}
/*------------------------------------------------
簡単な流れ
--------------------------------------------------*/
@media screen and (max-width:599px){
    .stepgridArea{
        flex-direction: column;
    }
    .step{
        width: 100%;
        height: 195px;
        background: url(/img/up/red/step_001_sp.webp) no-repeat;
        background-size: contain;
        background-position: center;
    }
    .step:nth-last-child(1){
        background: url(/img/up/red/step_002_sp.webp) no-repeat;
        background-size: contain;
        background-position: center;
    }
    .step1::after,
    .step2::after,
    .step3::after{
        width: 22.71vw;
        height: 7.97vw;
        top: -30px;
        left: 15.7vw;
    }
    .step p{
        width: 76%;
        top: 3em;
        left: 50%;
        transform: translateX(-50%);
    }
    .step3 p span{
        font-size: 7.25vw;
        margin-bottom: 0;
    }
}
/*------------------------------------------------
フッターフォーム
--------------------------------------------------*/
@media screen and (max-width:599px){
    .footerForm{
        height: 100vw;
    }
    .uma{
        width: 200%;
        left: -60.39vw;
    }
    .f_rogo{
        top: 7.25vw;
        width: 46.38vw;
    }
    .f_label{
        top: 48.31vw;
        left: 0;
        width: 37.92vw;
    }
    .footerForm::before,
    .footerForm::after{
        display: none;
    }
}
/*------------------------------------------------
プレゼント
--------------------------------------------------*/
@media screen and (max-width:599px){
    .preflex{gap: 4.35vw;flex-direction: column;}
    .preflex img{width: 100%;border-radius: 10px;}
    .borderRed{
        text-align: center;
        margin: 0 auto 4.35vw;
        font-size: 4.83vw;
        border-bottom: 6px solid #C30000;
        width: 80%;
    }
}
/*--------------------------------------------
ユーザーレビュー
----------------------------------------------*/
@media screen and (max-width:599px){
.reviewCardArea{
   gap: 50px;
   grid-template-columns:auto;
}
}



/*--------------------------ログイン後---------------------------------------*/

/*---------------------------------------------
BBS
-----------------------------------------------*/
@media screen and (max-width:599px){
    .bbsLabel,.bbs ul li{font-size: 2.9vw;}
    .bbsArea::after{
        width: 5.07vw;
        height: 5.07vw;
    }
}
/*--------------------------------------
TOPプラン
-----------------------------------------*/
@media screen and (max-width:599px){
    .planTitle{
        font-size: 4.83vw;
        padding: .3em;
        margin-bottom: 10px;
    }
    .planBannerText{padding: .3em;}
    .planCardTop{flex-direction: column;}
    .planCard{
        width: 100%;
        gap: 10px;
    }
    .planLabel span,.gentei {font-size: 3.62vw;}
    .planmoneyInner{
        flex-direction: row;
        font-size: 3.62vw;
        gap: 5px;
    }
    .genteiMoney{
        font-size: 6.04vw;
    }
    .planmoneyBox img {
        width: 19.32vw;
        height: 12.08vw;
    }
    .planBtnBox{
        flex-direction: column;
        gap: 10px;
    }
    .planBtn{
        height: 15.7vw;
        font-size: 6.04vw;
    }
    .planVoiceBox{
        margin:0 5px;
    }
    .planVoice .slick-list.draggable {
        padding: 0 !important;
    }
}
/*-------------------------------------------
プランS
---------------------------------------------*/
@media screen and (max-width:599px){
    .planCardArea{display: flex;flex-direction: column;margin-bottom: 10.17vw;}
    .planCardS{width: 100%;margin-top: 10.17vw;}
    .planmoneyInner.planS .genteiMoney{font-size: 7.25vw;}
    /*--おすすめ--*/
    .planCardS.push::after{
        width: 29.15vw;
        height: 20.02vw;
        top: -6.23vw;
        right: -3.94vw;
    }
}
/*---------------ポイント情報-----------------------*/
@media screen and (max-width:599px){
    .planBtn.red.pt{
        font-size: 4.83vw;
    }
}
/*-----------------------------------------
タブエリア
-------------------------------------------*/
@media screen and (max-width:599px){
    .tabBtn{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 30px;
    }
    .btn a{
        font-size: 3.62vw;
        white-space: nowrap;
    }
}
/*---------------------------------------------
的中実績ページ
-----------------------------------------------*/
@media screen and (max-width:599px){
    .jissekiCardArea{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .jcLeft{width: 51.97%;}
    .jcMoney{font-size: 6.76vw;}
    .jcRight p:nth-child(odd){font-size: 2.9vw;}
    .jcLeft p{line-height: 2;display: block;}
}
/*-------------------------------------------
キャンペーンページ
---------------------------------------------*/
@media screen and (max-width:599px){
.campBoxR{
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
.campList{
    gap: 7.25vw;
    margin: 7.25vw auto;
}
.campBox1{font-size: 6.04vw;}
.campBox3{
    font-size: 7.25vw;
    line-height: 1;
    margin-top: 5px;
}
.campBox.clear::after{
    width: 21.26vw;
    height: 21.26vw;
}
}
/*---------------------------------------
プラン詳細
-----------------------------------------*/
@media screen and (max-width:599px){
    .planDetailsBox{margin: 6.04vw 0;gap: 10px;}
    .planDetailstitle{font-size: 4.35vw;}
    .planDetailsSub .plantitle,
    .planDetailsMoney p:nth-child(1),
    .planDetailsMoney p:nth-child(2){font-size: 2.9vw;}
    .planDetailsMoney p:nth-child(3){font-size: 7.04vw;}
    .planDetailsMoney{
        flex-direction: column;
        gap: 0px;
    }
    .planDetailsMoney p:nth-child(2)::after{
        top: .7rem;
    }
}
/*------------------------------------
公開買い目
--------------------------------------*/
@media screen and (max-width:599px){
    .bidsBox{flex-direction: column;padding: 6.83vw 0;}
    .bidsBoxL,.bidsBoxR,.bidsBox .resultTextBox{width: 100%;}
    
}
/*----------------------------------------------
初心者ガイド
------------------------------------------------*/
@media screen and (max-width:599px){
    .flexcolumns{
        margin-top: 12.08vw;
        gap: 7.66vw;
    }
    .username img{
        width: 4.83vw;
        height: 4.83vw;
    }
    .proname img{
        width: 11.11vw;
        height: 11.11vw;
    }
    .blueFlex div:nth-child(1),
    .blueFlex div:nth-child(2){
        padding: .5em;
    }
    .linkRed{font-size: 4.62vw;}
}
/*--------------------------------------
RED指数
----------------------------------------*/
@media screen and (max-width:599px){
    .indexbox,.indexbox:nth-child(n+3),.face{border: 1px solid #000;}
    .indexbox{font-size: 2.42vw;padding: 1em 0;}
    .redindex span,
    .redindex b{font-size: 1.93vw;}
    .redindex .genteiMoney{font-size: 4.35vw !important;}
    .indexFlexTop:not(:first-child){margin-top: -1px;}
}
/*----------------------------------------
プラン詳細内RED指数
------------------------------------------*/
@media screen and (max-width:599px){
    .indexFlexTop .block{font-size: 2.42vw;}
}
/*---------------------------------------
グラフテスト
-----------------------------------------*/
@media screen and (max-width:599px){
    .percentBox{
        margin: 30px 0;
    }
    .percent{
        width: 100px;
        height: 100px;
    }
    svg {
        width: 100px;
        height: 100px;
    }
    svg circle{
        stroke-width: 5;
        stroke-dasharray: 283;
    }
    .percent .number .suuti {font-size: 28px;}
    @keyframes circleAnim {
        0% {stroke-dasharray: 0 283;}
        99.9%,
        to {stroke-dasharray: 283 283;}
        }
}