@charset "utf-8";


.btn {
    text-align: center;
    padding: 0 200px;
    margin-bottom: 40px;
}

.btn a:hover {
    opacity: 0.5;
}

section {
    margin-bottom: 100px;
}

.character01 {
    height: 574px;
    background: url(../image/character_bg.png),
        linear-gradient(#eb6ea580 0%, #ffffff80 100%);
    border-top: #FFF2AB solid 3px;
    border-bottom: #FFF2AB solid 3px;
}

.character02 {
    height: 574px;
    background: url(../image/character_bg.png), linear-gradient(#9cefff80 0%, #ffffff80 100%);
    border-top: #FFF2AB solid 3px;
    border-bottom: #FFF2AB solid 3px;
}

.character03 {
    height: 574px;
    background: url(../image/character_bg.png), linear-gradient(#cebb5b80 0%, #ffffff80 100%);
    border-top: #FFF2AB solid 3px;
    border-bottom: #FFF2AB solid 3px;
}

.inner {
    position: relative;
}

.box_l .bg_vis {
    position: absolute;
    right: -10%;
}

.box_l h3 {
    position: absolute;
    top: 60px;
}

.box_l .cv {
    position: absolute;
    top: 200px;
}

.box_l .txt {
    position: absolute;
    top: 340px;
}

.box_r .mark {
    position: absolute;
    top: 20px;
    right: -5%;
}

.box_r .vis {
    position: absolute;
    right: 5%;
}

.box_l .cv {
    font-size: 20px;
}

.box_l p {
    line-height: 35px;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        2px 0px 0 #fff,
        0px 2px 0 #fff,
        -2px 0px 0 #fff,
        0px -2px 0 #fff;
}

.character01 .box_l p {
    color: #FF0070;
}

.character02 .box_l p {
    color: #0070EF;
}

.character03 .box_l p {
    color: #998000;
    line-height: 35px;
}

@media (max-width:768px) {
    h1{
        font-size: 30px;
    }
    .character01 {
        background: none;
        border: none;
    }
    .character02 {
        background: none;
        border: none;
    }
    .character03 {
        background: none;
        border: none;
    }
}