@charset "utf-8";

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

    casestudy.css

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

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

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

/* --------------------------------
trainerListBox
-------------------------------- */ 

.contents main 
.caseListBox{

    .caseBox{
        --sideSize: 34%;
        --gapSize: 105px;
        .number{
            margin-bottom: 20px;
            font-size: 2.4rem;
            font-weight: 700;
            text-align: center;

            @media only screen and
            (max-width : 767px) {
                margin-bottom: 10px;
                font-size: 2rem;
            }
        }

        .frame{
            overflow: visible;
            padding: 0;
            border: 2px solid #110184;

            &.poplar{
                position: relative;
    
                &::after{
                    position: absolute;
                    top: -24px;
                    right: -16px;
                    content: "";
                    width: 72px;
                    height: 72px;
                    background: url("../../images/casestudy/poplar.svg") 0 0 no-repeat;
                    background-size:100% auto;
                            
                    @media (max-width : 767px) {
                        width: 64px;
                        height: 64px;
                    }
                }
            }

            > .text{
                font-size: 1.4rem;
                padding: 0px 40px 40px 40px;
                width: calc(100% - var(--sideSize) - var(--gapSize));

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

            .title{
                display: flex;
                align-items: center;
                gap: 0 20px;

                padding: 20px 40px;
                border-bottom: 2px solid #110184;
                @media (max-width : 767px) {
                    flex-direction: column;
                    gap: 1em 0;
                    padding: 20px 26px 20px 26px;
                }

                >.lead{
                    font-size: 1.4rem;
                    font-weight: 500;
                }

                > em{
                    color: #110184;
                    font-size: 2.8rem;
                    flex-grow: 1;
                    @media (max-width : 767px) {
                        font-size: 2.0rem;
                    }
                }
            }

            .itemBody{
                padding: 20px 40px;

                @media (max-width : 767px) {
                    padding: 10px 26px 10px 32px;
                }

                .image{
                    img{
                        width: 100%;
                    }

                    @media (max-width : 767px) {
                        padding-bottom: 8vw;
                        border-bottom: 1px dotted #989898;
                    }
                }

                .explain{
                    width: var(--sideSize);
                    @media (max-width : 767px) {
                        width: auto;
                    }

                    dl.list{
                        @media (max-width : 767px) {
                            padding-bottom: 3vw;
                            border-bottom: 1px solid #989898;
                        }

                        dt{
                            font-size: 2.0rem;
                            margin-bottom: 16px;
                            @media (max-width : 767px) {
                                font-size: 1.8rem;
                            }
                        }
                        dd{
                            font-size: 1.7rem;
                            @media (max-width : 767px) {
                                font-size: 1.5rem;
                            }
                        }
                    }
                }
            }
        }

        + .buttonStyle{
            margin-top: 60px;
            @media (max-width : 767px) {
                margin-top: 8vw;
            }
        }
    }

    .buttonStyle + .caseBox{
        margin-top: 80px;
        padding-top: 80px;
        border-top: 1px solid #989898;
        @media (max-width : 767px) {
            margin-top: 12vw;
            padding-top: 0;
            border-top: none;
        }
    }
}

.locationBox  {
    margin-top: 120px;
}