@charset "utf-8";

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

    locationDetails.css

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


.contents main .nStyle.more a {
    width: 458px;
    max-width: 100%;

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

/* --------------------------------
cvArea
-------------------------------- */ 
.cvArea{
    padding: 42px 0;
}

/* --------------------------------
introBox
-------------------------------- */ 
.introBox{
    padding-top: 10px!important;
    padding-bottom: 0!important;
    .title{
        color: #4E4E4E;
        font-size: 2.4rem;
        font-weight: 700;
    }

    .catch{
        position: relative;
        font-size: 1.8rem;
        font-weight: 700;
        color: #fff;
        background: #110184;
        margin-bottom: 42px;
        margin-right: var(--wrap-space);
        padding: 28px 16px 28px 0px;
        border-radius: 0 16px 16px 0;
        width: 600px;

        @media only screen and
        (max-width : 767px) {
            width: auto;
            font-size: 1.5rem;
            margin-right: calc(var(--wrap-space) * 2);
            margin-bottom: 20px;
            padding: 16px 16px 16px 0px;
        }

        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: -50vw;
            width: 50vw;
            height: 100%;
            background: #110184;
        }
    }

    > .image{
        position: relative;
        margin-right: 20vw;
        transition: .5s;

        @media only screen and
        (max-width : 767px) {
            margin-right: var(--wrap-space);
        }

        @media only screen and
        (min-width : 1100px) {
            margin-right: 26vw;
        }

        @media only screen and
        (min-width : 2000px) {
            margin-right: 32vw;
        }

        > img{
            border-radius: 0 40px 40px 0;
            width:100%;
            height:auto;

            @media only screen and
            (max-width : 767px) {
                border-radius: 0 20px 20px 0;
            }
        }

        > span.kuchikomi{
            position: absolute;
            bottom: 40px;
            right: 40px;

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

            img{

                width: 180px;
                height: 180px;
                @media only screen and
                (max-width : 767px) {
                    width: 30vw;
                    height: 30vw;
                }

            }
        }
    }
}

/* --------------------------------
menuBox
-------------------------------- */ 
.menuBox{
    .frame{
        width: auto;
        padding: 20px 20px 40px 20px;
        border-width: 2px;
        dt{
            font-size: 1.8rem;
            font-weight: 700;
            color: #110184;
            letter-spacing: 0.05em;
            margin-bottom: 16px;

            @media only screen and
            (max-width : 767px) {
                font-size: 1.5rem;
                margin-bottom: 12px;
            }
        }
        dd{
            padding: 0 4%;
            .menuList{
                margin-inline: auto;
                justify-content: center;
                gap: 10px 80px;

                > li{
                    a{
                        font-size: 1.8rem;
                        font-weight: 700;
                        color: #333;

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

                        .number{
                            display: inline-block;
                            margin-right: 3px;
                            color: #110184;
                            letter-spacing: 0.05em;
                        }
                    }
                }
            }
        }
    }

}

/* --------------------------------
profileBox
-------------------------------- */ 

.profileBox{
    .class{
        font-size: 2.2rem;
        margin-bottom: 16px;
    }
    .sideImageBox{
        .image{
            img{
                border-radius: 20px;
            }
        }

        .explain{
            .status{
                margin-bottom: 8px;
                font-size: 1.5rem;
            }
            .ruby{
                margin-top: 8px;
            }

            .incharge{
                font-size: 1.3rem;
                @media only screen and
                (max-width : 767px) {
                    font-size: 1.2rem;
                }

                dt{
                    margin-bottom: 8px;
                }

                dd{
                    ul.list{
                        gap: 8px;

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

                        li{
                            padding: 3px 12px;
                            border-radius: 24px;
                            line-height: 1.1;
                            background: #E2E2E2;
                            color: #fff;
                            min-width: 4em;
                            text-align: center;

                            @media only screen and
                            (max-width : 767px) {
                                padding: 3px 8px;
                                min-width: 3em;
                            }

                            &.active{
                                background: #110284;
                            }
                        }
                    }
                }

                & + .incharge{
                    margin-top: 16px;
                }
            }

            .medalList{
                margin-top: 24px;
                li{
                    padding-left: 24px;
                    background: url(../../images/common/icon/medal.svg) no-repeat 0 0;
                    background-size: 1.2em auto;

                    & + li{
                        margin-top: 8px;
                    }
                }
            }
        }

            
        & + .text{
            margin-top: 60px;
        }
    }

    .message{
        margin-top: 60px;
    }

}


/* --------------------------------
recommend
-------------------------------- */ 

.recommendBox{
    .recommend {
        padding-bottom: 78px;
        border-bottom: 1px solid #989898;

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

        .no{
            position: relative;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 26px;
        }

        .image{
            position: relative;

            img{
                border-radius: 20px;
            }

            small{
                display: block;
                font-size: 1.00rem;
                color: #4E4E4E;
            }

            .profile{
                position: absolute;
                bottom: -2em;
                right: -1em;
                padding: 12px;
                background: #F7F6F4;
                border-radius: 12px;
                line-height: 1.4;

                em{
                    display: block;
                }

                small{
                    margin-left: 3px;
                }
            }

            &.profile{
                @media screen and
                (max-width : 767px) {
                    margin-bottom: 60px;
                }
            }
        }

        & + .recommend {
            margin-top: 78px;

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

        &:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }
    }
}


/* --------------------------------
#price
-------------------------------- */ 
#price{

    .leadtext{
        margin-bottom: 54px;
    }
    

    .section{
        & + .section{
            margin-top: 50px;
        }
    }

    dl.price{
        position: relative;
        border-radius: 11px;
        border: 2px solid #7B7777;

        > dt{
            font-size: 1.8rem;
            font-weight: 700;
            color:#fff;
            background: #7B7777;
            padding: 8px 0 6px 0;
            text-align: center;
            border-radius: 7px 7px 0 0;

            > span{
                font-size: 114%;
            }
        }

        > dd{
            padding: 12px 2px;
            color: #383838;
            text-align: center;
            p.price{
                margin: 0;
                text-align: center;
                .label{
                    font-weight: 700;
                }
                .value{
                    font-size: 4rem;
                    line-height: 1.1;

                    .unit{
                        font-size: 3rem;
                    }
                }
                .tax{
                    font-size: 1.2rem;
                }
            }

            p.onePrice{
                font-size: 1.3rem;
                text-align: center;
                margin: 0;
                color: #222;
                .value{
                    font-weight: 700;
                    font-size: 1.4rem;
                    color: #DD5434;
                    .unit{
                        font-weight: 400;
                        font-size: 1.3rem;
                        color: #222;
                    }
                }
                .tax{
                    font-size: 1.2rem;
                }
            }
        }


        &.gradation{
            border: 2px solid transparent;

            &::before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 11px;
                border: 2px solid transparent;
                background: linear-gradient(135deg,rgb(238, 52, 247) 0%,rgb(143, 51, 248) 70%,rgb(61, 64, 203) 100%) border-box border-box;
                -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
                -webkit-mask-composite: destination-out;
                mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
                mask-composite: exclude;
              }
              >dt{
                border-radius: 11px 11px 0 0;
              }
        }

        &.application{
            border-color: #DD5434;
            >dt{
                background-color: #DD5434;
            }
            >dd{
                .limited{
                    font-size: 2.0rem;
                    text-align: center;
                    margin: 0;
                }
                .value{
                    color: #DD5434;
                }

                .label{
                    position: relative;
                    font-size: 2.0rem;
                    font-weight: 700;
                    padding-right: 40px;
                    vertical-align: 0.2em;

                    &:after {
                        content: "";
                        display: block;
                        width: 12px;
                        height: 12px;
                        margin: auto;
                        border-right: 1px solid #403f40;
                        border-bottom: 1px solid #403f40;
                        position: absolute;
                        right: 18px;
                        bottom: 24%;
                        transform: rotate(-45deg);
                        transition: .5s;
                    }
                }
            }

        }

        &.poplar{
            position: relative;

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

        
        &.costperformance{
            position: relative;

            &::after{
                position: absolute;
                top: -8px;
                left: -16px;
                content: "";
                width: 72px;
                height: 72px;
                background: url("../../images/top/cospa.svg") 0 0 no-repeat;
                background-size:100% auto;

                        
                @media (max-width : 767px) {
                    width: 64px;
                    height: 64px;
                }
            }
        }
    }

    .priceBox + dl.price.application,
    .priceView + dl.price.application{
        margin-top: 30px;
        width: 800px;
        max-width: 100%;
        margin-inline: auto;
    }

    .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;
            }
        }
    }

    .note{
        margin-top: 12px;
        display: flex;
        width: fit-content;
        margin-inline: auto;

        @media (max-width : 767px) {
            font-size: 1.2rem;
        }

    }
    .arrow{
        margin-top: 34px;
        margin-bottom: 34px;
        text-align: center;
    }

    .cvArea{
        padding: 0;
    }
    
}

/* --------------------------------
#reviews
-------------------------------- */ 
#reviews{
    .reviewList{
        gap: 40px;
        padding:0 40px;

        @media only screen and
        (max-width : 767px) {
            gap: 10px;
            padding:0 4vw 20px 4vw;
            margin-right: calc(var(--wrap-space) * 2 * -1);
        }

        > li{
            border-radius: 16px;
            background: #fff;
            padding: 24px;

            .sideImage{
                .text{
                    margin-bottom: 0px;
                }
            }
        }

    }
}

/* --------------------------------
#case
-------------------------------- */ 
#case{
    .container{
        align-items: stretch;
        justify-content: space-between;
        gap:40px 0;

        > *{
            width: calc(50% - 25px);
        }
    }

    .caseBox{
        position: relative;
        border: 2px solid transparent;
        border-radius: 30px;

        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 30px;
            border: 2px solid transparent;
            background: linear-gradient(135deg,rgb(145, 52, 255) 0%,rgb(63, 64, 207) 70%,rgb(61, 64, 87) 100%) border-box border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
            -webkit-mask-composite: destination-out;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
            mask-composite: exclude;
            pointer-events: none;
        }

        &:nth-child(even){
            @media (max-width : 767px) {
                left: -8vw;
                border-radius: 0 30px 30px 0;

                &::before{
                    border-radius: 0 30px 30px 0;
                }
            }
        }
        &:nth-child(odd){
            @media (max-width : 767px) {
                right: -8vw;
                border-radius: 30px 0  0  30px;

                &::before{
                    border-radius: 30px 0  0  30px;
                }
            }
            .caseItem{
                flex-direction: row-reverse;
                padding: 26px 0 26px 26px;

                > .image{
                    >img{
                        border-radius: 20px 0 0  20px;
                    }
                }
            }
        }

        &.poplar{
            position: relative;

            &::after{
                position: absolute;
                top: -27px;
                right: -16px;
                content: "";
                width: 72px;
                height: 72px;
                background: url("../../images/top/poplar.svg") 0 0 no-repeat;
                background-size:100% auto;

                        
                @media (max-width : 767px) {
                    top: -12px;
                    right: -12px;
                    width: 52px;
                    height: 52px;
                }
            }
        }

        .title{
            color: #110184;
            font-size: 2.0rem;
            padding: 10px 40px;
            border-bottom: 2px solid #0E213E;
            border-image: linear-gradient(135deg,rgb(145, 52, 255) 0%,rgb(63, 64, 207) 70%,rgb(61, 64, 87) 100%) 1;

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

            >.en{
                display: block;
                font-size: 1.6rem;
            }
        }

        .caseItem{
            display: flex;
            justify-content:space-between;
            gap:0 25px;
            margin-top: 0;
            padding: 26px 45px 26px 0;

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

            > .image{
                flex-shrink: 0;
                width: 36%;
                margin: 0;

                @media (max-width : 767px) {
                    width: 45%;
                }

                >img{
                    width: 100%;
                    border-radius: 0 20px 20px 0;
                }
            }
            .explain{

                .link{
                    margin: 0;
                    text-align: right;
                    a{
                        color: #110184;
                        text-decoration: underline;
                        font-size: 1.5rem;

                        &:hover{
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }

}

/* --------------------------------
#flow
-------------------------------- */ 
#flow{
    .arrow{
        margin-top: 34px;
        margin-bottom: 34px;
        text-align: center;
    }

    .cvArea{
        padding: 0;
    }
}

/* --------------------------------
#message
-------------------------------- */ 
#message{
    .container{
        position: relative;

        > .title{
            position: absolute;
            top: 0;
            left: 0;

            @media (max-width : 767px) {
                position: static;
            }
        }
    }
    .messageWrap{
        gap:40px;
        align-items: stretch;

        @media (max-width : 767px) {
            margin-top: 40px;
        }

        .explain{
            padding-top: 120px;

            @media (max-width : 767px) {
                padding-top: 20px;
            }
        }
        >figure{
            position: relative;
            flex-shrink: 0;
            width: 404px;

            @media (max-width : 767px) {
                width: 78vw!important;
                margin-left: -7vw;
            }

            p.image{
                position: relative;
                margin: 0;
                &::before{
                    position: absolute;
                    top: -15px;
                    right: -50px;
                    content: "";
                    background: url("../../images/top/logo.svg") 0 0 no-repeat;
                    background-size: 100% auto;
                    width: 200px;
                    height: 40px;
                    @media (max-width : 767px) {
                        width: 43.72vw;
                        height: 40px;
                        right: -17vw;
                    }
                }
            }

            figcaption{
                position: absolute;
                right: 0;
                bottom: 0;
                background: #fff;
                border-radius: 20px 0 0 0;
                padding: 17px 20px;

                @media (max-width : 767px) {
                    right: -17vw;
                }
                .class{
                    display: block;
                    font-size: 1.3rem;
                }
                .name{
                    display: inline-block;
                    font-size: 1.8rem;
                }
                .en{
                    display: inline-block;
                    margin-left: 10px;
                    font-size: 1.1rem;;
                }

                /*
                &::before{
                    position: absolute;
                    top: 45px;
                    left: -72px;
                    content: "";
                    background: url(../../images/top/logo.svg) 0 0 no-repeat;
                    background-size: 100% auto;
                    width: 83px;
                    height: 20px;
                }
                */
            }
        }
    }

}

/* --------------------------------
#outline
-------------------------------- */ 
#outline{
    .title.left_wrapper{
        
        & + *{
            margin-top: 48px;
        }
    }

    .information{
        .explain{
            >section{
                margin-top: 0;

                .phone{
                    color: #333!important;
                    text-decoration: underline;
                    font-size: 1.9rem;
                }

                & + section{
                    margin-top: 40px;
                }
            }
        }
        
        .map iframe{
            width: 100%;
            height: 600px;

            @media (max-width : 767px) {
                height: 400px;
            }
        }
    }

    .access{
        margin-top: 80px;

        .accessList{
            gap: 40px;

            @media screen and
            (max-width : 767px) {
                gap: 20px;
            }

            > li{
                background: #F7F6F4;
                border-radius: 16px;
                padding: 24px;

                @media screen and
                (max-width : 767px) {
                    padding: 16px;
                }

                figure{
                    figcaption{
                        display: flex;
                        gap: 0 8px;
                        p{
                            margin: 0;
                            font-size: 1.4rem;

                            &.no{
                                color: #110184;
                            }
                        }
                    }
                }
            }
        }
    }

    .complement{
        margin-top: 80px;
    }
    
}
/* --------------------------------
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;
                }
            }
        }
    }
}