/*
 * base width / height is 846 / 639
 */
.wrapper_free_electric_animation {
    position: relative;
    width: 98%;
    max-width: 846px;
    margin: 0 auto 1em;
    height: 0;
    padding-top: 75.5%; /* 639 / 846 */
    background-color: #f5f5f5;
    overflow: hidden;
}
.anim_items {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0;
    background-color: #ddd;
}
.anim_items img {
    width: 100%;
}
.wrapper_anim_before {
    opacity: 1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
}
.anim_title {
    width: 31.9%; /* 270 / 846 */
    height: 7.1%;/* 46 / 639 */
    background-color: #f0840e;
    color: white;
    text-align: center;
    top: 1.2% ; /* 8 / 639 */
    left: 0;
    font-size: 1.6em;
    line-height: 2em;
}
.anim_arrows {
    background-color: transparent;
    width: 30.2%; /* 256/846 */
    height: 53%; /* 339/846 */
    left: 18.6%; /* 158 / 846 */
    top: 23.7%; /*152/639*/
}
.anim_home {
    width: 26.6%;
    height: 19.5%; /* 125 / 639 */
    left: 1.1%; /* 10 / 846 */
    background-color: transparent;
}
.anim_home_1, .anim_home_4 {
    top: 15%; /* 96 / 639 */
}
.anim_home_2, .anim_home_5 {
    top: 38.8%; /* 243 / 639 */
}
.anim_home_3, .anim_home_6 {
    top: 61.5%; /* 393 / 639 */
}

.anim_company {
    width: 34.3%; /* 290 / 846 */
    height: 40.6%; /* 260 / 639 */
    background-color: transparent;
}
.anim_company_1 {
    top:23.1%;
    left: 50%;
}

.anim_balloon {
    width: 17.2%; /* 146/846 */
    height: 22.8%; /* 146/639 */
    border-radius: 50%;
    color: white;
    font-size: 2rem;
}
.anim_balloon_text {
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.2em;
    width: 100%;
    text-align: center;

    line-height: 1.2;
    position: absolute;
    top: 50%;
}
.anim_balloon_1 {
    top: 32.2%; /* 206/639 */
    left: 79.9%; /* 676/846 */
    background-color: #009eff;
}
.anim_lead {
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 10%;
    background-color: transparent;
    font-size: 1.9em;
    color: #3c3c3c;
}
.wrapper_anim_after {
    width: 100%;
    height: 100%;
    background-color: transparent;
    top: 0;
    left: 100%;
}
.anim_company_2 {
    top: 17.7%; /* 150/846 */
    left: 50%;
    width: 32.6%; /* 276/846 */
    z-index: 2103;
}
.anim_company_3 {
    top: 0;
    left: 62.6%; /* 530/846 */
    width: 32.6%; /* 276/846 */
    z-index: 2101;
}
.anim_company_4 {
    top: 46.9%; /* 300/639 */
    left: 62.6%;
    width: 32.6%; /* 276/846 */
    z-index: 2105;
}
.anim_arrows_after {
    width: 30.2%; /* 256/846 */
    height: 53%; /* 339/846 */
    left: 15.8%; /* 176 / 846 */
    top: 15%; /*96/639*/
}
.anim_balloon_2 {
    top: 32.2%; /* 206/639 */
    left: 79.9%; /* 676/846 */
    background-color: #009eff;
    z-index: 2104;
}
.anim_balloon_3 {
    top: 1%; /* 7/639 */
    left: 50.8%; /* 430/846 */
    background-color: #ffb846;
    z-index: 2102;
}
.anim_balloon_4 {
    top: 62.5%; /* 400/639 */
    left: 50.8%; /* 430/846 */
    background-color: #cf5251;
    z-index: 2106;
}

@media ( max-width : 768px ) {
    /* for sp, tablet */
    .anim_title {
        font-size: 1rem;
    }
    .anim_balloon {
        font-size: 1rem;
    }
    .anim_lead {
        font-size: 1.2rem;
    }
}
@media ( max-width : 450px ) {
    /* for sp */
    .anim_title {
        font-size: .8rem;
    }
    .anim_lead {
        font-size: .8rem;
    }
}