@charset "utf-8";

#about {
    .wrap {
        .contents {
            max-width: 850px;
            position: relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                bottom:-500px;
                right:-800px;
            }
            .angel_01{
                position: absolute;
                bottom:0;
                left:-70px;
                width: 100px;
            }
            p {
                font-size:1.8rem;
            }
            .company{
                text-align: center;
                margin-top: 2em;
            }
            .sign{
                font-size: 1.5em;
                text-align: center;
                font-weight:500;
            }
        }
    }
}
#overview1{
    .wrap {
        .contents {
            position: relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                top:30%;
                left:-800px;
            }
            &::after {
                content:'';
                display:block;
                width:calc(100% + 60px);
                height:100%;
                background-color: transparent;
                background-image: radial-gradient(circle, #e6f2dd 2.5px, transparent 2.5px), radial-gradient(circle, #e6f2dd 2.5px, transparent 2.5px);
                background-position: 0 0, 5.5px 11px;
                background-size: 11px 22px;
                position:absolute;
                z-index:-1;
                left:-30px;
                top:-30px;
                border-radius:90px;
            }
            .angel_01{
                position: absolute;
                width: 112px;
                left:-130px;
                bottom:-130px;
            }
            h2{
                display: block;
                color: #7abb3f;
                text-align: center;
                margin-bottom: 1em;
            }
            .contents_inner{
                background-color: #fff;
                padding:80px;
                border-radius: 60px;
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                dl{
                    display: grid;
                    grid-template-columns: 10em 1fr;
                    align-items:center;
                    grid-column-gap: 2em;
                    border-bottom: #7abb3f dotted 5px;
                    dt{
                        padding: 1.5em 0;
                        line-height: 2;
                    }
                    dd{
                        padding: 1.5em 0;
                        line-height: 2;
                    }
                }
            }
        }
    }
}
#access{
    .wrap{    
        padding-top: 90px;  
        padding-bottom:120px;
        .contents{
            max-width: 800px;  
            position: relative;
            .angel_01{
                position: absolute;
                bottom:0;
                right: -145px;
                width: 135px;
            }
            .map{
                iframe{
                    width: 100%;
                    height: 530px;
                    display:block;
                    border-radius:20px;
                }
            }
        }
    }
}

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

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

    #about {
        .wrap {
            .contents {
                .angel_01{
                    left:0;
                }
                p {
                    font-size:1.6rem;
                }
            }
        }
    }
    #overview1{
        .wrap {
            .contents {
                .angel_01{
                    width: 100px;
                    left:-0;
                    bottom:-100px;
                }
                .contents_inner{
                    padding:50px;
                    border-radius: 40px;
                }
            }
        }
    }
    #access{
        .wrap{ 
            .contents{
                .angel_01{
                    bottom:-30px;
                    right: 0;
                    width: 100px;
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #about {
        .wrap {
            .contents {
                &::before {
                    width:600px;
                    height:600px;
                    bottom:-200px;
                    right:-400px;
                }
                .angel_01{
                    bottom:0;
                    left:-20px;
                    width: 60px;
                }
                p {
                    font-size:1.5rem;
                }
                .company{
                    margin-top: 1.5em;
                    font-size:1.4rem;
                }
                .sign{
                    font-size: 1.2em;
                    text-align: center;
                    font-weight:500;
                }
            }
        }
    }
    #overview1{
        .wrap {
            .contents {
                &::before {
                    width:600px;
                    height:600px;
                    left:-400px;
                }
                &::after {
                    width:calc(100% + 40px);
                    left:-20px;
                    top:-20px;
                    border-radius:30px;
                }
                .angel_01{
                    width: 60px;
                    left:-10px;
                    bottom:-30px;
                }
                .contents_inner{
                    padding:30px 20px;
                    border-radius: 30px;
                    &:not(:last-child) {
                        margin-bottom:30px;
                    }
                    h2 {
                        line-height:1.5;
                    }
                    dl{
                        grid-template-columns: 1fr;
                        border-bottom: #7abb3f dotted 3px;
                        dt{
                            padding: 1em 0 0;
                            line-height: 1.5;
                            font-size:1.5rem;
                            font-weight:600;
                        }
                        dd{
                            padding: .5em 0 1em;
                            line-height: 1.5;
                            font-size:1.5rem;
                        }
                    }
                }
            }
        }
    }
    #access{
        .wrap{    
            padding-top: 30px;  
            padding-bottom:60px;
            .contents{
                .angel_01{
                    right: 0;
                    width: 60px;
                }
                .map{
                    iframe{
                        width: 100%;
                        height:auto;
                        aspect-ratio:1.2;
                    }
                }
            }
        }
    }
    
}