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

   #header

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

/* transition */
#header,
#header .logo,
#header .logoSmall,
#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: 0;left:0;right:0;width: 100%;background: rgba(255,255,255,0.9);background:#fefefe;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);}

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



/* NEW 2021/7/5
---------------------------------------  */
/* ======== #header .logoArea ======== */
#header .logo {position: absolute;top: 50px;left: 1%;z-index: 3;margin-left: 0;width: 180px;line-height: 0;font-size: 0;/* height: 40px; */}
#header .logo a { }
#header .logo a:hover { opacity: 0.7; }
#header .logo a img {display: block;/* width:100%; *//*margin:10px 0;*/}

#header.autofix_sb.fixed .logo {top: 0;opacity: 0;height: 0;}


/* ======== #header .logoAreaSmall ======== */
#header .logoSmall { position: absolute; top: -90px; left: 0; z-index: 1002; opacity: 0; height: 60px; line-height: 0; font-size: 0; margin: 0; }
#header .logoSmall a {display: block;overflow: hidden;}
#header .logoSmall a:hover { opacity: 0.7; }
#header .logoSmall a img{display: block;height: 44px;width:auto;margin:8px;}
#header.autofix_sb.fixed .logoSmall { top: 0; opacity: 1; }






/* ======== #header .navArea (OBSOLETE) ======== */
#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; margin:0 9px; padding:0 9px; width: auto; height: 60px }
#header .navArea ul.navi li a { display: block; margin: 0; height: 60px; 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-weight:400; letter-spacing:2.5px; line-height:60px;}
#header .navArea ul.navi a:hover {  color:#ff878d;  }
#header .navArea ul.navi a:after { position: absolute; bottom: 14px; 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:#ff878d;  }
#header .navArea ul.navi li:hover a:after { left: 0px; right: 0px; background: #fec6c7; }


#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;}



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

.subNav { width: 100.1%; text-align: center; position: absolute; top: 60px; padding:0 2px 10px; left: 0; z-index: -1; overflow: hidden; }
.off .subNav { display:none; opacity:0;}
.off .subNav .inner { width: 100%; 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: 50%; 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 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:#faf9f9; }

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

/* .txtArea */
#header .navArea ul.navi .subNav ul.inner2 li a .txtArea { font-size:14px; line-height: 90px; text-align:center; 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:90px; 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: #0c438a; 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}}








/* ======== .global-nav  ======== */
.global-nav {position: absolute;/* top: 20px; */bottom: 0;left: 5%;right:5%;display: block;z-index: 2;text-align:center;}

/*.global-nav { font-size: 0; width: 100%; position: relative; }*/
.global-nav .main{}
.global-nav .main .item {display: inline-block;margin:0;padding: 0 20px;width: auto;line-height: 60px;font-size: 15px;font-weight: 300;letter-spacing: 1.5px;letter-spacing:1px;text-align: center;position: relative;}
.global-nav .main .item.en {font-size: 16px;/* font-family: 'Catamaran', sans-serif; */font-weight:400;letter-spacing:2.5px;/* text-transform: uppercase; */}


.global-nav .main .item:after { position: absolute; bottom: 14px; left: 33%; right: 33%; height: 1px; display: block; content: ""; background: transparent; z-index:-1; transition: all 0.3s ease; }
.global-nav .main .item.current:after { left: 5px; right: 5px; background: #ddd; }
.global-nav .main .item:hover,
.global-nav .main .item.active{ color:#0c438a;}
.global-nav .main .item:hover:after,
.global-nav .main .item.active:after { left: 0px; right: 0px; background: #0c438a; }



/* ======== .global-nav .sub  ======== */
/* BG */
.global-nav-bg{
  background-color: rgba(0,0,0,0.2);
  /*background-color: rgba(255,255,255,0.8);*/
  position: fixed;
  z-index: 999;
  top:0;
  left:0;
  width:100%;
  transition:0.2s opacity linear, 0s 0.2s height;
  opacity:0;
  height: 0;
}
.global-nav-bg.shown{
  transition:0.2s opacity linear, 0s 0s height;
  height: 100%;
  opacity:1;
}


/* Sub navigation board */
.global-nav .sub{}
.global-nav .sub .group{
  position: absolute;
  z-index: 1;
  /*display: none;*/
  top:-100%;
  left: 50%;
  /* right: 50%; */
  padding: 0px;
  background:#f3f3f3;
  border:1px solid #eee;
  width: 280px;
  transition:0s 0.4s top, 0.2s opacity linear, 0.4s transform cubic-bezier(0.5,0,0,1);
  z-index: 1;
  top:-9999px;
  transform:translate(-50%, -3px);
  opacity:0;
}
.global-nav .sub .group.open{
  transition:0s all linear,0.6s transform cubic-bezier(0.5,0,0,1),0.2s opacity linear;
  z-index: 2;
  top:90%;
  transform:translate(-50%,0);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  opacity:1;
}

.global-nav .sub .group .label{
  font-size:12px;
  letter-spacing: 1.2px;
  line-height: 30px;
}.global-nav .sub .group .label a{
  text-decoration: underline #0c438a;
  transition:0.3s ease all;
  color:#0c438a;
}
.global-nav .sub .group .label a:hover{
  color:#0c438a;
}
.global-nav .sub .group .label:before,
.global-nav .sub .group .label:after{
  content: '-';
  color:#ccc;
  margin:0 10px;
}
.global-nav .sub .group .items{
  /* margin-top:10px; */
  border-top:1px solid #eee;
}
.global-nav .sub .group .items .item{
  display: block;
  font-size:13px;
  letter-spacing: 1px;
  line-height: 50px;
  text-align: left;
  padding-left:24px;
  background-color: #fff;
  position: relative;
  border:1px solid #eee;
  border-top:none;
}

.global-nav .sub .group .items .item:after{ font-family: 'themify';content: "\e649"; position: absolute;right:20px;font-size:11px;}

.global-nav .sub .group .items .item:hover,
.global-nav .sub .group .items .bundled.shown > .item,
.global-nav .sub .group .items .item.current{
  background-color: #faf9f9;
  color:#0c438a;
}

.global-nav .sub .group .items .item:hover:after{
  /*color: #ff878d;*/
}
.global-nav .sub .group .items .item.current:after{
  content:none;
}

/* For location children */
.global-nav .sub .group .items .bundled{
  position: relative;
  z-index: 1;
}
.global-nav .sub .group .items .bundled .links{
  position: absolute;
  top:12px;
  /*top:0;*/
  left:96%;
  /*left:80%;*/
  border:1px solid #eee;
  overflow: hidden;
  width: 0;
  border-width:0;
  transform:translateX(-3px);
  transition:0.5s cubic-bezier(0.2,0,0,1) transform;
  /*padding-left:30px;*/
}
.global-nav .sub .group .items .bundled.shown .links{
  width:200px;
  border-width:1px;
  transform:translateX(0);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.global-nav .sub .group .items .bundled .links .item{
  line-height: 46px;
  padding-left:20px;
  font-size:12px;
  letter-spacing: 1px;
}
.global-nav .sub .group .items .bundled .links .item:after{
  font-size:9px;
  right:14px;
}



/* ======== #header .snsArea ======== */
#header .snsArea { position: absolute; top: 17px; left: 25px; z-index: 1001;}
#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }

/* .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:28px; height:30px; font-size:15px; font-size:13px;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:#7eccd6;}
#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:#7eccd6;}
#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:#7eccd6 1px solid; }



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

#header .contactArea ul { font-size:0; list-style: none; }
#header .contactArea ul li {display: inline-block;margin: 0 5px;text-align: center;}
#header .contactArea ul li a {display:block;/*padding:0 30px 0 45px;*/padding-left: 15px;width: 200px;height:45px;color:#111;font-size: 16px;font-weight:500;letter-spacing:0.5px;line-height:45px;position:relative;z-index:2;background: #e79d0f;border: 1px solid #ddd;}
#header .contactArea ul li a:hover { color:#0c438a; background:#faf9f9; /*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:#ddd 1px solid; */z-index:-1;}
#header .contactArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
#header .contactArea ul li a .icon { position: absolute; top: 0; left: 12px; bottom: 0; width: 20px; z-index: 0; }
#header .contactArea ul li a .icon:before { position:absolute; top:0; left:0; bottom:0; right: 0; font-size:14px; text-align:left; font-family: 'themify'; content: "\e75a"; font-weight:normal; }



/* 20211014追加*/
/* ======== #header .englishArea ======== */
#header .englishArea {position: absolute; top: 14px; right: 25px; z-index:1; padding-right: 135px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}
#header .englishArea ul { font-size:0; list-style: none; }
#header .englishArea ul li { display: inline-block; margin: 0; text-align: center;}
#header .englishArea ul li a { display:block; padding-left:15px; width: 125px; height:45px; color:#111; font-size:12px; font-weight:500; letter-spacing:1px; line-height:45px; position:relative; z-index:2; }
#header .englishArea ul li a:hover { color:#0c438a; background:#faf9f9;}
#header .englishArea ul li a:before { position:absolute; top:0; right:0px; bottom:0; left:0px; content:""; border:#ddd 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 .englishArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
#header .englishArea ul li a .icon { position: absolute; top: 0; left: 12px; bottom: 0; width: 20px; height: 14px; margin: auto 0;background: url(../images/icon_flag_uk.png) center center no-repeat; background-size: cover;z-index: 0; }

#header.autofix_sb.fixed .englishArea { top: -90px; opacity: 0; height: 0; }



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

@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:rgba(255,255,255,1); 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 .btnMenu {position: absolute;position: fixed;top: 0;left:0;display: block;width: 60px;height:50px;color:#fefefe;z-index:0;background: #fff;}
#headerSp .btnMenu span.lineTop { position: absolute; top:18px; left:18px; right:18px; height:1px; background:#111; z-index:1; }
#headerSp .btnMenu span.lineMiddle { position: absolute; top:50%; left:18px; right:18px; height:1px; background:#111; z-index:1; }
#headerSp .btnMenu span.lineBottom { position: absolute; bottom:17px; left:18px; right:18px; height:1px; background:#111; z-index:1; }


/* ======== #headerSp a.btnContact ======== */
#headerSp .btnContact { display:block;position: absolute; top:0; right:0; display: block; width:60px; height:50px; z-index:0; text-align: center;background-repeat: no-repeat;background-image: url('../images/icon_extra/header_sp_contact_s.png');background-size: 24px auto;background-position: center;transform:translateY(1px);}



/* NEW 2021/7/5
---------------------------------------  */
/* ======== #headerSp .logoArea ======== */
#headerSp .logo {position: absolute;top: 8px;left:50%;z-index:1001;transform:translateX(-50%);}
#headerSp .logo {width: 200px;margin:0;padding: 5px 0 0;}
#headerSp .logo img {display: block;width:100%;width:auto;}





/* ======== #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;}


/* ======== #menu .btnClose ======== */
#menu .btnClose { position: absolute; top:0; left:0; width:60px; height:50px; color:#111; overflow: hidden; text-indent:-999px; z-index:100; }
#menu .btnClose:before { position: absolute; top:0; right:0; left:0; bottom:0; font-family:'themify'; content:"\e646"; font-size:14px; line-height:52px; text-align: center; text-indent:0; z-index:1; }
#menu .btnClose:after { position: absolute; top:7px; left:12px; right:12px; bottom:7px; content:""; border:#111 1px solid; webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; }


/* Bg */
.mobile-nav-bg{
  position: fixed;
  z-index: 1002;
  top:0;
  left:0;
  width:100%;
  height: 0;
  opacity:0;
  background-color: rgba(0,0,0,0.2);
  transition:0.3s opacity linear,0s 0.3s height linear;
}
.mobile-nav-bg.open{
  height:100%;
  opacity:1;
  transition:0.3s opacity linear,0s height linear;
}


/* Navigation block */
.mobile-nav{
  position: fixed;
  z-index: 1002;
  top:0;
  left: -100%;
  width: 100%;
  max-width:400px;
  height:100%;
  background-color: #fefefe;
  border-right:#eee 1px solid;
  transition:.6s all cubic-bezier(0.4,0,0,1);
}
.mobile-nav.open{
  left:0%;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}


/* Top */
.mobile-nav .top{position: absolute;z-index:1;top:0;left:0;width:100%;background-color:#fefefe;height:50px;border-bottom:1px solid #eee;}
.mobile-nav .top .closer {position: absolute;top:10px;left:3%;width:30px;height:30px;color:#111;overflow: hidden;text-indent:-999px;z-index:100;/* border:1px solid #222; */border-radius: 50%;background-color: rgba(253,253,253,0.9);}
.mobile-nav .top .closer:before { position: absolute; top:0; right:0; left:0; bottom:0; font-family:'themify'; content:"\e646"; font-size:13px; line-height:29px; text-align: center; text-indent:0; z-index:1; }



/* Navigation groups */
.mobile-nav .nav-groups{width:100%;height:100%;padding:40px 0 0;overflow-y:scroll;-webkit-overflow-scrolling:touch;}



.mobile-nav .nav-groups .group{position: relative;margin-top:30px;padding:0 5%;/* height: 40vh; */}
.mobile-nav .nav-groups .group + .group{margin-top:40px;}

.mobile-nav .nav-groups .group > .see-all{
  font-size:8.8px;
  letter-spacing: 0.6px;
  line-height:16px;
  position: absolute;
  top:0px;
  right:5%;
  padding:0 18px 0 0;
}
.mobile-nav .nav-groups .group .label-en{font-size:17px;letter-spacing: 1.6px;line-height:1;font-family: 'Catamaran',sans-serif;font-weight:800;text-transform: uppercase;}
.mobile-nav .nav-groups .group .label-ja{font-size:8.4px;letter-spacing:0.8px;line-height:1;color:#666;margin-top:10px}
.mobile-nav .nav-groups .group .items{
  margin-top:12px;
  border-top:1px solid #eee;
  overflow:hidden;
}

.mobile-nav .nav-groups .group .items:first-child{
  margin-top:12px;
  border-top:none;
  overflow:hidden;
}





.mobile-nav .nav-groups .group .items + .items{
  margin-top:0;
}
.mobile-nav .nav-groups .group .items .item{
  border-bottom:1px solid #eee;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-indent: 1px;
  line-height: 50px;
  display: block;
  position: relative;
}
.mobile-nav .nav-groups .group + .group{
  margin-top:30px;
}


.mobile-nav .nav-groups .group > .see-all:after,
.mobile-nav .nav-groups .group .items .item:after{
  font-family:'themify';
  content: "\e649";
  position: absolute;
  right:4px;
  /*font-size:6.6px;*/
  font-size:8px;
  font-weight: 600;
  line-height: 10px;
  height:10px;
  top:0;
  bottom:0;
  margin:auto;
}
.mobile-nav .nav-groups .group > .see-all:after{
  font-size:7px;
}
.mobile-nav .nav-groups .group .items .item.external:after{
  content:"\e732";
  font-size: 14px;
}
.mobile-nav .nav-groups .group .items .item:first-child{
  /*border-top:1px dotted #aaa;*/
}
.mobile-nav .nav-groups .group .items .item.no-border{
  border-top:none;
}

/* Sub items for location shoooting */
.mobile-nav .nav-groups .group .items.bundled{
  /*margin-right:-2.5%;*/
  /*margin-left:-2.5%;*/
}
.mobile-nav .nav-groups .group .items.bundled:last-child{
  border-bottom:1px solid #eee;
}
.mobile-nav .nav-groups .group .items.bundled .name,
.mobile-nav .nav-groups .group .items.bundled .links{
    float:left;
    width:50%;
    /*margin:0 2.5%;*/
}
.mobile-nav .nav-groups .group .items.bundled .name{
  font-size:10px;
  line-height: 34px;
}
.mobile-nav .nav-groups .group .items.bundled .links .item{
  border-bottom:1px solid #eee;
  font-size:9.6px;
  line-height: 28px;
  display: block;
  position: relative;
  text-indent: 3px;
}
.mobile-nav .nav-groups .group .items.bundled .links .item:after{
  font-size:6.4px;
  font-size:7px;

}
.mobile-nav .nav-groups .group .items.bundled .links .item:last-child{
    border:none;
}




/* Last group in gray
------------------------------------------ */
.mobile-nav .nav-groups .group.gray{padding:30px 4%;border-top:1px solid #ddd;margin-top:50px;background: url(../images/noise.png) repeat #eee;}
.mobile-nav .nav-groups .group.gray .label-en{color:#444;font-size:12px;letter-spacing: 4px;font-weight: 800}
.mobile-nav .nav-groups .group.gray .items{ border-color:#ccc;margin-top:18px; }
.mobile-nav .nav-groups .group.gray .items .item{border-color:#ccc;line-height: 1.6;padding:12px 0;font-size:12px;}
.mobile-nav .nav-groups .group.gray .items .item .name{display: block;}
.mobile-nav .nav-groups .group.gray .items .item .caption{display: block;font-size: 14px;letter-spacing:0.4px;margin-top:4px;color:#444;}


/* Variant: Icon layout  */
.mobile-nav .nav-groups .additional-items{margin-top:20px;padding-bottom: 30px;}
.mobile-nav .nav-groups .additional-items .item{font-size:11px;padding: 0 5px 0 0;line-height: 1;letter-spacing: 1px;color:#666;}

.mobile-nav .nav-groups .additional-items p{border-bottom:1px solid #ddd;margin-bottom: 0;}



/* Instagram icon */
.mobile-nav .nav-groups .additional-items .item i{
  margin-right:10px;
  transform:translate(2px, 1px);
  display: inline-block;
  margin-left: 0px;
}
/* English flag */
.mobile-nav .nav-groups .additional-items .item.england-icon{
  background-image:url(../images/icon_flag_uk.png);
  background-size:16px auto;
  background-repeat: no-repeat;
  background-position: left 4px center;
  padding-left:28px;


}



@media (max-width:320px){
  .mobile-nav .nav-groups .group .items .item{
    font-size:9.8px;
    letter-spacing: 0;
  }
}




/* Grand site nav (TODO: Fix this)
------------------------------------------ */
.grand-site-nav{
  position: absolute;
  z-index: 9999;
  top:0;
  left:0;
  width:100%;
  height: 25px;
  padding-left:10px;
  transition:0.6s 0.1s ease all;
}

.grand-site-nav .item{
  display: block;
  float:left;
  font-size:11px;
  line-height: 25px;
  letter-spacing: 0.04em;
  color:#aaa;
  position: relative;
  padding:0 3px;
  transition:0.3s ease color;
  border-bottom:1px solid #eee;
}

.grand-site-nav .item + .item{
  margin-left:5px;
}
.grand-site-nav .item.current,
.grand-site-nav .item:hover{
  border-color:#aaa;
  color:inherit;
}

@media (min-width:801px) {
  .fixed .grand-site-nav{
    top:-35px;
  }
}
@media (max-width:800px) {
  .grand-site-nav{
    height:24px;
    transform:translateY(-24px);
    border-bottom:1px solid #eee;
    background-color: #fefefe;
  }
  .grand-site-nav .item{
    font-size:9px;
    line-height:23px;
  }



  /* Fix the existing header  */
  #headerSp{
    top: 0;
    /* padding-top:24px; */
    /* transition:.6s ease all; */
    position: fixed;
    width: 100%;
  }
  #headerSp.fixed{
    /* transform:translateY(-24px); */
    background-color: rgba(255,255,255,0.9);
    position: fixed;
  }
  .linkArea_campaign{
    padding-top:74px;
  }
  /*#topImg .img{
    top:74px;
  }*/

}