@charset "utf-8";
/* CSS Document */

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

 np1

******************************************************************************/
body {
 background: #000;
 color: #FFF;
}
#container.np {
 font-size: 112.5%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 #container.np {
  font-size: 100%;
  line-height: 1.75em;
 }
}

/********************************************
 section
*********************************************/
.np section {
 padding: 0 7%;
 margin: 0 auto 3em;
 max-width: 1650px;
}
@media screen and (max-width: 1070px) {
 .np section {
  padding: 0 3%;
 }
}
.np section.clm1 {
 padding: 0 17%;
}
@media screen and (max-width: 1070px) {
 .np section.clm1  {
  padding: 0 3%;
 }
}
.np section h3{
 font-size: 150%;
 line-height: 1.75em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 1070px) {
 .np section h3{
  font-size: 130%;
  line-height: 1.75em;
  margin-bottom: 0.5em;
 }
}
.np section p{
 margin-bottom: 1em;
}

.np .textWrap {
 padding-right: 5em;
}
@media screen and (max-width: 1070px) {
 .np .textWrap {
  padding: 0 3%;
 }
 .np .ph {
  padding: 0 3%;
 }
}
.np .textWrap.right {
 padding-right: 0;
 padding-left: 5em;
}
@media screen and (max-width: 1070px) {
 .np .textWrap.right {
  padding: 0 3%;
 }
}
/********************************************
 firstView
*********************************************/
#firstView {
 position: relative;
 margin-bottom: 3em;
}
#firstView .bg{
 width: 100%;
}
#firstView .lead{
 position: absolute;
 z-index: 2;
 color: #FFF;
 text-shadow: 0 0 10px #000,0 0 5px #000;
}
@media screen and (max-width: 767px) {
 #firstView .lead{
  position: static;
  color: #FFF;
  text-shadow: none;
  padding: 10px 4%;
 }
}
#firstView .top{ top:10%;}
#firstView .bottom{ bottom:40px;}
#firstView .left{ left:3%;}
#firstView .right{ right:3%;}
@media screen and (max-width: 1070px) {
 #firstView .top{ top:5%;}
 #firstView .bottom{ bottom:5%;}
}
#firstView .lead h2 {
 font-size: 150%;
 line-height: 1.75em;
}
@media screen and (max-width: 1070px) {
 #firstView .lead h2 {
  font-size: 120%;
 }
}
@media screen and (max-width: 767px) {
 #firstView .lead h2 {
  font-size: 100%;
 }
}
#firstView .lead h1 {
 font-size: 375%;
 line-height: 1em;
}
@media screen and (max-width: 1070px) {
 #firstView .lead h1 {
  font-size: 218.75%;
 }
}
@media screen and (max-width: 767px) {
 #firstView .lead h1 {
  font-size: 180%;
 }
}
/********************************************
 intro
*********************************************/
.np .intro h2{
 font-size: 200%;
 line-height: 1.45em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 1070px) {
 .np .intro h2{
  font-size: 150%;
 }
}
.np .intro p{
 margin-bottom: 1em;
}
.np .intro .phWrap {
 padding: 2em 0;
 max-width: 640px;
 margin: 0 auto;
}
/********************************************
 credit
*********************************************/
.np .credit{
 padding: 0 7% 0 56%;
 text-align: right;
}
@media screen and (max-width: 1070px) {
 .np .credit{
  padding: 0 3%;
 }
}
.np .credit .copy {
 margin-bottom: 1em;
}
.np .credit .by {
 font-size: 88%;
}
.np .credit .people {
 font-size: 77%;
}
@media screen and (max-width: 1070px) {
 .np .credit .people {
  line-height: 1.4em;
 }
}
/********************************************
 sec
*********************************************/
/*sec02*/
.np .sec02 .phWrap{
 padding-right: 5em;
 margin-top: -5%;
}
@media screen and (max-width: 1070px) {
 .np .sec02 .phWrap{
  padding-right: 0;
  margin-top: 0;
  padding: 0 3%;
 }
}
.np .sec02 .phWrap .ph{
 margin: 0 auto 1.5em;
}
@media screen and (max-width: 1070px) {}
.np .sec02 .phWrap .profile{
 font-size: 88%;
 color: #00b0f4;
 line-height: 1.5em;
}
/*sec05*/
.np .sec05 .phWrap .ph{
 max-width: 500px;
 margin-left: auto;
 margin-right: 0;
}
/*sec07*/
.np .sec07 p{
 margin-bottom: 3.5em;
}
@media screen and (max-width: 1070px) {
 .np .sec07 p{
  margin-bottom: 1em;
 }
}
/********************************************
 btnWrap
*********************************************/
.np .btnWrap {
 font-size: 88%;
 max-width: 1000px;
 margin: 0 auto 3em;
}
.np .btnWrap ul {
 padding: 0;
}
.np .btnWrap li{
 width: 48%;
}
@media screen and (max-width: 1070px) {
 .np .btnWrap li{
  width: 100%;
  margin-bottom: 1em;
 }
}
.np .btnWrap li a{
 display: block;
 box-sizing: border-box;
 padding: 1.2em 0;
 text-align: center;
 border: 1px solid #FFF;
 background: none;
 -webkit-transition:all 0.3s ease-in-out;
 transition:all 0.3s ease-in-out;
}
.np .btnWrap li a:hover{
 background: #D5001C;
 border-color: #D5001C;
}
.np .btnWrap li a.antenna {
 padding: 0;
}
.np .btnWrap li a.antenna:before{
 content: "";
 display: inline-block;
 width: 120px;
 height: 58px;
 background: url(../images/an_logo.png) no-repeat center center;
 vertical-align: middle;
 background-size: 100% auto;
}
@media screen and (max-width: 1070px) {
 .np .btnWrap li a.antenna:before{
  width: 90px;
  padding-top: 40px;
  height: auto;
 }
}



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

 @keyframes

******************************************************************************/
/* move ****************************************************/
.scrMove,
.mvMove{
 opacity: 0;
 -webkit-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 
}
.scrMove.on,
.mvMove.on{
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.8s;
 animation-duration:0.8s;
 visibility: visible !important;
}




.fromBottom.on{
 -webkit-animation-name: fromBottom;
 animation-name: fromBottom;
}
@-webkit-keyframes fromBottom {
 0% { transform: translateY(50px);}
 100% { transform: translateY(0);}
}
@keyframes fromBottom {
 0% {  transform: translateY(50px);}
 100% { transform: translateY(0);}
}

.fromLeft {
 position: relative;
}
.fromLeft:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background: #000;
 position: absolute;
 top:0;
 right: 0;
 -webkit-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 opacity: 1;
}
.fromLeft.on:after {
 width: 0%;
 right: 0;
 opacity: 0;
}
.fromLeft.on{
 -webkit-animation-name: fromLeft;
 animation-name: fromLeft;
}
@-webkit-keyframes fromLeft {
 0% { transform: translateX(-50px);}
 100% { transform: translateX(0);}
}
@keyframes fromLeft {
 0% {  transform: translateX(-50px);}
 100% { transform: translateX(0);}
}


.fromRight {
 position: relative;
}
.fromRight:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background: #000;
 position: absolute;
 top:0;
 left: 0;
 -webkit-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 opacity: 1;
}
.fromRight.on:after {
 width: 0%;
 left: 0;
 opacity: 0;
}
.fromRight.on{
 -webkit-animation-name: fromRight;
 animation-name: fromRight;
}
@-webkit-keyframes fromRight {
 0% { transform: translateX(50px);}
 100% { transform: translateX(0);}
}
@keyframes fromRight {
 0% {  transform: translateX(50px);}
 100% { transform: translateX(0);}
}