@charset "utf-8";

/* ==================================================================

    index.css

=================================================================== */


/* ◇ box
-------------------------------- */
.contents main > section{
    padding: 80px 0;
}

.contents main > section + section{
    margin-top:0;
}

.contents main > section .more{
    margin-bottom: 0;
}

.contents main > section .more a{
    width: 258px;
}

/* SP用
----------- */
@media only screen and
(max-width : 767px) {
    
    /* ◇ box
    -------------------------------- */
    .contents main > section{
        padding-top: 8vw;
        padding-bottom: 8vw;
    }


    .contents main > section .more a{
        width: 70%;
    }

}

/* --------------------------------
■accentBox
-------------------------------- */ 
.accentBox{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("../../images/accent/visual.jpg?d=20240920") 50% 50% no-repeat;
    background-size: cover;
    filter: blur(10px);
    
    animation: accentBoxAnime 1.6s forwards;
}
@-webkit-keyframes accentBoxAnime {
    0% { filter: blur(4px); transform:scale(1.1);}
    100% { filter: blur(0);  transform:scale(1);}
}

    .accentBox .container{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width:1200px;
        height: 100%;
        margin: 0 auto;
    }


    .accentBox .text{
        clip-path: inset(0 100% 0 0);
        transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
        transition-delay: 0.25s;
        transition-property: clip-path;
        text-align: center;
        margin-top: 60px;
        margin-left: auto;
        line-height: 1.5;
    }
    .accentBox .text.confirmed {
        clip-path: inset(0);
    }

    .accentBox .text > em,
    .accentBox .text > span{
        display: inline-block;
        color: #fff;
        font-size: 4.2rem;
        padding: 13px 17px;
        line-height: 1.1;
        opacity: 0;
        transform: translate(20%, 0);
        font-weight: 700;
        
        transition: 1.0s cubic-bezier(0.37, 0, 0.63, 1), opacity linear 0.7s;
        transition-property: clip-path;
        clip-path: inset(0 100% 0 0);
        transition-delay: 0.75s;
    }

    .accentBox .text.confirmed > em,
    .accentBox .text.confirmed > span{
        opacity: 1;
        transform: translate(0, 0);
        clip-path: inset(0);
    }

    .accentBox .text.confirmed > em img,
    .accentBox .text.confirmed > span img{
        max-width: 100%;
    }

    .accentBox .text + .text{
        margin-top: 10px;

        transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
        transition-property: clip-path;
    }
    .accentBox .text:first-child + .text{
        margin-top: 24px;
        transition-delay: 1s;
    }
    .accentBox .text:first-child  > span{
        letter-spacing: 0.05em;
    }

    .accentBox .text:first-child + .text > span{
        font-size: 2.5rem;
    }

    .accentBox .buttonBox{
        position: absolute;
        bottom: 20px;
        right: 4vw;

        .buttonStyle{
            text-align: left;

            & a{
                width: 400px;
            }
        }
    }

    .accentBox .scroll{
        position: absolute;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        text-align: center;
        
        @media only screen and
        (max-width : 767px) {
            width: 6em;
            bottom: -30px;
        }

        a{
            display: block;
            text-decoration: none;
            text-align: center;
            
            span{
                display: block;
                margin-bottom: 4px;
                color: #fff;
                font-size: 1.2rem;
                font-weight: 700;
                line-height: 1.1;
            }

            &:hover{
                opacity: 0.8;
            }

            img{
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
                
                @media (max-width : 767px) {
                    width: 3em;
                }
            }
        }


    }

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {
    
.accentBox{
    overflow: visible;
    width: 100%;
    height: 90vh;
}

    .accentBox .container{
        max-width:95%;
    }
    
    .accentBox .appeal{
        bottom: 20px;
    }
    .accentBox .appeal img{
        width: 100%;
    }

    .accentBox .text{
        margin-top: 0vw;
        clip-path: inset(0 100% 0 0);
        transition: 1.0s cubic-bezier(0.37, 0, 0.63, 1);
        transition-delay: 0.75s;
        transition-property: clip-path;
        font-size: 2.4rem;
 
    }
    .accentBox .text.confirmed {
        clip-path: inset(0);
    }

    .accentBox .text > em,
    .accentBox .text > span {
        font-size: 2.2rem;
        padding: 0;
        line-height: 1.4;
    }
    .accentBox .text:first-child + .text > span{
        font-size: 1.6rem;
    }

    .accentBox .buttonBox{
        position: absolute;
        bottom: 40px;
        right: 2vw;

        .buttonStyle{

            & a{
                width: 96vw;
            }
        }
    }
    
}

/* --------------------------------
■letter
-------------------------------- */ 
#letter{
    padding-top: 60px;
    padding-bottom: 60px;
}

/* --------------------------------
■messageBox
-------------------------------- */ 
.messageBox{
    position: relative;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    margin-bottom: 24px;
    color: #fff;


    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:#000 url("../../images/index/message_background.jpg") 50% 50% no-repeat;
        background-size: cover;
        z-index: -1;
    }

    .container{
        position: relative;
        padding-top: 100px;
        padding-bottom: 100px;
        box-sizing: border-box;

        @media only screen and (max-width : 767px) {
            padding-top: 12vw;
            padding-bottom: 12vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .title{
            overflow: clip;
            font-size: 3.6rem;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;

            @media only screen and (max-width : 767px) {
                font-size: 2.4rem;
            }

            & > span{
                display: inline-block;
            }
            & + .text{
                margin-top: 4em;

                @media only screen and (max-width : 767px) {
                    margin-top: 2em;
                }
            }
        }

        .text{
            overflow: clip;
            font-size: 2.0rem;
            line-height: 1.8;
            text-align: center;
            font-weight: 600;

            @media only screen and (max-width : 767px) {
                font-size: 1.6rem;
            }

            & > span{
                display: inline-block;
            }

            & + .text{
                margin-top: 2em;

                @media only screen and (max-width : 767px) {
                    margin-top: 1.6em;
                }
            }
        }
    }
}



/* --------------------------------
■solution
-------------------------------- */ 
#solution{
    padding-bottom: 0;

    .title._lv1{
        margin-bottom: 76px;

        @media only screen and (max-width : 767px) {
            margin-bottom: 6vw;
        }
    }

    .leadText{
        text-align: center;

        @media only screen and (max-width : 767px) {
            text-align: left;
        }
    }

    .itemBox{
        margin-top: 48px;

        @media only screen and (max-width : 767px) {
            margin-bottom: 6vw;
        }

        .sideBox{
            margin-top: 48px;
            margin-bottom: 48px;
        }
    }
}
.solutionList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 22vw;

    @media only screen and (max-width : 767px) {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 40vw;
    }
}
.solutionList li{
    overflow: hidden;
    & > a{
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        height: 100%;
        color: #fff;
        text-align: center;
        font-size: 2.0rem;
        font-weight: 600;
        line-height: 1.8;
        text-decoration: none;
        padding: 10%;
        
        & p{
            position: relative;
        }
        & dl{
            position: relative;
            
            dd{
                margin-top: 24px;
                font-size: 1.6rem;
            }
        }

        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 102%;
            height: 102%;
            background: 50% 50% no-repeat;
            background-size: cover;
            transition: .8s;
        }

        &:hover{
            &::before{
                transform: scale(1.1);
            }
        }
    }

    &.business_solarpower > a::before{
        background-image: url("../../images/index/solution/business_solarpower.jpg");
    }
    &.person_solarpower > a::before{
        background-image: url("../../images/index/solution/person_solarpower.jpg");
    }
    &.business_solarpower2 > a::before{
        background-image: url("../../images/index/solution/business_solarpower2.jpg");
    }
    &.person_battery > a::before{
        background-image: url("../../images/index/solution/person_battery.jpg");
    }
    &.energymanagement > a::before{
        background-image: url("../../images/index/solution/energymanagement.jpg");
    }

    &:first-child{
        grid-row: 1 / 3;
    }
}

/* --------------------------------
appeal
-------------------------------- */ 
#appeal{
    background: url("../../images/index/appeal_background.jpg") 50% 50% no-repeat;
    background-size: cover;

    .container{
        min-height: 84vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .title{
            font-size:2.6rem;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
            color: #fff;
            margin-bottom: 84px;

            @media only screen and (max-width : 767px) {
                font-size: 1.8rem;
                margin-bottom: 6vw;
            }
        }

        .appealList{
            display: flex;
            align-items: stretch;
            gap: 24px;

            > li{
                width: calc(25% - 18px);
                background: #fff;
                border-radius: 10px;
                padding: 24px;
                opacity:0;
                visibility:hidden;

                &.confirmed{
                    animation-name: animation-fadeIn;
                    -webkit-animation-name: animation-fadeIn;
                
                    animation-duration: 1s;
                    -webkit-animation-duration: 1s;
                    animation-fill-mode: forwards;

                    &:nth-child(2){
                        animation-delay: 0.3s;
                    }
                    &:nth-child(3){
                        animation-delay: 0.6s;
                    }
                    &:nth-child(4){
                        animation-delay: 0.9s;
                    }
                }

                dl{
                    dt{
                        color: #009BA7;
                        font-size: 1.8rem;
                        font-weight: 700;
                        line-height: 1.5;
                        text-align: center;

                        @media only screen and (max-width : 767px) {
                            font-size: 1.4rem;
                            margin-bottom: 0.8em;
                        }
                    }
                    dd{
                        figure{

                            .image{
                                display: flex;
                                align-items: flex-end;
                                justify-content: center;
                                height: 167px;
                                @media only screen and (max-width : 767px) {
                                    height: 12vw;
                                }
        
                                img{
                                    max-height: 95%;
                                    width: auto;
                                    max-width: 60%;
                                }
                            }
                        }
                    }
                }


            }
        }
        
    }
}

    
/* タブレット用
-------------------------------------------- */
@media (max-width: 1180px) and 
(min-width: 768px) {
    
    
}


/* --------------------------------
■#news
-------------------------------- */ 

#news{
    gap: 0 42px;
}
#news .col1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 235px;
    flex-shrink: 0;
    text-align: left;

    .title{
        &::before{
            content: "●";
            color: #CE1919;
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.1;
        }

        span{
            margin-top: 12px;
        }
    }

    .tab{
        .buttonStyle{
            > a{
                width: 100%;
                padding: 6px 10px;
                text-align: left;
                font-size: 1.4rem;
                font-weight: 700;
                line-height: 1.1;
            }

            & + .buttonStyle{
                margin-top: 8px;
            }

            &.active{
                > a{
                    background: #CE1919;
                    border-color: #CE1919;
                    color: #fff;

                    span:before{
                        border-top: 1px solid #fff;
                        border-right: 1px solid #fff;
                    }
                }
            }
        }

    }
}
#news .newsBox{
    flex-grow: 1;
}

#news .newsBox .newsList{
    padding-left: 42px;
}
#news .newsBox .newsList a{
    color: #333;
    text-decoration: none;
}

#news .newsBox .newsList li{
    border-bottom: 1px solid #333;
    a{
        display: block;
        padding: 12px;
        transition: .3s;

        p.state{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0 12px;

            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 12px;

            span.date{
                display: inline-block;
            }
            
            span.category{
                display: inline-block;
                font-size: 1.0rem;
                color: #fff;
                background: #ddd;
                padding: 4px 12px;
                line-height: 1.1;
                border-radius: 60px;

                &.news{
                    background: #CE1919;
                }
                &.event{
                    background: #19A9CE;
                }
            }
        }

        > dl{

            dt{
                font-weight: 700;
            }
            dd{
                margin-top: 12px;
            }
        }

        &:hover{
            background: #efefef;
        }
    } 
} 


@media only screen and
(max-width : 767px) {
    #news{
        padding-bottom: 5vw;
    }

    #news .newsBox{
        padding-bottom: 12px;
        gap:0;
    }

    #news .newsBox .newsList{
        padding: 8px ;
    }
    #news .newsBox .newsList li + li{
        margin-top: 8px;
    }
    #news .newsBox .newsList li a > dl dt{
        flex-shrink: 0;
        font-size: 1.3rem;
    }
    #news .newsBox .newsList li a > dl dd{
        font-size: 1.4rem;
        line-height: 1.2;
    }

}

	
/* --------------------------------
■#company
-------------------------------- */ 

#company{
    background: url("../../images/index/company_background.jpg") 50% 50% no-repeat;
    .container{
        padding-top: 100px;
        padding-bottom: 100px;
        color: #fff;
        gap: 0 42px;

        @media only screen and (max-width : 767px) {
            padding-top: 12vw;
            padding-bottom: 12vw;
            gap: 0;
        }

        .leadArea{
            width: 340px;
            flex-shrink: 0;

            @media only screen and (max-width : 767px) {
                width: auto;
                text-align: center;
                margin-bottom: 6vw;
            }

            img{
                max-width: 100%;
                height: auto;

                @media only screen and (max-width : 767px) {
                    width: 70%;
                    margin: 0 auto;
                }
            }
        }

        .details{
            flex-grow: 1;

            p.text{
                overflow: clip;
                font-size: 1.6rem;
                line-height: 1.8;
                font-weight: 600;

                & + p.text{
                    margin-top: 24px;
                }
            }

            .buttonStyle{
                margin-top: 32px;
                text-align: left;

                a{
                    width: 258px;
                    @media only screen and (max-width : 767px) {
                        width: 100%;
                    }
                }
            }
        }
    }
}


/* --------------------------------
■flowList
-------------------------------- */
#flow
.flowList{
    margin-top: 48px;
    > li{
        position: relative;
        background: #fff;
        border: 1px solid #D4D4D4;

        & + li{
            margin-top: 46px;
        }

        &::before{
            content: '';
            position: absolute;
            bottom: -30px;
            left: 72px;
            width: 16px;
            height: 51px;
            background: url(../../images/common/icon/flow_arrow.svg) no-repeat center center / contain;

            @media only screen and (max-width: 767px) {
                left: 84px;
            }
        }

        &:last-child{
            &::before{
                display: none;
            }
        }

        >dl{
            align-items: center;
            justify-content: space-between;
            gap: 34px;

            @media only screen and (max-width: 767px) {
                padding: 4vw 4vw 8vw 4vw;
                gap: 4vw;
            }

            dt{
                font-size: 2.0rem;
                font-weight: 500;
                width: calc(34.201954397% - 34px);
                flex-shrink: 0;
                padding:37px 0 37px 72px;

                @media only screen and (max-width: 767px) {
                    width: 100%;
                    padding: 0;
                    font-size: 1.6rem;
                }

                .en{
                    display: inline-block;
                    font-size: 3.6rem;
                    font-weight: 500;
                    margin-right: 8px;

                    @media screen and (max-width: 767px) {
                        font-size: 2.4rem;
                    }
                }
                
            }
            dd{
                flex-grow: 1;
                padding:37px 37px 37px 0;

                @media only screen and (max-width: 767px) {
                    padding: 0;
                }
            }
        }
    }

    & + .buttonStyle{
        margin-top: 52px;

        @media only screen and (max-width: 767px) {
            margin-top: 4vw;
        }
    }
}

#works{
    border-top: 1px solid #D4D4D4;
    .title{
        margin-bottom: 48px;
    }
    .leadText{
        margin-top: 48px;
    }

    .worksList{
        > li{
            figure{
                .image{
                    margin-bottom: 8px;
                }
                figcaption{
                    > p{
                        margin-bottom: 2px;
                    }
                    p.name{
                        font-size: 1.6rem;
                        font-weight: 700;
                        line-height: 1.5;
                    }
                    p.date{
                        font-size: 1.4rem;
                        font-weight: 400;
                        line-height: 1.5;
                    }
                    p.item{
                        font-size: 1.4rem;
                        font-weight: 400;
                        line-height: 1.5;
                    }
                }
            }
        }
    }
}

/* --------------------------------
■worksSlider
-------------------------------- */
.worksSlider {
    position: relative;
    overflow: hidden;
    
    .worksSlider__images {
        div {
            img {
                width: 100%;
                height: auto;
                display: block;
                aspect-ratio: 335/409;
                object-fit: cover;
            }
        }
    }

    .slick-dotted.slick-slider{
        margin-bottom: 0;
    }
    
    /* Slickスライダーのスタイル */
    .slick-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 5;
        
        li {
            button {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: none;
                background: rgba(255, 255, 255, 0.5);
                cursor: pointer;
                font-size: 0;
                transition: background 0.3s ease;
                
                &:hover {
                    background: rgba(255, 255, 255, 0.8);
                }
            }
            
            &.slick-active button {
                background: #fff;
            }
        }
    }
    
    .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        cursor: pointer;
        border-radius: 50%;
        font-size: 0;
        z-index: 10;
        transition: background 0.3s ease;
        opacity: 0;
        
        &:hover {
            background: rgba(0, 0, 0, 0.7);
        }
        
        &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-style: solid;
        }
        
        &.slick-prev {
            left: 8px;
            
            &:before {
                border-width: 6px 8px 6px 0;
                border-color: transparent #fff transparent transparent;
                margin-left: -1px;
            }
        }
        
        &.slick-next {
            right: 8px;
            
            &:before {
                border-width: 6px 0 6px 8px;
                border-color: transparent transparent transparent #fff;
                margin-left: 1px;
            }
        }
    }
    
    &:hover .slick-arrow {
        opacity: 1;
    }
}

@media only screen and (max-width: 767px) {
    .worksSlider {
        .slick-arrow {
            width: 28px;
            height: 28px;
            
            &.slick-prev {
                left: 4px;
                
                &:before {
                    border-width: 5px 6px 5px 0;
                }
            }
            
            &.slick-next {
                right: 4px;
                
                &:before {
                    border-width: 5px 0 5px 6px;
                }
            }
        }
        
        .slick-dots {
            bottom: 8px;
            
            li button {
                width: 6px;
                height: 6px;
            }
        }
    }
}