@charset "utf-8"; /*============================ #topContentArea ============================*/ #topContentArea { position: relative; } /*============================ #topPanelArea ============================*/ #topPanelArea { margin-left: 240px; } #topPanelArea .swiper-container {} #topPanelArea .swiper-container ul.swiper-wrapper {} #topPanelArea .swiper-container ul.swiper-wrapper li.swiper-slide { min-height: 820px; height: 80vh; border-radius: 0 0 0 80px; overflow: hidden; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05); } #topPanelArea .swiper-container ul.swiper-wrapper li.swiper-slide img { position: absolute; width: 100%; height: 100%; top: 0; object-fit: cover; transition: all 250ms ease-out; filter: brightness(0.65); } #topPanelArea .copy { position: absolute; z-index: 2; bottom: 70px; right: 100px; font-size: 2.25em; letter-spacing: 0.2em; line-height: 2; color: #fff; } #topPanelArea .copy span { position: relative; opacity: 0; animation-name: text01-animate; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes text01-animate { 0% { opacity: 0; left: 20px; } 100% { opacity: 1; left: 0; } } #topPanelArea .copy span:nth-child(1) { animation-delay: 0.50s; } #topPanelArea .copy span:nth-child(2) { animation-delay: 0.55s; } #topPanelArea .copy span:nth-child(3) { animation-delay: 0.60s; } #topPanelArea .copy span:nth-child(4) { animation-delay: 0.65s; } #topPanelArea .copy span:nth-child(5) { animation-delay: 0.70s; } #topPanelArea .copy span:nth-child(6) { animation-delay: 0.75s; } #topPanelArea .copy span:nth-child(7) { animation-delay: 0.80s; } #topPanelArea .copy span:nth-child(8) { animation-delay: 0.85s; } #topPanelArea .copy span:nth-child(9) { animation-delay: 0.90s; } #topPanelArea .copy span:nth-child(10) { animation-delay: 0.95s; } #topPanelArea .copy span:nth-child(11) { animation-delay: 1.00s; } #topPanelArea .copy span:nth-child(12) { animation-delay: 1.05s; } #topPanelArea .copy span:nth-child(13) { animation-delay: 1.1s; } #topPanelArea .copy span:nth-child(14) { animation-delay: 1.15s; } #topPanelArea .copy span:nth-child(15) { animation-delay: 1.2s; } #topPanelArea .copy span:nth-child(16) { animation-delay: 1.25s; } #topPanelArea .copy span:nth-child(17) { animation-delay: 1.3s; } #topPanelArea .copy span:nth-child(18) { animation-delay: 1.35s; } #topPanelArea .copy span:nth-child(19) { animation-delay: 1.4s; } #topPanelArea .copy span:nth-child(20) { animation-delay: 1.45s; } #topPanelArea .copy span:nth-child(21) { animation-delay: 1.5s; } #topPanelArea .copy span:nth-child(22) { animation-delay: 1.55s; } #topPanelArea .copy span:nth-child(23) { animation-delay: 1.6s; } #topPanelArea .copy span:nth-child(24) { animation-delay: 1.65s; } #topPanelArea .copy span:nth-child(25) { animation-delay: 1.7s; } #topPanelArea .copy span:nth-child(26) { animation-delay: 1.75s; } #topPanelArea .copy span:nth-child(27) { animation-delay: 1.8s; } #topPanelArea .copy span:nth-child(28) { animation-delay: 1.85s; } #topPanelArea .copy span:nth-child(29) { animation-delay: 1.9s; } #topPanelArea .scroll { position: absolute; left: 300px; width: 120px; bottom: 45px; transform: rotate(270deg); border-top: solid 1px #fff; padding-top: 10px; color: #fff; letter-spacing: 0.1em; z-index: 2; text-align: right; transition: all 250ms ease-out; } #topPanelArea .scroll::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 12px; background: #fff; position: absolute; left: 50%; transform: translateX(-50%) rotate(90deg); margin-top: -16px; z-index: 2; animation-name: scroll-animate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transition: all 250ms ease-out; } @keyframes scroll-animate { 0% { left: 110px; } 100% { left: -20px; } } #en #topPanelArea .copy { font-size: 2.375em; letter-spacing: 0.05em; } /*============================ #aboutArea ============================*/ #aboutArea { padding-top: 180px; padding-bottom: 120px; position: relative; background: linear-gradient(#fff, #f3f3f3); } #aboutArea .main { display: flex; align-items: flex-start; } #aboutArea .main .title { width: 28%; padding-top: 20px; } #aboutArea .main .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #aboutArea .main .title .ja { margin-top: 30px; font-size: 1.125em; color: #462203; } #aboutArea .main .data { width: 72%; } #aboutArea .main .data .copy { font-size: 1.5em; line-height: 2.5; letter-spacing: 0.15em; } #aboutArea .main .data .text { margin-top: 60px; line-height: 2.5; letter-spacing: 0.15em; } #aboutArea .main .image01 { position: absolute; left: 50%; margin-left: 440px; top: -40px; width: 545px; box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.2); } #aboutArea .main .image01 img { width: 100%; height: auto; } #aboutArea .main .image02 { position: absolute; left: 50%; margin-left: -1080px; top: 240px; width: 680px; box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.2); } #aboutArea .main .image02 img { width: 100%; height: auto; } #aboutArea .main .image03 { position: absolute; left: 50%; margin-left: 700px; top: 320px; width: 245px; box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.2); } #aboutArea .main .image03 img { width: 100%; height: auto; } #aboutArea .main .image04 { position: absolute; left: 50%; margin-left: 300px; top: 320px; } #aboutArea .main .image04 img { width: 100%; height: auto; } #aboutArea .movie { margin-top: 160px; position: relative; overflow: hidden; height: 450px; } #aboutArea .movie video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -53%); width: 100%; height: auto; } #aboutArea .sub { margin-top: 120px; } #aboutArea .sub ul {} #aboutArea .sub ul li { float: left; width: 360px; margin-right: 60px; } #aboutArea .sub ul li:last-child { margin-right: 0; } #aboutArea .sub ul li .image { width: 360px; border-radius: 5px; overflow: hidden; } #aboutArea .sub ul li .image img { width: 100%; height: auto; } #aboutArea .sub ul li .title { text-align: center; margin-top: 35px; font-size: 1.5em; letter-spacing: 0.15em; font-weight: bold; line-height: 1.25; } #aboutArea .sub ul li:last-child .title { letter-spacing: 0.1em; font-feature-settings: 'palt'; } #aboutArea .sub ul li .text { margin-top: 20px; line-height: 1.75; letter-spacing: 0.15em; font-feature-settings: 'palt'; } #aboutArea .sub ul li span { display: inline-block; margin: 20px 14px 0 0; padding: 9px 12px 8px 12px; background-color: #654; color: #fff; border-radius: 3px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 0.875em; letter-spacing: 0.1em; } #en #aboutArea .main .data .copy { letter-spacing: 0.05em; } #en #aboutArea .main .data .text { width: 560px; letter-spacing: 0.05em; } #en #aboutArea .sub ul li .title { letter-spacing: 0.05em; } #en #aboutArea .sub ul li .text { letter-spacing: 0.05em; } /*============================ #galleryArea ============================*/ #galleryArea { margin-top: 120px; } #galleryArea .title { text-align: center; } #galleryArea .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #galleryArea .title .ja { margin-top: 20px; font-size: 1.125em; color: #462203; } #galleryArea .imageSlide { margin-top: 50px; } #galleryArea .imageSlide .swiper-container {} #galleryArea .imageSlide .swiper-container.slider03 { margin-top: 10px; } #galleryArea .imageSlide .swiper-container ul.swiper-wrapper { transition-timing-function: linear; } #galleryArea .imageSlide .swiper-container ul.swiper-wrapper li.swiper-slide { float: left; margin-right: 10px; width: 280px!important; height: 280px; } #galleryArea .imageSlide .swiper-container ul.swiper-wrapper li.swiper-slide img { width: 100%; height: auto; } /*============================ #detailArea ============================*/ #detailArea { margin-top: 120px; padding-top: 120px; background-color: #f3f3f3; } #detailArea .title { text-align: center; } #detailArea .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #detailArea .title .ja { margin-top: 20px; font-size: 1.125em; color: #462203; } #detailArea .list { margin-top: 45px; } #detailArea .list ul {} #detailArea .list ul li { float: left; position: relative; width: 80px; margin-right: 40px; } #detailArea .list ul li:before { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; } #detailArea .list ul li:nth-child(1):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_wifi.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 38px; height: 36px; } #detailArea .list ul li:nth-child(2):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_air.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 38px; height: 28px; } #detailArea .list ul li:nth-child(3):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_kinen.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 36px; height: 34px; } #detailArea .list ul li:nth-child(4):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_garden.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 40px; height: 39px; } #detailArea .list ul li:nth-child(5):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_selfcheckin.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 35px; height: 35px; } #detailArea .list ul li:nth-child(6):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_dokuritu.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 36px; height: 34px; } #detailArea .list ul li:nth-child(7):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_bed.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 37px; height: 33px; } #detailArea .list ul li:nth-child(8):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_reizoko.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 27px; height: 44px; } #detailArea .list ul li:nth-child(9):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_sentakuki.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 35px; height: 41px; } #detailArea .list ul li:nth-child(10):after { content: ""; position: absolute; background-image: url("../../imageFile/icon_honyaku.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 43px; height: 39px; } #detailArea .list ul li .itemName { text-align: center; margin-top: 100px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 0.875em; letter-spacing: 0.05em; font-feature-settings: 'palt'; line-height: 1.5; font-weight: bold; } #detailArea .listDetail { margin-top: 55px; } #detailArea .listDetail ul {} #detailArea .listDetail ul li { float: left; position: relative; padding: 0 100px 25px; width: 33%; border-right: 1px solid #ccc; } #detailArea .listDetail ul li::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; background-color: #fff; border-radius: 50%; } #detailArea .listDetail ul li:nth-child(1) { padding-bottom: 50px; } #detailArea .listDetail ul li:nth-child(1)::after { content: ""; position: absolute; background-image: url("../../imageFile/icon_kitchen.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 55px; height: 30px; } #detailArea .listDetail ul li:nth-child(2) { padding: 0 80px 25px; } #detailArea .listDetail ul li:nth-child(2)::after { content: ""; position: absolute; background-image: url("../../imageFile/icon_bath.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 40px; height: 40px; } #detailArea .listDetail ul li:nth-child(3) { border-right: none; } #detailArea .listDetail ul li:nth-child(3)::after { content: ""; position: absolute; background-image: url("../../imageFile/icon_kagu.svg"); background-repeat: no-repeat; background-size: contain; left: 50%; top: 40px; transform: translate(-50%, -50%); width: 40px; height: 40px; } #detailArea .listDetail ul li .name { text-align: center; position: relative; margin-top: 100px; padding-bottom: 20px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: bold; } #detailArea .listDetail ul li span { display: block; padding-bottom: 10px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; } #detailArea .floor { margin-top: 80px; position: relative; } #detailArea .floor .title { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); } #detailArea .floor .title h2 { text-align: left; } #detailArea .floor .title .ja { text-align: left; } #detailArea .floor .image { margin-top: 30px; text-align: right; } #detailArea .floor .image img { width: 800px; height: auto; } #detailArea { padding-bottom: 120px; } #detailArea .facility { margin-top : 85px; } #detailArea .facility .title {} #detailArea .facility .title h2 {} #detailArea .facility .title .ja {} #detailArea .facility table { margin-top: 40px; width: 100%; } #detailArea .facility table tbody {} #detailArea .facility table tbody tr {} #detailArea .facility table tbody tr th { padding: 35px 0 35px 35px; vertical-align: middle; border-top: 1px solid #222; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: bold; line-height: 1.5; } #detailArea .facility table tbody tr td { padding: 35px 0 35px 35px; border-top: 1px solid #ccc; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; line-height: 1.5; } #detailArea .facility table tbody tr td img { padding-bottom: 20px; } #detailArea .facility table tbody tr:last-child th { border-bottom: 1px solid #222; } #detailArea .facility table tbody tr:last-child td { border-bottom: 1px solid #ccc; } #detailArea .movie { display: flex; position: relative; margin-top: 80px; } #detailArea .movie .title { text-align: left; padding-top: 100px; } #detailArea .movie .title h2 {} #detailArea .movie .title .ja { margin-top: 15px; } #detailArea .movie .movieThumb { margin-left: 120px; width: 520px; height: 300px; position: relative; } #detailArea .movie .movieThumb a { display: block; position: relative; border-radius: 10px; overflow: hidden; } #detailArea .movie .movieThumb a img { width: 100%; height: auto; } #detailArea .movie .movieThumb a::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); transition: 0.25s all; } #detailArea .movie .movieThumb a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translateX(-50%) translateY(-50%); background: url("../../imageFile/icon_play_movie.svg") no-repeat center; background-size: 100px auto; pointer-events: none; } #detailArea .movie .movieThumb a:hover::before { background: rgba(0, 0, 0, 0); } #detailArea .movie .copy { position: absolute; width: 380px; right: 0; top: 80px; line-height: 1.75; letter-spacing: 0.1em; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; } #detailArea .movie .copy span { margin-top: 20px; display: block; font-size: 0.75em; color: #777; } #en #detailArea .list ul li .itemName { font-size: 0.75em; letter-spacing: 0; } #en #detailArea .movie .copy { letter-spacing: 0.05em; } /*============================ #reservationArea ============================*/ #reservationArea { position: relative; height: 350px; } #reservationArea::before { content: ""; position: absolute; left: -10px; top: 0; width: 60%; height: 100%; background: url("../../imageFile/bg_image_resevetion.png") no-repeat left center; background-size: cover; z-index: 0; } #reservationArea::after { content: ""; position: absolute; width: 75%; right: 0; height: 350px; background-image: linear-gradient(271deg, rgba(51, 34, 17, 1) 62%, rgba(51, 34, 17, 0.63) 86%, rgba(51, 34, 17, 0)); z-index: 0; } #reservationArea .button { position: absolute; left: 50%; top: 46%; transform: translateX(-50%) translateY(-50%); z-index: 1; } #reservationArea .button a { display: block; padding: 30px 50px;min-width: 400px; background: linear-gradient(90deg, rgba(160, 132, 39, 1), rgba(197, 178, 70, 1)); color: #fff; font-size: 1.5em; letter-spacing: 0.1em; text-align: center; transition: 0.25s all; overflow: hidden; } #reservationArea .button a::before { content: ""; display: block; border: 1px solid #fff; width: 97%; height: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.5; transition: 0.25s all; } #reservationArea .button a::after { content: ""; position: absolute; width: 8px; height: 8px; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; top: 50%; right: 35px; margin-top: -4px; transform: rotate(45deg); pointer-events: none; transition: 0.25s all; } #reservationArea .notice { position: absolute; left: 50%; top: 68%; transform: translateX(-50%) translateY(-50%); z-index: 1; font-size: 0.875em; color: #fff; letter-spacing: 0.1em; } #reservationArea .button a:hover { letter-spacing: 0.2em; } #reservationArea .button a:hover::before { opacity: 0; } #reservationArea .button a:hover::after { right: 25px; } #en #reservationArea .button a { letter-spacing: 0; } #en #reservationArea .button a:hover { letter-spacing: 0.05em; } /*============================ #faqArea ============================*/ #faqArea { margin-top: 100px; text-align: center; } #faqArea .title {} #faqArea .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #faqArea .title .ja { margin-top: 20px; font-size: 1.125em; color: #462203; } #faqArea .content { margin-top: 40px; padding: 0 120px; } #faqArea .content ul {} #faqArea .content ul li { margin-top: 40px; } #faqArea .content ul li .question { position: relative; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; padding: 20px 50px 19px 10px; font-size: 1.125em; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; cursor: pointer; text-indent: -1.25em; line-height: 1.25; } #faqArea .content ul li .question::before { content:""; position: absolute; display: block; right: 33px; top: 50%; width: 25px; height: 1px; background: #555; transition: 0.25s all; } #faqArea .content ul li .question::after { content:""; position: absolute; display: block; background: #555; right: 45px; top: 50%; margin-top: -12px; width: 1px; height: 25px; transition: 0.25s all; } #faqArea .content ul li .question:hover::before { right: 23px; } #faqArea .content ul li .question:hover::after { right: 35px; } #faqArea .content ul li .question span {} #faqArea .content ul li .question.close { background: #fafafa; } #faqArea .content ul li .question.close::before {} #faqArea .content ul li .question.close::after { display: none; } #faqArea .content ul li .answer { position: relative; display: inline-block; text-align: left; padding: 0 0 0 80px; margin: 40px auto 0; margin-bottom: 60px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; line-height: 1.5; } #faqArea .content ul li .answer span { position: absolute; text-align: center; left: 0; top: 50%; margin-top: -30px; display: block; width: 60px; height: 60px; line-height: 60px; border-radius: 60px; background: rgba(160, 132, 39, 0.5); color: #fff; font-size: 1.75em; } #faqArea .content ul li .answer em { display: block; margin-bottom: 10px; font-weight: bold; font-style: normal; } #faqArea .content ul li .answer a { text-decoration: underline; } /*============================ #informationArea ============================*/ #informationArea { margin-top: 120px; } #informationArea .title { text-align: center; } #informationArea .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #informationArea .title .ja { margin-top: 20px; font-size: 1.125em; color: #462203; letter-spacing: 0.1em; } #informationArea ul { margin-top: 40px; } #informationArea ul li { float: left; margin-right: 60px; width: 360px; } #informationArea ul li:nth-child(3n) { margin-right: 0; } #informationArea ul li:nth-child(n+4) { margin-top: 40px; } #informationArea ul li .image { width: 360px; border-radius: 5px; overflow: hidden; } #informationArea ul li .image img { width: 100%; height: auto; } #informationArea ul li .data { position: relative; } #informationArea ul li .data .name { margin-top: 25px; font-size: 1.25em; font-weight: bold; letter-spacing: 0.1em; } #informationArea ul li .data .note { position: absolute; right: 0; top: 2px; color: #7D5A14; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-weight: bold; } #informationArea ul li .data .text { clear: both; margin-top: 15px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; line-height: 1.75; } #en #informationArea ul li .data .name { letter-spacing: 0.05em; } #en #informationArea ul li .data .note { margin-top: 10px; position: inherit; top: inherit; right: inherit; line-height: 1.25; } /*============================ #accessArea ============================*/ #accessArea { margin-top: 120px; } #accessArea iframe { filter: grayscale(1); width: 100%; height: 480px; } #accessArea .detail { margin: 100px 0 140px; display: flex; } #accessArea .detail .title { text-align: left; } #accessArea .detail .title h2 { letter-spacing: 0.1em; font-weight: 500; font-size: 2.5em; } #accessArea .detail .title .ja { margin-top: 20px; font-size: 1.125em; color: #462203; } #accessArea .detail .copy { margin-left: 140px; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; line-height: 1.75; letter-spacing: 0.1em; } #en #accessArea .detail .copy { letter-spacing: 0.05em; }