@charset "utf-8";
body{
        margin:0;
        padding:0;
        color:#000000; 
        text-align:center;
font-family:'Meiryo,´ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
        background-color:#fff;
        letter-spacing:1px;
}
a:hover{color:#ff8000;}
a:active{color:#ff0000;}

header{
        width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        text-align:left;
        padding:0px;

}
#all{
        margin-left:auto;
        margin-right:auto;
        width:100%        
        height:auto;
}
.sp-only {
        display: block;
}
/* =========================================
head
=========================================*/
.headerbox{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-top:0px;
        text-align:left;
        padding:20px;
        box-sizing: border-box;
        color:#fff;
        background:linear-gradient(90deg,#d9533c,#a84871,#8e4096,#5433d5);;
}
.headerbox img{
        width:30%;
        margin-right:auto;
        margin-left:auto;
        display:block;
}

.headerbox .smhead{
        display:none;
}

.headtext {
        font-size:10px;
        text-align: center;
        margin: 0;
        color:#fff;
}
/* =========================================
box
=========================================*/

.box{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        display:block;
        padding:30px 0px 50px 0px;
        clear:both;
        text-align:left;
}
/* =========================================
main
=========================================*/
.mainbox{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        padding:0px;
}
.mainbox .smhead{
        display:none;
}
.mainbox .mds{
        padding:20px;
        margin:20px 0px 20px 0px;
        color:#fff;
        font-size:35px;
        font-weight:bold;
        text-align:center;
        background-color:#cc353c;
        border-bottom:5px solid #CC518A;
}
.mainbox #mds{
        padding:20px;
        margin:20px 0px 20px 0px;
        color:#fff;
        font-size:35px;
        font-weight:bold;
        text-align:center;
        background-color:#CC518A;
}
.mainbox h1,h2,h3{
        color:#D01E12;
        padding:10px 10px 0px 10px;
        margin:0px;
        font-size:22px;
}

/* =========================================
table
=========================================*/
table{
        width:100%;
        margin:10px 0px 10px 0px;
        padding:0px;
        border-collapse:collapse;
        background-color:#fff;
        border:1px solid #ccc;
}
table th{
        width:30%;
        margin:0px;
        padding:7px;
        font-size:14px;
        background-color:#FCF4D9;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
table b{
        font-size:17px;
        color:#613304;
}
table strong{
        font-size:17px;
        color:#D01E12;
}

table td{
        background-color:#FFFCEE;
        width:30%;
        margin:0px;
        padding:7px;
        font-size:13px;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;

}
table .bc{
        background-color:#999;
        color:#fff;
}
/* =========================================
footer
=========================================*/
footer{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        padding-top:20px;
        padding-bottom:20px;
        background: linear-gradient(90deg,#d9533c,#a84871,#8e4096,#5433d5);
        color:#fff;
}
footer a{
        color:#fff;
        text-decoration:none;
}
footer a:visited{
        color:#fff;
        text-decoration:none;
}

footer a:hover{
        color:#ff0000;
        text-decoration:none;
}
.footerbox {
        width: 85%;
        margin:0 auto;
}
.footerbox p {
        font-size: 12px;
        text-align: left;
}
.footerbox2 {
        width: 100%;
        border-bottom: 1px solid #fff;
        margin-bottom: 30px;
        padding-bottom:30px;
}
.footerbox12 {
        width: 85%;
        margin: 0 auto;
}
.footertitle {
        font-size: 25px;
        font-weight: bold;
        text-align: left;
}
.footersns {
        text-align: left;
}
.footersns a {
        padding-right: 10px;
}
.toiawse {
        text-align: left;
}
.footmenu {
        width: 85%;
        margin: 0 auto;
}
.footmenu ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        padding: 0;
}
.footmenu li {
                width: 48%;
}
.footmenu a {
        font-size: 13px;
        display: block;
}
/* =========================================
cont
=========================================*/
.contentbox{
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:80%;
        padding:30px 30px 20px;
        background:linear-gradient(90deg,#d9533c,#a84871,#8e4096,#5433d5);
}
.contentbox p{
        width:80%;
        font-size:20px;
        color:#fff;
        margin-left:auto;
        margin-right:auto;
        display:block;
        padding:0px 25px 0px 25px;
        text-align:center;
}
.bubitextbox {
        text-align: center;
}
.demobox h2 {
        color: #fff;
        margin-bottom: 10px;
        font-size: 16px;
}
.demobtn {
        display: block;
        padding: 20px;
        box-sizing: border-box;
        color:#333;
        background: #feb300;
        font-weight: bold;
        font-size: 20px;
}
.eximg img {
        max-width: 100%;
}
.beginnertext p {
        padding-bottom: 0;
}
/* =========================================
content2box
=========================================*/
.content2box {
        background-color: #feb300;
margin-left: auto;
    margin-right: auto;
    display: block;
    width: 80%;
    padding:20px 30px;
}

.content2box p {
        font-size: 14px;
        color:#333;
}
/* =========================================
explanation
=========================================*/
.explanation{
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
        display:block;
        width:100%;
        padding:0px;
}

.explanationbox p{
        width:90%;
        font-size:21px;
        color:#333;
        margin-left:auto;
        margin-right:auto;
        display:block;
        padding:0px 25px 0px 25px;
        text-align:center;
        box-sizing: border-box;
}

.explanationbox small{
        text-align:center;
        font-size:12px;
        color:#333;
}
.extext p a{
        color:#FCCD2A;
}
.extext p a:hover{
        color:#fff;
}

.bubilist {
        padding: 10px 10px 10px 0;
        box-sizing: border-box;
        font-size: 14px;
}
@media screen and (min-width:1024px) {
header{
        width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        text-align:left;
        padding:0px;

}
#all{
        margin-left:auto;
        margin-right:auto;
        width:100%        
        height:auto;
}
/* =========================================
head
=========================================*/
.headerbox{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-top:0px;
        text-align:left;
        padding:20px;
        color:#333;
        background-color:#fff;
        box-sizing: border-box;
}
.headerbox img{
        width:21%;
        margin-right:auto;
        margin-left:auto;
        display:block;
}

.headerbox .smhead{
        display:none;
}

.headerbox {
        font-size:10px;
        color:#333;        
}
/* =========================================
box
=========================================*/

#box{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        display:block;
        padding:20px 0px 100px 0px;
        clear:both;
        text-align:left;
}

/* =========================================
main
=========================================*/
.mainbox{
        width:55%;
        margin-left:auto;
        margin-right:auto;
        padding:0px;
}
.mainbox .smhead{
        display:none;
}
.mainbox .mds{
        padding:20px;
        margin:20px 0px 20px 0px;
        color:#fff;
        font-size:35px;
        font-weight:bold;
        text-align:center;
        background-color:#cc353c;
        border-bottom:5px solid #CC518A;
}
.mainbox #mds{
        padding:20px;
        margin:20px 0px 20px 0px;
        color:#fff;
        font-size:35px;
        font-weight:bold;
        text-align:center;
        background-color:#CC518A;
}
.mainbox h1,h2,h3{
        color:#D01E12;
        padding:10px 10px 0px 10px;
        margin:0px;
        font-size:22px;
}

/* =========================================
ranking
=========================================*/
#ranking .leftbox{
        float:left;
        width:28%;
        margin:10px 5px 10px 0px;
}
#ranking .leftbox img{
        border:5px solid #ccc;
}

#ranking .rightbox{
        float:right;
        width:69%;
        border:1px solid #ccc;
        margin:10px 0px 10px 5px;
        background-color:#F5F9FA;
}
#ranking .rightcont{
        background-color:#1B4D68;
        color:#fff;
        padding:10px;
        font-size:16px;
        font-weight:bold;
}
#ranking p{
        font-size:14px;
        line-height:170%;
        margin:10px;
}
/* =========================================
kaisetsu
=========================================*/
#kaisetsu ul{
        margin:0px;
        padding:20px;
        background-color:#F6FAED;
        border:1px solid #ccc;
}
#kaisetsu li{
        font-size:12px;
        border-bottom:1px dashed #ccc;
        margin:0px 0px 5px 0px;
        padding:0px 0px 5px 0px;
}
#kaisetsu strong{
        color:#336600;
}
#kaisetsu p{
        font-size:22px;
        margin:30px 10px 30px 0px;
        float:right;
        font-weight:bold;
        -webkit-animation:blink 1.5s ease-in-out infinite alternate;
        -moz-animation:blink 1.5s ease-in-out infinite alternate;
        animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/* =========================================
clear
=========================================*/
.clear{
        clear:both;
}
/* =========================================
table
=========================================*/
table{
        width:100%;
        margin:10px 0px 10px 0px;
        padding:0px;
        border-collapse:collapse;
        background-color:#fff;
        border:1px solid #ccc;
}
table th{
        width:30%;
        margin:0px;
        padding:7px;
        font-size:14px;
        background-color:#FCF4D9;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
table b{
        font-size:17px;
        color:#613304;
}
table strong{
        font-size:17px;
        color:#D01E12;
}

table td{
        background-color:#FFFCEE;
        width:30%;
        margin:0px;
        padding:7px;
        font-size:13px;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;

}
table .bc{
        background-color:#999;
        color:#fff;
}
/* =========================================
footer
=========================================*/
footer{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        padding-top:20px;
        padding-bottom:20px;
        background:linear-gradient(90deg,#d9533c,#a84871,#8e4096,#5433d5);
        color:#fff;
}
footer a{
        color:#fff;
        text-decoration:none;
}
footer a:visited{
        color:#fff;
        text-decoration:none;
}

footer a:hover{
        color:#ff0000;
        text-decoration:none;
}
.footerbox {
        width: 55%;
        margin:0 auto;
        display: flex;
}
.footerbox p {
        font-size: 12px;
        text-align: left;
}
.footerbox2 {
        width: 100%;
        border-bottom: 1px solid #fff;
        margin-bottom: 30px;
        padding-bottom:30px;
}
.footerbox12 {
        width: 55%;
        margin: 0 auto;
}
.footertitle {
        font-size: 25px;
        font-weight: bold;
        text-align: left;
}
.footersns {
        text-align: left;
}
.footersns a {
        padding-right: 10px;
}
.footbtn {
        padding: 10px 30px;
        background: #fff;
        color: #1f405f;
        border-radius: 30px;
}
.toiawse {
        text-align: left;
}
/* =========================================
cont
=========================================*/
#cont{
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:55%;
        padding:20px 30px 40px 30px;
        background:linear-gradient(90deg,#d9533c,#a84871,#8e4096,#5433d5);
}

#cont p{
        width:60%;
        font-size:25px;
        color:#fff;
        margin-left:auto;
        margin-right:auto;
        display:block;
        padding:0px 25px 0px 25px;
        text-align: center;
}
/* =========================================
cont2
=========================================*/
#cont2{
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
        display:block;
        width:67%;
        padding:0px;
}
#cont2 p{
        width:54%;
        font-size:21px;
        color:#FCCD2A;
        margin-left:auto;
        margin-right:auto;
        display:block;
        padding:0px 25px 0px 25px;
        text-align:center;
        box-sizing: border-box;
}
#cont2 small{
        text-align:center;
        font-size:9px;
        color:#333;
}
#cont2 p a{
        color:#FCCD2A;
}
#cont2 p a:hover{
        color:#333;
}
.cmpbox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 50px;
}
.cmp-start-2-adv {
        width: 45%;
}
.cmp-start-2-nyu {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        justify-content:space-between;
}
.cont5 .logo2 {
        width: 10%;
}
.cmp-start-2-left {
        margin-bottom: 20px;
}
.bubilist {
        padding: 20px;
        box-sizing: border-box;
}
/* =========================================
button
=========================================*/
#main .button img{
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:95%;
}
#main .button:hover  img {
        opacity:0.8;
}
.sp-only {
        display: none;
}
}