@charset "utf-8";

#agv_amr {
    .wrap {
        padding-top:60px;
        .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-family: "M PLUS 1p", sans-serif;
                    margin-bottom:.5em;
                }
                .tit {
                    color:var(--color_sub);
                    font-size:2em;
                    font-weight:600;
                    span {
                        font-size :1.33em;
                    }
                }
                .txt {
                    color:var(--color_sub);
                    font-size:.8em;
                    letter-spacing:.05em;
                }
            }
            p {
                font-size:2.4rem;
                text-align:center;
                font-weight:600;
                line-height:1.66;
            }
        }
    }
}

#suggestion {
    .wrap {
        .contents {
            & > p {
                margin-bottom:2em;
            }
            & > img {
                width:100%;
                max-width:1000px;
                display:block;
                margin:0 auto 60px;
            }
            .contents_inner {
                background-color:#F5F5F5;
                border-radius:20px;
                padding:20px;
                box-shadow:0 3px 6px rgba(0,0,0,.15);
                display:grid;
                grid-template-columns:auto 1fr;
                align-items:center;
                h3 {
                    font-size:2.4rem;
                    width:8em;
                    text-align:center;
                    padding-right:20px;
                }
                ul {
                    display:grid;
                    grid-template-columns:repeat(3,1fr);
                    grid-gap:30px 20px;
                    li {
                        background-color:#FFFFFF;
                        border-radius:10px;
                        box-shadow:0 3px 6px rgba(0,0,0,.15);
                        padding:10px 10px 15px;
                        position:relative;
                        .num {
                            font-size:2.4rem;
                            font-weight:600;
                            background-color:var(--color_main);
                            color:#FFFFFF;
                            width:2em;
                            height:2em;
                            display:grid;
                            align-items:center;
                            justify-content:center;
                            border-radius:1em .1em; 
                            position:absolute;
                            z-index:1;
                            top:-.25em;
                            left:-.25em;
                        }
                        img {
                            display:block;
                            border-radius:6px;
                        }
                        h4 {
                            font-size:1.8rem;
                            line-height:1.5;
                            padding:1em  0 .5em;
                        }
                        p {
                            font-size:1.4rem;
                            line-height:1.5;
                        }
                        &:not(:last-child) {
                            &::after {
                                content:'';
                                display:block;
                                width:25px;
                                height:25px;
                                background:url(../img/common/arrow_right_green.svg) no-repeat center center/contain;
                                position:absolute;
                                right:-20px;
                                top:50%;
                                transform:translateY(-50%);
                            }
                        }
                    }
                }
            }
        }
    }
}

#agv_product_slide {
    .wrap {
        .contents {
            h2 {
                margin-bottom: 3em;
            }
            .slider_wrap {
                & > h3 {
                    font-size:2.6rem;
                    margin-bottom:1.5em;
                    line-height:1.2;
                    border-left:8px solid var(--color_sub);
                    padding-left:.5em;
                }
                &:nth-child(2) {
                    margin-bottom: 90px;
                }
            }
            .slide_tab {
                width: 100%;
                margin-bottom:50px;
                .slick-track {
                    transform: translate3d(0px, 0px, 0px)!important;
                    display:flex;
                    max-width:100%;
                }
                .slick-slide {
                    text-align:center;
                    padding:0 1px;
                    font-size:min(1.4vw,1.6rem);
                    border-right:3px solid #FFFFFF;
                    border-left:3px solid #FFFFFF;
                    border-bottom:5px solid #cccccc;
                    padding:.5em;
                    cursor:pointer;
                    flex-grow:1;
                    
                    
                    &.slick-current {
                        border-bottom:5px solid var(--color_sub);;
                    }
                }
            }
            .product_slider {
                padding:0 50px;
                .slick-slide {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    grid-column-gap:5%;
                    & > div {
                        h3 {
                            font-size:3.0rem;
                            color:var(--color_sub);
                            margin-bottom:.5em;
                        }
                        p {
                            font-weight:600;
                            line-height:1.4;
                        }
                        img {
                            display:block;
                            width: 80%;
                            margin:30px auto;
                        }
                        .txt {
                            display:grid;
                            grid-template-columns:1fr auto;
                            grid-column-gap:30px;
                            align-items:start;
                        }
                        dl {
                            display:grid;
                            grid-template-columns:repeat(2,auto);
                            justify-content:end;
                            align-items:center;
                            grid-gap:10px;
                            dt {
                                font-size:1.5rem;
                                font-family: "M PLUS 1p", sans-serif;
                                width:2.5em;
                                height:2.5em;
                                border:2px solid #000000;
                                align-items:center;
                                justify-content:center;
                                display:grid;
                                border-radius:4px;
                            }
                            dd {
                                color:var(--color_sub);
                                font-size:2rem;
                                font-weight:600;
                                letter-spacing:.1em;
                                span {
                                    font-size:1.5em;
                                }
                            }
                        }
                    }
                    & > dl {
                        display:grid;
                        align-content:start;
                        font-size:1.5rem;
                        grid-template-columns:7em 1fr;
                        dt {
                            border-bottom:4px solid var(--color_sub);
                            text-align:center;
                            padding:.5em;
                            line-height:1.5;
                            height:100%;
                            display:grid;
                            align-items:center;
                            &:nth-child(3) {
                                display:none;
                            }
                        }
                        dd {
                            border-bottom: 4px solid #EFEFEF;
                            padding:.5em 1em;
                            line-height:1.5;
                            height:100%;
                            &:nth-child(4) {
                                display:none;
                            }
                        }
                    }
                }
                .slick-arrow {
                    width:20px;
                    height:20px;
                    &::before {
                        content:none;
                    }
                    border-top:5px solid var(--color_main);
                    border-right:5px solid var(--color_main);
                    transform-origin:center center;
                    &.slick-prev {
                        transform:rotate(-135deg);
                        left:0px;
                    }
                    &.slick-next {
                        transform:rotate(45deg);
                        right:0px;
                    }
                }
            }
        }
    }
}

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

}

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

    #agv_amr {
        .wrap {
            padding-top:30px;
        }
    }
    
    #suggestion {
        .wrap {
            .contents {
                .contents_inner {
                    h3 {
                        font-size:2.0rem;
                        width:7em;
                    }
                    ul {
                        display:grid;
                        grid-template-columns:repeat(3,1fr);
                        grid-gap:30px 20px;
                        li {
                            .num {
                                font-size:2.0rem;
                            }
                            h4 {
                                font-size:1.6rem;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #agv_product_slide {
        .wrap {
            .contents {
                .slide_tab {
                    .slick-track {
                        flex-wrap:wrap;
                    }
                    .slick-slide {
                        font-size:1.8rem;
                        width:25%!important;
                    }
                }
                .product_slider {
                    .slick-slide {
                        & > dl {
                            font-size:1.4rem;
                        }
                        & > div {
                            .txt {
                                grid-template-columns:1fr;
                                grid-row-gap:20px;
                            }
                        }
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #agv_amr {
        .wrap {
            padding-top:20px;
            .contents {
                padding:20px 0;
                h2 {                
                    font-size:min(5vw,2.0rem);
                }
                p {
                    font-size:min(5vw,2.0rem);
                }
            }
        }
    }
    
    #suggestion {
        .wrap {
            .contents {
                & > p {
                    margin-bottom:1.5em;
                }
                & > img {
                    margin:0 auto 50px;
                }
                .contents_inner {
                    border-radius:15px;
                    padding:30px 10px 10px;
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    h3 {
                        padding-right:20;
                    }
                    ul {
                        grid-template-columns:1fr;
                        grid-row-gap:10px;
                        li {
                            display:grid;
                            grid-template-columns:33% 1fr;
                            grid-column-gap:5%;
                            align-items:center;
                            img {
                                display:block;
                                border-radius:6px;
                                grid-area:1/1/3/2;
                                height:100%;
                                object-fit:cover;
                            }
                            h4 {
                                line-height:1.5;
                                padding:0;
                                margin-bottom:.33em;
                            }
                            p {
                                font-size:1.3rem;
                            }
                            &:not(:last-child) {
                                &::after {
                                    width:20px;
                                    height:20px;
                                    right:auto;
                                    left:50%;
                                    top:auto;
                                    bottom:-15px;
                                    transform:translateX(-50%) rotate(90deg);
                                    z-index:1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #agv_product_slide {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                .slider_wrap {
                    & > h3 {
                        font-size:2.0rem;
                        margin-bottom:1em;
                    }
                    &:nth-child(2) {
                        margin-bottom:60px;
                    }
                }
                .slide_tab {
                    margin-bottom:30px;
                    .slick-slide {
                        font-size:min(3.5vw,1.5rem);
                        min-width:33%;
                    }
                }
                .product_slider {
                    padding:0;
                    .slick-slide {
                        grid-template-columns:1fr;
                        grid-row-gap:20px;
                        & > div {
                            h3 {
                                font-size:2.6rem;
                            }
                            dl {
                                dt {
                                    font-size:1.4rem;
                                }
                                dd {
                                    font-size:1.6rem;
                                }
                            }
                            .txt {
                                grid-template-columns:1fr auto;
                                grid-column-gap:20px;
                            }
                        }
                        & > dl {
                            font-size:1.3rem;
                            grid-template-columns:6em 1fr;
                            dt {
                                border-bottom:3px solid var(--color_sub);
                                padding:.5em 0;
                            }
                            dd {
                                border-bottom: 3px solid #EFEFEF;
                                padding:.5em;
                            }
                        }
                    }
                    .slick-arrow {
                        width:15px;
                        height:15px;
                        border-top:4px solid var(--color_main);
                        border-right:4px solid var(--color_main);
                        top:25%;
                        &.slick-prev {
                            left:-10px;
                        }
                        &.slick-next {
                            right:-10px;
                        }
                    }
                }
            }
        }
    }
    
}