@charset "UTF-8";
@import url(top_s.css);

/*base*/
ul {
	margin:0;
	padding:0;
	border:none;
}

ol {
	list-style-type:decimal;
	margin-left:-20px;
	margin-top:0;
	margin-bottom:0;
}

img {vertical-align:top;}
hr {border:1px solid #ccc; width:100%; margin:0; padding:0;}
html{height:100%;}
em {
	font-style:normal;
	font-size:85%;
}
em span {font-size:90%;}
.center{ text-align:center; }
.right{ text-align:right; float:right; }
.hidden{ visibility:hidden;}
.clear{ clear:both;}
.error{color:#F00;}

*+html body,
* html body {
	font-size:86%; /* for WinIE6,7,8 */
	height:100%;
}

*:first-child+html {
	font-size:86%; /* for WinIE7 */
	height:100%;
}

a:focus, *:focus { outline:none; }
a ,a:active ,
a:visited,
a:hover {text-decoration:none;}
a img:hover {opacity:0.8;
	filter:proid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
	filter:alpha(opacity=80);}

@font-face {
	font-family: 'font1';
	src: url('../font/ntmotoya-webfont.eot');
	src: url('../font/ntmotoya-webfont.otf') format('opentype'),
url('../font/ntmotoya-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/ntmotoya-webfont.woff') format('woff'),
url('../font/ntmotoya-webfont.ttf') format('truetype'),
url('../font/ntmotoya-webfont.svg#svgFontName') format('svg');
		 
}

@media print,screen and (min-width: 1000px){

body,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,
p,blockquote,
form,fieldset,
table,th,td,ul,
img {
	margin:0;
	padding:0;
	border:none;
	list-style:none;
	font-size:100%;
}

body {
	background:#DBE8F1 url("../img/top.jpg") no-repeat top;
	background-size: auto 730px;
	font-size:16px;
	color:#555;
	line-height:1.4em;
	font-family:"Arial",'Quicksand',"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1{
	height:730px;
	width: 50%;
	float: left;
}
h1 img{
	width: 500px;
	float: right;
	margin: 100px 50px 0 0;
}
	
h2{
	font-size: 50px;
	line-height:1.6em;
	letter-spacing:5px;
	text-align: center;
	padding:120px 0 100px 0;
	font-family: 'font1';
	width:1010px;
	margin: 0 auto;
	overflow:hidden;
	height:auto;
}

h2 icon {
	float: left;
}

h2 icon img{
	height: 80px;
}

h2 .ttl {
	float: left;
	width:830px;
	padding-left:20px;
}
	
h2 .icon01 {
	margin-left: 10px;
}
	
h2 .icon02 {
	margin-top:80px;
}

h3{
	font-size: 23px;
	margin:20px 0 10px 0;
	font-family: 'font1';
}

header {
	height: 730px;
	width:48%;
	background:url("../img/ttl.png") no-repeat;
	background-size: 510px auto;
	float:right;
}

nav{
	width: 510px;
	margin-top: 600px;
	overflow:hidden;
	height:auto;
}

nav ul{
	margin:0 20px;
}

nav li{
	float: left;
	margin:0 15px;
}

nav li img{
	height: 60px;
}
	
section.main {
	background:#0D6DB0;
	clear: both;
	color: #fff;
	overflow:hidden;
	height:auto;
	padding-bottom: 120px;
}

section.main li {
	float: left;
	width: 25%;
	line-height: 2em;
	text-align: center;
}

section.main li img {
	width:180px;
}

section.main li p {
	width:70%;
	margin: 0 auto;
}

section.app_sp {
	visibility:hidden;
	display:none;
	height:0;
}

footer{
	background:#3E3A39;
	padding: 70px 0 10px 0;
	text-align: center;
	color: #fff;
	line-height: 2em;
	font-size: 13px;
}

footer img{
	width: 270px;
	margin-bottom:30px;
}

footer .copyright{
	color: #999;
	margin-top:20px;
}
}




/* wow
-----------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}