@charset "utf-8";
body.front{
    --anchor-height:130px;
}
@media only screen and (max-width:999px) {
    body.front{
        --anchor-height:0px;
    }
}
.mainimageWrap{
    position:relative;
    & .mainimageTxt{
        position: absolute;
        top: 3vw;
        left: 4vw;
        z-index: 2;
        /* font-size: 3.5rem;
        color: #000;
        line-height: 2;
        letter-spacing: 0.3rem;
        text-shadow: 0px 0px 2px rgba(255, 255, 255, 1),0px 0px 5px rgba(255, 255, 255, 1); */
        /*text-shadow: 1px 0px 0px rgba(255, 255, 0, 1), -1px 0px 0px rgba(255, 255, 0, 1), 0px 1px 0px rgba(255, 255, 0, 1), 0px -1px 0px rgba(255, 255, 0, 1);*/
        /* font-weight:600;
        & span{
            display:inline-block;
            text-decoration: underline;
            text-decoration-thickness: 0.5em;
            text-decoration-color: rgba(255, 255, 0, 1);
            text-underline-offset: -0.2em;
            text-decoration-skip-ink: none;
        } */
        img{
            width: 34.01vw;
        }
    }
    & .mainimage{
        & .slick-slide{
            & img{ /* 画像下の隙間削除 */
                width: 100%;
                vertical-align: bottom;
            }
        }
    }
}
@media only screen and (max-width:999px) {
    .mainimageWrap{
        & .mainimageTxt{
            top: auto;
            /* bottom:3vw; */
            bottom: 6vw;
            left: 4vw;
            font-size: 6vw;
            line-height: 1.7;
            letter-spacing: 0.1rem;
            
            img{
                width: 50.05vw; /* width: 500px */
            }
        }
        .mainimage{
            img{
                width: 100%;
            }
        }
    }
}
@media (width < 768px) {
    .mainimageWrap {
        & .mainimageTxt {

            bottom: 10vw;
            img{
                width: 90.667vw; /* width: 360px */
            }
        }
    }
}
div{
    & h2{
        color:var(--main-color);
        font-family: var(--ff-en1);
        font-weight:300;
        font-size:4.4rem;
        text-align: center;
        letter-spacing:0.1em;
        line-height:1.4;
        padding:1em 0;
        & span{
            display:block;
            font-size:0.5em;
            color:#444;
            font-family:var(--ff-jp1);
            font-weight:500;
            letter-spacing:0.04em;
        }
    }
    &.schoolLife h2{
        color:#dddddd;
        & span{
            color:var(--main-color);
        }
    }
    &.point h2{
        color:#fff;
        & span{
            color:#fff;
        }
    }
    &.btmInfo h2{
        color:#02AA47;
    }
}
@media only screen and (max-width:999px) {
    div{
        & h2{
            font-size:2.2em;
            padding:1em 0;
            & span{
                font-size:0.5em;
            }
        }
        &.schoolLife h2{
            color:#dddddd;
            & span{
                color:var(--main-color);
            }
        }
        &.teacher h2{margin-top:20px}
        &.point h2{
            color:#fff;
            & span{
                color:#fff;
            }
        }
        &.btmInfo h2{
            color:#02AA47;
        }
    }
}
.feature{--bg-color:#EEF7FF;}
.point{--bg-color:#19679E;}
.graduate #graduate-hs{
    --bg-color:#f0f6fa;
    --point-color:#19679E;
}
.graduate #graduate-jhs{
    --bg-color:#fff8ed;
    --point-color:#8F4821;    
}
.teacher{
    --bg-color:#f8f2fa;
    --point-color:#7E1C96;
}
.access{--bg-color:#19679E;}
.btmInfo{--bg-color:#D3DCE4;}
.indexBnrBox{--bg-color:#D3DCE4;}
.feature{
    position:relative;
    &::after{
        content: "";
        display:inline-block;
        background-color:var(--bg-color);
        clip-path: polygon(100% 0, 0% 100%, 100% 100%);
        position:absolute;
        width: calc(1300px / 2);
        height: calc(1300px / 3);
        right:0;
        bottom:0;
        z-index:-1;
    }
    & [class^="contentsBox"]{
        padding:50px 0;
    }
    & h3{
        font-size:2.0rem;
        text-align:center;
        padding:1em 0;
    }
}
@media only screen and (max-width:999px) {
    .feature{
        &::after{
            width: calc(100vw / 2);
            height: calc(100vw / 2);
        }
        & [class^="contentsBox"]{
            padding:0px 15px 30px;
        }
        & .flexBox4{
            display:flex;
            flex-direction: column;
            gap:50px 0;
            & > div{
                margin:0;
                & h3{
                    font-size:1.7rem;
                }
            }
        }
    }
}
.point{
    --lattice-line-width:calc(1115px / 3);
    --lattice-line-interval:140vw;
    position:relative;
    &::before{
        content:"";
        display:inline-block;
        position:absolute;
        width:100%;
        height:calc(100% - var(--anchor-height));
        position:absolute;
        top:var(--anchor-height);
        left:0;
        background-color:var(--main-color);
        background-image: repeating-linear-gradient(35deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) var(--lattice-line-width), transparent var(--lattice-line-width), transparent var(--lattice-line-interval)), repeating-linear-gradient(-35deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) var(--lattice-line-width), transparent var(--lattice-line-width), transparent var(--lattice-line-interval));
        z-index:-1;
        background-size:calc(100vw * 2);
    }
    & [class^="contentsBox"]{
        padding:50px 0;
    }
    & h2{
        position:relative;
        &::before,
        &::after{
            --border-width:300px;
            content:"";
            height:1px;
            width:var(--border-width);
            background-color:#fff;
            display:inline-block;
            position:absolute;
            top:calc(50% - 0.5px);
        }
        &::before{
            left:calc(((100% - 10em) /2 ) - var(--border-width)); 
        }
        &::after{
            right:calc(((100% - 10em) /2 ) - var(--border-width));
        }
    }
    & .pointList{
        & > li{
            margin-bottom:50px;
            display:flex;
            gap:0 50px;
            & .photo{
                width:calc(100% /3);
            }
            & .pointtxt{
                width:calc(100% - ((100% /3)));
                color:#fff;
                & .pointLabel{
                    display:flex;
                    flex-wrap:wrap;
                    margin-bottom:20px;
                    line-height:1.4;
                    & h3{
                        font-size:2.2rem;
                    }
                    & span{
                        background-color:#fff;
                        color:var(--main-color);
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        margin-right:1em;
                        padding:0 0.7em;
                        font-size:1.1em;
                        font-family:var(--ff-en1);
                        font-weight:500;
                    }
                }
            }
        }
        
    }
}
@media only screen and (max-width:999px) {
    .point{
        --lattice-line-width:calc(100vw / 2);
        --lattice-line-interval:150vw;
        overflow:hidden;
        &::before{
            background-size:calc(100vw * 5);
        }
        & [class^="contentsBox"]{
            padding:50px 15px;
        }
        & #point-hs [class^="contentsBox"]{
            padding:10px 15px 0;
        }
        & #point-jhs [class^="contentsBox"]{
            padding:0px 15px 10px;
        }
        & .pointList{
            & > li{
                margin-bottom:50px;
                flex-direction: column;
                gap:0;
                & .photo{
                    width:100%;
                }
                & .pointtxt{
                    width:100%;
                    & .pointLabel{
                        margin-top:20px;
                        & h3{
                            font-size:1.9rem;
                        }
                    }
                }
                &.even .photo{
                    order:0;
                }
                &.even .pointtxt{
                    order:1;
                }
            }

        }
    }
}
.schoolLife{
    display:flex;
    padding:80px 0;
    & h2{
        writing-mode: vertical-rl;
        font-weight:300;
        font-family:var(--ff-en1);
        order:1;
        width:calc(100% - 82.54vw - 50px);
        display:flex;
        justify-content: center;
        flex-direction: column;
        font-size:calc(33.69vw / 8);
        padding:0;
        text-align:left;
        & span{
            font-weight:500;
            font-family: var(--ff-jp1);
            font-size:0.4em;
        }
    }
    & > div{
        width:82.54vw;
        position:relative;
        left:0;
        display:flex;
        flex-direction: column;
        & .schoolLifeGalleryWrap{
            display:block;
            overflow: hidden;
            position:relative;
            & .schoolLifeGallery-club-txt,
            & .schoolLifeGallery-event-txt{
                display:flex;
                justify-content: center;
                align-items: flex-end;
                width:100%;
                height:25%;
                position:absolute;
                z-index: 1;
                bottom:0;
                & span{
                    display:inline-block;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    background-color:rgba(255,255,255,0.8);
                    color:var(--main-color);
                    padding: 0em 1em;
                    font-size: 1.5em;
                    width: 100%;
                    margin-bottom: 5px;
                }
            }
            & .schoolLifeGallery-club,
            & .schoolLifeGallery-event{
                width:100%;
                & .slick-slide{
                    & img{ /* 画像下の隙間削除 */
                        width: 100%;
                        vertical-align: bottom;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width:999px) {
    .schoolLife{
        flex-direction: column;
        padding:0px 0 0px;
        & h2{
            writing-mode: horizontal-tb;
            width:100%;
            font-size:2.2em;
            text-align:center;
            order:0;
            padding:1em 0;
            & span{
                font-size:0.5em;
            }
        }
        & > div{
            width:100%;
            display:block;
            height:auto;
            position:static;
            & .schoolLifeGalleryWrap{
                & .schoolLifeGallery-club-txt,
                & .schoolLifeGallery-event-txt{
                    height:25%;
                    & span{
                        font-size: 1em;
                    }
                }
            }
        }
    }
}
.graduate #graduate-hs,
.graduate #graduate-jhs,
.teacher{
    & .box{
        position:relative;
        &::after{
            --side-padding:calc((100% - 1115px) / 2);
            content:"";
            display:inline-block;
            width:calc(100vw - var(--side-padding) - 4%);
            height:70%;
            position:absolute;
            background-color:var(--bg-color);
            bottom:0;
            left:0;
            z-index:-1;        
        }
        &.even::after{
            left:auto;
            right:0;
        }
        & ul{
            display:flex;
            gap:0 50px;
            & li{
                display: grid;
                grid-template-columns: 160px auto; 
                grid-template-rows: repeat(2, auto); 
                gap: 20px 30px;
                letter-spacing: 0.1em;
                width:calc((100% - 50px)/2);
                & .info{
                    width:100%;
                    display:flex;
                    flex-direction: column;
                    justify-content: center;
                    & .data{
                        
                    }
                    & .name{
                        font-size:2.2rem;
                        margin-bottom:15px;
                        & span{
                            color:var(--point-color);
                        }
                    }
                    & .message{
                        font-size:1.5rem;
                    }
                }
                & .text{
                    grid-area: 2 / 1 / 3 / 3;
                    line-height:1.8;
                    font-size:1.7rem;
                }
            }
        }
    }
    & [class^="contentsBox"]{
        padding:50px 0;
    }
}
.teacher{
    padding-bottom:80px;
}
@media only screen and (max-width:999px) {
    .graduate #graduate-hs,
    .graduate #graduate-jhs,
    .teacher{
        & .box{
            position:relative;
            &::after{
                --side-padding:5%;
                height:90%;
            }
            &.even::after{
            }
            & ul{
                flex-direction: column;
                gap:50px 0px;
                & li{
                    grid-template-columns: 130px auto; 
                    gap: 15px 20px;
                    width:100%;
                    & .info{
                        & .data{
                            font-size:1.5rem;
                        }
                        & .name{
                            font-size:2.0rem;
                            margin-bottom:10px;
                        }
                        & .message{
                            font-size:1.4rem;
                        }
                    }
                    & .text{
                        line-height:1.8;
                        font-size:1.6rem;
                    }
                }
            }
        }
        & [class^="contentsBox"]{
            padding:0px 15px 30px;
        }
    }
}

.access{
    position:relative;
    & [class^="contentsBox"]{
        padding:25px 0 90px;
    }
    & .googleMap{
        width:800px;
        border:25px solid var(--bg-color);
        margin:0 auto;
        & iframe.googlemap {
            width: 100%;
            height: 400px;
        }
    }
}
@media only screen and (max-width:999px) {
    .access{
        position:relative;
        & [class^="contentsBox"]{
            padding:30px 0 10px;
        }
        & .googleMap{
            width:100%;
            border:15px solid var(--bg-color);
            & iframe.googlemap {
                height: 300px;
            }
        }
    }
}
.btmInfo{
    background-color:var(--bg-color);
    padding:50px 0;
    & .lineBox{
        width:550px;
        padding:3em 5em;
        border-radius: 40px;
        background-color:#fff;
        margin: 0 auto;
        & dt{
            & h2{
                font-family: var(--ff-jp1);
                font-size:3.2rem;
                font-weight:500;
                padding:0;
                margin-bottom:25px;
                & > span{
                    font-size:0.7em;
                }
            } 
        }
        & dd{
            text-align: center;
            & [class^="buttonLink"]{
                --button-height:60px;
                background-color:#02AA47;
                border-radius: calc(var(--button-height) / 2);
                width:350px;
                height:var(--button-height);
                margin-top:25px;
                transition-duration: .4s;
                & a{                    
                    padding:0;
                    width:100%;
                    height:100%;
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    background-color:#02AA47;
                    &::before{
                        display:none;
                    }
                    
                }
                &:hover{transform: scale(1.1);}
            }
               
        }
    }
    & [class^="contentsBox"]{
        padding:50px 0;
    }
}
@media only screen and (max-width:999px) {
    .btmInfo{
        background-color:var(--bg-color);
        padding:30px 15px;
        & .lineBox{
            width:100%;
            padding:1.5em 1em 1em;
            & dt{
                & h2{
                    font-size:2.4rem;
                    margin-bottom:15px;
                    & > span{
                        font-size:0.7em;
                    }
                } 
            }
            & dd{
                text-align: left;
                & [class^="buttonLink"]{
                    --button-height:50px;
                    border-radius: calc(var(--button-height) / 2);
                    width:100%;
                    height:var(--button-height);
                    margin-top:15px;
                    & a{
                        padding:0;
                        width:100%;
                        height:100%;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        background-color:#02AA47;
                        &::before{
                            display:none;
                        }
                    }
                }

            }
        }
        & [class^="contentsBox"]{
            padding:50px 0;
        }
    }
}
#container .indexBnrBox{
    padding:80px 0 50px;
    /*background-color: rgba(0, 0, 0, 0.01);*/
    background-color:var(--bg-color);
    /*box-shadow: 0px 0px 40px 0px rgba(var(--main-color-light-rgb), 0.9) inset;*/
    & .infoBnr{
        display:flex;
        gap:0px;
        margin-bottom:30px;
        backgrond-color:#fff;
        & > div{
            width:calc((100% - 50px));
            & a{
                &:hover{
                    opacity: 0.8;
                }
                &[target="_blank"]::after{
                    display:none;
                }
            }  
        } 
    }
}
@media screen and ( max-width: 999px){
    #container .indexBnrBox{
        padding:50px 0 30px;
        & .infoBnr{
            display:flex;
            flex-direction: column;
            gap:1px 0;
            margin-bottom:25px;
            & > div{
                width:100%;
            } 
        }
    }
}
/* LINEボタン */
.lineBtn{
    display:flex;
    justify-content: center;
    & .whiteBorder{
        /*border: 2px solid #fff;*/
        border-radius: 50px;
        & .lineBtnInner{
            --lineBtn-height:84px; /*バナーの高さを基準としてLINEロゴの規定スペース（ロゴの2分の1スペース）をとる*/
            display: flex;
            align-items: center;
            max-width: 375px;
            padding:calc(var( --lineBtn-height) /4) calc(var( --lineBtn-height) /4) calc(var( --lineBtn-height) /4) calc((var( --lineBtn-height) /4) * 2);
            border: 2px solid #06be2b;
            border-radius: 50px;
            background: #fff;
            box-shadow: 0 0 10px 0 rgba(25, 25, 25, 0.15);
            transition: 0.3s;
            height: var(--lineBtn-height);
            & a{
                text-decoration: none;
                color: #333;
                &.lineBtnLink{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: 0.3s;
                    &:hover{
                        opacity: 0.7;
                    }
                    & .lineBtnTxt{
                        font-size: 1.35rem;
                        font-weight: 500;
                        letter-spacing: 0.08em;
                        color: #444;
                        line-height: 1.4;
                        margin-right: calc(var( --lineBtn-height) /4);
                        white-space: nowrap;
                        text-align: center;
                        & .lineTxtColor{
                            color: #149b30;
                        }
                        & .lineTxtSmall{
                            font-size: 0.9em;
                        }
                    }
                    & .lineBtnIcon{
                        width: calc((var( --lineBtn-height) /4) *2 );
                        height: calc((var( --lineBtn-height) /4) *2 );
                        & img{
                            display: block;
                            width: 100%;
                            height: 100%;
                            border: 2px solid #fff;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }
}
@media screen and ( max-width: 999px){
    .lineBtn {
        right: 5px;
/*
        right: 50%;
        transform: translate(50%);
*/
    }
    .lineBtnInner {
        gap: 0;
        height: 75px;
        padding: 0 15px 0 20px;
    }
    .lineBtnIcon{
        width: 50px;
        height: 50px;
    }
    .lineCloseBtn{
        font-size: 1.2rem;
        margin-right: 10px;
    }
}