/* new add css mobile - 2022 */






/* desktop */
@media print, screen and (min-width: 1600px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 350px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        /* height: 405px !important; */
        height: 425px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
        padding: 0px 20px;
    }
}

/* big-laptop4 */
@media print, screen and (min-width: 1550px) and (max-width: 1599px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 350px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 415px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
        padding: 0px 20px;
    }
}

/* big-laptop3 */
@media print, screen and (min-width: 1501px) and (max-width: 1549px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 335px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 395px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
        padding: 0px 20px;
    }
}

/* big-laptop2 */
@media print, screen and (min-width: 1451px) and (max-width: 1500px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 335px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 385px !important;
    }

    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
        padding: 0px 20px;
    }
}

/* big-laptop1 */
@media print, screen and (min-width: 1401px) and (max-width: 1450px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 345px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 375px !important;
    }

    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
        padding: 0px 20px;
    }
}

/* laptop-tablet6 */
@media print, screen and (min-width: 1351px) and (max-width: 1400px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 345px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 360px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}

/* laptop-tablet5 */
@media print, screen and (min-width: 1301px) and (max-width: 1350px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 330px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 355px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}


/* laptop-tablet4 */
@media print, screen and (min-width: 1200px) and (max-width: 1300px){
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 315px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 340px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}


/* laptop-tablet3 */
@media print, screen and (min-width: 1141px) and (max-width: 1199px){
    #index .main_content .ring-item .ring-item-title{
        font-size: 4.5rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.8rem;
    }
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 290px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 310px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}


/* laptop-tablet2 */
@media print, screen and (min-width: 1024px) and (max-width: 1140px){
    #index .main_content .ring-item .ring-item-title{
        font-size: 4.5rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.8rem;
    }
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 280px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 295px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}


/* laptop-tablet1 */
@media print, screen and (min-width: 969px) and (max-width: 1023px){
    #index .main_content .ring-item .ring-item-title{
        font-size: 4.5rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.8rem;
    }
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 270px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 270px !important;
    }
    #index .main_content .section-ring .wrap,
    #index .main_content .section-three-rings .wrap{
    padding: 0px 20px;
    max-width: 100%;
    }
}


/* tablet-2 */
@media print, screen and (min-width: 769px) and (max-width: 968px){
    #index .main_content .ring-item .ring-item-title{
        font-size: 3.5rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.6rem;
    }

    #index .main_content .series-item-title{
        font-size: 3.5rem;        
    }
    #index .main_content .series-item-subtitle{
        font-size: 1.6rem;        
    }
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 250px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 245px !important;
    }
}

/* tablet-1 */
@media print, screen and (min-width: 601px) and (max-width: 768px){
    #index .main_content .ring-item .ring-item-title{
        font-size: 3.5rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.6rem;
    }

    #index .main_content .series-item-title{
        font-size: 3.5rem;        
    }
    #index .main_content .series-item-subtitle{
        font-size: 1.6rem;        
    }
    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 170px !important;
    }
    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 225px !important;
    }
}










/* media 600px */
@media print, screen and (max-width: 600px) {



#index .main_content .series-item-text,
#index .main_content .section-reservation .section-headline p.text{
    font-size: 13px;
}

    #index .main_content .ring-item .ring-item-title{
        font-size: 2.4rem;
    }

    #index .main_content .ring-item .ring-box-active .ring-item-subtitle{
        font-size: 1.8rem;
    }

    #index .main_content .ring-item-title{
        margin-top: 25px;
    }

    #index .main_content .series-item-title,
    #index .main_content .series-image-title,
    #index .main_content .ring-item-title{
        font-size: 2.4rem;
    }

    #index .main_content .series-item-subtitle,
    #index .main_content .ring-item.is-scroll-visibled .ring-item-subtitle{
            font-size: 1.8rem;
    }

    #index .main_content p.ring-item-text.text{
        font-size: 14px;
    }

    #index .main_content .ring-item-text{
        margin-top: 25px;
    }

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 220px !important;
    }

    .box-image-inner-wrap .js-smtscroll-item-wrap{
        height: auto !important;
    }
    .box-image-inner-wrap.img-on.box-image-inner-wrap .js-smtscroll-item-wrap{
        height: 255px !important;
    }


    /* section-1 */
    .ring-big-box-inner{
        display: flex;
        flex-wrap: wrap;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .ring-big-box-inner-content{
    width: 100%;
    display: block;
    padding-left: 0px;
    }

    #index .main_content .ring-item .ring-big-box-inner-visual{
    width: 100%;
    }

    .ring-box-active .ring-big-box-inner-content{
    width: 100%;
    display: block;
    padding-left: 0px;
    margin-bottom: 50px;
    }



    #index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-big-box-inner-visual{
    width: 100%;
    }

    .ring-big-box-show{
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: unset;
    }

    .ring-scrollbar{
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 100px;
    background-color:#f5f5f5;
    scroll-snap-type: x mandatory;
    position: relative;
    }

    .ring-scrollbar-inner{
    display: block;
    width: 10%;
    height: 5px;
    border-radius: 100px;
    background-color:#453536;
    transform: translate3d(calc(0 - 0%),0,0);
    transition: transform 0.0001s ;
    position: absolute;
    overflow-x: scroll;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    }

    .ring-scrollbar-inner:hover{
    display: block;
    height: 5px;
    position: absolute;
    overflow-x: unset;
    }

    .ring-scrollbar-inner:hover::after{
    content: '';
    border: 5px #453536 solid;
    width: 100%;
    display: block;
    border-radius: 50px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 3;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    }


    #index .main_content .ring-item.is-scroll-visibled .ring-big-box-inner-content,
    #index .main_content .ring-item.is-scroll-visibled .ring-big-box-inner-visual {
    width: 100%;
    position: relative;
    opacity: 1;
    visibility: visible;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
    }

    .ring-big-box-inner-content{
    visibility: visible;
    opacity: 1;
    }


    #index .main_content .ring-item.is-scroll-init .ring-item-title,
    #index .main_content .ring-item.is-scroll-init .ring-item-button,
    #index .main_content .ring-item.is-scroll-init .ring-item-subtitle,
    #index .main_content .ring-item.is-scroll-init .ring-item-text{
    visibility: visible;
    opacity: 0;  
    }

    #index .main_content .ring-item.is-scroll-visibled .ring-item-title,
    #index .main_content .ring-item.is-scroll-visibled .ring-item-button,
    #index .main_content .ring-item.is-scroll-visibled .ring-item-subtitle,
    #index .main_content .ring-item.is-scroll-visibled .ring-item-text{
    visibility: visible;
    opacity: 1;  
    }

    .ring-big-box {
    align-items: flex-start;

    flex: 0 0 80vw;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    opacity: 1;
    visibility: visible;

    }

    .ring-big-box-inner-content,
    .ring-big-box-inner{
    visibility: visible;
    opacity: 1;
    }

    .ring-big-box-show{
        display: none;
    }

    #index .main_content .ring-item .ring-thumbnail{
    display: block;
    width: 100%;
    }

    .ring-box-thumbnail-img{
        width: 100%;
        overflow: hidden;
        margin-top: 10px;
    }

    #index .main_content .ring-item .button.is-primary{
        margin: unset;
        width: 180px;
        height: 45px;
        border-radius: 200px;
    }
.ring-box-thumbnail-img:nth-child(1) .thumbnail-img-inner-content,
.ring-box-thumbnail-img:nth-child(3) .thumbnail-img-inner-content{
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
    width: 50%;
    margin-left: 50%;
}

.ring-box-thumbnail-img:nth-child(2) .thumbnail-img-inner-content,
.ring-box-thumbnail-img:nth-child(4) .thumbnail-img-inner-content{
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
    width: 50%;
    margin-left: 1%;
}

#index .main_content .ring-item .thumbnail-title{
    font-size: 1.8rem;
}

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
        overflow: hidden;
    }

    .ring-box-thumbnail-img .js-smtscroll-element{
        transform: translate3d(0px, 0px, 0px) !important;
    }

#index .main_content .thumbnail-sub-title.thumbnail-sub-title{
    font-size: 1.4rem;
}
        /* width */
        .ring-big-box-show::-webkit-scrollbar{
            display: none;
        -webkit-appearance: none;
        overflow: auto;
        width: 100%;
        height: 5px;
        background-color: #f5f5f5;
        border-radius: 10px;
        }

        /* Track */
        .ring-big-box-show::-webkit-scrollbar-track {

          border-radius: 10px;
        }
         
        /* Handle */
        .ring-big-box-show::-webkit-scrollbar-thumb {
          background: #453536; 
          border-radius: 10px;
        }

        /* Handle on hover */
        .ring-big-box-show::-webkit-scrollbar-thumb:hover{
          background: #453536; 
        }









    /* section-2 */

    #index .main_content .section-three-rings .box-image-inner-wrap:hover > .js-smtscroll-item.js-aspect-wrap .js-smtscroll-item-wrap.js-aspect .box-image-inner .box-image-visual img {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    cursor: pointer;
}

    #index .main_content .box-image-inner:hover > .box-image-visual img {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    cursor: pointer;
    }



    .box-image-inner-wrap.img-on.box-image-inner-wrap .js-smtscroll-item-wrap{
        position: relative;
        width: 100% !important;
        height: 82vw !important;
    }

    .box-image-outter #a1 .box-image-visual img{
    scale: 0.85;
    transition: all 0.8s;
    }

    .box-image-outter #a1.img-on .box-image-visual img{
    scale: 1;
    transition: all 0.8s;
    }

    .box-image-outter #a2 .box-image-visual img{
    scale: 0.85;
    transition: all 0.8s;
    }

    .box-image-outter #a2.img-on .box-image-visual img{
    scale: 1;
    transition: all 0.8s;
    }


    .box-image-outter #a3 .box-image-visual img{
    scale: 0.85;
    transition: all 0.8s;
    }

    .box-image-outter #a3.img-on .box-image-visual img{
    scale: 1;
    transition: all 0.8s;
    }

    .box-image-outter .box-image-visual{
        position: absolute;
    }

    .box-image-inner-wrap:nth-child(2){

    }

    #index .main_content .series-item-text{
        margin-top: 25px;

    }

    .box-image-inner-wrap.img-on{
        width: 70%;
        z-index: 999;
        transform: translate3d(0px, 0px, 0px) !important;
        transition: all 0.8s;
        flex-shrink: 0;
        position: relative;
    }
    .box-image-outter{
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    gap: 0px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: unset;
    }



.box-image-inner{
    margin-bottom: 0px;
}

    .box-image-inner-wrap{
        transform: translate3d(0px, 0px, 0px) !important;
        width: 70%;
        transform: unset;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }



        .box-image-outter::-webkit-scrollbar{
            display: none;
        -webkit-appearance: none;

        }



    .box-image-inner-wrap .js-smtscroll-item-img{
        transform: translate3d(0px, 0px, 0px) !important;
        position: absolute !important;
        width: 100% !important;

    }

    #index .main_content .box-image-title{
        display: none;
        position: relative;
        margin-top: 15px;

    }

    .section-three-rings .three-thumbnail-img-inner-content{
        display: none;
    }

    #index .main_content .series-image-title{
        font-size: 2.2rem;
        line-height: 1;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #index .main_content .box-content-outter{
        margin-bottom: 50px;
    }
    #index .main_content .three-rings-button .button{
        margin: unset;
        width: 180px;
        height: 45px;
        border-radius: 200px;}

    /* Reservation-section */
    .section-reservation .button-wrap{
        width: 300px;
        margin: 0 auto;
        padding: unset;
        margin-top: 25px;
    }

    .section-reservation .button-wrap.is-near .button{
        margin: 0 3px;
        border-radius: 100px;
        background-color: #ef9cab;
        border: 0px;
    }

    .section-reservation .section-headline{
        padding: 0 0px;
    }


    .ring-scrollbar-inner-section-2{
        width: 15%;
    }


    /* About-top-section */
    #index .main_content .about_other{
    display: block;
    overflow-x: unset;
    }
    #index .main_content .about_other-item-title{
        font-size: 1.4rem;        
    }
    #index .main_content .about_other-item-subtitle{
        font-size: 1.3rem;
    }

    #index .main_content .about_other .about_other-item{
        margin: -1px 0px -1px 0px;
    }
    #index .main_content .about_other-item-content{
        padding: 20px 0px 20px 0px;
    }

    #index .main_content .about_other-item-content .icon{
        right: 5px;
    }

    /* About-section */

    .media_bg-content{
    position: relative;
    width: 100%;
    display: flex;
    margin: 0 auto;
    max-width: unset;
    text-align: center;
    padding: 25px 10px 75px;
    justify-content: center;
    align-items: center;
    }
    .section-about .media_bg.is-white .button{
        width: 225px;
        height: 45px;
        border-radius: 200px;
    }


    /* icon-section */
    #index .main_content .sp_contents-item{
        width: 50%;
    }

    #index .main_content .sp_contents-item-inner{
        display: block;
    }
    #index .main_content .sp_contents-item-visual img{
        width: 60px !important;
    }
    #index .main_content .section-sp_contents .sp_contents-item:nth-child(3), #index .main_content .section-sp_contents .sp_contents-item:nth-child(4){
        margin-top: 25px;
    }
    #index .main_content .sp_contents-item-content{
        padding: 0px;
    }
    #index .main_content .sp_contents-item-inner .sp_contents-item-title, #index .main_content .sp_contents-item-inner .sp_contents-item-subtitle{
        margin: 0 auto;
    }
    #index .main_content .sp_contents-item-inner .sp_contents-item-title{
        font-size: 1.4rem;
    }
    #index .main_content .sp_contents-item-inner .sp_contents-item-subtitle{
        font-size: 1.3rem;
    }

    #index .main_content .sp_contents-item-content{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin: 0 auto;
    position: relative;
    }

    #index .main_content .sp_contents-item-inner .icon{
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    }

    /* news-section */
    #index .main_content .news-item-inner{
        flex-wrap: wrap;
        padding: 20px;
    }
    #index .main_content .section-news .news-item{
        border-width: 1px 0px 1px 0px;
        border-style: solid;
        border-color: #f5f5f5;
        margin: unset;
        margin: -1px 0px -1px 0px;
    }
    #index .main_content .news-item-content{
        white-space: normal;
    }



    /* ig-section */
    #index .main_content .feed-item{
        width: 48.87%;
        margin: 2px;
    }
    #index .main_content .feed-item:nth-child(4){
        display: none;
    }
    #index .main_content .section-news .section-headline{
        justify-content: center;
    }
    #index .main_content .section-news .more_button{
        margin: 0 auto;
        display: block;
        position: relative;
        margin-top: 40px;
        text-align: center;
    }

    /* ig-section */
    #index .main_content .section-instagram .follow{
        flex-direction: column;
        justify-content: center;
    }
    #index .main_content .follow-title::before{
        display: none;
    }
    #index .main_content .follow-title{
        padding: 0px 0px 0px;  
    }

    #index .main_content .follow ul{
        margin-top: 25px;
    }

    /* breadcrumb-section */
    .breadcrumb_nav ul{
        padding: 0 0px;
    }
    .section-breadcrumb .title{
        padding: 4px 0px;
    }

    #index .main_content .news-item-content{
        margin-top: 15px;
    }

/* section margin */

#index .main_content .section-sp_contents {
    margin: 0px 0 0;
}

#index .main_content .section-about{
    margin: 75px 0 0;
}

#index .main_content .section-about-other{
    margin: 0px 0px 80px 0;
}

.section-reservation{
    margin-top: 80px;
	margin-bottom: 80px;
}

#index .main_content .section-ring{
    margin-top: 0px;
}

#index .main_content .section-three-rings{
    margin-top: 90px;
}

    .wrap.is-large {
        padding: 0 10px;
        max-width: 100%!important;
    }
    #index .main_content .section-breadcrumb .wrap.is-large {
        padding: 0 10px;
        max-width: 100%!important;
    }
    #index .main_content .section-instagram .wrap{
        padding: 0 10px;
        max-width: 100%!important;
    }
    #index .main_content .section-news .wrap{
        padding: 0 10px;
        max-width: 100%!important;
    }
    #index .main_content .section-sp_contents .wrap{
        padding: 0 10px;
        max-width: 100%!important;
    }
    #index .main_content .section-about .wrap{
        padding: 0 0;
        max-width: 100%!important;
    }
    #index .main_content .section-about-other .wrap{
        padding: 0 10px;
        max-width: 100%!important;
    }
     #index .main_content .section-three-rings .wrap{
        padding: 0 10px;
        max-width: 100%!important;
    }

    #index .main_content .section-ring .wrap{
        padding: 0 20px;
        max-width: 100%!important;
    }



}

@media print, screen and (min-width: 551px) and (max-width: 599px){

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 205px !important;
    }

}

@media print, screen and (min-width: 450px) and (max-width: 550px){

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 195px !important;
    }

}

@media print, screen and (min-width: 390px) and (max-width: 450px){

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 170px !important;
    }

}

@media print, screen and (max-width: 389px){

    .ring-box-thumbnail-img .js-smtscroll-item-wrap{
    height: 160px !important;
    }

}