/* CSS Document */ @media (min-width:1001px) { /* mv ---------------------------------------------------------------------- */ #mv { background: url(../images/mv.jpg) center center no-repeat; background-size: cover; } #mv h2 { text-indent: -10000px; overflow: hidden; background: url(../images/ttl.png) center center no-repeat; margin-left: -320px; } /* common ---------------------------------------------------------------------- */ .bg_pattern { position: absolute; z-index: -1;} /* catchcopy ---------------------------------------------------------------------- */ .catchcopy{padding: 100px 0 40px 0; text-align: center;position: relative;} .catchcopy .bg_pattern { bottom: -100px; right: -40px; } .catchcopy h3 { color: #4d7954; font-size: 24px; letter-spacing: 3.4px; line-height: 1.4; font-family: 'Noto Sans JP', sans-serif; margin-bottom: 35px;} .catchcopy p { text-align: center; line-height: 2em; } /* pickup ---------------------------------------------------------------------- */ #pickup { position:relative; } #pickup::after { content:""; position:absolute; z-index:1; left:0; display:block; width:calc(100% - 15.63%); margin-right:15.63%; background: url(../../images/bg2.png) center center repeat; } #pickup::after { top:-140px; height:calc(100% + 140px); min-width:calc(1200px - 50px); } #pickup .pickup-item { position:relative; z-index:2; display:flex; } #pickup .pickup-item--fig { position:relative; } #pickup .pickup-item--dtl { color:#ffffff; } #pickup .pickup-item--dtl .ttl{ line-height:1.6em; } #pickup .pickup-item--dtl p{ line-height:2.0em; color: #1E1E1E; } #pickup .pickup-item--dtl p + p{ margin-top:1em; } #pickup .pickup-item { flex-direction:row; justify-content:flex-start; padding-bottom:130px; } #pickup .pickup-item--fig { width:510px; } #pickup .pickup-item--fig span { top:-15px; right:-35px; font-size:34px; } #pickup .pickup-item--dtl { width:calc(100% - 510px); padding:0 6.88% 0 90px; } #pickup .pickup-item--dtl .ttl{ margin-bottom:30px; font-size:24px; } #pickup .pickup-item--dtl p big{ font-size:20px; } /* facility_info ---------------------------------------------------------------------- */ /*room_type*/ #facility_info{padding: 100px 0 110px;position:relative;} #facility_info .bg_pattern { top: 20px; left: 140px; } #facility_info .facility_info_banquet { margin-bottom: 100px; } #facility_info .facility_info_banquet h4 { text-align: center; } #facility_info .facility_info_banquet .facility_info_txt { text-align: center; } #facility_info .facility_info_banquet table { margin: 20px auto 0; width: 400px; } #facility_info .facility_info_banquet h5 { font-size: 18px; margin-bottom: 20px; text-align: center; line-height: 30px; margin-top: 30px; } #facility_info .facility_info_banquet h5 span { color: #4d7954; } #facility_info .facility_info_box{display: flex; justify-content: space-between; flex-wrap: wrap;} #facility_info .facility_info_box .room_type{ margin-bottom:50px; } #facility_info .facility_info_box .room_type .room_gallery{ width: 500px; margin-bottom:25px; } #facility_info .facility_info_box .room_type .facility_info_txt{width: 400px;} #facility_info .facility_info_box .room_type .facility_info_txt h4 small{ display: inline-block; font-size: 16px;} #facility_info .facility_info_box .room_type .facility_info_txt h4 .lastsmall{display: block;} #facility_info .facility_info_box .room_type .facility_info_txt p + p{ margin-top:1.5em; } #facility_info .facility_info_box .room_type .facility_info_txt ul{ margin-top:25px; } #facility_info .facility_info_box .room_type .facility_info_txt .ctable{ margin-top:25px; } .bg_gray{position: relative;} .bg_gray::after{position: absolute; z-index: -1; left: 0; top: 90px; content: ""; display: block; width: calc(100% - 30%); height: calc(100% - 50px); margin-right: 30%; background: url(../../images/bg2.png) center center repeat;} /* overview ---------------------------------------------------------------------- */ #overview.cb2{ padding: 110px 0 180px; position: relative} #overview .bg_pattern { top: 50px; right: 50px; z-index: 1; } #overview .overview_box{width: 900px; margin: 0 auto;} #overview .overview_box dl{display: flex; padding: 30px; border-bottom: 1px solid #acafac; width: 100%; align-items: center;} #overview .overview_box dl dt{padding-left: 10px; color: #4d7954; width: 35%; font-size: 15px;} #overview .overview_box dl dd{ width: 65%; font-size: 16px;} #overview .overview_box dl dd span{width: 30%; display: inline-block;} } /* End @media (min-width:1001px) */ /* ---------------------------------------------------------------------- */ @media (min-width: 1001px) and (max-width:1500px) { } /* End @media (min-width: 1001px) and (max-width:1500px) */ /* ---------------------------------------------------------------------- */ @media (min-width: 751px) and (max-width:1300px) { } /* End @media (min-width: 1001px) and (max-width:1390px) */ /* ---------------------------------------------------------------------- */ @media (max-width:1000px) { /* mv ---------------------------------------------------------------------- */ #mv { background: url(../images/mv.jpg) center center no-repeat; background-size: cover; } #mv:after { content: ""; position: absolute; top:0; left: 0; background: url(../../images/ttl_shadow.png) center center no-repeat; width: 100%; height: 50vw; background-size: 16vw auto; } #mv h2 { text-indent: -100000px; background: url(../images/ttl.png) center bottom -9vw no-repeat; background-size: 30vw;} /* catchcopy ---------------------------------------------------------------------- */ .catchcopy{padding: 12vw 0; text-align: center; width: 75vw; margin: 0 auto; position: relative;} .catchcopy .bg_pattern { bottom: -14vw; right: -36vw; width: 55vw; } .catchcopy h3{color: #4d7954; font-size: 7vw; letter-spacing: 1vw; line-height: 2; font-family: 'Noto Sans JP', sans-serif; margin-bottom: 6vw;} .catchcopy p{text-align: left; line-height: 2em; font-size: 4vw;} .bg_pattern2 { position: absolute; z-index: -1; left: 50%; top: -36vw; margin-left: -36vw; width: 70vw;} .bg_pattern { position: absolute; bottom: -6vw; right: -26vw; z-index: -1;} /* pickup ---------------------------------------------------------------------- */ #pickup { position:relative; } #pickup::after { top:-20vw; height:calc(100% + 38vw); content:""; position:absolute; z-index:1; left:0; display:block; width:calc(100% - 15.63%); margin-right:15.63%; background: url(../../images/bg2.png) center center repeat; } #pickup .pickup-item { position:relative; z-index:2; } #pickup .pickup-item--fig { position:relative; flex-direction:column; } #pickup .pickup-item--dtl { color:#ffffff; padding:10vw 20% 0 0; } #pickup .pickup-item--dtl .ttl{ line-height:1.6em; margin-bottom:8vw; font-size:6vw; } #pickup .pickup-item--dtl p{ line-height:2.0em; color: #1E1E1E; } #pickup .pickup-item--dtl p + p{ margin-top:1em; } #pickup .pickup-item--fig span { top:-7vw; left:0; font-size:7vw; } /* facility_info ---------------------------------------------------------------------- */ #facility_info{padding: 20vw 0;position:relative;} #facility_info .bg_pattern { top: 4vw; left: -11vw; width: 60vw; } #facility_info .facility_info_banquet { margin-bottom: 20vw; } #facility_info .facility_info_banquet h4 { margin-top: 8vw; } #facility_info .facility_info_banquet table { margin-top: 3vw; } #facility_info .facility_info_banquet h5 { font-size: 4.8vw; margin-bottom: 4vw; text-align: center; line-height: 9vw; margin-top: 2vw; } #facility_info .facility_info_banquet h5 span { color: #4d7954; } #facility_info .facility_info_box .room_type{ margin-bottom:13vw; } #facility_info .facility_info_box .room_type .room_gallery{ margin-bottom:5.3vw; } #facility_info .facility_info_box .room_type .facility_info_txt{padding-bottom: 30px;} #facility_info .facility_info_box .room_type .facility_info_txt h4 small{ display: block; font-size: 4vw;} #facility_info .facility_info_box .room_type .facility_info_txt h4 .lastsmall{display: block;} #facility_info .facility_info_box .room_type .facility_info_txt p + p{ margin-top:1.5em; } #facility_info .facility_info_box .room_type .facility_info_txt ul{ margin-top:6.6vw; } #facility_info .facility_info_box .room_type .facility_info_txt .ctable{ margin-top:5vw; } #facility_info .facility_info_box .room_type .facility_info_txt .ctable th { display: revert; } .bg_gray{position: relative;} .bg_gray::after{position: absolute; z-index: -1; left: 0; top: 25vw; content: ""; display: block; width: calc(100% - 30%); height: calc(100% - 10vw); margin-right: 30%; background: url(../../images/bg2.png) center center repeat;} /* overview ---------------------------------------------------------------------- */ #overview.cb2{ padding: 16vw 0;} #overview .bg_pattern { bottom: -4vw; right: -4vw; } #overview .overview_box dl{ width: 100%; align-items: center;} #overview .overview_box dl dt{padding: 4vw; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc;color: #4d7954; font-size: 4vw;} #overview .overview_box dl dd{ font-size: 4vw; padding: 6vw 4vw 6vw;} #overview .overview_box dl dd span{width: 30%; display: inline-block;} } /* End @media (max-width: 1000px) */ /* slick style ---------------------------------------------------------------------- */ .slick-dots{ position: absolute; width:100%; list-style-type:none; padding:0; margin:0; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; } .slick-dots li button{ border: 0; outline: none; background: transparent; color:transparent; font-size:0; line-height:0; padding:0; cursor: pointer; } .slick-dots li button::before{ content:""; display:inline-block; border-radius:50%; background-color:#caccbe; opacity:1; vertical-align:middle; } @media (min-width:1001px) { .slick-dots{ bottom:-15px; right:-10px; } .slick-dots li{ width:10px; height:15px; margin:0 10px; } .slick-dots li.slick-active{ width:15px; height:15px; } .slick-dots li button::before{ width:10px; height:10px; } .slick-dots li.slick-active button::before{ width:15px; height:15px; } } @media (max-width:1000px) { .slick-dots{ bottom:-2.5vw; right:0; } .slick-dots li{ width:5px; height:10px; margin:0 5px; } .slick-dots li.slick-active{ width:10px; height:10px; } .slick-dots li button{ height:10px; } .slick-dots li button::before{ width:5px; height:5px; } .slick-dots li.slick-active button::before{ width:10px; height:10px; } }