/*----------
 common
 ----------*/
*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-size: min(1.5rem, 3.6vw);
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--c-black);
    font-weight: 500;
    position: relative;
    opacity: 0;
    transition: .5s ease;
    animation:fadeIn .5s forwards .3s ease-in-out;
}

@keyframes fadeIn {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

:root{
    --c-black:#000;
    --c-white:#fefefe;
    --c-pink:#ff67a4;
    --c-lPink:#ffeaee;
    --c-lPink2:#ffdde9;
    --c-coral:#f69e9c;
    --c-blue:#5d5aff;
    --c-lBlue:#99dce5;
    --c-cyan:#88a6d9;
    --c-yellow:#fdff68;
    --c-green:#78c581;
    --c-orange:#f0bd36;
    --c-gray:#b2b2b2;
    --c-purple:#b76ed9;
    --box-blur: calc(0.5 * var(--blur));
    --b-dashed:dashed 1px var(--c-dBrown);
    --b-brown:solid 2px var(--c-dBrown);
    --font-224rem:min(2.24rem,4.83vw);
    --font-183rem:min(1.83rem,4vw);
    --font-14rem:min(1.3rem,3.24vw);
    --section-margin:min(4rem,10vw);
    --bgw-margin:min(3rem,6vw);
    --titleB-margin:min(16px,4vw);
    --ps-margin:min(32px,6.5vw);
    --b-radius:min(1em,4vw);
    --border:solid min(.3rem,.7vw) var(--c-blue);
    --transition:.3s cubic-bezier(.37,.49,.35,1.28);
    --transition2:.6s cubic-bezier(.37,.49,.35,1.28);
    --cha-contents-width: min(530px,35vw);
}

li{
    list-style: none;
}

a{
	text-decoration:none;
    color: var(--c-white);
    position: relative;
    transition: var(--transition);
}

img{
    max-width:100%;
    height: auto;
    box-sizing: border-box;
    vertical-align: bottom;
}

.deco-img{
    position: absolute;
}

button{
    display: block;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: "Zen Maru Gothic", sans-serif;
    border: none;
}

table{
    clear: both;
    border-collapse: collapse;
    width: 100%;
}

th{
    padding: 12px 0 12px 12px;
    vertical-align: top;
}

td{
    padding: 12px;
}

.contents{
    margin: 0 6%;
    position: relative;
}

.contents-wrapper{
    position: relative;
}

/*--swiper--*/
.swiper-wrapper{
  transition-timing-function: linear!important;
}

.swiper-slide{
  padding: 0 2px;
  will-change: transform, opacity;
}

.swiper-slide a{
    display: block;
}

.swiper-slide img {
  width: 100%;
  width: 100%;
}

.swiper-slide > div {
  height: 100%;
  width: 100%;
}

body .swiper-button-next,
body .swiper-button-prev{
  color: var(--c-blue);
  transition: var(--transition);
}
body .swiper-button-next:hover,
body .swiper-button-prev:hover{
    opacity: .6;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    content: '';
}

body .swiper-button-prev{
    width: min(4%);
    left: 17%!important;
}

body .swiper-button-next{
    width: min(4%);
    right: 17% !important;
}


/*--thumbnail--*/
.thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
    padding-top: 62.25%;
}
.thumbnail img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

/*--title--*/
.contents-ttl{
text-align: center;
    width: min(74vw, 47rem);
    margin: 0 auto min(2rem, 2vw);
    position: relative;
    z-index: 1;
}

.contents-ttl .deco-img{
    z-index: 1;
}

.contentsTitle-border{
    display: flex;
    gap: min(4vw);
    align-items: center;
    justify-content: space-between;
    margin-bottom: min(4rem, 8vw);
}

.contentsTitle-border h2{
    width: min(46vw);
}

.contentsTitle-border_borders{
    width: calc(100% - min(46vw));
    height: min(9vw);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*--linkBox--*/
.linkBtn{
    display: block;
    text-align: center;
    margin: auto;
    padding: min(3vw);
    font-weight: 600;
    background: var(--c-yellow);
    width: 80%;
    font-size: min(4.4vw, 2.24rem);
    line-height: 1.5;
}
.linkBtn::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: -12%;
    left: -2%;
    transition: var(--transition);
}

.linkBtn:hover::before{
    top: 0%;
    left:0%;
}

.linkBtn.--white{
    color: var(--c-blue);
}

.linkBtn.--white::before{
    background: var(--c-white);
    border: min(.3rem, .6vw) solid var(--c-blue);
}

.linkBtn.--purple{
    color: var(--c-white);
}
.linkBtn.--purple::before{
    background: var(--c-purple);
    border: min(.3rem, .6vw) solid var(--c-blue);
}

.linkBtn span{
    position: relative;
    line-height: 1.5;
}

.linkBtn-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -22%;
    left: -2%;
    transform: translate(0%, -22%);
    transition: var(--transition);
}

.linkBtn:hover .linkBtn-inner{
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
}

.links-wrapper{
    margin-top: min(3rem,6vw);
}

.contentsTitleArea{
    position: relative;
    z-index: 1;
}

.noLinks{
    opacity: .4;
}
.noLinks:hover{
    transform: none;
}

/*--svg--*/
.svg-green{
    fill: var(--c-green);
}

.svg-navy{
    fill: var(--c-cyan);    
}

.svg-cyan{
    fill: var(--c-cyan);     
}

.svg-coral{
    fill: var(--c-coral);
}

.svg-yellow{
    fill: var(--c-yellow);   
}

.svg-pink{
    fill: #ffc8e9;
}

.svg-lPink{
    fill: #ffc8e9;   
}

.svg-purple{
    fill: var(--c-purple);   
}

/*--bread--*/
.breadcrumbs{
    font-size: min(1.2rem, 2.8vw);
    margin: min(1rem,2vw);
    text-align: left;
    color: var(--c-white);
}

.breadcrumbs span{
    padding: 0 2px;
    font-weight: 500;
    color: var(--c-white);
    letter-spacing: 0;
}

.breadcrumbs a{
    color: var(--c-white);
    text-decoration: underline;
}

#page-top {
    position: absolute;
    top: 2%;
    right: min(32px, 3vw);
    width: min(9rem, 16vw);
    z-index: 2;
}

#page-top a{
    display: block;
}

#page-top a:hover{
    transform: translateY(-6%);
}


/*---- youtube/googleMap -----*/
.googleMap{
    position: relative;
    padding-bottom: 100.25%;
    height: 0;
    overflow: hidden;
}

.googleMap iframe, .googleMap object, .googleMap embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube{
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.youtube iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    cursor: pointer;
    border: var(--border);
    overflow: hidden;
    border-radius: var(--b-radius);
}

.video-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; 
    height: 100% !important; 
    border: none;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(5rem, 10vw);
    pointer-events: none;
    cursor: pointer;
    transition: var(--transition);
}
.play-button:hover{
    transform: scale(.95);
}


/*----- swiper -----*/
.swiper-wrapper{
  transition-timing-function: linear!important;
}

.swiper-slide{
  padding: 0 2px;
}

.swiper-slide img {
  width: 100%;
  width: 100%;
}

.swiper-slide > div {
  height: 100%;
  width: 100%;
}

body .topics-swiper .swiper-scrollbar{
    background: #d3d3d391;
    height: 5px;
    position: relative;
    width: 100%;
    left: 0;
    cursor: pointer;
}

.swiper-scrollbar-drag{
    background: var(--c-orange);
}

/*--- animation ---*/
.a-kirakira{
    animation: star 2s both infinite ease-in-out;
    animation-delay: .15s;
    transform-box: fill-box;
    transform-origin: center;
}

.a-kirakira2{
    animation: star 3s both infinite ease-in-out;
    animation-delay: .25s;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes star{
    0% {
        transform: scale(.5);
    }
    48% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    52% {
        transform: scale(1);
    }
    100% {
        transform: scale(.5);
    }
}

.a-flake{
    animation: snowflake 40s both infinite linear;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes snowflake{
    0% {
        transform: translateY(-10%) rotate(0);
    }
    50% {
        transform: translateY(10%) rotate(180deg);
    }
    100% {
        transform: translateY(-10%) rotate(360deg);
    }
}

.a-kakukaku{
    animation: katakata steps(1) 10s infinite;
}
.a-kakukaku2{
    animation: katakata steps(1) 8s infinite;
}

@keyframes katakata{
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    10% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    30% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    40% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.a-fuwafuwa{
    animation: fuwafuwa 4s infinite ease-in-out 0s alternate;
}
.a-fuwafuwa2{
    animation: fuwafuwa 6s infinite ease-in-out 0s alternate;
}
.a-fuwafuwa3{
    animation: fuwafuwa 8s infinite ease-in-out 0s alternate;
}
@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -6px);
    }
    100% {
        transform: translate(0, 0px);
    }
}


.fade-in2,
.menu-scrollFallIn{
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.fade-in2.is-active{
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: .5s ease;
}
@keyframes fadeInPopup {
    0%{
        transform: translate(0, 10px);
    }
    60%{
        transform: translate(0, -8px);
        opacity: 1;
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}

.scroll-contents{
    opacity: 0;
    transform: scale(.9);
    -webkit-transform: scale(.9);
}

.scroll-contents.is-active{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: opacity .4s .2s ease, transform .4s .2s ease;
    -webkit-transition: opacity .4s .2s ease, transform .4s .2s ease;
}

.scroll-ttl{
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
}

.scroll-ttl.is-active{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    transition: .8s ease-in-out 0s;
    opacity: 1;
}

@media screen and (min-width:1025px){
    /*--svg--*/
    .title-svg{
        height: min(3.5rem, 2.3vw);
    }

    #page-top{
        width: min(90px, 5vw);
            top: 4%;
    }
}

@media screen and (min-width:769px){
    .contentsTitle-border{
        margin-bottom: min(3rem);
        gap: min(5%);
    }

    /*--linkBox--*/
    .linkBtn {
        transition: var(--transition);
        padding: min(1.5rem);
        width: 74%;
    }
}


/*----------
  Header
----------*/
header{
    width: min(46vw);
    margin: 3vw 0 0 3vw; 
}

header a:hover{
    opacity: .5;
}

#js-top {
    opacity: 0;
    position: fixed;
    z-index: 3;
    transition: var(--transition);
    visibility: hidden;
    width: 100%;
}

#js-top.is-show {
    opacity: 1;
    transition: var(--transition);
    visibility: visible;
}

/*----------*/
/* hamburger
/*----------*/
.openBtn{
    cursor: pointer;
    position: fixed;
    z-index: 200;
    transition: var(--transition);
    width: min(11vw, 6rem);
    height: min(7vw, 4rem);
    top: 2%;
    right: 3%;
}

.openBtn span{
    background: var(--c-blue);
    width: 100%;
    height: min(.5rem, 1.2vw);
    border-radius: 9999px;
    display: block;
    position: absolute;
    left: 0;
    transition: var(--transition);
}
.openBtn span:nth-of-type(1){
    top: 0;
}
.openBtn span:nth-of-type(2){
    top: 50%;
}
.openBtn span:nth-of-type(3){
    top: 100%;
}

.openBtn.active span:nth-of-type(1){
    transform: rotate(-45deg);
    top: 50%;
}
.openBtn.active span:nth-of-type(2){
    opacity: 0;
}
.openBtn.active span:nth-of-type(3){
    transform: rotate(45deg);
    top: 50%;
}

.g-nav{
    position: fixed;
    z-index: 100;
    top: 0;
    width:100%;
    height: 100svh;
    transition: transform .6s cubic-bezier(0.6, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    background: var(--c-white);
    transform: translateX(100vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#js-g-nav.panelactive{
    opacity: 1;
    visibility: inherit;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(0);
}

.g-nav_container{
    width: 75%;
}

.g-nav_wrapper{
    position: relative;
    width: min(80%,48rem);
}

li.-nav_menuItem{
    padding: min(4vw, 2rem) 0;
}

.g-nav li.-nav_menuItem a{
    opacity: 0;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    display: block;
    transition: var(--transition);
}


.g-nav ul.menuNavi-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-bottom: min(2rem);
}

.g-nav ul.menuNavi-list a.contentsMenu-item{
    text-align: center;
    font-size: min(2rem, 4.24vw);
    font-weight: 900;
}
.g-nav ul.menuNavi-list a.contentsMenu-item::before,
.g-nav ul.menuNavi-list a.contentsMenu-item::after{
    width: 7%;
}

.g-nav.panelactive li.-nav_menuItem a{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}

/*.g-nav.panelactive ul.menuNavi-list li:nth-of-type(1) a{
    transition-delay: .6s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(2) a{
    transition-delay: .65s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(3) a{
    transition-delay: .7s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(4) a{
    transition-delay: .75s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(5) a{
    transition-delay: .8s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(6) a{
    transition-delay: .85s;
}
.g-nav.panelactive ul.menuNavi-list li:nth-of-type(7) a{
    transition-delay: .9s;
}*/

li.-nav_menuItem img{
    display: block;
    height: min(6.24vw,4rem);
    margin: 0 auto;
}

.g-nav .g-nav_bg{
    position: absolute;
    width: 88%;
    height: 82svh;
    background-color: var(--c-lBlue);
    background-image: url(img/cross-bg.svg);
    background-repeat: repeat;
    background-size: 6%;
    border-radius: var(--b-radius);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -3;
}

/*----------*/
/* site layout
/*----------*/
.deskTop-bgImg{
    display: none;
}

main.main-wrapper{
    position: relative;
    width: 100%;
    background-repeat: repeat;
    background-size: 60%;
    background-attachment: fixed;
}

.site-main {
    background: var(--c-white);
    box-sizing: border-box;
    overflow: hidden;
    order:2;
    position: relative;
    /*transform: scaleX(0);*/
}

/*.is-loadActive .site-main{
    transform: scaleX(0);
    animation: loadingMain var(--transition) .85s forwards;
}*/

@keyframes loadingMain {
    0% {
        opacity: 0;
        transform: scaleX(0);
        -webkit-transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
    }
}


/*----------
loading
----------*/
.loading{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    overflow: hidden;
    background: var(--c-black);
}

.loading-wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(63vw);
    height: min(25vw);
}



@media screen and (min-width:769px){
    header{
        width: min(21rem);
        margin: 2rem 0 0 1rem;
    }

    .openBtn{
        width: min(11vw, 5rem);
        height: min(7vw, 3rem);
        top: 6%;
        right: 2%;
    }

    .deskTop-bg{
        position: fixed;
        background-color: var(--c-lBlue);
        background-image: url(img/cross-bg.svg);
        background-repeat: repeat;
        background-size: 2.5%;
        background-position: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 92%;
        height: 87%;
        border-radius: 4rem;
        overflow: hidden;
        z-index: -5;
    }

    .deskTop-bgImg{
        position: fixed;
        z-index: -3;
        width: 88%;
        left: -5%;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        opacity: 0;
        animation:fadeIn .5s forwards .6s cubic-bezier(.37,.49,.35,1.28);
    }

    .deskTop-bgImg img{
        width: 100%;
    }
}

@media screen and (min-width:1025px){
    .deskTop-bgImg{
        width: min(77%, 66vw);
    }

    .openBtn{
        display: none;
    }
}




/*----------*/
/* KV
/*----------*/
.KV{
    position: relative;
    margin: min(5vw) auto 2vw;
    z-index: 1;
    height: 132vw;
}

.KV-mainTitle{
    width: 69%;
    margin-bottom: -29%;
    position: absolute;
}

.KV-students{
    position: absolute
}

.KV-students.--students1{
    width: 88%;
    top: 42%;
    left: -12%;
}

.KV-students.--students2{
    width: min(75%);
    top: 7%;
    right: -13%;
    z-index: -1;
}

.KV-coImg{
    position: absolute;
}

.KV-coImg.--coImg1{
    top: 34%;
    left: 0;
    width: 30%;
}

.KV-coImg.--coImg2{
    top: 0%;
    right: 2%;
    width: 27%;
}

.KV-coImg.--coImg3{
    width: 28%;
    right: 2%;
    top: 57%;
    z-index: 2;
}

.KV-chara{
    z-index: 1;
    position: absolute;
    width: 38%;
    top: 32%;
    right: 17%;
}

.KV-bus{
    position: absolute;
    width: 30%;
    bottom: 4%;
    left: 4%;
}

.KV-bus img.bubble-img{
    width: 88%;
    margin-bottom: -23%;
    z-index: 0;
    position: relative;
}

.KV-deco{
    position: absolute;
    width: 8%;
}

.KV-deco.--star1{
    top: 29%;
    left: 4%;
}
.KV-deco.--star2{
    bottom: 17%;
    right: 4%;
    z-index: 2;
}
.KV-deco.--line{
    width: 27%;
    z-index: -1;
    top: 36%;
    right: 45%;
}
.KV-deco.--sakura{
    width: 43%;
    bottom: 0;
    left: 2%;
}
.KV-deco.--sakura2{
    z-index: -1;
    top: 20%;
    right: 2%;
}

picture.KV-subImg{
    border-radius: 50%;
    border: solid 4px var(--c-white);
    display: block;
    overflow: hidden;
}
picture.KV-subImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.KV-copy{
    position: absolute;
    width: 60%;
    bottom: 0;
    right: 2%;
}

.KV>.KV-bg{
    position: relative;
    width: 82%;
    aspect-ratio: 4 / 5;
    background-color: var(--c-lBlue);
    background-image: url(img/cross-bg.svg);
    background-repeat: repeat;
    background-size: 6%;
    border-radius: var(--b-radius);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -3;
}


@media screen and (min-width:769px){
    .KV{
        height: 8%;
        margin: min(5vw, 2rem) auto 2%;
    }

    .KV-students.--students1{
    }
}

@media screen and (min-width:1025px){
    .KV{
        height: min(68rem, 46vw);
    }
}

/*----------*/
/* schedule
/*----------*/
.schedule{
    margin-bottom: calc(var(--section-margin) * 1.5);
    z-index: 2;
    position: relative;
}

.schedule .contents-ttl .deco-img.--bear{
    width: 26%;
    right: -6%;
    bottom: 0;
}

.schedule-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(3rem, 6vw);
    width: min(92%, 38rem);
    margin: 0 auto var(--section-margin);
}

.schedule-list_item.fade-in2.is-active:nth-of-type(odd){
    transition-delay: .3s;
}
.schedule-list_item.fade-in2.is-active:nth-of-type(even){
    transition-delay: .5s;
}


/*----------*/
/* message
/*----------*/
.message .contents-ttl img.deco-img.--glue{
    bottom: 5%;
    width: 15%;
    right: 0;
}
.message .contents-ttl img.deco-img.--scissors{
    top: 17%;
    width: 13%;
    right: -7%;
}


/*-----message tab-----*/
nav.tabMenu{
    border-bottom: var(--border);
    padding-bottom: min(2rem,4vw);
}

nav.tabMenu.tabMenu-bottom{
    padding-top: min(8rem, 12vw);
}

.message-contents{
    position: relative;
    z-index: 1;
}

.message-contents nav.tabMenu ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    gap: min(1rem, 1vw);
}
.message-contents nav.tabMenu ul li:nth-of-type(1),
.message-contents nav.tabMenu ul li:nth-of-type(2),
.message-contents nav.tabMenu ul li:nth-of-type(3){
    width: calc((100% - calc(min(1rem, 1vw) * 2)) / 3);
}
.message-contents nav.tabMenu ul li:nth-of-type(4),
.message-contents nav.tabMenu ul li:nth-of-type(5){
    width: calc((100% - min(1rem, 1vw)) / 2);
}

nav.tabMenu button{
    width: 100%;
    border:var(--border);
    border-radius: var(--b-radius);
    color: var(--c-white);
    font-weight: 800;
    padding: 1rem;
    font-size: min(1.823rem, 3.64vw);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}
nav.tabMenu button:hover{
    transform: scale(.98);
}

nav.tabMenu button.--cyan{
    background: var(--c-cyan);
}
nav.tabMenu button.--coral{
    background: var(--c-coral);
}
nav.tabMenu button.--pink{
    background: #ffa0d4;
}
nav.tabMenu button.--green{
    background: var(--c-green);
}
nav.tabMenu button.--purple{
    background: var(--c-purple);
}

nav.tabMenu button.active{
    transform: scale(1.03);
}

nav.tabMenu button svg.svg-star{
    width: min(2.5rem, 7vw);
    transform: rotate(21deg);
    top: -12%;
    right: -6%;
    opacity: 0;
}

nav.tabMenu button.active svg.svg-star{
    opacity: 1;
}

.tabContents{
    display: none;
    background: var(--c-white);
    padding-top: min(2rem,4vw);
}
.tabContents.active {
    display: block;
}


/*-----message cont-----*/
.message .deco-img.--img_student{
    z-index: -1;
    width: 54%;
    top: -63%;
    left: -12%;
}
.message-ob{
    width: 96%;
    margin: 0 auto;
    border: var(--border);
    position: relative;
    overflow: hidden;
    background: var(--c-white);
    opacity: 0;
    z-index: 1;
}

.tabContents.active .message-ob{
    opacity: 1;
}

.message-ob>.message-pcTab{
    background: var(--c-green);
    display: flex;
    justify-content: end;
    align-items: center;
    padding: .5rem;
    gap: .5rem;
    border-bottom: var(--border);
}

.--cyan .message-ob>.message-pcTab{
    background: var(--c-cyan);
}
.--coral .message-ob>.message-pcTab{
    background: var(--c-coral);
}
.--pink .message-ob>.message-pcTab{
    background: #ffa0d4;
}
.--purple .message-ob>.message-pcTab{
    background: var(--c-purple);
}

.message-pcTab img{
    display: block;
}

.message-ob>.message-pcTab span.tabs{
    display: flex;
    gap: .2rem;
    width: 12%;
}

.message-ob>.message-pcTab span.delate{
    display: block;
    width: 3rem;
}

picture.clipPath-img{
    display: block;
    overflow: hidden;
}
 picture.clipPath-img img{
    image-rendering: -webkit-optimize-contrast;
 }

.message-ob_prof{
    padding: min(4vw, 2rem);
    display: flex;
    gap: min(2vw, 2rem);
    align-items: center;
    justify-content: center;
}

.message-ob_prof>._prof__name{
    width: calc(100% - 40%);
}

.message-ob_prof>._prof__name p._prof__namePositon{
    font-size: min(3.24vw, 2.24rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    padding-bottom: .5rem;
}
p._prof__namePositon small{
    color: #666666;
    display: block;
    letter-spacing: 0;
    padding-bottom: .3rem;
}

.message-ob_prof>._prof__name p.name{
    color: var(--c-blue);
    font-size: min(5vw, 2.6rem);
    font-weight: 800;
    text-align: right;
}

.message-ob_prof>._prof__img{
    width: 40%;
}

.message-ob_bubble{
    width: 87%;
    margin: -9% auto 0;
}

.message-ob_graph{
    padding: min(4vw, 2rem);
    text-align: center;
}

.message-ob_graphTtl{
    text-align: center;
    color: var(--c-blue);
    border-bottom: var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.message-ob_graphTtl h3{
    font-weight: 800;
    font-size: min(7vw, 3.4rem);
    line-height: 1.5;
}

.graphTtl-bubble{
    display: block;
    width: 54%;
    margin: 0 18% 0; 
}

.message-ob_graphImg{
    width: 92%;
    margin: 1rem auto 0; 
}



/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
    position: relative;
    height: auto;
    overflow: hidden;
    background: url(img/sakura-bg.svg) repeat top;
    background-size: 80%;
}

/* 桜の花びらのスタイル
.petal {
  position: absolute;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
  z-index: -1;
}
.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
  }
} */



/*-----voice-----*/
.message-details_contents{
    margin-top:calc(var(--section-margin) / 1);
    position: relative;
}

.message-details_contents.--voice .contents-ttl .deco-img.--crayon{
    width: 20%;
    top: 44%;
    left: -7%;
}

.message-details_contents.--voice .contents-ttl .deco-img.--img_student2{
    width: 37%;
    z-index: -2;
    top: -50%;
    right: -19%;
}

.message-details_contents.--voice .contents-ttl .deco-img.--img_student1{
    width: 35%;
    z-index: -2;
    top: -43%;
    left: -19%;
}

.video-container.video-shorts{
    aspect-ratio: 9 / 15;
    transition: var(--transition);
}
.video-container.video-shorts:hover{
    transform: scale(.95);
}

.slider.--voice_slider{
    margin-top: 1rem;
}

body .slider .swiper-slide {
  transition: transform .4s ease, opacity .4s ease;
  transform: scale(0.85);
  opacity: 0.85;
}

body .slider .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}


/*-----program-----*/

.message-details_contents.--program .contents-ttl .deco-img.--lapTop{
    z-index: 1;
    width: 21%;
    top: 44%;
    right: -7%;
}

.message-details_contents.--program .contents-ttl .deco-img.--img_student2{
    width: 35%;
    z-index: -2;
    top: -43%;
    left: -19%;
}

.--program .--program_contents{
    position: relative;
    width: 90%;
    margin: 0 auto -5%;
    z-index: 1;
}

h4.programTtl{
    color: var(--c-white);
    font-size: var(--font-224rem);
    border: var(--border);
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    line-height: 1.2;
    width: 67%;
    z-index: 1;
    position: relative;
}

.tabContents.--green h4.programTtl{
    background: var(--c-green);
}
.tabContents.--coral h4.programTtl{
    background: var(--c-coral);
}
.tabContents.--cyan h4.programTtl{
    background: var(--c-cyan);
}
.tabContents.--pink h4.programTtl{
    background: #ffa0d4;
}
.tabContents.--purple h4.programTtl{
    background: var(--c-purple);
}

.--program_contents:nth-of-type(even) h4.programTtl{
    margin-left: -7%;
    margin-bottom: -4%;
    border-radius: 0 9999px 9999px 0;
    justify-content: end;
}
.--program_contents:nth-of-type(odd) h4.programTtl{
    margin: 0 -7% -3% auto;
    border-radius: 9999px 0 0 9999px;
    justify-content: flex-start;
}

/*h4.programTtl.fade-in2{
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0); 
}
h4.programTtl.fade-in2.is-active{
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    transition: .8s ease-in-out 0s;
}*/

.--program_contents__main{
    position: relative;
    margin-bottom: min(5vw, 1rem);
}
.--program_contents__main .txtImg{
    position: absolute;
    width: 100%;
}
.--program_contents__main .txtImg img{
    display: block;
    height: min(17vw, 13rem);
}

.--program_contents:nth-of-type(even) .--program_contents__main .txtImg{
    bottom: -16%;
    right: 0;
}
.--program_contents:nth-of-type(even) .txtImg img{
    margin: 0 0 0 auto;
}

.--program_contents:nth-of-type(odd) .--program_contents__main .txtImg{
    bottom: -16%;
    left: 0;
}

picture.clipPath-img.--img_main{
    width: 94%;
    margin: 0 auto; 
}

picture.clipPath-img.--img_sub{
    width: 38%;
}

.--program_contents:nth-of-type(odd) picture.clipPath-img.--img_sub{
    margin: 0 0 0 auto;
}

.deco-img.--img_starSolo{
    width: 7%;
}
.deco-img.--img_starSolo.--img_star1{
    top: 60%;
    left: 0;
}

.deco-img.--img_starDouble{
    width: min(40%);
}
.deco-img.--img_starDouble.--img_star2{
    right: 5%;
    bottom: 8%;
}

.deco-img.--img_starSolo.--img_star3{
    right: 0;
    top: 60%;
}
.deco-img.--img_starDouble.--img_star4{
    left: 9%;
    top: 76%;
}
.deco-img.--img_starSolo.--img_star5{
    right: 0;
    top: 60%;
}
.deco-img.--img_starSolo.--img_star6{
    right: 37%;
    top: 93%;
}


/*--other--*/
.message .deco-img.--img_student3{
    width: min(55%, 49vw);
    bottom: -41vw;
    left: 3%;
}

@media screen and (min-width:769px){
  /*--message--*/ 
  .message .deco-img.--img_student{
    width: min(52%, 21rem);
    top: -16rem;
    left: -7rem;
  }

  .cherry-blossom-container{
    background-size: 90%;
  }

  /*-----message cont-----*/
  .message-ob_prof>._prof__name p._prof__namePositon{
        font-size: min(3.24vw, 1.5rem);
  }
  .message-ob_prof>._prof__name p.name{
        font-size: min(5vw, 2rem);
  }

  .message-ob_prof>._prof__img{
    width: 45%;
  }
  .message-ob_prof>._prof__name{
    width: calc(100% - 45%);
  }

  /*-----message tab-----*/
  nav.tabMenu button{
    padding: min(1rem, 1vw);
    font-size: min(1.823rem, 1.4vw);
  }

  .message-contents nav.tabMenu ul{
    gap: min(1rem, .5vw);
  }

  /*-----program-----*/
  .message-details_contents.--program .contents-ttl .deco-img.--img_student2{
    top: -35%;
    left: -23%;
    width: 34%;
  }

  .--program_contents__main .txtImg img{
    height: min(8vw, 8rem);
  }

  /*--other--*/
  .message .deco-img.--img_student3{
    width: 51%;
    bottom: -10%;
    left: 3%;
  }
}

@media screen and (min-width:1025px){
  /*-----program-----*/
  .--program_contents__main .txtImg img{
    height: min(6vw, 8rem);
  }
}


/*----------*/
/* movie
/*----------*/
.movie{
    margin-top: calc(var(--section-margin) * 2);
    margin-bottom: min(18vw, 12rem);
}

.movie .contents-ttl{
    width: 100%;
}


@media screen and (min-width:769px){
    .movie{
        margin-bottom: min(18vw, 6rem);
    }
}

/*----------*/
/* access
/*----------*/
.access{
    margin-bottom: var(--section-margin);
}

.access .contents-ttl img.deco-img.--document{
    z-index: 1;
    width: 22%;
    top: -5%;
    left: -3%;
}

.access .contents-ttl img.deco-img.--bag{
    z-index: 1;
    width: 21%;
    top: 44%;
    left: -7%;
}

.access-busDetails{
    margin-top: calc(var(--section-margin) / 2);
    position: relative;
}


.access-busDetails_busImg{
    position: relative;
    z-index: 1;
}
.access-busDetails_busImg::before{
    position: absolute;
    content: "";
    background: var(--c-blue);
    width: 100%;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.access-busDetails_busImg picture{
    display: block;
    overflow: hidden;
    border: solid 3px var(--c-blue);
    border-radius: var(--b-radius);
    width: min(47vw, 54%);
    margin: 0 auto;
    aspect-ratio: 5 / 4;
}

.access-busDetails_busImg picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.scroll-imageInR{
    -webkit-clip-path: inset(0 50% 0 50%);
    clip-path: inset(0 50% 0 50%);
}
.scroll-imageInR.is-active{
    -webkit-clip-path: inset(0 0% 0 0%);
    clip-path: inset(0 0% 0 0%);
    transition: 1s ease;
}

.access-busDetails_wrapper{
    text-align: center;
    margin-top: min(3vw, 1.5rem);
}
.access-busDetails_wrapper h3{
    color: var(--c-blue);
    font-size: var(--font-224rem);
    text-align: center;
    font-weight: 900;
}

ul.access-busDetails_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: min(3vw, 1.5rem) 0;
}
ul.access-busDetails_list li{
    background: var(--c-yellow);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: min(2vw, 1.3rem) min(1vw, .5rem);
}

ul.access-busDetails_list li p small{
    color: var(--c-blue);
    font-weight: 500;
    display: block;
    letter-spacing: 0;
    line-height: 1.3;
    font-size: min(2.24vw, 1.14rem);
}

span.busIcon{
    width: min(9vw, 4rem);
    margin-right: 4%;
}

.access-busDetails_wrapper a.linkBtn{
    margin: min(7vw, 3rem) auto 0;
}

p.stationName{
    font-weight: 900;
    font-size: var(--font-183rem);
}

.access .deco-img.--img_student5{
    width: min(37%);
    right: -8%;
    top: -7%;   
}


/*-----time table-----*/
.access-busDetails_timeTable{
    margin-top: calc(var(--section-margin) / 2);
}

.access-busDetails_timeTable ul{
    border: var(--border);
    padding: 1.2rem;
    cursor: pointer;
}

.access-busDetails_timeTable .title{
    position: relative;
    text-align: left;
}
.access-busDetails_timeTable .title::before,
.access-busDetails_timeTable .title::after{
    position: absolute;
    content: "";
    background: var(--c-blue);
    width: 2rem;
    height: .2rem;
    right: 0;
    top: 50%;
    transition: var(--transition);
}

.access-busDetails_timeTable .title::after{
    transform: rotate(90deg);
}
.access-busDetails_timeTable .title.close::after{
    transform: rotate(0deg);   
}

.access-busDetails_timeTable .title h4{
    color: var(--c-blue);
    font-size: var(--font-183rem);
}

.access-busDetails_timeTable .box{
    padding-top: min(4vw, 2rem);
}

.timeTable-details{
    text-align: left;
    padding-bottom: min(6vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: min(2vw, 1rem)
}
.timeTable-details:last-of-type{
    padding-bottom: 0;
}

.timeTable-details p.day{
    font-weight: 700;
    font-size: var(--font-183rem);
    background: var(--c-yellow);
    border-radius: 1rem;
    padding: .5rem 1rem;
    line-height: 1.5;
}

.timeTable-details_inner dl{
    display: flex;
    justify-content: space-between;
    border: solid 1px var(--c-blue);
}

.timeTable-details_inner dl dt{
    width: calc(100% - 10rem);
    padding: min(1rem, 2vw);
    background: var(--c-cyan);
    color: var(--c-white);
    line-height: 1.5;
    font-size: min(1.5rem, 3.64vw);
}
.timeTable-details_inner dl dd{
    width: 10rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timeTable-details_inner p.tt-ttl{
    color: var(--c-blue);
    font-weight: 600;
    font-size: min(4vw, 1.7rem);
}

@media screen and (min-width:769px){
    /*----------*/
    /* access
    /*----------*/
    .access .deco-img.--img_student5{
        width: min(35%);
        right: -6%;
        top: -5%; 
    }
}


/*----------*/
/* banner
/*----------*/
.bannerContents{
    margin-bottom: var(--section-margin);
}

.bannerContents-list{
    margin: 0 auto;
}
.bannerContents-list a:hover{
    opacity: .6;
}

/*----------*/
/* snsAccount
/*----------*/
.snsAccount .contents-ttl .snsAccount-illust{
    position: absolute;
    width: 26%;
    top: 34%;
    left: -11%;
    transform: translateY(-50%);
}

.snsAccount-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.snsAccount-list a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    height: min(55vw, 26rem);
    text-align: center;
    padding: min(2vw, 2rem);
    border-radius: 1rem;
    gap: min(7vw, 3rem);
}
.snsAccount-list a:hover{
    transform: scale(.95);
}

.snsAccount-list a.line{
    background: var(--c-green);
}
.snsAccount-list a.line:hover{
    background: #9dd9a4;
}

.snsAccount-list a.insta{
    background: #e47dd3;
}
.snsAccount-list a.insta:hover{
    background: #e49bd8;
}

.snsAccount-list a p{
    letter-spacing: 0;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.snsAccount-list .fade-in2.is-active:nth-of-type(1){
    transition-delay: .2s;
}
.snsAccount-list .fade-in2.is-active:nth-of-type(2){
    transition-delay: .4s;
}

p.exTtl{
    font-weight: 800;
}

p.exTxt{
    font-size: min(3.4vw, 1.4rem);
}

.snsAccount-img{
    width: 42%;
}

/* スマホのみ：SNSバナー内の文字はみ出し調整 */
@media screen and (max-width: 768px) {

    .snsAccount-list a {
        gap: min(3vw, 1.2rem);
    }

    .snsAccount-list a p {
        height: auto;
        min-height: 0;
        display: block;
        line-height: 1.35;
        margin: 0;
    }

    .snsAccount-list .exTtl {
        line-height: 1.25;
    }

    .snsAccount-list .exTxt {
        font-size: min(3.1vw, 1.3rem);
        line-height: 1.4;
    }
}

@media screen and (min-width:769px){
    #js-top{
        width: min(612px, 100%);
    }

    .contents{
        margin: 0 4%;
    }

    /*----------*/
    /* Gnav
    /*----------*/

    /*----------*/
    /* Loading
    /*----------*/
    .loading-wrapper{
        width: min(43rem, 42vw);
        height: min(19rem, 19vw);
    }

    .loading-cheers{
        width: min(20rem, 20vw);
    }

    /*--title--*/
    .contents-ttl{
        text-align: center;
        width: min(72%, 35rem);
    }

}


@media screen and (min-width:1025px){
    #js-top{
        width: var(--cha-contents-width);
    }

    .fixedInformation a:hover img,
    .openBtn:hover,
    .fixedLogo a:hover{
        transform: scale(1.06);
    }

    .fixedLogo{
        width: min(170px, 34vw);
    }
}

/*----------*/
/* side content
/*----------*/
.fixed{
    position: fixed;
}

.pcMainImage{
    position: relative;
}

.site-sideLeft{
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    z-index: 1;
    display: none;
    transition: var(--transition);
}

.site-sideRight{
    top: 0;
    overflow: hidden;
    z-index: 1;
    display: none;
    transition: var(--transition);
}

.is-loadActive .site-sideLeft,.is-loadActive .site-sideRight{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: opacity .4s .85s ease, transform .4s .85s ease;
    -webkit-transition: opacity .4s .85s ease, transform .4s .85s ease;
}

.contentsMenu li a.contentsMenu-item{
    color: var(--c-blue);
    border-radius: 9999px;
    border: solid min(3px, .6vw) var(--c-blue);
    background: var(--c-white);
    display: block;
    font-weight: 600;
    font-size: min(2rem, 1.5vw);
    padding: .2rem;
}

a.contentsMenu-item::before,
a.contentsMenu-item::after{
    position: absolute;
    content: "";
    border-radius: 50%;
    width: min(2.5rem, 1.6vw);
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1 / 1;
}

a.contentsMenu-item::before{
    left: 2%;
}

a.contentsMenu-item::after{
    right: 2%;
}

a.contentsMenu-item.--cyan::before,
a.contentsMenu-item.--cyan::after{
    background: var(--c-cyan);
}

a.contentsMenu-item.--coral::before,
a.contentsMenu-item.--coral::after{
    background: var(--c-coral);
}

a.contentsMenu-item.--green::before,
a.contentsMenu-item.--green::after{
    background: var(--c-green);
}

a.contentsMenu-item.--pink::before,
a.contentsMenu-item.--pink::after{
    background: var(--c-pink);
}

a.contentsMenu-item.--purple::before,
a.contentsMenu-item.--purple::after{
    background: var(--c-purple);
}

.contentsMenu li a.contentsMenu-item.--document{
    background: var(--c-blue);
    color: var(--c-white);
}

.contentsMenu li a:hover{
    transform:scale(.95);
}

/*------right----*/
.site-sideRight .deco-img{
    z-index: -1;
}

.site-sideRight_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.site-sideRight_menu{
    width: min(28rem, 80%);
    margin: 0 auto;
}

@media screen and (min-width:769px){
    .site-main{
        border: var(--border);
        width: min(420px, 100%);
        margin-left: min(5rem);
        border-radius: 1.5rem;
        margin: 3rem 0;
        position: relative;
        opacity: 0;
        animation: fadeIn .4s forwards .6s cubic-bezier(.37,.49,.35,1.28);
    }
    .site-main::before{
        position: absolute;
        content: "";
    }


    /*------left----*/
    .site-sideLeft{
        opacity: 0;
        animation: fadeInBottom .4s forwards .5s cubic-bezier(.37,.49,.35,1.28);
        transform: translateY(6%);
    }

    @keyframes fadeInBottom {
        0%{
            opacity: 0;
            transform: translateY(6%);
        }
        100%{
            opacity: 1;
            transform: translateY(0%);
        }
    }

    .site-sideLeft_wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .site-sideLeft_main{
        position: relative;
        width: min(50rem, 70%);
    }

    .site-sideLeft_main img.sideLeft-human1{
        width: 91%;
        top: -36%;
        right: -22%;
    }

    .site-sideLeft_main img.sideLeft-human2{
        width: 74%;
        bottom: -29%;
        left: -25%;
    }

    a.deskTop-appLink{
        display: block;
    }
    a.deskTop-appLink:hover{
        transform: scale(.9);
    }

    .site-sideLeft .deco-img{
        z-index: -1;
    }

    .deco-img.site-sideLeft_ill1{
        width: min(22rem, 35%);
        top: min(2rem, 1vw);
        left: min(3rem, 2vw);
    }

    .deco-img.site-sideLeft_ill2{
        width: 17rem;
        top: 2%;
        right: 2%; 
    }

    .deco-img.site-sideLeft_ill3{
        width: 19vw;
        bottom: 3%;
        left: 4%;
    }

    .deco-img.site-sideLeft_ill4{
        width: min(20rem, 20vw);
        bottom: 2%;
        right: 5%;
    }

    .deco-img.site-sideLeft_ill5{
        width: min(10vw);
        bottom: 9%;
        right: 33%;
        z-index: -2;
    }

    .site-sideLeft .deco-img.--star1{
        width: 8%;
        bottom: 14%;
        left: 32%;
    }

    .site-sideLeft .deco-img.--star2{
        width: 8%;
        top: 3%;
        right: 4%;
        z-index: -2;
    }

    .site-sideLeft .deco-img.--line1{
        width: 15vw;
        left: -4%;
        bottom: 32%;
        z-index: -2;
    }

    .site-sideLeft .deco-img.--line2{
        width: 13vw;
        right: -2%;
        top: 18%;
        z-index: -2;
    }

    .site-sideLeft .deco-img.--sakura1{
        width: 4vw;
        bottom: 8%;
        left: 42%;
        transform: rotate(20deg);
    }

    .site-sideLeft .deco-img.--sakura2{
        width: 5rem;
        bottom: 3%;
        left: 3%;
        transform: rotate(-52deg);
    }

    .site-sideLeft .deco-img.--sakura2 svg{
        transform: scale(1, -1);
        display: block;
    }

    .site-sideLeft .deco-img.--sakura3{
        width: min(5rem);
        bottom: 17%;
        right: 25%;
    }

    .site-sideLeft{
        width: calc(100% - min(420px, 100%));
        display: block;
    }

    /*------right----*/
    .site-sideRight{
        opacity: 0;
        animation: fadeInBottom .4s forwards .6s cubic-bezier(.37,.49,.35,1.28);
        transform: translateY(6%);
    }

    .site-sideRight_menu{
        position: relative;
    }

    .site-sideRight_menu ul{
        display: flex;
        flex-direction: column;
        gap: min(2rem,1.4vw);
        text-align: center;
    }

    .site-sideRight_menu .deco-img.--student{
        width: min(57%, 14vw);
        top: -36%;
        right: -24%
    }

    #js-fixedIcon.fixedIcon{
        width: calc(min(420px, 100%) - 9%);
    }

    .fixedIcon{
        left: min(7rem);
    }
}

@media screen and (min-width:1025px){
    .site-main{
        z-index: 2;
        position: relative;
        width: var(--cha-contents-width);
        margin-left: 0;
    }

    .site-sideRight {
        order: 3;
        width: min(42rem, 25vw);
        display: block;
        position: sticky;
        height: 100vh;
    }

    /*------left----*/
    .site-sideLeft{
        width: calc((100% - var(--cha-contents-width)) - min(42rem, 25vw));
        display: block;
    }

    .deco-img.site-sideLeft_ill1{

    }

    .deco-img.site-sideLeft_ill2{
        width: min(17rem, 10vw);
        top: 2%;
        right: 2%;  
    }

    .deco-img.site-sideLeft_ill3{
        width: min(25rem, 13vw);  
    }

    .deco-img.site-sideLeft_ill4{
        width: min(20rem, 13vw);
        bottom: 2%;
        right: 13%;
    }

    .deco-img.site-sideLeft_ill5{
        width: min(8vw, 10rem);
        bottom: 10%;
        right: 32%;
    }

    .site-sideLeft .deco-img.--star1{
        width: min(5rem, 4vw);
        left: min(39%, 15vw);
    }

    .site-sideLeft .deco-img.--line1{
        width: min(24rem, 13vw); 
    }

    .site-sideLeft .deco-img.--line2{
        width: min(18rem, 9vw);
    }

    .site-sideLeft .deco-img.--sakura1{
        width: min(4rem, 2.5vw);
    }

    .site-sideLeft .deco-img.--sakura2{
        width: min(4rem, 3vw);
    }

    .site-sideLeft .deco-img.--sakura3{
        width: min(4rem, 3vw);
    }

    #js-fixedIcon.fixedIcon{
        width: calc(var(--cha-contents-width) - 3%);
    }

    .fixedIcon{
        transform: translateX(-50%);
        left: 50%;
        bottom: min(2rem);
    }
}

/*----------*/
/* main contents
/*----------*/
/*-- road bg --*/
.roadBg-main{
    position: relative;
    margin-top: max(-140px, -60%);
}
.roadBg-main::before{
    position: absolute;
    content: "";
    background: url(img/index-bg.png) no-repeat top;
    background-size: 100%;
    width: 100%;
    height: 100%;
}

@media screen and (min-width:1025px){
    /*----------*/
    /* main contents
    /*----------*/
    /*-- road bg --*/
}


/*----------*/
/* Instagram
/*----------*/
.instagram{
    background: var(--c-yellow);
    padding: calc(var(--section-margin) / 2) 0;
}

.instagram .contentsTitle-border{
    margin-bottom: min(4rem, 4vw);
}

.instagram-contents{
    margin-bottom:min(2rem,4vw);
}

@media screen and (min-width:769px){
/*----------*/
/* How to enjoy
/*----------*/
}


/*----------*/
/* FAQ
/*----------*/


/*--accordion--*/
div.box{
    display: none;
}

@media screen and (min-width:769px){
}

/*----------
 footer
----------*/
footer{
    text-align: center;
    position: relative;
    padding: min(12vw, 2rem) 0;
    z-index: 1;
}

small.copyright{
    text-align: center;
    display: block;
    font-size: min(1.24rem, 2.4vw);
    font-weight: 400;
}

/*--------------*/
/*レスポンシブ基本CSS
/*--------------*/
.pcheader{
    display:block;
}

.pc{
    display:none;
}

.mobile{
    display: none!important;
}


@media screen and (min-width:769px){
    body{
        font-size: min(1.6rem,3.83vw);
    }

    main.main-wrapper{
        display: flex;
    }

    /*--------------*/
    /*g nav
    /*--------------*/
    .g-nav{
        width: min(420px, 100%);
        top: 0;
        height: 100svh;
    }

    .fixedLogo{
        width: min(180px, 44vw);
    }
    .fixedLogo:hover{
        transform: scale(1.05);
    }

    li.-nav_menuItem a:hover{
        transform: scale(1.05);
    }

    small.copyright{
        font-size: min(1.24rem, 1vw);
    }

}

@media screen and (min-width:1025px){
    .g-nav{
        width: var(--cha-contents-width);
        display: none;
    }

    .footer-information a:hover{
        opacity: 0.6;
    }

}

/* スマホ用追従バナー */
.fixed-sp-banner{
    display:none;
}

@media screen and (max-width:768px){

    .fixed-sp-banner{
        display:block;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9999;
        line-height:0;
    }

    .fixed-sp-banner img{
        display:block;
        width:100%;
        height:auto;
    }

    /* バナー分だけ下に余白 */
    body{
        padding-bottom:calc(70px + env(safe-area-inset-bottom));
    }
}