@charset "UTF-8";

@media screen and (min-width:601px) and (max-width: 1280px) {
    html {
        width: 1280px;
    }

    .container {
        min-width: 1280px;
        max-width: none;
    }
}

@media screen and (max-width: 600px) {
    .header__nav {
        display: none;
    }
    
    .mobile__nav {
        display: block;
        position: absolute;
        right : 10px;
        top: 15px;
    }

    .header {
        position: fixed;
        top: 0;
        background-color: var(--sub-color);
        padding: 10px;
        width: 100%;
        z-index: 15;
        -webkit-box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
        box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
    }

    .header>div {
        position: relative;
        padding: 0;
    }

    .logo_image {
        padding-left: 0;
    }
    
    main {
        margin-top: 110px;
    }

    main.top_page {
        margin-top: 0;
    }

    .main_visial {
        margin-top: 110px;
        height: calc(100vh + 110px);
    }
    .container {
        max-width: none;
        min-width: none;
        padding: 0;
    }

    .c-wave3 {
        height: 275px;
    }

    .backimage_01,.backimage_02 {
        background-size: cover;
    }

    /* mobleナビ */
    #g-nav.panelactive{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width:100%;
        height: 100vh;
        background-color: var(--menuback);
        animation-name: gnaviAnime;
        animation-duration: 1s;
        animation-delay: .2s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    /*丸の拡大*/
    .circle-bg{
        position: fixed;
        z-index:3;
        /*丸の形*/
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: var(--menuback);
                /*丸のスタート位置と形状*/
        transform: scale(0);/*scaleをはじめは0に*/
        top:-50px;
        left:calc(50% - 50px);/*50%から円の半径を引いた値*/
        transition: all .6s;/*0.6秒かけてアニメーション*/
    }

    .circle-bg.circleactive{
        transform: scale(50);/*クラスが付与されたらscaleを拡大*/
    }

    /*ナビゲーションの縦スクロール*/
    #menu-header-navi-1{
        display: none;/*はじめは表示なし*/
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav.panelactive #menu-header-navi-1{
        display: block; /*クラスが付与されたら出現*/
    }

    /*ナビゲーション*/
    #g-nav ul {
        opacity: 0;/*はじめは透過0*/
        /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
        position: absolute;
        z-index: 999;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        padding: 0 20px;
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
    }

    /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
    #g-nav.panelactive ul li{
    animation-name:gnaviAnime;
    animation-duration:1s;
    animation-delay:.2s;/*0.2 秒遅らせて出現*/
    animation-fill-mode:forwards;
    opacity:0;
    width: 50%;
    text-align: center;
    background-color: var(--sub-color);
    border: 1px solid var(--menuback);
    }
    @keyframes gnaviAnime{
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }
    #g-nav.panelactive ul li:nth-child(n+5) {
        width: 100%;
    }

    #menu-mobile-navi a {
        width: 100%;
        padding: 30px 20px;
        color: var(--main-color);
        font-weight: bold;
    }

    /* ハンバーガーボタン　*/
    .openbtn{
        position: relative;
        background:var(--main-color);
        cursor: pointer;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        z-index: 1000;
    }
    
    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 17px;
        height: 3px;
        border-radius: 2px;
        background: var(--sub-color);
    }

    .openbtn span:nth-of-type(1) {
        top: 20px; 
        width: 45%;
    }
    
    .openbtn span:nth-of-type(2) {
        top: 28px;
        width: 35%;
    }

    .openbtn span:nth-of-type(3) {
        top: 36px;
        width: 20%;
    }
    
    .openbtn.active span:nth-of-type(1) {
        top: 25px;
        left: 13px;
        transform: translateY(6px) rotate(-135deg);
        width: 60%;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 36px;
        left: 13px;
        transform: translateY(-6px) rotate(135deg);
        width: 60%;
    }
    /*========= レイアウト ===============*/
    /* メインビジュアル */
    #video-area{
        top: 110px;
    }

    .main_catch {
        height: calc(100vh - 140px);
        padding-top: 30px;
    }
    .main_visial_text {
        margin: 20px 0 0;
    }
    
    .main_visial_text .text_s {
        font-size: 7.3vw;
    }
    
    .main_visial_text .text_m {
        font-size: 8.8vw;
    }
    
    .main_visial_sns {
        top: calc(100vh - 110px);
        flex-direction: row;
    }
    
    .main_visial_sns a {
        margin-left: 15px;
    }
    
    .main_visial_sns img {
        background-color: var(--sub-color);
        border-radius: 50%;
        /* background-position: center; */
        /* background-size: 90%; */
        padding: 1px;
    }

    .main_visial .c-wave {
        background-color: var(--background);
    }

    /* お知らせ */
    .card {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .card_index {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .card_content {
        width: 100%;
        max-width: none;
        margin-right :0;
        margin-bottom: 50px;
    }

    .card_title {
        margin: 0 auto 50px;
    }
    
    .time_cat,.psot_title {
        width: 250px;
        margin: 0 auto;
    }

    .top_news,
    .top_event {
        padding-bottom: 150px;
    }
    
    .area_shop {
        flex-basis: 100%;
        padding: 0 10px;
    }

    .top_event_index_post.card_content {
        width: 100%;
    }

    .area_shop .card_content {
        width: 48%;
        margin-bottom: 0;
    }
    
    .area_shop .card_content:first-child {
        margin-right: 4%;
    }
    
    .shop_name_cat .psot_title {
        width: auto;
    }

    .top_event_index,.top_shop_content {
        margin-bottom: 0;
    }

    /* parune */ 
    .what_parune_content figure {
        width: 100%;
    }

    .what_parune_content {
        flex-direction: column-reverse;
        margin-bottom: 50px;
    }
    
    .what_parune_textare {
        width: 100%;
        margin-left: 0;
        margin-bottom: 50px;
    }
    
    .what_parune_textare a {
        display: block;
        margin: 0 auto;
        width: fit-content;
    }
    
    .what_parune_name {
        padding: 20px;
    }
    
    .what_parune_name .h3_style_02 {
        font-size: 6.5vw;
    }

    .what_parune_name>div>* {
        width: 100%;
    }
    
    .what_parune_name>div>p {
        margin-bottom: 30px;
    }
    
    .what_parune_name img {
        padding: 0;
    }

    /* ambassadors */
    .ambassador_card {
        margin-bottom: 50px;
    }
    
    .ambassador_card:last-child {
        margin-bottom: 0;
    }

    /* slick */
    .slick-slide {
        padding: 0 20px;
    }
    .slick-arrow {
        display: none;
    }

    .slick-dots {
        text-align: center;
    }
    .slick-dots li {
        display: inline-block;
    }
    .slick-dots button {
        display: block;
        width: 10px;
        height: 10px;
        margin: 6px;
        font-size: 0;
        padding: 0;
        border: 0;
        outline: none;
        cursor: pointer;
        background: var(--menuback);
        border-radius: 50%;
    }
    .slick-dots .slick-active button {
        background: var(--sub-color);
    }
    
    /* footer */
    footer {
        padding-bottom: 20px;
    }

    .footer_logoarea {
        flex-basis: 100%;
        width: 100%;
    }
    
    .common {
        flex-basis: 100%;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 60px;
    }

    .menu-footer-navi-container ,
    .common>ul {
        display: none;
    }

    .footer_sns {
        margin: 30px auto 0;
    }

    .news .card_content {
        width: 100%;
    }

    .parune .what_parune_content.d_flex {
        flex-direction: column;
    }

    .parune .what_parune_content figure figcaption {
        position: initial;
        font-size: 0.75em;
        margin: 5px 0 0 auto;
        display: block;
        width: fit-content;
    }

    #splash {
        margin-top: -110px;
    }
    

}