@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: #fefefe78;z-index: 1000;}
#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: #fefefe;width: 100%;}

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


/* ======== #header .logoArea ======== */
#header .logoArea {
  position: absolute;
    top: 10px;
    left: 8%;
    z-index: 3;
    margin-left: -60px;
    /* width: 100px; */
    display: flex;
    }
#header .logoArea h1 {width: 70px;height: 70px;line-height: 0;font-size: 0;margin: 0;}
#header .logoArea h1 a {background: url(../images/logo_Header.svg) center center no-repeat;display: block;position: relative;overflow: hidden;text-indent: -999px;/* z-index: 1003; */width: 181px;height: 70px;background-size: 138px 67px;}
#header .logoArea h1 a:hover { opacity: 0.7; }
#header.autofix_sb.fixed .logoArea { top: -90px; opacity: 0; height: 0; }

/* 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 .logoArea h2 {
    /* height: 60px; */
    line-height: 0;
    font-size: 17px;
    margin: 0;
    position: relative;
    width: 350px;
    left: 100px;
    top: 43px;
}

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

/* 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 .logoAreaSmall h2 {
    /* height: 60px; */
    /* top: 120px; */
    line-height: 0;
    font-size: 15px;
    margin: 0;
    position: relative;
    width: 350px;
    left: 70px;
    top: 37px;
    /* margin-top: -60px; */
}

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

#header .navArea ul.navi {font-size: 0;width: 100%;position: relative;right: 0;top: 3px;margin-left: 8%;}
#header .navArea ul.navi li {display: inline-block; *display: inline;*zoom: 1;position: relative;margin: 0 12px;padding: 0 12px;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: 14.5px;font-family: 'Catamaran', sans-serif;/* font-family: 'Playfair Display', Verdana, serif; */font-weight:400;letter-spacing:2.5px;line-height: 40px;color: #1f1b19;}
#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: #fff; }


#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: #b82c2c;
  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;}
/*#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }*/
#header.autofix_sb.fixed .snsArea {top: 15px;right: 30px;display: block;}



/* .snsArea ul */
#header .snsArea ul { font-size:0; display:inline-block; }
#header .snsArea ul li { display:inline-block; margin:0; text-align:center;}
#header .snsArea ul li a {display:block;width: 30px;height: 40px;font-size: 18px;color:#980b0b;font-weight:normal;position:relative;z-index:0;}
#header .snsArea ul li a i {line-height:30px;position: relative;top: 8px;}
#header .snsArea ul li a:hover { font-size:18px; color:#e81414;}
#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:rgba(0,0,0,.25);}
#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:rgba(0,0,0,.25) 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 .snsArea ul li .fa-phone{
    position: relative;
    width: 300px;
    left: -240px;
    font-size: 25px;
    top: 8px;
}

/* ======== #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: 1024px) {
#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: #f9f9f9;/* 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: 800px) {
#headerSp { display: block; }
}

/* ======== #headerSp a.btnMenu ======== */
#headerSp a.btnMenu {position: absolute;top:0;left:0;display: block;width:60px;height:50px;color: #b82c2c;z-index:0;}
#headerSp a.btnMenu span.lineTop {position: absolute;top:18px;left:18px;right:18px;height:1px;background: #b82c2c;z-index:1;}
#headerSp a.btnMenu span.lineMiddle {position: absolute;top:50%;left:18px;right:18px;height:1px;background: #b82c2c;z-index:1;}
#headerSp a.btnMenu span.lineBottom {position: absolute;bottom:17px;left:18px;right:18px;height:1px;background: #b82c2c;z-index:1;}
/* ======== #headerSp .logoArea ======== */
#headerSp .logoArea {position: absolute;top:0;left: 13%;z-index:1001;/* margin-left: -65px; */}
#headerSp .logoArea h1 {font-size:0;}
#headerSp .logoArea h1 a {position: relative;display: block;width: 80px;height: 45px;background: url(../images/header_logo.svg) center center / 80px 40px no-repeat;overflow: hidden;text-indent:-999px;z-index:1003;}

/* ======== #headerSp .textArea ======== */
#headerSp .textArea {position: absolute;top:0;left: 37%;z-index:1001;/* margin-left:-65px; */top: 11px;}
#headerSp .textArea h2 {font-size: 11px;}

/* ======== #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:10px;right:18px;color: #b82c2c;}
#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: 12px;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; }