@charset "utf-8"; /* =================================================== Home CSS ====================================================== */ /* --------------------------------------------------- #main_img ------------------------------------------------------ */ /* animation */ @-webkit-keyframes main_scroll { 0% { transform: translateY(-100%);} 100% { transform: translateY(100%);} } @keyframes main_scroll { 0% { transform: translateY(-100%);} 100% { transform: translateY(100%);} } #main_img::before { content: none; } #main_img { position: relative; padding: 0; } #main_img .slick, #main_img .slick img { height: 100vh; min-height: 780px; width: 100%;} #main_img .slick { z-index: 0; } #main_img .slick img { width: 100%; } #main_img .slick .active img { transform: scale(1.1); transition: transform 8s linear;} #main_img .slick-slide div { vertical-align: bottom;} #main_img .slick-slider { margin: 0; line-height: 1; } #main_img .slick-dots { bottom: 25px; } #main_img .txt { position: absolute; z-index: 1; top: 55%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #main_img .txt .logo { filter: drop-shadow(3px 3px 5px rgba(0 0 0/40%)); } #main_img .txt .tit { color: #fff; width: 925px; filter: drop-shadow(-1px -1px 5px rgba(26 26 26/30%)) drop-shadow(1px -1px 5px rgba(26 26 26/30%)) drop-shadow(-1px 1px 5px rgba(26 26 26/30%)) drop-shadow(1px 1px 5px rgba(26 26 26/30%)); text-stroke: 1px #fff; -webkit-text-stroke: 1px #fff; line-height: 1.3; } #main_img .txt .tit > p:nth-child(1) { font-size: 37px; } #main_img .txt .tit > p:nth-child(1) span { font-size: 75px; } #main_img .txt .tit > p:nth-child(1) span:nth-of-type(1) { font-size: 42px; } #main_img .txt .tit > p:nth-child(1) span:nth-of-type(4) { letter-spacing: 5px;} #main_img .txt .tit > p:nth-child(1) .pc { font-size: 37px; } #main_img .txt .tit > p:nth-child(2) { margin-top: 5px; font-size: 26px; display: flex; align-items: center; justify-content: center; } #main_img .txt .tit > p:nth-child(2) > span { margin: 0 10px;} #main_img .txt .tit > p:nth-child(2) > span span { font-size: 34px;} #main_img .txt .tit > p:nth-child(2)::before, #main_img .txt .tit > p:nth-child(2)::after { content: ''; width: 200px; height: 1px; display: block; background: linear-gradient(to left, #fff 0%, #fff 50%, transparent 100%); } #main_img .txt .tit > p:nth-child(2)::after { background: linear-gradient(to right, #fff 0%, #fff 50%, transparent 100%); } #main_img .scroll { position: absolute; z-index: 5; bottom: 0; left: calc(50% - 42px); color: #fff; text-align: center; } #main_img .scroll:hover { text-decoration: none; } #main_img .scroll span:not(.line) { font-size: 14px; } #main_img .scroll .line { position: relative; overflow: hidden; display: block; width: 84px; height: 50px; bottom: 0; font-size: 0;} #main_img .scroll .line::before { content: ''; display: block; width: 1px; height: 100%; background: rgba(255, 255, 255, .5); position: absolute; left: 50%;} #main_img .scroll .line::after {content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; left: 50%; top: 0; -webkit-animation: main_scroll cubic-bezier(0.645,0.045,0.355,1) 2s infinite; animation: main_scroll cubic-bezier(0.645,0.045,0.355,1) 2s infinite; } #main_img #m_info { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 5px 40px; background: rgba(0 0 0/80%); text-align: center; } #main_img #m_info a { font-size: 14px; color: #fff; } #main_img #m_info a span:nth-child(1) { width: 16px; height: 16px; display: inline-block; margin-right: 10px; padding: 0 0 2px 1px; box-sizing: border-box; border: 1px solid #fff; border-radius: 50%; font-size: 12px; line-height: 1.2; } #main_img #m_info .link_run::before { background: rgba(255 255 255/75%); } @media screen and (max-width: 600px) { #main_img .txt { top: 55%; width: 100%; } #main_img .txt .logo { width: 50%; max-width: 300px; margin: 0 auto; } #main_img .txt .tit { width: 96%; margin: 0 auto; } #main_img .txt .tit > p:nth-child(1) { font-size: 25px; } #main_img .txt .tit > p:nth-child(1) span { font-size: 25px; } #main_img .txt .tit > p:nth-child(1) span:nth-of-type(1) { font-size: 25px; } #main_img .txt .tit > p:nth-child(1) span:nth-of-type(4) { font-size: 35px; letter-spacing: 3px; } #main_img .txt .tit > p:nth-child(2) { margin-top: 5px; font-size: 17px; text-stroke: 0; -webkit-text-stroke: 0; font-weight: bold; } #main_img .txt .tit > p:nth-child(2) > span { margin: 0 5px;} #main_img .txt .tit > p:nth-child(2) > span span { font-size: 17px; } #main_img .txt .tit > p:nth-child(2)::before, #main_img .txt .tit > p:nth-child(2)::after { width: 35px; } #main_img .slick, #main_img .slick img { min-height: 500px; } #main_img .scroll { bottom: 0; } #main_img .scroll .line { height: 38px; } #main_img #m_info { width: 100%; height: 35px; } } /* --------------------------------------------------- lead ------------------------------------------------------ */ #contents_wrap { overflow: hidden; } #lead { background: url(../img/common/contents_bg01.jpg); position: relative; z-index: 1; } /* reserve_col */ .ui-widget.ui-widget-content { z-index: 6!important;} #reserve_col { padding: 40px 0 45px;} #reserve_col > div > dl { display: flex; margin-bottom: 15px; } #reserve_col > div > dl > dt { font-size: 20px; color: #fff; background: #1a1a1a; display: flex; align-items: center; justify-content: center; flex-shrink: 1; width: 290px; box-sizing: border-box; line-height: 1.5; } #reserve_col > div > dl > dt::before { content: ''; background: url(../img/home/icon_search.svg) no-repeat center; width: 16px; height: 16px; display: block; margin-right: 20px; flex-shrink: 0; } #reserve_col > div > dl > dd { flex-grow: 1; display: flex; align-items: flex-end; padding: 17px 60px 25px 4%; box-sizing: border-box; background: #fff;} #reserve_col > div > dl > dd > div { width: 100%; } #search_489ban form { display: flex; align-items: flex-end; } #search_489ban .date_489ban { padding: 0 15px 0 0; box-sizing: border-box; flex-shrink: 0;} #search_489ban .date_489ban dt { font-size: 15px;} #search_489ban .date_489ban dd { display: flex; align-items: center; } #search_489ban .date_489ban dd label { display: flex; align-items: center; margin-left: 10px; font-size: 14px; } #search_489ban .inbox_489ban { padding: 0 15px; box-sizing: border-box; display: flex;} #search_489ban .stay_489ban { width: 100%;} #search_489ban .stay_489ban dt { font-size: 15px;} #search_489ban .stay_489ban dd { align-self: center; width: 94px; height: 45px; position: relative; border: 1px solid #7f7f7f; box-sizing: border-box;} #search_489ban .stay_489ban .stay_label { height: 100%; width: 100%; display: flex; align-items: center; font-size: 19px; background: url(../img/home/icon_arrow.svg)no-repeat right 10px center, #fff; padding: 0 25px 0 10px; letter-spacing: 0;} #search_489ban .person_489ban { margin-right: 10px;} #search_489ban .person_489ban dt { font-size: 15px;} #search_489ban .person_489ban dd { display: flex; align-items: center; width: auto; height: 45px; position: relative; box-sizing: border-box;} #search_489ban .person_489ban .person_label { border: 1px solid #7f7f7f; height: 100%; width: 63px; display: flex; align-items: center; font-size: 19px; background: url(../img/home/icon_arrow.svg)no-repeat right 10px center, #fff; padding: 0 25px 0 10px;} #search_489ban .person_489ban dd span { line-height: 1; margin-left: 5px;} #search_489ban .person_489ban select { width: 63px; } #search_489ban .stay_489ban select { width: 100%;} #search_489ban input[type="text"], #search_489ban select { font-size: 20px; border: none; border-radius: 0; background: #e1e4ef; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; height: 45px; border: 1px solid #7f7f7f; } #search_489ban .date_489ban input[type="text"] { width: 200px; padding: 0 30px 0 20px; box-sizing: border-box; background: url(../img/home/icon_calendar.svg)no-repeat center right 20px,#fff; } #search_489ban input[type="text"]:disabled, #search_489ban .stay_489ban .stay_label.disabled, #search_489ban .person_489ban .person_label.disabled { -webkit-text-fill-color: #888; color: #888; border: 1px solid #7f7f7f; opacity: 1;} #search_489ban select::-ms-expand { display: none;} #search_489ban select { font-size: 16px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;} #search_489ban button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; max-width: 200px; width: 22.5%; height: 63px; margin: 0 0 0 auto; box-sizing: border-box; background: #c42c2f; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .3s; border-radius: 3px; align-self: flex-end; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } /* links */ #reserve_col .links { display: flex; justify-content: center; } #reserve_col .links li { padding-left: 16px; background: url(../img/common/icon_arrow01.svg) no-repeat center left; line-height: 1.5; letter-spacing: 0; } #reserve_col .links li + li { margin-left: 65px;} #reserve_col .links li span { display: inline-block;} @media screen and (hover: hover) { #search_489ban button:hover { background: #a11e20;} } @media screen and (max-width: 600px) { #reserve_col { width: 100%; padding: 4vw 0 10vw; margin: 0 auto;} #reserve_col > div > dl { flex-direction: column; } #reserve_col > div > dl > dt { text-align: center; width: 100%; padding: 4vw;} #reserve_col > div > dl > dd { display: block; padding: 2vw 4% 4vw;} #reserve_col > div > dl > dd > a { width: 100%; height: 55px; margin-left: 0;} #search_489ban form { flex-wrap: wrap; justify-content: space-between; } #search_489ban input[type="text"], #search_489ban select { font-size: 17px; height: 45px;} #search_489ban .date_489ban { width: 100%; padding: 0; margin-bottom: 1vw; flex-grow: 1; display: flex; flex-direction: column;} #search_489ban .date_489ban dd { flex-grow: 1; display: flex;} #search_489ban .date_489ban input[type="text"] { width: 105px; padding: 0 30px 0 10px; background-size: 13px 15px; background-position: center right 5px; flex-grow: 1; font-size: 20px;} #search_489ban .person_489ban dt { font-size: 14px; line-height: 1.8; } #search_489ban .inbox_489ban { padding: 0; width: 32%;} #search_489ban .inbox_489ban:nth-of-type(2) { width: 62%;} #search_489ban .stay_489ban dd { width: 100%; height: 45px;} #search_489ban .stay_489ban .stay_label { padding: 0 6px; background-position: center right 12px;} #search_489ban .person_489ban { width: 50%;} #search_489ban .person_489ban:nth-child(2) { margin-right: 0;} #search_489ban .person_489ban .person_label, #search_489ban .person_489ban select { width: calc(100% - 1em - 5px);} #search_489ban button { width: 100%; max-width: none; margin-left: 0; margin-top: 4vw; height: 50px; } /* links */ #reserve_col .links { flex-direction: column; padding-left: 2%; } #reserve_col .links li + li { margin: 10px 0 0 0;} } /* --------------------------------------------------- lead_txt,lead_map ------------------------------------------------------ */ #lead_txt { padding: 130px 0 85px; display: flex; justify-content: flex-end; position: relative; } #lead_txt > div { margin: 5px 60px 0 0; padding-left: calc(50vw - 600px); position: relative; z-index: 1; flex-grow: 1; } #lead_txt > div .tit_col { line-height: 1.5; z-index: 1; } #lead_txt > div .tit_col h2 { font-size: 34px; margin-top: 20px; } #lead_txt > div .tit_col h2 span { font-size: 38px; } #lead_txt > div .tit_col p { font-size: 22px; } #lead_txt > div > p { line-height: 3; padding-top: 50px; } #lead_txt > div > img { position: absolute; left: 0; bottom: -60px; } #lead_txt > p { width: max(45vw, 545px); z-index: 1; flex-shrink: 0; } #lead_txt > p img { width: 100%; height: 737px;} #lead_txt:after { content: ''; border-left: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; width: 1350px; height: 1345px; top: -300px; left: 6vw; transform: rotate(-50deg); display: block; position: absolute; z-index: -1; } #lead_map { padding: 0 0 40px; overflow: hidden; } #lead_map .map { margin-right: -80px; } #lead_map p { text-align: center; } #lead_map a { margin: 60px auto 0;} @media screen and (max-width: 1500px){ #lead_txt > div { padding-left: 10%; } } @media screen and (max-width: 600px) { #lead_txt { padding: 13vw 0 16vw; flex-direction: column-reverse; } #lead_txt > div { margin: 4vw 4% 0; padding-left: 0; flex-direction: column; } #lead_txt > div .tit_col { width: 100%; margin-left: 0; } #lead_txt > div .tit_col h2 { font-size: 24px; margin-top: 0; } #lead_txt > div .tit_col h2 span { font-size: 30px; } #lead_txt > div .tit_col p { font-size: 18px; margin: 0 0 5px; } #lead_txt > div > p { line-height: 1.8; padding-top: 4vw; filter: drop-shadow(1px 1px 5px #fff) drop-shadow(-1px -1px 5px #fff) drop-shadow(1px -1px 5px #fff) drop-shadow(-1px 1px 5px #fff);} #lead_txt > div > img { margin-top: 4vw; position: static; width: 55vw; } #lead_txt > p { width: 85vw; align-self: flex-end; margin-bottom: 2vw; } #lead_txt > p img { height: auto;} #lead_txt:after { width: 200vw; height: 200vw; top: 8vw; left: calc(50% - 45vw); } #lead_map { padding: 0 0 8vw;} #lead_map p { text-align: left;} #lead_map a { width: 80%; margin: 40px auto 0; } #lead_map .map { margin: 0 -4vw;} } @media screen and (max-width: 495px) { #lead_txt:after { top: 19vw; left: calc(50% - 54vw); } } /* --------------------------------------------------- sec_cuisine ------------------------------------------------------ */ #sec_cuisine { position: relative; padding: 50px 0 0;} #sec_cuisine .slick_dots .photo { position: relative;} #sec_cuisine .slick_dots .photo p { font-size: 14px; line-height: 2; position: absolute; bottom: 0; right: 10px; color: #fff; filter: drop-shadow(0 0 3px rgba(0 0 0/70%)); } #sec_cuisine #cuisine02 { background: url(../img/common/contents_bg02.jpg); color: #fff; position: relative; margin-bottom: 130px; z-index: 1; } #sec_cuisine #cuisine02 dl { padding: 140px 0 0 calc(50vw - 600px); width: 47%; box-sizing: border-box; position: relative; z-index: 2; filter: drop-shadow(0 0 2px #141207) drop-shadow(0 0 5px #141207);} #sec_cuisine #cuisine02 dl dt { font-size: 50px; line-height: 1; padding-bottom: 65px; } #sec_cuisine #cuisine02 dl dt span:nth-of-type(1) { font-size: 24px;} #sec_cuisine #cuisine02 dl dt .en { font-size: 20px; margin-top: 20px;} #sec_cuisine #cuisine02 .photo { position: absolute; top: 0; right: 0; z-index: 0; overflow: hidden; } #sec_cuisine #cuisine02 .photo:after { content: ''; display: block; position: absolute; bottom: 0; left: -125px; width: calc(100% + 250px); height: calc(100% + 125px); box-shadow: inset 125px 0px 125px 125px #141207; } #sec_cuisine #cuisine02 ul { display: flex; justify-content: center; transform: translateY(130px); box-shadow: 0px 0 16px 0 rgba(0 0 0/40%);} #sec_cuisine #cuisine02 ul li:first-child { display: none; } #sec_cuisine #cuisine03 { position: relative; padding: 55px 0 90px; } #sec_cuisine #cuisine03 .detail_col { display: flex; justify-content: space-between; } #sec_cuisine #cuisine03 .detail_col::before { content: ''; background: url(../img/common/bg_illust02.svg) no-repeat; width: 645px; height: 282px; display: block; position: absolute; bottom: 10px; right: 37px; } #sec_cuisine #cuisine03 .detail_col figure { width: 50%; position: relative; } #sec_cuisine #cuisine03 .detail_col figure figcaption { padding: 0 15px; background: #fff; position: absolute; bottom: 0; right: 0; } #sec_cuisine #cuisine03 .detail_col .txt { padding: 65px 0 0; width: 46.25%; } #sec_cuisine #cuisine03 .detail_col .txt p { padding-bottom: 100px; } #sec_cuisine #cuisine03 .detail_col .txt a { width: 355px; margin: 0 0 0 auto;} @media screen and (max-width: 1276px){ #sec_cuisine #cuisine02 dl { padding-left: 3%;} } @media screen and (max-width: 600px) { #sec_cuisine { padding-top: 7vw;} #sec_cuisine .slick_dots .photo p { font-size: 12px; } #sec_cuisine #cuisine02 { margin-bottom: 16vw; } #sec_cuisine #cuisine02 dl { width: 100%; padding: 10vw 4% 0; } #sec_cuisine #cuisine02 dl dt { text-align: center; font-size: 32px; padding-bottom: 5vw; } #sec_cuisine #cuisine02 dl dt span:nth-of-type(1) { font-size: 16px; display: block; margin-top: 0.4em; } #sec_cuisine #cuisine02 dl dt .en { margin-top: 15px; font-size: 18px; } #sec_cuisine #cuisine02 .photo, #sec_cuisine #cuisine02 .photo:after { display: none; } #sec_cuisine #cuisine02 ul { max-width: 86%; flex-wrap: wrap; transform: translateY(16vw); margin-top: -10vw; } #sec_cuisine #cuisine02 ul li { width: 50%; } #sec_cuisine #cuisine02 ul li img { object-fit: cover; width: 100%; height: 100%; } #sec_cuisine #cuisine02 ul li:first-child { display: block; } #sec_cuisine #cuisine03 { padding: 40px 0 50px;} #sec_cuisine #cuisine03 .detail_col { padding-top: 0; flex-direction: column; } #sec_cuisine #cuisine03 .detail_col::before { width: 59vw; height: 26vw; right: -17%; bottom: calc(-3vw + -20px); background-size: contain; z-index: -1; } #sec_cuisine #cuisine03 .detail_col figure { width: 100%; } #sec_cuisine #cuisine03 .detail_col figure figcaption { font-size: 14px; } #sec_cuisine #cuisine03 .detail_col .txt { padding: 3vw 0 0; width: 100%; } #sec_cuisine #cuisine03 .detail_col .txt p { padding-bottom: 3vw; } #sec_cuisine #cuisine03 .detail_col .txt a { width: 250px; max-width: 100%; margin: 0 auto; } } /* --------------------------------------------------- sec_room ------------------------------------------------------ */ #sec_room { padding: 95px 0 100px; position: relative; } #sec_room .main_img + .inner_md > p { position: relative; z-index: 1; text-align: center; padding: 40px 0 65px; } #sec_room .room_list { padding: 0; position: relative; z-index: 1; } #sec_room .room_list > li > p { font-size: 21px; margin-bottom: 35px; text-align: center; padding: 3px 0;} #sec_room .room_list > li:nth-child(1) > p { border: 1px solid #141207; } #sec_room .room_list > li:nth-child(2) > p { background: #141207; color: #fff; } #sec_room .room_list > li + li { margin-top: 70px; } #sec_room .room_list > li > ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px 0; } #sec_room .room_list > li > ul > li { width: 47.5%; position: relative; text-align: left; } #sec_room .room_list > li > ul > li div[class^="slick_"] .slick-dots { bottom: -20px; text-align: right; } #sec_room .room_list > li > ul > li .name { line-height: 1; font-size: 26px; margin-bottom: 15px; letter-spacing: 0.15em; } #sec_room .room_list > li > ul > li .detail_txt { color: #8c8c8c;} #sec_room .room_list + a { width: 280px; margin: 60px auto 0; } @media screen and (hover: hover) { #sec_room .room_list li a:hover img { opacity: 1; } } @media screen and (max-width: 600px) { #sec_room { padding: 13vw 0; } #sec_room .main_img + .inner_md > p { text-align: left; padding: 20px 0 30px; } #sec_room .room_list { flex-wrap: wrap; } #sec_room .room_list > li > p { font-size: 16px; margin: 13px 5px 10px; padding: 5px 0;} #sec_room .room_list > li + li { margin-top: 45px;} #sec_room .room_list > li > ul > li { width: 100%; } #sec_room .room_list > li > ul > li .name { font-size: 16px; margin-bottom: 10px; } #sec_room .room_list > li > ul > li .detail_txt { font-size: 13px; } #sec_room > .inner_md > p { filter: drop-shadow(1px 1px 5px #fff) drop-shadow(-1px -1px 5px #fff) drop-shadow(1px -1px 5px #fff) drop-shadow(-1px 1px 5px #fff);} #sec_room .room_list .slick-dotted.slick-slider { margin-bottom: 20px; } #sec_room .room_list + a { width: 80%; margin: 45px auto 0;} } /* --------------------------------------------------- sec_faci ------------------------------------------------------ */ #sec_faci { padding: 60px 0 75px; position: relative; z-index: 1; background: url(../img/common/contents_bg01.jpg); } #sec_faci::before { content: ''; display: block; position: absolute; top: 75px; right: 0; width: 991px; height: 1155px; background: url(../img/home/faci_01_imgbg.png) no-repeat; background-size: contain; z-index: -1; } #sec_faci .detail_col .txt_col { padding: 50px 0 90px; } #sec_faci .detail_col p { width: 47.75%; filter: drop-shadow(0 0 3px #e6e6e6) drop-shadow(0 0 3px #e6e6e6) drop-shadow(0 0 3px #e6e6e6); } #sec_faci .detail_col ul { margin-bottom: 85px; display: flex; align-items: flex-start; } #sec_faci .detail_col ul li { filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));} #sec_faci .detail_col ul li:nth-child(1) { display: none;} #sec_faci .detail_col ul li:nth-child(2) { width: 40.3%; } #sec_faci .detail_col ul li:nth-child(3) { margin: 230px 0 0 -12%; width: 33.4%; } #sec_faci .detail_col ul li:nth-child(4) { margin: 170px 0 0 7.3%; width: 25.7%;} #sec_faci .slick_faci .spot > div { display: flex; justify-content: space-between; } #sec_faci .slick_faci .spot > div dl { font-size: 16px; line-height: 2.2; padding: 25px calc(50vw - 575px) 20px 0; width: 51.7%; box-sizing: border-box; } #sec_faci .slick_faci .spot > div dl dt { font-size: 30px; margin-bottom: 35px; } #sec_faci .slick_faci .spot > div .photo { width: 45.2%; min-height: 350px; } #sec_faci .slick_faci { margin-bottom: 0;} #sec_faci .slick_faci .slick-dots { bottom: 13px; width: 1200px; margin: 0 auto; max-width: 94%; left: 50%; transform: translateX(-50%); padding: 0 130px 0 0; text-align: right; box-sizing: border-box; z-index: 1;} #sec_faci .slick_faci .slick-next, #sec_faci .slick_faci .slick-prev { font-size: 14px; line-height: 1; color: #000; width: 100px; height: 16px; top: auto; bottom: 0; background-size: contain; transition: opacity .3s; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; padding-bottom: 5px; box-sizing: border-box; z-index: 2; } #sec_faci .slick_faci .slick-next { text-align: left; padding-left: 5px; right: calc(50vw - 600px); } #sec_faci .slick_faci .slick-prev { text-align: right; padding-right: 5px; right: calc(50vw - 380px); left: auto; } #sec_faci .slick_faci .slick-next::after, #sec_faci .slick_faci .slick-prev::after { content: ''; width: 100px; height: 1px; position: absolute; bottom: 0; left: 0; border-bottom: 1px solid #282828; } #sec_faci .slick_faci .slick-next:before, #sec_faci .slick_faci .slick-prev:before { content: ''; width: 15px; height: 1px; position: absolute; bottom: -1px; border-bottom: 1px solid #282828; } #sec_faci .slick_faci .slick-next:before { left: calc(50% + 42px); transform: rotate(30deg) translate(-50%, -50%); } #sec_faci .slick_faci .slick-prev:before { right: calc(50% + 29px); bottom: 7px; transform: rotate(-30deg) translate(-50%, -50%); } #sec_room > ul li img { display: block;} @media screen and (hover: hover) { #sec_faci .slick_faci .slick-next:hover, #sec_faci .slick_faci .slick-prev:hover { opacity: 0.7; } } @media screen and (max-width: 1276px){ #sec_faci .slick_faci .slick-next { right: 3vw; } #sec_faci .slick_faci .slick-prev { right: 260px; } } @media screen and (max-width: 1222px){ #sec_faci .slick_faci .spot > div dl { padding: 25px 3vw 20px 0;} } @media screen and (max-width: 600px) { #sec_faci { padding: 8vw 0 10vw; } #sec_faci::before { display: none; } #sec_faci .detail_col .txt_col { padding: 0 0 6vw; } #sec_faci .detail_col p { width: 100%; } #sec_faci .detail_col ul { max-width: 86%; margin: 0 auto 8vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.4)); } #sec_faci .detail_col ul li { filter: none;} #sec_faci .detail_col ul li, #sec_faci .detail_col ul li:nth-child(2), #sec_faci .detail_col ul li:nth-child(3), #sec_faci .detail_col ul li:nth-child(4) { width: 50%; } #sec_faci .detail_col ul li:nth-child(1) { display: block; } #sec_faci .detail_col ul li:nth-child(3), #sec_faci .detail_col ul li:nth-child(4) { margin: 0;} #sec_faci .slick_faci .spot > div { flex-direction: column; } #sec_faci .slick_faci .spot > div dl { font-size: 16px; line-height: 1.8; padding: 0; width: 92%; margin: 0 auto; } #sec_faci .slick_faci .spot > div dl dt { font-size: 22px; margin-bottom: 2vw; } #sec_faci .slick_faci .spot > div .photo { width: 85vw; min-height: auto; margin-bottom: 4vw; } #sec_faci .slick_faci { padding-bottom: 45px; } #sec_faci .slick_faci .slick-dots { bottom: 13px; width: 92%; max-width: none; padding: 0 110px 0 0; } #sec_faci .slick_faci .slick-next, #sec_faci .slick_faci .slick-prev { width: 85px; padding-bottom: 2px;} #sec_faci .slick_faci .slick-next { text-align: left; padding-left: 3px; right: 4%; } #sec_faci .slick_faci .slick-prev { text-align: right; padding-right: 3px; right: calc(185px + 4%); } #sec_faci .slick_faci .slick-next::after, #sec_faci .slick_faci .slick-prev::after { width: 85px; } #sec_faci .slick_faci .slick-next:before { left: calc(50% + 35px); } #sec_faci .slick_faci .slick-prev:before { right: calc(50% + 21px); } } /* --------------------------------------------------- sec_hotspring ------------------------------------------------------ */ #sec_hotspring { padding: 90px 0 0; position: relative; overflow: hidden; } #sec_hotspring .main_img + .inner_md { position: relative; z-index: 1; text-align: center; padding: 60px 0 80px; filter: drop-shadow(1px 1px 5px #fff) drop-shadow(-1px -1px 5px #fff) drop-shadow(1px -1px 5px #fff) drop-shadow(-1px 1px 5px #fff); } #sec_hotspring div[id^="hotspring"] { display: flex; padding-bottom: 90px; position: relative; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] { width: 57.3%; margin-bottom: 0; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-track { display: flex; height: 100%; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-slide { height: auto;} #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-slide > div { height: 100%; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-list { height: calc(100% - 30px);} #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .photo { height: 100%; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-dots { bottom: 0; text-align: right;} #sec_hotspring div[id^="hotspring"] .detail_col { padding: 65px calc(50vw - 600px) 0 90px;} #sec_hotspring div[id^="hotspring"] .detail_col dt { font-size: 36px; line-height: 1.8; text-stroke: 1px #1a1a1a; -webkit-text-stroke: 1px #1a1a1a;} #sec_hotspring div[id^="hotspring"] .detail_col dd { margin-top: 25px; } #sec_hotspring div[id^="hotspring"] .detail_col dd ul { margin-top: 35px; } #sec_hotspring div[id^="hotspring"] .detail_col dd li { text-indent: -1em; padding-left: 1em; line-height: 1.4; } #sec_hotspring div[id^="hotspring"] .detail_col dd li::before { content: '○'; } #sec_hotspring div[id^="hotspring"] .detail_col dd li + li { margin-top: calc(1em * 0.8); } #sec_hotspring div[id^="hotspring"] .detail_col dd dl { margin-top: 35px; border: 1px solid #c0c0c0; padding: 15px; } #sec_hotspring div[id^="hotspring"] .detail_col dd dl dt { font-weight: bold; } #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) { flex-direction: row-reverse; } #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) div[class^="slick_"] .slick-dots { text-align: left;} #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) .detail_col { padding: 65px 90px 0 calc(50vw - 600px);} /* hotspring01 */ #sec_hotspring #hotspring01::before { content: ''; border-bottom: 1px solid #b2b2b2; border-left: 1px solid #b2b2b2; width: 1345px; height: 1349px; top: -298px; right: clamp(-33px, calc(50vw - 630px), 256px); transform: rotate(-133deg); display: block; position: absolute; z-index: -1; } /* hotspring02 */ #sec_hotspring #hotspring02 { background: #fff;} #sec_hotspring #hotspring02::before { content: ''; background: url(../img/common/bg_illust03.png) no-repeat; width: 517px; height: 188px; display: block; position: absolute; bottom: 65px; left: -10px; } @media screen and (max-width: 1277px){ #sec_hotspring div[id^="hotspring"] .detail_col { padding: 25px 3% 0 90px;} #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) .detail_col { padding: 25px 90px 0 3%;} } @media screen and (max-width: 600px) { #sec_hotspring { padding: 13vw 0 0; } #sec_hotspring .main_img + .inner_md { text-align: left; padding: 30px 0 0; } :root { --font-size: min(24px, 7.5vw); } #sec_hotspring div[id^="hotspring"] { flex-direction: column-reverse; padding: 0 0 10vw; margin: 0 4vw; box-sizing: border-box; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] { width: 100%; margin-bottom: 0; } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-list { height: calc(100% - 20px); } #sec_hotspring div[id^="hotspring"] div[class^="slick_"] .slick-dots { text-align: center;} #sec_hotspring div[id^="hotspring"] .detail_col { padding: 0;} #sec_hotspring div[id^="hotspring"] .detail_col dt { font-size: var(--font-size); margin-bottom: 10px; line-height: 1.5; } #sec_hotspring div[id^="hotspring"] .detail_col dd { margin-top: 10px; } #sec_hotspring div[id^="hotspring"] .detail_col dd ul { margin-top: 0.5em; } #sec_hotspring div[id^="hotspring"] .detail_col dd dl { margin: 1em 0 0; padding: 15px 0; } #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) { flex-direction: column-reverse; } #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) div[class^="slick_"] .slick-dots { text-align: center;} #sec_hotspring div[id^="hotspring"]:nth-of-type(2n) .detail_col { padding: 0; } /* hotspring01 */ #sec_hotspring #hotspring01 { padding-top: 30px; } #sec_hotspring #hotspring01 .slick_dots { position: absolute; top: calc((( var(--font-size) * 1.5 ) * 2) + 40px); } #sec_hotspring #hotspring01 .detail_col { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);} #sec_hotspring #hotspring01 .detail_col > dd { padding-top: calc(64vw + 20px); } #sec_hotspring #hotspring01::before { border-left: none; width: 200vw; height: 200vw; top: -45vw; right: 0; } /* hotspring02 */ #sec_hotspring #hotspring02 .slick_dots { position: absolute; top: calc(( var(--font-size) * 1.5 ) + 10px); } #sec_hotspring #hotspring02 .detail_col > dd { padding-top: calc(64vw + 20px); } #sec_hotspring #hotspring02::before { display: none; } } /* --------------------------------------------------- sec_access ------------------------------------------------------ */ #sec_access { padding: 10px 0 120px; } #sec_access .gmap { position: relative; overflow: hidden; padding-bottom: 600px; } #sec_access .gmap iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #sec_access .access_layout { padding: 60px 0 0; } #sec_access .access_layout > dl { display: flex; flex-direction: column; border-bottom: 1px dashed #dbdbdb; } #sec_access .access_layout > dl dt { font-size: 20px; text-align: center; padding: 35px 40px 10px; display: flex; align-items: center; box-sizing: border-box; letter-spacing: 0.15em; } #sec_access .access_layout > dl dt::before { content: ''; display: inline-block; margin-right: 20px; } #sec_access .access_layout > dl:nth-of-type(1) dt::before { background: url(../img/home/icon_plane.svg) no-repeat; height: 29px; width: 29px;} #sec_access .access_layout > dl:nth-of-type(2) dt::before { background: url(../img/home/icon_train.svg) no-repeat; height: 34px; width: 26px;} #sec_access .access_layout > dl:nth-of-type(3) dt::before { background: url(../img/home/icon_bus.svg) no-repeat; height: 31px; width: 29px;} #sec_access .access_layout > dl:nth-of-type(4) dt::before { background: url(../img/home/icon_car.svg) no-repeat; height: 25px; width: 29px;} #sec_access .access_layout > dl dd { padding: 10px 40px 35px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } #sec_access .access_layout > dl dd p + p { margin-top: 1em;} #sec_access .access_layout .bottom_link { font-size: 15px; margin: 60px 0 0; display: flex; align-items: center; justify-content: center; } #sec_access .access_layout .bottom_link a:not(.googlemap_link) { position: relative; display: flex; align-items: center; transition: opacity .3s; } #sec_access .access_layout .bottom_link a:not(.googlemap_link)::after { content: ''; width: 17px; height: 24px; background: url(../img/home/icon_tab.svg) no-repeat center; margin-left: 8px; display: block; background-size: contain; } #sec_access .access_layout .bottom_link .googlemap_link { flex-direction: row-reverse; background: #141309; width: 280px; height: 50px; } #sec_access .access_layout .bottom_link .googlemap_link::after { content: ''; width: 17px; height: 24px; background: url(../img/home/map_icon_w.svg) no-repeat center; margin-right: 15px; display: block; transition: background .5s; } @media screen and (hover: hover) { #sec_access .access_layout .bottom_link .googlemap_link:hover:after { background: url(../img/home/map_icon_b.svg) no-repeat center; } } @media screen and (max-width: 600px){ #sec_access { padding: 3vw 0 10vw; } #sec_access .gmap { padding-bottom: 60vw; } #sec_access .access_layout { padding: 5vw 0 0; } #sec_access .access_layout > dl dt { width: 100%; padding: 4vw 0 0; font-size: 18px; } #sec_access .access_layout > dl dd { padding: 2vw 0 4vw; width: 100%; } #sec_access .access_layout > dl dt::before { margin-right: 8px;} #sec_access .access_layout > dl:nth-of-type(1) dt::before { height: 21px; width: 21px;} #sec_access .access_layout > dl:nth-of-type(2) dt::before { height: 26px; width: 20px;} #sec_access .access_layout > dl:nth-of-type(3) dt::before { height: 24px; width: 21px;} #sec_access .access_layout > dl:nth-of-type(4) dt::before { height: 20px; width: 22px;} #sec_access .access_layout .bottom_link { flex-wrap: wrap; margin: 5vw 0 0;} #sec_access .access_layout .bottom_link li { min-width: calc(50% - 2.5px); flex-shrink: 0; } #sec_access .access_layout .bottom_link li:last-child { width: 100%; } #sec_access .access_layout .bottom_link a:not(.googlemap_link) { margin: 0 0.5em 1vw 0;} #sec_access .access_layout .bottom_link .googlemap_link { width: 80%; margin: 4vw auto 0;} } /* --------------------------------------------------- sec_info ------------------------------------------------------ */ #sec_info { padding: 0 0 170px; } #sec_info #table_col dl div { display: flex; } #sec_info #table_col dl div dt { width: 300px; display: flex; align-items: center; background: #e6e6e6; padding: 15px 0 15px 45px; box-sizing: border-box; border-bottom: 2px dotted #dbdbdb; } #sec_info #table_col dl div dd { width: calc(100% - 300px); display: flex; align-items: center; padding: 15px 0 15px 25px; box-sizing: border-box; border-bottom: 2px dotted #dbdbdb; } #sec_info #table_col dl div:first-child dt, #sec_info #table_col dl div:first-child dd { border-top: 2px dotted #dbdbdb; } #sec_info #weather_col { padding: 40px 0; margin-top: 75px; border: 1px solid #dbdbdb; } #sec_info #bnr_col { margin-top: 75px; } #sec_info #bnr_col ul { display: flex; margin: 0 3.75%;} #sec_info #bnr_col ul li { width: calc((100% - 60px) / 3); max-width: 350px; margin-right: 30px;} #sec_info #bnr_col ul li:nth-child(3n) { margin-right: 0;} #sec_info #bnr_col ul li a { transition: opacity .3s; } @media screen and (hover: hover) { #sec_info #bnr_col ul li a:hover { opacity: 0.7;} } @media screen and (max-width: 600px){ #sec_info { padding: 5vw 0 20vw; } #sec_info > div:not(:first-of-type) { border-top: none; } #sec_info #table_col dl { border-top: 1px dotted #dbdbdb; } #sec_info #table_col dl div { flex-direction: column; } #sec_info #table_col dl div dt { width: 100%; padding: 10px 0 10px 10px; border-bottom:none; font-weight: bold; } #sec_info #table_col dl div dd { width: 100%; padding: 10px 0 10px 10px; border-bottom: 1px dotted #dbdbdb; } #sec_info #table_col dl div:first-child dt, #sec_info #table_col dl div:first-child dd { border-top: none } #sec_info #weather_col { padding: 4vw 4% 0 4%; margin-top: 7vw; } #sec_info #bnr_col { margin-top: 7vw; } #sec_info #bnr_col ul { margin: 0 auto; flex-direction: column;} #sec_info #bnr_col ul li { width: 100%; max-width: none; margin-bottom: 15px; margin-right: 0; } #sec_info #bnr_col ul li img { width: 100%; height: auto;} #sec_info #bnr_col ul li:last-child { margin-bottom: 0;} }