@charset "utf-8";

figure {
    background-image: url(../image/mainV_01_bg.png);
    width: 100%;
    height: 896px;
    position: relative;
}
.sp{
    display: none;
}

.mainV01character {
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}

.mainV01bgtxtA {
    position: absolute;
    top: 130px;
    right: 0;
    left: 0;
    margin: auto;
}

.mainV01bgtxtB {
    position: absolute;
    top: 670px;
    right: 0;
    left: 0;
    margin: auto;
}

.character {
    margin-top: 48px;
    height: 280px;
}

.chara_h {
    background-image: url(../image/home_character_bg01.png);
    background-repeat: no-repeat;
}

.chara_c {
    background-image: url(../image/home_character_bg02.png);
    background-repeat: no-repeat;
}

.chara_j {
    background-image: url(../image/home_character_bg03.png);
    background-repeat: no-repeat;
}

.character .character_name {
    padding: 20px 0 0 80px;
}

.character .character_name p {
    margin-bottom: 8px;
    font-family: ;
    font-size: 24px;
    font-weight: bold;
    line-height: 36px;
    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;
}

.chara_h .character_name p {
    color: #EB6EA5;
}

.chara_c .character_name p {
    color: #00B9EF;
}

.chara_j .character_name p {
    color: #CEBB5B;
}

.character .vis_sd {
    margin-top: 8px;
}

.character .btn {
    text-align: right;
    margin: 16px 48px 0 0;
    gap: 8px;
}

.character .btn li {
    margin-bottom: 8px;
    width: 103px;
    height: 53px;
}

.character ul li button:hover {
    opacity: 0.5;
}

.chara_h .btn .to_character {
    background-image: url(../image/btn_toCharacter_H.png);
    background-repeat: no-repeat;
}

.chara_c .btn .to_character {
    background-image: url(../image/btn_toCharacter_C.png);
    background-repeat: no-repeat;
}

.chara_j .btn .to_character {
    background-image: url(../image/btn_toCharacter_J.png);
    background-repeat: no-repeat;
}

.character .btn .to_character a {
    display: block;
    margin-top: 16px;
    text-align: center;
    line-height: 53px;
    font-weight: bold;
    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        1px 0px 0 #fff,
        0px 1px 0 #fff,
        -1px 0px 0 #fff,
        0px -1px 0 #fff;
}

.chara_h .btn .to_character a {
    color: #EB6EA5;

}

.chara_c .btn .to_character a {
    color: #00B9EF;

}

.chara_j .btn .to_character a {
    color: #CEBB5B;
}

.chara_h .btn .to_character a:hover {
    color: #00B9EF;
}

.chara_c .btn .to_character a:hover {
    color: #EB6EA5;
}

.chara_j .btn .to_character a:hover {
    color: #FFF2AB;
}

.chara_c,
.chara_j {
    display: none;
}

.topix {
    margin-top: 64px;
    padding: 45px 56px;
    border: #FFF2AB solid 5px;
    border-radius: 30px;
}

.topix .box p {
    line-height: 24px;
}

.topix .box img {
    margin-top: 8px;
}

.topix .box a {
    display: block;
    text-align: center;
    width: 104px;
    margin: 20px auto 0;
    padding: 15px;
    background-color: #EB6EA5;
    border: #00B9EF solid 1px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    transition: 0.5s;
}

.topix .box a:hover {
    display: block;
    text-align: center;
    width: 104px;
    margin: 20px auto 0;
    padding: 15px;
    background-color: #9CEFFF;
    border: #EB6EA5 solid 1px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
}

.topix .date {
    color: #00B9EF;
}

.sns {
    margin: 96px 200px 0;
}

.sns ul li a:hover {
    opacity: 0.5;
}
@media (max-width:768px) {
    
    body{
        min-width:768px;
    }
    .mainV{
        display: none;
    }
    .sp{
        display: block;
        text-align: center;
    }
    
}
}