@charset "utf-8";

/* ************************************************************************************************

   Base

   ************************************************************************************************ */

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   /* remember: box-sizing is not supported by IE7 :( */
   outline: none;
   vertical-align: top;
}

html {
   width: 100%;
}

html,
body {
   /* font: normal 1em/2em 'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
   margin: 0;
   padding: 0;
   width: 100%;
   color: #111;
   background: #fefefe;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 500;
}

blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
   margin: 0;
   padding: 0;
   font-weight: 400;
}

p {
   margin: 0;
   padding: 0;
   font-weight: normal;
}

a {
   color: inherit;
   outline: none;
   text-decoration: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

a:focus {
   outline: none;
}

button {
   text-decoration: none;
   border: none;
}

/* ----- *::selection ----- */
*::-moz-selection {
   background: #111;
   color: #fefefe;
}

*::selection {
   background: #111;
   color: #fefefe;
}

/* ----- h1,h2,h3,h4,h5 ----- */
h1,
h2,
h3,
h4,
h5 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

/* ----- .cf ----- */
/* For modern browsers */
.cf:before,
.cf:after {
   content: "";
   display: block;
   overflow: hidden;
}

.cf:after {
   clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
   zoom: 1;
}

/* ----- .transition03 ----- */
.transition03 {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.transition05 {
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

/* ----- img----- */
img {
   width: 100%;
}

/* ----- a ----- */
a {
   color: inherit;
   outline: none;
   text-decoration: none;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus,
*:focus {
   outline: none;
   text-decoration: none;
}

a:hover {
   text-decoration: none;
   outline: none;
}

/* ----- p ----- */
p {
   margin: 0;
   padding: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.8;
   letter-spacing: 1px;
}

p a {
   border-bottom: #aaa 1px dashed;
}

p a:hover {
   background: #eee;
   color: #333;
   border-bottom: #999 1px dashed;
}


@media only screen and (max-width: 800px) {
   p {
      /* font-size: 13px; */
      /* line-height: 2; */
      /* text-align: left; */
   }

   p a:hover {
      background: none;
      color: #111;
      border-bottom: #aaa 1px dashed;
   }
}

@media only screen and (max-width: 738px) {
   p {
      /* font-size: 12px; */
      /* line-height: 2; */
   }
}

html {
   height: 100%;
}

body {
   height: 100%;
   margin: 0;
}

/* .lazyload,.lazyloading */
.lazyload,
.lazyloading {
   opacity: 0;
}

.lazyloaded {
   opacity: 1;
   transition: opacity 750ms;
}


/* .if_br sp 改行 */
.if_br {
   display: none;
}

@media only screen and (max-width: 568px) {
   .if_br {
      display: block;
   }
}


/* .if_br2 Pc 改行 */
.if_br2 {
   display: block;
}

@media only screen and (max-width: 568px) {
   .if_br2 {
      display: none;
   }
}




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

   #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: 125px;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   /* background: rgba(255,255,255,0.9); */
   background: #111;
   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: 10px;
   left: 15%;
   z-index: 3;
   margin-left: -90px;
}

#header .logoArea h1 {
   width: 100px;
   height: 60px;
   line-height: 0;
   font-size: 0;
   margin: 0;
}

#header .logoArea h1 a {
   width: 100px;
   height: 60px;
   background: url(../images/nav_logo.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: 5%;
   ndex: 1002;
   opacity: 0;
}

#header .logoAreaSmall h1 {
   /* width: 60px; */
   /* height: 60px; */
   line-height: 0;
   font-size: 0;
   margin: 0;
}

#header .logoAreaSmall h1 a {
   width: 100px;
   height: 60px;
   background: url(../images/nav_logo.svg) center center no-repeat;
   background-size: 100px 44px;
   display: block;
   position: relative;
   overflow: hidden;
   text-indent: -999px;
   z-index: 1003;
}

#ie9 #header .logoAreaSmall h1 a {
   background: url(../common/images/nav_logo.svg) 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: 8%;
   /* top: 5%; */
   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: 60px;
   font-size: 15px;
   font-weight: 300;
   letter-spacing: 1.5px;
   letter-spacing: 1px;
   text-align: center;
   position: relative;
   z-index: 2;
   color: #fff;
}

/* span.en */
#header .navArea ul.navi li span.en {
   font-size: 14.5px;
   font-family: 'Catamaran', sans-serif;
   font-weight: 600;
   letter-spacing: 2.5px;
   line-height: 60px;
   color: #fff;
}

#header .navArea ul.navi a:hover {
   /*color:#fac; */
}

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

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


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

.subNav {
   width: 300px;
   text-align: center;
   position: absolute;
   top: 60px;
   padding: 0 0 0;
   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: -1px -2px -1px;
   padding: 15px;
   overflow: hidden;
   background: #fefefe;
   background: url(../images/noise.png) repeat #fefefe;
   background: #f9fcfd;
   background: #111;
   -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 1em;
   /* background: #9c2d2d; */
   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;
   color: #fff;
}





#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: #ffffff;
   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: #f5f8fa;
}







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

/* .txtArea */
#header .navArea ul.navi .subNav ul.inner2 li a .txtArea {
   font-size: 13px;
   line-height: 40px;
   text-align: left;
   padding-left: 20px;
   position: relative;
   letter-spacing: 2px;
   background: #111;
   color: #fff;
}

#header .navArea ul.navi .subNav ul.inner2 li a .txtArea:before {
   position: absolute;
   top: 0;
   right: 20px;
   bottom: 0;
   color: #f5f5f5;
   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: #f5f8fa;
   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: 17px;
   left: 25px;
   z-index: 1001;
}

/*#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }*/
#header.autofix_sb.fixed .snsArea {
   top: 20px;
   left: 60px;
}



/* .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: #fac;
   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: #fff;
}

#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: 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;
   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: #ddd;
   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: #7eccd6;
   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: #7eccd6 1px dotted;
   border-top: #7eccd6 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: #7eccd6;
}

@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: #000000;
   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: #fefefe;
   z-index: 1;
}

#headerSp a.btnMenu span.lineMiddle {
   position: absolute;
   top: 50%;
   left: 18px;
   right: 18px;
   height: 1px;
   background: #fefefe;
   z-index: 1;
}

#headerSp a.btnMenu span.lineBottom {
   position: absolute;
   bottom: 17px;
   left: 18px;
   right: 18px;
   height: 1px;
   background: #fefefe;
   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: #7eccd6;
}

#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: #7eccd6 1px solid;
}




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

@media only screen and (max-width: 800px) {
   #headerSp .logoArea h1 a {
      position: relative;
      display: block;
      height: 50px;
      background: url(../images/logoHeader_sp.png) center center / 50px 40px no-repeat;
      overflow: hidden;
      text-indent: -999px;
      z-index: 1003;
   }

}




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

   jQuery.mmenu CSS

   ----------------------------------------------------------- */
#my-menu:not(.mm-menu) {
   display: none;
}

#menu:not(.mm-menu) {
   display: none;
}

/* jQuery.mmenu oncanvas CSS */
.mm-hidden {
   display: none !important;
}

.mm-wrapper {
   overflow-x: hidden;
   position: relative;
}

.mm-menu,
.mm-panels,
.mm-panels>.mm-panel {
   margin: 0;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 0;
   letter-spacing: 1px;
}

.mm-panels>.mm-panel {
   margin-top: 50px;
   border-top: #ddd 1px solid;
}

.mm-menu {
   box-sizing: border-box;
   background: inherit;
   display: block;
   overflow: hidden;
   padding: 0;
}

.mm-panel {
   -webkit-transition: -webkit-transform 0.4s ease;
   -moz-transition: -moz-transform 0.4s ease;
   -ms-transition: -ms-transform 0.4s ease;
   -o-transition: -o-transform 0.4s ease;
   transition: transform 0.4s ease;
   -webkit-transform: translate3d(100%, 0, 0);
   -moz-transform: translate3d(100%, 0, 0);
   -ms-transform: translate3d(100%, 0, 0);
   -o-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
}

.mm-panel.mm-opened {
   -webkit-transform: translate3d(0%, 0, 0);
   -moz-transform: translate3d(0%, 0, 0);
   -ms-transform: translate3d(0%, 0, 0);
   -o-transform: translate3d(0%, 0, 0);
   transform: translate3d(0%, 0, 0);
}

.mm-panel.mm-subopened {
   -webkit-transform: translate3d(-30%, 0, 0);
   -moz-transform: translate3d(-30%, 0, 0);
   -ms-transform: translate3d(-30%, 0, 0);
   -o-transform: translate3d(-30%, 0, 0);
   transform: translate3d(-30%, 0, 0);
}

.mm-panel.mm-highest {
   z-index: 1;
}

.mm-panels,
.mm-panels>.mm-panel {
   background: inherit;
   border-color: inherit;
}

.mm-panels>.mm-panel {
   background: inherit;
   border-color: inherit;
   background: #fafafa;
   -webkit-overflow-scrolling: touch;
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: auto;
   box-sizing: border-box;
   padding: 0 20px;
}

.mm-panels>.mm-panel.mm-hasnavbar {
   padding-top: 40px;
}

.mm-panels>.mm-panel:before,
.mm-panels>.mm-panel:after {
   content: '';
   display: block;
   height: 20px;
}

.mm-vertical .mm-panel {
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -ms-transform: none !important;
   -o-transform: none !important;
   transform: none !important;
}

.mm-vertical .mm-listview .mm-panel,
.mm-listview .mm-vertical .mm-panel {
   display: none;
   padding: 10px 0 10px 10px;
}

.mm-vertical .mm-listview .mm-panel .mm-listview>li:last-child:after,
.mm-listview .mm-vertical .mm-panel .mm-listview>li:last-child:after {
   border-color: transparent;
}

.mm-vertical li.mm-opened>.mm-panel,
li.mm-vertical.mm-opened>.mm-panel {
   display: block;
}

/* .mm-listview ul */
.mm-listview ul {
   background: #fefefe;
}

.mm-listview,
.mm-listview>li {
   list-style: none;
   display: block;
   padding: 0;
   margin: 0;
}

.mm-listview {
   font: inherit;
   font-size: 11px;
   line-height: 20px;
   letter-spacing: 1px;
}

.mm-listview a,
.mm-listview a:hover {
   text-decoration: none;
}

.mm-listview>li {
   position: relative;
   background: #fefefe;
}

.mm-listview>li,
.mm-listview>li:after,
.mm-listview>li .mm-next,
.mm-listview>li .mm-next:before {
   border-color: inherit;
   border-color: #eee;
}

.mm-listview>li>a,
.mm-listview>li>span.block {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   color: inherit;
   display: block;
   padding: 0 10px 0 30px;
   margin: 0;
   font-size: 12px;
   line-height: 50px;
}

.mm-listview>li>a.en {
   font-size: 13px;
   font-family: 'Catamaran', sans-serif;
   font-weight: 600;
   letter-spacing: 2.5px;
}

.mm-listview>li>a.home {
   position: relative;
   z-index: 1;
   padding: 0 10px 0 45px;
}

.mm-listview>li>a.home:before {
   position: absolute;
   top: 3px;
   left: 20px;
   bottom: 0;
   width: 20px;
   font-size: 20px;
   text-align: left;
   font-family: 'FontAwesome';
   content: "\f140";
   font-weight: normal;
   line-height: 45px;
   color: #666666;
}

.mm-listview>li>a.calendarArea,
.mm-listview>li>a.contact,
.mm-listview>li>a.tel {
   position: relative;
   z-index: 1;
   padding: 0 10px 0 75px;
   font-size: 12px;
   letter-spacing: 2px;
}

.mm-listview>li>a.calendarArea span.calendar {
   position: absolute;
   top: 8px;
   left: 30px;
   bottom: 8px;
   width: 35px;
   border: #333 1px dotted;
   border-top: #333 double;
   z-index: 2;
   text-align: center;
}

/* .calendarArea p */
.mm-listview>li>a.calendarArea span.calendar p {
   color: #111;
   font-family: 'Catamaran', sans-serif;
   font-weight: 800;
   line-height: 0;
}

.mm-listview>li>a.calendarArea span.calendar p.month {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   line-height: 20px;
   font-size: 9px;
   text-transform: uppercase;
}

.mm-listview>li>a.calendarArea span.calendar p.day {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0px;
   line-height: 20px;
   font-size: 10px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   letter-spacing: 0.5px;
}

.mm-listview>li>a.contact:before {
   position: absolute;
   top: 0;
   left: 30px;
   bottom: 0;
   width: 35px;
   font-size: 20px;
   text-align: center;
   font-family: 'FontAwesome';
   content: "\f003";
   font-weight: normal;
}

/*.mm-listview > li > a.tel:before{ position:absolute; top:0; left:30px; bottom:0; width:35px; content: ""; background:url(../images/telIconSp.png) center center no-repeat; background-size:20px 20px;}*/
.mm-listview>li>a.tel:before {
   position: absolute;
   top: 0;
   left: 30px;
   bottom: 0;
   width: 35px;
   font-size: 24px;
   text-align: center;
   font-family: 'FontAwesome';
   content: "\f095";
   font-weight: normal;
}

.mm-listview>li>span.block {
   font-size: 13px;
   font-family: 'Catamaran', sans-serif;
   font-weight: 600;
   letter-spacing: 2.5px;
}

.mm-listview>li>span.block b {
   font-family: 'Open Sans';
   font-size: 0.9em;
   font-weight: 500;
   vertical-align: 0;
}

.mm-listview>li:not(.mm-divider):after {
   content: '';
   border-bottom-width: 1px;
   border-bottom-style: solid;
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
}

.mm-listview>li:not(.mm-divider):after {
   left: 20px;
   left: 0;
}

/* .bgGray */
.mm-listview>li>.bgGray {
   background: #fafafa;
}

/* .mm-next */
.mm-listview .mm-next {
   background: rgba(3, 2, 1, 0);
   width: 50px;
   padding: 0;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 2;
}

.mm-listview .mm-next:before {
   content: '';
   border-left-width: 1px;
   border-left-style: solid;
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}

.mm-listview .mm-next+a,
.mm-listview .mm-next+span {
   margin-right: 50px;
}

.mm-listview .mm-next.mm-fullsubopen {
   width: 100%;
}

.mm-listview .mm-next.mm-fullsubopen:before {
   border-left: none;
}

.mm-listview .mm-next.mm-fullsubopen+a,
.mm-listview .mm-next.mm-fullsubopen+span {
   padding-right: 50px;
   margin-right: 0;
}

.mm-panels>.mm-panel>.mm-listview {
   margin: 20px -20px;
}

.mm-panels>.mm-panel>.mm-listview:first-child,
.mm-panels>.mm-panel>.mm-navbar+.mm-listview {
   margin-top: -20px;
}

/* .mm-inset */
.mm-listview .mm-inset {
   list-style: none;
   padding: 0;
   margin: 0;
}

.mm-listview .mm-inset>li {
   padding: 0;
   position: relative;
   z-index: 1;
}

.mm-listview .mm-inset>li:after {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 0;
   content: "";
   border-top: #ededed 1px dashed;
   z-index: -1;
}

.mm-listview .mm-inset>li>a {
   display: block;
   padding: 0 10px 0 50px;
   font-size: 12px;
   line-height: 45px;
   letter-spacing: 2px;
   position: relative;
}

.mm-listview .mm-inset>li>a:before {
   position: absolute;
   top: 40%;
   left: 30px;
   width: 7px;
   height: 0;
   content: "";
   border-top: #999999 7px solid;
}

/* .SNS */
.mm-listview .mm-inset>li.youtubeIcon>a,
.mm-listview .mm-inset>li.facebookIcon>a,
.mm-listview .mm-inset>li.pinterestIcon>a,
.mm-listview .mm-inset>li.instagramIcon>a,
.mm-listview .mm-inset>li.blogIcon>a {
   font-size: 12px;
   font-family: 'Catamaran', sans-serif;
   font-weight: 300;
   letter-spacing: 2px;
   background: #fafafa;
   line-height: 40px;
}

.mm-listview .mm-inset>li.youtubeIcon>a:before,
.mm-listview .mm-inset>li.facebookIcon>a:before,
.mm-listview .mm-inset>li.pinterestIcon>a:before,
.mm-listview .mm-inset>li.instagramIcon>a:before,
.mm-listview .mm-inset>li.blogIcon>a:before {
   position: static;
   font-size: 18px;
   width: 20px;
   height: auto;
   margin-right: 5px;
   display: inline-block;
   border-top: none;
   font-family: 'FontAwesome';
   font-weight: normal;
   text-align: center;
}

.mm-listview .mm-inset>li.youtubeIcon>a:before {
   font-size: 15px;
   content: "\f167 "
}

.mm-listview .mm-inset>li.facebookIcon>a:before {
   content: "\f09a"
}

.mm-listview .mm-inset>li.pinterestIcon>a:before {
   content: "\f231 "
}

.mm-listview .mm-inset>li.instagramIcon>a:before {
   content: "\f16d"
}

.mm-listview .mm-inset>li.blogIcon>a:before {
   font-size: 13px;
   content: "\f044"
}

.mm-listview .mm-divider {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-size: 10px;
   text-transform: uppercase;
   text-indent: 20px;
   line-height: 25px;
}

.mm-listview .mm-spacer {
   padding-top: 40px;
}

.mm-listview .mm-spacer>.mm-next {
   top: 40px;
}

.mm-listview .mm-spacer.mm-divider {
   padding-top: 25px;
}

.mm-prev:before,
.mm-next:after,
.mm-arrow:after {
   content: '';
   border: 1px solid transparent;
   display: inline-block;
   width: 7px;
   height: 7px;
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.mm-prev:before {
   border-right: none;
   border-bottom: none;
   left: 23px;
}

.mm-next:after,
.mm-arrow:after {
   border-top: none;
   border-left: none;
   right: 23px;
}

/* .mm-menu */
.mm-menu {
   background: #fefefe;
   border-color: #eee;
   color: #111;
   border-right: #ededed 1px solid;
   -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.mm-menu .mm-navbar>*,
.mm-menu .mm-navbar a {
   color: rgba(0, 0, 0, 0.3);
   color: #b09d7c;
   font-size: 13px;
   letter-spacing: 2px;
}

.mm-menu .mm-navbar .mm-btn:before,
.mm-menu .mm-navbar .mm-btn:after {
   border-color: rgba(0, 0, 0, 0.3);
}

.mm-menu .mm-listview {
   border-color: rgba(0, 0, 0, 0.1);
}

.mm-menu .mm-listview>li .mm-next:after,
.mm-menu .mm-listview>li .mm-arrow:after {
   border-color: rgba(0, 0, 0, 0.3);
}

.mm-menu .mm-listview>li a:not(.mm-next) {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
   tap-highlight-color: rgba(255, 255, 255, 0.5);
}

.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next),
.mm-menu .mm-listview>li.mm-selected>span {
   background: rgba(255, 255, 255, 0.5);
}

.mm-menu.mm-vertical .mm-listview>li.mm-opened>a.mm-next,
.mm-menu.mm-vertical .mm-listview>li.mm-opened>.mm-panel,
.mm-menu .mm-listview>li.mm-opened.mm-vertical>a.mm-next,
.mm-menu .mm-listview>li.mm-opened.mm-vertical>.mm-panel {
   background: rgba(0, 0, 0, 0.05);
}

.mm-menu .mm-divider {
   background: rgba(0, 0, 0, 0.05);
}

/* jQuery.mmenu offcanvas addon CSS */
.mm-page {
   box-sizing: border-box;
   position: relative;
}

.mm-slideout {
   -webkit-transition: -webkit-transform 0.4s ease;
   -ms-transition: -ms-transform 0.4s ease;
   transition: transform 0.4s ease;
}

html.mm-opened {
   overflow-x: hidden;
   position: relative;
}

html.mm-blocking {
   overflow: hidden;
}

html.mm-blocking body {
   overflow: hidden;
}

html.mm-background .mm-page {
   background: inherit;
}

#mm-blocker {
   background: rgba(3, 2, 1, 0);
   display: none;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999;
}

html.mm-blocking #mm-blocker {
   display: block;
}

.mm-menu.mm-offcanvas {
   display: none;
   position: fixed;
}

.mm-menu.mm-current {
   display: block;
}

.mm-menu {
   width: 100%;
   min-width: 140px;
   max-width: 440px;
}

html.mm-opening .mm-slideout {
   -webkit-transform: translate(80%, 0);
   -moz-transform: translate(80%, 0);
   -ms-transform: translate(80%, 0);
   -o-transform: translate(80%, 0);
   transform: translate(80%, 0);
}

@media all and (max-width: 175px) {
   html.mm-opening .mm-slideout {
      -webkit-transform: translate(140px, 0);
      -moz-transform: translate(140px, 0);
      -ms-transform: translate(140px, 0);
      -o-transform: translate(140px, 0);
      transform: translate(140px, 0);
   }
}

@media all and (min-width: 550px) {
   html.mm-opening .mm-slideout {
      -webkit-transform: translate(440px, 0);
      -moz-transform: translate(440px, 0);
      -ms-transform: translate(440px, 0);
      -o-transform: translate(440px, 0);
      transform: translate(440px, 0);
   }
}

/* jQuery.mmenu autoHeight addon CSS */
.mm-menu.mm-autoheight {
   max-height: 80%;
}

.mm-menu.mm-autoheight.mm-fullscreen {
   max-height: 100%;
}

.mm-menu.mm-measureheight>.mm-panels>.mm-panel {
   bottom: auto !important;
   height: auto !important;
}

/* jQuery.mmenu counters addon CSS */
em.mm-counter {
   font: inherit;
   font-size: 14px;
   font-style: normal;
   text-indent: 0;
   line-height: 20px;
   display: block;
   margin-top: -10px;
   position: absolute;
   right: 45px;
   top: 50%;
}

em.mm-counter {
   font-size: 12px;
   letter-spacing: 0;
}

em.mm-counter+a.mm-next {
   width: 90px;
}

em.mm-counter+a.mm-next+a,
em.mm-counter+a.mm-next+span {
   margin-right: 90px;
}

em.mm-counter+a.mm-fullsubopen {
   padding-left: 0;
}

.mm-vertical>.mm-counter {
   top: 12px;
   margin-top: 0;
}

.mm-vertical.mm-spacer>.mm-counter {
   margin-top: 40px;
}

.mm-nosubresults>.mm-counter {
   display: none;
}

.mm-menu em.mm-counter {
   color: rgba(0, 0, 0, 0.3);
   color: #111;
}

/* jQuery.mmenu dividers addon CSS */
.mm-divider>span {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding: 0;
   line-height: 25px;
}

.mm-divider.mm-opened a.mm-next:after {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.mm-collapsed:not(.mm-uncollapsed) {
   display: none;
}

.mm-fixeddivider {
   background: inherit;
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.mm-fixeddivider:after {
   content: none !important;
   display: none !important;
}

.mm-hasdividers .mm-fixeddivider {
   display: block;
}

.mm-menu .mm-fixeddivider span {
   background: rgba(0, 0, 0, 0.05);
}

/*
	jQuery.mmenu dragOpen addon CSS
*/
html.mm-opened.mm-dragging .mm-menu,
html.mm-opened.mm-dragging .mm-slideout {
   -webkit-transition-duration: 0s;
   -moz-transition-duration: 0s;
   -ms-transition-duration: 0s;
   -o-transition-duration: 0s;
   transition-duration: 0s;
}

/*
	jQuery.mmenu iconpanels addon CSS
*/
.mm-iconpanel .mm-panel {
   -webkit-transition-property: -webkit-transform, left;
   -moz-transition-property: -moz-transform, left;
   -ms-transition-property: -ms-transform, left;
   -o-transition-property: -o-transform, left;
   transition-property: transform, left;
}

.mm-iconpanel .mm-panel.mm-opened {
   border-left: 1px solid;
   border-color: inherit;
}

.mm-iconpanel .mm-panel.mm-subopened {
   overflow-y: hidden;
   left: -40px;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.mm-iconpanel .mm-panel.mm-iconpanel-0 {
   left: 0px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-1 {
   left: 40px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-2 {
   left: 80px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-3 {
   left: 120px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-4 {
   left: 160px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-5 {
   left: 200px;
}

.mm-iconpanel .mm-panel.mm-iconpanel-6 {
   left: 240px;
}

.mm-subblocker {
   background: inherit;
   opacity: 0;
   display: block;
   -webkit-transition: opacity 0.4s ease;
   -moz-transition: opacity 0.4s ease;
   -ms-transition: opacity 0.4s ease;
   -o-transition: opacity 0.4s ease;
   transition: opacity 0.4s ease;
}

.mm-subopened .mm-subblocker {
   opacity: 0.6;
   position: absolute;
   top: 0;
   right: 0;
   bottom: -100000px;
   left: 0;
   z-index: 3;
}

/*
	jQuery.mmenu borderstyle extension CSS
*/
.mm-menu.mm-border-none .mm-listview>li:after,
.mm-listview.mm-border-none>li:after {
   content: none;
}

.mm-menu.mm-border-full .mm-listview>li:after,
.mm-listview.mm-border-full>li:after {
   left: 0 !important;
}

.mm-menu.mm-border-offset .mm-listview>li:after,
.mm-listview.mm-border-offset>li:after {
   right: 20px;
}

/*
	jQuery.mmenu multiline extension CSS
*/
.mm-menu.mm-multiline .mm-listview>li>a,
.mm-menu.mm-multiline .mm-listview>li>span,
.mm-listview.mm-multiline>li .mm-listview>li.mm-multiline>a,
.mm-listview.mm-multiline>li .mm-listview>li.mm-multiline>span {
   text-overflow: clip;
   white-space: normal;
}

/*
	jQuery.mmenu pagedim extension CSS
*/
html.mm-pagedim #mm-blocker,
html.mm-pagedim-white #mm-blocker,
html.mm-pagedim-black #mm-blocker {
   opacity: 0;
}

html.mm-pagedim.mm-opening #mm-blocker,
html.mm-pagedim-white.mm-opening #mm-blocker,
html.mm-pagedim-black.mm-opening #mm-blocker {
   opacity: 0.3;
   transition: opacity 0.4s ease 0.4s;
}

html.mm-pagedim #mm-blocker {
   background: inherit;
}

html.mm-pagedim-white #mm-blocker {
   background: #fff;
}

html.mm-pagedim-black #mm-blocker {
   background: #000;
}

/*
	jQuery.mmenu position extension CSS
*/
.mm-menu.mm-top,
.mm-menu.mm-bottom {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
}

.mm-menu.mm-right {
   left: auto;
   right: 0;
}

.mm-menu.mm-bottom {
   top: auto;
   bottom: 0;
}

html.mm-right.mm-opening .mm-slideout {
   -webkit-transform: translate(-80%, 0);
   -moz-transform: translate(-80%, 0);
   -ms-transform: translate(-80%, 0);
   -o-transform: translate(-80%, 0);
   transform: translate(-80%, 0);
}

@media all and (max-width: 175px) {
   html.mm-right.mm-opening .mm-slideout {
      -webkit-transform: translate(-140px, 0);
      -moz-transform: translate(-140px, 0);
      -ms-transform: translate(-140px, 0);
      -o-transform: translate(-140px, 0);
      transform: translate(-140px, 0);
   }
}

@media all and (min-width: 550px) {
   html.mm-right.mm-opening .mm-slideout {
      -webkit-transform: translate(-440px, 0);
      -moz-transform: translate(-440px, 0);
      -ms-transform: translate(-440px, 0);
      -o-transform: translate(-440px, 0);
      transform: translate(-440px, 0);
   }
}

/*
	jQuery.mmenu z-position extension CSS
*/
html.mm-front .mm-slideout {
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -ms-transform: none !important;
   -o-transform: none !important;
   transform: none !important;
   z-index: 0 !important;
}

.mm-menu.mm-front {
   z-index: 1;
}

.mm-menu.mm-front,
.mm-menu.mm-next {
   -webkit-transition: -webkit-transform 0.4s ease;
   -ms-transition: -ms-transform 0.4s ease;
   transition: transform 0.4s ease;
   -webkit-transform: translate3d(-100%, 0, 0);
   -moz-transform: translate3d(-100%, 0, 0);
   -ms-transform: translate3d(-100%, 0, 0);
   -o-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
}

.mm-menu.mm-front.mm-right,
.mm-menu.mm-next.mm-right {
   -webkit-transform: translate3d(100%, 0, 0);
   -moz-transform: translate3d(100%, 0, 0);
   -ms-transform: translate3d(100%, 0, 0);
   -o-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
}

html.mm-opening .mm-menu.mm-front,
html.mm-opening .mm-menu.mm-next {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}





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

   #footer

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

#footer {
   padding-top: 20px;
   background: url(../images/noise.png) repeat #f5f5f5;
   /* border-top: #eee 1px solid; */
   background: #323030;
   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: 0px;
   }
}



/* ----- .inner ----- */
#footer .inner {
   padding: 10px 0px 10px;
   margin: 0 5%;
   /* background:#fefefe; */
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}

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

/* ----- .infoBox ----- */
#footer .infoBox {
   display: inline-block;
   margin: 0;
   width: 48%;
   padding: 5px 2.5%;
   position: relative;
   z-index: 0;
   /* float: left; */
}

#footer .infoBox:after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 0;
   content: "";
   border-right: #666666 1px solid;
   z-index: 0;
}

#footer .infoBox:last-child:after {
   display: none;
}

#footer .infoBox {
   color: #b7b7b7;
}


#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: 0px;
   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: 123px;
   height: 59px;
   background: url(../images/footer_logo.svg) center center no-repeat;
   background-size: 100px 59px;
   /* margin-top:-20px; */
   margin: 0px auto 0;
}

#footer .aboutBox p {
   font-size: 15px;
   text-indent: -0.5em;
   margin-top: -0.5em;
}

#footer .aboutBox .txtArea img {
   max-width: 250px;
}


/* .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: #7eccd6;
   background: #f0fafe;
   border: #7eccd6 1px solid;
   border: #f0fafe 1px solid;
}

/* .contactBox */
#footer .contactBox .imgArea {
   float: left;
   width: 30%;
   display: none;
}

#footer .contactBox .txtArea {
   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;
   color: #fff;
}

/* .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: #b7b7b7;
   /* 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;
   color: #fff;
}




/* .mail */
#footer .contactBox ul li .mail {
   color: #fff;
   border: #666666 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: #999999; */
      width: 90%;
   }

   /* ----- .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; */
      text-align: center;
   }

   #footer .infoBox:after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0;
      content: "";
      border-right: #ededed 1px solid;
      border-right: none;
      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: #fff;
      border: #ddd 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: #fff;
      border: #ddd 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%;
      width: 90%;
   }

   /* ----- .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-bottom: #666666 1px solid;
   /* background:#fefefe; */
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 1200px;
   margin: 10px auto;
}

/* ----- .sitemapArea ----- */
#footer .sitemapArea {
   font-size: 0;
}

/* .sitemapBox */
#footer .sitemapBox {
   display: inline-block;
   margin: 0;
   width: 25%;
   position: relative;
   z-index: 0;
}

#footer .sitemapBox:after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 0;
   content: "";
   border-right: #666666 1px solid;
   z-index: 0;
}

#footer .sitemapBox:last-child:after {
   display: none;
}

/* ul */
#footer .sitemapBox ul {
   padding: 0 10%;
   display: inline-table;
   width: 100%;
}

#footer .sitemapBox ul li {
   display: block;
   margin: 0;
   padding: 0;
   font-size: 11px;
   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;
   font-size: 13px;
   color: #b7b7b7;
}

#footer .sitemapBox ul li a:before {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   margin: auto 0;
   content: "";
   width: 5px;
   height: 1px;
   background: #f8b500;
   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: #666666;
}

#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: #FFC107;
      /* background: #000; */
   }

   #footer .sitemapBox ul li a:after {
      top: 2px;
      bottom: 2px;
   }
}

@media only screen and (max-width: 945px) {
   #footer .sitemapBox {
      width: 50%;
      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: #928d8d;
   }

   #footer .sitemapBox ul li a:after {
      display: none;
   }
}

@media only screen and (max-width: 800px) {

   /* ----- .inner ----- */
   #footer .inner2 {
      padding: 25px 3% 45px;
      margin: 0 2%;
      /* background:#f5f5f5; */
      /* background: #000000; */
      /* border-top: #000000 1px solid; */
      width: 96%;
   }

   /* ----- .sitemapArea ----- */
   #footer .sitemapArea {
      font-size: 0;
   }

   /* .sitemapBox */
   #footer .sitemapBox {
      display: block;
      margin: 0;
      width: 100%;
      float: left;
   }

   #footer .sitemapBox:after {
      display: none;
   }

   /* ul */
   #footer .sitemapBox ul {
      color: #9E9E9E;
      margin: 20px 0 0;
      padding: 0;
      font-size: 0;
      text-align: left;
      position: relative;
      display: inline-block;
   }

   #footer .sitemapBox ul li {
      display: inline-block;
      margin: 0;
      width: 50%;
      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: #262525;
      /* border-bottom: 1px solid #fff; */
   }

   #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 li a:hover {
      color: #f8b500;
   }

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

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

   #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: 650px) {

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

@media only screen and (max-width: 414px) {

   /* ----- .inner ----- */
   #footer .inner2 {
      margin: 0 2%;
      width: 96%;
   }
}


@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: 20px 0;
   margin: 0 5%;
   /* background: #fefefe; */
   border-top: #666666 1px solid;
   text-align: center;
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}

/* ul.sns */
#footer .inner3 ul.sns {
   font-size: 15px;
   text-align: center;
   padding: 0 15%;
}

#footer .inner3 ul.sns li {
   display: inline-block;
   width: 4%;
   position: relative;
   z-index: 2;
   line-height: 30px;
   font-size: 15px;
}

#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: 15px;
   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: 18px;
   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: #7eccd6;
}

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

@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%;
      width: 90%;
   }

   /* 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: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
   }

   #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.copyright {
   color: #fff;
   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: #666666 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);
   }
}

#c-online-btn {
   position: fixed;
   z-index: 50;
   bottom: 100px;
   right: 20px;
   opacity: 0;
}

#c-online-btn a {
   transition-property: all;
   transition-duration: .3s;
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

#c-online-btn a img {
   width: 130px;
   background:
}

#c-online-btn img {
   width: 130px;

}

#c-online-btn a:hover {
   opacity: 0.7;
}





.l-page-top>a {
   position: relative;
   text-align: center;
   padding-top: 15px;
   /* -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,.16); */
   /* box-shadow: 0 3px 6px 0 rgba(0,0,0,.16); */
   border-radius: 4px;
   overflow: hidden;
}


.l-page-top>a,
.l-page-top>a:before {
   display: block;
   width: 60px;
   height: 60px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: fixed;
   bottom: 30px;
   z-index: 9999;
   right: 10px;
}

.l-page-top>a:before {
   border-radius: 4px;
   /*     border: 1px solid #383b56; */
   z-index: -1;
   -webkit-transition: background-color .3s cubic-bezier(.215, .61, .355, 1) 0s;
   transition: background-color .3s cubic-bezier(.215, .61, .355, 1) 0s;
   background-color: #000000;
   color: #fff;
}



.l-page-top>a:after,
.l-page-top>a:before {
   content: "\f106";
   font-family: 'FontAwesome';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   font-size: 30px;
   line-height: 50px;
}

.l-page-top>a:after {
   width: 100%;
   height: 100%;
   display: block;
   border-radius: 4px;
   border: 1px solid #f8b500;
   color: #000;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 0;
   -webkit-transition: -webkit-transform .3s cubic-bezier(.38, .33, .23, .99) 0s;
   transition: -webkit-transform .3s cubic-bezier(.38, .33, .23, .99) 0s;
   transition: transform .3s cubic-bezier(.38, .33, .23, .99) 0s;
   transition: transform .3s cubic-bezier(.38, .33, .23, .99) 0s, -webkit-transform .3s cubic-bezier(.38, .33, .23, .99) 0s;
   background-color: #f8b500;
   -webkit-transform: translate3d(0, 101%, 0);
   transform: translate3d(0, 101%, 0);
}



.l-page-top>a:hover {
   -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .24);
   box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .24)
}



.l-page-top>a:hover:after {
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   border-radius: 0
}



.l-page-top>a:hover svg {
   fill: #383b56;
   -webkit-transform: translate3d(0, -5px, 0);
   transform: translate3d(0, -5px, 0)
}



.l-page-top svg {
   position: relative;
   z-index: 1;
   fill: #f8b500;
   -webkit-transition: all .4s cubic-bezier(.215, .61, .355, 1) 0s;
   transition: all .4s cubic-bezier(.215, .61, .355, 1) 0s
}


.l-page-top.is-active {
   opacity: 1;
   visibility: visible
}




/* レッスン一覧から選ぶ 下部ボタン **************************************************/

.psa-lesson-directory {
   background: #f4f5f7;
   padding: 50px 0;
   font-family: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
}

.psa-lesson-inner {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 24px;
}

@media screen and (max-width: 768px) {
   .psa-lesson-directory {
      padding: 32px 0;
   }

   .psa-lesson-inner {
      padding: 0 16px;
   }
}

.psa-lesson-heading {
   text-align: center;
   margin-bottom: 32px;
}

.psa-lesson-heading h2 {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
}

.psa-lesson-heading p {
   margin-top: 10px;
   color: #6c7a86;
}

.psa-lesson-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px;
}

.psa-lesson-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 12px 25px rgba(9, 30, 66, 0.12);
   border: 1px solid rgba(16, 72, 114, 0.08);
   text-decoration: none;
   color: inherit;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.psa-lesson-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 32px rgba(9, 30, 66, 0.2);
}

.psa-lesson-body {
   padding: 22px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   flex: 1;
}

.psa-lesson-category {
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   color: #768fad;
}

.psa-lesson-title {
   font-size: 1.2rem;
   font-weight: 600;
   margin: 0;
   color: #0b2b45;
}

.psa-lesson-meta {
   font-size: 0.92rem;
   color: #2a6a9b;
   margin: 0;
}

.psa-lesson-desc {
   font-size: 0.95rem;
   line-height: 1.6;
   color: #4f5d6b;
   margin: 0;
   flex: 1;
}

.psa-lesson-feature {
   display: inline-flex;
   gap: 6px;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
}

.psa-lesson-feature li {
   font-size: 0.82rem;
   color: #0a3760;
   background: rgba(10, 55, 96, 0.08);
   padding: 4px 10px;
   border-radius: 999px;
}

.psa-lesson-btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 6px;
   background: linear-gradient(135deg, #005d9c, #00a5d9);
   color: #fff;
   text-decoration: none;
   border-radius: 999px;
   padding: 12px 20px;
   font-weight: 600;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.psa-lesson-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(0, 165, 217, 0.3);
}

@media (max-width: 600px) {
   .psa-lesson-heading h2 {
      font-size: 1.4rem;
   }
}

/* Footer SNSアイコン（画像版） */
#footer .inner3 ul.sns.footer-sns-icons {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin: 0;
   padding: 0;
}

#footer .inner3 ul.sns.footer-sns-icons li {
   width: auto;
   margin: 0;
   display: inline-flex;
   justify-content: center;
}

#footer .inner3 ul.sns.footer-sns-icons li a {
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   width: auto;
   height: auto;
   line-height: 1;
   padding: 0;
}

#footer .inner3 ul.sns.footer-sns-icons li a .footer-sns-icon {
   width: auto;
   max-width: 36px;
   height: auto;
   display: block;
}

@media only screen and (max-width: 738px) {
   #footer .inner3 ul.sns.footer-sns-icons {
      text-align: center;
      justify-content: center;
      margin: 0;
   }

   #footer .inner3 ul.sns.footer-sns-icons li {
      width: auto;
      margin: 0 12px;
   }

   #footer .inner3 ul.sns.footer-sns-icons li a {
      background: transparent;
      height: auto;
      line-height: 1;
   }
}

@media only screen and (max-width: 414px) {
   #footer .inner3 ul.sns.footer-sns-icons li {
      width: auto;
      margin: 0 10px;
   }

   #footer .inner3 ul.sns.footer-sns-icons li a {
      background: transparent;
      height: auto;
      line-height: 1;
      border-radius: 0;
   }
}