

#key {
   background: url("../img/room/bg_key.jpg") no-repeat center/cover;
}

.key_ttl {
   text-align: right;
   padding-top: 554px;
}

.fnt-shippori-mincho {
   font-family: 'Shippori Mincho', serif;
}

#lead {
   padding-bottom: 136px;
   position: relative;
}

#lead:before {
   content: '';
   width: 50%;
   height: 600px;
   background: url("../img/room/lead-bg.jpg") repeat center top;
   position: absolute;
   top: 0;
   right: 0;
   padding-left: 23px;
}

#lead h2 {
   position: absolute;
   top: 38px;
   left: -130px;
}

#lead .photo {
   padding-top: 136px;
   padding-bottom: 52px;
   position: relative;
}

#lead .photo:before {
   content: '';
   width: 33px;
   height: 350px;
   background: url("../img/room/lead-deco.png") no-repeat center top/cover;
   position: absolute;
   bottom: -74px;
   right: -23px;
}

#lead .box {
   padding: 24px 0 0 282px;
   position: relative;
}

#lead .box h3 {
   font-weight: 400;
   font-size: 45px;
   line-height: 65px;
   letter-spacing: 0.12em;
}

#lead .box h3 span {
   font-size: 60px;
   color: #fff;
}

#lead .box h3 p:last-child {
   padding-left: 100px;
}

#lead .box .txt {
   padding: 46px 0 0 145px;
}

#lead .box-photo {
   position: absolute;
   top: 0;
   left: -340px;
   z-index: -1;
}

#link {
   text-align: center;
   padding-bottom: 142px;
}

#link h2 {
   padding: 0 27px 74px 0;
}

#link .box {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#link .box p {
   width: 20%;
   max-width: 383px;
}

#link .box p+p {
   margin-left: 1.1%;
}

#link .box img {
   width: 100%;
   height: auto;
}

.no {
   color: rgba(255, 255, 255, 0.42);
   font-family: 'Noto Serif JP', serif;
   font-weight: 400;
   font-size: 147px;
   line-height: 0.6;
   letter-spacing: 0;
   font-style: italic;
}

.no small {
   font-size: 87px;
}

.ttl-36 {
   font-weight: 400;
   font-size: 36px;
   line-height: 66px;
   letter-spacing: 0.12em;
}

#scene01 {
   position: relative;
}

#scene01:before {
   content: '';
   width: 50%;
   height: 678px;
   background: url("../img/room/floor-bg.jpg") repeat center top;
   position: absolute;
   bottom: -280px;
   right: -431px;
}

#scene01 .row01 {
   background: url("../img/room/scene01-photo1.jpg") no-repeat center/cover;
   text-align: right;
   margin-left: 106px;
   padding: 478px 0 79px;
   position: relative;
}

#scene01 .row01 .no {
   position: absolute;
   top: 0;
   right: 110px;
}

#scene01 .row02 {
   padding: 155px 0 135px;
}

#scene01 .row02 .photo {
   position: absolute;
   top: -93px;
   left: -176px;
   z-index: -1;
}

#scene01 .row02 .box {
   width: 610px;
   box-sizing: border-box;
   background-color: #fff;
   color: #000;
   margin-right: -145px;
   margin-left: auto;
   padding: 61px 60px 92px 63px;
   position: relative;
}

#scene01 .row02 .box:before {
   content: '';
   width: 33px;
   height: 350px;
   background: url("../img/room/lead-deco.png") no-repeat center top/cover;
   position: absolute;
   top: -144px;
   right: -19px;
   z-index: -1;
}

#scene01 .row02 .txt {
   width: 410px;
   padding-top: 27px;
   padding-left: 3px;
}

#scene02 {
   position: relative;
}

#scene02:before {
   content: '';
   width: 50%;
   height: 678px;
   background: url("../img/room/floor-bg.jpg") repeat center top;
   position: absolute;
   bottom: -167px;
   right: -81px;
}

#scene02 .row01 {
   background: url("../img/room/scene02-photo1.jpg") no-repeat center/cover;
   margin-right: 120px;
   padding: 477px 0 78px;
   position: relative;
}

#scene02 .row01 .no {
   position: absolute;
   top: 0;
   right: 70px;
}

#scene02 .row02 {
   padding: 135px 0 35px;
   position: relative;
   z-index: 1;
}

#scene02 .row02 .photo {
   position: absolute;
   top: -73px;
   right: -147px;
   z-index: -1;
}

#scene02 .row02 .box {
   width: 610px;
   box-sizing: border-box;
   background-color: #fff;
   color: #000;
   margin-left: -131px;
   padding: 63px 60px 73px 79px;
   position: relative;
}

#scene02 .row02 .box:before {
   content: '';
   width: 33px;
   height: 350px;
   background: url("../img/room/lead-deco.png") no-repeat center top/cover;
   position: absolute;
   top: -124px;
   left: -30px;
   z-index: -1;
}

#scene02 .row02 .txt {
   width: 410px;
   padding-top: 40px;
   padding-left: 3px;
}

#scene02 .row02 .link {
   margin: 44px 0 0 4px;
}

#scene03 {
   padding-bottom: 28px;
}

#scene03 .no {
   color: rgba(0, 0, 0, 0.2);
   position: absolute;
   top: -22px;
   right: -160px;
}

#scene03 h2 {
   text-align: right;
   padding-right: 75px;
}

#scene03 .photo1 {
   position: absolute;
   top: 58px;
   left: -241px;
   z-index: 1;
}

#scene03 .photo2 {
   position: absolute;
   bottom: 0;
   right: -210px;
}

#scene03 .photo2:before {
   content: '';
   width: 33px;
   height: 350px;
   background: url("../img/room/lead-deco.png") no-repeat center top/cover;
   position: absolute;
   top: -245px;
   right: 81px;
}

#scene03 .box {
   padding-top: 202px;
   padding-bottom: 20px;
   padding-left: 3px;
}

#scene03 .txt {
   width: 541px;
   padding: 33px 0 0 3px;
}

@media screen and (max-width: 1200px) {

#scene03 h2 {
   text-align: right;
   padding-right: 230px;
}
#scene03 .no {
   right: 10px;
}
#scene03 .photo1 {
   left: -300px;
}
#scene03 .photo2 {
   right: 0px;
}
}

#scene04 {
   padding-bottom: 210px;
   position: relative;
}

#scene04:before {
   content: '';
   width: 50%;
   height: 465px;
   background: url("../img/room/floor-bg.jpg") repeat center top;
   position: absolute;
   top: 0;
   left: -300px;
}

#scene04 .no {
   color: rgba(0, 0, 0, 0.2);
   position: absolute;
   top: 72px;
   left: 30px;
}

#scene04 h2 {
   margin-left: -135px;
   padding-top: 116px;
}

#scene04 .photo1 {
   position: absolute;
   top: 133px;
   right: -210px;
   z-index: 1;
}

#scene04 .photo1:before {
   content: '';
   width: 33px;
   height: 350px;
   background: url("../img/room/lead-deco.png") no-repeat center top/cover;
   position: absolute;
   bottom: -86px;
   right: 81px;
}

#scene04 .photo2 {
   position: absolute;
   bottom: 0;
   left: -240px;
}

#scene04 .box {
   width: 536px;
   padding: 193px 0 2px;
   margin-left: auto;
}

#scene04 .txt {
   padding: 31px 20px 0 2px;
}

#floor {
   background: url("../img/room/floor-bg.jpg") repeat center top;
   padding: 97px 0 144px;
   position: relative;
}

#floor h2:before {
   content: '';
   width: 10000000px;
   height: 0;
   border-top: 3px solid #000;
   position: absolute;
   top: 0;
   right: 100%;
}

#floor .flm {
   padding-top: 90px;
}

#floor .box {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -10px 0 -185px;
   padding-top: 74px;
   position: relative;
}

#floor .slider-fade {
   width: 649px;
}

#floor .slider-fade .slick-dots {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   position: absolute;
   bottom: 33px;
   right: 29px;
}

#floor .slider-fade .slick-dots li {
   width: 12px;
   height: 12px;
   background-color: #c9b09b;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s;
}

#floor .slider-fade .slick-dots li+li {
   margin-left: 8px;
}

#floor .slider-fade .slick-dots li button {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

#floor .slider-fade .slick-dots li.slick-active,
#floor .slider-fade .slick-dots li:hover {
   background-color: #fff;
}

#floor .desc {
   width: 480px;
   padding: 48px 0 0 64px;
}

#floor .txt {
   padding: 27px 30px 0 3px;
}

#room_pat {
   display: flex;
   flex-wrap: wrap;
   position: relative;
}

#room_pat h2 {
   width: 510px;
}

#room_pat .slider-fade {
   width: calc(100% - 510px);
}

#room_pat .slider-fade .slick-track,
#room_pat .slider-fade .slick-list,
#room_pat .slider-fade .slick-slide {
   width: 100%;
   height: 100%;
}

#room_pat .slider-fade .slick-dots {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   position: absolute;
   bottom: 65px;
   left: 44px;
}

#room_pat .slider-fade .slick-dots:before {
   content: '';
   width: 50px;
   height: 0;
   border-top: 1px solid #fff;
   position: absolute;
   top: 5px;
   left: -44px;
}

#room_pat .slider-fade .slick-dots li {
   width: 12px;
   height: 12px;
   background-color: #c9b09b;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s;
}

#room_pat .slider-fade .slick-dots li+li {
   margin-left: 8px;
}

#room_pat .slider-fade .slick-dots li button {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

#room_pat .slider-fade .slick-dots li.slick-active,
#room_pat .slider-fade .slick-dots li:hover {
   background-color: #fff;
}

#room_pat .slider-fade .slide1 {
   background: url("../img/room/room_pat-slide01.jpg") no-repeat center top/cover;
}

#room_pat .slider-fade .slide2 {
   background: url("../img/room/room_pat-slide02.jpg") no-repeat center top/cover;
}

#room_pat .slider-fade .slide3 {
   background: url("../img/room/room_pat-slide03.jpg") no-repeat center top/cover;
}

#room_pat .slider-fade .no {
   color: #fff;
   font-size: 100px;
   position: absolute;
   top: 55px;
   right: 95px;
}

#room_pat .slider-fade .no small {
   font-size: 60px;
}

#room_pat .slider-fade .box {
   width: 509px;
   color: #fff;
   position: absolute;
   bottom: 70px;
   right: 30px;
}
#room_pat .slider-fade h3{
   font-size:46px;
   text-align: right;
   border-bottom:1px solid #fff;
   line-height:120%;
   margin-bottom:20px;
}
#room_pat .slider-fade h3 span{
   font-size:60%;
}
#room_pat .slider-fade h4{
   font-size:26px;
   text-align: right;
}
#room_pat .slider-fade .txt {
   padding-top: 45px;
   text-align: right;
}