@charset "utf-8";

#development {
    .wrap {
        padding:30px 0;
        overflow:clip;
        &:first-child {
            padding:0;
        }
        &.development1 {
            background:url(../img/development/bg01.jpg) no-repeat center top/cover;
        }
        &.development2 {
            background:url(../img/development/bg02.jpg) no-repeat center top/cover;
        }
        &.development3 {
            background:url(../img/development/bg03.jpg) no-repeat center top/cover;
            .contents_inner {
                display:grid;
                .detail {
                    order:1;
                    background-color:rgba(255,255,255,.66);
                }
                .imgbox {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    align-items:start;
                    .img {
                        border-radius:50%;
                        position:relative;
                        &:last-child {
                            margin-top:50px;
                        }
                        img {
                            display:block;
                            border-radius:50%;
                        }
                        &::before {
                            content:'';
                            display:block;
                            border-radius:50%;
                            width:100%;
                            height:100%;
                            position:absolute;
                            z-index:1;
                            left:0;
                            top:0;
                            box-shadow:0 0 10px 10px #FFFFFF,
                                    0 0 20px 20px #FFFFFF inset;
                        }
                    }
                }
            }
        }
        &.development4 {
            background:url(../img/development/bg04.jpg) no-repeat center top/cover;
            padding-bottom:90px;
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:5%;
                max-width:1000px;
                margin:0 auto;
                .imgbox {
                    height:100%;
                    box-shadow:0 3px 6px rgba(0,0,0,.3);
                    background-color:#FFFFFF;
                    img {
                        display:block;
                        width:100%;
                        aspect-ratio:3/2;
                        object-fit:cover;
                    }
                    .detail {
                        padding:20px;
                        h4 {
                            font-size:2.4rem;
                            text-align:center;
                        }
                    }
                }
            }
        }
        .contents {
            h3 {
                font-size:4.0rem;
                margin-bottom:.66em;
                .en {
                    display:block;
                    text-align:center;
                    color:#cccccc;
                    font-size:8rem;
                    font-style:italic;
                    &::before,&::after {
                        content:'-';
                        margin:0 .33em;
                    }
                }
                .num {
                    color:var(--color_main);
                    display:inline-block;
                    font-size:1.6em;
                    margin-right:.1em;
                    transform:translateY(.1em);
                }
            }
            .contents_inner {
                .detail {
                    padding:50px 0;
                    position:relative;
                    z-index:2;
                    height:100%;
                    align-self:center;
                    h4 {
                        font-size:4.0rem;
                        line-height:1.33;
                        color:var(--color_main);
                        margin-bottom:.5em;
                    }
                    p {
                        line-height:1.66;
                        &:not(:last-child) {
                            margin-block:1em;
                        }
                        strong {
                            font-size:1.5em;
                            font-weight:600;
                            line-height:inherit;
                        }
                    }
                }
                .item {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    position:relative;
                    min-height:400px;
                    &:not(:last-child) {
                        margin-bottom:60px;
                    }
                    &::before {
                        content:'';
                        display:block;
                        width:100vw;
                        height:100%;
                        background-color:#FFFFFF;
                        position:absolute;
                        right:0;
                        top:0;
                        z-index:0;
                    }
                    .img {
                        position:relative;
                        z-index:1;
                        height:100%;
                        img {
                            display:block;
                            position:absolute;
                            z-index:0;
                            top:0;
                            right:0;
                            height:100%;
                            width:150%;
                            max-width:150%;
                            object-fit:cover;
                        }
                        &::before {
                            content:'';
                            display:block;
                            height:100%;
                            width:151%;
                            position:absolute;
                            z-index:1;
                            top:0;
                            right:0;
                            background: #ffffff;
                            background: linear-gradient(90deg,rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 70%);
                        }
                    }
                    &:nth-child(even) {
                        &::before {
                            right:auto;
                            left:0;
                        }
                        .detail {
                            order:1;
                        }
                        .img {
                            position:relative;
                            z-index:1;
                            height:100%;
                            img {
                                right:auto;
                                left:0;
                            }
                            &::before {
                                right:auto;
                                left:0;
                                background: linear-gradient(-90deg,rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 70%);
                            }
                        }
                    }
                }
            }
        }
    }
}
#linkbox {
    .wrap {
        padding-top:90px;
    }
}


@media (hover:hover) {
}

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

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

    #development {
        .wrap {
            .contents {
                h3 {
                    font-size:3.0rem;
                }
                .contents_inner {
                    .detail {
                        padding:30px 0;
                        h4 {
                            font-size:3.0rem;
                        }
                        p {
                            strong {
                                font-size:1.3em;
                            }
                        }
                    }
                    .item {
                        min-height:360px;
                        &:not(:last-child) {
                            margin-bottom:50px;
                        }
                    }
                }
            }
        }
    }
    
}

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

    #development {
        .wrap {
            padding:30px 0;
            overflow:clip;
            &:first-child {
                padding:0;
            }
            &.development1 {
                background:url(../img/development/bg01.jpg) no-repeat center top/cover;
            }
            &.development2 {
                background:url(../img/development/bg02.jpg) no-repeat center top/contain;
            }
            &.development3 {
                background:url(../img/development/bg03.jpg) no-repeat center top 20%/contain;
                .contents_inner {
                    .imgbox {
                        .img {
                            &:last-child {
                                margin-top:20px;
                            }
                        }
                    }
                }
            }
            &.development4 {
                background:url(../img/development/bg04.jpg) no-repeat center top/contain;
                padding-bottom:60px;
                h3 {
                    margin-bottom:1em;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    .imgbox {
                        max-width:400px;
                        margin:0 auto;
                        .detail {
                            padding:15px;
                            h4 {
                                font-size:2.0rem;
                            }
                        }
                    }
                }
            }
            .contents {
                h3 {
                    font-size:2.0rem;
                    .en {
                        font-size:3.0rem;
                    }
                }
                .contents_inner {
                    .detail {
                        padding:20px 0;
                        h4 {
                            font-size:2rem;
                        }
                    }
                    .item {
                        grid-template-columns:1fr;
                        min-height:0;
                        &:not(:last-child) {
                            margin-bottom:0;
                            padding-bottom:20px;
                        }
                        &::before {
                            right:auto;
                            left:50%;
                            transform:translateX(-50%);
                            background-color:rgba(255,255,255,.66);
                        }
                        .img {
                            position:relative;
                            z-index:1;
                            height:100%;
                            img {
                                position:relative;
                                height:100%;
                                width:100%;
                                max-width:100%;
                            }
                            &::before {
                                content:none;
                            }
                        }
                        &:nth-child(even) {
                            &::before {
                                right:auto;
                                left:50%;
                                transform:translateX(-50%);
                            }
                            .detail {
                                order:unset;
                            }
                            .img {
                                img {
                                    right:auto;
                                    left:50%;
                                    transform:translateX(-50%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #linkbox {
        .wrap {
            padding-top:0;
        }
    }
    
}