/*-------------------------------------------------
スマホ用CSS
---------------------------------------------------*/
@media screen and (max-width:599px) {
    .h2back {width: 61.92vw;}
    .h2title {font-size: 7.77vw;}
    .h2btn {
        width: 4.25vw;
        height: 7.5vw;
        bottom: -20px;
    }
    .h2bottom{bottom: 2.5em;}
    .totopbtn{width: 10.31vw;}
    h3.red,
    h3.orange,
    h3.black,
    h3.green{font-size: 2rem; line-height: 1.6;}
    h4.sub_title{font-size: 2rem;}
    .ribbon_red{width: 90.68vw; height: 15.94vw; top: 50px;}
    .ribbon_red p{font-size: 4.83vw; bottom: 55%;}
    .crown img{width: 12.08vw;}
    .crown p{font-size: 4.83vw;bottom: 20%;}
    .crown{top: -30%;}
    .hamburger.sp.active{position: fixed; right: 10px;}
    .indexheader{left: 85% !important;}
}
/*---------------------------------------
トップビュー
----------------------------------------*/
@media screen and (max-width:599px) {
    .hamburger{
           width: 50px;
           height: 50px;
           padding: 5px;
           position: fixed;
           z-index: calc(infinity);
           right: 10px;
           top: 1em;
     }
    .hamburger span:nth-of-type(1) {top: -6px;} 
    .hamburger span:nth-of-type(2) {top: 1px;} 
    .hamburger span:nth-of-type(3) {top: 8px; width: 70%; transform: translateX(-70%);}
.IndexTop{
    /*background: url(/img/up/divine/topback1_sp.png) no-repeat;
    background-size: cover;*/
    background-position: left;
    height: 90vh;
}
.topimgbox{
    left: 40px;
    height: auto;
    top: 15vw;
}
.topinner{
    align-items: center;
    margin-top: 20vw;
}
.text1{font-size: 2.3rem; margin-bottom: 5vw;}
.toptextbox {font-size: 2.8rem;}
.tourokubtn{font-size: 2.5rem;}
.tokuten_label.sp{
    position: relative;
    z-index: 10;
    top: -63vw;
    left: 20px;
    width: fit-content;
    height: auto;
}
.sptokuten_text1{
    position: absolute;
    font-size: 14.49vw;
    font-weight: bold;
    color: #D1AB39;
    top: 20%;
    left: 18%;
}
.sptokuten_text1 span{
    font-size: 30%;
}
.sptokuten_text2{
        position: absolute;
        font-size: 6.04vw;
        font-weight: bold;
        color: #fff;
        left: 22.5%;
        bottom: 6%;
    }
.f_tokuten_label .sptokuten_text1{
        top: 20%;
        left: 20%;
}
.f_tokuten_label .sptokuten_text2{
        left: 22.5%;
        bottom: 6%;
}

.tokuten_img1{
    width: 42.67vw;
    height: 34.33vw;
}
.tokuten_img2{
    width: 31.47vw;
    height: 22.83vw;
}

}
/*---------------------------------------
トップメニュー中身
----------------------------------------*/
@media screen and (max-width:599px) {
.topmenu{width: 80%;}
.topmenu_logo {width: 167px;}
.topmenu_item a {font-size: 1.2rem;}
}
/*---------------------------------------
的中実績
----------------------------------------*/
@media screen and (max-width:599px) {
.topjisseki{
    background: url(/img/up/divine/tokuten_jisseki_haikei_sp.png) no-repeat;
    background-size: cover;
    background-position: center;
    height: 890px;
}
.jisseki_slider{top: 20%;}
.s_jissekibox{
    background: url(/img/up/divine/tekityujisseki_sp.png) no-repeat;
    background-size: contain;
    background-position: center;
    height: 590px;
    width: 334px;
}
.s_jissekitextbox{
    right: 25.5%;
    top: 52%;
    line-height: 1.3em;
}
.s_jisseki_left{top: 15%; left: 0%; width: 100%;}
.s_jissekiplan {font-size: 1.6rem;}
.s_jissekirace {font-size: 2.5rem; margin-top: .3em;}
.s_jissekimoney {font-size: 4.4rem;}
.s_jissekisub {font-size: 1rem;}
}
/*---------------------------------------
Divineとは？
----------------------------------------*/
@media screen and (max-width:599px) {
.about{padding: 40px 40px 0;}
.aboutbox,
.aboutbox.revers{
    flex-direction: column-reverse;
    /* padding: 0 20px; */
    position: relative;
    margin-bottom: 45%;
}
.aboutbox::after,
.aboutbox.revers::after{
    position: absolute;
    display: inline-block;
    content: "";
    z-index: -1;
    width: 100%;
    border-radius: 50%;
    padding-top: 100%;
    background: #B2912E9E;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.abouttextbox{gap: 20px;}
/*.abouttitle{gap: 0;}*/
.aboutno{font-size: 15vw; text-shadow: 2px 2px 0 #fff;}
.aboutmain{font-size: 7vw;}
.aboutmain.two{font-size: 6.5vw;}
.aboutsub{font-size: 3.37vw; text-shadow: 1px 1px 0 #000;}
.abouttext{font-size: 1.4rem; line-height: 1.6em;}
}
/*---------------------------------------
サポート
----------------------------------------*/
@media screen and (max-width:599px) {
    .support{padding: 5% 0 130px;}
    .supportbox{
        background: url(/img/up/divine/support_sp.png) no-repeat;
        background-size: cover;
        background-position: top;
        padding: 130px 1em 100px;
    }
    .supporttitle{
        background: url(/img/up/divine/ribon_sp.png) no-repeat;
        background-size: contain;
        background-position: center;
        width: 95%;
        top: 3%;
    }
    .supportflex{
        flex-wrap: wrap;
        margin: 3em 0;
    }
    .supporttext1{font-size: 1.2rem; line-height: 1.8em;}
    .supportflex img{width: 24.15vw;height: 24.15vw;}
    .supporttext2.sub{font-size: 4.07vw;}
    .supportbox::after{
        bottom: 2%;
        right: 50%;
        transform: translateX(50%);
    }
}
/*---------------------------------------
口コミ
----------------------------------------*/
@media screen and (max-width:599px) {
.kutikomi{padding: 50px 10px 0 !important;}
.koebox{
    margin-left: 35px;
    width: 100%;
    padding: 40px 1em 1em;
}
.koebox:nth-child(1){
    margin-top: 0px;
}

.koebox.koeboxLogin{
     margin-left: 35px;
     width: auto !important;
     padding: 40px 1em 1em;
}
.koebox::after{
    border-radius: 0;
    border-width: 0 20px 30px 0;
}
.ribon {
    width: 270px;
    top: 5px;
    left: -13%;
}
.ribontext{top: 13px;}
.nextbtn{width: 250px; height: 50px;}
}

/*---------------------------------------
フッター
----------------------------------------*/
@media screen and (max-width:599px) {
.footertext.left{text-align: left; margin-top: 1em;}
.footerarea {
    height: 789px;
    justify-content: flex-start;
    padding: 8vw 0;
}
.f_menuarea{padding: 50px 20px;}
.footerimg{top: 15vw;}
.footerinner {width: 90%;}
.footerinner .logo{width: 200px;height: auto;}
.footerinner .text1{font-size: 6vw; margin-top: 2em;}
.f_tokuten_label.sp{
    position: relative;
    z-index: 10;
}
.footertotop{font-size: 1.6rem;}
.f_flex{
    display: flex;
    width: 100%;
    gap: 10px;
}
.f_menu.sp{
    width: 100%;
    font-size: 3.2vw;
}
.f_menuitem{line-height: 5em;}
}
/*---------------------------------------
featherlight新規登録
----------------------------------------*/
@media screen and (max-width:599px) {
    .entry{padding:10px 20px;}
    .entry .logo{width: 130px;}
    .entry_text1{font-size: 2.4rem;}
    .tourokupop{width: 300px; margin-bottom: 1em;}
    .f_f {padding: 20px 0;}
}

/*--------------------------------------------
サブページ
----------------------------------------------*/
@media screen and (max-width:599px){
    .subHeader{height: 180px; padding-bottom: 2em;}
    .subTitle{font-size: 3.5rem;}
    .subTitle span{font-size: 1.6rem;}
    .login_sub_title{
        background: url(/img/up/divine/midashi_hiakei_sp.png) no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height:60.35vw;
        z-index: 1;
        position: absolute;
        top: 0;
    }
    .login_sub{margin-top: 36.23vw;}
    .subTitle.login{font-size: 7.25vw; bottom: 10%;}
    .subTitle.login.long{font-size: 6.25vw; bottom: 12%;}
    .subTitle.login.long span{font-size: 1.5rem;}
}
/*--------------------------------------------
サポートフォーム
----------------------------------------------*/
@media screen and (max-width:599px){
    .support_content p{font-size: 1.4rem;}
    .support_form label{font-size: 2rem;}
    .support_mail,.support_textarea{font-size: 1.4rem;}
    .support_btn{
        width: 250px;
        height: 45px;
        font-size: 1.6rem;
    }
    .support_footerbox p:nth-child(2){font-size: 1.2rem;}
}
/*--------------------------------------------
的中実績
----------------------------------------------*/
@media screen and (max-width:599px){
    .result_box{width: 100%; height: 62.76vw;margin-bottom: 0;}
    .result_banner{
        width: 36.5vw;
        top: 21.5%;
        right: 2%;
    }
    .result_left{
        top: 22%;
        left: 3.5%;
    }
    .result_money{font-size: 7.73vw;}
    .result_plan{font-size: 2.9vw;}
    .result_race{
        margin-top: .8em;
        font-size: 3.86vw;
    }
    .result_sub{font-size: 2.42vw;}

    .jissekisearch{font-size: 1.4rem; padding: 0 .5em;}
}
/*--------------------------------------------
ページネーション
----------------------------------------------*/
@media screen and (max-width:599px){
    .pager_link,
    .pager_current{
        font-size: 1.6rem;
        width: 7.25vw;
        height: 7.25vw;
        line-height: 7.25vw;
    }
    .pager_link.next,
    .pager_link.back:nth-child(1){
         font-size: 2.9vw !important;
    }
}
@media screen and (max-width:599px){
    .tokutei tr th,
    .tokutei tr td{
        display: block; /* セルを縦に */
    }
}


/*------------------ここからログイン後-----------------------------*/
@media screen and (max-width:599px){
    .top_banner{margin-bottom: 5.49vw;}
    .black_title{font-size: 4.83vw;}
    .black_btn{width: 250px; height: 55px; font-size: 1.4rem;}
    .table_yellow tr th,
    .table_yellow tr td{font-size: 3.38vw; border: 1px solid #D1AB39;}
    .table_yellow.table_hosyou th,.table_yellow.table_hosyou td{display: block;}
    .koukaiplan_text{font-size: 3.38vw;}
    .redbtn_long{width: 100%; height: 15.7vw; font-size: 4.83vw;}
    .redbtn_long::after{width: 6.35vw; height: 6.35vw; line-height: 6.55vw; padding-left: 2px;}
}
/*--------------------------------------------
ヘッダー
----------------------------------------------*/
@media screen and (max-width:599px){

    .headercontainer1{
        flex-direction: column;
        align-items: end;
        margin-left: auto;
    }
    .loginheader1{
        font-size: 1.2rem;
        padding: 1em 60px 1em 10px !important;
    }
    .loginheader1.camp{
        align-items: center;
        padding: 1em 10px 1em 10px !important;
    }
    .loginheader_sub{
        background: #fff;
        padding: 1em 0;
    }
    .loginheader_sub .content_width{
        display: flex;
        font-size: 1.2rem;
        align-items: center;
        width: 100%;
    }
    .loginheader3{
        padding: 1em 0 3em;
        line-height: 1;
    }
    .headermesse img{margin-right: 1em;}
    .link_red.hed{font-size: 1.6rem;}
    .margin.hed1text{margin-right: auto !important;}
    .roul_btn{font-size: 12px; padding: .5em; margin-left: 0;}
    .roul_btn img{
      height: 20px;
      margin-right: .5em;
      animation: kaiten 3s linear infinite;
    }
    .spHeader1{justify-content: space-between;}
}
/*--------------------------------------------
おすすめ情報
----------------------------------------------*/
@media screen and (max-width:599px){
    .top_slider img{
        width: 334px;
        margin: 0 10px 30px;
    }
}
/*--------------------------------------------
TOPプラン一覧
----------------------------------------------*/
@media screen and (max-width:599px){
    .ribbontitle{
        background: url(/img/up/divine/ribon_sp.png) no-repeat;
        background-size: contain;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        height: 83px;
        margin-top: 10.15vw;
    }
    .topribbontitle{font-size: 12.08vw; top: -15%;}
    .topribbontitle span{font-size: 1.4rem;}
}
@media screen and (max-width:599px){
    .plan_box.gold .plan_banner{padding:0;}
    .plan_banner.show{filter: brightness(120%);}
    .plan_container{padding: 17.08vw 2.42vw 0;}
    .plan_box{width: 100%;}
    .plan_title,.subplan_title1,.subplan_title2,.plan_money p{font-size: 4.83vw !important;}
    .plan_title_big{font-size: 5.07vw; height: 10.14vw;}
    .plan_inner2 p,
    .plan_money span,
    .plan_btn1,.plan_btn2,
    .plan_label.gentei::after,
    .plan_label.tihou::after,
    .plan_label.point::after,
    .plan_label.open::after,
    .plan_label.close::after,
    .plan_box.gold .plan_inner2 p,
    .plan_box.gold .plan_label.gentei::after,
    .plan_box.gold .plan_btn1,
    .plan_box.gold .plan_btn2{font-size: 3.38vw;}
    .plan_box.gold .plan_money p{font-size: 7vw !important;}
    .plan_box.gold .plan_pfo_box{padding: 1em;}
    .plan_pfo_box p{font-size: 2.9vw;}
    .plan_inner2 img{width: 4.83vw;}
    .plan_pfo_box .nextbtn{width: 33.82vw; height: 7.25vw; font-size: 4.11vw;}
    /*---差分---*/
    .plan_inner1.osusume::after{width: 16.91vw; height: 16.43vw;}
    .plan_inner1 .osusumeLabel{height: 16.43vw;left:-3%;top: -15%;}
    .sticker{width: 16.91vw; height: 16.43vw;}
    .plan_container.sub,
    .plan_container.flat,
    .plan_box.gold{padding:5.08vw 10px;}
    .plan_box.gold{width: 100%;} 
    .plan_box.gold .plan_inner2{
       width: 100%;
       margin: 0 auto;
       padding: 3.81vw 2.34vw 2.34vw;
     }
    .subribbon{width: 100%; margin: 24.15vw auto 0;}
}
@media screen and (max-width:599px){
    .picup{margin-top: 7.25vw;}
}
/*-----------------------------------------------
プラン購入
------------------------------------------------*/
@media screen and (max-width:599px){
    .purchase_box{
        flex-direction: column; 
        align-items: flex-start;
        padding: 1em;
        gap: 10px;
        border-left: none;
        border-top: 1em solid #B73635;
    }
    .purchase_box.tihou{border-left: none; border-top: 1em solid #4BAD32;}
    .purchase_box div{flex-direction: column; width: 100%;}
    .purchase_box img,.pur_textbox img{width: 20px;}
    .purchase_box p,.pur_textbox p{font-size: 4.83vw;}
    .buybtn{
        font-size: 4.83vw;
        width: 100%;
        height: 14.49vw;
    }
    .buybtn.big{font-size: 5.38vw;}
    .purchase_inner{padding: 1em 0;}
    .pur_textbox{
        flex-direction: column; 
        align-items: center; 
        gap: 1em;
    }
    .pur_textbox.center{flex-direction: row;}
    .pur_textbox p{font-size: 7.25vw;}
    .pur_textbox img{width: 7.25vw;}
    .pur_text{font-size: 3.38vw;}
    .cardimg{width: 70px !important;}
}
/*---------------------------------------
情報公開(上部にもあり)
----------------------------------------*/
@media screen and (max-width:599px){
    .plan_box.row{flex-direction: column;}
    .plan_box.row .plan_inner1{width: 100%;}
    .under_title{font-size: 4.83vw !important;}
    .nextbtn.red{
        width: 100%;
        height: 10.49vw;
        font-size: 4.83vw;
    }
}
/*-----------------------------------------------
プラン詳細内スライダー、黒背景
------------------------------------------------*/
@media screen and (max-width:599px){
    .black_window{min-height: 105px;}
    .black_window p{font-size: 7.25vw;}
    .plan_slider{padding: 10px 0px 50px;}
    .plan_slider_box{
        width: 51.93vw;
        height: 49.03vw;
        margin: 0 5px;
    }
    .result_left.inplan{top: 21%; left: 0%;}
.ribbontitleText.detailes.sp{
    font-size: 2rem !important;
    top: 5vw !important;
    line-height: 1;
    white-space: nowrap;
}
}
@media screen and (max-width:960px){
    .black_window .detail{flex-direction: column}
    .tri{transform: rotate(90deg);}
}
/*-----------------------------------------------
メッセージ
------------------------------------------------*/
@media screen and (max-width:599px){
    .messe_box{flex-direction: column;}
    .m_b_1{border: 1px solid #707070 !important; border-radius:  10px 10px 0 0;}
    .m_b_2{border-bottom: none; border-right: 1px solid #707070; border-radius: 0;}
    .messe_btn{width: 100%; border-radius: 0 0 10px 10px; height: 12.08vw;}
    .m_b_1 div img{width: 4.83vw;}
    .messe_title,.message_title{font-size: 3.86vw;}
}
/*---------------------------------------
featherlight実績POP
----------------------------------------*/
@media screen and (max-width:599px){
    .poptitle{font-size: 2rem;}
    .jissekipopbox p{font-size: 1.4rem;}
}
/*---------------------------------------
featherlightランク
----------------------------------------*/
@media screen and (max-width:599px){
    .rankpopbox{padding:3em 1em;}
    .poptext1,.poptext2{font-size: 1.4rem;}
    .rankbanner{width: 334px;}
}
/*-----------------------------------------------
初心者ガイド
------------------------------------------------*/
@media screen and (max-width:599px){
    .step{flex-direction: column;}
    .greenline{display: none;}
    .link_btn{width: 100%; font-size: 1.4rem;}
    .flexbox{flex-direction: column;}
    .triangle{transform: rotate(90deg); margin: 0 auto;}
    .step_img{width:100%;display: flex;align-items: center;justify-content: center;}
    .step_img.second{width:100%;}
}
/*-----------------------------------------
サンクスページ
------------------------------------------*/
@media screen and (max-width:599px){
    .thanks img{width: 72.46vw;}
}

/*-----------------------------------------------
プラン詳細内チャート
------------------------------------------------*/
@media screen and (max-width:599px){
.plan_chart{
    padding: 10px !important;
    height: 36vh;
}
#chart{height: 33vh !important;}
}
/*-----------------------------------------------
ルーレット
------------------------------------------------*/
@media screen and (max-width:599px){
.ribbon_red.roulette p{
     bottom: 56%;
}
.roulette_flex_left{font-size: 7.08vw;}
.roulette_flex_right{font-size: 2.33vw;}
}
/*----------------------------------------------
初心者ガイド追加文
-------------------------------------------------*/
@media screen and (max-width:599px){
.tableFlex1{width: 20%;}
.tableFlex2 img {width: 100px;}
}
/*---------------------------------------
おすすめ情報実績テーブル
-----------------------------------------*/
@media screen and (max-width:599px){
.picjisseki {
    width: 100%;
    font-size: 1.2rem;
}
}