@charset "utf-8";

#numbers {
    .wrap {
        .contents {
            display: grid;
            grid-row-gap: 40px;
            .contents_inner {
                padding:40px 50px;
                h3 {
                    font-size:2rem;
                    background-color:var(--color_main);
                    color:#FFFFFF;
                    height:2.4em;
                    display:grid;
                    align-items:center;
                    justify-content:center;
                }
                li {
                    background-color:#FFFFFF;
                }
                .detail {
                    padding:20px 0 30px;
                    img {
                        display:block;
                        width:75%;
                        margin:0 auto 20px;
                    }
                    p {
                        font-size:min(2.2vw,2.4rem);
                        line-height:1;
                        display:flex;
                        flex-wrap:wrap;
                        align-items:flex-end;
                        justify-content:center;
                        row-gap:.33em;
                        font-weight:500;
                        .number {
                            font-size:2em;
                            color:var(--color_main);
                            transform:translateY(.1em);
                            font-weight: 700;
                            span {
                                font-size:.7em;
                            }
                        }
                        .note {
                            font-size: .6em;
                            width:100%;
                            text-align:center;
                        }
                    }
                }
                &.contents_inner1 {
                    background-color:rgba(217,229,239,.7);
                    display:grid;
                    grid-template-columns:repeat(4,1fr);
                    grid-gap:30px;
                    li {
                        &:nth-child(2) {
                            .note {
                                transform:translateX(4em);
                            }
                        }
                    }
                }
                &.contents_inner2 {
                    background-color:rgba(201,236,229,.7);
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    grid-column-gap:30px;
                    h3 {
                        background-color:#029297;
                    }
                    li {
                        background-color:#FFFFFF;
                    }
                    .contents_item1 {
                        ul {
                            background-color:#FFFFFF;
                            display:grid;
                            grid-template-columns:15% repeat(3,auto);
                            align-items:center;
                            justify-content:center;
                            grid-column-gap:10%;
                            padding:20px 30px;
                            li {
                                &:not(:first-child) {
                                    display:grid;
                                    grid-row-gap:.33em;
                                    justify-items:center;
                                    font-size:1.6rem;
                                    font-weight:500;
                                    img {
                                        width:2.6em;
                                    }
                                    .number {
                                        font-size:3em;
                                        color:#029297;
                                        font-weight: 700;
                                    }
                                }
                            }
                        }
                        & > img {
                            display:block;
                        }
                    }
                    .contents_item2 {
                        display:flex;
                        flex-wrap:wrap;
                        gap:30px;
                        li {
                            &:first-child {
                                width:100%;
                                .detail {
                                    display:grid;
                                    grid-template-columns:33% auto;
                                    align-items:center;
                                    grid-column-gap:10%;
                                    justify-content:center;
                                    padding:20px 0;
                                    img {
                                        margin-bottom:0;
                                    }
                                }
                            }
                            &:not(:first-child) {
                                width:calc(50% - 15px);
                                .detail {
                                    position:relative;
                                    padding:20px 0;
                                    & > .note {
                                        font-size:1.2rem;
                                        position:absolute;
                                        top:.5em;
                                        right:1em;
                                    }
                                    img {
                                        margin-bottom:0;
                                    }
                                }
                                p {
                                    display:grid;
                                    text-align:right;
                                    grid-row-gap:.2em;
                                }
                            }
                            &:nth-child(2) {
                                overflow:hidden;
                                img {
                                    width:20%;
                                    position:absolute;
                                    bottom:0;
                                    left:0;
                                    transform:translate(-20%,36%);
                                }
                            }
                            &:last-child {
                                .detail {
                                    display:grid;
                                    grid-template-columns:20% auto;
                                    grid-column-gap:5%;
                                    align-items:center;
                                    justify-content:center;
                                }
                            }
                            p {
                                font-size:min(1.8vw,2.0rem);
                                .number {
                                    color:#029297;
                                    font-size:2.4em;
                                    span {
                                        font-size:.6em;
                                    }
                                }
                            }
                        }
                    }
                }
                &.contents_inner3 {
                    background-color:rgba(202,231,246,.7);
                    display:flex;
                    flex-wrap:wrap;
                    gap:30px;
                    li {
                        width:calc((100% - 90px)/4);
                        &:nth-last-child(-n+3) {
                            width:calc((100% - 60px)/3);
                            .detail {
                                display:grid;
                                grid-template-columns:repeat(2,1fr);
                                align-items:center;
                                padding-bottom:20px;
                                img {
                                    transform:translateX(15%) scale(1.2);
                                    margin-bottom:0;
                                }
                                p {
                                    transform:translateX(-10%);
                                    &:has(.note) {
                                        display:grid;
                                        justify-items:center;
                                        grid-row-gap:.33em;
                                    }
                                }
                            }
                        }
                    }
                    h3 {
                        background-color:#0087D8;
                    }
                    .detail {
                        p {
                            .number {
                                color:#0087D8;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (hover:hover) {
}

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

@media screen and (max-width:1024px){
    
    #numbers {
        .wrap {
            .contents {
                grid-row-gap: 30px;
                .contents_inner {
                    padding:30px;
                    h3 {
                        font-size:1.9vw;
                    }
                    .detail {
                        padding:20px 0;
                    }
                    &.contents_inner1 {
                        grid-gap:20px;
                    }
                    &.contents_inner2 {
                        grid-column-gap:20px;
                        .contents_item2 {
                            gap:20px;
                        }
                    }
                    &.contents_inner3 {
                        gap:20px;
                        li {
                            width:calc((100% - 60px)/4);
                            &:nth-last-child(-n+3) {
                                width:calc((100% - 40px)/3);
                            }
                        }
                    }
                }
            }
        }
    }

}

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

    #numbers {
        .wrap {
            .contents {
                grid-row-gap: 20px;
                .contents_inner {
                    padding:6vw 4vw;
                    h3 {
                        font-size:4vw;
                    }
                    .detail {
                        padding:5vw 0;
                        img {
                            display:block;
                            width:75%;
                            margin:0 auto 4vw;
                        }
                        p {
                            font-size:4vw;
                            .note {
                                font-size: .7em;
                            }
                        }
                    }
                    &.contents_inner1 {
                        grid-template-columns:repeat(2,1fr);
                        grid-gap:4vw 5%;
                        li {
                            &:nth-child(2) {
                                .note {
                                    transform:translateX(3.5em);
                                }
                            }
                        }
                    }
                    &.contents_inner2 {
                        grid-template-columns:1fr;
                        grid-row-gap:4vw;
                        .contents_item1 {
                            ul {
                                grid-template-columns:20% repeat(3,auto);
                                padding:4vw;
                                grid-column-gap:8%;
                                li {
                                    &:not(:first-child) {
                                        font-size:4vw;
                                        img {
                                            width:2.6em;
                                        }
                                    }
                                }
                            }
                        }
                        .contents_item2 {
                            gap:4vw 5%;
                            li {
                                &:first-child {
                                    width:100%;
                                    .detail {
                                        padding:6vw 0;
                                        img {
                                            margin-bottom:0;
                                        }
                                    }
                                }
                                &:not(:first-child) {
                                    width:47.5%;
                                    .detail {
                                        padding:6vw 0;
                                        & > .note {
                                            font-size:2.4vw;
                                        }
                                    }
                                }
                                p {
                                    font-size:3.2vw;
                                }
                            }
                        }
                    }
                    &.contents_inner3 {
                        gap:4vw 5%;
                        li {
                            width:47.5%;
                            &:nth-last-child(-n+3) {
                                width:100%;
                                .detail {
                                    padding-bottom:6vw;
                                    p {
                                        font-size:4.5vw;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}