canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js1,#particles-js2,#particles-js3,#particles-js4{position:fixed; width: 100%; height: 100%;z-index: -1;} /* ---- stats.js ---- */ .count-particles{ position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }


body{
    font-family: "Zen Old Mincho", serif;
    color: #2a2a2a;
  font-weight: 400;
  font-style: normal;
scrollbar-width: none;}
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
a{text-decoration: none;}

.pcOnly{display: block;}
.spOnly{display: none;}

.MorebtnWrap{text-align: center;}

.Morebtn {
    display: inline-block;
    border: 2px solid;
    position: relative;
    background: #fff;
    color: #499dea;
    overflow: hidden;
    border: 2px solid #499dea;
    padding:1.3rem 2% 1.3rem 3%;
    transition: all .3s;
    border-radius: 50px;
    min-width: 170px;
    margin: 40px auto 50px auto;
}
.Morebtn:before, .Morebtn:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
}
.Morebtn:before {
    width: 7px;
    height: 7px;
    left: 1.2rem;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all .3s;
}
.Morebtn:after {
    left: -3rem;
    background: #499dea;
    z-index: 1;
    width: 6rem;
    height: 130%;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all .5s;
}
.Morebtn span {
    transition: all .3s;
    z-index: 3;
    font-size:clamp(14px, 1vw, 18px);
}
.Morebtn:hover span {
    position: relative;
    color: #fff;
}
.Morebtn:hover:after {
    right: 0;
    width: 140%;
    border-radius: 0;
}

.midashiH2{text-align: center; margin: 40px auto 80px auto;position: relative;z-index: 3;}
.midashiH2 span{font-weight: 600;  display: inline-block;font-size:clamp(43px, 3vw, 57px); color: #499dea; text-shadow: #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px;}

.midashiH2 span:before{content: "";
    background: url("../img/common/h2_item02.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    width: 56%;
    max-width: 500px;
    height: 57%;
    bottom: -43%;
    left: 0;
    right: 0;
    margin: 0 auto;}

.audio_wrap{position: fixed; top:15px; right: 15px;z-index: 50;}
.audio_button{cursor: pointer; background: url("/content/themes/img/common/musicOff.png");background-size: contain;background-repeat: no-repeat;width: 7.1vw;
    height: 1.9vw;
    min-width: 151px;
    min-height: 38px;
    transition: 0.2s;
}

.play .audio_button{background: url("/content/themes/img/common/musicOn.png")!important;background-size: contain!important;background-repeat: no-repeat!important;}

footer{background: url("../img/common/fotBg.jpg")no-repeat;background-size:cover; background-position: bottom; padding: 2rem 0}
footer .fotlogo{width: 65%;
    max-width: 435px;
    margin: 0 auto;}
footer p{text-align: center; font-size: 14px; color: #fff; margin-top: 2vw;}

#other{width: 90%; max-width: 900px; margin: 0 auto clamp(80px, 6.88vw, 120px) auto;}
.Bnr01{border: 2px solid #8cd0dc; width: 70%; max-width: 345px; margin: 0 auto 40px auto;line-height: 0;}
.sns_x{display: flex; align-items: center; justify-content: center;margin: 0 auto 50px auto;}
.sns_x p{font-weight: 500;font-size: 16px;}
.sns_x p span{color: #2f9de5;}
.sns_x a{display: block; margin-left: 1.5%;}

.NoteBtn{text-align: center;}
.Note{display: inline-block;
    text-align: center;
    color: #fff;
    background: #2f9de5;
    padding: 2.3% 4%;
    font-weight: 600;
    border-radius: 60px;
font-size: 17px;}
.Note:before{content: "!";
    background: #fff;
    padding: 0px 9px;
    color: #2f9de5;
    border-radius: 20px;
margin-right: 7px;
font-size: 16px;}

.hide-area{display:none;}

.movieModalbtn{cursor: pointer;}



.scrollAnime {
opacity: 0;
  transition: all 0.8s;
  filter: blur(15px);
    transform: translate(0,30px);
}
.scrollAnime.scrollin {
 opacity: 1;
  filter: blur(0);
  transform: translate(0,0);
}

@media screen and (max-width:1100px) {
    
}
    
@media screen and (max-width:767px) {
    
    .Morebtn {
    margin: 15px auto 30px auto;
}
    
    .pcOnly{display: none;}
.spOnly{display: block;}
    
    .midashiH2 span{font-size:clamp(28px, 3vw, 33px);}
     .midashiH2 span:after{left:clamp(-130px, -7vw, -57px);}
    .midashiH2 {margin: 40px auto 36px auto;}
    
    .audio_button {min-width: 123px;min-height: 31px;}
    footer p{text-align: center; font-size: 12px;margin-top: 7vw;}
    
    .sns_x p{font-weight: 500;font-size: 15px;}
    
    .Note{padding:18px 5%;font-size: 15px;}
    .Note:before{padding: 0px 7px;margin-right: 6px;font-size: 14px;}
    
}