/* CSS Document */ @-ms-viewport { width: device-width; } .main-bg{ padding-top: 74px; padding-bottom: 60px; background: url(../../img/btc/main-bg.jpg) no-repeat center top / cover; } .main-bg .text .ttl{ font-size: 25px; line-height: 1; color: #fff; } .main-bg .text .ttl .en-font{ font-size: 75px; line-height: 1.12; margin-top: 15px; display: block; font-weight: 500; } .main-bg .text .ttl .mini-text{ font-size: 17px; line-height: 1.64; display: block; margin-top: 10px; font-weight: 500; } .btc-cont .pankuzu li a{ color: #fff; } .btc-cont .pankuzu li a:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 4px; height: 4px; border-top: 0.5px solid #fff; border-right: 0.5px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-left: 5px; } .btc-cont{ padding-top: 15px; padding-bottom: 80px; color: #fff; background: #000000; } .btc-cont .slick-wrap{ margin-top: 80px; } .btc-cont .m-copy{ margin-top: 60px; line-height: 2.23; font-size: 17px; color: #fff; text-align: center; } .room-box{ margin-top: 80px; } .room-box .ttl-text{ line-height: 1.47; font-size: 26px; color: #ffffff; padding-bottom: 12px; margin-bottom: 40px; border-bottom: 0.5px solid #ffffff; } .room-box .room-list > li{ padding-bottom: 50px; margin-bottom: 50px; border-bottom: 0.5px solid #fff; display: flex; justify-content: space-between; align-items: center; } .room-box .room-list > li:nth-child(2n){ flex-direction: row-reverse; } .room-box .room-list > li:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .room-box .room-list > li .pic{ width: 48%; position: relative; } .room-box .room-list > li .pic .comming{ position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); color: #fff; padding-top: 6px; padding-bottom: 6px; background: #2282cc; } .room-box .room-list > li .pic .comming .obi{ text-align: center; padding-top: 7px; padding-bottom: 7px; border-top: 5px solid #60a5da; border-bottom: 5px solid #60a5da; font-size: 27px; color: #fff; line-height: 1; } .room-box .room-list > li .text{ width: 48%; } .room-box .room-list > li .text .name{ line-height: 1.75; font-size: 23px; color: #ffffff; padding-bottom: 1px; font-weight: 700; } .room-box .room-list > li .text .ad{ line-height: 1.75; font-size: 16px; color: #ffffff; padding-bottom: 15px; } .room-box .room-list > li .text .point{ display: flex; } .room-box .room-list > li .text .point li{ border:0; width: 100px; margin-right: 5px; padding-top: 10px; padding-bottom: 10px; color: #0d2e9b; font-size: 15px; line-height: 1; background: #fff; text-align: center; font-weight: 700; } .room-box .room-list > li .text .link-btn{ margin-top: 30px; max-width: 254px; margin-left: 0; } .room-box .room-list > li .text .link-btn a{ padding-top: 10px; padding-bottom: 10px; background: #0d2e9b; color: #fff; font-weight: 500; } .room-box .room-list > li .text .link-btn .sankaku{ width: 6px; } .room-box .room-list > li .text .yotei{ margin-bottom: 14px; } .room-box .room-list > li .text .yotei span{ padding: 10px 20px; background: #970017; display: inline-block; color: #fff; font-size: 16px; line-height: 1; } @media print, screen and (min-width : 1367px) { } @media print, screen and (max-width: 900px) { .main-bg{ padding-top: 16.91vw; padding-bottom:16.18vw; background: url(../../img/btc/main-bg-sp.jpg) no-repeat center top / cover; } .main-bg .text .ttl{ font-size: 4.6vw; line-height: 1; } .main-bg .text .ttl .en-font{ font-size: 10.1vw; line-height: 1.12; margin-top: 1.2vw; display: block; font-weight: 500; } .main-bg .text .ttl .mini-text{ line-height: 1.66; font-size: 3.6vw; display: block; margin-top: 7.2vw; font-weight: 500; } .btc-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .btc-cont .slick-wrap{ margin-top: 0px; } .btc-cont .m-copy{ margin-top: 9.49vw; line-height: 1.66; font-size: 3.6vw; text-align: left; } .room-box{ margin-top: 14.49vw; } .room-box .ttl-text{ font-size: 5vw; padding-bottom: 2.42vw; margin-bottom: 9.66vw; } .room-box .room-list > li{ padding-bottom: 9.66vw; margin-bottom: 9.66vw; border-bottom: 0.5px solid #fff; display: block; } .room-box .room-list > li:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .room-box .room-list > li .pic{ width: 100%; position: relative; margin-bottom: 4.83vw; } .room-box .room-list > li .pic .comming{ position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); padding-top: 1.4vw; padding-bottom: 1.4vw; } .room-box .room-list > li .pic .comming .obi{ text-align: center; padding-top: 1.2vw; padding-bottom: 1.2vw; border-top: 1vw solid #60a5da; border-bottom: 1vw solid #60a5da; font-size: 4.8vw; line-height: 1; } .room-box .room-list > li .text{ width: 100%; } .room-box .room-list > li .text .name{ line-height: 1.75; font-size: 5vw; padding-bottom: 0.4vw; font-weight: 700; } .room-box .room-list > li .text .ad{ line-height: 1.75; font-size: 3.6vw; padding-bottom: 3.6vw; } .room-box .room-list > li .text .point{ display: flex; } .room-box .room-list > li .text .point li{ border:0; width:21.7vw; margin-right:1vw; padding-top: 2.4vw; padding-bottom: 2.4vw; font-size: 3.8vw; } .room-box .room-list > li .text .link-btn{ margin-top: 7.25vw; max-width: none; width: 78%; margin-left: auto; margin-right: auto; } .room-box .room-list > li .text .link-btn a{ padding-top: 2.4vw; padding-bottom: 2.4vw; font-weight: 500; } .room-box .room-list > li .text .link-btn .sankaku{ width: 1.4vw; } .room-box .room-list > li .text .yotei{ margin-bottom:2.9vw; } .room-box .room-list > li .text .yotei span{ padding: 2.6vw 2.6vw; font-size: 3.8vw; line-height: 1; } }