html {
    font-size: 62.5%;
    font-family: "ヒラギノ角ゴ Pro W3","メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow-x: hidden;
}

body {
    font-family: "ヒラギノ角ゴ Pro W3","メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 100%;
}
::-webkit-scrollbar {
    display: none;
}
img {
    width: 100%;
}
.js-loaded {
    min-height: 101vh;
    overflow: auto;
}
.js-loaded body{    
    position: relative;
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.pc {
    display: block!important;
}

.sp {
    display: none !important;
}
p {
    font-size: 1.6rem;
}
.underline {
    text-decoration: underline;
}
.txt-red {
    color: #e60012;
}
.c_bold {
    font-weight: bold;
}
span.img {
    display: inline-block;
}

.section {
    position: relative;
}
.section.sec_01 {
    z-index: 1;
}
.section.sec_01,
.section.sec_02,
.section.sec_03 {
    position: relative;
    background: rgb(63,17,105);
    background: linear-gradient(180deg, rgba(63,17,105,1) 0%, rgba(216,91,153,1) 95%, rgba(216,91,153,1) 100%);
}
.sec_01_bat {
    position: absolute;
    top: 17.4%;
    left: 0;
    width: 100%;
}
.sec_01_star {
    position: absolute;
    top: 3.1%;
    left: 0;
    width: 100%;
}
.section.sec_02 {
    padding-bottom: 7rem;
    z-index: 1;
}
.sec_02 .sec_02_title {
    width: 100%;
    margin: 0 auto;
}
.sec_02 .block01 {
    position: relative;
    margin-top: 3rem;
}
.sec_02 .block01 .img01 {
    width: 43.3rem;
}
.sec_02 .block01 .img02 {
    width: 43.2rem;
    position: absolute;
    top: 18.4%;
    left: 0;
}
.sec_02 .block01 .img03 {
    width: 55.4rem;
    margin-left: 0.8rem;
}
.sec_02 .img_bat_decor {
    position: absolute;
    top: 2.3%;
    left: 0%;
    width: 99%;
}
.sec_02 .img_star_decor {
    position: absolute;
    top: 3.9%;
    left: 0%;
    width: 98%;
}
.section.sec_03 {
    position: relative;
    min-height: 100vh;
    /* background: url(../img/bg_main.png) no-repeat; */
    background-size: 100%;
    background-position: bottom center;
    background-attachment: fixed;
    /* padding-top: 57.1rem; */
    padding-bottom: 22.8rem;
}
.sec_03::after {
    content: "";
    background: url(../img/img_bg01_sp.png) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 6.4rem;
    z-index: 5;
    position: absolute;
    top: -1.5rem;
}
.sec_03::before {
    content: "";
    width: 100%;
    height: 100%;
    background:  linear-gradient(180deg, rgba(63,17,105,1) 0%, rgba(216,91,153,1) 95%, rgba(216,91,153,1) 100%);
    background-size: 100%;
    background-position: bottom center;
    background-attachment: fixed;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.bg_wrap {    
    background: url('../img/bg_main.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}
.bg_wrap .img01 {
    position: absolute;
    bottom: 38.9%;
    right: 24.4%;
}
.inner{
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}
.sec_03 .block01 {
    padding-top: 9.7rem;
    position: relative;
}
.sec_03 .block01 > .img:hover {
    cursor: pointer;
}
.sec_03 .block01 .img01 {
    position: absolute;
    bottom: 0;
    left: 0;
}
.sec_03 .block03 {
    position: relative;
    margin-top: 0;
}
.sec_03 .block03 .img02 {
    width: 32rem;
    position: absolute;
    top: 31.8%;
    right: 3.6%;
}
.sec_03 .block03 .img03 {
    width: 82.2rem;
    position: absolute;
    top: 16.7%;
    left: 4.1%;
}
.sec_03 .block03 .img04 {
    width: 71rem;
    position: absolute;
    bottom: 4%;
    left: 3.7%;
}
.sec_03 .block03 .img07 {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0;
}
.sec_03 .block04 {
    position: relative;
    margin-top: 2.1rem;
}
.sec_03 .block04 .img02 {
    width: 58.9rem;
    position: absolute;
    top: 8.5%;
    right: -19%;
}
.sec_03 .block04 .img03 {
    width: 38rem;
    position: absolute;
    bottom: 5%;
    right: 3%;
}
.sec_03 .block04 .img04 {
    width: 34.2rem;
    position: absolute;
    top: 26.6%;
    right: 37.4%;
}
.sec_03 .block04 .img08 {
    width: 22.8rem;
    position: absolute;
    top: 47.5%;
    left: 8.5%;
}
.sec_03 .block04 .img09 {
    width: 31.8rem;
    position: absolute;
    top: 46.4%;
    right: 28.3%;
}
.sec_03 .block04 .img05 {
    width: 23.7rem;
    position: absolute;
    top: 30.9%;
    left: 3.8%;
}
.sec_03 .block04 .img10 {
    width: 24.2rem;
    position: absolute;
    bottom: 7.2%;
    left: 3.8%;
}
.sec_03 .block04 .img06 {
    width: 71.2rem;
    position: absolute;
    top: 4.6%;
    left: 4.7%;
}
.sec_03 .block05 {
    margin-top: 10rem;
    padding-bottom: 5rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.sec_03 .block05 > a {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sec_03 .block05 > a:hover {
    opacity: 0.8;
}
.sec_03 .img_star_decor {
    position: absolute;
    top: 6.5%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_star_decor02 {
    position: absolute;
    top: 39.9%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_star_decor03 {
    position: absolute;
    top: 72.5%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_bat_decor {
    position: absolute;
    top: 12.3%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_bat_decor02 {
    position: absolute;
    top: 36.9%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_bat_decor03 {
    position: absolute;
    top: 72.9%;
    left: 0%;
    width: 100%;
}
.sec_03 .img_witch_decor {
    position: absolute;
    top: 47.8%;
    left: 2.7%;
    width: 35.6rem;
}
.sec_03 .img_witch_decor02 {
    position: absolute;
    top: 79%;
    top: 79.5%;
    right: 2%;
    width: 35.6rem;
    transform: rotateY(180deg);
}
.section.sec_04 {
    padding-bottom: 10rem;
    z-index: 1;
    background-color: #fff;
}
.sec_04 a {
    font-weight: bold;
    color: black;
}
.sec_04 a:hover {
    opacity: 0.8;
}
.sec_04 .block01 {
    padding: 5rem 0 4.5rem;
} 
.sec_04 h3.block_txt {
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.sec_04 .block_txt {
    font-size: 1.4rem;
    line-height: 2rem;
    display: flex;
}
/***modal***/

#modal01 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}
#modal01::after {
    content: "";
    width: 200vw;
    height: 200vh;
    background: rgb(0 0 0 / 74%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
#modal01 .contenr {
    width: 64rem;
    height: auto;
    /* height: 38.5rem; */
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5rem 3rem;
}

#modal01 .modal-image {
    width: 21.5rem;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1rem;
}

#modal01 .modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 3.3rem;
}

#modal01 .c-text-lead {
    font-size: 1.5rem;
    max-width: 42rem;
}
#modal01 .video-container {
    text-align: center;
}
#modal01 .video-container iframe {
    border: none;
}
/* #modal01 .video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;
}
#modal01 .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
} */

span.jsCloseModal {
    display: block;
    position: absolute;
    right: 0;
    top: -6.5rem;
}

span.jsCloseModal:hover {
    cursor: pointer;
}

/***animation***/
.activeEffect {
    opacity: 0;
}
.scale {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
}
.fadein,
.fadein02,
.fadein03 {
    opacity: 0;
}
.fadein02 {
    transform: translateY(-1.5rem);
    -webkit-transform: translateY(-1.5rem);
    -moz-transform: translateY(-1.5rem);
    -ms-transform: translateY(-1.5rem);
    -o-transform: translateY(-1.5rem);
}
.fadein03 {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
}
.bat_animation {
    animation: shake 6s linear infinite;
    -webkit-animation: shake 6s linear infinite;
}
.star_animation {
    animation: star 2s linear infinite;
    -webkit-animation: star 2s linear infinite;
}
.rotate_animation.on {
    opacity: 1;
    animation: rotate 0.5s linear;
    -webkit-animation: rotate 0.5s linear;
}
.swing_animation {
    opacity: 1;
}
.swing_animation02 {
    opacity: 0;
}
.swing_animation.on {
    opacity: 1;
    animation: swing 1s linear ;
    -webkit-animation: swing 1s linear ;
}
.sec_03 .img02.swing_animation {
    opacity: 0;
}
.img02.swing_animation02.delay.on {
    animation: opacity 1s 1s linear forwards, swing 1s 1s linear forwards;
    -webkit-animation: opacity 1s 1s linear forwards, swing 1s 1s linear forwards;
}
.fadein.on {
    opacity: 1;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.fadein02.on {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.25s,transform 1.25s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transition: opacity 1.25s,transform 1.25s;
    -moz-transition: opacity 1.25s,transform 1.25s;
    -ms-transition: opacity 1.25s,transform 1.25s;
    -o-transition: opacity 1.25s,transform 1.25s;
}
.fadein03.on {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.5s,transform 1.5s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transition: opacity 1.5s,transform 1.5s;
    -moz-transition: opacity 1.5s,transform 1.5s;
    -ms-transition: opacity 1.5s,transform 1.5s;
    -o-transition: opacity 1.5s,transform 1.5s;
}
.scale.on {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.5s,transform 1.5s;
    -webkit-transition: opacity 1.5s,transform 1.5s;
    -moz-transition: opacity 1.5s,transform 1.5s;
    -ms-transition: opacity 1.5s,transform 1.5s;
    -o-transition: opacity 1.5s,transform 1.5s;
}
.fadein02.delay05.on {
    transition-delay: 0.25s;
}
.fadein02.delay1.on {
    transition-delay: 0.5s;
}
@keyframes opacity {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, 1px) rotate(0deg); }
}
@keyframes star {
    0% { opacity: 1 }
    50% { opacity: 0.65 }
    100% { opacity: 1 }
}
@keyframes rotate {
    0% { transform: rotate(0) scale(0); -webkit-transform: rotate(0) scale(0); -moz-transform: rotate(0) scale(0); -ms-transform: rotate(0) scale(0); -o-transform: rotate(0) scale(0); }
    100% { transform: rotate(360deg) scale(1); -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}



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

}

@media screen and (max-width: 1240px) {
    html {
        font-size: calc(100vw / 124);
    }
    .inner {
        width: 65rem;
        margin: 0 auto;
    }
    .sec_02 .block01 .img01 {
        width: 29.3rem;
    }
    .sec_02 .block01 .img02 {
        width: 29.3rem;
        top: 16%;
    }
    .sec_02 .block01 .img03 {
        width: 34.4rem;
    }
    .sec_03 .block01 {
        width: 100%;
        padding-top: 9.7rem;
    }
    .sec_03 .block03 {
        position: relative;
        margin-top: 0;
    }
    .sec_03 .block03 .img03 {
        width: 52.2rem;
    }
    .sec_03 .block03 .img02 {
        width: 20.5rem;
    }
    .sec_03 .block03 .img04 {
        width: 47rem;
    }
    .sec_03 .block04 .img02 {
        width: 38rem;
    }
    .sec_03 .block04 .img03 {
        width: 25rem;
    }
    .sec_03 .block04 .img04 {
        width: 21rem;
    }
    .sec_03 .block04 .img08 {
        width: 16rem;
    }
    .sec_03 .block04 .img09 {
        width: 19rem;
    }
    .sec_03 .block04 .img05 {
        width: 16rem;
    }
    .sec_03 .block04 .img10 {
        width: 16rem;
    }
    .sec_03 .block04 .img06 {
        width: 45rem;
    }
    .sec_03 .block04 .img07 {
        width: 8rem;
        position: absolute;
        right: 7.1%;
        bottom: 32.6%;
    }
    .sec_03 .img_witch_decor {
        width: 23.6rem;
    }
    .sec_03 .img_witch_decor02 {
        width: 23.6rem;
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 1.334vw;
    }
    .pc {
        display: none !important;
    }
    
    .sp {
        display: block !important;
    }
    .inner {
        width: 100%;
    }
    .sec_01 {
        height: 123rem;
        z-index: 1;
    }
    .sec_02 {
        height: 158rem;
    }
    .sec_01_house {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .sec_01_bat {
        position: absolute;
        top: unset;
        bottom: 36.2%;
        left: unset;
        right: 4.3%;
        width: 42.1rem;
    }
    .sec_01_bat_02 {
        position: absolute;
        top: 13.6%;
        right: 30.6%;
        width: 9.9rem;
    }
    .sec_01_cake {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
    }
    .sec_01_star {
        position: absolute;
        top: 0.8%;
        left: 0;
        width: 100%;
    }
    .section.sec_02 {
        padding-bottom: 0;
        z-index: 1;
    }
    .sec_02 .sec_02_title {
        width: 100%;
    }
    .sec_02 .block01 {
        position: relative;
        margin-top: 2.4rem;
    }
    .sec_02 .block01 .img01 {
        width: 100%;
    }
    .sec_02 .block01 .img02 {
        width: 38rem;
        position: absolute;
        right: 5.1%;
        left: unset;
        top: -3.4rem;
    }
    .sec_02 .block01 .img03 {
        width: 64.5rem;
        position: absolute;
        right: 7.3%;
        top: 14.6%;
        z-index: -1;
    }
    .sec_02 .block01 .img_star {
        position: absolute;
        top: 15%;
        left: 0;
    }
    .sec_02 .block01 .img_bat {
        position: absolute;
        bottom: 37.2%;
        left: 1.5%;
        width: 15.4rem;
    }
    .section.sec_03 {
        min-height: 100vh;
        padding-top: 0;
        padding-bottom: 10rem;
    }
    .bg_wrap {    
        background: url('../img/bg_main_sp.jpg');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: 100%;
    }
    .bg_wrap .img01 {
        width: 32.7rem;
        position: absolute;
        bottom: 30.9%;
        right: 3%;
    }
      
    .sec_03::after {
        content: "";
        background: url(../img/img_bg01.png) no-repeat;
        background-size: 100%;
        width: 100%;
        height: 12.8rem;
        z-index: 5;
        position: absolute;
        top: -1.5rem;
    }
    .sec_03 .block01 {
        overflow: hidden;
        width: 100%;
        /* width: 67.1rem; */
        /* margin: 0 auto; */
        width: 100%;
        padding: 0 4rem;
        padding-top: 5.5rem;
        position: relative;
    }
    .sec_03 .block01 .img01 {
        width: 67.1rem;
        left: 4rem;
    }
    .sec_03 .block01 .img02 {
        width: 67.1rem;
    }
    .sec_03 .block02 {
        padding-top: 10.2rem;  
        position: relative;  
    }
    .sec_03 .block02 .img02 {
        width: 31.8rem;
        position: absolute;  
        top: 18.2%;
        left: 3.8%;
    }
    .sec_03 .block02 .img03 {
        width: 100%;
        position: absolute;  
        top: 13.2%;
        left: 0;
    }
    .sec_03 .block03 {
        position: relative;
        margin-top: 3rem;
    }
    .sec_03 .block03 .img02 {
        width: 40.2rem;
        position: absolute;
        top: 0.3%;
        right: 2.6%;
    }
    .sec_03 .block03 .img03 {
        width: 34.9rem;
        position: absolute;
        top: 0;
        left: 3.3%;
    }
    .sec_03 .block03 .img04 {
        width: 100%;
        position: absolute;
        bottom: -5.2%;
        left: 0;
    }
    .sec_03 .block03 .img05 {
        width: 15.9rem;
        position: absolute;
        top: 2.4%;
        left: 27.6%;
    }
    .sec_03 .block03 .img06 {
        width: 9.8rem;
        position: absolute;
        bottom: 23.2%;
        left: 8.6%;
    }
    .sec_03 .block03 .img08 {
        width: 65.3rem;
        position: absolute;
        top: 27.5%;
        left: 6.8%;
    }
    .sec_03 .block04 {
        position: relative;
        margin-top: 9.3rem;
    }
    .sec_03 .block04 .img02 {
        width: 46rem;
        position: absolute;
        top: -6.2%;
        right: 0;
    }
    .sec_03 .block04 .img03 {
        width: 63.1rem;
        position: absolute;
        bottom: 2%;
        left: 8%;
    }
    .sec_03 .block04 .img04 {
        width: 31.1rem;
        position: absolute;
        top: 25.1%;
        left: 36.6%;
    }
    .sec_03 .block04 .img08 {
        width: 20.7rem;
        position: absolute;
        top: 38.3%;
        left: 12.5%;
    }
    .sec_03 .block04 .img09 {
        width: 28.9rem;
        position: absolute;
        top: 37.4%;
        right: 10.8%;
    }
    .sec_03 .block04 .img05 {
        width: 21.5rem;
        position: absolute;
        top: 28.1%;
        left: 7.1%;
    }
    .sec_03 .block04 .img10 {
        width: 22.0rem;
        position: absolute;
        top: 58.4%;
        left: 7.1%;
    }
    .sec_03 .block04 .img06 {
        width: 31.4rem;
        position: absolute;
        top: -1%;
        left: 3.4%;
    }
    .sec_03 .block05 {
        margin-top: 9.5rem;
        padding-bottom: 5rem;
        left: 0;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
    .section.sec_04 {
        margin-bottom: 0;
        z-index: 1;
        background: #fff;
    }
    .sec_04 .block01 {
        margin: 0;
        padding: 0;
    } 
    .sec_04 .inner {
        padding: 4.5rem 4rem 15rem;
    }
    .sec_04 .block02 {
        margin-top: 5.5rem;
    }
    .sec_04 .block_txt {
        font-size: 2.8rem;
        line-height: 4rem;
        display: flex;
    }
    .sec_04 h3.block_txt {
        font-size: 3.2rem;
        line-height: 2.4rem;
        font-weight: bold;
        margin-bottom: 2.6rem;
    }
    .banner_bottom {
        background-color: #ee7800;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .banner_bottom .img02 {
        width: 19.6rem;
        position: absolute;
        top: 11%;
        right: 13%;  
    }
    .banner_bottom .img03 {
        width: 6.9rem;
        position: absolute;
        top: 29%;
        right: 8%;
    }
    /***modal***/
    #modal01 .contenr {
        width: 69rem;
    }
    #modal01 .video-container iframe {
        width: 100%;
        height: 112rem;
    } 
}