@charset "utf-8";

#aicamera {
    .wrap {
        padding-top:60px;
        padding-bottom:90px;
        .contents {
            border:3px solid var(--color_main);
            border-radius:20px;
            padding:30px;
            h2 {                
                font-size:2.4rem;
                font-weight:500;
                justify-items:center;
                grid-template-columns:1fr;
                line-height:1;
                grid-row-gap:.33em;
                margin-bottom:.66em;
                &::before {
                    content:none;
                }
                .sub {
                    font-size:3rem;
                    font-family: "M PLUS 1p", sans-serif;
                    font-weight:600;
                    span {
                        font-size:1.33em;
                    }
                }
                .tit {
                    color:var(--color_sub);
                    font-size:1.5em;
                    font-weight:600;
                    span {
                        font-size :1.2em;
                    }
                }
            }
            p {
                font-size:2.4rem;
                text-align:center;
                font-weight:600;
                line-height:1.66;
            }
        }
    }
}

#about {
    .wrap {
        padding-bottom:90px;
        .contents {
            display:grid;
            justify-items:center;
            & > ul {
                &:first-child {
                    font-size:2.4rem;
                    display:grid;
                    grid-row-gap:.5em;
                    margin-bottom:90px;
                    li {
                        font-weight:600;
                        display:grid;
                        grid-template-columns:1.5em 1fr;
                        line-height:1.5;
                        align-items:center;
                        grid-column-gap:.5em;
                    }
                }
            }
            .contents_inner {
                background-color:#FAFAFA;
                border-radius:20px;
                overflow:hidden;
                display:grid;
                grid-template-columns:40% 1fr;
                align-items:center;
                box-shadow:0 3px 6px rgba(0,0,0,.15);
                margin-bottom:40px;
                width:100%;
                .img {
                    height: 100%;
                    background: url(../img/service/aicamera/img01.jpg) no-repeat center center/cover;
                }
                img {
                    height:100%;
                    object-fit:cover;
                    max-height: 400px;
                }
                p {
                    font-size:1.8rem;
                    padding:3em;
                }
            }
            .contents_inner2 {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:2%;
                margin-bottom:25px;
                width:100%;
                & > dl {
                    background-color:var(--color_sub);
                    border-radius:20px;
                    padding:10px;
                    display:grid;
                    grid-template-rows:auto 1fr;
                    grid-row-gap:10px;
                    & > dt {
                        font-size:2.4rem;
                        color:#FFFFFF;
                        font-weight:600;
                        text-align:center;
                        padding:.25em;
                    }
                    & > dd {
                        background-color:#FFFFFF;
                        border-radius:20px;
                        padding:40px 20px;
                        ul {
                            display:grid;
                            grid-row-gap:30px;
                            li {
                                font-size:3.0rem;
                                display:grid;
                                grid-template-columns:1.2em 1fr;
                                & > span {
                                    font-size:3.0rem;
                                    color:#ff6600;
                                    font-weight:600;
                                    transform:translateY(-.33em);
                                }
                                dl {
                                    font-size:1.5rem;
                                    display:grid;
                                    grid-row-gap:.66em;
                                    dt {
                                        font-size:2.0rem;
                                        color:var(--color_sub);
                                        font-weight:600;
                                    }
                                    dd {
                                        line-height:1.5;
                                    }
                                }
                            }
                            &.scene {
                                li {
                                    dl {
                                        grid-row-gap:.33em;
                                        dt {
                                            font-size:1.5rem;
                                            color:#000000;
                                            font-weight:500;
                                            line-height:1.5;
                                        }
                                        dd {
                                            display:grid;
                                            grid-template-columns:1em 1fr;
                                            grid-column-gap:.33em;
                                            font-weight:600;
                                            font-size:1.2em;
                                            &::before {
                                                content:'→';
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .contents_inner3 {
                background-color:var(--color_sub);
                width:100%;
                border-radius:20px;
                padding:10px;
                display:grid;
                grid-template-columns:auto 1fr;
                align-items:center;
                margin-bottom:60px;
                dt {
                    font-size:2.4rem;
                    color:#FFFFFF;
                    font-weight:600;
                    text-align:center;
                    padding:.25em;
                    width:10em;
                }
                dd {
                    background-color:#FFFFFF;
                    border-radius:20px;
                    padding:15px;
                    ul {
                        display:grid;
                        grid-template-columns:repeat(4,1fr);
                        grid-column-gap:1.5%;
                        li {
                            img {
                                display:block;
                                border-radius:6px;
                            }
                            p {
                                font-size:min(1.2vw,1.4rem);
                                line-height:1.3;
                                text-align:center;
                                padding-top:.5em;
                            }
                        }
                    }
                }
            }
        }
    }
}
.contact_btns {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-column-gap:10px;
    font-size:2.0rem;
    max-width:500px;
    margin:0 auto;
    li {
        a {
            display:grid;
            grid-template-columns:1em auto;
            align-items:center;
            justify-content:center;
            grid-column-gap:.5em;
            height:3em;
            color:#FFFFFF;
            border-radius:1.5em;
            span {
                font-family: "M PLUS 1p", sans-serif;
            }
        }
        &.contact {
            a {
                background: #41C3AF;
                background: linear-gradient(90deg, rgba(65, 195, 175, 1) 0%, rgba(2, 162, 132, 1) 100%);
            }
        }
        &.request {
            a {
                background: #FF9900;
                background: linear-gradient(90deg,rgba(255, 153, 0, 1) 0%, rgba(255, 118, 0, 1) 100%);
            }
        }
    }
}

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

}

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

    #aicamera {
        .wrap {
            padding-bottom:60px;
            .contents {
                p {
                    font-size:2.0rem;
                    text-align:center;
                    font-weight:600;
                    line-height:1.66;
                }
            }
        }
    }
    
    #about {
        .wrap {
            padding-bottom:90px;
            .contents {
                display:grid;
                justify-items:center;
                & > ul {
                    &:first-child {
                        font-size:2.0rem;
                        margin-bottom:60px;
                    }
                }
                .contents_inner {
                    margin-bottom:30px;
                    p {
                        font-size:1.6rem;
                        line-height:1.7;
                    }
                }
                .contents_inner2 {
                    & > dl {
                        & > dd {
                            padding:30px 20px;
                            ul {
                                grid-row-gap:20px;
                                li {
                                    font-size:2.6rem;
                                    & > span {
                                        font-size:2.6rem;
                                    }
                                    dl {
                                        font-size:1.4rem;
                                        dt {
                                            font-size:1.8rem;
                                        }
                                    }
                                }
                                &.scene {
                                    li {
                                        dl {
                                            dt {
                                                font-size:1.4rem;
                                            }
                                            dd {
                                                font-size:1.1em;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .contents_inner3 {
                    grid-template-columns:1fr;
                    grid-row-gap:10px;
                    dt {
                        width:auto;
                    }
                    dd {
                        background-color:#FFFFFF;
                        border-radius:20px;
                        padding:15px;
                        ul {
                            li {
                                p {
                                    font-size:1.3rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #aicamera {
        .wrap {
            padding-top:20px;
            padding-bottom:45px;
            .contents {
                border:3px solid var(--color_main);
                border-radius:20px;
                padding:20px;
                h2 {                
                    font-size:min(4.5vw,2.0rem);
                    .sub {
                        font-size:1.8rem;
                        margin-bottom:.33em;
                    }
                    .tit {
                        font-size:1.2em;
                        margin:0 -1em;
                        span {
                            font-size :1.1em;
                        }
                    }
                }
                p {
                    font-size:min(4.2vw,1.6rem);
                    line-height:1.4;
                }
            }
        }
    }

    #about {
        .wrap {
            padding-bottom:45px;
            .contents {
                & > ul {
                    &:first-child {
                        font-size:1.6rem;
                        margin-bottom:45px;
                    }
                }
                .contents_inner {
                    border-radius:15px;
                    grid-template-columns:1fr;
                    margin-bottom:20px;
                    .img {
                        height:150px;
                        width:100%;
                    }
                    img {
                        height:150px;
                        width:100%;
                    }
                    p {
                        font-size:1.5rem;
                        padding:1em;
                    }
                }
                .contents_inner2 {
                    grid-template-columns:1fr;
                    margin-bottom:20px;
                    grid-row-gap:20px;
                    & > dl {
                        border-radius:15px;
                        grid-row-gap:6px;
                        & > dt {
                            font-size:1.8rem;
                        }
                        & > dd {
                            border-radius:15px;
                            padding:25px 15px 20px;
                            ul {
                                li {
                                    font-size:2.0rem;
                                    & > span {
                                        font-size:2.0rem;
                                        transform:translateY(-.1em);
                                    }
                                    dl {
                                        font-size:1.4rem;
                                    }
                                }
                                &.scene {
                                    li {
                                        dl {
                                            dt {
                                                font-size:1.4rem;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .contents_inner3 {
                    border-radius:15px;
                    margin-bottom:30px;
                    dt {
                        font-size:1.8rem;
                    }
                    dd {
                        border-radius:15px;
                        padding:10px;
                        ul {
                            display:grid;
                            grid-template-columns:repeat(2,1fr);
                                    grid-gap:10px;
                            li {
                                img {
                                    display:block;
                                    border-radius:6px;
                                }
                                p {
                                    font-size:min(3vw,1.4rem);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .contact_btns {
        font-size:1.6rem;
    }
    
}