@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: 80px;position: fixed;bottom: 0;left:0;right:0;width: 100%;background: rgba(255,255,255,0.9);background: #fff;z-index: 1000;}
#header.autofix_sb.fixed {height: 60px;-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; */}

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


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


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


/* ======== #header .navArea ======== */
#header .navArea { position: absolute; bottom: 0;left: 5%; right:5%; display: block; z-index: 2; text-align:center; }

#header .navArea ul.navi { font-size: 0; width: 100%; position: relative; }
#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',"������", YuMincho, "�q���M�m���� ProN W3", "Hiragino Mincho ProN", "HG����E", "�l�r �o����", "�l�r ����", Verdana, serif;font-weight:400;letter-spacing:2.5px;line-height: 40px;}
#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:#a560a3;  }
#header .navArea ul.navi li:hover a:after { left: 0px; right: 0px; background: #a560a3; }


#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: #a560a3;
  font-size: 1.2rem;
  /* font-family: "������", YuMincho, "�q���M�m���� ProN W3", "Hiragino Mincho ProN","HG����E","�l�r �o����","�l�r ����",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: #fefefe;background: url(../images/noise.png) repeat #fefefe;background:#f9fcfd;background:#f6f6f6;-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 1px 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 1px 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: #eee;-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 1px 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: #fefefe; 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:#e6f8ff; }







/* ul.inner2 li a */
#header .navArea ul.navi .subNav ul.inner2 li a {display: block;margin: 0;padding: 0;height: 60px;color: #111;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:#A560A3; }

/* .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:#111; 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: #A560A3; 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: 22px;right: 190px;z-index: 1001;}
/*#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }*/
#header.autofix_sb.fixed .snsArea {top: 15px;right: 190px;}



/* .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:15px;font-size: 18px;color:#111;font-weight:normal;position:relative;z-index:0;}
#header .snsArea ul li a i { line-height:30px; }
#header .snsArea ul li a:hover { font-size:18px; color:#a560a3;}
#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: 14px;right: 30px;z-index:2;}
#header.autofix_sb.fixed .contactArea {top: 7px;right: 30px;}

#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:#111; 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: #717070;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: #000;
     }



/* ======== #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:#A560A3; 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:#A560A3 1px dotted; border-top:#A560A3 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:#A560A3; }

@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:#fefefe;/* background: #A560A3; */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:#fefefe; z-index:0; }
#headerSp a.btnMenu span.lineTop { position: absolute; top:18px; left:18px; right:18px; height:1px; background:#111; z-index:1; }
#headerSp a.btnMenu span.lineMiddle { position: absolute; top:50%; left:18px; right:18px; height:1px; background:#111; z-index:1; }
#headerSp a.btnMenu span.lineBottom { position: absolute; bottom:17px; left:18px; right:18px; height:1px; background:#111; z-index:1; }
/* ======== #headerSp .logoArea ======== */
#headerSp .logoArea { position: absolute; top:0; left:50%; 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; width:129px; height:50px; background:url(../images/logoHeader_sp.png) center center / 129px 30px 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:10px; right:18px;  }
#headerSp .language ul { position:relative; z-index:1; margin-left:10px; padding-left:18px; }
#headerSp .language ul li{ list-style: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:1.5px; position:relative; z-index:2; }
#headerSp .language ul li a:hover {color:#A560A3;}
#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:#A560A3 1px solid; }




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

   #footer

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

#footer {padding-top:90px;background: url(../images/noise.png) repeat #f5f5f5;border-top: #eee 1px solid;/* background: #A560A3; */position:relative;z-index:1;}
#footer:before { position:absolute; top:-1px; left:5%; right:5%; height:0; content:""; border-top:#ededed 1px solid; z-index:2; }
/* ----- h3 ----- */ 
#footer h3 { font-size:13px;font-family: 'Catamaran', sans-serif; font-weight:700;letter-spacing:3px; line-height:2; text-transform:uppercase; text-align:center; margin-bottom:20px; }
@media only screen and (max-width: 800px) { 
#footer { padding-top:80px;}
}
@media only screen and (max-width: 738px) { 
#footer {padding-top:70px;/* background: url(../images/noise.png) repeat #f0f0f0; */}
#footer h3 { margin-bottom:15px; }
}
@media only screen and (max-width: 414px) { 
#footer { padding-top:60px;}
}



/* ----- .inner ----- */ 
#footer .inner { padding:50px 0; margin:0 5%; background:#fefefe; }

/* ----- .infoArea ----- */ 
#footer .infoArea { font-size:0; z-index:2; position:relative; }

/* ----- .infoBox ----- */ 
#footer .infoBox {display:inline-block;margin:0;width: 33%;padding:5px 2.5%;position: relative;z-index:0;}
#footer .infoBox:after { position:absolute; top:0; right:0; bottom:0; width:0; content:""; border-right:#ededed 1px solid; z-index:0; }
#footer .infoBox:last-child:after { display:none;}

#footer .infoBox .linkArea {margin-top:10px;text-align: center;}
#footer .infoBox .linkArea .btnGoogle {display: inline-block;padding: 0 20px 0 30px;margin:0;font-size: 11px;text-decoration: none;text-align:center;line-height: 30px;letter-spacing: 1px;position: relative;color:#111;background:#fefefe;border:#111 1px solid;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 5px;max-width:100%;}
#footer .infoBox .linkArea .btnGoogle:after { font-family: 'themify'; content: "\e693"; font-size: 13px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 10px; z-index: 1; line-height: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#footer .infoBox .linkArea .btnGoogle:hover { color:#333; background:#999; color: #fff; border:#999 1px solid;border:#999 1px solid; }


/* .txtArea */ 
#footer .aboutBox .txtArea {/* margin-top:20px; */text-align: center;}
#footer .aboutBox h1 {width:100%;height: 49px;background:url(../images/logoFooter_sp.png) center center no-repeat;background-size: 188px 49px;margin-top:-20px;}
#footer .aboutBox p {font-size: 15px;text-indent:-0.5em;margin-top:-0.5em;}

/* .imgArea */ 
#footer .accessBox .imgArea {float:left;width: 15%;}
/* .txtArea */ 
#footer .accessBox .txtArea { float:right; width:62.5%; }
#footer .accessBox p { font-size:12px; margin-top:-0.5em;}

/* .linkArea */
#footer .accessBox .linkArea { margin-top:10px; text-align:left; }
#footer .accessBox .linkArea .btnGoogle { display: inline-block; padding: 0 20px 0 30px; margin:0; font-size: 11px; text-decoration: none; text-align:center; line-height: 30px; letter-spacing: 1px; position: relative; color:#111; background:#fefefe; border:#111 1px solid; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; max-width:100%; }
#footer .accessBox .linkArea .btnGoogle:after { font-family: 'themify'; content: "\e693"; font-size: 13px; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 10px; z-index: 1; line-height: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#footer .accessBox .linkArea .btnGoogle:hover { color:#A560A3; background:#f0fafe; border:#A560A3 1px solid;border:#f0fafe 1px solid; }

/* .contactBox */ 
#footer .contactBox .imgArea { float:left; width:30%; display:none; }
#footer .contactBox .txtArea {float:right;width:62.5%;width: 80%;margin: 0 10%;}
#footer .contactBox h4 { font-size:12px; font-weight:normal; line-height:2.2; letter-spacing: 1px; margin-top:-0.5em; text-align:center;}

/* .contactBox ul */ 
#footer .contactBox ul { }
#footer .contactBox ul li { display:block; margin:5px 0 0; text-align:center; position:relative; z-index:1; }
#footer .contactBox ul li a,
#footer .contactBox ul li span { display:block; line-height:50px; position:relative; z-index:2;}
#footer .contactBox ul li .tel {color:#111;/* border: #111 1px solid; */font-size: 20px;font-weight:600;letter-spacing:2px;}
/*#footer .contactBox ul li .tel:before { position:absolute; top:0; left:20px; bottom:0; width:25px; content:""; background:url(../images/telIcon.png) left center no-repeat; }*/
#footer .contactBox ul li .tel:before {position:absolute;top:0;left: 20%;bottom:0;width:25px;font-size:20px;text-align:left;font-family: 'FontAwesome';content: "\f095";font-weight:normal;}




/* .mail */ 
#footer .contactBox ul li .mail { color:#111; border:#111 1px solid; font-size:13px; font-weight:500; letter-spacing:1px;  }
#footer .contactBox ul li .mail:before { position:absolute; top:0; left:21px; bottom:0; width:25px; font-size:20px; text-align:left; font-family: 'themify'; content: "\e75a"; font-weight:normal; }
#footer .contactBox ul li .mail:before { position:absolute; top:0; left:21px; bottom:0; width:25px; font-size:20px; text-align:left; font-family: 'FontAwesome'; content: "\f003"; font-weight:normal; }


#footer .contactBox ul li .mail:hover { color:#fefefe; background:#999; border:#f0fafe 1px solid;}
#footer .contactBox ul li .mail:after { position:absolute; top:0; bottom:0; right:15px; font-size:10px; font-family: 'themify'; content: "\e649"; font-weight:normal; opacity:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#footer .contactBox ul li .mail:hover:after { opacity:1;-webkit-transform: translate(5px, 0px);-moz-transform: translate(5px, 0px);-o-transform: translate(5px, 0px);-ms-transform: translate(5px, 0px);transform: translate(5px, 0px); }


@media only screen and (max-width: 945px) {
#footer .contactBox ul li .tel { font-size:14px; letter-spacing:1.5px;}
#footer .contactBox ul li .tel:before { left:10px; }
#footer .contactBox ul li .mail { font-size:12px;  }
#footer .contactBox ul li .mail:before { left:10px; }	
}

@media only screen and (max-width: 800px) { 
/* ----- .inner ----- */ 
#footer .inner { padding:50px 0; margin:0 5%; background:#fefefe; }

/* ----- .infoArea ----- */ 
#footer .infoArea { font-size:0; z-index:2; position:relative; }

/* ----- .infoBox ----- */ 
#footer .infoBox {width: 100%;padding:5px 5%;}
#footer .infoBox:last-child {width:100%;margin-top:25px;padding-top:25px;/* border-top:#ededed 1px solid; */}
#footer .infoBox:after { position:absolute; top:0; right:0; bottom:0; width:0; content:""; border-right:#ededed 1px solid; z-index:0; }
#footer .infoBox:nth-child(2):after { display:none;}

#footer .aboutBox h1 {width:100%;height:72px;/* background: url(../images/logoFooter_sp.png) center center no-repeat; */margin-top:-20px;background-size:80px 72px;}
/* .linkArea */
#footer .accessBox .linkArea .btnGoogle:hover { color:#111; background:#fefefe; border:#111 1px solid; }

/* .contactBox ul */ 
#footer .contactBox ul { font-size:0; margin:10px -1% 0; }
#footer .contactBox ul li { display:inline-block; margin:5px 1% 0; width:48%; }
#footer .contactBox ul li a,
#footer .contactBox ul li span { display:block; line-height:50px; position:relative; z-index:2;}
#footer .contactBox ul li .tel {color:#111;border: #111 1px solid;font-size:16px;font-weight:600;letter-spacing:2px;}
#footer .contactBox ul li .tel:before { position:absolute; top:0; left:20px; bottom:0; width:25px; content:""; background:url(../images/telIcon.png) left center no-repeat; }

/* .mail */ 
#footer .contactBox ul li .mail { color:#111; border:#111 1px solid; font-size:13px; font-weight:500; letter-spacing:1px;  }
#footer .contactBox ul li .mail:before { position:absolute; top:0; left:21px; bottom:0; width:25px; font-size:20px; text-align:left; font-family: 'themify'; content: "\e75a"; font-weight:normal; }
#footer .contactBox ul li .mail:hover {color:#111; border:#111 1px solid; background:none;}
#footer .contactBox ul li .mail:after { display:none; }
}

@media only screen and (max-width: 738px) { 
/* ----- .inner ----- */ 
#footer .inner { padding:20px 0; margin:0 5%;}

/* ----- .infoBox ----- */ 
#footer .infoBox { display:block; margin:0; width:100%; padding:25px 5%;}
#footer .infoBox:after { position:absolute; top:auto; right:0; bottom:0; left:0; width:100%; border-right:none; border-bottom:#ededed 1px solid; }

/* .contactBox */ 
#footer .contactBox h4 { font-size:12px; font-weight:normal; line-height:2.2; letter-spacing: 1px; margin-top:-0.5em; text-align:center;}

#footer .contactBox ul { font-size:0; margin:5px -1% 0; text-align:center; }
#footer .contactBox ul li { margin:10px 1% 0; min-width:250px; }

#footer .contactBox ul li a,
#footer .contactBox ul li span {line-height: 45px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 0px;}

#footer .contactBox ul li .tel { font-size:14px; letter-spacing:1.5px;}
#footer .contactBox ul li .tel:before { left:10px; width:20px; background:url(../images/telIconSp.png) left center no-repeat; background-size:20px 20px;}
#footer .contactBox ul li .mail { font-size:12px;  }
#footer .contactBox ul li .mail:before { left:10px; }
}

@media only screen and (max-width: 414px) { 
#footer .infoBox:first-child { padding:25px 7.5%;}
#footer .accessBox p { font-size:11px; margin-top:-0.5em; line-height:1.9;}
}


/* ----- .inner2 ----- */ 
#footer .inner2 { padding:40px 0; margin:0 5%; border-top:#ededed 1px solid; background:#fefefe; position:relative; z-index:1;}

/* ----- .sitemapArea ----- */ 
#footer .sitemapArea { font-size:0; }
/* .sitemapBox */
#footer .sitemapBox {display:inline-block;margin:0;width: 100%;position: relative;z-index:0;}
#footer .sitemapBox:after { position:absolute; top:0; right:0; bottom:0; width:0; content:""; border-right:#ededed 1px solid; z-index:0; }
#footer .sitemapBox:last-child:after { display:none;}
/* ul */
#footer .sitemapBox ul { padding:0 10%; }
#footer .sitemapBox ul li { display:block; margin:0; padding:0; font-size:12px; letter-spacing:1px; }
#footer .sitemapBox ul li a {display:inline-block;position:relative;z-index:1;line-height:30px;padding-left:15px;padding-right: 8px;}
#footer .sitemapBox ul li a:before { position:absolute; top:0; left:0; bottom:0; margin:auto 0; content:""; width:5px; height:5px; background:#ddd; 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; }
#footer .sitemapBox ul li a:hover { color:#A560A3; }
#footer .sitemapBox ul li a:after { position:absolute; top:5px; left:0; bottom:5px; width:0; content:""; background:#fefefe; 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; }
#footer .sitemapBox ul li a:hover:after { width:100%; background:#ddd;}

/* ----- ul.calendar ----- */ 
#footer .sitemapBox ul.calendar { margin-top:15px; }

@media only screen and (max-width: 1050px) {
#footer .sitemapBox ul li { margin:3px 0; }
#footer .sitemapBox ul li a { line-height:1.6;}
#footer .sitemapBox ul li a:hover { color:#A560A3; }
#footer .sitemapBox ul li a:after { top:2px; bottom:2px; }
}

@media only screen and (max-width: 945px) {
#footer .sitemapBox {width: 100%;margin-bottom:30px;}
#footer .sitemapBox:nth-child(4),
#footer .sitemapBox:nth-child(5) { margin-bottom:0; }
#footer .sitemapBox:last-child:after { position:absolute; top:0; right:0; bottom:0; width:0; content:""; border-right:#ededed 1px solid; z-index:0;}
#footer .sitemapBox:nth-child(3):after { display:none;}
}

@media only screen and (max-width: 800px) { 
#footer .sitemapBox ul li a:hover { color:#111; }
#footer .sitemapBox ul li a:after { display:none; }
}

@media only screen and (max-width: 800px) { 
/* ----- .inner ----- */ 
#footer .inner2 { padding:25px 5% 45px; margin:0 5%; background:#f5f5f5; background:#fefefe; border-top:#ededed 1px solid;}
/* ----- .sitemapArea ----- */ 
#footer .sitemapArea { font-size:0; }
/* .sitemapBox */
#footer .sitemapBox { display:block; margin:0; width:100%;}
#footer .sitemapBox:after { display:none; }
/* ul */
#footer .sitemapBox ul { margin:20px 0 0; padding:0; font-size:0; text-align:left; position:relative; }
#footer .sitemapBox ul li {display:inline-block;margin:0;width: 100%;padding:0;border: transparent 1px solid;font-size:10px;line-height:40px;text-align:center;}
#footer .sitemapBox ul li a { display:block; position:relative; z-index:1; padding-left:0; letter-spacing:0.5px;line-height:40px;  background:#f5f5f5;}
#footer .sitemapBox ul li a:before { position:absolute; top:0; left:auto; right:8px; bottom:0; margin:0; font-family: 'themify'; content: "\e649"; font-size: 6px; width:auto; height:100%; background:none; z-index:1; }

#footer .sitemapBox ul.calendar { margin-top:20px; }

#footer .sitemapBox ul.home li,
#footer .sitemapBox ul.calendar li,
#footer .sitemapBox ul.privacy li { width:100%; }

#footer .sitemapBox ul.home:before,
#footer .sitemapBox ul.photography:before,
#footer .sitemapBox ul.exhibition:before,
#footer .sitemapBox ul.collection:before,
#footer .sitemapBox ul.recommend:before,
#footer .sitemapBox ul.movie:before,
#footer .sitemapBox ul.about:before,
#footer .sitemapBox ul.staff:before,
#footer .sitemapBox ul.calendar:before,
#footer .sitemapBox ul.privacy:before { display:block; margin-bottom:15px; content:"Photography"; font-size:12px; font-family: 'Catamaran', sans-serif;font-weight:700; letter-spacing:3px; line-height:1;text-transform:uppercase; text-align:center; }

#footer .sitemapBox ul.home:before {content:"Home"; }
#footer .sitemapBox ul.exhibition:before {content: "exhibition";}
#footer .sitemapBox ul.collection:before {content: "collection";}
#footer .sitemapBox ul.photography:before {content: "contents";}
#footer .sitemapBox ul.recommend:before{content: "recommend";}
#footer .sitemapBox ul.movie:before{content:"Movie"; }
#footer .sitemapBox ul.about:before{content:"About"; }
#footer .sitemapBox ul.staff:before{content: "recommend";}
#footer .sitemapBox ul.calendar:before{content:"Calendar"; }
#footer .sitemapBox ul.privacy:before { content:"Privacy Policy";}
}

@media only screen and (max-width: 320px) { 
#footer .sitemapBox ul li a { letter-spacing:0;}
#footer .sitemapBox ul li a:before { display:none;}
}



/* ----- .inner3 ----- */ 
#footer .inner3 { padding:40px 0; margin:0 5%; background: #fefefe; border-top:#ededed 1px solid;text-align:center;position:relative; z-index:1;}
/* ul.sns */
#footer .inner3 ul.sns { font-size:0; text-align:center; padding:0 15%; }
#footer .inner3 ul.sns li { display:inline-block; width:20%; position:relative; z-index:2; line-height:30px; }
#footer .inner3 ul.sns li:after {position:absolute;top:50%;right:-8px;content: "";width: 1px;height:0;border-bottom:#ededed 1px solid;z-index:-1;}
#footer .inner3 ul.sns li:last-child:after { display:none;}
#footer .inner3 ul.sns li a { display:block; font-size:12px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing:2px;}
#footer .inner3 ul.sns li a span { position:relative; z-index:1;  }
#footer .inner3 ul.sns li a i { font-size:13px;line-height:30px; padding-right:5px; }
#footer .inner3 ul.sns li a.youtube i { font-size:18px; }
#footer .inner3 ul.sns li a:hover {color: #A560A3;}
#footer .inner3 ul.sns li a span:after { position:absolute; bottom:-5px; left: 33%; right: 33%; height:1px; 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; }
#footer .inner3 ul.sns li a:hover span:after { left:0; right:0; background:#A560A3;}

@media only screen and (max-width: 945px) {
#footer .inner3 ul.sns { padding:0; }
}

@media only screen and (max-width: 800px) {
#footer .inner3 ul.sns li a { letter-spacing:1.5px;}
#footer .inner3 ul.sns li a:hover { color:#111;}
#footer .inner3 ul.sns li a span:after { display:none; }
}

@media only screen and (max-width: 738px) { 
#footer .inner3 { padding:25px 5% 45px; margin:0 5%;}

/* ul.sns */
#footer .inner3 ul.sns { font-size:0; text-align:left; padding:0; margin:-10px -1% 0; }
#footer .inner3 ul.sns li { display:inline-block; width:31.333%; margin:10px 1% 0; position:relative; z-index:2; line-height:1; }
#footer .inner3 ul.sns li:after { display:none;}
#footer .inner3 ul.sns li:last-child:after { display:none;}

#footer .inner3 ul.sns li a {/* background:#f0f0f0; */line-height:40px;height:40px;display:block;text-align:center;font-size:11px;letter-spacing:0.5px;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;}
#footer .inner3 ul.sns li a i { font-size:12px;line-height:40px; padding-right:5px; margin-left:-8px;}
#footer .inner3 ul.sns li a.youtube i { font-size:13px; }
}

@media only screen and (max-width: 414px) { 
#footer .inner3 ul.sns { margin:-5px -1% 0; }
#footer .inner3 ul.sns li { width:48%; margin:5px 1% 0; }
#footer .inner3 ul.sns li a {line-height:35px;height:35px;-webkit-border-radius: 35px;-moz-border-radius: 35px;border-radius: 2px;}
#footer .inner3 ul.sns li a i { line-height:35px;}
}



/* ----- .copyrightArea ----- */ 
#footer .copyrightArea { padding:30px 5%; text-align:center; position:relative; z-index:1; }
#footer .copyrightArea p { font-size:11px; line-height:2.2; letter-spacing:1px; }
#footer .copyrightArea p img { width:100px;}
#footer .copyrightArea p.copyright { font-size:11px; font-family: 'Catamaran', sans-serif; font-weight:300;letter-spacing:1.5px;}
#footer .copyrightArea p.copyright span { font-size:13px; vertical-align: 0 ; font-family:'Open Sans';}

@media only screen and (max-width: 738px) { 
#footer .copyrightArea {padding:35px 5% 45px;/* background: url(../images/noise.png) repeat #f0f0f0; */}
#footer .copyrightArea:before { position:absolute; top:-1px; left:5%; right:5%; height:0; content:""; border-top:#ededed 1px solid; z-index:2; }
#footer .copyrightArea p.copyright { letter-spacing:1px;}
#footer .copyrightArea p.copyright span { font-size:12px; vertical-align: 0 ; font-family:'Open Sans';}
}




/* --- .shareArea --- */
#footer .shareArea { position: absolute; top:40px; left:5%; }

/* --- .snsBtnArea --- */
#footer .shareArea ul { font-size:0; text-align: left; margin:0; }
#footer .shareArea ul li { display: inline-block; width:100px; text-align: center; margin:0 5px 0 0; }
#footer .shareArea ul li a { position: relative; display: block; height:30px; font-size:11px; font-weight: 500; letter-spacing:1px; line-height:30px; color:#111; background:#fefefe; margin:0 auto; padding:0 0 0 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
#footer .shareArea ul li a:before { position: absolute; top:0; left:10px; bottom:0; display: block; font-size:13px; font-family:'themify'; font-weight: normal; line-height:30px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; }
#footer .shareArea ul li a.twitterBtn:before { content:"\e74b"; color:#1da1f2;}
#footer .shareArea ul li a.twitterBtn:hover { color:#fefefe; background: url(../images/noise.png) repeat #1da1f2;}
#footer .shareArea ul li a.twitterBtn:hover:before { color:#fefefe; }

#footer .shareArea ul li a.facebookBtn:before { content:"\e741"; color:#3765a3; }
#footer .shareArea ul li a.facebookBtn:hover { color:#fefefe; background: url(../images/noise.png) repeat #3765a3;}
#footer .shareArea ul li a.facebookBtn:hover:before { color:#fefefe; }

@media only screen and (max-width: 800px) { 
#footer .shareArea { position: static; margin-bottom:15px; }
#footer .shareArea ul { font-size:0; text-align: center; margin:0; }
#footer .shareArea ul li { margin:0 1%; }
#footer .shareArea ul li a.twitterBtn:hover { color:#111; background:#fefefe;}
#footer .shareArea ul li a.twitterBtn:hover:before { color:#1da1f2; }
#footer .shareArea ul li a.facebookBtn:hover { color:#111; background:#fefefe;}
#footer .shareArea ul li a.facebookBtn:hover:before { color:#3765a3; }
}

@media only screen and (max-width: 738px) { 
#footer .shareArea { position: static; margin-bottom:15px; }
/* --- .snsBtnArea --- */
#footer .shareArea ul { font-size:0; text-align: center; margin:0; }
#footer .shareArea ul li { display: inline-block; width:120px; text-align: center; margin:0 1%; }
#footer .shareArea ul li a {-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);}
}