@charset "UTF-8";
/* CSS Document */

/* ===================================================
	Reset
====================================================== */
#customer_header {}
#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6 { margin: 0;}

#customer_header ul,
#customer_header ol,
#customer_header li,
#customer_footer ul,
#customer_footer ol,
#customer_footer li { padding: 0; margin: 0; list-style-type: none;}

#customer_header dl,
#customer_footer dl { padding: 0; margin: 0;}

#customer_header p,
#customer_footer p { padding: 0; margin: 0;}

#customer_footer address { padding: 0; margin: 0;}

#customer_header img,
#customer_footer img { max-width: 100%;}

#customer_header a,
#customer_footer a{ /*color:#555;*/ text-decoration:none; transition: all 0.5s;}
#customer_header a img,
#customer_footer a img{ transition: all 0.5s;}
#customer_header a:hover,
#customer_footer a:hover{ color:#888;text-decoration:none;}
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75;}
body {
        background:#fff;
        font-size: 16px; font-weight: normal; line-height: 1.5;
        font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", メイリオ, Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
        -webkit-text-size-adjust: 100%;
        min-width: 1140px; min-height: 100vh;letter-spacing: 0.03em; }
@media screen and (orientation:landscape) {
	body { width: 100%;}
}
@media screen and (max-width: 768px) {
	body { min-width: 0;}
}


/* ---------------------------------------------------
Header
------------------------------------------------------ */
#customer_header header { position: relative; width: 1110px; min-height: 90px; margin: 0 auto; padding: 10px 10px 0 0;}
#customer_header header p#headerLogo { font-size: 0; line-height: 0; float: left; margin-right: 10px;}

#customer_header .headerTextBlock { float: left; width: 601px; text-align: right; }
#customer_header .headerTextBlock h1 { font-size: 11px; line-height: 1; margin-bottom: 15px; }
#customer_header .countryLink { margin-bottom: 10px; }
#customer_header .countryLink li { display: inline; font-size: 12px; line-height: 1; margin-left: 6px; padding-left: 10px;
    background: url(https://www.kaisenkaku.com/media/images/common/common_header_arrow.gif) no-repeat left;}
#customer_header .countryLink li a { color: #a0a0a0; text-decoration: none;}
#customer_header .countryLink li a:hover {color: #333333;}
#customer_header .headerLink li { display: inline; font-size: 12px; line-height: 1; margin-left: 2px; }
#customer_header .headerLink li a {color: #000000; margin-left: 5px;}
#customer_header .headerCtrlBlock { float: right; width: 220px; }
#customer_header .headerCtrlBlock p { margin-top: 10px; }
#customer_header .headerCtrlBlock p.text { font-size: 12px; float: left; width: 143px; margin: 7px 10px 0 0; text-align: right; }
#customer_header .headerCtrlBlock ul { float: left;}
#customer_header .headerCtrlBlock li { font-size: 0; line-height: 0; text-indent: -9999px; display: block; float: left; cursor: pointer;}
#customer_header .headerCtrlBlock li.small {width: 19px; height: 19px; margin: 4px 2px 0 0;
    background: url(https://www.kaisenkaku.com/media/images/common/common_header_btn_001.gif) no-repeat left top;}


@media screen and (max-width: 640px) {
                    #customer_header header,
                    #customer_header #navArea,
                    #customer_header .breadCrimbBlock,
                    #customer_header .headerTextBlock { display: none;}
}
/*--------------------------------------------------
   nav
--------------------------------------------------*/
#customer_header #navArea {clear:both; width: 100%;height: 60px; background: url(https://www.kaisenkaku.com/media/images/common/common_nav_bg.gif) repeat-x left top;}
#customer_header nav {width: 1120px; margin: 0 auto;}
#customer_header nav li { float: left; text-indent: -9999px; }
#customer_header nav li a { display: block; width: 140px; height: 60px; }
#customer_header nav li.outlookbaths a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_001.gif) no-repeat left top;}
#customer_header nav li.outlookbaths.active a,
#customer_header nav li.outlookbaths a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_001_ov.gif) no-repeat left top;}
#customer_header nav li.room a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_002.gif) no-repeat left top;}
#customer_header nav li.room.active a,
#customer_header nav li.room a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_002_ov.gif) no-repeat left top;}
#customer_header nav li.dishes a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_003.gif) no-repeat left top;}
#customer_header nav li.dishes.active a,
#customer_header nav li.dishes a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_003_ov.gif) no-repeat left top;}
#customer_header nav li.facilities a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_004.gif) no-repeat left top;}
#customer_header nav li.facilities.active a,
#customer_header nav li.facilities a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_004_ov.gif) no-repeat left top;}
#customer_header nav li.plan a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_005.gif) no-repeat left top; }
#customer_header nav li.plan.active a,
#customer_header nav li.plan a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_005_ov.gif) no-repeat left top;}
#customer_header nav li.group a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_006.gif) no-repeat left top;}
#customer_header nav li.group.active a,
#customer_header nav li.group a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_006_ov.gif) no-repeat left top; }
#customer_header nav li.tourism a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_007.gif) no-repeat left top;}
#customer_header nav li.tourism.active a,
#customer_header nav li.tourism a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_007_ov.gif) no-repeat left top;}
#customer_header nav li.traffic a { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_008.gif) no-repeat left top;}
#customer_header nav li.traffic.active a,
#customer_header nav li.traffic a:hover { background: url(https://www.kaisenkaku.com/media/images/common/2017/common_nav_008_ov.gif) no-repeat left top; }
.headerCtrlBlock li.large { width: 23px; height: 23px; background: url(https://www.kaisenkaku.com/media/images/common/common_header_btn_003.gif) no-repeat left top;}
.headerCtrlBlock li.large:hover,
.headerCtrlBlock li.large.active { background: url(https://www.kaisenkaku.com/media/images/common/common_header_btn_003_ov.gif) no-repeat left top;}
.headerCtrlBlock li.middle { width: 21px; height: 21px; margin: 2px 2px 0 0; background: url(https://www.kaisenkaku.com/media/images/common/common_header_btn_002.gif) no-repeat left top;}
.headerCtrlBlock li.small { width: 19px; height: 19px; margin: 4px 2px 0 0; background: url(https://www.kaisenkaku.com/media/images/common/common_header_btn_001.gif) no-repeat left top;}

#customer_header #sp_wrap { display: none;}

@media screen and (max-width: 640px) {
            #customer_header #sp_wrap { position: fixed; top: 0; right: 0; z-index: 999; display: block;}
            #spHead {background: #19244b; position: fixed; width: 100%; height: 50px; top: 0; left: 0;  /*opacity: 0.75;*/ z-index: 10;}
            #spHead p.spHeadLogo { position: absolute;top: 10px; left: 10px; width: 127px; height: auto; margin: 0; }
            #spHead p.spHeadLogo img { width: auto !important;max-height: 31px; }  
            #spHeadNav { position: absolute; top: 10px; right: 7px;}
            #spHeadNav li { float: left; width: 31px; height: auto; margin-left: 11px; }
            .spMenuLogo { position: absolute; top: 10px; left: 10px; width: 187px; height: auto; margin: 0;}
            .spMenuBtn { position: absolute; top: 55px; left: 0; margin-left: 10px; }
            .spMenuBtn li { background: #19244b; border-radius: 5px; font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-size:13px;
                        float: left; width: 46%; margin: 0 10px 15px 0!important; text-align: left; }
            .spMenuBtn li a { color: #fff; display: block; width: 100%; padding-left: 20px; line-height: 40px; box-sizing: border-box;
                        background: url(https://www.kaisenkaku.com/media/images/common/sp_common_menu_btn_005.png) no-repeat 10px 17px; background-size: 5px 7px;}
            .spMenuBtn li:nth-child(12) a { padding: 0 0 0 20px; }
            .spMenuBtn li:nth-child(13) a { padding: 4px 0 2px 20px; line-height: 1.2; }
            .modal-close { display: block; position: absolute; width: 20px; height: 20px; top: 10px; right: 10px;}           
            #customer_header #sp_wrap:target #modal-content { pointer-events: auto; opacity: 1;}
            #modal-content { background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; height:100vh; width: 100%; z-index: 999;
                         overflow: auto; pointer-events: none; opacity: 0; transition: opacity .5s;}
}

/*--------------------------------------------------
main_img
--------------------------------------------------*/
#customer_header #main_img{ width:100%; height:inherit;}
#customer_header #main_img.slide { position: relative; overflow : hidden; width: 100%; height:550px; margin: auto; background : #fff; text-align: center;}
#customer_header #main_img.slide img { position: absolute; top:0; left:50%; margin-left:-800px; height:550px; opacity: 0; max-width:none;
                animation: slideAnime 9s ease infinite;}
#customer_header #main_img.slide img:nth-of-type(1) { animation-delay: 0s }
#customer_header #main_img.slide img:nth-of-type(2) { animation-delay: 3s }
#customer_header #main_img.slide img:nth-of-type(3) { animation-delay: 6s }

#customer_header #sp_img { display: none;}
#customer_header #sp_img { display: none; position: relative; overflow : hidden; width: 100%; height:300px; margin: auto; background : #fff;}
#customer_header #sp_img.slide img { display : block; position: absolute; top:0; left:0; width:100%; max-width:none; min-height:100%; opacity: 0; 
                animation: slideAnime 9s ease infinite;}
#customer_header #sp_img.slide img:nth-of-type(1) { animation-delay: 0s }
#customer_header #sp_img.slide img:nth-of-type(2) { animation-delay: 3s }
#customer_header #sp_img.slide img:nth-of-type(3) { animation-delay: 6s }
@keyframes slideAnime{
0% { opacity: 0 }
3% { opacity: 1 }
33% { opacity: 1 }
36% { opacity: 0 }
100% { opacity: 0 }
}

@media screen and (max-width: 640px) {
                    #customer_header #main_img { display: none;}
                    #customer_header #sp_img { display: block;}
}
/*--------------------------------------------------
br_area
--------------------------------------------------*/
#customer_header #br_area { margin: 30px auto; width:1060px;}
#customer_header #br_area dl { display: flex; justify-content: center;}
#customer_header #br_area dt,
#customer_header #br_area dd { width:50%;}

@media screen and (max-width: 640px) {
                    #customer_header #br_area { margin: 10px auto; width:90%;}
                    #customer_header #br_area dl { display: block;}
                    #customer_header #br_area dt,
                    #customer_header #br_area dd { width:100%;}
}

/*--------------------------------------------------
 footer
--------------------------------------------------*/
#customer_footer footer { background: url(https://www.kaisenkaku.com/media/images/common/common_footer_bg.gif) repeat-x left top; width: 100%;}
#customer_footer #footerArea { position: relative; width: 1120px; height: 280px; margin: 0 auto; padding-top: 30px; text-align: left; }
#customer_footer #footerArea p.logo { line-height: 0; margin: 0 0 24px 13px;}
#customer_footer #footerArea p.term { position: absolute; top: 30px; right: 10px; }
#customer_footer .footerLinkBlock { width: 100%; margin-bottom: 40px; padding-bottom: 4px; background: url(https://www.kaisenkaku.com/media/images/common/common_footer_line_002.gif) no-repeat left bottom; }
#customer_footer .footerLinkBlockInner { padding-top: 19px; background: url(https://www.kaisenkaku.com/media/images/common/common_footer_line_001.gif) no-repeat left top;}
#customer_footer .footerLinkBlockInner ul {margin: 0 0 5px 13px;clear:both; width:auto; display: flex;}
#customer_footer .footerLinkBlockInner li { color: #fff; font-size: 12px;/* float: left;*/ }
#customer_footer .footerLinkBlockInner li a { color: #fff; }
#customer_footer .footerBnrBlock { margin-left: 20px; }
#customer_footer .footerBnrBlock li { float: left; margin-right: 10px;}
#customer_footer #copyright { width: 100%; text-align: center; background: #fff;}
#customer_footer #copyright p { font-size: 12px; margin: 0 auto;line-height: 50px;}


#customer_footer #spFoot { display: none;}
#customer_footer #spFoot {font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; width: 100%;}
#customer_footer .homeBtnBlock { width: 100%; padding: 6px 0 7px 10px; text-align: left; background: #eee; box-sizing: border-box;}
#customer_footer .homeBtnBlock p { line-height: 1; width: 50px; height: auto;}
#customer_footer #spFooterArea { width: 100%; padding: 15px 0 12px 10px; text-align: left; background: url(https://www.kaisenkaku.com/media/images/common/sp_common_footer_bg_001.jpg); box-sizing: border-box;}
#customer_footer #spFooterArea p { color:#000; font-size: 10px; line-height: 1.4;}
#customer_footer #spCopyright { width: 100%; background: #fff; text-align: center;}
#customer_footer #spCopyright p { font-size: 8px; line-height: 30px; margin: 0 auto; }

@media screen and (max-width: 640px) {
                #customer_footer footer { display: none;}
                #customer_footer #spFoot { display: block;}         
}