* {
    padding:0px;
    margin:0px;
}
html, body {
    margin            : 0 auto;
    height            : 100%;
    font-size:2.8vw !important;
}
/* ロードアニメ */
#ID_LOAD_ANIME{
    background-color: #BC1224;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
.css_fill{
    width: 100%;
    height: 100%;
}
.css_anime_bg{
    /* object-fit: contain; */
    height: 100%;
    width: 100%;
    -webkit-animation-delay: 3.5s;
}
.css_anime_rokujuu{
    position: absolute;
    width: 40vw;
    top: calc(50% - 4vw);
    left: calc(50% - 20vw);
    -webkit-animation-delay: 5.5s;
}
.css_anime_rokujuu_sp{
    position: absolute;
    width: 80vw;
    top: calc(50% - 20vw);
    left: calc(50% - 40vw);
    -webkit-animation-delay: 5.5s;
}

.css_anime_smoke{
    position: absolute;
    transform-origin: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-animation-delay: 5.5s;
}
.css_anime_smoke_sp{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center;
    left: 0;
    top: 0;
    -webkit-animation-delay: 5.5s;
}

.css_anime_juu1 {
    position: absolute;
    width: 14vw;
    top: 17%;
    left: 74%;
    transform: rotate(15deg);
    -webkit-animation-delay: 0s;
}
.css_anime_juu2 {
    position: absolute;
    width: 11vw;
    top: 15%;
    left: 16%;
    transform: rotate(-30.94deg);
    -webkit-animation-delay: 0.5s;
}
.css_anime_juu3 {
    position: absolute;
    width: 11vw;
    top: 82%;
    left: 48%;
    transform: rotate(-5.56deg);
    -webkit-animation-delay: 1s;
}
.css_anime_juu4 {
    position: absolute;
    width: 11vw;
    top: 50%;
    left: 63%;
    transform: rotate(-25.06deg);
    -webkit-animation-delay: 1.5s;
}
.css_anime_juu5 {
    position: absolute;
    width: 14vw;
    top: 55%;
    left: 23%;
    transform: rotate(20.46deg);
    -webkit-animation-delay: 2s;
}
.css_anime_juu6 {
    position: absolute;
    width: 14vw;
    top: 71%;
    left: 7%;
    transform: rotate(25.27deg);
    -webkit-animation-delay: 2.5s;
}

.css_anime_juu1_sp {
    position: absolute;
    width: 26vw;
    top: 15%;
    left: 60%;
    transform: rotate(14.74deg);
    -webkit-animation-delay: 0s;
}
.css_anime_juu2_sp {
    position: absolute;
    width: 26vw;
    top: 15%;
    left: 14%;
    transform: rotate(-11.29deg);
    -webkit-animation-delay: 0.5s;
}
.css_anime_juu3_sp {
    position: absolute;
    width: 22vw;
    top: 82%;
    left: 34%;
    transform: rotate(7.1deg);
    -webkit-animation-delay: 1s;
}
.css_anime_juu4_sp {
    position: absolute;
    width: 26vw;
    top: 40%;
    left: 61%;
    transform: rotate(-6.6deg);
    -webkit-animation-delay: 1.5s;
}
.css_anime_juu5_sp {
    position: absolute;
    width: 22vw;
    top: 51%;
    left: 12%;
    transform: rotate(34.56deg);
    -webkit-animation-delay: 2s;
}
.css_anime_juu6_sp {
    position: absolute;
    width: 22vw;
    top: 64%;
    left: 54%;
    transform: rotate(21.86deg);
    -webkit-animation-delay: 2.5s;
}


.css_opacity{
    opacity: 0;
}
.css_opacity_r{
    opacity: 1;
}
.css_anime_start .css_anime_juu{
    -webkit-animation-name: load_opacity;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}
.css_anime_start .css_anime_bg{
    -webkit-animation-name: load_opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}
@-webkit-keyframes load_opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.css_anime_start .css_anime_rokujuu, .css_anime_start .css_anime_rokujuu_sp{
    -webkit-animation-name: load_opacity_end;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier（0.0,0.75,1）;
    -webkit-animation-direction: normal;
}
@-webkit-keyframes load_opacity_end {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.css_anime_start .css_anime_smoke{
    -webkit-animation-name: load_smoke;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes load_smoke {
    0% {
        opacity: 0.1;
        transform: scale(0.5);
        margin-top: 15vh;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0.5;
        transform: scale(2.0);
        margin-top: -50vh;
    }
}

.css_anime_start .css_anime_smoke_sp{
    -webkit-animation-name: load_smoke_sp;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes load_smoke_sp {
    0% {
        opacity: 0.1;
        transform: scale(0.5);
        margin-top: 5vh;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0.5;
        transform: scale(2.0);
        margin-top: -50vh;
    }
}


.css_juu_outer{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation-delay: 4.5s;
}
.css_anime_start .css_juu_outer{
    -webkit-animation-name: load_opacity_r;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
}
@-webkit-keyframes load_opacity_r {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.css_end_load{
    -webkit-animation-name: load_opacity_r;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0s;
}

.css_start_main{
    -webkit-animation-name: load_opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0s;
}
/* 箸の回転アニメ */
.css_img_60th{
    position: absolute;
    top: 76%;
    right: 0;
    width: 80%;
    transform-origin: top right!important;
}

.css_img_60th_sp{
    position: absolute;
    top: 80%;
    right: 0px;
    width: 95%;
    transform-origin: top right !important;
}


/* 共通設定 */
.css_outer {
    text-align:center;
}
.css_image{
    display: block;
    margin: auto;
    width: 100%;
}
.css_image90{
    display: block;
    margin: auto;
    width: 90%;
}
.css_image90left{
    display: block;
    width: 90%;
}

.relative {
  position: relative;
}
.css_news_outer{
    background-size: 100% 100%;
    margin: 0 auto;
    background-position: center;
}

/* 予約ボタン */
.css_btn_reserve{
    position: absolute;
    top: 0.5%;
    right: 2.5%;
    width: 18.5%;
    height: 2.5%;
    z-index: 5000;
}

.css_btn_reserve_sp{
    position: absolute;
    width: 29.5%;
    height: 3.7%;
    top: 2%;
    left: 66%;
    z-index: 5000;
}

.css_news_list{
    position: absolute;
    width: 53.5%;
    height: 6.5%;
    top: 35.5%;
    left: 1%;
    z-index: 5000;
}

/* お店を探すボタン */
.css_btn_search{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 6000;
}

.css_btn_search_sp{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 6000;
}

/* 「ジュー」の文字画像 */
.css_text_juu1{
    position: absolute;
    width: 15vw;
    top: 11%;
    left: 4%;
}
.css_text_juu2{
    position: absolute;
    width: 15vw;
    top: 17%;
    left: 66%;
}
.css_text_juu3{
    position: absolute;
    width: 15vw;
    top: 31%;
    left: 49%;
}

/* 「ジュー」の文字画像スマホ */
.css_text_juu1_sp{
    position: absolute;
    width: 15vw;
    top: 32%;
    left: 34%;
}
.css_text_juu2_sp{
    position: absolute;
    width: 15vw;
    top: 7%;
    left: 32%;
}
.css_text_juu3_sp{
    position: absolute;
    width: 15vw;
    top: 35%;
    left: 7%;
}
.css_text_juu4_sp{
    position: absolute;
    width: 15vw;
    top: 28%;
    left: 27%;
}
.css_text_juu5_sp{
    position: absolute;
    width: 15vw;
    top: 10%;
    left: 63%;
}

/* 「ジュー」文字点滅アニメ */
.css_anime_opacity{
    -webkit-animation-name: anime_opacity;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes anime_opacity {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 煙画像 */
.css_img_smoke1{
    position: absolute;
    width: 20vw;
    top: 24%;
    left: 58%;
}
.css_img_smoke2{
    position: absolute;
    width: 20vw;
    top: 4%;
    left: 74%;
}
.css_img_smoke3{
    position: absolute;
    width: 20vw;
    top: 4%;
    left: 8%;
}
.css_img_smoke4{
    position: absolute;
    width: 25vw;
    top: 30%;
    left: 20%;
}

/* 煙画像SP */
.css_img_smoke1_sp{
    position: absolute;
    width: 30vw;
    top: 25%;
    left: 80%;
}
.css_img_smoke3_sp{
    position: absolute;
    width: 30vw;
    top: 28%;
    left: 5%;
}
.css_img_smoke4_sp{
    position: absolute;
    width: 30vw;
    top: 40%;
    left: -11%;
}
.css_img_smoke5_sp{
    position: absolute;
    width: 30vw;
    top: 5%;
    left: 51%;
}
.css_img_smoke6_sp{
    position: absolute;
    width: 30vw;
    top: 8%;
    left: 12%;
}
.css_img_smoke7_sp{
    position: absolute;
    width: 30vw;
    top: 27%;
    left: 61%;
}
.css_img_smoke8_sp{
    position: absolute;
    width: 30vw;
    top: 30%;
    left: 37%;
}

/* 煙画像アニメ */
.css_anime_smoke1{
    -webkit-animation-name: anime_smoke1;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0s;
}
@-webkit-keyframes anime_smoke1 {
    0% {
        opacity: 0.1;
        margin-top : 10vh;
        margin-left : 0;
        transform: scale(0.9);
    }
    25% {
        margin-left : -1vw;
        transform: scale(1.1);
    }
    49% {
        opacity: 0.5;
        margin-top : 0;
        margin-left : 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.5;
        margin-top : 0;
        margin-left : 0;
        transform: scale(0.9);
    }
    75% {
        margin-left : 1vw;
        opacity: 0.5;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        margin-top : -10vh;
        margin-left : 0;
        transform: scale(0.9);
    }
}


/* ニュースへのリンク */
.css_link_news1{
    position: absolute;
    top: 18%;
    left: 4%;
    width: 20%;
    height: 1.5%;
}

.css_link_news2{
    position: absolute;
    top: 18.2%;
    left: 4%;
    width: 21%;
    height: 1.6%;
}
.css_link_news3{
    position: absolute;
    top: 19.9%;
    left: 4%;
    width: 21%;
    height: 1.6%;
}

.css_link_news4{
    position: absolute;
    top: 22.9%;
    left: 4%;
    width: 20%;
    height: 1.5%;
}

/* メイン画像 */
.css_fv{
    background-image: url("./img/bgfv.png");
}
.css_news1{
    background-image: url("./img/bg1.png");
    padding-top : 5vh;
}
.css_news2{
    background-image: url("./img/bg2.png");
    padding-top : 5vh;
    padding-bottom : 5vh;
}
.css_news3{
    background-image: url("./img/bg3.png");
    padding-top : 10vh;
    padding-bottom: 10vh;
}
.css_news4{
    background-color: rgb(255, 46, 0);
    padding-bottom: 10vh;
}
.css_share{
    background-image: url("./img/bg_SNS.png");
    padding-top: 10vh;
    padding-bottom: 10vh;
}

/* メイン画像_スマホ版 */
.css_fv_sp{
    background-image: url("./img/bgfv_sp.png");
    padding-bottom: 5vh;
}
.css_news1_sp{
    background-image: url("./img/bg1_sp.png");
    padding-top : 5vh;
}
.css_news2_sp{
    background-image: url("./img/bg2_sp.png");
    padding-top : 5vh;
    padding-bottom : 5vh;
}
.css_news3_sp{
    background-image: url("./img/bg3_sp.png");
    padding-top : 10vh;
    padding-bottom: 10vh;
}
.css_news4_sp{
    background-color: rgb(255, 46, 0);
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.css_share_sp{
    background-image: url("./img/bg_SNS_sp.png");
    padding-top: 10vh;
    padding-bottom: 20vh;
}

/* ニュース一覧ダイアログ */
#id_btn_news{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 5vh;
    z-index: 10000;
}

.css_btn_news_sp{
    width: 90%;
    height: 90%;
}

.css_link_news1_sp{
    position: absolute;
    top: 27%;
    left: 10%;
    width: 73%;
    height: 11%;
}
.css_link_news2_sp{
    position: absolute;
    top: 22%;
    left: 10%;
    width: 73%;
    height: 8%;
}
.css_link_news3_sp{
    position: absolute;
    top: 32%;
    left: 10%;
    width: 73%;
    height: 8%;
}
.css_link_news4_sp{
    position: absolute;
    top: 66%;
    left: 10%;
    width: 73%;
    height: 11%;
}

.css_close{
    position: absolute;
    top: 82.5%;
    left: 37%;
    width: 26%;
    height: 5%;
}

/* SNSへのリンク */
.css_link_fb{
    position: absolute;
    top: 52%;
    left: 36%;
    width: 7.5%;
    height: 14%;
}
.css_link_x{
    position: absolute;
    top: 52%;
    left: 47%;
    width: 7.5%;
    height: 14%;
}
.css_link_line{
    position: absolute;
    top: 52%;
    left: 58%;
    width: 7.5%;
    height: 14%;
}

/* SNSへのリンク スマホ版 */
.css_link_fb_sp{
    position: absolute;
    top: 40%;
    left: 33%;
    width: 10.5%;
    height: 10%;
}
.css_link_x_sp{
    position: absolute;
    top: 40%;
    left: 46%;
    width: 10.5%;
    height: 10%;
}
.css_link_line_sp{
    position: absolute;
    top: 40%;
    left: 59.5%;
    width: 10.5%;
    height: 10%;
}

@media screen and (min-width: 751px) {
    .spOnly {
        display: none !important;
    }
}

@media screen and (max-width: 750px) {
    .pcOnly {
        display: none !important;
    }
    .css_image{
        width: -webkit-fill-available;
    }
}

.css_hide{
    display : none;
}
.css_sp_outer{
    overflow-x: hidden;
}