@font-face {
    font-family: "解星-オプティ";
    src: url("../fonts/KaiseiOpti-Regular.ttf") format("truetype");
}

body{overflow-x:clip;margin-left: calc(50% - 50vw);height:100%;}

html {scroll-behavior: smooth;height:100%;}

section{
    width:100vw;
    position:relative;
    font-family : 'ヒラギノ丸ゴ ProN W4';
    background-color: #33BBD3;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align:left;
}

#g-nav {
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: center top;
    opacity: 0;
    transition: all .3s;
    width: 200px;height:auto;
    position: fixed;top:100px;right:70px;z-index:3;
}

.dropdown__list:hover {
    background-color: #fff462;
}s

.dropdown__list a:hover {
    color: #33BBD3;
}

#g-nav.panelactive {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}

.dropdown__list {
    background-color: #fff;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.25));
    width:250px;height: auto;
    border-radius: 10px;
    transition: all .3s;
}

.dropdown__list a {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: #33BBD3;
    text-align: center;
    font-family: "解星-オプティ";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding : 20px 3% 20px 3%;
    margin: 5px;
    text-decoration: none;
    position: relative;
}

/* フェードインアニメーション */

/* 下から上に移動しながらフェードイン */
.fadeInUp {width:100vw;}

.pc-fadein {
    opacity:0;
    width:100vw;
    height:auto;
    position:absolute;
    top:0;
    left:0px;
    z-index:2;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: slideinTop;
    animation-duration: 2s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

.sp-fadein {
    opacity:0;
    width:100vw;
    height:auto;
    position:absolute;
    top:0;
    left:0px;
    z-index:2;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: slideinTop;
    animation-duration: 3s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

@keyframes slideinTop {
    0% {
        transform: translatey(-100%);
    }
    100% {
        opacity: 1;/* 不透明 */
        transform: translatey(0);
    }
}

.pc-logo{
    width:40vw;
    height:auto;
    opacity:0;
    position:absolute;
    top:20vw;
    left:30vw;
    z-index:2;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 8s;
    animation-fill-mode: forwards;
}

.sp-logo{
    width:min(50vw);
    opacity:0;
    position:absolute;
    top:75vw;
    left:25vw;
    z-index:2;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
}

.pc-video {
    width: 100vw;
    aspect-ratio: 16 / 9;
    height:auto;
    object-fit: cover;
    position:absolute;top:0;
    z-index:1;
}

.sp-video {
    width: 100vw;
    aspect-ratio: 9 / 16;
    height:auto;
    object-fit: cover;
    position:absolute;top:0;
    z-index:1;
}

@media screen and (width < 768px)/* スマホ */{

    .header__background {
        width: 100vw;height:100px;
        position: fixed;top: 0;right: 0;z-index:1;
    }
    
    img[src$="image/Twitter.svg"]{
        cursor: pointer;
        width:60px;
        mix-blend-mode: overlay;
        position: fixed;top: 15px;right: 135px;z-index:3;
    }
    
    img[src$="image/Instagram.svg"]{
        cursor: pointer;
        width:60px;
        mix-blend-mode: overlay;
        position: fixed;top: 15px;right: 75px;z-index:3;
    }
    
    .openbtn{
        mix-blend-mode: overlay;
        position: fixed;top: 15px;right: 15px;z-index:3;
        cursor: pointer;
        width:60px;
        height:60px
    }
    
    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position:  fixed;
        right: 30px;
        height: 4px;
        border-radius: 2.5px;
        background: #fff;
        width: 30px;
        margin:0 auto
      }
    
    .openbtn span:nth-of-type(1) {
        top:31px;	
    }
    
    .openbtn span:nth-of-type(2) {
        top:43px;
    }
    
    .openbtn span:nth-of-type(3) {
        top:55px;
    }
    
    /*activeクラスが付与されると線が回転して×に*/
    
    .openbtn.active span:nth-of-type(1) {
        top: 42px;
        right: 25px;
        transform:rotate(-45deg);
        width: 40px;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;/*真ん中の線は透過*/
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 42px;
        right: 25px;
        transform: rotate(45deg);
        width: 40px;
    }

    .pc-video {display: none;}

    .pc-fadein {display: none;}

    .pc-logo {display: none;}

    .sp-video {display: block;}

    .sp-fadein {display: block;}

    .sp-logo {display: block;}

    section{font-size:1rem;padding-top:175vw}

    .box{
        width:85vw;height:auto;
        opacity:0;
        display :flex ;
        flex-direction: column;
        justify-content:center;
        transition: 1s ease-in;
        margin:0 auto;
    }

    .box__image{
        width:60vw;height:80vw;
        opacity: 0;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        margin:0 auto;
    }

    .item img{
        width:60vw;height:80vw;
        filter: drop-shadow(0.3vw 0.3vw 0.3vw rgba(0, 0, 0, 0.25));
        border-radius: 1vw;
        object-fit: cover;
    }

    img[src$="image/magie.png"]{
        width:60vw;height:80vw;
        border-radius: 1vw;
        object-fit: contain;
    }

    img[src$="image/matinée_商品画像.png"]{
        width:60vw;height:80vw;
        border-radius: 1vw;
        object-fit: contain;
    }
    
    img[src$="image/soirée_商品画像.png"]{
        width:60vw;height:80vw;
        border-radius: 1vw;
        object-fit: contain;
    }

    .box__text{
        width:80vw;height:auto;
        float:center;
        margin:5vw auto 0 auto;
    }

    .item_heading{font-size:8vw;}
    
    .item_heading span{font-size:8vw;}

    .footer {font-size:1rem;}

}


@media screen and (768px<= width)/* PC */ {

    .header__background {
        width: 100vw;height:100px;
        position: fixed;top: 0;right: 0;z-index:1;
    }
    
    img[src$="image/Twitter.svg"]{
        cursor: pointer;
        width:75px;
        mix-blend-mode: overlay;
        position: fixed;top: 20px;right: 160px;z-index:3;
    }
    
    img[src$="image/Instagram.svg"]{
        cursor: pointer;
        width:75px;
        mix-blend-mode: overlay;
        position: fixed;top: 20px;right: 90px;z-index:3;
    }
    
    .openbtn{
        mix-blend-mode: overlay;
        position: fixed;top: 20px;right: 20px;z-index:3;
        cursor: pointer;
        width:75px;
        height:75px
    }
    
    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position:  fixed;
        right: 37.5px;
        height: 5px;
        border-radius: 2.5px;
        background: #fff;
          width: 40px;
        margin:0 auto
      }
    
    .openbtn span:nth-of-type(1) {
        top:40px;	
    }
    
    .openbtn span:nth-of-type(2) {
        top:55px;
    }
    
    .openbtn span:nth-of-type(3) {
        top:70px;
    }
    
    /*activeクラスが付与されると線が回転して×に*/
    
    .openbtn.active span:nth-of-type(1) {
        top: 55px;
        right: 32.5px;
        transform:rotate(-45deg);
        width: 50px;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;/*真ん中の線は透過*/
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 55px;
        right: 32.5px;
        transform: rotate(45deg);
        width: 50px;
    }

    .pc-video {display: block;}

    .pc-fadein {display: block;}

    .pc-logo {display: block;}

    .sp-video {display: none;}

    .sp-fadein {display: none;}

    .sp-logo {display: none;}

    section{font-size:min(2.5vw,1rem);padding-top: 55vw;}

    .box{
        width:85vw;height:auto;
        opacity:0;
        display :flex ;
        justify-content:center;
        align-items:center;
        transition: 1s ease-in;
        margin:0 auto;
    }

    .box__image{
        width:30vw;height:40vw;
        opacity: 0;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        float:left;
        margin:0 5vw 0 0;
    }

    .item img{
        width:30vw;height:40vw;
        filter: drop-shadow(0.3vw 0.3vw 0.3vw rgba(0, 0, 0, 0.25));
        border-radius: 1vw;
        object-fit: cover;
    }

    img[src$="image/magie.png"]{
        width:30vw;height:40vw;
        border-radius: 1vw;
        object-fit: contain;
    }

    img[src$="image/matinée_商品画像.png"]{
        width:30vw;height:40vw;
        border-radius: 1vw;
        object-fit: contain;
    }
    
    img[src$="image/soirée_商品画像.png"]{
        width:30vw;height:40vw;
        border-radius: 1vw;
        object-fit: contain;
    }

    .box__text{width:50vw;height:auto;float:left;}

    .bodycopy{width:45vw; margin-left: 5vw;}

    .item_heading{font-size:min(5vw,5rem);}
    
    .item_heading span{font-size:min(5vw,5rem);}

    .footer {font-size:min(2.5vw,1.3rem);}

}

.heading{
    opacity: 0;
    transition: 1s ease-in;
    width:85vw;margin:0 auto min(20vw,200px) auto;
    border-radius: 10px;
    background-color: #fff;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.25));
}

h1{ color: #33BBD3;
    text-align: center;
    font-family: "解星-オプティ";
    font-size: min(5vw,2rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding : 20px 0;
}

h1 span{ color: #003c6a;
    text-align: center;
    font-family: "解星-オプティ";
    font-size: min(5vw,2rem);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding : 20px 0;
}

.bodycopy{
    color: #33BBD3;
    font-family:dnp-shuei-mgothic-std, sans-serif;
}

.container__magie{
    padding:25vw 0 25vw 0;
    background-color: #fff462;
}

.container_01{
    padding:20vw 0 25vw 0;
    background-color:#33BBD3;
    background: linear-gradient(to bottom,#33BBD3 97%, #003c6a);
}

.container{
    padding:20vw 0 25vw 0;
    background-color:#33BBD3;
}

.container_02{
    padding:20vw 0 25vw 0;
    background-color: #003c6a;
}

.item_heading{
    font-family: "lust-display", serif;
    text-align: center;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    border-bottom: solid 2px;
}

.item_heading span{
    font-family: "marydale", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    margin-left: 3vw;
}

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

img[src$="image/footer_logo.svg"]{
    cursor: pointer;
    width:min(30vw,250px);z-index:2;
}

ul {padding: 0;
    list-style: none;
}
  
a { color: #fff;text-decoration: none;}

.footer{padding-top:40vw;}

.footer {
    padding:40vw 5vw 5vw 5vw;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size:min(1rem,1.3rem);
    line-height: normal;
    text-align:left; 
    font-family : 'ヒラギノ丸ゴ ProN W4';
}

.footer a:hover {color: #fff462;}
  
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
  
.footer__navi-heading {
    font-family: "lust-display", serif;
    font-weight: 400;
    font-size:min(5vw,3rem);
    font-style: normal;
    border-bottom: solid 2px #fff;
}
  
.footer_logo {
    display: inline-block;
    margin-bottom: 2rem;
}
  
.footer__navi li {
    margin-bottom: 0.75rem;
}

hr {border: 0; border-top: 1px solid #008CB4;}

.copyright{color:#008CB4;}

#pagetop {width:min(15vw,100px);position: fixed;bottom:30px;right: 30px;z-index:4;}