/* common */
section {
    padding: 50px 10px;
    overflow: hidden;
    position: relative;
}
h2 {
    text-align: center;
}
h3 {
    font-size: 3rem;
    text-align: center;
    margin-top: 10px;
}

/* bg image */
svg.svg-bg {
    position: absolute;
    z-index: -1;
    stroke: #d8577a;
    stroke-width: 0.4px;
    opacity: 0.5;
}
.sakura1 {
    width: 280px;
    top: 18%;
    right: 20px;
}
.sakura2 {
    width: 36px;
    left: 20px;
    top: 55%;
}
.sakura3 {
    width: 184px;
    top: 10%;
    left: 120px;
}
.sakura4 {
    width: 184px;
    top: 0;
    right: -40px;
}
.sakura5 {
    width: 184px;
    top: 0;
    left: 25vw;
}
.sakura6 {
    width: 153px;
    top: 0;
    right: 5vw;
}

@media only screen and (max-width: 1023px) {
    .sakura1 {
        width: 170px;
        right: 10px;
        top: 40%;
    }
    .sakura2 {
        width: 21px;
        left: 10px;
    }
    .sakura3 {
        width: 120px;
        left: 50%;
        top: 90px;
        transform: translateX(calc(-50% - 140px));
    }
    .sakura4 {
        width: 110px;
        right: 0;
        top: -20px;
    }
    .sakura5 {
        width: 110px;
        left: auto;
        right: 20px;
        top: 20px;
    }
    .sakura6 {
        width: 100px;
        right: 10px;
        top: 40px;
    }
}
@media only screen and (max-width: 833px) {
    .sakura1 {
        top: 30px;
    }
    .sakura2 {
        top: 30%;
    }

}
@media only screen and (max-width: 560px) {
    .sakura4 {
        top: auto;
        bottom: -50px;
    }
    .sakura5 {
        display: none;
    }
}


/* main-image */
.main-image-table {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    /*min-height: 710px;
    height: 100vh;*/
}
.main-image-wrapper {
    width: calc(50% + 20px);
    height: 100vh;
    max-height: 960px;
    min-height: 700px;
    position: relative;
}
.main-image-cell {
    height: 100%;
    padding-right: 100px;
}
.main-image-cell .slick-list,
.main-image-cell .slick-track,
.main-image-cell .slick-slide > div {
    height: 100%;
}
.main-image-cell.slick-slider .slick-dots {
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    margin-top: 0;
    height: 100%;
}
.main-image-cell.slick-slider .slick-dots li {
    position: relative;
    width: 45px;
    height: 45px;
}
.main-image-cell.slick-slider .slick-dots li * {
    outline: none;
}
.main-image-cell .slick-dots li > .svg-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    fill: transparent;
    stroke: #ea6099;
    stroke-dashoffset: 200;
    stroke-dasharray: 200;
    transform: rotate(-90deg);
}
.main-image-cell .slick-dots li.slick-active > button[aria-selected="true"]+.svg-circle {
    animation: circle 3.8s linear 0s forwards;
}
@keyframes circle {
    0% {
        stroke-dashoffset: 200;
    }
    100% {
        stroke-dashoffset: 40;
    }
}
.main-image-cell.slick-slider .slick-dots li::before {
    content: '';
    display: block;
    position: absolute;
    width: 60px;
    height: 1px;
    left: 0;
    top: 50%;
    background-color: #fff;
    transform-origin: left;
    transform: translateX(calc(-100% + 8px)) scale(0);
}
.main-image-cell.slick-slider .slick-dots li.slick-active::before {
    -webkit-transition: transform 0.6s linear 0.2s;
    -o-transition: transform 0.6s linear 0.2s;
    transition: transform 0.6s linear 0.2s;
    transform: translateX(calc(-100% + 8px)) scale(1);
}
.main-image-cell.slick-slider .slick-dots li button {
    width: 45px;
    height: 45px;
    font-size: 20px;
    color: #333;
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    border-radius: 50%;
    border: 1px solid transparent;
	background-color: transparent;
}
.slick-slider .slick-dots li.slick-active button,
.slick-slider .slick-dots li button:hover{
    border-color: #fff;
}
.main-image-image {
    height: 100%;
    display: none;
}
.main-image-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-text-cell {
    padding-top: 180px;
    padding-left: 5vw;
    padding-right: 5.2vw;
    width: calc(50% - 20px);
    position: relative;
}
@media only screen and (min-width: 1400px) {
    .main-text-cell {
        padding-left: 80px;
        padding-right: 5.2vw;
        width: calc(50% - 20px);
    }
}
.main-image-table .banner-wrap {
    margin-top: 30px;/*順番入れ替えに伴いマージン追加*/
}

.main-image-table .banner-wrap.any_banner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.main-image-table .banner-wrap a {
    display: block;
    width: 100%;
    /*max-width: 360px;*/
}
.main-image-table .banner-wrap.any_banner a.bnw100 {
    width: 100%;
}
.main-image-table .banner-wrap.any_banner a {
    width: calc(50% - 5px);
}
.main-image-table .banner-wrap a:hover {
    opacity: 0.8;
}

/* text banner */
.banner-wrap a.text-bnr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    color: #fff;
    text-align: center;
    border-radius: 100px;
    position: relative;
}
.banner-wrap a.text-bnr::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: solid 1px #fff;
    border-radius: 60px;
}
/* setting -- text black */
.banner-wrap a.text-bnr.bnr-tb {
    color: #333;
}
.banner-wrap a.text-bnr.bnr-tb::before {
    border-color: #333;
}
/* setting -- border-radius 10px -- not circle button */
.banner-wrap a.text-bnr.bnr-kaku,
.banner-wrap a.text-bnr.bnr-kaku::before {
    border-radius: 10px;
}

.mbnr-t {
    font-size: 24px;
    font-weight: bold;
}
.mbnr-st {
    font-size: 16px;
}
.mbnr-txt {
    font-size: 14px;
}


@media only screen and (max-width: 1023px) {
    /* text banner */
    .banner-wrap.any_banner a.text-bnr {
        
    }
    .banner-wrap.any_banner .mbnr-st {
        font-size: 12px;
    }
    .banner-wrap.any_banner .mbnr-t {
        font-size: 16px;
    }
    .banner-wrap.any_banner .mbnr-txt {
        font-size: 10px;
    }
}
@media only screen and (max-width: 833px) {
    .banner-wrap.any_banner .mbnr-t {
        font-size: 24px;
        font-weight: bold;
    }
    .banner-wrap.any_banner .mbnr-st {
        font-size: 16px;
    }
    .banner-wrap.any_banner .mbnr-txt {
        font-size: 14px;
    }
    .main-image-table .banner-wrap.any_banner a.bnw100 {
        max-width: 500px;
        margin: auto;
    }
    .main-image-table .banner-wrap.any_banner {
        justify-content: center;
    }
}
@media only screen and (max-width: 560px) {
    /* text banner */
    .banner-wrap.any_banner .mbnr-st {
        font-size: 12px;
    }
    .banner-wrap.any_banner .mbnr-t {
        font-size: 16px;
    }
    .banner-wrap.any_banner .mbnr-txt {
        font-size: 10px;
    }
    .banner-wrap.any_banner .banner-wrap a.text-bnr {
        padding: 10px;
    }
}

.main-image-table h2 {
    font-size: 4vw;
    /*margin-top: 30px;//順番入れ替えに伴いマージン削除*/
    text-align: left;
}
.main-image-table h3 {
    font-size: 2.8vw;
    margin-top: 20px;
    text-align: left;
}
@media only screen and (min-width: 1400px) {
    .main-image-table h2 {
        font-size: 56px;
    }
    .main-image-table h3 {
        font-size: 36px;
    }
}

.main-image-event-wrapper {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.main-event-box {
    width: 100%;
    max-width: 170px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.main-event-box a {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 3px 10px 3px;
    overflow: hidden;
    color: #333;
}
.main-event-box a h6 {
    width: 100%;
    position: relative;
    text-align: center;
    font-size: 18px;
    color: #d8577a;
    padding-top: 10px;
    padding-bottom: 10px;
}
.main-event-box a h6::after {
    content: '';
    position: absolute;
    width: 90%;
    height: 1px;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #d8577a;
}
.main-event-box a .date {
    margin-top: 1em;
    font-size: 14px;
}

.main-image-info-wrapper {
    position: absolute;
    left: 20px;
    top: 120px;
    z-index: 1;
    width: calc(100% - 140px);
    margin-top: 0;
}
.main-image-info-wrapper .main-info {
    padding: 15px 10px 15px 10px;
    background-color: #fff;
    border: solid 2px #d8577a;
    border-radius: 5px;
}
.main-image-info-wrapper .main-info + .main-info {
    margin-top: 10px;
}
/*.main-image-info-wrapper .slick-slide > div {
    height: 100%;
}*/
.main-image-info-wrapper a {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 60px;
    color: #333;
    position: relative;
    transition: text-decoration 0.5s ease-out;
    font-size: 18px;
}
.main-image-info-wrapper a:hover {
    text-decoration: underline;
}
.main-image-info-wrapper .slick-slide.slick-current a::before {
    content: none;
}
.main-image-info-wrapper a::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    display: block;
    width: 40px;
    height: 6px;
    border-bottom: solid 2px #d8577a;
    border-right: solid 3px #d8577a;
    transform: translateY(-50%) skewX(45deg);
    transition: right 0.5s linear;
}
.main-image-info-wrapper a:hover::after {
    right: 5px;
}

@media only screen and (max-width: 1240px) {
    
    .header-button-smpmenu-li {
        width: 80px;
    }
    
    .main-text-cell {
        padding-left: 30px;
        padding-right: 20px;
    }
    .main-event-box a h6 {
        font-size: 16px;
    }
    .main-image-cell {
        padding-right: 80px;
    }
    
    .main-image-cell.slick-slider .slick-dots li,
    .main-image-cell.slick-slider .slick-dots li button {
        width: 40px;
        height: 40px;
    }
    .main-image-cell.slick-slider .slick-dots li::before {
        width: 50px;
    }
    .main-image-info-wrapper {
        width: calc(100% - 120px);
    }
}
@media only screen and (max-width: 1023px) {
    
    .header-button-smpmenu-li {
        width: 70px;
    }

    .main-text-cell {
        padding-top: 150px;
        padding-left: 20px;
        width: 390px;
    }
    .main-image-table h3 {
        font-size: 2.4vw;
    }
    .main-image-table h2 {
        font-size: 3.7vw;
    }
    
    .main-event-box a h6 {
        font-size: 13px;
    }
    .main-event-box a .date {
        font-size: 11px;
    }
    
    .main-image-info-wrapper a {
        font-size: 16px;
    }
    
    .main-image-wrapper {
        width: calc(100% - 390px);
        min-height: 700px;
        max-height: 880px;
    }
    .main-image-cell {
        padding-right: 70px;
    }
    .main-image-info-wrapper {
        width: calc(100% - 110px);
    }
}
@media only screen and (max-width: 833px) {
    .main-image-table {
        flex-direction: column-reverse;
    }
    .main-image-wrapper {
        width: 100%;
        height: calc(100vh - 30px);
        max-height: 780px;
        min-height: unset;
    }
    .main-image-cell {
        padding-left: 100px;
        padding-right: 0;
        margin-right: 0;
        margin-left: auto;
    }
    .main-image-cell .slick-list {
        /*max-width: 680px*/;
        margin-left: auto;
        margin-right: 0;
    }
    .main-image-cell.slick-slider .slick-dots {
        right: auto;
        left: 30px;
    }
    .main-image-info-wrapper {
        width: calc(100% - 140px);
        left: 120px;
        top: 100px;
    }
    
    .main-text-cell {
        width: 100%;
        /* max-width: 740px; */
        margin: 0 auto;
        padding-top: 0;
    }
    .banner-wrap {
        display: flex;
        /*justify-content: flex-end;*/
        margin-top: -150px;
        position: relative;
        z-index: 10;
    }
    .main-image-event-wrapper {
        justify-content: center;
    }
    .main-image-table h2 {
        font-size: 40px;
        margin-top: 40px;
        text-align: center;
    }
    .main-image-table h3 {
        font-size: 32px;
    }
    
    .main-event-box {
        max-width: unset;
    }
    .main-event-box a h6 {
        font-size: 16px;
    }
    .main-event-box a .date {
        font-size: 14px;
    }
    
    .main-text-cell {
        display: flex;
        flex-direction: column;
        /* add 25.01.16 */
    }
    .main-text-cell > * {
        order: 2;
        /* add 25.01.16 */
    }
    .main-text-cell .banner-wrap {
        margin-top: -120px;
        order: 1;
    }
    .main-text-cell .banner-wrap.any_banner {
        margin-top: -110px;
    }

}
@media only screen and (max-width: 560px) {
    .main-image-wrapper {
        height: 635px;
    }
    .main-image-cell {
        padding-left: 60px;
    }
    
    .main-image-cell.slick-slider .slick-dots {
        left: 20px;
    }
    .main-image-cell.slick-slider .slick-dots li,
    .main-image-cell.slick-slider .slick-dots li button {
        width: 27px;
        height: 27px;
        font-size: 16px;
    }
    
    .main-text-cell .banner-wrap a {
        max-width: 255px;
    }

    .main-image-table h2 {
        font-size: 34px;
        text-align: left;
        padding-left: 10px;
        margin-top: 40px;
    }
    .main-image-table h3 {
        font-size: 24px;
        text-align: left;
        padding-left: 10px;
        margin-top: 10px;
    }
    
    .main-event-box a h6 {
        font-size: 12px;
    }
    .main-event-box a .date {
        font-size: 11px;
    }
    .main-image-event-wrapper {
        padding-top: 20px;
    }
    .main-image-info-wrapper {
        left: 20px;
        width: calc(100% - 40px);
        top: 90px;
    }
    
    .main-image-info-wrapper .main-info {
        padding: 10px 10px 15px;
    }
    .main-image-info-wrapper a {
        padding: 0;
        font-size: 16px;
    }
    .main-image-info-wrapper a::after {
        top: auto;
        bottom: -10px;
        right: 5px;
    }
}

/* ---
    
----------------------------------------------- */
.top-banner-wrapper {
    max-width: 1100px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.top-banner {
    max-width: 550px;
    width: 50%;
    padding: 15px;
}
.top-banner a {
    display: block;
    position: relative;
    padding: 40px 40px 40px 20px;
    font-size: 32px;
    color: #333;
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    /*background: -moz-linear-gradient(left, #a5e3f8, #dbd7ea, #f7cade);
	background: -webkit-linear-gradient(left, #a5e3f8, #dbd7ea, #f7cade);
	background: linear-gradient(to right, #a5e3f8, #dbd7ea, #f7cade);*/
    background: -moz-linear-gradient(left, #9BDFF6, #D3CDEB, #F8BDD8);
	background: -webkit-linear-gradient(left, #9BDFF6, #D3CDEB, #F8BDD8);
	background: linear-gradient(to right, #9BDFF6, #D3CDEB, #F8BDD8);
    -webkit-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    transition: background 0.3s linear;
}
.top-banner a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(255 255 255 / 30%);
    -webkit-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.top-banner a:hover::before {
    opacity: 0;
}
.top-banner a::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 6px;
    top: 50%;
    right: 20px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: skewX(45deg);
    -ms-transform: skewX(45deg);
    -o-transform: skewX(45deg);
    transform: skewX(45deg);
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    transition: right 0.3s linear;
}
.top-banner a:hover::after {
    right: 10px;
}
.top-banner a span {
    display: block;
    padding-bottom: 10px;
    position: relative;
    z-index: 0;
}
.top-banner a span::before {
    content: attr(data-text) '';
    position: absolute;
    z-index: -1;
    font-family: "Oooh Baby", cursive;
    font-size: 40px;
    color: #fff;
    left: 1.8em;
    bottom: -10px;
}
@media only screen and (max-width: 1023px) {
    .top-banner a {
        font-size: 24px;
    }
    .top-banner a span::before {
        font-size: 32px;
        left: 1.3em;
    }
}
@media only screen and (max-width: 833px) {
    .top-banner-wrapper {
        margin: 0;
    }
    .top-banner {
        width: 100%;
        padding-top: 0;
    }
}
@media only screen and (max-width: 560px) {
    .top-banner {
        padding: 0 10px 10px;
    }
    .top-banner a {
        padding: 30px 20px;
    }
    .top-banner a::after {
        width: 30px;
        height: 5px;
        right: 10px;
    }
    .top-banner a span::before {
        font-size: 26px;
    }
}

/* ---
    News
----------------------------------------------- */
section.blog {
    padding: 50px 0;
    overflow: hidden;
}
section.blog > h2 {
    font-size: 60px;
    text-align: center;
    position: relative;
}
section.blog > h2 span {
    display: inline-block;
    padding-bottom: 15px;
}
.top-news-wrapper{
	display: none;
}
.top-news-wrapper.active{
	display: block;
}

.top-news-contentWrapper {
    position: relative;
    margin-top: -60px;
}
.top-news-wrapper.swiper-container {
    overflow: visible;
    padding: 80px 10.2vw 30px;
    pointer-events: none;
}
.swiper-button-prev, .swiper-button-next {
    margin-top: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 1px solid #d8577a;
    pointer-events: auto;
}
.swiper-button-next {
    right: 11vw;
}
.swiper-button-prev {
    left: auto;
    right: calc(11vw + 60px);
}
.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 16px;
    color: #d8577a;
}
.swiper-button-prev::after {
    content: '←';
}
.swiper-button-next::after {
    content: '→';
}
.top-news-wrapper .article_blk,
.top-news-wrapper .slick-track {
    display: flex;
    /*gap: 25px;*/
    pointer-events: auto;
}
.top-news-wrapper .article_blk-article {
    width: 30%;
    /*max-width: 366px;*/
    padding: 0 13px;
    height: auto;
}
.top-news-wrapper .article_blk-article a {
    color: #333;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.top-news-wrapper .article_blk-textBox {
    flex: 1;
}
.top-news-wrapper .article_blk-thumb {
    position: relative;
    background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.top-news-wrapper .article_blk-thumb::before {
    content: '';
    display: block;
    padding-bottom: 60%;
}
.top-news-wrapper .article_blk-hover {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background-color: rgba(255,255,255, 0.6);
    opacity: 0;
    transition: opacity 0.5s linear;
}
.top-news-wrapper a.article_blk-a:hover .article_blk-hover {
    opacity: 1;
}
.top-news-wrapper .article_blk-textBoxInner {
    padding: 20px 15px;
    background-color: #fff;
    height: 100%;
}
.top-news-wrapper .article_blk-btags {
    display: none;
}
.top-news-wrapper .article_blk-title {
    font-size: 18px;
    margin: 8px 0;
}
.top-news-wrapper .article_blk-date,
.top-news-wrapper .article_blk-excerpt {
    color: #8b8b8b;
    font-size: 14px;
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 833px) {
    .top-news-wrapper .article_blk-article {
        padding: 0 7px;
    }
    
    .top-news-wrapper.swiper-container {
        padding-bottom: 70px;
        position: relative;
        touch-action: auto !important;
        pointer-events: auto !important;
    }
    .top-news-wrapper .swiper-button-prev {
        left: 50%;
        transform: translateX(calc(-50% - 30px));
    }
    .top-news-wrapper .swiper-button-next {
        left: 50%;
        transform: translateX(calc(-50% + 30px));
    }
}
@media only screen and (max-width: 767px) {
    .top-news-wrapper.swiper-container {
        max-width: 385px;
        margin: 0 auto;
        padding: 80px 0 70px;
    }
}
@media only screen and (max-width: 560px) {
    section.blog > h2 {
        font-size: 50px;
    }
    .top-news-wrapper.swiper-container {
        padding-bottom: 30px;
        max-width: unset;
    }
    .top-news-wrapper .article_blk, .top-news-wrapper .slick-track {
        flex-wrap: wrap;
        transform: none !important;
    }
    .top-news-wrapper .article_blk-article {
        width: 50% !important;
        padding: 5px 5px;
    }
    .top-news-wrapper .article_blk-article:nth-of-type(n + 5) {
        display: none;
    }
    .top-news-wrapper.swiper-container {
        padding-left: 0;
        padding-right: 0;
    }
    .top-news-wrapper .article_blk-textBoxInner {
        padding: 10px;
    }
    .top-news-wrapper .article_blk-date, .top-news-wrapper .article_blk-excerpt {
        font-size: 12px;
    }
    .top-news-wrapper .article_blk-title {
        font-size: 14px;
    }
    
    .top-news-contentWrapper .swiper-button-prev,
    .top-news-contentWrapper .swiper-button-next {
        display: none;
    }
}


/* ---
    school life
----------------------------------------------- */
section.top-school_life {
    
}

.school-life-wrapper {
    max-width: 1100px;
    padding-top: 120px;
    margin: auto;
    display: flex;
    position: relative;
}
.school-life-wrapper::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translate(-96.1%, 0);
    width: 52vw;
    height: calc(100% - 70px);
    background: -moz-linear-gradient(left, #9BDFF6, #D3CDEB, #F8BDD8);
    background: -webkit-linear-gradient(left, #9BDFF6, #D3CDEB, #F8BDD8);
    background: linear-gradient(to right, #9BDFF6, #D3CDEB, #F8BDD8);
}
.school-life-left {
    width: 35%;
    min-width: 380px;
    padding-right: 10px;
}
.school-life-left h2 {
    text-align: left;
}
.school-life-left h3 {
    text-align: left;
}
.school-life-left h3 span {
   padding-left: 0;
}
.school-life-left h3 span::after {
    color: #fff;
}
.school-life-left p {
    margin-top: 20px;
    font-size: 14px;
}

.school-life-right {
    width: 65%;
}
.image-gallery-3x2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.image-gallery-3x2 .gal {
    width: calc(100% / 3 - (20px / 3));
}
.gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* plugin -- Instagram */
div#sb_instagram {
    padding: 0 !important;
}
#sb_instagram #sbi_images {
    padding: 0;
}

@media only screen and (max-width: 1023px) {
    .school-life-wrapper {
        padding-top: 100px;
    }
    .school-life-wrapper::before {
        top: 20px;
        height: 100%;
    }
    
    .image-gallery-3x2 {
        gap: 5px;
    }
    .image-gallery-3x2 .gal {
        width: calc(100% / 3 - (10px / 3));
    }
}
@media only screen and (max-width: 833px) {
    .school-life-wrapper {
        flex-direction: column;
        padding-top: 50px;
    }
    .school-life-left {
        width: 100%;
        padding: 0 10px 40px 50px;
    }
    .school-life-right {
        width: 100%;
        padding-left: 40px;
    }
    .school-life-wrapper::before {
        top: 0;
        width: 85vw;
        left: -10px;
        transform: none;
        height: 80%;
    }
    .school-life-left .btn-a {
        margin-left: 0;
    }
    
}
@media only screen and (max-width: 560px) {
    section.top-school_life {
        padding-left: 0;
        padding-right: 0;
    }
    .school-life-wrapper::before {
        left: 0;
        width: calc(100% + 20px);
        height: 70%;
    }
    .school-life-left {
        padding: 0 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .school-life-left .btn-a {
        margin-left: auto;
    }
    .school-life-right {
        padding-left: 30px;
    }
    
    .school-life-right.image-gallery-3x2 {
        padding-left: 30px;
    }
    .image-gallery-3x2 {
        gap: 3px;
    }
    .image-gallery-3x2 .gal {
        width: calc(100% / 3 - (6px / 3));
    }
    /* plugin -- Instagram */
    #sb_instagram #sbi_images {
        gap: 3px !important;
    }
}


/* ---
    説明会情報 - briefing session
----------------------------------------------- */
.briefing-wrapper {
    margin-top: 30px;
    padding-bottom: 90px;
    position: relative;
    z-index: 0;
}
.briefing-wrapper::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -10px;
    bottom: 0;
    width: calc(100vw - 150px);
    height: 80%;

    background-image: 
        conic-gradient(from 45deg,
            #f9dbe8 90deg,
            #d2ecfa 90deg 180deg,
            #fceef4 180deg 270deg,
            #eaf5fc 270deg);
    background-size: 149px 149px;
    background-position: right 30px bottom -15px;
    opacity: 0.7;
}
.briefing-button-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.briefing-btn {
    min-width: 120px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #d8577a;
    padding: 2px 1em 3px 1em;
    border-radius: 3px;
    opacity: 0.4;
    cursor: pointer;
}
.briefing-btn.active {
    opacity: 1;
}
/* event slider */
.event-outer-wrapper {
    position: relative;
}
.event-date-wrapper {
    /*position: relative;*/
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 90px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.event-date-wrapper.active {
    position: relative;
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}
.event-swiper {
    position: relative;
    max-width: 920px;
    overflow: hidden;
}
.event-swiper .swiper-wrapper {
    
}
.event.swiper-slide {
    width: 20%;
    padding: 10px;
    text-align: center;
}
.date-box {
    position: relative;
    background-color: #fff;
    border: solid 1px #d8577a;
    display: flex;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

.date-box::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}
.date-box > div {
    position: absolute;
    line-height: 1;
}
.date-box .date {
    transform: translateY(-25%);
    font-size: 60px;
}
.date-box .week {
    transform: translateY(130%);
    font-size: 30px;
}
.event-type {
    text-align: center;
    margin-top: 10px;
}
.event-type span {
    display: inline-block;
    min-width: 100px;
    line-height: 1;
    background-color: #d8577a;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 3px;
}
.ev-name {
    margin-top: 10px;
}

.event-date-wrapper .swiper-button-prev,
.event-date-wrapper .swiper-button-next {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
}
.event-date-wrapper .swiper-button-prev {
    left: 20px;
}
.event-date-wrapper .swiper-button-next {
    right: 20px;
}

/* 終了表示 */
.event-ended {
    text-align: center;
    min-height: 200px;
    margin: 20px auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

@media only screen and (max-width: 1023px) {
    .briefing-wrapper::after {
        width: 90vw;
    }
}
@media only screen and (max-width: 833px) {
}
@media only screen and (max-width: 560px) {
    .event-date-wrapper {
        padding: 0 60px;
    }
    .event-date-wrapper .swiper-button-prev {
        left: 0px;
    }
    .event-date-wrapper .swiper-button-next {
        right: 0px;
    }
}


/* ---
    無償化プラン
----------------------------------------------- */
section.top-plan {
    padding: 50px 0;
}
.gard-wrapper {
    padding: 50px 10px;
    background: -moz-linear-gradient(left, gb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
	background: -webkit-linear-gradient(left, gb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
	background: linear-gradient(to right, rgb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
}
.plan-wrapper {
    text-align: center;
    margin: 30px auto;
    max-width: 1100px;
}
.plan-wrapper h2 {
    font-size: 36px;
}
.plan-wrapper h2 span {
    display: block;
    font-size: 60px;
    color: #ea6099;
}
.plan-wrapper p {
    margin-top: 1em;
}
.plan-info-wrapper {
    margin: 30px auto;
    max-width: 1000px;
    display: flex;
}
.plan-info-left {
    width: 44%;
    padding-right: 50px;
}
.plan-info-right {
    width: 56%;
}
.plan-info-text {
    padding: 30px;
    background-color: #d8577a;
    color: #fff;
}
@media only screen and (max-width: 1023px) {
    .top-plan h3 {
        font-size: 24px;
    }
    .plan-wrapper h2 {
        font-size: 24px;
    }
    .plan-wrapper h2 span {
        font-size: 40px;
    }
    .plan-info-wrapper {
        flex-direction: column;
    }
    .plan-info-left {
        width: 100%;
        max-width: 700px;
        margin: auto;
        padding: 0 20px 20px;
        text-align: center;
    }
    .plan-info-right {
        width: 100%;
        padding: 0 10px;
        max-width: 720px;
        margin: auto;
    }
    .plan-info-text {
        padding: 20px;
    }
}
@media only screen and (max-width: 833px) {
}
@media only screen and (max-width: 560px) {
    
    .plan-wrapper {
        text-align: left;
    }
    
    .plan-info-left {
        padding: 0 10px 10px;
    }
    
    .plan-wrapper h2 {
        font-size: 22px;
    }
    .plan-wrapper h2 span {
        font-size: 34px;
    }
    .plan-wrapper p {
        font-size: 14px;
    }
    .plan-info-text {
        text-align: left;
    }
    .plan-info-text p > br {
        display: none;
    }
    .plan-info-right {
        padding: 0;
    }
    .plan-wrapper h2 {
        text-align: left;
    }
}


/* ---
    コース紹介 - course
----------------------------------------------- */
svg.wave-bg {
    position: absolute;
    width: 100%;
    min-width: 1200px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.7;
}
.course-wrapper {
    max-width: 1100px;
    margin: auto;
    display: flex;
}
.course-left {
    order: 1;
    flex: 1;
}
.course-title {
    order: 2;
    width: 300px;
    padding-bottom: 100px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.course-title p {
    margin-top: 20px;
    text-align: center;
}
.course-right {
    order: 3;
    flex: 1;
}
.course-left a,.course-right a {
    display: block;
    color: inherit;
    text-align: center;
}
.course-left a h4,.course-right a h4 {
    font-size: 2.3rem;
    margin-top: 20px;
}
.course-left a p,.course-right a p {
    margin-top: 10px;
}
.course-image {
    position: relative;
    overflow: hidden;
}
.course-image::before {
    content: '';
    display: block;
    padding-bottom: 135%;
}
.course-image::after {
    content: 'コースをみる';
    position: absolute;
    width: 150px;
    height: 150px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 50%;
    background-color: rgb(216 87 122 / 70%);
    padding-top: 40px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s linear;
}
.course-wrapper a:hover .course-image::after{
    transition: opacity 0.6s linear;
    opacity: 1;
}
.course-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    -webkit-transition: transform 0.8s linear;
    -o-transition: transform 0.8s linear;
    transition: transform 0.8s linear;
}
.course-left a:hover .course-image img,
.course-right a:hover .course-image img {
    transform: scale(1.1);
}

@media only screen and (max-width: 1023px) {
    svg.wave-bg {
        top: 30%;
    }
    .course-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }
    .course-title {
        order: 1;
        width: 100%;
        padding-bottom: 0;
    }
    .course-left, .course-right {
        padding: 20px;
        max-width: 380px;
    }
}
@media only screen and (max-width: 833px) {
    
}
@media only screen and (max-width: 560px) {
    .course-title p {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .course-left, .course-right {
        padding: 10px;
    }
    .course-left a h4, .course-right a h4 {
        font-size: 20px;
    }
    .course-left a p, .course-right a p {
        font-size: 14px;
        margin-top: 0;
        padding: 10px 5px;
        text-align: left;
    }
    
    .course-image::after {
        font-size: 12px;
        width: 100px;
        height: 100px;
        padding-top: 25px;
    }
}


/* ---
    Pickup - 特徴
----------------------------------------------- */
.pickup-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    gap: 10px
}
.pickup {
    display: block;
    position: relative;
    overflow: hidden;
    width: 25%;
}
.pickup::before {
    content: '';
    display: block;
    padding-bottom: 137%;
}
.pickup img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 0.8s linear;
}
a.pickup:hover img {
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.pick-title {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: 10px;
    background-color: rgb(234 96 153 / 80%);
    color: #fff;
}
@media only screen and (max-width: 1023px) {
    .pick-title {
        font-size: 14px;
    }
}
@media only screen and (max-width: 767px) {
    
    .pickup-wrapper {
        flex-wrap: wrap;
        max-width: 600px;
    }
    .pickup {
        width: calc(50% - 5px);
    }
}
@media only screen and (max-width: 560px) {
}

/* ---
    interviews
----------------------------------------------- */
section.top-interviews {
    overflow: hidden;
    padding: 50px 0;
}
.top-interviews h3 span::after {
    color: #fff;
}
.interviews-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: -1;
    background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.interviews-bg::before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(left, #a5e3f8, #dbd7ea, #f7cade);
    background: -webkit-linear-gradient(left, #a5e3f8, #dbd7ea, #f7cade);
    background: linear-gradient(to right, #a5e3f8, #dbd7ea, #f7cade);
    opacity: 0.7;
}


.interviews-wrapper {
    max-width: 1400px;
    margin: -60px auto 30px;
    padding-top: 100px;
    padding-left: 8.6vw;
    padding-right: 10vw;
    position: relative;
}
@media only screen and (min-width: 1400px) {
    .interviews-wrapper {
        max-width: 1400px;
        overflow: hidden;
        margin: -60px auto 30px;
        padding-top: 100px;
        padding-left: 120px;
        position: relative;
    }
}
.interviews-swiper {
    max-width: 1046px;
}
.interviews-wrapper .swiper-wrapper {
    display: flex;
    margin: unset;
}
.interview.swiper-slide {
    width: calc(100% / 3);
    padding: 25px;
}
.interview > a {
    display: block;
    color: inherit;
}
.interview-img-box {
    position: relative;
    overflow: hidden;
}
.interview-img-box::before {
    content: '';
    display: block;
    padding-bottom: 140%;
}
.interview-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: transform 0.8s;
    -o-transition: transform 0.8s;
    transition: transform 0.8s;
}
.interview > a:hover .interview-img-box img {
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.int-img-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: calc(5em + 30px);
    padding: 15px 10px;
    background-color: rgb(234 96 153 / 85%);
    color: #fff;
}
.interview p.data {
    font-size: 14px;
    margin-top: 10px;
}
.interview::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 80px;
    height: 80px;
    background-color: #ea6099;
    top: -10px;
    left: -15px;
    border-radius: 50%;
    /* font-size: 14px; */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.interview.student::before {
    content: '在校生';
    background-color: #90dcf5;
}
.interview.grad::before {
    content: '卒業生';
}

/* swiper */
.interview-swip.swiper-button-prev {
    right: calc(11vw + 60px);
}

.interview-swip.swiper-button-next {
    right: 11vw;
}
.interview-swip.swiper-button-disabled {
    opacity: 0.5;
    border-color: #fff;
}
.interview-swip.swiper-button-disabled::after {
    color: #fff;
}

@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 833px) {
    .interviews-bg {
        height: auto;
        padding-bottom: 50%;
    }
    .interview::before {
        width: 60px;
        height: 60px;
        font-size: 14px;
        left: -10px;
    }
    .interview.swiper-slide {
        padding: 15px;
    }
    .int-img-text {
        font-size: 14px;
    }
    .interviews-wrapper {
        padding-left: 8vw;
        padding-right: 10vw;
        padding-top: 0;
        padding-bottom: 50px;
        margin-top: 20px;
    }
    .swiper-button-prev, .swiper-button-next {
        top: auto;
        bottom: 0;
    }
}
@media only screen and (max-width: 560px) {
    .interviews-bg {
        padding-bottom: 60%;
        min-height: 250px;
    }
    .interviews-wrapper {
        padding-left: 12vw;
        padding-right: 22vw;
    }
    .int-img-text {
        padding: 10px 8px;
        min-height: calc(4em + 20px);
        font-size: 12px;
    }
}

/*
--- キャンペーン
---------------------------------------------------------------------------*/
section.top-campaign_block {
    background: -moz-linear-gradient(left, gb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
	background: -webkit-linear-gradient(left, gb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
	background: linear-gradient(to right, rgb(165 227 248 / 50%), rgb(219 215 234 / 50%), rgb(247 202 222 / 50%));
}
section.top-campaign_block h3 {
    position: relative;
    z-index: 1;
}
section.top-campaign_block h2 span {
    color: #d8577a;
}

.campaign_block-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 50px;
    /*border: solid 1px #d8577a;
    background-color: #fff;*/
    position: relative;
    z-index: 0;
}
.campaign_block-wrapper::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 450px;
    height: 450px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../images/campaian_bg.webp");
    background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.campaign_block-wrapper h2 {
    font-size: 3.2rem;
    line-height: 1.3;
}
.campaign_block-wrapper h2 span {
    color: #E85298;
}
.campaign_block-wrapper h2 span.camEn {
    font-size: 11rem;
    line-height: 1.1;
    font-family: "Oooh Baby", cursive;
    font-weight: 900;
}
.campaign_block-wrapper h3 {
    color: #d8577a;
    margin-bottom: 30px;
}
.campaign {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.camp {
    /*width: calc(50% - 5px);*/
    width: 100%;
    /*background-color: #d8577a;*/
    /*padding: 20px;*/
    padding: 0 40px;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: solid 1px #d8577a;*/
    /*border-radius: 30px;*/
    font-size: 20px;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    position: relative;
}
.camp::before, 
.camp::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 35px;
    bottom: 0;
}
.camp::before {
    left: 0;
    background:linear-gradient(to bottom left, #E85298 50%, transparent 50%) top left/ 100% 60% no-repeat,
    linear-gradient(to top left, #E85298 50%, transparent 50%) bottom left / 100% 60% no-repeat;
}
.camp::after {
    right: 0;
    background:linear-gradient(to bottom right, #E85298 50%, transparent 50%) top left/ 100% 60% no-repeat,
    linear-gradient(to top right, #E85298 50%, transparent 50%) bottom left / 100% 60% no-repeat;
}
.camp > div {
    width: 100%;
    background-color: #E85298;
    padding: 20px;
    color: #fff;
    text-align: center;
}
.camp.free > div {
    position: relative;
}
.camp.free > div::before {
    content: '無料';
    font-size: 24px;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 10px;
    transform: translate(-25%, -30%);
    width: 80px;
    height: 80px;
    background-image: url("../images/icon_free.webp");
    background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
    /*border-radius: 50%;*/
    /*background-color: #F8BC6E;*/
    /*background-color: #F3B3CF;*/
}
/*.cam_key {
    color: #d8577a;
}*/
.cam_sub {
    font-size: 16px;
}
.cmp_text {
    margin-top: 30px;
}
.cmp_text span.cam_key {
    display: inline-block;
    padding: 5px 15px;
    margin-bottom: 10px;
    background-color: #fff;
    border: solid 1px #333;
    border-radius: 2em;
}
@media only screen and (max-width: 833px) {
    
}
@media only screen and (max-width: 560px) {
    .campaign_block-wrapper {
        padding: 30px 0;
    }
    .campaign_block-wrapper::before {
        width: 350px;
        height: 350px;
    }
    .campaign_block-wrapper h2 span.camEn {
        font-size: 8rem;
    }
    .campaign_block-wrapper h2.campaign-title + h3 {
        font-size: 20px;
    }
    .camp {
        padding: 0 25px;
        font-size: 18px;
    }
    .camp::before, .camp::after {
        width: 23px;
    }
    .camp.free {
        margin-top: 20px;
    }
    .camp.free > div {
        padding: 10px;
        height: 100%;
    }
    .camp.free > div::before {
        width: 60px;
        height: 60px;
        font-size: 18px;
        top: -20px;
        left: 0;
    }
    .cam_sub {
        font-size: 14px;
    }
}


/*
---
---------------------------------------------------------------------------*/
.breifing-info {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
	margin-top: 30px;
}

.breifing-info__row {
	color: inherit;
}
.breifing-info__pickup {
	background-color: #d8577a;
	color: #fff;
	padding: 0px 10px 3px;
}

.breifing-info__whitebg {
	background-color: #fff;
	padding: 10px;
	display: flex;
	column-gap: 20px;
}

.breifing-info__whitebg img {
	width: 150px;
	flex-shrink: 0;
	max-width: 30%;
}

.breifing-info__text {
	flex-grow: 1;
	align-self: center;
}

.breifing-info__type {
	font-size: 12px;
}

.breifing-info__title {
	font-size: 20px;
	font-weight: 700;
}

.breifing-info__day {
	font-size: 14px;
}

.breifing-info__sideborder {
	border-left: 6px solid #d8577a;
	padding: 5px 0px 5px 10px;
}

@media (max-width: 500px) {
	.breifing-info__row:nth-of-type(1) {
		margin: 0 -20px;
	}
	.breifing-info__pickup {
		padding: 5px 20px 8px;
	}
	.breifing-info__whitebg {
		flex-direction: column;
		row-gap: 15px;
		padding: 20px;
	}
	.breifing-info__text {
		align-self: auto;
	}
	.breifing-info__whitebg img {
		width: 400px;
		align-self: center;
		max-width: 100%;
	}
	.breifing-info__title {
		font-size: 18px;
	}
}



/* ---
    
----------------------------------------------- */

@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 833px) {
}
@media only screen and (max-width: 560px) {
}