/*
=============================
 BASIC
=============================
*/


.wrapper {
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
}
* {
	margin: 0;
	padding: 0;
}
.wrapper article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
.wrapper li {
	list-style: none; 
}
.wrapper img {
/*	vertical-align: bottom; */border-style: none;
}
.wrapper header,.main{
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.wrapper header{
	margin-bottom: 54px;
 }
.wrapper h1{
	position: relative;
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	padding-top: 1.5em;
}
.wrapper .sns{
	position: absolute;
	right: 0;
	bottom: 0;
	text-indent: 0;
	font-size: 16px;
	font-weight: normal;
}

.wrapper .sns .li-fb{
	width: 120px;
}


.news,.about,.profile,.contents,.special{
	position: relative;
	width: 95%;
	margin: 0 auto;
	padding-bottom: 10.5em;
	background: url(../img/bg_nkjm.png) no-repeat center;
	background-position: bottom left;
}

/*
=============================
 /BASIC
=============================
*/

/*--------------------------- SNS */
.sns {
	padding: 3px 0;
}
.sns li {
	display: inline-block;
	vertical-align: text-top;
/*	margin: 0 5px;*/
}
.sns li.twitter {
	margin-top: 5px;
}
.sns li.fb iframe {
	margin: 0 !important;
}

/*--------------------------- title */
.title {
	position: relative;
/*	width: 100%;*/
	height: 394px;
	background: url(../img/header.png) no-repeat center;
	background-size: cover;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;
/*  background-attachment: scroll;*/
}
.wrapper header{
	min-width: 320px;
}
.title-logo{
	position: absolute;
	top: 5px;
	left: 3%;
	width: 44%;
	max-width: 449px;
	max-height: 184px;
}
.title-release{
	position: absolute;
	bottom: 6%;
	right: 50%;
	width: 30%;
	height: auto;
	max-width: 319px;
	max-height: 113px;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;
	
animation: fuwa 1.2s infinite alternate ease-in-out;
-ms-animation: fuwa 1.2s infinite alternate ease-in-out;
-webkit-animation: fuwa 1.2s infinite alternate ease-in-out;
-moz-animation: fuwa 1.2s infinite alternate ease-in-out;

}

@-webkit-keyframes fuwa {

	100% {bottom:16%;
			right:49%;
			width:24%;
			max-width:260px;
	}
}

@keyframes fuwa {

	100% {bottom:16%;
			right:49%;
			width:24%;
			max-width:260px;
	}
}
.wrapper nav{
	background-color: #323031;
	width:100%;
	/*position: relative;*/
	z-index:10;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.wrapper nav.notIE{
	position: absolute;
}

.wrapper nav.sticky{
	position:fixed;
	top:0;
}

.header-nav{
	display: table;
	width: 100%;
/*	position: relative;*/
	min-width: 820px;
	max-width: 960px;
	margin: 0 auto;
	clear: both;	
}

.header-nav li{
	position: relative;
 	float: left;
	width: 20%;
}
.header-nav a{
	display: block;
	width: 100%;
	height: 54px;
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
  background: url(../img/navi.png) no-repeat ;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
}
.header-nav .nav-news a{
  background-position: .5% 0;
}
.header-nav .nav-about a{
  background-position: 25.5% 0;
}
.header-nav .nav-profile a{
  background-position: 50% 0;
}
.header-nav .nav-contents a{
  background-position: 75% 0;
  cursor: default;
}
.header-nav .nav-special a{
  background-position: 100% 0;
}

.header-nav .nav-contents a:hover{
  background-position: 75% 101%;
}

.header-nav .nav-contents a:hover{
  	background-color: #808080;
  	-webkit-transition: .0s;
	   -moz-transition: .0s;
	    -ms-transition: .0s;
	     -o-transition: .0s;
	        transition: .0s;
}

.header-nav a:hover,.header-nav li:hover{
/*	border: 2px solid #000;*/
  text-decoration: underline;
	background-color: #ff7979;
	-webkit-transition: .2s;
	   -moz-transition: .2s;
	    -ms-transition: .2s;
	     -o-transition: .2s;
	        transition: .2s;
}
.header-nav .active{
	background-color: #ff7979;
}

/*--------------------------- main */

.main{
	background: url(../img/bg.png) fixed  center top;
	min-width: 320px;
}
.container{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	background-color: rgba(255,255,255,.8);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff);
	line-height: 1.6em;
}
.container h1 img{
	clear: both;
}
.container h1 img{
	display: block;
	width: 100%;
	margin: 0 auto;	
}
.container h1 .flag{
	float: left;
	max-height: 83px;
	width: auto;
	max-width: 100%;	
}
/*--------------------news*/

.news article,.about article{
	width: 90%;
	margin: 1.2em auto 5em auto;
}
.news .warunger{
  float: left;
	max-width:69px;
	-webkit-transition: .5s;
	   -moz-transition: .5s;
	    -ms-transition: .5s;
	     -o-transition: .5s;
	        transition: .5s;
}
.news p.news-date, .about h2, .profile-author-txt h2{
	display: inline;
	background-color: #e6ff5c;
	background-image: -webkit-linear-gradient(#fff 45%, #e6ff5c 55%);
	background-image: -o-linear-gradient(#fff 45%, #e6ff5c 55%);
	background-image: linear-gradient(#fff 45%, #e6ff5c 55%);
}
p.new:after{
	content: "NEW!";
  font-size: .8em;
  padding: .1em .25em;
  color: #FFF;
	background: #f00;
	font-weight: bold;
	animation: blink 1.2s step-end infinite;
	-ms-animation: blink 1.2s step-end infinite;
	-webkit-animation: blink 1.2s step-end infinite;
	-moz-animation: blink 1.2s step-end infinite;
}
@-webkit-keyframes blink {
  80% { visibility: hidden; }
}
@keyframes blink {
  80% { visibility: hidden; }
}
.news-txt a{
	color: #DB006B;
}

.news-topic{
  width: 100%;
  overflow: hidden;
  padding-bottom: .7em;
}
.news-topic h2{
	font-size: 1.4em;
}

.fbox {
  position: relative;
  float: left;
  width:80%;
  margin-left: 2%;
  background: #fff;
  border:1px solid #616161;
  border-radius: 10px;
  box-shadow:1px 3px 11px 1px #7C7C7C;
  padding: 1% 2%;
 }

.fbox:after,.fbox:before {
    top: 25px;
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.fbox:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 8px;
    margin-top: -8px;
}

.fbox:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 9px;
    margin-top: -9px;
    border-right-color: #616161;    
}

.news-body{
	display: table;
}
.news-body figure{
	display: table-cell;
	min-width: 85px;
	min-height: 85px;
	max-width: 166px;
	max-height: 166px;
	vertical-align: top;
}
.news-body figure img{
	border: 1px solid #616161;
	width: 90%;
	height: auto;
}
.news-body .news-txt{
	width: 80%;
	display: table-cell;
	vertical-align: top;
	padding-right: 7%;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*----------------------------about*/
.about-nkjm{
	overflow: hidden;
}

.about-nkjm-img{
	width: 50%;
	max-width: 368px;
	float: right;
}

.about-nkjm-txt p,.profile-author-txt p,.profile-etc-txt ul{
	margin-top: 1em;
}

img.about-chart-img{
	margin: 1em auto 0 auto;
	border: 1px solid #BFBFBF;
	width: 100%;
}

.about-invention-ex{
	display: table;
	width: 100%;
	margin: 3em auto;
}

.invention-ex-img{
	display: table-cell;
	width: 161px;
	height: auto;
	min-width: 97px;
	min-height: 84px;
	padding: 0 1.1em .2em 0;
}

.invention-ex-txt{
	display: table-cell;
	vertical-align: middle;
	width: 85%;
}
.invention-ex-txt h3{
	margin-bottom: 1em;
}

/*----------------------------profile*/
.profile{
	text-align: center;
}
.profile section{
	width: 90%;
	margin: 1.2em auto 3em auto;
}
.profile article a{
	color: #000;
	text-decoration: none;
}
.profile article a:hover, .news-txt a:hover{
	text-decoration: underline
}

.profile-author{
	display: table;
}

.profile-author figure{
	display: table-cell;
	min-width: 85px;
	min-height: 85px;
	max-height: 254px;
	max-width: 254px;
	height: auto;
}
.profile-author-img{
	width: 90%;
	height: auto;
}

.profile-author-txt{
	width: 65%;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

.profile-etc-txt h3{
	display:inline-block;
	width: 9em;
	background-color: #e6ff5c;
	background-image: -webkit-linear-gradient(#fff 10%, #e6ff5c 10%, #e6ff5c 80%, #fff 80%);
	background-image: -o-linear-gradient(#fff 10%, #e6ff5c 10%, #e6ff5c 80%, #fff 80%);
	background-image: linear-gradient(#fff 10%, #e6ff5c 10%, #e6ff5c 80%, #fff 80%);
}
.profile-etc-txt a{
	font-size: .95em;
}


.profile-etc-txt li{
 	margin: .6em;
 	line-height: 1.6em;
}
.profile-twitter a
{
	padding: 1em .7em;
}
.profile-twitter-link{
	width: 51%;
	max-width: 195px;
	max-height: 306px;
	min-width: 140px;
	min-height: 219px;
	height: auto;
}
.profile-twitter-bot{
	width: 50%;
	max-width: 186px;
	max-height: 158px;
	min-width: 137px;
	min-height: 116px;
	height: auto;
}
/*---------------------------special*/
.special-lead{
	margin: 1em 1em 2em;
}
.special-lead .visible_sp_txt{
	display: none;
/*	height: 3.55em;
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../img/special_ttl.png) no-repeat ;
	background-size: contain;*/
}
.special-lead img{
	width: 100%;
	height: auto;	
}
.special-wp{
	display: table;
	width: 100%;
	margin-bottom: 5em;
}
.special-wp figure{
	display: table-cell;
	padding: 0 10px;
	vertical-align: middle;
}
.special-wp figure img{
	display: block;
	max-width: 460px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
}
.special-wp-link{
	display: table-cell;
	min-width: 330px;
	max-width: 360px;
	margin: 0 auto;
}
.special-wp ul{
	display: inline-block
}
.wp-pc,.wp-sp{
	text-align: center;
}
.wp-sp{
	margin-top: 1.5em;
}
.wp-pc p,.wp-sp p, .special-wp li{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.special-wp .wp-sp a{
	height: 113px;
}
.special-wp a{
	display: block;
	width: 95px;
	height: 95px;
}
.wp-pc p,.wp-sp p{
	margin-bottom: .6em;
}
.wp-pc p{
  background: url(../img/wp_ttl.png) no-repeat center top;
	height: 20px;	
}
.wp-sp p{
  background: url(../img/wp_ttl.png) no-repeat center bottom;
  height: 21px;
}
.wp-pc li{
	margin: -.2em .2em;
  background: url(../img/special_wp_pc.png) no-repeat ;
  display: inline-block;
}
.wp-pc li.row1-2{
  background-position: -101px 0;
}
.wp-pc li.row1-3{
  background-position: -205px 0;
}
.wp-pc li.row2-1{
  background-position: -47px -95px;
}
.wp-pc li.row2-2{
  background-position: -154px -95px;
}
.wp-sp li{
	margin: -.2em .2em;
  background: url(../img/special_wp_sp.png) no-repeat ;
  display: inline-block;
}
.wp-sp li.res_android{
  background-position: -108px 0
}

/*---------------------------copyright*/
.copyright{
	display: table;
	width: 100%;
	height: 2em;
	background: #323031;
	color: #fff;
	text-align: center;
}
.copyright p{
	display: table-cell;
	vertical-align: middle;
}

#page-top{
  display: block;
  position: fixed;
  z-index: 1;
  bottom: -170px;
  right: 3%;
  width: 10%;
  max-width:139px;
  min-width:62px;
/*   padding: 20px 10px;
   */
  text-align: center;
  text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
  transition: .4s;
}
#page-top img{
  width: 100%;
  border: none;
}
#page-top.visible{ 
  bottom:30px;
}

.nkjm-move-img01,.nkjm-move-img02,.nkjm-move-img03,.nkjm-move-img04,.nkjm-move-img05,.nkjm-move-img06{
	position: absolute;
	opacity: .8;
}
.nkjm-move-img01{
	left:-350px;
	top:40%;
}
.nkjm-move-img02{
	right:-330px;
	top:1%;
}
.nkjm-move-img03{
	left:-381px;
	bottom:21%;
}
.nkjm-move-img04{
	right:-334px;
	top:17%;
}
.nkjm-move-img05{
	right:-368px;
	top:5%;
}


@media screen and (max-width: 826px) {
   .wrapper header,.main{
   	font-size:.9em;
   }
   .wrapper header {
		margin-bottom: 35px;
	 }
	.title {
		height: 190px;
   }
	.header-nav{
		min-width: 320px;
	}
	.header-nav{
		border-bottom: 1px solid #fff;
	}
	.header-nav a{
		white-space: pre-wrap;
		overflow: hidden;
		text-overflow: clip;
		height: 50px;
	}
	.header-nav li{
		display: table;
		width: 25%;
		height: auto;
		font-size: 1.17em;
		box-sizing: border-box;
	}
	.header-nav a{
		display: table-cell;
/*	height: 2.2em;
*/	border: none;
		text-indent: 0%;
		text-align: center;
		background: none;
		vertical-align: middle;
	}
	.header-nav a:hover{
		border: none;
	}
	.header-nav .nav-contents{
		display: none;
	}
	.wrapper .sns {
		bottom: -6px;
	}
	.news-topic h2{
		font-size: 1.1em;
	}
	.news-body .news-txt{
		padding-right: 3%;
	}
	.news .warunger{
  	width:42px;
	}
	.nkjm-move{
		display: none;
	}
/*	.special-lead h2{
		height: 45px;
	}*/
	.special-lead{
		margin: 1em 1em 1em;
	}
	.special-wp-link{
		min-width: 240px;
		max-width: 240px;
	}
	.special-wp a{
		width: 69px;
		height: 68px;
	}
	.special-wp .wp-sp a{
		height: 82px;
	}
	.special-wp figure img{
		max-width: 370px;
		width: 100%;
	}
	.wp-pc li{
		margin: -.2em .2em;
	  background: url(../img/special_wp_pc_small.png) no-repeat ;
	}
	.wp-pc li.row1-2{
	  background-position: -72px 0;
	}
	.wp-pc li.row1-3{
	  background-position: -147px 0;
	}
	.wp-pc li.row2-1{
	  background-position: -33px -68px;
	}
	.wp-pc li.row2-2{
	  background-position: -110px -68px;
	}
	.wp-sp li{
		margin: -.2em .2em;
	  background: url(../img/special_wp_sp_small.png) no-repeat ;
	}
	.wp-sp li.res_android{
	  background-position: -77px 0
	}
}
@media screen and (max-width: 480px) {

  .wrapper header {
		margin-bottom: 115px;
	 }
	.title {
		height: 110px;
   }
	.title-release{
		width: 30%;
	 }

	@-webkit-keyframes fuwa {
	100% {
			width:26%;
			bottom:13%;
		}		
	}

	@keyframes fuwa {
		100% {
			width:26%;
			bottom:13%;
		}
	}
	.header-nav li{
		width: 100%;
		border-bottom: 1px solid #fff;
	}
	.header-nav a{
		height: 1.8em;
	}
	.news article,.about article{
		width: 94%;
	}
	.fbox {
		font-size: .95em;
	  width:77%;
  }
	.news-body{
		display: block;
	}
	.news-body figure{
		display: block;
		margin: 0 auto;
	}
	.news-body figure img{
		width: 100%;
		height: auto;
	}
	.news-body .news-txt{
		display: block;
		width: 100%;
		margin: .5em auto;
		padding-right: 0;
	}

	.about-invention-ex{
		display: block;
	}

	.invention-ex-img{
		display: block;
		max-width: 161px;
		margin: 0 auto;
	}
	.invention-ex-txt h3{
		margin: .2em 0 .5em;
		text-align: center;
	}

	.profile-author{
		display: block;
	}
	.profile-author figure{
		display: block;
		margin: .5em auto;
	}
	.profile-author-txt{
		width: 100%;
		display: block;
		text-align: center;
	}
	.profile-author-txt p{
		text-align: left;
	}
	.special-wp-link .wp-pc{
		display: none;		
	}
	.special-wp{
		display: block;
		margin-bottom: 2.5em;
	}
	.special-wp figure{
		display: block;
	}
	.special-wp figure img{
		display: block;
		max-width: 460px;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.special-wp-link{
		display: block;
	}
	.wp-sp{
		margin-top: 1em;
	}

	
}