@charset "utf-8";

 .top-btn {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 .3rem .4rem rgba(0,0,0, .16);
}

/* ==========================================
カバー
========================================== */


.cover-frame {
    width: 100%;
    position: relative;
    border-radius: 0 8rem 0 8rem;
}

.cover-mask:before,.cover-mask:after {
    content: "";
    position: absolute;
    opacity: .8;
    z-index: 2;
}

.cover-mask:before {
    top: 0;
    right: 0;
    max-width: 66.4rem;
    width: 40%;
    height: 38rem;
    background: url(../../../../uploads/cover-deco-green.png) no-repeat;
    background-size: contain;
    background-position: top right;
}

.cover-mask:after {
    bottom: 0;
    left: 0;
    max-width: 66.3rem;
    width: 40%;
    height: 38.4rem;
    background: url(../../../../uploads/cover-deco-pink.png) no-repeat;
    background-size: contain;
    background-position: bottom left;
}


.cover-title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 84rem;
    width: 80%;
    position: absolute;
    left: 9.4rem;
    bottom: 9rem;
    z-index: 10;
}

.cover-jp-title {
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.cover-jp-title br {
    display: none;
}

.cover-en-title {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.cover-jp-sub-title-box {
    max-width: 84rem;
    width: 100%;
    margin: 2.6rem 0 0;
    padding: .2rem 1.5rem .4rem;
    text-align: center;
    border-radius: .2rem;
}

.cover-jp-sub-title-box.bg-white {
    background-color: var(--white);
}

.cover-jp-sub-title {
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ==========================================
ABOUT
========================================== */

.about {
    padding: 15rem 0 13rem;
}

.about-frame {
    max-width: 171.3rem;
    width: 95%;
}

.about-left {
    max-width: 96rem;
    width: 56.04%;
}

.about-right {
    position: relative;
    max-width: 68.4rem;
    width: 40%;
}

.top-about-illust-box {
    max-width: 12.4rem;
    width: 19%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.about-title {
    margin: 4.5rem 0 0;
}

.about-title br {
    display: none;
}

.about-title .has-inline-color {
    color: var(--primary)!important;
}

.about-text {
    margin: 4rem 0 0;
    font-weight: 700;
    line-height: 2.35em;   
}

.about-right .top-btn {
    margin: 6rem auto 0;
}


/* ==========================================
BUSINESS
========================================== */

.business {
    border-radius: 30rem 0 0 0;
    overflow: hidden;
}

.business.bg-fifth {
    background-color: var(--fifth);
}

.business-frame {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
    padding: 10rem 1.5rem 9rem;
}

.business-title-box {
    max-width: 98rem;
    width: 100%;
    margin: 9rem auto 0;
    position: relative;
    text-align: center;
}

.business-title-box:before,.business-title-box:after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 1;
    max-width: 3.6rem;
    width: 10%;
    height: 5.7rem;
    background: url(../../../../uploads/top-strong-deco.svg) no-repeat center;
	background-size: contain;
}


.business-title-box:before {
    left: 0;
    transform: scale(-1, 1);
}

.business-title-box:after {
    right: 0;
}

.business-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 7rem auto 0;
}

.business-card {
    max-width: 39rem;
    width: 32%;
    padding: 6.3rem 1.5rem 4rem;
    border-radius: 4.4rem;
    box-shadow: 0 .4rem 1rem rgba(0,0,0, .16);
    position: relative;
}

.business-card.bg-tertiary {
    background-color: var(--tertiary);
}

.business-card figure {
    max-width: 17.5rem;
    width: 100%;
    margin: 0 auto;
}

.business-title {
	font-family: var(--font-family01);
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 2rem 0 0;
}

.business-title .has-inline-color {
    color: var(--primary)!important;
}

.business-text-box {
    max-width: 32rem;
    width: 100%;
    margin: 2.4rem auto 0;
}

.business-text-box .text01 {
    font-weight: 700;
    line-height: 1.85em;  
}

.fukidashi-box {
    position: relative;
    max-width: 87.7rem;
    width: 100%;
    margin: 8.8rem auto 0;
    padding: 3.4rem 1.5rem 2.8rem;
    border-radius: 100vmax;
    text-align: center;
    box-shadow: 0 1rem 0 0 var(--sixth);
}

.fukidashi-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 23px 30px 23px;
  border-color: transparent transparent var(--secondary);
  translate: -50% -100%;
}

.fukidashi-box.bg-secondary {
    background-color: var(--secondary);
}

.fukidashi-box .jp-title02 {
    text-shadow: 0 .3rem .6rem rgba(0,0,0, .16);
}

.fukidashi-box .top-btn {
    margin: 2rem auto 0;
    font-weight: 700;
}

/* ==========================================
SCHOOL
========================================== */

.school {
    position: relative;
    padding: 12rem 0 13rem;
}

.school-frame {
    max-width: 100rem;
    width: 90%;
    height: 55%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 3rem 1.5rem 4.4rem;
    z-index: 1;
}

.school-frame.bg-quaternary {
    background-color: rgba(248,165,152, 0.9);
}

.school-block {
    max-width: 67.2rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.school-jp-title {
    max-width: 250px;
    width: 100%;
    margin: 1.1rem auto 0;
    background-color: var(--white);
    text-align: center;
}

.school-text-box {
    margin: 4.1rem 0 0;
    text-align: center;
}

.school-text-box .text01 {
    font-size: 1.8rem;
    line-height: 2.35em;
    text-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
}

.school-illust-box {
    max-width: 15.5rem;
    width: 20%;
    position: absolute;
    right: 27%;
    bottom: 16rem;
    z-index: 5;
}

.school-block .top-btn {
    margin: 5rem auto 0;
}

/* ==========================================
NEWS
========================================== */

.news {
    padding: 0 1.5rem 12rem;
}

.news-frame {
    max-width: 129rem;
    width: 100%;
    margin: 0 auto;
}

.news-illust-box {
    max-width: 17.3rem;
    width: 100%;
    margin: 7rem 0 0;
    z-index: 5;
}

.news-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.news-row .title-box {
    margin: 0 9rem 0 0;
}

.news-block {
    width: 100%;
    max-width: 90rem;
    height: 43.6rem;
    padding: 1.5rem;
    overflow-y: scroll;
    box-shadow: inset 0 0 1rem rgba(0,0,0,.25);
    background: var(--white);
    overflow-y:auto;
}

.news-block::-webkit-scrollbar {
    width: 1rem;
}

.news-block::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1rem rgba(0,0,0,.25);
    /* border-left: 1px solid #ccc; */
    background-color: #fff;
}

.news-block::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 100vmax;
}

.news-section {
    max-width: 79rem;
    width: 100%;
    margin: 0 auto;
}

.news-article {
    padding: 3.7rem 0 2rem;
    border-bottom: .3rem dashed var(--black);
}

.news-date {
    max-width: 12rem;
    width: 100%;
    border-radius: .3rem;
	font-family: var(--font-family01);
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1.2em;
    padding: .2rem;
    text-align: center;
}

.news-date.bg-primary {
    background-color: var(--primary);
}

.news-tit {
    margin: 1.5rem 0 0;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.news-section .content {
    margin: 1.5rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

    .top-about-illust-box {
        width: 15%;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

    /* ==========================================
	COVER
	========================================== */

    .cover-jp-title {
        font-size: 4rem;
    }

    .cover-en-title {
        font-size: 2.4rem;
    }

    .cover-jp-sub-title {
        font-size: 2.2rem;
    }

    /* ==========================================
	ABOUT
	========================================== */

    .about-title br {
        display: block;
    }

    /* ==========================================
	BUSINESS
	========================================== */

    .business {
        border-radius: 20rem 0 0 0;
    }

    .business-title {
        font-size: 2.2rem;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

    .top-btn {
        margin: 3rem auto 0 !important;
    }

    
	/* ==========================================
	COVER
	========================================== */

    .cover-title-box {
        width: 95%;
        left: 2rem;
        bottom: 4rem;
    }

    .cover-mask:before {
        width: 60%;
        background: url(../../../../uploads/cover-deco-green.png) no-repeat left;
        background-size: cover;
    }

    .cover-mask:after {
        width: 60%;
        background: url(../../../../uploads/cover-deco-pink.png) no-repeat right;
        background-size: cover;
    }

    .cover-jp-title {
        font-size: 4rem;
    }

    .cover-en-title {
        font-size: 2.5rem;
    }

    .cover-jp-sub-title-box {
        width: 95%;
        padding: .5rem 1rem .4rem;
    }

    .cover-jp-sub-title {
        font-size: 2.3rem;
    }

	/* ==========================================
	ABOUT
	========================================== */

    .about {
        padding: 8rem 0;
    }

    .about-frame {
        width: 100%;
        padding: 0 1.5rem;
    }

    .about-left, .about-right {
        width: 100%;
    } 

    .about-right {
        margin: 3rem 0 0;
    } 

    .about-right .title-box {
		text-align: left;
    } 

    .about-title br {
        display: none;
    }

    /* ==========================================
	BUSINESS
	========================================== */

    .business {
        border-radius: 15rem 0 0 0;
    }

    .business-frame .title-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .business-title-box {
        max-width: 50rem;
    }

    .business-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .business-card {
        max-width: 50rem;
        width: 100%;
    }

    .business-card:nth-child(n+2) {
        margin: 4rem auto 0;
    }

    /* ==========================================
    SCHOOL
    ========================================== */

    .school {
        padding: 6rem 0;
    }

    .school-text-box .text01 {
        font-size: 1.4rem;
        line-height: 2em;
    }

    .school-illust-box {
        right: 7%;
        bottom: 16rem;
    }

    
    /* ==========================================
    NEWS
    ========================================== */

    .news {
        padding: 0 1.5rem 8rem;
    }

    .news-row {
        flex-direction: column;
    }

    .news-row .title-box {
        margin: 0 auto;
    }

    .news-illust-box {
        width: 70%;
        margin: 4rem auto 0;
    }

    .news-block {
        margin: 4rem 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {


    /* ==========================================
	COVER
	========================================== */

    .cover-jp-title {
        font-size: 4rem;
    }

    .cover-jp-title br {
        display: block;
    }

    .cover-en-title {
        font-size: 1.6rem;
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    .cover-jp-sub-title {
        font-size: 1.5rem;
    }

	/* ==========================================
	ABOUT
	========================================== */

    .about-title br {
        display: block;
    }

    /* ==========================================
	BUSINESS
	========================================== */

    .business {
        border-radius: 10rem 0 0 0;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */