/* 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; } } .location-linkList{ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 64px 0 0 0; margin: 64px 0 0 0; border-top: 1px solid #666666; } .location-linkList a{ display: block; padding: 10px 20px; background: #0d2e9b; color: #fff; text-align: center; width: auto; min-width: 254px; border-radius: 20px; line-height: 1; font-weight: 500; margin-top: 16px; margin-left: 0; position: relative; } .location-linkList a .sankaku { position: absolute; width: 6px; top: 50%; right: 22px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } @media print, screen and (max-width: 900px) { .location-linkList{ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 64px 0 32px 0; margin: 64px 0 0 0; border-top: 1px solid #666666; } .location-linkList a{ display: block; padding: 10px 20px; background: #0d2e9b; color: #fff; text-align: center; width: auto; min-width: 254px; border-radius: 20px; line-height: 1; font-weight: 500; margin-top: 16px; margin-left: 0; position: relative; } .location-linkList a .sankaku { position: absolute; width: 6px; top: 50%; right: 22px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } } /* 202594 kato 追加 */ .btc-showroomAreaCmn{ width: 100%; background: #000000; color: #FFFFFF; } .btc-showroomArea01{ width: 100%; margin: 0 auto; background: url( "../../img/btc/btc-showroom/title-bg01.jpg") center top no-repeat; background-size: auto auto; } .btc-showroomArea01 .btc-showroom-titleArea01{ width: 1050px; height: 165px; box-sizing: border-box; margin: 0 auto; padding: 20px 0; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01{ width: 100%; height: auto; display: flex; justify-content: space-between; flex-direction: row; } .btc-showroomArea01 .btc-showroom-titleArea01 p{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.4; } .btc-showroomArea01 .btc-showroom-titleArea01 p:nth-child(2){ font-size: 12px; margin: 0 0 32px 0; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01 h1{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; width: 450px; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01 p{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.6; width: 600px; display: inline-block; } @media print, screen and (max-width: 900px) { .btc-showroomArea01{ width: 100%; margin: 0 auto; background: url( "../../img/btc/btc-showroom/title-bg01-sp.jpg") center top no-repeat; background-size: 100% auto; } .btc-showroomArea01 .btc-showroom-titleArea01{ width: calc(100% - 80px); height: auto; box-sizing: border-box; margin: 0 auto; padding: 20px 0; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01{ width: 100%; height: auto; display: flex; justify-content: space-between; flex-direction: column; } .btc-showroomArea01 .btc-showroom-titleArea01 p{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.4; } .btc-showroomArea01 .btc-showroom-titleArea01 p:nth-child(2){ font-size: 12px; margin: 0 0 32px 0; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01 h1{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.4; width: 100%; } .btc-showroomArea01 .btc-showroom-titleArea01 .title-textArea01 p{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.6; width: 100%; display: none; } } .btc-showroomArea02{ width: 1050px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; } .btc-showroomArea02 .btc-showroom-text01{ width: 600px; border-top: 1px solid #666666; } .btc-showroomArea02 .btc-showroom-text01 dl { display: grid; grid-template-columns: auto 1fr; gap: 0 0; } .btc-showroomArea02 .btc-showroom-text01 dl dt, .btc-showroomArea02 .btc-showroom-text01 dl dd{ height: auto; padding: 16px; display: flex; align-items: flex-start; } .btc-showroomArea02 .btc-showroom-text01 dl dd::before{ content: "/"; position: relative; left: -16px; } .btc-showroomArea02 .btc-showroom-text01 dl dd p a{ color: #FFFFFF; } .btc-showroomArea02 .btc-showroom-text01 dl .mod-inIcon { vertical-align: middle; margin: 0 2px 0 4px; height: 20px; width: auto !important; } .btc-showroomArea02 .btc-showroom-text01 dl:nth-child(1), .btc-showroomArea02 .btc-showroom-text01 dl:nth-child(2){ background-color: #000; } .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(3), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(4), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(7), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(8){ background-color: #05123f; } @media print, screen and (max-width: 900px) { .btc-showroomArea02{ width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; } .btc-showroomArea02 .btc-showroom-text01{ width: 100%; border-top: 1px solid #666666; } .btc-showroomArea02 .btc-showroom-text01 dl { width:calc(100% - 40px); margin: 20px auto 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 0 0; } .btc-showroomArea02 .btc-showroom-text01 dl dt, .btc-showroomArea02 .btc-showroom-text01 dl dd{ height: auto; padding: 10px 20px; display: flex; align-items: flex-start; } .btc-showroomArea02 .btc-showroom-text01 dl dd p a{ color: #FFFFFF; } .btc-showroomArea02 .btc-showroom-text01 dl .mod-inIcon { vertical-align: middle; margin: 0 2px 0 4px; height: 20px; width: auto !important; } .btc-showroomArea02 .btc-showroom-text01 dl:nth-child(1), .btc-showroomArea02 .btc-showroom-text01 dl:nth-child(2){ background-color: #000; } .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(3), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(4), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(7), .btc-showroomArea02 .btc-showroom-text01 dl > *:nth-child(8){ background-color: #05123f; } } .btc-showroomArea03{ width: 1050px; margin: 46px auto 0 auto; background: #FFFFFF; color: #000000; display: flex; flex-direction: row; } .btc-showroomArea03 .productsList01{ width: 390px; padding: 50px 0 50px 72px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; margin: 0; } .btc-showroomArea03 .productsList01 h2{ order: 2; font-size: 20px; margin: 0; } .btc-showroomArea03 .productsList01 .h3Area{ width: 318px; height: 40px; position: relative; order: 1; margin: 0 0 20px 0; } .btc-showroomArea03 .productsList01 .h3Area h3{ width: 180px; height: 40px; display: flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #c2c2c2; position: absolute; z-index: 10; font-size: 12px; font-weight: 300; letter-spacing: 0.1em; } .btc-showroomArea03 .productsList01 .h3Area i{ width: 318px; height: 1px; display: block; background: #c2c2c2; position: absolute; z-index: 5; top: 20px; } .btc-showroomArea03 .productsList02{ width: 660px; padding: 50px 0 0px 60px; box-sizing: border-box; box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1); } .btc-showroomArea03 .productsList02 h4{ width: 600px; height: 40px; padding: 0 16px; box-sizing: border-box; background: #05123f; display: flex; justify-content: flex-start; align-items: center; color: #fff; margin: 0 0 34px 0; } .btc-showroomArea03 .productsList02 .productsListPhoto{ width: 528px; padding: 0 0 32px 0; display: flex; flex-wrap: wrap; align-items: flex-start; } .btc-showroomArea03 .productsList02 .productsListPhoto a{ margin: 0; } .btc-showroomArea03 .productsList02 .productsListPhoto div{ width: 156px; min-height: 100px; background: url("../../img/btc/btc-showroom/prdt-bg01.jpg") top center no-repeat; margin: 0 30px 0 0; display: flex; flex-direction: column; justify-content: center; } .btc-showroomArea03 .productsList02 .productsListPhoto a:nth-child(3n) div{ margin: 0 0 0 0; } .btc-showroomArea03 .productsList02 .productsListPhoto div:nth-child(3n){ margin: 0 0 0 0; } .btc-showroomArea03 .productsList02 .productsListPhoto div img{ width: 156px; height: auto; padding: 0 0 2px 0; border-bottom: 1px #e8e8e8 solid; } .btc-showroomArea03 .productsList02 .productsListPhoto div h5{ width: 156px; margin: 6px 0 24px 0; display: flex; justify-content: center; text-align: left; font-weight: 500; line-height: 1.4; } .btc-showroomArea03 .productsList02 p.inquiry-message{ font-size: 12px; color: #666666; margin: 0 0 20px 0; padding: 0; display: inline-block; width: auto; } @media print, screen and (max-width: 900px) { .btc-showroomArea03{ width: 100%; margin: 46px auto 0 auto; background: #FFFFFF; color: #000000; display: flex; flex-direction: column; } .btc-showroomArea03 .productsList01{ width: calc(100% - 80px); padding: 40px 0 20px 0; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .btc-showroomArea03 .productsList01 h2{ order: 1; font-size: 16px; margin: 0 0 16px 0; } .btc-showroomArea03 .productsList01 .h3Area{ width: 45%; height: 60px; position: relative; order: 2; margin: 0 0 20px 0; } .btc-showroomArea03 .productsList01 .h3Area h3{ width: 100%; height: auto; padding: 10px 20px; display: flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #c2c2c2; position: absolute; z-index: 10; font-size: 12px; font-weight: 300; letter-spacing: 0.1em; } .btc-showroomArea03 .productsList01 .h3Area i{ width: 1px; height: 80px; display: block; background: #c2c2c2; position: absolute; z-index: 5; top: 20px; } .btc-showroomArea03 .productsList02{ width: 100%; padding: 40px 0 0px 40px; box-sizing: border-box; box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1); } .btc-showroomArea03 .productsList02 h4{ width: 100%; height: auto; padding: 8px 16px; box-sizing: border-box; background: #05123f; display: flex; justify-content: flex-start; align-items: center; color: #fff; margin: 0 0 34px 0; } .btc-showroomArea03 .productsList02 .productsListPhoto{ width: 100%; margin: 0 auto 0 0; padding: 0 0 32px 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; } .btc-showroomArea03 .productsList02 .productsListPhoto a{ max-width: 132px; width: 80%; margin: 0 12px 0 12px; } .btc-showroomArea03 .productsList02 .productsListPhoto div{ width: 100%; min-height: auto; background: none; margin: 0; display: flex; flex-direction: column; justify-content: center; } .btc-showroomArea03 .productsList02 .productsListPhoto a:nth-child(3n) div{ margin: 0 0 0 0; } .btc-showroomArea03 .productsList02 .productsListPhoto div:nth-child(3n){ margin: 0 0 0 0; } .btc-showroomArea03 .productsList02 .productsListPhoto div img{ width: 100%; height: auto; padding: 0 0 2px 0; border-bottom: 1px #e8e8e8 solid; } .btc-showroomArea03 .productsList02 .productsListPhoto div h5{ width: 100%; margin: 6px 0 24px 0; display: flex; justify-content: center; text-align: left; font-weight: 500; line-height: 1.4; } .btc-showroomArea03 .productsList02 p.inquiry-message{ font-size: 12px; color: #666666; margin: 0 0 20px 0; padding: 0 20px 0 0; box-sizing: border-box; display: inline-block; width: auto; } } .btc-showroomAreaFooter{ width: 100%; height: 224px; background: url( "../../img/btc/btc-showroom/footernavi-bg01.jpg") center bottom no-repeat; } .btc-showroomAreaFooter .showroom-linkList{ width: 1050px; height: 224px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; } .btc-showroomAreaFooter .showroom-linkList h2{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-weight: 400; margin: 20px auto 0 0; display: flex; height: 120px; line-height: 1.5; } .btc-showroomAreaFooter .showroom-linkList ul{ width: 780px; height: 120px; display: flex; flex-wrap: wrap; margin: 0 0 0 0; } .btc-showroomAreaFooter .showroom-linkList ul li{ color: #FFFFFF; } .btc-showroomAreaFooter .showroom-linkList ul li a{ color: #FFFFFF; width: 258px; height: 58px; margin: 0 2px 2px 0; display: flex; justify-content: center; align-items: center; background: #071647; } .btc-showroomAreaFooter .showroom-linkList ul li a.nowLink, .btc-showroomAreaFooter .showroom-linkList p a.nowLink{ background: #0d2e9b; } .btc-showroomAreaFooter .showroom-linkList p a{ width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #071647; color: #FFFFFF; } #btc-kariya.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(1) a, #btc-tokyo.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(2) a, #btc-osaka.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(3) a, #btc-sendai.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(4) a, #btc-kitakanto.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(5) a, #btc-kyushu.btc-showroomAreaFooter .showroom-linkList ul li:nth-child(6) a{ background: #0d2e9b; } @media print, screen and (max-width: 900px) { .btc-showroomAreaFooter{ width: 100%; height: auto; background: url( "../../img/btc/btc-showroom/footernavi-bg01-sp.jpg") center bottom no-repeat; background-size: 100% auto; } .btc-showroomAreaFooter .showroom-linkList{ width: calc(100% - 40px); height: auto; margin: 40px auto 0 auto; padding: 0 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; position: relative; } .btc-showroomAreaFooter .showroom-linkList h2{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 5.4vw; font-weight: 400; margin: 20px auto 0 0; display: flex; height: 120px; line-height: 1.5; } .btc-showroomAreaFooter .showroom-linkList ul{ width: 50vw; height: auto; display: flex; flex-wrap: wrap; margin: 0 0 0 0; } .btc-showroomAreaFooter .showroom-linkList ul li{ color: #FFFFFF; } .btc-showroomAreaFooter .showroom-linkList ul li a{ color: #FFFFFF; width: 50vw; height: auto; margin: 0 2px 2px 0; padding: 10px; display: flex; justify-content: center; align-items: center; background: #071647; } .btc-showroomAreaFooter .showroom-linkList ul li a.nowLink, .btc-showroomAreaFooter .showroom-linkList p a.nowLink{ background: #0d2e9b; } .btc-showroomAreaFooter .showroom-linkList p a{ width: 90px; height: 45px; display: flex; justify-content: center; align-items: center; background: #071647; color: #FFFFFF; position: relative; bottom: 40px; } /* 画面が横向き(ランドスケープ)のとき */ @media (orientation: landscape) { .btc-showroomAreaFooter .showroom-linkList{ padding: 0 0 40px 0; } .btc-showroomAreaFooter .showroom-linkList h2{ font-family: 'Poppins',"Noto Sans JP", sans-serif; font-size: 20px; font-weight: 400; margin: 20px auto 0 0; display: flex; height: 120px; line-height: 1.5; } .btc-showroomAreaFooter .showroom-linkList p a{ width: 90px; height: 45px; display: flex; justify-content: center; align-items: center; background: #071647; color: #FFFFFF; position: absolute; bottom: 40px; left: 0; } } } .btc-showroomArea02 .photo-slider { display: none; /* サムネイルを非表示 */ } .btc-showroomArea02 p.spText { display: none; } .photo-gallery { width: 416px; margin: 0; } .photo-gallery .main-photo { display: none; /* 最初は非表示 */ } .photo-gallery .main-photo:first-child { display: block; /* 最初の画像だけ表示 */ } .photo-gallery .thumbnails { width: 416px; display: flex; justify-content: flex-start; margin-top: 2px; } .photo-gallery .thumbnails img { width: 102px; /* サムネイルの幅を102pxに強制指定 */ height: auto; /* 高さを自動調整 */ cursor: pointer; margin-right: 2px; object-fit: cover; opacity: 0.4; } .photo-gallery .thumbnails img.active { border: 1px solid #fff; opacity: 1.0; transition: 0.2s all; } /* スマホ用:サムネイルを非表示にし、メイン画像だけスライダーに */ @media print, screen and (max-width: 900px) { .btc-showroomArea02 .photo-gallery{ display: none; } .btc-showroomArea02 .photo-slider { display: block; /* サムネイルを非表示 */ } .btc-showroomArea02 .photo-slider { width: 100%; /* スライダーが画面全体に広がる */ max-width: 600px; margin: 0 auto; /* 中央寄せ */ } .btc-showroomArea02 .photo-slider img { width: 100%; height: auto; } .btc-showroomArea02 .photo-slider .slick-dots { bottom: -20px; } .btc-showroomArea02 .photo-slider .slick-dots li button { width: 12px; /* ドットの幅 */ height: 12px; /* ドットの高さ */ border-radius: 6px; /* 四角形にする */ } .btc-showroomArea02 .photo-slider .slick-dots li button:before { content: ""; width: 12px; /* ドットの幅 */ height: 12px; /* ドットの高さ */ background-color: #333; /* ドットの色 */ border-radius: 6px; /* 四角形にする */ } /* ドットがアクティブ(選択された)状態のときのスタイル */ .btc-showroomArea02 .photo-slider .slick-dots li.slick-active button:before { color: #fff; /* アクティブなドットの色 */ } .btc-showroomArea02 p.spText { display: inline-block; width: calc(100% - 40px); margin: 16px auto 32px auto; } } @media print, screen and (max-width: 900px) {}