@import url('css-RobotoCondensed400700RobotoSlab700400Roboto400700.css');

@media (max-width:700px){
	.pconly{display:none;}
}

body{
	margin: 0;
	padding: 0;
	font-family: Roboto, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック","Yu Gothic","メイリオ", Meiryo, sans-serif !important;
	font-size: 1.0em;
	background-color: #e9edf0;
	color: #666;
}
body * {
	box-sizing:border-box;
}
.jp{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック","Yu Gothic","メイリオ", Meiryo, sans-serif !important;
}


.content .content,
.content .text{
	width: auto;
	height: auto;
	display: inline;
	line-height: initial;
}


.content > *{
	opacity: 0;	
}
.content > *:nth-child(1){ animation: fadeIn 0.8s ease 0s 1 normal forwards;}
.content > *:nth-child(2){ animation: fadeIn 0.8s ease 0.4s 1 normal forwards;}
.content > *:nth-child(3){ animation: fadeIn 0.8s ease 0.8s 1 normal forwards;}
.content > *:nth-child(4){ animation: fadeIn 0.8s ease 1.2s 1 normal forwards;}
.content > *:nth-child(5){ animation: fadeIn 0.8s ease 1.6s 1 normal forwards;}
.content > *:nth-child(6){ animation: fadeIn 0.8s ease 2s 1 normal forwards;}
.content > *:nth-child(7){ animation: fadeIn 0.8s ease 2.2s 1 normal forwards;}
.content > *:nth-child(8){ animation: fadeIn 0.8s ease 2.4s 1 normal forwards;}
.content > *:nth-child(9){ animation: fadeIn 0.8s ease 2.6s 1 normal forwards;}
.content > *:nth-child(10){ animation: fadeIn 0.8s ease 2.8s 1 normal forwards;}
.content > *:nth-child(11){ animation: fadeIn 0.8s ease 3.0s 1 normal forwards;}
.content > *:nth-child(12){ animation: fadeIn 0.8s ease 3.2s 1 normal forwards;}
.content > *:nth-child(13){ animation: fadeIn 0.8s ease 3.4s 1 normal forwards;}
.content > *:nth-child(14){ animation: fadeIn 0.8s ease 3.6s 1 normal forwards;}
.content > *:nth-child(15){ animation: fadeIn 0.8s ease 3.8s 1 normal forwards;}
.content > *:nth-child(16){ animation: fadeIn 0.8s ease 4.0s 1 normal forwards;}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}


.mission .content > *{
	opacity: 1;
}
.mission .content > *:nth-child(1),
.mission .content > *:nth-child(2),
.mission .content > *:nth-child(3),
.mission .content > *:nth-child(4),
.mission .content > *:nth-child(5),
.mission .content > *:nth-child(6),
.mission .content > *:nth-child(7),
.mission .content > *:nth-child(8),
.mission .content > *:nth-child(9),
.mission .content > *:nth-child(10)
{ animation: none ;}






h1,h2,h3,h4,p{
	margin: 0;
	padding: 0;
}
p{
	line-height: 2.0;
}
a{
	text-decoration: none;
    transition: all .3s ease;
    color: #0092d5;
}
iframe{
	max-width: 100%;
}
img{
	max-width: 100%;
	margin: auto;
	height: auto;
}
img.alignright{
	float: right;
	margin-left: 40px;
}
img.alignleft{
	float: left;
	margin-right: 40px;
}
img.margintop{
	margin-top: 50px;
}
img.border{
	border:1px solid #CCC;
}
img.shadow{
	box-shadow:2px 2px 6px rgba(0,0,0,0.4);
}

.center{
	text-align: center;
}
.left{
	text-align: left;
}
.italic{
	font-style: italic;
}
img.large{
	width: 65%;
}
img.medium{
	width: 50%;
}
img.small{
	width: 30%;
}
.inline{
	display: inline-block;
}
.btn a{
	display: inline-block;
	padding: 8px 12px;
	text-decoration: none;
	color: #0092d5;
	background-color: #FFF;
	border: 1px solid #0092d5;
	font-size: 16px;
	vertical-align: middle;
}
.btn a:hover{
	background-color: #0092d5;
	color: #FFF;
}
.btn.gray a,.btn a.gray{
	color: #666;
	border: 1px solid #666;
}
.btn.gray a:hover,.btn a:hover.gray{
	background-color: #666;
	color: #FFF;
}
.btn a.facebook{
	background: #4363a2 url(../image/facebook_logo.svg) 12px 50% no-repeat;
	background-size: 20px;
	padding: 8px 12px 8px 40px;
	color: #FFF;
	border-color: #4363a2;
}
.btn a.facebook:hover{
	opacity: 0.5;
}
.btn a.blue{
	color: #FFF;
	background-color: #0092d5;
	border: 1px solid #0092d5;
}
.btn a.big{
	font-size: 1.5em;
	padding: 8px 60px;
	box-shadow:2px 2px 6px rgba(0,0,0,0.4);
	background: rgb(80,166,211);
	background: linear-gradient(180deg, rgba(80,166,211,1) 0%, rgba(1,112,159,1) 100%);
}
@media(min-width: 701px){
	.btn a:hover.blue{
		opacity: 0.5;
	}
	.btn a:hover.big{
		transform:scale(1.1);
		opacity: 1;

	}
}
h2 .btn a{
	vertical-align: middle;
	position: relative;
	top: -2px;
	padding: 5px 10px;
}



.mailmagazine{
	text-align: center;
	background-color: #d0dde2;
	padding: 40px 20px;
	margin: 30px 20px -10px;
	letter-spacing: 0px;
	font-size: 18px;
}
.mailmagazine h2{
	font-size: 21px;
	color: #0094D4;
}
.mailmagazine p{
	margin: 0 0 10px;
}
.mailmagazine input[type="EMAIL"]{
	display: inline-block;
	padding: 7px 11px;
	border:0px solid #CCC;
	height: 40px; 
}
body > .mailmagazine input[type="EMAIL"]{
	width: 300px;
	font-size: 20px;
}

.mailmagazine input[type="submit"]{
	font-size: 18px;
	height: 40px; 
	margin-left: -5px;
	font-weight: normal !important;
}
a.read-more-link,
a.link-button,
#zen-square-box a,
input.button,
input[type=submit],
button.search-submit{
	border:1px solid #d5d5d5;
	color:#225a72;
	opacity:0.8;
	padding:5px 20px;
	display:inline-block;

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eff8fc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eff8fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eff8fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eff8fc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eff8fc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eff8fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff8fc',GradientType=0 ); /* IE6-9 */

background: #0094d4; /* Old browsers */
background: -moz-linear-gradient(top,  #0094d4 0%, #0075bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0094d4), color-stop(100%,#0075bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0094d4 0%,#0075bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0094d4 0%,#0075bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0094d4 0%,#0075bf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0094d4 0%,#0075bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0094d4', endColorstr='#0075bf',GradientType=0 ); /* IE6-9 */
border:1px solid #0094d4 !important;
color:#fff !important;
}


















.bgwhite{
	background-color: #FFF;
}
.bgwhite.transparent{
  background-color: transparent;
  border-top: none !important;
}
.bgwhite + .bgwhite{
	border-top: 1px solid #CCC;
}
.parallel{
	width:45%;
	float:right;
	position:relative;
	top:-60px;
	left:20px
}
.parallel .inner{
	transform:skewX(-15deg);
	overflow:hidden;
}
.parallel img{
	float:left;
	transform:skewX(15deg) scale(1.28);
}


.content{
	position: relative;
	max-width: 1000px;
	margin: auto;
	padding: 0 0 60px;
}

.content.head{
	margin: 0 auto 0;
	padding: 0;
}
.content p,.content h3{
	margin: 0 0 20px;
}
.content .half{
	width: 50%;
	margin: 0 auto 50px 0;
}
.content .half p,.content .half h3{
	margin-right: 40px;
}
.content .floatleft{
	float: left;
}
.content .floatright{
	float: right;
}

.content .one-third{
	width: 30%;
	margin: 0 auto 50px 0;
}
.content .margin{
	margin-bottom: 30px;
}
.content .border{
	border: 1px solid #CCC;
	margin: 0 0 30px; 
	position: relative;
}
.content .border .text{
	padding: 20px;
	display: block;
	overflow: hidden;
}
@media(min-width: 701px){
	.content .border img.alignleft{
		min-width: 300px;
		transition:all 0.5s ease;
		margin-right: 0px;
		transform:scale(0.9);
	}

}
.content .border .text p{
	line-height: 1.8
}


h2.head{
	margin: 0 0 30px;
	padding-top: 50px;
	font-size: 50px;
	font-weight: normal;
	color: #0092d5;
}
h2.head.small{
	font-size: 1.5em;
	margin: 0 0 15px;
}
h2.head.nomargintop{
	padding-top: 0px;
}
h2.head a{
	font-size: 14px;
	display: inline-block;
	text-decoration: none;
	color: #0092d5 !important;
	padding: 3px 8px;
	border: 1px solid #0092d5;
	vertical-align: middle;
	font-weight: normal;
	letter-spacing: 1px;
	transition:all 0.5s ease;
}
h2.head a:hover{
	background-color: #0092d5;
	color: #fff !important;
}
h2.head a.jp{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック","Yu Gothic","メイリオ", Meiryo, sans-serif !important;
	font-size: 12px;
	letter-spacing: 0px;
}

h2.margintop,h3.margintop{
	padding-top: 50px;
}
h2.head.jp{
	font-size: 40px
}
h2.marginbottom{
	padding-bottom: 50px;
}
h3.head{
	margin: 0 0 20px;
    padding-top: 50px;
    font-size: 1.2em;
    font-weight: normal;
    color: #FFF;
    background-color: #0092d5;
    display: inline-block;
    padding: 10px;
}
p.head{
    padding-top: 50px;
}
p.large{
	font-size: 1.2em
}
.inlinenavi{
	background-color: #FFF;
	padding: 25px 0;
	box-shadow: 0px 3px 8px rgba(0,0,0,0.2);
	position: relative;
	z-index: 100;
}
ul.news{
	margin: 0;
	padding:0; 
} 
ul.news li{
	position: relative;
	background-color: #FFF;
	margin-bottom: 5px;
	padding: 10px;
	list-style-type: none;
}
ul.news li span.date{
	width:10em;
	display: inline-block;
}
ul.news li span.article{
	display: inline-block;
    width: calc(100% - 10.5em);
    vertical-align: top;
}
.inlinenavi ul{
	max-width: 1000px;
	margin: auto;
}
@media screen and (max-width: 1100px){
	.content,.inlinenavi ul{
		padding: 0 20px 20px !important;
	}
	ul.news li span.date{
		width:7em;
	}
	ul.news li span.article{
	    width: calc(100% - 7.5em);
	}
}
.inlinenavi ul li{
	display: inline-block;
	margin: 0 30px 0 0;
}
.inlinenavi ul li a{
}

.mission{
  position: relative;
  background:url(../image/about_sample2.jpg) 50% 100%;
  background-size:cover;
  padding: 150px 20px 80px;
  text-align: center;
  overflow: hidden;
  top: -110px;
  margin-bottom: -110px;
  text-align: left;
}
.mission:before{
  display: block;
  content: " ";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 100;
}
.mission .text{
  position: relative;
  display: inline-block;
  z-index: 101;
  color: #FFF;
  background-color: rgba(29, 64, 84, 0.8);
  padding: 30px;
  width: 100%;
}
.maincopy{
  position: relative;
  margin: 50px auto;
  max-width: 1000px;
  color: #FFF;
  z-index: 101;
}
.maincopy .copy{
  position: relative;
  z-index: 101;
  text-align: center;
  font-size: 40px;
  font-weight: normal;
  text-transform: normal;
  font-family: Roboto, san-serif;
  font-weight: normal;
  margin-bottom: 30px;
  opacity: 0;
}
.maincopy .copy span{
  display: inline-block;
  padding: 1px;
}
.maincopy .copy_text{
  font-size: 18px;
  width: 80%;
  max-width: 670px;
  margin: auto;
  line-height: 1.5;
  opacity: 0;
}
.maincopy .copy_text p{
  line-height: 1.5;
}
.mission .copy{
  animation: textandbtn 1s linear 0s 1 normal forwards !important;
}
.mission .copy_text{
  animation: textandbtn 1s linear 0.5s 1 normal forwards !important;
}

.nintendo{background-color: #FFF;padding: 30px 0;}
.nintendo .inner{width: 1000px;max-width:100%;margin: auto;background-color: #FFF;text-align: center;padding: 10px 20px;color: #000;font-weight: bold;font-size: 1.2em;}
.nintendo img{display: block;width:400px;max-width: 100%;}
.nintendo a.text{display: inline-block;border-bottom: 3px solid #ff0201;color: #ff0201;}



@media screen and (max-width: 700px){
	img{
		height: auto;
	}
	h2{
		font-size: 1.2em;
	}
	h2.head,h1.head,h2.head.jp{
	font-size: 2em;
	}
	h3.head{
	  font-size: 1.2em;
	}
	p.head{
	    padding: 50px 0;
	}
	.content{
		padding: 0 20px 100px;
		overflow: hidden;
	}
	.content.head{
		padding: 0 20px;
	}
	.content .half{
		width: 100%;
	}
	.content .half p{
		margin-right: 0;
	}
	.content .floatleft,
	.content .floatright{
		float: none;
		width: 100% !important;
	}
	.inlinenavi{
		padding: 20px 10px;
	}
	.inlinenavi ul li{
		margin: 0 10px 8px 0;
	}
	img.alignleft,
	img.alignright{
		float: none;
		width: 100%;
		display: block;
		margin: 0 0 20px;
	}
	div[style="column-count: 4"]{
		column-count:1 !important;
		display: none;
	}
	.parallel{
		width:100%;
		float:none;
		position:relative;
		top:0px;
		left:0px;
		margin: auto auto 20px;
	}
	.parallel .inner{
		transform:skewX(0deg);
	}
	.parallel img{
		float:none;
		transform:skewX(0deg) scale(1);
	}
	.mailmagazine{
		padding: 20px;
		margin: 20px;
		font-size: 18px;
	}
	.mailmagazine input{
		margin-top: 10px;
	}
	body > .mailmagazine input[type="EMAIL"]{
		width: 100%;
	}
	.mission{
		padding: 140px 10px 50px;
	}
	.maincopy{
		margin: 0px auto;
	}
	.maincopy .copy{
		font-size: 22px;
		padding: 20px 0 0;
		height: auto;
	}
	.maincopy .copy_text{
		width: 90%;
		text-align: left;
		font-size: 0.9em;
	}
	.maincopy .copy_text br{
		display: none;
	}
	.content .border img.alignleft{
		border-right: 0px solid #CCC;
		min-width: 1px;
		max-width: 250px;
		display: block;
		margin:auto;
	}
}



/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}

/* ==========================================================================
   GRID
   ========================================================================== */

.grid{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:0 3%;
	float:left;
	text-align:left;
	position:relative;
}
.grid.nopadding{
	padding: 0;
}
.grid3{
	width:25%
}
.grid4{
	width:33%
}
.grid5{
	width:42%
}
.grid6{
	width:50%;
}
.grid7{
	width:58%
}
.grid8{
	width:66%;
}
.grid9{
	width:75%;
}
.grid12{
	width:100%;
}
@media only screen and (max-width : 767px){
.grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid12{
	width:100%;
	float:none;
	padding:0 5% 0 5%;
}
}
.grid-margin-bottom{
	margin-bottom:40px;
}