/* new add css - 2022 */
@font-face {
  font-family: Bodoni Moda Regular;
  src: url(../font/BodoniModa-Regular.woff) format('woff');
}

@font-face {
  font-family: Bodoni Moda Regular;
  src: url(../font/BodoniModa-Regular.woff2) format('woff2');
}

.pagetop:after{ background: url("../image/pagetop.svg") no-repeat 50%/100%;}

.section-breadcrumb{
    margin: 50px 0 30px;
}

#index .main_content .ring-item-title {
    font-family: 'Bodoni Moda Regular', serif;
}

#index .main_content .ring-item-title,
#index .main_content .thumbnail-title,
#index .main_content .series-item-title,
#index .main_content .three-thumbnail-title,
#index .main_content .section-reservation .section-headline .title,
#index .main_content .about_iprimo-title,
#index .main_content .section-news .section-headline .title{
    font-family: 'Bodoni Moda Regular', serif;

}

#index .main_content .ring-item-subtitle,
#index .main_content .thumbnail-sub-title,
#index .main_content .series-item-subtitle,
#index .main_content .three-thumbnail-title.sub-title{
   font-family: 'Noto Serif TC',serif;
}

#index .main_content .ring-item .ring-item-text,
#index .main_content .series-item-text,
#index .main_content .section-reservation .section-headline p.text{
font-family: 'Noto Sans TC', sans-serif;
}





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

p.ring-item-text.text{
    font-size: 16px;
}
#index .main_content .thumbnail-sub-title,
#index .main_content .three-thumbnail-title.sub-title{
font-size: 1.6rem;
}

#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;
}

.main_content .series-item-title{
    line-height: 1;
}

#index .main_content .about_three_rings.is-scroll-init{
    opacity: 0;
    transition: all 0ms;
    transform: translate3d(0, 0px, 0);
}

#index .main_content .series-item-text{
    margin: 40px 0 0;
}

#index .main_content .about_three_rings.is-scroll-visibled{
    opacity: 1;
    transition-timing-function: cubic-bezier(0.4, 0.2, 0.1, 1);
    transition-duration: 0.8s;
    transition-property: all;
    transform: translateZ(0);
}

.box-content-outter{
    position: relative;
    display: block;
    width: 100%;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 50px;
}

.show-content .box-content{
    position: relative;
}

.box-content{
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: block;
    width: 100%;
}

.box-content-wrap .button-wrap{
    text-align: center;
    justify-content: center;
}


.box-content-wrap{
    visibility: hidden;
    opacity: 0;
    display: block;
    width: 100%;
    transform: translateY(0px);
}

.show-content {
    visibility: visible;
    opacity: 1;
    position: relative;
}

.series-item-title,
.series-item-subtitle,
.series-item-text,
.three-rings-button{
    opacity: 0;
}

.show-content .series-item-title,
.show-content .series-item-subtitle,
.show-content .series-item-text,
.show-content .three-rings-button{
    visibility: visible;
    opacity: 1;
    animation: fade-in-three-rings;
    animation-duration: 1s;
    -webkit-animation:fade-in-three-rings;
    -webkit-animation-duration: 1s;
    -moz-animation: fade-in-three-rings;
    -moz-animation-duration: 1s;
    -ms-animation: fade-in-three-rings;
    -ms-animation-duration: 1s;
    -o-animation: fade-in-three-rings;
    -o-animation-duration: 1s;
}

.show-content .series-item-subtitle{
    opacity: 0;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.1s;
    -moz-animation-fill-mode: forwards;
    -ms-animation-delay: 0.1s;
    -ms-animation-fill-mode: forwards;
    -o-animation-delay: 0.1s;
    -o-animation-fill-mode: forwards;
}

.show-content .series-item-text,
.show-content .three-rings-button{
    opacity: 0;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.2s;
    -moz-animation-fill-mode: forwards;
    -ms-animation-delay: 0.2s;
    -ms-animation-fill-mode: forwards;
    -o-animation-delay: 0.2s;
    -o-animation-fill-mode: forwards;
}

@keyframes fade-in-three-rings {
    from {opacity: 0; transform: translateY(50px);}
    to {opacity: 1; transform: translateY(0px);}
}


.box-image{
    width: 100%;
}

.box-image-outter{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

#index .main_content .box-image-outter .series-item-float{
    position: relative;
    width: 33%;

}

#index .main_content .section-three-rings {
    margin: 130px 0 0;
}

#index .main_content .three-rings-button .button{
    color: #fff;
    border-color: #fff;
}
#index .main_content .three-rings-button .button span{
    margin: 0px 20px 0px 20px;
}

#index .main_content .three-rings-button .button:hover{
    color: #000;
    border-color: #000;
    cursor: pointer;
}

.box-image-inner-wrap:nth-child(2){
    padding-top: 0px;
}

.box-image-inner-wrap{
    padding: 0px;
    width: 32.8%;
}

.box-image-inner-wrap{
    display: block;
}



#index .main_content .box-image-inner,
#index .main_content .ring-box-image-inner{
    display: block;
    cursor: pointer;
    
}



#index .main_content .section-three-rings .box-image-inner:hover > .three-thumbnail-img-inner-content .three-thumbnail-title::after{
  width: 100%;
  left: 0;
  cursor: pointer;
}

#index .main_content .js-smtscroll-item-img:hover > .three-thumbnail-img-inner-content .three-thumbnail-title::after{
  width: 100%;
  left: 0;
  cursor: pointer;
}

.three-thumbnail-img-inner-content{
    cursor: pointer;
    
}
.three-thumbnail-img-inner-content{
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    padding: 0px 0 0;
    bottom: 0px;
    flex-direction: column;
}


.three-thumbnail-title{
    position: relative;
}


.three-thumbnail-title::after{
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: #808080;
  transition: 300ms;
  left: 50%;
  position: absolute;
}

.three-thumbnail-title{
    margin: unset;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 2rem;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

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

.box-image-visual{
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.box-image-visual img {
    vertical-align: top;
    max-width: 100%;
    -moz-transition: all .85s;
    -webkit-transition: all .85s;
    transition: all .85s;
}


#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.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}


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


.box-image-inner-wrap .js-smtscroll-item-wrap{
    height: 400px !important;
    overflow: unset;
}



/* about-other-item-section */

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

#index .main_content .about_other-item{
    width: 100%;
}
#index .main_content .about_other-item:not(:first-child){
    margin: 0 0 0 0.3%;
}
#index .main_content .about_other-item-inner{
    display: inline-flex;
}

#index .main_content .about_other-item-visual{
    width: 40%;
    padding: 15px;
}

#index .main_content .about_other-item-content{
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 60%;
    padding: 20px 15px 20px 0px;
}

#index .main_content .about_other-item-content .icon{
    right: 15px;
    opacity: 1;
    transform: translate3d(-10px, -50%, 0);
    scale: 1;
    top: 50%;
}

#index .main_content .about_other-item-content .icon path{
    fill: none;
    stroke: #999;
}

#index .main_content .about_other-item-inner.is-touch-hover .about_other-item-content .icon {
    opacity: 1;
    transform: translate3d(0px, -50%, 0);
    top: 50%;
}

#index .main_content .about_other-item-title,
#index .main_content .about_other-item-subtitle{
display: block;
text-align: left;
}

#index .main_content .section-about .button.is-border{
    color: #fff;
    background-color: #453536;
    border-color:  transparent;
}

#index .main_content .section-about .button.is-border:hover{
    color: #000;
    background-color: transparent;
    border-color:  #000;
}


#index .main_content .about_other-item-inner.is-touch-hover {
    background-color: #fff;
}

#index .main_content .about_other-item-inner .about_other-item-visual .js-aspect-wrap {
    overflow: hidden;
}

#index .main_content .about_other-item-inner.is-touch-hover .about_other-item-visual .js-aspect-wrap {
    overflow: hidden;
}

#index .main_content .about_other-item-inner.is-touch-hover .about_other-item-visual img {
    transform: scale(1.1);
}


#index .main_content .about_other-item-content .icon path{
    fill: #453536;
    stroke: none;
}


#index .main_content .about_other.is-scroll-visibled .about_other-item{
  border-style: solid;
  border-width: 1px 0;
  border-color: #f5f5f5;
}

#index .main_content .about_other .about_other-item{
  border-style: solid;
  border-width: 1px 0;
  border-color: #f5f5f5;
}
#index .main_content .section-about-other{
    margin: 160px 0 0;
}
#index .main_content .section-about,
#index .main_content .section-instagram{
    margin: 80px 0 0;
}

#index .main_content .section-news{
    margin: 80px 0 0;
}
#index .main_content .section-sp_contents {
    margin: 80px 0 0;
}
/* about-section */

#index .main_content .about_iprimo.is-scroll-visibled{
    padding-top: 100px;
}

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




/* content-section */

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

#index .main_content .sp_contents-item-visual{
    width: auto;
}

#index .main_content .section-sp_contents.is-scroll-visibled .sp_contents-item{
    text-align: center;
}

#index .main_content .sp_contents-item-inner{
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.#index .main_content .sp_contents-item-content{
    display: inline-block;
}

#index .main_content .sp_contents-item-inner.is-touch-hover {
    box-shadow: unset;
}
#index .main_content .sp_contents-item-inner.is-touch-hover .sp_contents-item-visual img {
    transform: scale(1);
}

#index .main_content .sp_contents-item-inner .sp_contents-item-title,
#index .main_content .sp_contents-item-inner .sp_contents-item-subtitle{
  display: table;
  text-align: left;
}

#index .main_content .sp_contents-item-inner .sp_contents-item-title{
  line-height: 1.3;
}

#index .main_content .sp_contents-item-inner .sp_contents-item-title::after,
#index .main_content .sp_contents-item-inner .sp_contents-item-subtitle::after{
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: #808080;
  transition: 300ms;
}

#index .main_content .sp_contents-item-inner.is-touch-hover .sp_contents-item-title::after,
#index .main_content .sp_contents-item-inner.is-touch-hover .sp_contents-item-subtitle::after{
  width: 100%;
}

#index .main_content .sp_contents-item-inner .icon{
    position: relative;
    right: 0;
    margin-left: 10px;
    transition: all .45s cubic-bezier(.785,.135,.15,.86) 0ms;
}

#index .main_content .sp_contents-item-inner.is-touch-hover .icon{
    transform: translate3d(5px, 0px, 0px);
}




/* 4ring */

#index .main_content .ring-item-text{
    margin: 40px 0 0;
}

#index .main_content .ring-item{
display: flex;
flex-direction: column;
}
#index .main_content .ring-item:not(:nth-child(2n)){
   flex-direction: column; 
}
#index .main_content .ring-box-thumbnail-img .ring-item-visual{
    width: 100%;
}

#index .main_content .ring-item-visual{
    width: 50%;
}

.ring-box-image-inner .ring-item-visual{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}


.ring-scrollbar{
    display: none;
}


.ring-thumbnail{
    display: inline-flex;
    width: 100%;
    transform: translate3d();
    opacity: 1;
    justify-content: space-between;
    margin-top: 1%;
    gap: 1%;

}

.ring-box-thumbnail-img{
    display: block;
    width: 32.8%;
    cursor: unset;
    position: relative;
    
}

.ring-thumbnail-img-inner-visual{
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ring-box-thumbnail-img img{
    cursor: pointer;

}

.ring-box-thumbnail-img img{
    width: 100%;
    display: block;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    transition: all 0.8s;
}
#index .main_content .ring-item-visual.ring-box-thumbnail-active-hover img,
#index .main_content .ring-item-visual:hover img{
    -moz-transform: scale(1.2) !important;
    -webkit-transform: scale(1.2) !important;
    transform: scale(1.2) !important;
    cursor: pointer;
}

.thumbnail-title::after{
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: #808080;
  transition: 300ms;
  left: 50%;
  position: absolute;
}

#index .main_content .thumbnail-img-inner-content.active-hover .thumbnail-title::after{
  width: 100%;
  left: 0;
  cursor: pointer;
}

.thumbnail-title{
    margin: unset;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 2rem;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

.thumbnail-title{
    cursor: pointer;
    
}
.thumbnail-img-inner-content{
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    padding: 0px 0 0;
    bottom: 0px;
    flex-direction: column;
}

.thumbnail-title{
    position: relative;
}



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




.ring-box-thumbnail-active{
position: relative;
opacity: 1;
visibility: visible;
}

.ring-box-thumbnail-active-hover{
    display: block;
    opacity: 1;
}

.ring-box-thumbnail-img.ring-box-thumbnail-active.ring-box-thumbnail-active-hover{
    display: block ;
}


.ring-big-box{
    width: 0px;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    display: flex;
}

.ring-big-box-inner{
    display: inline-flex;
    width: 100%;
    align-items: center;
    column-gap: 1%;
}

.ring-big-box-inner{
    opacity: 0;
    visibility: hidden;
}

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

.ring-big-box-inner-content,
.ring-big-box-inner-visual{
    width: 50%;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-big-box-inner-content{
    visibility: hidden;
    opacity: 0;
}


.ring-big-box-inner-visual img{
    display: block;
    overflow: hidden;
    transform: scale(1);

}

#index .main_content .ring-item.is-scroll-init .ring-box-active .ring-big-box-inner-visual{
    display: block;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-big-box-inner-visual{
    display: block;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
}

#index .main_content .ring-item.is-scroll-init .ring-item-visual{
    opacity: 0;
}

#index .main_content .ring-item.is-scroll-visibled .ring-item-visual{
    opacity: 1;
}

#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-big-box-inner-visual img{
    animation: fade-in-zoom;
    animation-duration: 1.5s;
    -webkit-animation:fade-in-zoom;
    -webkit-animation-duration: 1.5s;
    -moz-animation: fade-in-zoom;
    -moz-animation-duration: 1.5s;
    -ms-animation: fade-in-zoom;
    -ms-animation-duration: 1.5s;
    -o-animation: fade-in-zoom;
    -o-animation-duration: 1.5s;
}

.ring-box-active{
    width: 100%;
    position: relative;
    opacity: 1;
    visibility: visible;
}



.ring-box-active .ring-big-box-inner-content{
    width: 50%;
    position: relative;
    opacity: 1;
    top: unset;
    left: unset;
    transform: unset;
    padding-left: 50px;
    visibility: visible;
}

.ring-box-active .ring-big-box-inner-visual{
    width: 50%;
    position: relative;
    opacity: 1;
    top: unset;
    left: unset;
    transform: unset;
}


#index .main_content .ring-item.is-scroll-visibled .ring-item-button,
#index .main_content .ring-item.is-scroll-visibled .ring-item-text,
#index .main_content .ring-item.is-scroll-visibled .ring-item-subtitle,
#index .main_content .ring-item .ring-item-button,
#index .main_content .ring-item .ring-item-text,
#index .main_content .ring-item .ring-item-subtitle{
    opacity: 0;    
}



#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{
    opacity: 0;
    transition: none ;
    transition-delay: unset ;
}

#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{
    opacity: 0;
}

.ring-item-title,
.ring-item-text,
.ring-item-button,
.ring-item-subtitle{
    opacity: 0;
    visibility: hidden;
}


#index .main_content .ring-item.is-scroll-init .ring-item-title{
    opacity: 0;
    transform: translateY(0px);
}
#index .main_content .ring-item.is-scroll-visibled .ring-item-title {
    visibility: visible;
    transform: translateY(0px);
}


#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-title,
#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-text,
#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-button,
#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-subtitle{
    visibility: visible;
    opacity: 1;
    animation: fade-in-moves;
    animation-duration: 1s;
    -webkit-animation:fade-in-moves;
    -webkit-animation-duration: 1s;
    -moz-animation: fade-in-moves;
    -moz-animation-duration: 1s;
    -ms-animation: fade-in-moves;
    -ms-animation-duration: 1s;
    -o-animation: fade-in-moves;
    -o-animation-duration: 1s;
}


#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-subtitle{
    opacity: 0;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.1s;
    -moz-animation-fill-mode: forwards;
    -ms-animation-delay: 0.1s;
    -ms-animation-fill-mode: forwards;
    -o-animation-delay: 0.1s;
    -o-animation-fill-mode: forwards;
}



#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-text,
#index .main_content .ring-item.is-scroll-visibled .ring-box-active .ring-item-button{
    opacity: 0;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-delay: 0.2s;
    -moz-animation-fill-mode: forwards;
    -ms-animation-delay: 0.2s;
    -ms-animation-fill-mode: forwards;
    -o-animation-delay: 0.2s;
    -o-animation-fill-mode: forwards;
}


#index .main_content .ring-item.is-scroll-visibled .ring-thumbnail{
    visibility: visible;
    opacity: 1;
    animation: fade-in;
    animation-duration: 1s;
    -webkit-animation:fade-in-moves;
    -webkit-animation-duration: 1s;
    -moz-animation: fade-in-moves;
    -moz-animation-duration: 1s;
    -ms-animation: fade-in-moves;
    -ms-animation-duration: 1s;
    -o-animation: fade-in-moves;
    -o-animation-duration: 1s;
}

#index .main_content .ring-item .ring-thumbnail{
    opacity: 0;
}

@keyframes fade-in-zoom {
    from {opacity: 0; transform: scale(1.2);}
    to {opacity: 1; transform: scale(1);}
}

@keyframes fade-in-moves {
    from {opacity: 0; transform: translateY(50px);}
    to {opacity: 1; transform: translateY(0px);}
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

#index .main_content .ring-item-button .button span{
    margin: 0px 20px 0px 20px;
}



.button.is-reserve, .button.is-reserve-bookmark{
    border-radius: 100px;
}


@media print, screen and (min-width: 1160px) {
    #index .main_content .sp_contents-item {
        width: 25%;
    }
    #index .main_content .sp_contents-item:not(:nth-child(-n + 3)) {
        margin-top: unset;
    }
    #index .main_content .sp_contents-item:not(:nth-child(3n + 1)) {
        margin-left: unset;
    }
}
@media print, screen and (min-width: 1080px) and (max-width: 1159px) {
    #index .main_content .sp_contents-item {
        width: 25%;
    }
    #index .main_content .sp_contents-item:not(:nth-child(-n + 3)) {
        margin-top: unset;
    }
    #index .main_content .sp_contents-item:not(:nth-child(3n + 1)) {
        margin-left: unset;
    }
}
@media print, screen and (max-width: 1079px) {
    #index .main_content .sp_contents-item {
        width: 25%;
    }
    #index .main_content .sp_contents-item:not(:nth-child(-n + 3)) {
        margin-top: unset;
    }
    #index .main_content .sp_contents-item:not(:nth-child(3n + 1)) {
        margin-left: unset;
    }
}





@media print, screen and (min-width: 1360px){
    .wrap.is-large {
        max-width: 1320px;
    }
    #index .main_content .section-breadcrumb .wrap.is-large {
        max-width: 1320px;
    }
    #index .main_content .section-instagram .wrap{
        max-width: 1320px;
    }
    #index .main_content .section-news .wrap{
        max-width: 1320px;
    }
    #index .main_content .section-sp_contents .wrap{
        max-width: 1320px;
    }
    #index .main_content .section-about .wrap{
        max-width: 1320px;
    }
    #index .main_content .section-about-other .wrap{
        max-width: 1320px;
    }
     #index .main_content .section-three-rings .wrap{
        max-width: 1650px;
    }

    #index .main_content .section-ring .wrap{
        max-width: 1400px;
    }

}
@media print, screen and (max-width: 1023px){
#index .main_content .feed-item {
    width: 20%;
    margin: unset;
    padding: 2px;
}
}
@media print, screen and (max-width: 1079px){
#index .main_content .sp_contents-item:not(:nth-child(-n + 2)) {
    margin-top:0%;
}
#index .main_content .sp_contents-item:not(:nth-child(odd)){
    margin-left: 0%;
}
}

#index .main_content .about_iprimo .media_bg-visual {
    height: auto;
}