@charset "utf-8";

/* ==================================================================

    pricelist.css

=================================================================== */

.contents main > section .more {
    margin-top: 40px;
    margin-bottom: 0;
}

.contents main > section .nStyle.more a {
    width: 358px;
    max-width: 100%;
}

* + .buttonStyle.single {
    margin-top: 80px;

    @media only screen and
    (max-width : 767px) {
        margin-top: 11vw;
    }
}

/* --------------------------------
intro
-------------------------------- */ 
#intro{
    .leadText{
        margin-bottom: 40px;
    }
}

/* --------------------------------
leadBox
-------------------------------- */ 
.leadBox {
    .explain{
        section{
        }

        section,
        .leadText{
            & + section{
                margin-top: 40px;
            }
        }

        .image{
            margin-bottom: 6vw;
        }
    }
}

/* --------------------------------
frame
-------------------------------- */ 
.frame{
    gap: 40px;

    .col{
        flex-basis: calc(50% - 20px);

        &.col1{
            .pseudoTable{
                
                & + .text{
                    margin-top: 1.5em;
                }
            }
        }

        &.col2{
            @media only screen and
            (max-width : 767px) {
                display: none;
            }
        }
    }
}

/* --------------------------------
price
-------------------------------- */ 
    
#price{
    .leadText{
        margin-bottom: 80px;
    }
    .course_price{
        & + .course_price{
            margin-top: 80px;
        }

        .tabInterface{
            margin-top: 40px;
        }
    }

    .priceView{
        margin-top: 80px;
        width: 80%;
        margin-inline: auto;

        @media only screen and
        (max-width : 767px) {
            margin-top: 6vw;
            width: 100%;
        }
        
        dt{
            font-size: 2.0rem;
        }
        dd{
            em{
                font-size: 2.3rem;
            }
        }
    }

    .buttonStyle{
        margin-top: 80px;
        @media only screen and
        (max-width : 767px) {
            margin-top: 8vw;
        }
    }
}


/* --------------------------------
course
-------------------------------- */ 
#course{

    .courseBox{
        & + .courseBox,
        & + .course_price{
            margin-top: 120px;

            @media only screen and
            (max-width : 767px) {
                margin-top: 10vw;
            }
        }

        .leadBox{
            .explain{
                .text{
                    + section{
                        margin-top: 40px;
                    }
                }

                .pseudoTable{
                    & + *{
                        margin-top: 1.5em;
                    }
                }

                .image{
                    @media only screen and
                    (max-width : 767px) {
                        width: 100%;
                        margin-top: 6vw;
                        margin-bottom: 6vw;
                    }

                    img{
                        @media only screen and
                        (max-width : 767px) {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .course_price{
        & + .courseBox,
        & + .course_price{
            margin-top: 120px;

            @media only screen and
            (max-width : 767px) {
                margin-top: 14vw;
            }
        }
    }

    .serviceBox{
        margin-top: 120px;

        @media only screen and
        (max-width : 767px) {
            margin-top: 14vw;
        }  

        .details{
            margin-top: 120px;

            @media only screen and
            (max-width : 767px) {
                margin-top: 14vw;
            }

            .title.n_lv4{
                font-size: 2.8rem;

                @media only screen and
                (max-width : 767px) {
                    font-size: 2.0rem;
                }
            }

            & + .details{
                margin-top: 80px;

                @media only screen and
                (max-width : 767px) {
                    margin-top: 10vw;
                }
            }

            .image{
                @media only screen and
                (max-width : 767px) {
                    margin-bottom: 6vw;
                }

                img{
                    width: 100%;
                }
            }

        }
    }

}

/* --------------------------------
service
-------------------------------- */ 
#service{
    .serviceList{
        margin-top: 80px;
        gap: 28px 32px;

        @media only screen and
        (max-width : 767px) {
            gap: 4vw 4vw;
            margin-top: 8vw;
        }

        > li{
            border-top: 1px solid #707070;
            padding: 28px 8px 0 8px;

            @media only screen and
            (max-width : 767px) {
                padding: 4vw 4vw 0 4vw;
            }

            dl{
                gap:32px;

                dt.number{
                    font-size: 2.8rem;
                    color: #110184;
                    font-weight: 700;
                }

                dd{
                    font-size: 1.8rem;
                }
            }

            &:nth-last-child(1),
            &:nth-last-child(2){
                padding-bottom: 28px;
                border-bottom: 1px solid #707070;
            }

            &:nth-last-child(2){
                @media only screen and
                (max-width : 767px) {
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }
        }
    }
}

/*
payment
-------------------------------- */ 
#payment{
    .text{
        @media only screen and
        (max-width : 767px) {
            margin-bottom: 8vw;
        }
    }
}


/* --------------------------------
■ul.itemList
-------------------------------- */ 

ul.itemList{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap:24px 32px;
}

ul.itemList > li{
    width: calc((100% / 3) - 32px);
}
    ul.itemList > li a{
        display: block;
        height: 100%;
        text-decoration: none;
        color: #333;
        padding: 0 10px 10px 10px;
        transition: .3s;
    }
    ul.itemList > li a:hover{
        background: #eee;
    }
    ul.itemList > li a figure .image{
        margin-left: -10px;
        margin-right: -10px;
        overflow: hidden;
        aspect-ratio: 381 / 254;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
    }
    ul.itemList > li a figure .image img{
        width: 100%;
        transition: .3s;
        object-fit: cover;
    }
    ul.itemList > li a:hover figure .image img{
        transform:scale(1.1);
    }

    ul.itemList > li a figure figcaption{
        display: flex;
        flex-direction: column;
    }
    ul.itemList > li a figure figcaption p{
        margin: 0;
    }
    ul.itemList > li a figure figcaption p.case{
        color: #110284;
    }
    ul.itemList > li a figure figcaption p.title{
        flex-grow: 1;
    }

    ul.itemList > li .tagsList > li {

        padding: 4px 11px;
        border-radius: 80px;
        line-height: 1.1;
        color: #4E4E4E;
        background: #fff;
        border:1px solid #4E4E4E;
    }
ul.itemList + .more{
    margin-top: 48px;
}


/* SP用
----------- */
@media only screen and
(max-width : 767px) {
 
ul.itemList{
    display: block;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px 2%;
}

ul.itemList > li{
    width: auto;
    border-bottom: 1px solid #eee;
}

    ul.itemList > li + li{
        margin-top: 4vw;
    }
    
    ul.itemList > li a{
        padding: 0 10px 10px 10px;
        padding-bottom: 4vw;
    }
    ul.itemList > li a:hover{
        background: #fff;
    }

    ul.itemList > li figure{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap:0 4vw;
    }

    .contents ul.itemList > li .image{
        margin: 0;
        width: 30vw;
        flex-shrink: 0;
        border: 1px solid #efefef;
    }
    ul.itemList > li figure figcaption{
        flex-grow: 1;
        box-sizing: border-box;
        padding: 0;
    }

    ul.itemList > li a figure .image img{
        max-width: 100%;
    }
   ul.itemList > li a:hover{
        background: #fff;
    }
    ul.itemList > li a:hover figure .image img{
        transform:scale(1);
    }

    ul.itemList > li figure figcaption  p.date{
        font-size: 1.1rem;
    }
    ul.itemList > li a figure figcaption p.title{
        font-size: 1.5rem;
        line-height: 1.3;
    }

ul.itemList + .more{
    margin-top: 28px;
}
}