html {

    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}
img {
    width: 100%;
}

.section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/*KV*/
#indexTop h1 {
    margin: 0;
    padding: 0;
}

#indexTop .kv {
    padding-bottom: 5.8125rem;
    background-image: url(../img/kv-bg-img01.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
#indexTop .kv .kvWrap {
    margin: auto;
    max-width: 1104px;
    width: 100%;
}
#indexTop .kv .kv-img01 {
    margin: auto;
    width: 100%;
    max-width: 1080px;
    padding-top: 5.3125rem;
}
#indexTop .kv .kv-img01 img {
    box-shadow: 5px 5px 35px #808080;
}
#indexTop .kv .kv-img01-logo {
    width: 100%;
    max-width: 100px;
    position: absolute;
    top: 50px;
    left: 5%;
    transform: translate(-50%, -50%);
}
#indexTop .kv .kv-img01-logo a {
    display: block;
}

#indexTop .kv .kv-anker {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 2.1875rem auto 0;
    width: 100%;
    max-width: 1080px;
}
#indexTop .kv .kv-anker a {
    font-size: 1.625rem;
    padding: 1.438rem 0;
    line-height: 1;
    display: block;
    text-decoration: none;
    max-width: 247px;
    width: 100%;
    border: solid 4px #EC6D65;
    color: #6C471C;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
}
#indexTop .kv .kv-img02 {
    margin: 0.8125rem auto 0;
    width: 100%;
    max-width: 1054px;
}
#indexTop .kv .kv-img03 {
    margin: 0.8875rem auto 0;
    width: 100%;
    max-width: 400px;
}
#indexTop .kv .kv-img03 a {
    display: block;
}
#indexTop .kv .kv-img03 span {
    margin-top: 0.93rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1;
    color: #6C471C;
}
#indexTop .kv .kv-img04 {
    margin: 0.8875rem auto 0;
    width: 100%;
    max-width: 1104px;
}

@media all and (min-width: 768px) and (max-width: 1100px) {
    #indexTop .kv .kv-img01 {
        max-width: 93%;
        padding-top: 8%;
    }
    #indexTop .kv .kv-img01-logo {
        max-width: 7.183%;
        top: 3.3%;
        left: 6%;
    }
    #indexTop .kv .kv-anker {
        margin: 2% auto 0;
        max-width: 93%;
    }
    #indexTop .kv .kv-anker a {
        font-size: 2.24vw;
        padding: 2.5% 0;
        max-width: 22.3%;
        border: solid 2px #EC6D65;
        border-radius: 11px;
    }
    #indexTop .kv .kv-img02 {
        margin: 2% auto 0;
        max-width: 90.8%;
    }
    #indexTop .kv .kv-img03 {
        margin: 0.5% auto 0;
        max-width: 34.4%;
    }
    #indexTop .kv .kv-img03 span {
        margin-top: 2%;
        font-size: 1.46vw;
        display: block;
    }
    #indexTop .kv .kv-img04 {
        margin: 2% auto 0;
        max-width: 95%;
    }
    #indexTop .kv {
        padding-bottom: 4%;
    }
}

@media all and (max-width: 767px) {
    #indexTop .kv .kv-anker {
        margin: 2% auto 0;
        width: 92.934%;
    }
    #indexTop .kv .kv-anker a {
        margin-top: 1.87%;
        padding: 3.5% 0;
        font-size: 3.46666vw;
        max-width: 46.92717%;
        border: solid 2px #EC6D65;
        border-radius: 10px;
    }
    #indexTop .kv .kv-img03 span {
        font-size: 3.2vw;
        display: block;
        margin-top: 3%;
    }
    #indexTop .kv {
        padding-bottom: 21%;
        background-image: url(../img/kv-bg-img01-sp.png);
        position: relative;
        z-index: 4;
    }
    #indexTop .kv .kvWrap {
        max-width: 100%;
        margin: 0 auto;
        padding-top: 124%;
    }
    #indexTop .kv .kv-img02 {
        margin: 3.86% auto 0;
        max-width: 74.93345%;
    }
    #indexTop .kv .kv-img03 {
        margin: 2.934% auto 0;
        max-width: 65.29%;
        text-align: center;
    }
    #indexTop .kv .kv-img04 {
        margin: 3.467% auto 0;
        max-width: 74.267%;
    }
    #indexTop .kv .kv-img01 {
        max-width: 100%;
        padding-top: 0;
    }
    #indexTop .kv .kv-img01-logo {
        max-width: 13.334%;
        top: 2.25%;
        left: 9%;
    }
    #indexTop .kv .kv-img01 .site-title img {
        display: none;
    }
}


/*program*/
#indexTop .program {
    margin-top: -.2rem;
    padding-top: 5.625rem;
    padding-bottom: 10rem;
    /*background-image: url(../img/program-bg-img01.png);*/
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;

    position: relative;
    z-index: 3;
}
#indexTop .program .program-img01 {
    margin: auto;
    width: 100%;
    max-width: 399px;
}
#indexTop .program .program-img02 {
    margin: 0.95rem calc(50% - 540px) 0;
    width: 100%;
    max-width: 1013px;
}
#indexTop .program .program-img03 {
    margin: -1rem auto 1.644rem;
    width: 100%;
    max-width: 772px;
}
#indexTop .program .program-img04,
#indexTop .program .program-img04-phase01{
    margin: 5.125rem auto 0;
    width: 100%;
    max-width: 600px;
}
#indexTop .program .program-img04-phase01{
    margin: 2.5rem auto 0;
}
#indexTop .program .youtubeArea {
    margin: auto;
    max-width: 800px;
    width: 100%;
}
#indexTop .program .youtubeArea iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#indexTop .program .youtubeArea .youtube {
    position: relative;
    margin: auto;
    width: 100%;
    padding-bottom: 56.49%;
    z-index: 1;
}

#indexTop .programTxt {
    margin-top: 3rem;
    font-size: 1.625rem;
    line-height: 2;
    text-align: center;
    color: #fff;
    letter-spacing: 0.085rem;
}
#indexTop .programTxt-deco {
    display: inline-block;
    color: #FFFF00;
    font-weight: bold;
    background-image: linear-gradient(to right, #F06D64, #F06D64 4px, transparent 4px, transparent 8px);
    background-size: 11px 4px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

@media all and (min-width: 768px) and (max-width: 1100px) {
    #indexTop .program .program-img01 {
        max-width: 34.4%;
    }
    #indexTop .program .program-img02 {
        margin: -2% 6% 0;
        width: 100%;
        max-width: 87%;
    }
    #indexTop .program .program-img03 {
        margin: -1% auto 1%;
        max-width: 66.5%;
    }
    #indexTop .program .youtubeArea {
        max-width: 68%;
    }
    #indexTop .program .youtubeArea .youtube {
        padding-bottom: 56.49%;
    }
    #indexTop .program .program-img04,
    #indexTop .program .program-img04-phase01{
        margin: 4.5% auto 0;
        max-width: 51.5%;
    }
    #indexTop .program .program-img04-phase01{
        margin: 2.25% auto 0;
    }
    #indexTop .programTxt {
        margin-top: 3%;
        font-size: 2.25vw;
        letter-spacing: .15vw;

    }
    #indexTop .program {
        background-position: bottom;
        padding-top: 6%;
        padding-bottom: 17%;
    }
}

@media all and (max-width: 767px) {
    #indexTop .program .youtubeArea {
        max-width: 100%;
    }
    #indexTop .program .youtubeArea .youtube {
        position: relative;
        margin: auto;
        width: 92%;
        padding-bottom: 51.49%;
        z-index: 1;
    }
    #indexTop .program {
        margin-top: -8%;
        padding-top: 11.3%;
        padding-bottom: 25%;
        /*background-image: url(../img/program-bg-img01-sp.png);*/
        position: relative;
        z-index: 3;
    }
    #indexTop .program .program-img01 {
        max-width: 53.2%;
    }
    #indexTop .program .program-img02 {
        margin: 3% auto 0;
        max-width: 92.534%;
    }
    #indexTop .program .program-img03 {
        margin: 1.5% auto 3.5%;
        max-width: 92%;
    }
    #indexTop .program .program-img04,
    #indexTop .program .program-img04-phase01{
        margin: 12.5% auto 0;
        max-width: 80%;
    }
    #indexTop .program .program-img04-phase01{
        margin: 6% auto 0;
    }
    #indexTop .programTxt {
        margin: 4% auto 0;
        font-size: 3.73333vw;
        width: 92%;
        letter-spacing: 0;
    }
    #indexTop .programTxt-deco {
        background-image: linear-gradient(to right, #F06D64, #F06D64 2px, transparent 2px, transparent 2px);
        background-size: 5px 2px;
    }
}


/*character*/
#indexTop .character {
    margin-top: -1.5rem;
    padding-top: 8.4rem;
    padding-bottom: 6.9rem;
    /*background-image: url(../img/character-bg-img01.png);*/
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    position: relative;
    z-index: 2;
}
#indexTop .character-img01 {
    margin: 0 calc(50% - 240px);
    width: 100%;
    max-width: 582px;  
}
#indexTop .character-txt01 {
    margin: 1.6875rem auto 0;
    font-size: 1.625rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.085rem;
}
#indexTop .character-container {
    margin: auto;
    width: 100%;
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#indexTop .character-container02 {
    margin: auto;
    max-width: 700px;
    width: 100%;
}
#indexTop .character-container .character-item {
    margin: 2.5rem 0 0;
    width: 100%;
    max-width: 320px;
}
#indexTop .character-container .character-item .character-item-name {
    margin: 1.2rem auto 0;
    width: 100%;
    max-width: 92px;
}
#indexTop .character-container .character-item02 .character-item-name {
    max-width: 185px;
}
#indexTop .character-container .character-item03 .character-item-name {
    max-width: 218px;
}
#indexTop .character-container .character-item04 .character-item-name {
    max-width: 320px;
}
#indexTop .character-container .character-item05 .character-item-name {
    max-width: 169px;
}
#indexTop .character-container .character-item .character-item-txt {
    color: #fff;
    margin: 0;
    font-size: 1.38rem;
    line-height: 1.666;
    text-align: left;
    letter-spacing: 0.085rem;
    margin-top: 0.5rem;
}
#indexTop .character-container .character-item04 .character-item-txt {
    margin-top: .63rem;
}



/*messag*/
#indexTop .message {
    /*background-image: url(../img/message-bg-img01.png);*/
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
    padding: 9.7rem 0;
    margin-top: -1.5rem;
    position: relative;
    z-index: 1;
}
#indexTop .messageWrap {
    margin: 5.4rem auto 0;
    padding: 3.75rem 0 3.1rem;
    max-width: 1080px;
    border-radius: 60px;
    width: 100%;
    background-color: #fff;
    color: #6C471C;
    letter-spacing: 0.085rem;
    text-align: center;
}
#indexTop .messageTxt {
    margin: 2rem 0 0;
    font-size: 1.25rem;
    line-height: 2;
}
#indexTop .message-deco {
    display: inline-block;
    font-size: 2.25rem;
    font-weight: bold;
}
#indexTop .message-img01 {
    margin: auto;
    width: 100%;
    max-width: 664px;
}
@media all and (min-width: 768px) and (max-width: 1100px) {
    #indexTop .character {
        margin-top: -3%;
        padding-top: 11%;
        padding-bottom: 10%;
        background-position: bottom;
    }
    #indexTop .character-img01 {
        margin: 0 30%;
        max-width: 50%;
    }
    #indexTop .character-txt01 {
        margin: 2% auto 0;
        font-size: 2.25vw;
        letter-spacing: .05vw;
    }
    #indexTop .character-container {
        max-width: 93%;
    }
    #indexTop .character-container .character-item {
        margin: 6% 0 0;
        max-width: 29.7%;
    }
    #indexTop .character-container .character-item .character-item-txt {
        font-size: 1.55vw;
        letter-spacing: .03vw;
        margin-top: 0;
    }
    #indexTop .character-container .character-item04 .character-item-txt {
        margin-top: 1.4%;
    }
    #indexTop .character-container02 {
        margin: auto;
        max-width: 60.4%;
        width: 100%;
    }
    #indexTop .character-container02 .character-item {
        max-width: 45.7%;
    }
    #indexTop .message-img01 {
        max-width: 57.2%;
    }
    #indexTop .message {
        padding: 12% 0;
        margin-top: -3%;
    }
    #indexTop .message-deco {
        font-size: 3.1vw;
    }
    #indexTop .messageTxt {
        margin: 3% 0 0;
        font-size: 1.72vw;
    }
    #indexTop .messageWrap {
        margin: 4% auto 0;
        padding: 6% 0 5%;
        max-width: 93%;
        border-radius: 55px;
        letter-spacing: .05vw;
    }
    #indexTop .character-container .character-item .character-item-name {
        margin: 3% auto 0;
        max-width: 29%;
    }
    #indexTop .character-container .character-item02 .character-item-name {
        max-width: 58%;
    }
    #indexTop .character-container .character-item03 .character-item-name {
        max-width: 68.5%;
    }
    #indexTop .character-container .character-item04 .character-item-name {
        max-width: 99.8%;
    }
    #indexTop .character-container .character-item05 .character-item-name {
        max-width: 53.2%;
    }
}
@media all and (max-width: 767px) {
    #indexTop .character-img01 {
        margin: 0 17%;
        max-width: 77.4%;  
    }
    #indexTop .character-txt01 {
        margin: 8.267% auto 0;
        font-size: 3.73333vw;
        line-height: 1.857;
        text-align: left;
        max-width: 92%;
    }
    #indexTop .character {
        margin-top: -4%;
        padding-top: 18.667%;
        padding-bottom: 23.5%;
        /*background-image: url(../img/character-bg-img01-sp.png);*/
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        position: relative;
        z-index: 2;
        min-height: 1985px;
    }
    #indexTop .character-container02 {
        max-width: 100%;
    }
    #indexTop .character-container .character-item {
        margin: 6.8% auto 0;
        max-width: 92%;
    }
    #indexTop .character-container .character-item .character-item-img {
        margin: auto;
        width: 61.45%;
    }
    #indexTop .character-container .character-item .character-item-name {
        margin: 3% auto 0;
        max-width: 17.9%;
    }
    #indexTop .character-container .character-item02 .character-item-name {
        max-width: 35.5%;
    }
    #indexTop .character-container .character-item03 .character-item-name {
        max-width: 41.3%;
    }
    #indexTop .character-container .character-item04 .character-item-name {
        max-width: 79.8%;
        margin: 3% auto 3%;
    }
    #indexTop .character-container .character-item05 .character-item-name {
        max-width: 61.45%;
    }
    #indexTop .character-container .character-item .character-item-txt {
        margin-top: 0;
        font-size: 3.73333vw;
    }
    #indexTop .message {
        /*background-image: url(../img/message-bg-img01-sp.png);*/
        padding: 20.2% 0;
        margin-top: -8%;
    }
    #indexTop .message-img01 {
        max-width: 87.4%;
    }
    #indexTop .messageTxt {
        margin: 6% 0 0;
        font-size: 3.73333vw;
    }
    #indexTop .message-deco {
        font-size: 4.8vw;
    }
    #indexTop .messageWrap {
        margin: 5.6% auto 0;
        padding: 8% 0;
        max-width: 92%;
        border-radius: 6%;
    }
}



/*sns*/
#indexTop .sns {
    padding: 6rem 0 8.31rem;
    /*background-image: url(../img/sns-bg-img01.png);*/
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
    margin: -2.5rem auto 0;
}
#indexTop .sns .sns-btnWrap {
    margin: 1rem auto 0;
    width: 400px;
    display: flex;
    justify-content: space-between;
}
#indexTop .sns .sns-btnWrap a {
    display: block;
    max-width: 101px;
    width: 100%;
}
#indexTop .sns-img01 {
    margin: auto;
    width: 100%;
    max-width: 419px;
}

.top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    max-width: 80px;
    width: 100%;
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
.top-btn.is-show {
  opacity: 1;
  visibility: visible;
}
.top-btn a {
    display: block;
    
}


#indexTop .Copyright {
    background-color: #fff;
}
#indexTop .Copyright p {
    margin: 3rem auto 3rem;
    text-align: center;
    font-size: 1rem;
    color: #666666;
}

@media all and (min-width: 768px) and (max-width: 1100px) {
    #indexTop .sns {
        padding: 7% 0 9%;
        margin: -2.5% auto 0;
        z-index: 1;
    }
    #indexTop .sns-img01 {
        max-width: 36.1%;
    }
    #indexTop .sns .sns-btnWrap {
        margin: 0.5% auto 0;
        width: 36.1%;
    }
    #indexTop .sns .sns-btnWrap a {
        max-width: 25%;
    }
    .top-btn {
        max-width: 6.9%;
    }
    #indexTop .Copyright p {
        margin: 4% auto 4%;
        font-size: 1.37vw;
    }
}
@media all and (max-width: 767px) {
    #indexTop .sns {
        padding: 11.5% 0 17%;
        /*background-image: url(../img/sns-bg-img01-sp.png);*/
        margin: -4.1% 0;
        width: 100%;
        z-index: 1;
    }
    #indexTop .sns .sns-btnWrap {
        margin: .5% auto 0;
        width: 56%;
    }
    #indexTop .sns .sns-btnWrap a {
        max-width: 28.575%;
    }
    #indexTop .sns-img01 {
        max-width: 61.334%;
    }
    #indexTop .Copyright p {
        margin: 9% auto 6%;
        font-size: 2.4vw;
    }

    .top-btn {
        right: 4%;
        bottom: 2%;
        max-width: 10.5%;
    }
}


#indexTop .pcOnly,
#indexTop .pcOnlyPlus {
    display: block;
}
#indexTop .spOnly {
    display: none;
}
#indexTop .programTxt .pcOnly {
    display: inline-block;
}
#indexTop .programTxt .spOnly {
    display: inline-block;
}
#indexTop .kv .kv-anker a.pcOnly {
    display: block;
}
#indexTop .kv .kv-anker a.spOnly {
    display: none;
}
#indexTop br.pcOnly {
    display: block;
}
#indexTop br.spOnly {
    display: none;
}
@media all and (max-width: 767px) {
    #indexTop .pcOnly,
    #indexTop .pcOnlyPlus {
        display: none;
    }
    #indexTop .spOnly {
        display: block;
    }
    #indexTop .programTxt .pcOnly {
        display: inline-block;
    }
    #indexTop .programTxt .spOnly {
        display: inline-block;
    }
    #indexTop .kv .kv-anker a.pcOnly {
        display: none;
    }
    #indexTop .kv .kv-anker a.spOnly {
        display: block;
    }
    #indexTop br.spOnly {
        display: block;
    }
    #indexTop br.pcOnly {
        display: none;
    }
}

.fade-up {
    opacity: 0;
    transform: translateY(50px); /* 下に30px */
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}