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

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

 an1

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

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

.an .textWrap {
 padding-right: 5em;
}
@media screen and (max-width: 1070px) {
 .an .textWrap {
  padding: 0 3%;
 }
 .an .ph {
  padding: 0 3%;
 }
}
.an .textWrap.right {
 padding-right: 0;
 padding-left: 5em;
}
@media screen and (max-width: 1070px) {
 .an .textWrap.right {
  padding: 0 3%;
 }
}
.an section .q{
 color: #00b0f4;
}
/********************************************
 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
*********************************************/
.an .intro h2{
 font-size: 200%;
 line-height: 1.45em;
 margin-bottom: 0.5em;
}
@media screen and (max-width: 1070px) {
 .an .intro h2{
  font-size: 150%;
 }
}
.an .intro p{
 margin-bottom: 1em;
}
/********************************************
 credit
*********************************************/
.an .credit{
 width: 100%;
 text-align: right;
 position: absolute;
 right: 0;
 bottom: 0;
}
@media screen and (max-width: 1070px) {
 .an .credit{
  position: static;
 }
}
.an .credit .copy {
 margin-bottom: 1em;
}
.an .credit .by {
 font-size: 88%;
}
.an .credit .people {
 font-size: 77%;
}
/********************************************
 sec
*********************************************/
/*sec03*/
.an .sec03 .textWrap{
 padding-top: 3em;
}
/*sec06*/
.an .sec06 .sec06_ph{
 position: absolute;
 left: 0;
 top:auto;
 padding-top: 1em;
}
.an .sec06 .sec06_ph .small{
 margin-left: 5em;
}
/*sec07*/
@media screen and (min-width: 1071px) {
 .an .sec07 .phWrap{
  padding-top: 50%;
 }
}
/*sec08*/
.an .sec08{
 padding: 0;
 max-width: 640px;
 margin: 0 auto 4em;
 box-sizing: content-box;
}
/*sec09*/
.an .sec09 .instagram a{
 color: #FFF;
 text-decoration: none;
}
.an .sec09 .instagram a span{
 vertical-align: middle;
 background-color: #000;
}
.an .sec09 .instagram a span:before{
 font-size: 40px;
}
.an .sec09 .instagram a:hover,
.an .sec09 .instagram a:hover span:before{
 color:  #d5001c;
  -webkit-transition:color 0.3s ease-in-out;
 transition:color 0.3s ease-in-out;
}
/********************************************
 btnWrap
*********************************************/
.an .btnWrap {
 font-size: 88%;
 max-width: 1000px;
 margin: 0 auto 3em;
}
.an .btnWrap ul {
 padding: 0;
}
.an .btnWrap li{
 width: 48%;
}
@media screen and (max-width: 1070px) {
 .an .btnWrap li{
  width: 100%;
  margin-bottom: 1em;
 }
}
.an .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;
}
.an .btnWrap li a:hover{
 background: #D5001C;
 border-color: #D5001C;
}
.an .btnWrap li a.newspics {
 padding: 0;
}
.an .btnWrap li a.newspics:before{
 content: "";
 display: inline-block;
 width: 110px;
 height: 58px;
 background: url(../images/np_logo.png) no-repeat center center;
 vertical-align: middle;
 background-size: 100% auto;
}
@media screen and (max-width: 1070px) {
 .an .btnWrap li a.newspics: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);}
}