@charset "utf-8";

section {
    .wrap {
        .contents_inner {
            display:grid;
            grid-template-columns:repeat(2,1fr);
            align-items:start;
            grid-column-gap:5%;
            .detail {
                p {
                    &:not(:last-child) {
                        margin-bottom:1em;
                    }
                }
                ul {
                    li {
                        line-height:1.6;
                        &:not(:last-child) {
                            margin-bottom:.33em;
                        }
                        &::before {
                            content:'・';
                            margin:0 .25em;
                        }
                    }
                }
            }
        }
    }
}

#page-link {
    .wrap {
        padding-bottom:90px;
        .contents {
            .smenu {
                width:100%;
                display:flex;
                flex-wrap:wrap;
                gap:10px;
                margin-bottom:50px;
                justify-content:center;
                li {
                    flex-grow:1;
                    width:auto;
                    max-width:16em;
                    a {
                        display:grid;
                        background-color:var(--color_main);
                        font-size:1.4rem;
                        color:#FFFFFF;
                        height:2.6em;
                        align-content:center;
                        justify-content:center;
                        padding:.5em 1em;
                        white-space:nowrap;
                    }
                }
            }
            h2 {
                grid-template-columns:1fr;
                justify-items:center;
                color:var(--color_main);
                margin-bottom:0;
                &::before {
                    content:none;
                }
                span {
                    display:grid;
                    grid-template-columns:repeat(3,auto);
                    align-items:center;
                    justify-content:center;
                    grid-column-gap:.33em;
                    font-size:1.8rem;
                    &::before,&::after {
                        content:'ー';
                    }
                }
            }
        }
    }
}

#network {
    .wrap {
        .contents {
            & > p {
                margin-bottom:2em;
            }
            h3 {
                font-size:2.0rem;
                margin-bottom:1em;
            }
            .slider_wrap {
                &:not(:last-child) {
                    margin-bottom:50px;
                }
            }
            .slick-list {
                overflow:visible;
            }
            .slick-slide {
                width:400px;
                position:relative;
                transition:.7s;
                opacity:0;
                box-shadow:0px 3px 6px rgba(0,0,0,.33);
                img {
                    width:100%;
                }
                p {
                    background-color:var(--color_main);
                    color:#FFFFFF;
                    padding:.33em;
                    text-align:center;
                }
                &.slick-current {
                    z-index:3!important;
                    opacity: 1;
                    & + .slick-slide {
                        transform:translateX(-40%) scale(.66);
                        z-index:2;
                        opacity: 1;
                        & + .slick-slide {
                            transform:translateX(-100%) scale(.33);
                            z-index:1;
                            opacity: 1;
                            & + .slick-slide {
                                transform:translateX(-175%) scale(.1);
                                z-index:1;
                            }
                        }
                    }
                }
                &:has(+ .slick-current) {
                    transform:translateX(40%) scale(.66);
                    opacity: 1;
                }
                &:has(+ .slick-slide + .slick-current) {
                    transform:translateX(100%) scale(.33);
                    opacity: 1;
                }
                &:has(+ .slick-slide + .slick-slide + .slick-current) {
                    transform:translateX(175%) scale(.1);
                    opacity:0;
                }
            }
            .slick-arrow {
                width:40px;
                height:40px;
                background:url(../img/common/icon-arrow-blue-circle.svg) no-repeat center center/contain;
                right:auto;
                top:auto;
                left:auto;
                bottom:0;
                transform:translate(0,0);
                z-index:2;
                &.slick-prev {
                    transform:rotate(-180deg);
                    right:calc(50% + 5px);
                }
                &.slick-next {
                    left:calc(50% + 5px);
                }
                &::before {
                    content:none;
                }
            }
            .slick-dots {
                position: relative;
                width:auto;
                bottom: 0;
                display:flex;
                margin-top:30px;
                padding-bottom:60px;
                justify-content:center;
                gap:15px;
                z-index:1;
                li {
                    width:15px;
                    height:15px;
                    margin:0;
                    padding:0;
                    &.slick-active {
                        button {
                            background-color:var(--color_main);
                        }
                    }
                }
                button {
                    width:15px;
                    height:15px;
                    padding:0;
                    background-color:#D5D5D5;
                    border-radius:50%;
                    &::before {
                        content:none;
                    }
                }
            }
        }
    }
}

#technology {
    .wrap {
        .contents {
            .contents_inner { 
                .detail {
                    order:1;
                }
            }
        }
    }
}

#international {
    .wrap {
        .msg {
            background-color:var(--color_main);
            margin-top:90px;
            p {
                font-size:1.8rem;
                line-height:1.8;
                color:#FFFFFF;
                text-align:center;
                padding:2em 1em;
            }
        }
    }
}

@media (hover:hover) {
}

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

@media screen and (max-width:1024px){
    
    #network {
        .wrap {
            .contents {
                .slick-slide {
                    width:360px;
                    &.slick-current {
                        & + .slick-slide {
                            transform:translateX(-50%) scale(.66);
                            & + .slick-slide {
                                transform:translateX(-115%) scale(.33);
                            }
                        }
                    }
                    &:has(+ .slick-current) {
                        transform:translateX(50%) scale(.66);
                    }
                    &:has(+ .slick-slide + .slick-current) {
                        transform:translateX(115%) scale(.33);
                    }
                }
            }
        }
    }
    
}

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

    section {
        .wrap {
            .contents_inner {
                grid-template-columns:1fr;
                grid-row-gap:20px;
                .detail {
                    ul {
                        font-size:1.4rem;
                        li {
                            line-height:1.5;
                        }
                    }
                }
            }
        }
    }
    
    #page-link {
        .wrap {
            padding-bottom:50px;
            .contents {
                .smenu {
                    display:grid;
                    grid-row-gap:5px;
                    margin-bottom:30px;
                }
                h2 {
                    grid-template-columns:1fr;
                    justify-items:center;
                    color:var(--color_main);
                    margin-bottom:0;
                    span {
                        font-size:1.4rem;
                    }
                }
            }
        }
    }
    
    #network {
        .wrap {
            .contents {
                h3 {
                    font-size:1.8rem;
                }
                .slider_wrap {
                    &:not(:last-child) {
                        margin-bottom:30px;
                    }
                }
                .slick-slide {
                    width:70vw;
                    &.slick-current {
                        & + .slick-slide {
                            transform:translateX(-70%) scale(.66);
                            & + .slick-slide {
                                transform:translateX(-125%) scale(.33);
                            }
                        }
                    }
                    &:has(+ .slick-current) {
                        transform:translateX(70%) scale(.66);
                    }
                    &:has(+ .slick-slide + .slick-current) {
                        transform:translateX(125%) scale(.33);
                    }
                }
            }
        }
    }

    
    #technology {
        .wrap {
            .contents {
                .contents_inner { 
                    .detail {
                        order:unset;
                    }
                }
            }
        }
    }
    
    #international {
        .wrap {
            .msg {
                margin-top:60px;
                p {
                    font-size:1.5rem;
                }
            }
        }
    }
    
}