@charset "utf-8";
.sp_blue{background-color:#0099ff; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_orange{background-color:#f39518; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_grn{background-color:#4eb563; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_nvy{background-color:#304ea0; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_red{background-color:#e61d37; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_gry{background-color:#999999; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_pnk{background-color:#ff99cc; color:#FFF; padding:1px 5px; mmargin-right:5px;}
.sp_ylw{background-color:#f7c767; color:#FFF; padding:1px 5px; margin-right:5px;}
.sp_ppl{background-color:#8964a8; color:#FFF; padding:1px 5px; margin-right:5px;}

.des {
    margin: 40px 0;
}
.desc {
    text-align: left;
    display: inline-block;
    width: 400px;
    line-height: 200%;
    padding: 0 20px 20px;
    vertical-align: top;
}
.memo {
    background-color: #ffefd5;
    padding: 40px;
    text-align: left;
    line-height: 200%;
}
a.btn {
    display: inline-block;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #228bc8;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 0 6% 0 10%;
    color: #228bc8;
    text-align: left;
    text-decoration: none;
    position: relative;
    transition-duration: 0.2s;
}
a.btn:hover {
    background: #228bc8;
    color: #fff;
}
a.btn:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent #228bc8;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -7px;
}
a.btn:hover:before {
    border-color: transparent transparent transparent #fff;
}
#support {
    margin-bottom: 20px
}
#support img {
    max-width: 100%;
    height: auto
}

@media screen and (max-width: 700px) {
.desc {
    width: 100%;
    display: block;
    box-sizing: border-box;
}
#mainimg img {
    width: auto;
    height: 350px;
}
.des {
    margin: 10px 0;
    text-align: left;
}
.des img {
    padding-left: 20px;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
.memo {
    padding: 20px;
}
}