@charset "utf-8";

@media screen and (max-width: 640px) {
	
/*============================
#topContentArea
============================*/
#topContentArea { position: relative; }

/*============================
#topPanelArea
============================*/
#topPanelArea { margin-left: 0; }
#topPanelArea .swiper-container {}
#topPanelArea .swiper-container ul.swiper-wrapper {}
#topPanelArea .swiper-container ul.swiper-wrapper li.swiper-slide { min-height: inherit; height: 80vh; border-radius: 0; }
#topPanelArea .swiper-container ul.swiper-wrapper li.swiper-slide img {}
#topPanelArea .copy { bottom: 30px; left: 30px; right: inherit; font-size: 1.25em; width: 80%; text-align: left; }
#topPanelArea .copy span {}
#topPanelArea .copy span:nth-child(1) {}
#topPanelArea .copy span:nth-child(2) {}
#topPanelArea .copy span:nth-child(3) {}
#topPanelArea .copy span:nth-child(4) {}
#topPanelArea .copy span:nth-child(5) {}
#topPanelArea .copy span:nth-child(6) {}
#topPanelArea .copy span:nth-child(7) {}
#topPanelArea .copy span:nth-child(8) {}
#topPanelArea .copy span:nth-child(9) {}
#topPanelArea .copy span:nth-child(10) {}
#topPanelArea .copy span:nth-child(11) {}
#topPanelArea .copy span:nth-child(12) {}
#topPanelArea .copy span:nth-child(13) {}
#topPanelArea .copy span:nth-child(14) {}
#topPanelArea .copy span:nth-child(15) {}
#topPanelArea .copy span:nth-child(16) {}
#topPanelArea .copy span:nth-child(17) {}
#topPanelArea .copy span:nth-child(18) {}
#topPanelArea .copy span:nth-child(19) {}
#topPanelArea .copy span:nth-child(20) {}
#topPanelArea .copy span:nth-child(21) {}
#topPanelArea .copy span:nth-child(22) {}
#topPanelArea .copy span:nth-child(23) {}
#topPanelArea .copy span:nth-child(24) {}
#topPanelArea .copy span:nth-child(25) {}

#topPanelArea .scroll { left: inherit; right: -20px; width: 120px; bottom: 45px; color: #fff; transform: rotate(270deg); border-top: solid 1px #fff; padding-top: 10px; font-size: 0.75em; }
#topPanelArea .scroll::before {}
	
#en #topPanelArea .copy { font-size: 1.3125em; }

/*============================
#aboutArea
============================*/
#aboutArea { padding-top: 60px; padding-bottom: 60px;}
#aboutArea .main { display: block; padding-bottom: 200px; position: relative; }
#aboutArea .main .title { width: 100%; padding-top: 0; }
#aboutArea .main .title h2 { font-size: 1.5em; }
#aboutArea .main .title .ja { margin-top: 10px; font-size: 1em; }
#aboutArea .main .data { width: 100%; }
#aboutArea .main .data .copy { margin-top: 30px; font-size: 1.125em; line-height: 1.75; }
#aboutArea .main .data .text { margin-top: 30px; line-height: 1.75; font-size: 0.875em; }
#aboutArea .main .data .text br { display: none; }
#aboutArea .main .image01 { display: none; }
#aboutArea .main .image01 img {}
#aboutArea .main .image02 { position: absolute; left: 50%; margin-left: -240px; top: inherit; bottom: 0;  width: 240px; }
#aboutArea .main .image02 img { width: 100%; height: auto; }
#aboutArea .main .image03 { display: none; }
#aboutArea .main .image03 img {}
#aboutArea .main .image04 { position: absolute; left: 55%; margin-left: 0; top: inherit; bottom: 30px; width: 40%; }
#aboutArea .main .image04 img { width: 100%; height: auto; }
#aboutArea .movie { margin-top: 60px; height: 200px; }
#aboutArea .movie a { display: block; height: 200px; }
#aboutArea .movie a video { width: 100%; height: auto; transform: translate(-50%, -50%); }
#aboutArea .sub { margin-top: 60px; }
#aboutArea .sub ul {}
#aboutArea .sub ul li { float: inherit; width: 100%; margin-right: 0; margin-top: 30px; }
#aboutArea .sub ul li:last-child { margin-right: 0; }
#aboutArea .sub ul li .image { width: auto; margin-left: -20px; margin-right: -20px; border-radius: 0;  }
#aboutArea .sub ul li .image img {}
#aboutArea .sub ul li .title { margin-top: 20px; font-size: 1.25em; letter-spacing: 0; }
#aboutArea .sub ul li:last-child .title {}
#aboutArea .sub ul li .text { margin-top: 12px; font-size: 0.875em; }
#aboutArea .sub ul li span { margin-top: 10px; font-size: 0.75em; }
	
#en #aboutArea .main .data .text { width: inherit; }

/*============================
#galleryArea
============================*/
#galleryArea { margin-top: 60px; }
#galleryArea .title {}
#galleryArea .title h2 { font-size: 1.5em; }
#galleryArea .title .ja { margin-top: 10px; font-size: 1em; }
#galleryArea .imageSlide { margin-top: 20px; }
#galleryArea .imageSlide .swiper-container {}
#galleryArea .imageSlide .swiper-container.slider03 {}
#galleryArea .imageSlide .swiper-container ul.swiper-wrapper {}
#galleryArea .imageSlide .swiper-container ul.swiper-wrapper li.swiper-slide { width: 160px!important; height: 160px; }
#galleryArea .imageSlide .swiper-container ul.swiper-wrapper li.swiper-slide img { }

/*============================
#detailArea
============================*/
#detailArea { margin-top: 60px; padding-top: 60px; }
#detailArea .title {}
#detailArea .title h2 { font-size: 1.5em; }
#detailArea .title .ja { margin-top: 10px; font-size: 1em; }
#detailArea .list { margin-top: 20px; }
#detailArea .list ul { width: 280px; margin: 0 auto; }
#detailArea .list ul li { float: left; position: relative; width: 80px; height: 150px; margin-right: 20px; }
#detailArea .list ul li:nth-child(3n) { margin-right: 0; }
#detailArea .list ul li:before {}
#detailArea .list ul li:nth-child(1):after {}
#detailArea .list ul li:nth-child(2):after {}
#detailArea .list ul li:nth-child(3):after {}
#detailArea .list ul li:nth-child(4):after {}
#detailArea .list ul li:nth-child(5):after {}
#detailArea .list ul li:nth-child(6):after {}
#detailArea .list ul li:nth-child(7):after {}
#detailArea .list ul li:nth-child(8):after {}
#detailArea .list ul li:nth-child(9):after {}
#detailArea .list ul li:nth-child(10):after {}

#detailArea .list ul li .itemName { margin-top: 90px; font-size: 0.75em; margin-left: -5px; margin-right: -5px; }
#detailArea .listDetail { margin-top: 0; }
#detailArea .listDetail ul {border-bottom: solid 1px #ccc;}
#detailArea .listDetail ul li { float: inherit; position: relative; padding: 20px; width: 100%; border-right: none; border-top: solid 1px #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: 20px;}
#detailArea .listDetail ul li:nth-child(1)::after { top: 60px; }
#detailArea .listDetail ul li:nth-child(2) { padding: 20px; }
#detailArea .listDetail ul li:nth-child(2)::after { top: 60px; }
#detailArea .listDetail ul li:nth-child(3) { border-right: none; }
#detailArea .listDetail ul li:nth-child(3)::after { top: 60px; }
#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; text-align: center; font-size: 0.875em; }
#detailArea .floor { margin-top: 40px; }
#detailArea .floor .title { position: inherit; left: inherit; top: inherit; transform: inherit; }
#detailArea .floor .title h2 { text-align: left; }
#detailArea .floor .title .ja { text-align: left; }
#detailArea .floor .image { margin-top: 20px; text-align: center; }
#detailArea .floor .image img { width: 100%; height: auto; }
#detailArea { padding-bottom: 60px; }
#detailArea .facility { margin-top : 40px; }
#detailArea .facility .title {}
#detailArea .facility .title h2 { text-align: left; }
#detailArea .facility .title .ja { text-align: left; }
#detailArea .facility table { margin-top: 20px; }
#detailArea .facility table tbody {}
#detailArea .facility table tbody tr {}
#detailArea .facility table tbody tr th { padding: 20px 0; font-size: 0.875em; width: 30%; }
#detailArea .facility table tbody tr td { padding: 20px 0 20px 20px; font-size: 0.875em; }
#detailArea .facility table tbody tr td img { }
#detailArea .facility table tbody tr:last-child th {}
#detailArea .facility table tbody tr:last-child td {}
#detailArea .movie { display: block; margin-top: 40px; }
#detailArea .movie .title { padding-top: 0;  }
#detailArea .movie .title h2 {}
#detailArea .movie .title .ja { margin-top: 10px; font-size: 1em; }
#detailArea .movie .movieThumb { margin-top: 20px; margin-left: 0; width: 100%; height: auto; }
#detailArea .movie .movieThumb a {}
#detailArea .movie .movieThumb a img { width: 100%; height: auto; }
#detailArea .movie .movieThumb a::before { }
#detailArea .movie .movieThumb a::after { width: 80px; height: 80px; background-size: 80px auto; }
#detailArea .movie .movieThumb a:hover::before {}
#detailArea .movie .copy { margin-top: 20px; position: inherit; right: inherit; top: inherit; }

#en #detailArea .list ul li { height: 170px; }
	
/*============================
#reservationArea
============================*/
#reservationArea { height: 200px; }
#reservationArea::before { width: 80%; }
#reservationArea::after { height: 200px; }
#reservationArea .button { width: 100%; padding: 0 20px; }
#reservationArea .button a { display: block; padding: 30px 0; width: 100%; min-width: inherit; font-size: 1.375em;  }
#reservationArea .button a::before { width: 88%; height: 90%; border-left: none; border-right: none; }
#reservationArea .button a::after { right: 45px; }
#reservationArea .notice { top: 76%; width: 100%; text-align: center; }
#reservationArea .button a:hover {}
#reservationArea .button a:hover::before {}
#reservationArea .button a:hover::after {}

/*============================
#faqArea
============================*/
#faqArea { margin-top: 60px; }
#faqArea .title {}
#faqArea .title h2 {font-size: 1.75em; }
#faqArea .title .ja { margin-top: 10px; font-size: 1em; }
#faqArea .content { margin-top: 20px; padding: 0; }
#faqArea .content ul {}
#faqArea .content ul li { margin-top: 20px; }
#faqArea .content ul li .question { padding: 20px 40px 19px 30px; font-size: 1em; text-align: left; }
#faqArea .content ul li .question::before { right: 13px; }
#faqArea .content ul li .question::after { right: 25px; }
#faqArea .content ul li .question:hover::before { right: 13px; }
#faqArea .content ul li .question:hover::after { right: 25px; }
#faqArea .content ul li .question span {}
#faqArea .content ul li .question.close {}
#faqArea .content ul li .question.close::before {}
#faqArea .content ul li .question.close::after { display: none; }
#faqArea .content ul li .answer { padding: 0 0 0 80px; margin: 20px auto 0; margin-bottom: 20px; }
#faqArea .content ul li .answer span {}
#faqArea .content ul li .answer em {}
#faqArea .content ul li .answer a {}

/*============================
#informationArea
============================*/
#informationArea { margin-top: 60px; }
#informationArea .title { text-align: left; }
#informationArea .title h2 { font-size: 1.75em; }
#informationArea .title .ja { margin-top: 10px; font-size: 1em; }
#informationArea ul { margin-top: 0; }
#informationArea ul li { float: left; margin-right: 4%; margin-top: 4%; width: 48%; }
#informationArea ul li:nth-child(3n) { margin-right: 4%; }
#informationArea ul li:nth-child(n+4) { margin-top: 4%; }
#informationArea ul li:nth-child(2n) { margin-right: 0; }
#informationArea ul li .image { width: 100%; }
#informationArea ul li .image img {}
#informationArea ul li .data {}
#informationArea ul li .data .name { margin-top: 20px; font-size: 1.125em; }
#informationArea ul li .data .note { margin-top: 10px; font-size: 0.875em; position: inherit; right: inherit; top: inherit; }
#informationArea ul li .data .text { font-size: 0.875em; line-height: 1.5; }

/*============================
#accessArea
============================*/
#accessArea { margin-top: 60px; }
#accessArea iframe { height: 600px; }
#accessArea .detail { margin: 40px 0 60px; display: block; }
#accessArea .detail .title {}
#accessArea .detail .title h2 { font-size: 1.75em; }
#accessArea .detail .title .ja { margin-top: 10px; font-size: 1em; }
#accessArea .detail .copy { margin-left: 0; margin-top: 20px; font-size: 0.875em; }
	
}