@charset "utf-8";



/* -----------------------------------------------------------

#header

----------------------------------------------------------- */

/* transition */
#header,
#header .logoArea,
#header .logoAreaSmall,
#header .snsArea,
#header .calendarArea,
#header .contactArea{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }

/* #header */
#header,
#header:after{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }

/* --- #header --- */
#header {height: 90px;position: fixed;/* top: 10%; *//* left: 5%; */right:0;width: 100%;background: rgba(255,255,255,0.9);background: rgb(47 29 21);z-index: 1000;}
.top-page #header {background: rgba(31, 27, 25, 0.59);}
#header.autofix_sb.fixed {height: 70px;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);background: #2f1d15;width: 100%;}

@media only screen and (max-width: 1000px) {
    #header { display: none; }
}

#header .title_top h1{position: absolute;font-size: 12px;color: #c79f62;font-weight: 600;display: inline;line-height: 1.5;top: 27%;/* width: 300px; */left: 8%;}
/* ======== #header .logoArea ======== */
#header .logoArea {position: absolute;top: 10px;left: 6%;z-index: 3;margin-left: -60px;width: 300px;}
#header .logoArea h2 {width: 70px;height: 70px;line-height: 0;font-size: 0;margin: 0;display: inline;}
#header .logoArea h2 a {background: url(../images/logo_Header.svg) center center no-repeat;display: block;position: relative;overflow: hidden;text-indent: -999px;/* z-index: 1003; */width: 80px;height: 70px;background-size: 70px 70px;}
#header .logoArea h2 a:hover { opacity: 0.7; }
#header.autofix_sb.fixed .logoArea {top: -90px;opacity: 0;height: 0;left: 4%;}




/* IE9 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #header .logoArea h1 a {background: url(../images/logo_Header.png) center center no-repeat;
        display: block;position: relative;
        overflow: hidden;text-indent: -999px;/* z-index: 1003; */
        width: 80px;height: 45px;background-size: 80px 45px;top: 10px}
}


/* ======== #header .logoAreaSmall ======== */
#header .logoAreaSmall { position: absolute; top: -90px; left: 0; z-index: 1002; opacity: 0; }
#header .logoAreaSmall h2 {width: 80px;height: 60px;line-height: 0;font-size: 0;margin: 0;padding-left: 20px;}
#header .logoAreaSmall h2 a {width: 80px;height: 70px;background: url(../images/logo_Header.svg) center center no-repeat;background-size: 70px 70px;display: block;position: relative;overflow: hidden;text-indent: -999px;z-index: 1003;}
#ie9 #header .logoAreaSmall h2 a { background: url(../images/logoS.png) center center no-repeat; }
#header .logoAreaSmall h2 a:hover { opacity: 0.7; }
#header.autofix_sb.fixed .logoAreaSmall { top: 0; opacity: 1; }

/* IE9 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #header .logoAreaSmall h1 a {
        background: url(../images/logo_Header.png) no-repeat 100% 22%;
        width: 80px;height: 45px;
        top: 10px;
    }

}





/* ======== #header .navArea ======== */
#header .navArea {position: absolute;top: 15%;left: 140px;right: 0;display: block;z-index: 2;text-align: center;}
#header.autofix_sb.fixed .navArea  {top: 8px;}

#header .navArea ul.navi {font-size: 0;width: 83%;margin-left: 10%;max-width: 900px;position: relative;right: 0;top: 3px;/* padding-left: 8%; */}
#header .navArea ul.navi li {display: inline-block; *display: inline;*zoom: 1;position: relative;margin: 0 12px;padding: 0 6px;width: auto;height: 60px;}
#header .navArea ul.navi li a {display: block;margin: 0;height: 50px;font-size: 15px;font-weight: 300;letter-spacing: 1.5px;letter-spacing:1px;text-align: center;position: relative;z-index:2;}
/* span.en */
#header .navArea ul.navi li span.en {font-size: 13px;font-family: 'Catamaran', sans-serif;/* font-family: 'Playfair Display', Verdana, serif; */font-weight:400;letter-spacing: 2px;line-height: 40px;color: #e7ba65;}
#header .navArea ul.navi a:hover {  color:#fff;  }
#header .navArea ul.navi a:after { position: absolute; bottom: 12px; left: 33%; right: 33%; height: 1px; display: block; content: ""; background: transparent; z-index:-1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/* focus */
#header .navArea ul.navi li:hover a {  color:#fff;  }
#header .navArea ul.navi li:hover a:after { left: 0px; right: 0px; background: rgba(160, 134, 89, 0.4); }


#header .navArea ul.navi a:before { position: absolute; bottom: 14px; left: 0; right: 0; height: 1px; display: block; content: ""; background: transparent; z-index:-2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.navi a:hover:before { left: 33%; right: 33%; background: transparent;}






.render {
    display: block;
    color: #e7ba65;
    font-size: 1.2rem;
    /* font-family: " YuMincho, "ProN W3", "Hiragino Mincho ProN","HG",serif; */
    font-family: 'Kievit', sans-serif;
    /* font-weight: normal; */
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-top: 12px;
}

.fsize_1{
    font-size: 0.4rem;
    line-height: 0.3;
}





/* ======== .subNav ======== */

.subNav 
{width: 300px;
    text-align: center;
    position: absolute;
    top: 60px;
    padding:0 2px 10px;
    margin: 0;
    left: -30px; 
    z-index: -1;
    overflow: hidden;}
.off .subNav { display:none; opacity:0;}
.off .subNav .inner {/* width: 250px; */height: 100%;padding: 0;}
.subNav .inner {width: 100%;width:auto;margin:0 -2px 0;padding: 15px;overflow: hidden;background: #ffffff;background: url(../images/noise.png) repeat #fefefe;background:#f9fcfd;background: #036b6e;-webkit-animation:show 0.2s ease-in 0s;-moz-animation:show 0.2s ease-in 0s;-ms-animation:show 0.2s ease-in 0s;-o-animation:show 0.2s ease-in 0s;animation:show 0.2s ease-in 0s;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);position:relative;z-index:1;}
.subNav .inner:before { position:absolute; top:0; left:0; right:50%; bottom:0; content:""; border:#eee 0px solid; border-right:none; z-index:-1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.subNav .inner:after { position:absolute; top:0; left:50%; right:0; bottom:0; content:""; border:#eee 0px solid; border-left:none; z-index:-1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.off .subNav .inner > * { opacity: 0; }


/* ul.inner2 */
#header .navArea ul.navi .subNav ul.inner2 { font-size: 0; margin:0 0 0 1px; text-align: left; position: relative; }
#header .navArea ul.navi .subNav ul.inner2 li {width: 25%;width: 100%;height: auto;margin: 0 0 -1px -1px;padding:0;position: relative;z-index: 0;overflow:hidden;background: #01696c;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

#header .navArea ul.navi .subNav ul.inner2 {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /*   border: 1px solid #eee; */
    padding: 0.4em;
    margin: 0 0 2em;
    /*   background: #fff;*/
    justify-content: center;
    /* width: 600px; */
}

#header .navArea ul.navi .subNav ul.inner2 li {
    padding: 1em;
    border-radius: 5px;
    flex: 1 0 0;
    margin: 0.4em;
    text-align: center;
}





#header .navArea ul.navi .subNav ul.inner2 li:after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; border: #eee 0px solid; content: ""; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .navArea ul.navi .subNav ul.inner2 li:before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; background: #036b6e; content: ""; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .navArea ul.navi .subNav ul.inner2 li:hover:before { background:#ffffff; }







/* ul.inner2 li a */
#header .navArea ul.navi .subNav ul.inner2 li a {display: block;margin: 0;padding: 0;height: 60px;color: #fff;line-height: 0;position: relative;text-align: left;}
#header .navArea ul.navi .subNav ul.inner2 li a:after { display:none; }
#header .navArea ul.navi .subNav ul.inner2 li a:hover { color:#fff; }

/* .txtArea */
#header .navArea ul.navi .subNav ul.inner2 li a .txtArea {font-size: 15px;line-height: 60px;text-align: left;padding-left: 30px;position:relative;letter-spacing:2px;}

#header .navArea ul.navi .subNav ul.inner2 li a .txtArea:before { 
    position:absolute; top:0; 
    right:20px; bottom:0; 
    color:#fff; font-size:12px; 
    line-height:60px; font-family: 'themify'; 
    content:"\e61a"; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}

#header .navArea ul.navi .subNav ul.inner2 li a:hover .txtArea:before { 
    color: #fff; content: "\e649"; 
    -webkit-transform:translate(5px,0);
    -moz-transform:translate(5px,0);
    -o-transform:translate(5px,0);
    -ms-transform:translate(5px,0);
    transform:translate(5px,0);}


@keyframes show{from{opacity:0}to{opacity:1}}@-moz-keyframes show{from{opacity:0}to{opacity:1}}@-webkit-keyframes show{from{opacity:0}to{opacity:1}}@-o-keyframes show{from{opacity:0}to{opacity:1}}@-ms-keyframes show{from{opacity:0}to{opacity:1}}

/* ======== #header .snsArea ======== */
#header .snsArea {position: absolute;top: 28px;right: 30px;z-index: 1001;/* display: none; */color: #fff;display: flex;flex-direction: column;align-items: center;top: 5px;}
/*#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }*/
#header.autofix_sb.fixed .snsArea {top: 0px;/* right: 100px; */display: block;}
#header .snsArea .phoneArea {
    display: flex;
    align-items: center;
    border: 1px solid;
    padding: 0 5px;
    color: #e7ba65;
}
#header .snsArea .phoneArea i {
    padding-right: 10px;
}

/* .snsArea ul */
#header .snsArea ul { font-size:0; display:inline-block; }
#header .snsArea ul li {display:inline-block;margin:0;text-align:center;color: #000;}
#header .snsArea ul li a {display:block;width: 30px;height: 40px;font-size:15px;font-size: 18px;color:#c79f62;font-weight:normal;position:relative;z-index:0;}
#header.autofix_sb.fixed .snsArea a {
    height: 30px;
}
#header .snsArea ul li a i { line-height:30px; }
#header .snsArea ul li a img { line-height: 4px; padding: 4px;}
#header .snsArea ul li a:hover { font-size:18px; color:#ffffff;}
#header .snsArea ul li a:hover i { -webkit-transform: rotate(360deg) scale(1.1);-moz-transform: rotate(360deg) scale(1.1);-o-transform: rotate(360deg) scale(1.1);-ms-transform: rotate(360deg) scale(1.1);transform: rotate(360deg) scale(1.1);}
#header .snsArea ul li a.youtube { font-size:18px; }
#header .snsArea ul li a.youtube:hover { font-size:23px;}

/* ul.blog */
#header .snsArea ul.blog { position:relative; z-index:1; margin-left:10px; padding-left:18px; }
#header .snsArea ul.blog:before { position:absolute; top:10px; left:0; bottom:10px; width:0; content:""; border-left:#111 1px dotted; z-index:-1; }
#header .snsArea ul.blog li a { width:auto; height:30px; font-size:12px; font-family: 'Catamaran', sans-serif; font-weight:400; letter-spacing:1.5px; position:relative; z-index:2; }
#header .snsArea ul.blog li a:hover {color:#fff;}
#header .snsArea ul.blog li a i { font-size:14px; line-height:30px; font-weight:normal; padding-right:3px; }
#header .snsArea ul.blog li a:before { position:absolute; bottom:2px; left:0; right:0; height:0; content:""; border-bottom:#ddd 1px dotted; z-index:-2;}
#header .snsArea ul.blog li a:after { position:absolute; bottom:2px; left:0; right:100%; height:0; content:""; border-bottom:transparent 1px solid; z-index:-1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .snsArea ul.blog li a:hover:after{ right:0; border-bottom:#fff 1px solid; }



/* ======== #header .contactArea ======== */
#header .contactArea {position: absolute;top: 20px;right: 70px;z-index:2;}
#header.autofix_sb.fixed .contactArea {top: 15px;right: 130px;}

#header .contactArea ul { font-size:0; list-style: none; }
#header .contactArea ul li { display: inline-block; margin: 0; text-align: center;}
#header .contactArea ul li a {display:block;padding:0 30px 0 45px;height:45px;color: #d5b78e;font-size:12px;font-weight:500;letter-spacing:0.5px;line-height:45px;position:relative;z-index:2;}
#header .contactArea ul li a:hover {color: #f9f9f9;background: rgba(167, 208, 227, 0);padding:0 40px 0 45px;}

#header .contactArea ul li a:before,
#header .contactArea ul li a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#header .contactArea ul li a:before {position:absolute;top:0;right:0px;bottom:0;left:0px;content:"";/* border:#eee 1px solid; */z-index:-1;color: #fff;}
#header .contactArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
#header .contactArea ul li a:after {  position:absolute; top:0; right:15px; bottom:0; font-size: 8px; font-family: 'themify'; content: "\e649"; line-height: 45px; font-style: normal; z-index: 1; opacity:0;}
#header .contactArea ul li a:hover:after { right:10px; opacity:1;}

#header .contactArea ul li a .icon { position: absolute; top: 0; left: 15px; bottom: 0; width: 20px; z-index: 0; }
#header .contactArea ul li a .icon:before {color: #fafafa;position:absolute;top:0;left:0;bottom:0;right: 0;font-size:16px;text-align:left;font-family: 'themify';content: "\e75a";font-weight:normal;}

#header .contactArea ul li a .icon:before {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    font-size:16px;
    text-align:left;
    font-family: 'FontAwesome';
    content: "\f003";
    font-weight:normal;
    color: #fff;
}



/* ======== #header .calendarArea ======== */
#header .calendarArea { position: absolute; top: 14px; right: 25px; z-index:2; }
#header.autofix_sb.fixed .calendarArea { top: 7px;right: 10px; }

/* .calendarArea ul */
#header .calendarArea ul { font-size:0; }
#header .calendarArea ul li { display:inline-block; margin:0; text-align:center; }
#header .calendarArea ul li a { display:block; padding:0 15px 0 50px; height:45px; color:#111; font-size:11px; font-weight:500; letter-spacing:1px; line-height:45px; position:relative; z-index:2; }
#header .calendarArea ul li a:hover { color:#016c6e; background:#fefefe; padding:0 30px 0 50px; }
#header .calendarArea ul li a i { font-size:15px; line-height:45px; padding-right:7px; font-weight: normal; }

#header .calendarArea ul li a:before,
#header .calendarArea ul li a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}

#header .calendarArea ul li a:before { position:absolute; top:0; right:0px; bottom:0; left:0px; content:""; border:#ddd 1px solid; z-index:-1; }
#header .calendarArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
#header .calendarArea ul li a:after { position:absolute; top:0; right:15px; bottom:0; font-size: 8px; font-family: 'themify'; content: "\e649"; line-height: 45px; font-style: normal; z-index: 1; opacity:0;}
#header .calendarArea ul li a:hover:after { right:10px; opacity:1;}

/* .calendar */
#header .calendarArea ul li .calendar { position:absolute; top:5px; left:5px; bottom:5px; width:35px; border:#ddd 1px dotted; border-top:#ddd double; z-index:2; text-align:center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .calendarArea ul li a:hover .calendar { border:#016c6e 1px dotted; border-top:#016c6e double;}

/* .calendarArea p */
#header .calendarArea p { color:#111; font-family: 'Catamaran', sans-serif; font-weight:800; line-height:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .calendarArea p.month { position:absolute; top:10px; left:0; right:0; font-size:9px; text-transform:uppercase; }
#header .calendarArea p.day { position:absolute; left:0; right:0; bottom:10px; font-size:10px; font-family: 'Open Sans', sans-serif; font-weight:400; letter-spacing:0.5px;}
#header .calendarArea ul li a:hover p { color:#016c6e; }

@media only screen and (max-width: 1050px) {
    #header .calendarArea ul li a { padding:0 15px 0 40px; }	
    #header .calendarArea ul li a:hover { padding:0 15px 0 40px; }
    #header .calendarArea ul li .calendar { width:30px;}
    #header .calendarArea ul li a:after { display:none;}
}

@media only screen and (max-width: 1140px) {
    #header .navArea ul.navi li { margin:0 6px; padding:0 6px; }
    #header .navArea ul.navi li span.en { font-size:12.5px;letter-spacing:1.5px; }
}

@media only screen and (max-width: 945px) {
    #header .calendarArea ul li a { padding:0 10px; }	
    #header .calendarArea ul li a:hover { padding:0 10px; }
    #header .calendarArea ul li .calendar { display:none;}
}


/* -----------------------------------------------------------

#headerSp

----------------------------------------------------------- */

#headerSp { display: none; }
#headerSp {position: fixed;top:0;left:0;right:0;height:50px;background: #1f1b19;/* background: #016c6e; */z-index:1000;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);}

@media only screen and (max-width: 1000px) {
    #headerSp { display: block; }
}

/* ======== #headerSp a.btnMenu ======== */
#headerSp a.btnMenu {position: absolute;top:0;left:0;display: block;width:60px;height:50px;color: #b78e0b;z-index:0;}
#headerSp a.btnMenu span.lineTop {position: absolute;top:18px;left:18px;right:18px;height:1px;background: #b78e0b;z-index:1;}
#headerSp a.btnMenu span.lineMiddle {position: absolute;top:50%;left:18px;right:18px;height:1px;background: #b78e0b;z-index:1;}
#headerSp a.btnMenu span.lineBottom {position: absolute;bottom:17px;left:18px;right:18px;height:1px;background: #b78e0b;z-index:1;}
/* ======== #headerSp .logoArea ======== */

#headerSp h1 {position: absolute;display: block;z-index:1003;font-size: 11px;color: #c39345;top: 5px;right: 0;line-height: 1;}
#headerSp .logoArea {position: absolute;top: 13px;left: 35%;z-index:1001;margin-left:-65px;}
#headerSp .logoArea h1 {width:129px;height:50px; line-height:0; font-size:0; margin:0;}
#headerSp .logoArea h1 a {position: relative;display: block;z-index:1003;font-size:13px; color:#fff}

#headerSp .logoArea h2 {width:129px;height: 40px; line-height:0; font-size:0; margin:0;}
#headerSp .logoArea h2 a {position: relative;display: block;width: 100px;height: 35px;background: url(../images/header_logo-sp.svg) center center / 100px 35px no-repeat;/* overflow: hidden; *//* text-indent:-999px; *//* z-index:1003; */}



/* ======== #headerSp a.btnMenu ======== */
#headerSp a.btnCalendar { position: absolute; top:0; right:0; display: block; width:60px; height:50px; z-index:0; text-align:center; }
#headerSp a.btnCalendar span.calendar { position:absolute; top:8px; left:13px; bottom:8px; width:36px; border:#333 1px dotted; border-top:#333 double; z-index:2; text-align:center;}
#headerSp a.btnCalendar p { color:#111; font-family: 'Catamaran', sans-serif; font-weight:800; line-height:0; }
#headerSp a.btnCalendar p.month { position:absolute; top:0; left:0; right:0; line-height:20px; font-size:9px; text-transform:uppercase; }
#headerSp a.btnCalendar p.day { position:absolute; left:0; right:0; bottom:0; line-height:20px;font-size:10px; font-family: 'Open Sans', sans-serif; font-weight:400; letter-spacing:0.5px;}


/* language */
#headerSp .language {position: absolute;top: 18px;right:18px;color: #c39345;}
#headerSp .language ul { position:relative; z-index:1; margin-left:10px; padding-left:18px; }
#headerSp .language ul li{/* list-style:none; *//* border: none; */}
#headerSp .language ul:before {position:absolute;top:10px;left:0;/* bottom:10px; *//* width:0; *//* content:""; *//* border-left:#111 1px dotted; */z-index:-1;}
#headerSp .language ul li a {width:auto;height:30px;font-size: 15px;font-family: 'Catamaran', sans-serif;font-weight:400;letter-spacing: 0.5px;position:relative;z-index:2;}
#headerSp .language ul li a:hover {color: #bd9d5d;border: none;}
#headerSp .language ul li a i { font-size:14px; line-height:30px; font-weight:normal; padding-right:3px; }
#headerSp .language ul li a:before {position:absolute;bottom:2px;left:0;right:0;height:0;content:"";/* border-bottom:#ddd 1px dotted; */z-index:-2;}
#headerSp .language ul li a:after { position:absolute; bottom:2px; left:0; right:100%; height:0; content:""; border-bottom:transparent 1px solid; z-index:-1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#headerSp .language ul li a:hover:after{ right:0; border-bottom:#016c6e 1px solid; }