.pdt0 { padding-top:0px !important; }
.pdb0 { padding-bottom:0px !important; }

/* common */
.pdtb { padding-top:100px; padding-bottom:100px; }
.inbox { max-width:1900px; margin:0px auto; padding-left:2.5%; padding-right:2.5%; }
.inbox:after { display:block; clear:both; content:''; }

/* header */
#header { position:relative; width:100%; background-color:#FFF; }
#header .inbox { height:80px; line-height:80px; }
#header h1 { display:inline-block; height:100%; }
#header h1 a { display:block; width:318px; height:100%; background:url('../images/common/logo_full.png') left center no-repeat; background-size:contain; font-size:0px; text-indent:-9999px; overflow:hidden; transition:0.3s; }
#header #nav { float:right; height:100%; }
#header #nav ul { font-size:0px; }
#header #nav ul:after { display:block; clear:both; content:''; }
#header #nav li { display:inline-block; }
#header #nav li a { position:relative; display:block; padding-left:20px; padding-right:20px; font-size:15px; text-transform:uppercase; transition:all 0.5s; -ms-transition:all 0.5s; }
#header #nav li a:after { position:absolute; bottom:0; left:0; right:0; display:block; margin:auto; width:0%; color:transparent; background-color:#333; height:2px; text-align:left; margin:0; opacity:0; content:'';}
#header #nav li a:hover { color:#fff; z-index:1; }
#header #nav li a:hover:after { -webkit-animation:fill 0.3s forwards; -moz-animation:fill 0.3s forwards; -ms-animation:fill 0.3s forwards; animation:fill 0.3s forwards; opacity:1; z-index:-10; }
#header #nav li.on a { color:#FFF; background:#1790f0; }
#header #nav li.on a:hover:after { display:none; }

#header.fix_header { position:fixed; width:100%; left:0px; top:0px; z-index:999999; background-color:#FFF; }
#header.fix_header .inbox { height:60px; line-height:60px; }
#header.fix_header h1 a { width:200px; transition:0.3s; }
#header.fix_header .left-side { top:60px; }

@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #1790f0;
  }
}
@-moz-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #1790f0;
  }
}
@-ms-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #1790f0;
  }
}
@-o-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #1790f0;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #1790f0;
  }
}

/* footer */
#footer { background-color:#333; }
#footer .inbox { padding-top:40px; padding-bottom:70px; }
#footer p { padding:1px 0px; font-size:14px; color:#666; text-align:center; word-break:keep-all; line-height:1.5; }
#footer p strong { font-weight:600; }
#footer p span.bar { display:inline-block; width:1px; height:13px; background-color:#505050; vertical-align:-1px; margin:0px 10px; }

/* TOP button */
#top { display:none; position:fixed; right:40px; bottom:60px; z-index:9999; }
#top a { position:relative; display:block; padding-bottom:10px; font-size:0px; text-indent:-9999px; line-height:0px; box-sizing:content-box; }
#top a span { display:block; width:50px; height:28px; background:url('../images/common/top_arrow.png') center top no-repeat; }
#top a:after { position:absolute; left:50%; bottom:0px; margin-left:-13px; display:block; width:26px; height:1px; background-color:#999; content:''; transition:0.2s; }
#top a:hover:after { background-color:#1790f0; transition:0.2s; }

/* mobile header */
button.btn-nav{background:0 0;border:none}
button.btn-nav::-moz-focus-inner{border:0}:focus{outline:0}::-moz-focus-inner{border:0}
.left-side {width:100%;height:100%;position:fixed;top:80px;background:#1790f0;overflow:auto;z-index:1;right:-100%}
.animated, .btn-nav{z-index:9999}
.effects-list {margin:80px auto 0;text-align:center;padding-bottom:150px;}
.effects-list li { line-height:1; margin:10px 0px; }
.effects-list li a { display:block; padding:12px 0; font-size:18px; color:#FFF; text-transform:uppercase; }
.btn-nav,.middle{margin:0 auto}
.btn-nav{display:none; width:30px; position:absolute;right:0px;top:0px;height:100%;padding:0px 30px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease; box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box; }
.btn-nav:focus{outline:0}
.btn-nav:hover{cursor:pointer}
.bar {width:30px;height:2px;background:#444;margin:8px auto;-webkit-transition:all .7s ease;-moz-transition:all .7s ease;-ms-transition:all .7s ease;-o-transition:all .7s ease;transition:all .7s ease}
.animated .bar{z-index:9999;background-color:#444}
.animated .arrow-top-r{margin-right:-3px;-webkit-transform:rotateZ(45deg) translateY(6px);-moz-transform:rotateZ(45deg) translateY(6px);-ms-transform:rotateZ(45deg) translateY(6px);-o-transform:rotateZ(45deg) translateY(6px);transform:rotateZ(45deg) translateY(6px);width:18px}
.animated .arrow-middle-r{-webkit-transform:translateX(-4px);-moz-transform:translateX(-4px);-ms-transform:translateX(-4px);-o-transform:translateX(-4px);transform:translateX(-4px)}
.animated .arrow-bottom-r{margin-right:-3px;-webkit-transform:rotateZ(-45deg) translateY(-6px);-moz-transform:rotateZ(-45deg) translateY(-6px);-ms-transform:rotateZ(-45deg) translateY(-6px);-o-transform:rotateZ(-45deg) translateY(-6px);transform:rotateZ(-45deg) translateY(-6px);width:18px}
.showNav{-webkit-animation:showNav .5s ease forwards;-moz-animation:showNav .5s ease forwards;-o-animation:showNav .5s ease forwards;animation:showNav .5s ease forwards;z-index:99999}
.hideNav{-webkit-animation:hideNav 1s ease forwards;-moz-animation:hideNav 1s ease forwards;-o-animation:hideNav 1s ease forwards;animation:hideNav 1s ease forwards}
.hidden{display:none}
@keyframes showNav{from{right:-100%}to{right:0}}
@-webkit-keyframes showNav{from{right:-100%}to{right:0}}
@-moz-keyframes showNav{from{right:-100%}to{right:0}}
@-o-keyframes showNav{from{right:-100%}to{right:0}}
@keyframes hideNav{from{right:0}to{right:-100%}}
@-webkit-keyframes hideNav{from{right:0}to{right:-100%}}
@-moz-keyframes hideNav{from{right:0}to{right:-100%}}
@-o-keyframes hideNav{from{right:0}to{right:-100%}}


.topBtn_effect {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.topBtn_effect:hover, .topBtn_effect:focus, .topBtn_effect:active { -webkit-transform:translateY(-8px); transform:translateY(-8px); }

.arrow_next_effect {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.arrow_next_effect:hover, .arrow_next_effect:focus, .arrow_next_effect:active {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
}
.arrow_prev_effect {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.arrow_prev_effect:hover, .arrow_prev_effect:focus, .arrow_prev_effect:active { -webkit-transform: translateX(-3px); transform: translateX(-3px); }

.snsBtn_effect {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.snsBtn_effect:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #444;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.snsBtn_effect:hover:before, .snsBtn_effect:active:before { -webkit-transform:scaleY(1); transform:scaleY(1); }