@charset "utf-8";

html { scroll-behavior: smooth;}

*{ margin :0; padding :0; }

body{ 
        font-family:"YakuHanJPs","Roboto",-apple-system,BlinkMacSystemFont,"Noto Sans","Noto Sans CJK JP","Helvetica Neue","Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;
        background :#000;
        font-size : 14px;
        line-height : 140%;
        letter-spacing :1.5px;
        color : #fff;
        text-align :center;
        cursor :default;

        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
}

#top img{ width : 97%; margin : 1% auto 3%; }

h1{
    margin : 4% auto 15%;
    font-size : 120%;
    letter-spacing :2px;
    text-shadow : 2px 2px 2px red;
    line-height : 160%;
}

h2{
    margin : 20% auto 10%;
    padding : 6px 0;
    font-size : 120%;
    text-align :center;
    border : 6px double #232;
    background-image : url("img/back.jpg");
    background-size : 100%;

    text-shadow : 2px 2px 3px #000;
    letter-spacing :2px;
}

h3{ 
    color :#eee;
    font-size :150%;
    margin :50px auto 10px;
    text-align :center;
}
   
   .check
   {
        list-style-position: inside;
        padding-left: 20px;
        line-height: 40px;
        background: url("img/check.png") left 0px top 3px no-repeat;
        background-size: 14px 14px;
   }


    #contents
    {
        margin : 0 auto;
        padding : 2% 1% 0;
    }

    #main{ clear :both; overflow :hidden; margin :0 auto; }

    #top,#main,#footer,#demes,#one,#las{ display:none; }

        p{ margin :10px 0 20px; letter-spacing :1.5px;}

        a,a:visited{ color : #66f; }
        a:hover{ color : red; }

        .ft{ font-weight :bold }

            .red,.green,.blue,.yellow{ padding : 0 1%; }
            .red{    color : red; }
            .green{  color : #8f8; }
            .blue{   color : #0af; }   
            .yellow{ color : #ff0; }         


        h2,input,#number,.bai,.bz,.bt,.num,#keyboard,.cover
        {
              border-radius         :5px;
            -moz-border-radius      :5px;
            -webkit-border-radius   :5px;
        }



        input[type="submit"],.bz
        { 
            cursor :pointer;
            border : 3px ridge #aaa;
        }
        input[type="submit"]:hover,.bz:hover
        { 
            background : #888;
            color : #fff;
            border : 3px outset #bbb;
        }

            #btn_area
            { 
                clear :both; overflow :hidden;
                padding-left :1%;
                margin : 10% auto 0;
            }

            .bz,.btn input
            {
                float : left;
                width : 12%;
                margin : 2% 3%;
                line-height : 120%;
                font-size : 160%;
                text-align :center; 
            }

            .bz
            {
                background : #EFEFEF;
                color : #000;
            }


                #btns
                {
                    clear :both; overflow :hidden;
                    margin : 8px auto 0;
                }

                #redo,#set{ border : 3px outset #ddd; }
                #redo{ width : 20%; }
                #set{ width : 44%; }
                

                #number
                {
                    float : left;
                    width : 18%;
                    margin :2.5% 0 0 3%;
                   
                    background : #444;
                    line-height : 140%;
                    font-size : 150%;
                    letter-spacing :3px;
                    cursor :pointer;
                    box-shadow : 0 0 5px #fff;
                    vertical-align :middle;
                }

                 

                        #demes
                        { 
                            clear :both; overflow :hidden;
                            margin : 40px auto 0;
                            height: 130%;
                            padding : 0.5% 0 0.5% 0.5%;
                            background : #333;
                        }

                            .deme
                            {
                                float : left;
                                width : 12%;
                                margin : 2%;
                                border : 1px solid #fff;
                                padding : 1% 0;
                                text-align :center;
                                font-weight :bold;
                                font-size : 130%;
                                cursor :pointer;
                            }



                                .BR0
                                {
                                    background : #0a0;
                                }

                                .BR1
                                {
                                    background : red;
                                }

                                .BR2
                                {
                                    background : #000;
                                }

                                    #log_area
                                    {
                                        clear :both; overflow :hidden;
                                        margin :10px auto 60px;
                                    }
                                        
                                       

                                        #data,#clear
                                        {
                                            float : left;
                                            margin : 0.5% 2% 0;
                                            width : 20%;
                                            padding-top : 0.5%;
                                            letter-spacing :0.8px;
                                        }

                                        #clear{ float : right; }


                                            .AI
                                            { 
                                                height : 10px; 
                                                margin : 1.5% auto;
                                                display :inline-block;
                                                width : 12%;
                                                border : 1px solid #fff;
                                                padding : 1% 0;
                                            }

                .box
                {
                    clear :both; overflow :hidden;
                    padding-left : 1%;
                    font-weight :bold;
                }

                .tit
                {
                    width : 94%;
                    text-align :left;
                    background : #222;
                    padding : 1.5% 2%;
                    margin :2px auto 10px;
                    font-weight :bold;
                    box-shadow :0 0 2px #fff
                }
                    .bai
                    {
                        display : inline-block;
                        padding : 0 2%;
                        cursor :pointer;
                    }
                       .onx
                       {
                            color : #8f8;
                            background : #030;
                            border : 1px solid #5f5;
                            cursor : default;
                            margin : 0 2.5%;
                            font-weight :bold;
                       }


                .signal
                { 
                    float : right;
                    color : #f44;
                    text-align :right;
                }

                    .blk{ padding :0 10px; background :#222; font-weight :bold; text-align :center; margin-right :15px; box-shadow :0 0 2px #fff; }

                #sort{  font-size : 75%; padding : 2% 0; }
              
                #x2area,#x3area,#x8area{ width :98%; float :left; margin :1.5% 1% 50px; }

                    .fl{ float : left; }
                    .out2
                    {
                        display : inline-block;
                        width : 14.5%;
                        margin : 0 0.8% 1%;
                        padding : 3px 0;
                        text-align :center;
                        border : 0.5px solid #000;
                    }

                        .bd{ border : 0.5px solid #888; font-weight :normal; font-size : 95%; }
                        .cx{ padding : 0.5px 0; margin-bottom : 10px; }

                            #red{ background : red; }
                            #red,#black{ border : 0.5px solid #fff; }
                            #even,#odd{ background :#357; }
                            #high,#low{ background :#444; }



                                .minus{ color : #f44; }
                                .plus{  color : #4af; }



                                    #imgleft{ padding-left : 2.5%; }
                                    .x3text{ margin : 3% 0 0 8%; }
                                    .box img
                                    {
                                        float : left;
                                        width : 80%;
                                    }

                                        .out3
                                        {
                                            float : left;
                                            width : 20%;
                                        }
                                            .xx{ margin-top : 2%; }
                                    

                .line,.bom,.cat,.dog,.pom,.grf,.eat{ float : left; }

                #x8area
                {
                    width : 97%;
                    margin-left : 2.5%;
                }

                    .line
                    { 
                        width : 100%;
                        margin-bottom :1.5%; 
                        padding : 2px 0;
                    }

                    

                        .bom
                        {
                            width : 8%;
                            border : 1px solid #fff;
                        }

                            .cat,.dog,.pom{ width : 15%; color :red; text-align :right; }
                            .cat{ width : 12%; color :#fff }
                            .dog{ width : 20%; color :#4a0 }

                            .grf
                            {
                                margin-left : 3%;
                                background : #a00;
                                background-image: linear-gradient(90deg, #faa 0%, red 100%);
                                box-shadow : 1px 1px 1px #fff;
                            }

                            .eat{ margin-left : 3%; width : 17%; background :#1a1a1a; }
                            .pst
                            {
                                background : #0e0;
                                background-image: linear-gradient(90deg, #cfc 0%, #0a0 100%);
                                box-shadow : 1px 1px 1px #fff;
                            }

                                .iro0{ color : #444; }
                                .iro1{ color : #fff; }
 

        #text
        {
            margin-top : 15%;
            text-align :left;
            font-size : 90%;
            line-height : 170%;
        }

        #text p{ padding :0 2% 2%; }

            #text img
            {
                display : block;
                width : 90%;
                margin : 0 auto 5%;
                padding : 2%;
                box-shadow : 0 0 7px #fff;

                      border-radius         :10px;
                    -moz-border-radius      :10px;
                    -webkit-border-radius   :10px;
            }


                        #smart img
                        {
                            margin-bottom : 50px;


                            border:10px solid #666;
                            border-top    : 35px solid #888;
                            border-bottom : 35px solid #888;
                            box-shadow :none;

                               border-radius        :30px;
                            -moz-border-radius      :30px;
                            -webkit-border-radius   :30px;
                        }


                .exp
                {
                    width : 80%;
                    margin : -2% 5% 10%;
                }
                .exp p
                {
                    margin : 10px 0 0;
                     font-size : 140%;
                }

                    .bang
                    { 
                        color :#f80;
                        padding : 0 3px;
                        font-weight :bold;
                    }

                    .bt
                    {
                        display : inline-block;
                        background : #eee;
                        color : #000;
                        margin : 0 1%;
                        padding : 0 3%;
                        line-height : 95%;
                        font-weight :bold;
                        border : 2px ridge #aaa;                       
                    }
                        .num
                        {
                            background : #444;
                            box-shadow : 0 0 5px #fff;
                            margin-left : 2%;
                            padding : 0 4%;
                            color : #fff;
                            font-size : 90%;
                            font-weight :normal;
                        }

                            .space{ height : 50px; }


                            #keyboard{ width :87%; margin :0 auto 100px; padding : 4% 4% 2%; border : 3px dashed #eee; }          
                            .key{ color : #0af; }

                                .ya{ width : 5%; margin :0 auto 1%; }

                                a img:hover{ opacity :0.7 }


                        .sample
                        {
                            line-height : 220%;
                            padding-left : 3%;
                        }

                            .bl{ display: inline-block; }

                            .lef{ padding-left : 0; }

                            .b10{ margin-bottom: 10px; }



                                .nagare
                                {
                                    font-size : 25px;
                                    color : #8c8;
                                    margin : 40px auto;
                                    font-weight :bold;
                                }



                                    .un_R,.un_G{ padding:0 5px; }

                                    .un_R{ border-bottom:1px solid red }
                                    .un_G{ border-bottom:1px solid #0f0 }


#footer
{
    width : 90%;
    background : #222;
    margin : 10% auto 0;
    padding : 1%;
}




@media all and ( max-width :319px ){

    body{ width :319px; }
}                  

@media all and ( min-width :375px ){

    #main{ width : 375px; }
}

@media all and ( min-width :750px ){

    h1{ font-size : 150%; }
    h2{ font-size : 140%; }
    p{ font-size : 120%; }
    #contents{ width : 750px; }

    
    #number:hover
    { 
        box-shadow :0 0 10px #fff;
        background :#333; 
        color : #aaa;
        text-decoration-line: line-through;
        text-decoration-style: solid;
        text-decoration-color: red;
    }
  

}


#process
{
    position :fixed;
    top : 0;
    left : 1%;
    color : #ff0;
}


 /*  width:100% → padding-top:56.25% */
#tube
{
    position :relative;
    width :98.8%;
    padding-top :53.44%;
    border : 1px solid #000;
}
    #tube iframe
    {
      position :absolute;
      top   :0;
      left  :0;
      width : 100% !important;
      height: 100% !important;
    }




        /* ======= scroll ======= */
        #page-top
        {
            position :fixed;
            bottom   :5%;
            right    :5%;
            display  :none;
        }

            #page-top a
            {
                opacity :0.7;
                width: 120%;
                font-weight :bold;
                text-align :center;
                display :block;
                padding :8px 0;
                font-size :16px;
                line-height :16px;
                text-decoration :none;

                color :#000;
                text-shadow :1px 1px 1px #fff;
                background : #aaa;
                box-shadow :0 3px 5px #aaa;
                border-radius :4px;
            }

                #page-top a:hover
                {
                    box-shadow :0 1px 5px #333;
                    text-decoration :none;
                    opacity :0.85;
                }
        /* ======= scroll ======= */