:root{
    --battery-accent-color01:#FFF100;
    --battery-accent-color02:#0E6EB8;
    --battery-accent-color03:#F39800;
    --battery-gray-color:#A8B6C2;
    --battery-tachikawa-color:#94671C;
    --battery-chiba-color:#233958;
    --battery-shizuoka-color:#616C4A;
    --battery-fujieda-color:#5F2E2E;
}
/* === mainVisual === */
#battery{
    position:relative;
    * {
        font-family:Arial,Helvetica,"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",Meiryo,"Open Sans",-apple-system,blinkMacSystemFont, sans-serif;
        color:#000;
    }
    & .mainVisual{
        width:100%;
        min-height:600px;
        background-image:url(../../img/battery/bg_gray.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        padding:3rem;
        position:relative;
        &:before {
            content:"";
            display:block;
            position:absolute;
            top:0;
            transform:translateX(-50%);
            -webkit-transform:translateX(-50%);
            left:50%;
            width:100%;
            height:82%;
            background-image:url(../../img/battery/bg_blue.jpg);
            background-size:cover;
            background-repeat:no-repeat;
            background-position:right;
            clip-path:polygon(0 0, 100% 0, 100% 41%, 0% 100%);
        }
        & .inner{
            max-width:1140px;
            margin:0 auto;
            position:relative;
            & .campaign-title{
                position:relative;
                & .gentei-text{
                    position:absolute;
                    width:19%;
                    top:0;
                    right:13%;
                }
                & h1{
                    width:74%;
                    position:relative;
                    margin-left:-2%;
                    margin-bottom:10px;
                    &:before{
                        content:"";
                        display:block;
                        position:absolute;
                        top:0;
                        left:0;
                        width:100%;
                        height:100%;
                        background-image:url(../../img/battery/campaign_title_shadow.png);
                        background-repeat:no-repeat;
                        background-size:100%;
                        background-position:center;
                        mix-blend-mode:multiply;
                        z-index:-1;
                    }
                    & img {
                        display:block;
                    }
                }
                & .campaign-date{
                    width:55%;
                }
            }
            & .battery-image{
                width:36%;
                margin-right:0;
                margin-left:auto;
                margin-top:-25%;
                margin-bottom:0;
                & figcaption {
                    font-size:12px;
                    font-weight:500;
                }
            }
        }
    }
}

/* === disc === */
#battery{
    & .sectionBox {
        padding-right:3rem;
        padding-left:3rem;
        & > * {
            max-width:1140px;
            margin-right:auto;
            margin-left:auto;
        }
    }
}
#battery{
    & .disc{
        padding-top:6.25rem;
        padding-bottom:12rem;
        position:relative;
        overflow:hidden;
        z-index: 0;
        &:before,
        &:after{
            content:"";
            display:block;
            width:40%;
            height:100%;
            position:absolute;
            top:50%;
            background-image:url(../../img/battery/bg_deco.png);
            background-repeat:no-repeat;
            background-size:contain;
            background-position:right;
            z-index:-1;
        }
        &:before{
            left:-2%;
            transform:translateY(-50%) rotate(180deg);
            -webkit-transform:translateY(-50%) rotate(180deg);
        }
        &:after{
            right:-2%;
            transform:translateY(-50%);
            -webkit-transform:translateY(-50%);
        }
        & picture {
            position:relative;
            z-index: 0;
            & .imgBox{
                display:block;
                width:90%;
                max-width:800px;
                margin:0 auto;
            }
        }
    }
}

/* === merit === */
#battery{
    & .merit {
        background:linear-gradient(to bottom, #E2F5FD 80%, transparent 20%);
        position:relative;
        &:before{
            content:"";
            display:block;
            width:100%;
            height:32rem;
            background-color:#73BFDF;
            clip-path:polygon(0 62.5%, 100% 0%, 100% 37.5%, 0% 100%);
            position:absolute;
            bottom:0;
            left:0;
        }
        &:after{
            content:"";
            display:block;
            width:100%;
            height:40rem;
            background-color:#AAD9ED;
            clip-path:polygon(0 50%, 100% 0%, 100% 50%, 0% 100%);
            position:absolute;
            bottom:116px;
            left:0;
        }
    }
}

/* === simulation === */
#battery{
    & .simulation{
        padding-bottom:9rem;
        position:relative;
        z-index:2;
        & h2{
            width:100%;
            max-width:840px;
            margin-top:0;
            margin-bottom:0;
            container-type:inline-size;
            & img{
                margin-top:-15cqw;
            }
        }
        & .txt{
            font-weight:700;
            line-height:1.6;
            text-align:center;
            margin-bottom:2rem;
            & span{
                display:block;
            }
            & span:first-child{
                font-size:28px;
            }
            & span:nth-child(2){
                font-size:36px;
            }
            & span:nth-child(3){
                font-weight:400;
                font-size:14px;
            }
        }
        & figure{
            width:100%;
            max-width:740px;
            & figcaption{
                font-size:14px;
                font-weight: 500;
                color:#333;
                margin-top:2rem;
            }
        }
    }
}

/* === sonae === */
#battery{
    & .sonae{
        padding-bottom:9rem;
        position:relative;
        z-index:1;
        & h2{
            width:90%;
            max-width:510px;
            height:78px;
            background-color:var(--battery-accent-color02);
            clip-path:polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
            text-align:center;
            font-size:32px;
            font-weight:700;
            line-height:1.5;
            color:#fff;
            padding:16px 40px;
            margin:0 auto -40px;
            & span{
                color:var(--battery-accent-color01);
            }
        }
        & .border-box{
            border:4px solid var(--battery-accent-color02);
            background-color:#fff;
            padding:50px 50px 40px;
            & ul{
                margin:0;
                & li{
                    & h3{
                        display:flex;
                        align-items:center;
                        gap:12px;
                        font-size:28px;
                        color:var(--battery-accent-color02);
                        &:before{
                            content:"";
                            width:56px;
                            height:56px;
                            background-repeat:no-repeat;
                            background-size:contain;
                            background-position:center;
                        }
                    }
                    & p{
                        font-size:20px;
                        font-weight:600;
                    }
                }
                & li:first-child{
                    border-bottom:2px dashed var(--battery-gray-color);
                    padding-bottom:30px;
                    margin-bottom:20px;
                    & h3{
                        padding-top:10px;
                        &:before{
                            background-size:48px 48px;
                            background-image:url(../../img/battery/icon_saigai.png);
                        }
                    }
                }
                & li:nth-child(2){
                    & h3{
                        padding:10px 0;
                        &:before{
                            background-image:url(../../img/battery/icon_ev.png);
                        }
                    }
                }
                & p{
                    & .marker{
                        background:linear-gradient(transparent 50%, var(--battery-accent-color01) 40%);
                        padding-bottom:2px;
                    }
                    & .size-S{
                        font-size:24px;
                    }
                    & .size-M{
                        font-size:28px;
                    }
                    & .size-L{
                        font-size:40px;
                    }
                }
            }
        }
    }
}

/* === cta === */
#battery{
    & .cta{
        background-image:url(../../img/battery/bg_blue.jpg);
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        padding-top:320px;
        padding-bottom:80px;
        margin-top: -320px;
        & .inner{
            max-width:900px;
            margin:0 auto;
            & h2{
                margin-bottom:10px;
            }
        }
        & .zeroemi-info{
            text-align:center;
            color:#fff;
            border:1px dashed #fff;
            border-radius:10px;
            padding:8px 16px;
        }
        & h3{
            text-align:center;
            color:#fff;
            font-size:32px;
            margin:44px 0 40px;
        }
        & .yoyaku-box{
            background-color:rgba(255, 255, 255, .28);
            position:relative;
            padding:40px;
            &:before{
                content:"";
                display:block;
                width:100%;
                height:100%;
                box-shadow:0 4px 20px rgba(0, 160, 233, .61);
                position:absolute;
                top:0;
                left:0;
                mix-blend-mode:multiply;
                z-index:-1;
            }
            & h4{
                text-align:center;
                color:#fff;
                font-size:26px;
                background-color:transparent;
                padding:0;
                margin-bottom:16px;
            }
            & p{
                text-align:center;
                color:#fff;
                & .br-sp{
                    display:none;
                }
            }
            & ul{
                display:grid;
                grid-template-columns:repeat(2, calc(50% - 8px));
                gap:16px;
                margin-top:20px;
                margin-bottom:0;
                & li{
                    & a{
                        display:block;
                        width:100%;
                        font-size:22px;
                        font-weight:600;
                        text-align:center;
                        text-decoration:none;
                        line-height:1.5;
                        border:3px solid;
                        background-color:#fff;
                        padding:20px 78px;
                        position:relative;
                        &:after{
                            content:"";
                            display:block;
                            width:42px;
                            height:42px;
                            mask-image:url(../../img/battery/link-arrow.svg);
                            -webkit-mask-image:url(../../img/battery/link-arrow.svg);
                            mask-repeat:no-repeat;
                            -webkit-mask-repeat:no-repeat;
                            mask-position:center;
                            -webkit-mask-position:center;
                            mask-size:100%;
                            -webkit-mask-size:100%;
                            position:absolute;
                            top:50%;
                            transform:translateY(-50%);
                            -webktit-transform:translateY(-50%);
                            right:16px;
                        }
                    }
                }
                & li:first-child{
                    & a{
                        border-color:var(--battery-tachikawa-color);
                        color:var(--battery-tachikawa-color);
                        &:after{
                            background-color:var(--battery-tachikawa-color);
                        }
                    }
                }
                & li:nth-child(2){
                    & a{
                        border-color:var(--battery-chiba-color);
                        color:var(--battery-chiba-color);
                        &:after{
                            background-color:var(--battery-chiba-color);
                        }
                    }
                }
                & li:nth-child(3){
                    & a{
                        border-color:var(--battery-shizuoka-color);
                        color:var(--battery-shizuoka-color);
                        &:after{
                            background-color:var(--battery-shizuoka-color);
                        }
                    }
                }
                & li:nth-child(4){
                    & a{
                        border-color:var(--battery-fujieda-color);
                        color:var(--battery-fujieda-color);
                        &:after{
                            background-color:var(--battery-fujieda-color);
                        }
                    }
                }
            }
        }
    }
}

/* === クレバリー専用 === */
#battery{
    & .mainVisual{
        isolation:isolate;
    }
    p,h3{
        margin-bottom:0;
    }
    ul{
        padding:0;
        li {
            margin:0;
        }
    }
}

@media screen and (max-width:1199px){

}
@media screen and (max-width:1023px){
    /* === mainVisual === */
    #battery{
        & .mainVisual{
            min-height:unset;
            & .inner{
                & .campaign-title{
                    & .gentei-text{
                        right:21%;
                    }
                    & h1{
                        width:66%;
                        margin-top:0;
                    }
                }
                & .battery-image{
                    margin-top:-34%;
                }
            }
        }
    }

    /* === disc === */
    #battery{
        & .disc{
            &:before{
                left:-12%;
            }
            &:after{
                right:-12%;
            }
        }
    }

    /* === simulation === */
    #battery{
        & .simulation{
            padding-top:0;
            & h2{
                max-width:680px;

            }
        }
    }

    /* === cta === */
    #battery{
        & .cta{
            .inner{
                max-width:640px;
            }
        }
    }
}
@media (max-width:767px) {
    #battery{
        & .sectionBox{
            padding-right:1rem;
            padding-left:1rem;
        }
    }

    /* === mainVisual === */
    #battery{
        & .mainVisual{
            padding:1.5rem 1rem;
            &:before{
                clip-path:polygon(0 0, 100% 0, 100% 56%, 0% 78%);
            }
            & .inner{
                & .battery-image{
                    width:100%;
                    margin:-30% auto 0;
                }
                & .campaign-title{
                    display:flex;
                    flex-direction:column;
                    & .gentei-text{
                        order:3;
                        position:unset;
                        width:36%;
                        max-width:220px;
                    }
                    & h1{
                        order:1;
                        width:100%;
                        margin-top:0;
                    }
                    & .campaign-date{
                        order:2;
                        width:100%;
                    }
                }
            }
        }
    }

    /* === disc === */
    #battery{
        & .disc{
            &:before,
            &:after{
                background-size:cover;
                background-position:left;
            }
            &:before{
                left:-4%;
            }
            &:after{
                right:-4%;
            }
        }
    }

    /* === merit === */
    #battery{
        & .merit{
            &:before{
                height:22rem;
                clip-path:polygon(0 45.45%, 100% 0%, 100% 54.55%, 0% 100%);
                bottom:2rem;
            }
            &:after{
                height:25rem;
                clip-path:polygon(0 40%, 100% 0%, 100% 60%, 0% 100%);
                bottom:13rem;
            }
        }
    }

    /* === simulation === */
    #battery{
        & .simulation{
            padding-bottom:4rem;
            & h2{
                padding:0 25px;
            }
            & .txt{
                & span:first-child{
                    font-size:16px;
                }
                & span:nth-child(2){
                    font-size:20px;
                }
            }
            & figure{
                & figcaption{
                    font-size:12px;
                }
            }
        }
    }

    /* === sonae === */
    #battery{
        & .sonae{
            padding-bottom:2rem;
            & h2{
                font-size:20px;
                line-height:48px;
                width:84%;
                height:auto;
                margin-bottom:-42px;
                clip-path:polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
            }
            & .border-box{
                padding:50px 20px 20px;
                & ul{
                    & li{
                        & h3{
                            font-size:18px;
                            gap:4px;
                            &:before{
                                width:40px;
                                height:40px;
                            }
                        }
                        & p{
                            font-size:16px;
                            & .size-L{
                                font-size:28px;
                            }
                            & .size-M{
                                font-size:22px;
                            }
                            & .size-S{
                                font-size:20px;
                            }
                        }
                    }
                    & li:first-child{
                        & h3:before{
                            background-size:36px 36px;
                        }
                    }
                    & li:nth-child(2){
                        & h3:before{
                            background-size:40px 40px;
                        }
                    }
                }
            }
        }
    }

    /* === cta === */
    #battery{
        & .cta{
            & .zeroemi-info{
                padding: 8px 10px;
            }
            & h3{
                font-size:22px;
                margin:24px auto;
            }
            & .yoyaku-box{
                padding:20px;
                & h4{
                    font-size:20px;
                }
                & p{
                    & .br-sp{
                        display:block;
                    }
                }
                & ul{
                    display:flex;
                    flex-direction:column;
                    gap:8px;
                    & li{
                        & a{
                            font-size:18px;
                            padding:16px 64px;
                            &:after{
                                width:32px;
                                height:32px;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width:420px) {
    /* === merit === */
    #battery{
        & .merit{
            &:before{
                height:18rem;
                clip-path:polygon(0 22.222%, 100% 0%, 100% 77.778%, 0% 100%);
                bottom:8rem;
            }
            &:after{
                height:20rem;
                clip-path:polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
                bottom:22rem;
            }
        }
    }

}