html{-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-font-smoothing: antialiased;}

.mainslide{ width: 100%; height: 90vh;}
.mainslide img{ width: 100%; height: 90vh; object-fit: cover;}
.mainslide .slick-dots{display: none !important;}


.readarea{ text-align: center; margin-bottom: 65px; margin-top: 50px; position: relative;}
.readarea .inner{ position: relative; z-index: 2; margin-bottom: 50px;}
.readarea h2{ max-width: 495px; margin: 0 auto; margin-bottom: 20px;}
.readarea h2 img{ width: 100%; height: auto;}
.titread{ font-size: 24px; font-weight: bold; margin-bottom: 50px;}
.readTxt{ font-size: 14px; line-height: 25px;}

.ftBanner { z-index: 1000;}


#scroll_bg01{ background: url("../img/area/1.png") left top no-repeat; background-size: 1366px 870px;
    width: 1366px; height: 870px;
}
#scroll_bg02{ background: url("../img/area/2.png") left top no-repeat; background-size: 1366px 870px;
    width: 1366px; height: 870px;
}
.objimg{ width: 100%; height: auto; position: absolute; left: 0; top: -50px;}
.objimg img{ width: 100%; height: auto;}

.area{ width: 1366px; height: 870px; position: relative; left: 50%; margin-left: -683px; }
.areaimg{ position: absolute; left: 0; top: 0;}
.areaimg img{ width: 100%; height: auto;}

.areatxt{ position: absolute; z-index: 90; font-size: 22px;}
.area .areatxt img{ width: 100%; height: auto;}
.lougetxt {
    left: 333px;
    top: 80px;
    width: 153px;
}

.cafetxt {
    right: 460px;
    top: 80px;
    width: 123px;
}


.ectvtxt {
    left: 255px;
    top: 320px;
    width: 222px;
}
.cmmttxt {
    left: 288px;
    bottom: 274px;
    width: 291px;
}

.meettxt {
    right: 286px;
    bottom: 264px;
    width: 165px;
}
/*vtour*/

.vtour{ width: 100%; position: relative; font-size: 0; margin-bottom: 120px;}

.sidetxtR{ font-size: 14px; font-weight: 600; writing-mode: vertical-rl;  -ms-writing-mode: tb-rl;

    position: absolute; right: 40px; top: 0;}

.vtimg{   width: calc(100% - 500px); display: inline-block; vertical-align: middle; background: url( "/assets/img/top/virtualtour.jpg") center center no-repeat; background-size: cover; /*height: 540px;*/ height: 600px;}

.vtTxt{ width: 500px; display: inline-block; vertical-align: middle; text-align: center; padding-bottom: 50px; box-sizing: border-box; padding: 0 40px 0 60px;}

.vtTxt dt{ font-size: 38px; font-weight: 600; border-top: 1px solid #D6D6D6; display: inline-block; box-sizing: border-box; padding: 0 15px; padding-top: 35px;  position: relative; line-height: 42px; margin-bottom: 25px; width: 100%;}

.vtTxt dt:before{ width: 20px; height: 1px; content: ""; display: block; position: absolute; top: -1px; right: 0; background: #000;}

.vtTxt dd{ font-size: 14px; line-height: 1.8em; box-sizing: border-box; padding: 0 15px; text-align: left; display: inline-block;}

.rinkbtn a {
    background: #E8E8E8;
    color: #000;
    font-size: 12px;
    font-family: neue-haas-grotesk-display;
    padding: 7px 10px;
    display: block;
    font-weight: 600;
    position: relative;
    margin-top: 30px;
    position: relative;
    transition: all 0.4s ease-out;
    width: 124px;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}
.bgcengson .rinkbtn a {
    background: #000;
    color: #fff;

}

.bgcengson .rinkbtn a:hover {
    background: #fff;
    color: #000;

}

.brnWrapps{ width: 140px; margin: 0 auto; padding: 25px 0;}
.dttxts{ margin-bottom: 70px;}


/* contactLink */

.contactLink {
    max-width: 750px;
    margin: 0 auto;
}

.contactLink li {
    box-sizing: border-box;
   
    display: inline-block;
}

.contactLink li:first-child{ padding-right: 10px;}
.contactLink li:last-child{ padding-left: 10px;}

.contactLink li {
    width: 49%;

}

.contactLink li a, .contactLink2 a {
    
    width: 100%;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 20px 24px;
    position: relative;
    font-weight: 600;
    font-weight: bold;
    background: #f2f2f2; color: #000;
}

.contactLink li a:hover,.contactLink2 a:hover{background: #000;
    color: #FFFFFF;}

.contactLink li a:after,.contactLink2 a:after{ content:""; display: inline-block; width: 6px; height: 5px; background: url(/assets/ld/img/executive/ar_bk.png) left center no-repeat; background-size: contain; vertical-align: middle; position: absolute; right: 20px; top: 30px;}
.contactLink li a:hover:after, .contactLink2 a:hover:after {
    background: url("/assets/ld/img/executive/ar.png") left center no-repeat;
    background-size: contain;
}


.picklist{ padding-top: 80px;}

.picklist h3{ font-size: 24px; margin-bottom: 70px; text-align: center;}



.cassinaContent{ position: relative; padding-bottom: 210px; overflow: hidden;}





.showsList {
    max-width: 1160px;
    margin: 0 auto;
}

.itemWrapps{ background: #F4F4F4; padding-top: 90px; position: relative; padding-bottom: 300px; background: url("/assets/ld_xmas/img/coordinateBg_pc.png") center 90px no-repeat #F4F4F4; background-size: 1204px 498px;}



.itemWrapps:before{ content: ""; display: block; width: 100%; height: 14px; background: url("/assets/ld_xmas/img/sengu/bgitemlisttop.png") left bottom repeat-x; background-size: 64px 12px; position: absolute; top: -14px;}



.tititem{ font-size: 40px; color: #A78E28; text-align: center; font-weight: 600; margin-bottom: 50px; letter-spacing: 0.02em;}



.showsList{ max-width: 1160px; margin: 0 auto;}



.showsList li{ text-align: center;}



.showsList li .pickliimg{ width: 180px; margin: 0 auto; margin-bottom: 15px;}



.showsList li .pickliimg img{ width: 100%; height: auto;}



.showListCon p{line-height: 1.4; font-size: 14px; letter-spacing: 0.06em;}

.showListCon p span{  font-size: 11px; font-weight: bold;}



.showListCon .rinkbtn{ position: absolute; right: 55px; bottom: 55px;}

.itemsslide2 .slick-next{  font-size: 0; background: url("https://www.cassina-ixc.jp/assets/img/top/arrow_pick.png") left top no-repeat; background-size: cover; width: 20px; height: 20px; position: absolute; top: 50%; left: auto; right: 210px; z-index: 100; transform: scale(-1, 1);}


.loarea .vtTxt dd.rinkbtn{ letter-spacing: 0.08em; display: block;}



.itemsslide2 .slick-prev{  font-size: 0; background: url("https://www.cassina-ixc.jp/assets/img/top/arrow_pick.png") left top no-repeat; background-size: cover; width: 20px; height: 20px; position: absolute; top: 50%; right: auto; left: 210px; z-index: 100;}

.pickList .slick-slide:not(.slick-active) {
    opacity: 0.1;
}

.sideobj{  transition: all 0.2s 0.6s ease-out; width: 600px; height: 600px; background: #F8F8F8; position: absolute; left: -300px; top: 0; border-radius: 50%; transform: translateX(0); top: 0;}
.secovtur .sideobj{ left: auto; right: -300px; top: 0; transform: translateX(0)}

@media screen and (min-width: 901px) {
        .pc{ display: block!important;}
    .sp{ display: none!important;}

.bannerBtn{transition: all 0.4s cubic-bezier(0, 0, .4, 1);}

.bannerBtn:hover{transform: scale(1.1);}

	.showsList li img{transition: all 0.4s cubic-bezier(0, 0, .4, 1);}

.showsList li:hover img{transform: scale(1.1);}

	.showsList li:hover img{transform: scale(1.1);}
    	 .areatxt a:hover span{transition: all 0.4s cubic-bezier(0,0,.4,1);
    transition-delay: 0;}

	 .areatxt a:hover span{transform: scale(1.1); font-size: 26px;}

	.linkBtn a:hover:after{ display: none;}

	.linkBtn a:before{ content: ""; display: block; width: 0; height: 2px; background: 0; position: absolute; background: #000;transition: all 0.6s cubic-bezier(0, 0, .4, 1); position: absolute; bottom: -2px;}

.linkBtn a:hover:before{ width: 100%;}
}
	

	.pickList .slick-slide:not(.slick-active):hover img{transform: scale(1);}

	.pickList .slick-slide:not(.slick-active) a{ cursor: default;}

.pickList .slick-slide a,.slick-slide{outline:none;}

	.ixcContent .txtcontentBrand dd {

  

    margin-bottom: 90px;

}

div.wrapper_{ width: 100%; overflow: hidden;}
.fd01{ opacity: 0;  transition: all 1.3s cubic-bezier(0,0,.4,1); }
.area .fd01.lastfad{ opacity: 0; transition: all 3.5s cubic-bezier(0,0,.4,1);} 
.area .areatxt{ opacity: 0; /*transition: all 3.5s cubic-bezier(0,0,.4,1);*/ transition-delay: 4.5s; }  
.area .fd01:nth-child(4){ transition-delay: 1s}
.area .fd01:nth-child(5){ transition-delay: 1.5s}
.area .fd01:nth-child(6){ transition-delay: 2s}
.area .fd01:nth-child(7){ transition-delay: 2.5s}
.area .fd01:nth-child(8){ transition-delay: 4s}
.area .fd01.lastfad{ transition-delay: 6s}
.active .fd01{opacity: 1}
.areatxt{-webkit-backface-visibility: hidden;
backface-visibility: hidden;
filter: blur(0);
-webkit-filter: blur(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
.active .areatxt{ opacity: 1;  animation: bound-anim 1s 3.5s; -webkit-animation: bound-anim 1s 3.5s; -webkit-backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.sideobj, .animein, .mainlink {
    transition: all 2s cubic-bezier(0, 0, .4, 1);
    transition-property: opacity, transform;
}

.animein{ opacity: 0; transform: translateY(60px);}
.animein.active{ opacity: 1; transform: translateY(0);}

.sideobj{ opacity: 0; transform: translateX(-300px);}
.sideobj.active{ opacity: 1; transform: translateX(0);}

.secovtur .sideobj{ opacity: 0; transform: translateX(300px);}
 .secovtur .sideobj.active{ opacity: 1; transform: translateX(0);}

.loarea{ position: absolute;}
.loarea:before{ content: ""; display: block;width: 756px;
    height: 756px;
    margin-left: -378px;
    background: #F8F8F8;
    position: absolute;
    left: 50%;
    bottom: 50px;
    border-radius: 50%;
    transform: translateX(0); }
.lpslidel li{ /*padding: 0 10px;*/ box-sizing: border-box;}
.lpslidel img{ width: 100%; height: auto;}
.loarea { padding-bottom: 180px; position: relative;}
.loarea .vtTxt{ margin: 0 auto; display: block;
text-align: center;  width: 100%; max-width: 700px;}
.loarea .vtTxt dd{ text-align: center; padding-right: 0}
.loarea .vtTxt dt{ border: none;}
.loarea .vtTxt dt:before{ display: none;}
.ftBanner{ width: 315px; position: fixed; right: 65px; bottom: 25px; z-index: 100;}
.ftBanner img{ width: 100%; height: auto;}





@keyframes bound-anim {
  0% { transform: scale(1) translateY(0);  opacity: 1;}
  30% { transform: scale(0.96,1.04)  translateY(-40px); opacity: 1;}
  60% {transform: scale(1);  opacity: 1;}
  90% {transform: scale(1.15,0.9) translateY(0);  opacity: 1;}
    100% { transform: scale(1) translateY(0); opacity: 1}
}

@-webkit-keyframes bound-anim {
  0% { transform: scale(1) translateY(0);  opacity: 1;}
  30% { transform: scale(0.96,1.04)  translateY(-40px); opacity: 1;}
  60% {transform: scale(1); opacity: 1;}
  90% {transform: scale(1.15,0.9) translateY(0);  opacity: 1;}
    100% { transform: scale(1) translateY(0); opacity: 1}
}

.wrapper_{ transition: all 1.4s 0.4s ease-out;}
   .bgcengson .wrapper_ { background: #E5E2DF; transition: all 1.4s 0.4s ease-out; margin-bottom: 0; padding-bottom: 0;}

.bgcengson .sideobj{ background: #D9D4D1;}

.loarea{ background: #222; color: #fff;}
.loarea:before{ background: #393939;}
.contactlinkwarapp{ background: #222; padding-bottom: 140px; margin-bottom: 1px;}

#footer {
  
    margin-top: 0;
  
}

.intcons{ width: 100%; height: 100vh; position: fixed; z-index: 1000000; background: #fff;  transition: all 0.8s ease-out; top: 0;}
.imtimg{ position: absolute; width: 640px; left: 50%; top: 50%; margin-left: -320px; margin-top: -180px;}
.imtimg img{ width: 100%; height: auto;}
.is-clickbtnon .intcons{ opacity: 0;}
.is-dsnone .intcons{ display: none;}


@media screen and (max-width: 900px) {
    .pc{ display: none !important;}
    .sp{ display: block !important;}
    .imtimg{ position: absolute; width: 100%; left: 0; top: 0; margin-left: 0; margin-top: 0;}
    
    .ftBanner{ width: 100%; height: auto; left: 0; bottom: 0; right: auto;}
    .titread {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 28px;
        padding: 0 20px; box-sizing: border-box;
}
    
    .readarea {
        padding: 0 20px;
    margin-bottom: 35px;
    margin-top: 30px;
    position: relative;
}
    .readTxt {
    font-size: 14px;
    line-height: 25px;
        text-align: left;
}
    
    .readarea h2{ width: 80%; margin: 0 auto; max-width: 200px;}
    
/*    .objimg img {
    width: 200%;
    height: auto;
    margin-left: -58%;
}*/

    #scroll_bg01 {
    background: url(../img/area/1.png) left top no-repeat;
    background-size: 680px 427px;
    width: 680px;
    height: 427px;
}
    
    .area {
    width: 680px;
    height: 427px;
    position: relative;
    left: 50%;
    margin-left: -340px;
}
    
  .vtimg {
    width: calc(100% - 75px);
    height: 370px;
}  
    
    .pconly{ display: none;}
    .sideobj{ display: none !important}


    .vtTxt dt{ font-size: 28px; position: absolute; border: none;
        -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    right: 0; top: 0; height: 370px; padding-top: 0;}
    
    .vtTxt dt:before{ display: none;}
    
    .vtTxt{ width: 100%; padding: 0 20px;}
    
    .dttxts { width: calc(100% - 50px); margin-top: 25px; }
    .vtTxt dd.rinkbtn{ width: 45%; display: inline-block;}
    .brnWrapps {
    width: auto;
    }
    .dttxts {
    margin-bottom: 55px;
}
    
    .picklist {
    padding-top: 55px;
}
    
    .picklist h3 {
    font-size: 21px;
    margin-bottom: 20px;
    text-align: center;
}
    
    .secovtur .vtTxt dt {
    font-size: 28px;
    position: absolute;
    border: none;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    right: auto;
    top: 10px;
    left: 0;
    /* text-align: right; */
    /* vertical-align: baseline; */
        width: auto;}
    
    .secovtur .vtimg{ margin-left: auto; display: block;}
    .secovtur .vtTxt dd {
    margin-left: auto;
}
    .loarea{ box-sizing: border-box; }
    .loarea:before{ display: none;}
    
    .loarea .vtTxt dt {
    font-size: 28px;
    position: relative;
    border: none;
    -ms-writing-mode: initial;
    writing-mode: initial;
    right: 0;
    top: 10px;
        height: auto
}
    
    .contactlinkwarapp {
    background: #222;
    padding: 0 20px;
            padding-bottom: 140px;
    margin-bottom: 1px;
    padding-top: 55px;
        margin-top: -1px;

}
    
   .loarea  .dttxts {
    width: 100%;
    margin-top: 25px;
}
.cafetxt {
    right: 250px;
    top: 10px;
    width: 58px;
    }
    
    .meettxt {
    right: 176px;
    bottom: 144px;
    width: 75px;
}
    
    .cmmttxt {
    left: 177px;
    bottom: 119px;
    width: 137px;
}
    

    
    .ectvtxt {
    left: 165px;
    top: 176px;
    width: 104px;
}
    
    .lougetxt {
    left: 193px;
    top: 50px;
    width: 72px;
}
    .vtimg{ background-position: right 0; transition: all 3.8s ease-out; }
        .vtimg.active{ background-position: center;}
    .loarea {
        padding-bottom: 0;}

    .vtimg{ position: relative; }
    .modalbtn{ width: 25px; height: 25px; position: absolute; right: 10px; bottom: 10px; z-index: 100;}
    .secovtur .modalbtn{ right: auto; left: 10px;}
    .modalbtn img{ width: 100%;}
    .vtTxt dt{ width: 75px;}
    .remodal img{ width: 100%; height: auto;}
    .loarea .vtTxt dt{ width: 100%;}
}

.remodal-overlay {
    background: rgba(00, 00, 00, 0.8);
}

.remodal {

  
     padding: 0; 

     background-color:  transparent;
}


.contactLink ul{ font-size: 0; letter-spacing: 0;}
.contactLink ul li{ width: 50%; font-size: 14px;}

.vtTxt dd.rinkbtn{ padding: 0 5px;}

.ftBanner{ width: 315px;}
.ftBanner.contactLink li a, .ftBanner.contactLink2 a{ text-align: center; background: #000; color: #fff; font-size: 12px; padding: 23px}

.ftBanner.contactLink li a:after, .ftBanner.contactLink2 a:after{ display: none;}

.ftBanner.contactLink li:first-child {
    padding-right: 3px;
}

.ftBanner.contactLink li:last-child {
    padding-left: 3px;
}
@media screen and (max-width: 900px) {
.ftBanner {
    width: 100%; background-color: transparent;
}
   .ftBanner.contactLink li a{ width: 100%; background: rgba( 0, 0, 0, 0.8 ); box-sizing: border-box;}
    .imtimg{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh;}
    .imtimg img{ object-fit: cover; height: 100vh;} 
    
}

.ftBanner{transition: all 0.4s cubic-bezier(0, 0, .4, 1);}
.fton .ftBanner{ opacity: 0;}
@media screen and (max-width: 900px) {
    .vtTxt{ padding: 0;}
.mainImg {
    margin-top: 27px;
    }
    
    .bgcengson .loarea .rinkbtn a {
       background: #E8E8E8;
    color: #000;
}
    
    .vtTxt {
    width: 100%;
    padding: 0 20px 0 70px;
}
    
    .vtTxt {
    width: 100%;
    padding: 0 20px;
}
    .vtTxt dd{ padding-right: 50px; padding-left: 0;}
    
    .secovtur .vtTxt dd {
    margin-left: auto;
        padding-right: 0; padding-left: 50px; padding-right: 0;
}
    .vtTxt{ padding: 0}
    .loarea .vtTxt{ padding: 0 20px;}
    
    .secovtur .vtTxt dd.rinkbtn {
    padding: 0 5px;
}
    
    .imtimg { margin-top: -20%;}
    
    .loarea .vtTxt dd.rinkbtn{ margin: 0 auto;}
    
    /*.ftBanner{ background: #323232;}*/
    .ftBanner.contactLink li:first-child {
    border-right: 1px solid #323232;
        padding-right: 0;
}
    .ftBanner.contactLink li:last-child {
     border-left: 1px solid #323232;
        padding-left: 0
}

}
.sideobj{  transition: all 0.8s 0.6s ease-out;}

@media screen and (min-width: 901px) {
    .ftBanner.contactLink li a{ text-align: left;}
    .ftBanner.contactLink li a:after{
    content: "";
    display: inline-block;
    width: 6px;
    height: 5px;
    background: url(/assets/ld/img/executive/ar.png) left center no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 30px;	
}
}