.noise {
  background-image: url("../img/noise.png");
  background-repeat: repeat;
  animation: noise-anim 1s infinite linear alternate-reverse;
}

@keyframes noise-anim {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
}

/* */


.glitch {
  animation: glitch_effect 10s infinite;
}

@keyframes glitch_effect {
  0% {
    opacity: 1;
    transform: none;
  }
  33% {
    transform: none;
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    transform: skewY(20deg) translate(8px, 6px);
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
    transform: skewY(-10deg) translate(-10px, -10px);
  }
  33.9% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    transform: none;
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    transform: skewX(5deg) translate(-4px, 10px);
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
    transform: skewX(-7deg) translate(4px, -6px);
  }
  66.9% {
    opacity: 1;
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewY(10deg) translate(10px, -6px);
  }
  77.6% {
    transform: skewY(-22deg) translate(-5px, 8px);
    filter: invert(100%);
  }
  77.9% {
    transform: none;
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
}



body {
font-family: 'Roboto',arial,sans-serif;
background:#fff; 
color:#000;
text-align:center;
font-size:13px;
line-height:1.5;
}
body.index {
background:url(../img/noise.gif)repeat 0 0;
}
@media screen and (max-width: 599px) and (orientation: portrait), screen and (min-width: 300px) and (max-width: 767px) and (orientation: landscape){
	body {
		height: 100vh;
	}
}



/*body.index-bg {
background:url(../img/logo-bg.png) repeat-x center center;
}*/
a {
	color:#fff;
	text-decoration: none; 
}
.index_outer{
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 15px 30px;
	text-align: center;
}
.page_outer{
	padding: 70px 30px;
	color: #fff;
	text-align: center;
}

h2 {
font-size:22px;
padding:60px 0 10px;
}
h3 {
font-size:17px;
	margin:0;
    padding:40px 0 15px;
}
p {
	margin:0;
    padding:0;
}

ul {
	position: fixed;
    right: 20px;
    top: 15px;
    margin:0;
    padding:0;
}
p.c {
	position: fixed;
    left: 20px;
    bottom: 17px;
	}
div.lang {
	position: fixed;
    left: 20px;
    top: 17px;
	}
div.lang span {
	display:inline-block;
	background:#000;
	padding: 0 10px;
	margin:0 0;
	color:#fff;
}
div.lang a {
	display:inline-block;
	background:#999;
	padding: 0 10px;
	margin:0 0;
}
div.lang a:hover {
	background:#000;
}
	
	

a:hover {
cursor:pointer;
}




body{
			margin: 0;
		}
		.navi_item a{
			color: #fff;
			text-decoration: none;
		}
		.mainView{
			width: 100vw;
			height: 100vh;
			/* background-color: #fff;*/
		}
		/*ハンバーガーボタン*/
		.el_humburger {
		  position: fixed;
		  top: 45px;
		  right: 60px;
		  width: 46px;
		  height: 25px;
		  padding-top: 1px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  padding-top: 0px;
		  z-index: 20;
		  cursor: pointer;
		  pointer-events: auto;
		  color: #000;
		  text-align: center;}

		@media screen and (max-width: 840px) {
		  .el_humburger {
		    display: block;
		    right: 0;
		    top: 0;
		    padding-top: 20px;
		    width: 70px;
		    height: 70px;}
		    #factory .el_humburger {
		      display: none; } }

		.el_humburger_wrapper {
		  margin-bottom: 5px;
		  width: 42px;
		  display: inline-block; }

		@media screen and (max-width: 840px) {
		  .el_humburger_wrapper {
		    margin-bottom: 5px;
		    width: 30px; } }

		.el_humburger_text {
		  font-size: 12px;
		  letter-spacing: 0.1em;
		  font-family: "游ゴシック Medium", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }

		.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
		  display: none; }

		.el_humburger_text.el_humburger_text__close {
		  display: none; }

		.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
		  display: block; }

		@media screen and (max-width: 840px) {
		  .el_humburger_text {
		    font-size: 10px;
		    padding-top: 2px; } }

		@media screen and (max-width: 840px) {
		  .el_humburger_text svg path {
		    -webkit-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
		    -o-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
		    transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
		    fill: #000; } }

		@media screen and (max-width: 840px) {
		  .js_humburgerOpen .el_humburger_text svg path {
		    fill: #000; } }

		.el_humburger span.el_humburger_bar {
		  display: block;
		  width: 100%;
		  margin: 0 auto 9px;
		  height: 1px;
		  background: #000;
		  -webkit-transition: all .2s ease-in-out;
		  -o-transition: all .2s ease-in-out;
		  transition: all .2s ease-in-out; }

		.el_humburger span.el_humburger_bar:last-child {
		  margin-bottom: 0; }

		.js_humburgerOpen .el_humburger span.el_humburger_bar {
		  background: #000; }

		@media screen and (max-width: 840px) {
		  .el_humburger span.el_humburger_bar {
		    left: 0;
		    top: 0;
		    background: #000; } }

		.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
		  -webkit-transform: translateY(9px) rotate(-45deg);
		  -ms-transform: translateY(9px) rotate(-45deg);
		  transform: translateY(9px) rotate(-45deg);
		  background: #fff; }

		.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
		  opacity: 0; }

		.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
		  -webkit-transform: translateY(-11px) rotate(45deg);
		  -ms-transform: translateY(-11px) rotate(45deg);
		  transform: translateY(-11px) rotate(45deg);
		  background: #fff; }

		.el_humburgerButton.el_humburgerButton__close {
		  top: 2%;
		  right: 2%; }

		.el_humburgerButton__close span.el_humburger_bar {
		  display: block;
		  width: 35px;
		  margin: 0 auto;
		  height: 4px;
		  background: #000; }

		.el_humburgerButton__close span.el_humburger_bar.top {
		  -webkit-transform: translateY(5px) rotate(-45deg);
		  -ms-transform: translateY(5px) rotate(-45deg);
		  transform: translateY(5px) rotate(-45deg); }

		.el_humburgerButton__close span.el_humburger_bar.bottom {
		  -webkit-transform: translateY(-6px) rotate(45deg);
		  -ms-transform: translateY(-6px) rotate(45deg);
		  transform: translateY(-6px) rotate(45deg); }

		.navi {
		  position: fixed;
		  will-change: transform;
right:0;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.9);
		  width: 0px;
		  z-index: 3;
		  padding-top: 100px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-transition: all 600ms ease-out;
		  -o-transition: all 600ms ease-out;
		  transition: all 600ms ease-out;
		  transform:translateZ(0) translateX(0%);
		  overflow: auto; }
		  .js_humburgerOpen .navi {
width: 450px;
		   /*transform:translateZ(0) translateX(0%);*/ }
		    @media screen and (max-width: 840px) {
		      .navi {
		        padding: 100px 0% 0; }
		      .js_humburgerOpen .navi {
padding: 100px 0% 0;
		        width: 100%;} }

@media screen and (max-width: 840px){
.navi_inner{
padding: 0 20px 0;
}
}


		.navi_item {
		  margin-bottom: 10px;
		  font-size: 20px;
		  white-space: nowrap;
		  text-align:left;
		  margin-left: 40px; }
		  .navi_item.op_innerLink {
		    cursor: pointer; }
		  @media screen and (max-width: 840px) {
		    .navi_item {
		      margin-left: 1em;
		      font-size: 17px; } }
		      
		   .navi_item:nth-child(1),
		   .navi_item:nth-child(7){
		   	margin-bottom: 24px;
		   }
		   .navi_item:nth-child(8){
		   	margin-bottom: 44px;
		   }
		      
		      
		      .navi_txt {
		      	width:28em;
		  text-align:left;
		  color:#fff;
		  margin-bottom: 28px;
		  font-size: 14px;
		  /* font-family: "Marcellus", serif !important;*/
		  white-space: normal;
		  margin-right: 40px;
		  margin-left: 40px; }
		  .navi_item.op_innerLink {
		    cursor: pointer; }
		  @media screen and (max-width: 840px) {
		    .navi_txt {
		    	width:20em;
		      margin-left: 1em;
		      font-size: 14px; } }
		      
		      
		      

.head_logo {
	padding-top:3em;
}
@media screen and (max-width: 480px) {
.head_logo img {
	width:150px;
}
.index_outer img {
	width:200px;
}
.index_outer {
    width:100%;
}
}






/* 3カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	margin:auto;
	width: 1048px;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #fff; /* 背景の色 */
color: #000; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 3em 0;
	text-align:right;
}
@media screen and (max-width: 1090px) {
	.col_3{
		width: 90%;
	}
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
.col_3{
		width: 90%;
		margin:auto;
	}
	.col_3 > div{
		width: 50%;
		margin:auto;
	}
}
.col_3 img {
	width:100%;
}
.col_3 a {
	color:#000;
}


/* 2カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	margin:auto;
	width: 1048px;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #fff; /* 背景の色 */
color: #000; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_2 > div{
	width: 50%;
	padding: 3em 0;
	text-align:right;
}
@media screen and (max-width: 1090px) {
	.col_2{
		width: 90%;
	}
	.col_2 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
.col_2{
		width: 90%;
		margin:auto;
	}
	.col_2 > div{
		width: 90%;
		margin:auto;
	}
}
.col_2 img {
	width:100%;
}
.col_2 a {
	color:#fff;
}

.col_2 .spec h1 {
	margin-top:5em;
}
.col_2 .spec .btn{
	display:inline-block;
	background:#000;
	font-size:2em;
	padding:0 24px;
	margin-top:2em;
}
@media screen and (max-width: 480px) {
.col_2 .spec h1 {
	margin-top:0;
}
}


/* 2カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_1{
	margin:auto;
	width: 412px;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #fff; /* 背景の色 */
color: #000; /* 文字の色 */
text-align: left;
}
.col_1 p {
	padding-top:1em;
}
@media screen and (max-width: 480px) {
.col_1{
		width: 90%;
		margin:auto;
	}
}