@charset "UTF-8";


.relative {
    position: relative;
}
.size-full wp-image-805 {

}
/*フォント*/
 body{
  font-family:'UD Digi Kyokasho NP-B';
　color: white ;
} 
/*一番上の５個か６個ならんでるやつ*/
ul.topnav {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: #1b2538;
}
ul.topnav li {
	float: left;
}
ul.topnav li a {
	display: block;
	padding: 14px 16px;
	text-align: center;
	text-decoration: none;
	color: white;
}
ul.topnav li a:hover:not(.active) {
	background-color: #a9bce2;
}
ul.topnav li a.active {
	background-color: #B34E36;
}
ul.topnav li.right {
	float: right;
}
@media screen and (max-width: 480px) {
	ul.topnav li.right, ul.topnav li {
		float: none;
	}
}
/*テレビの中の画像*/

#css-slider {
	width: 800px;
	height: 450px;
	overflow: hidden;
	max-width: 50%;
  margin: 0 auto;
	position: absolute;
}
 
.slide-item {
	width: 800px;
	height: 450px;
	float: left;
	position: absolute;
}
 
 
.slider-wrapper {
	width: 300%;
	position: relative;
	left: 0;
	will-change: transform;
	animation: slider 10s infinite;
	
}
 
@keyframes slider {
  0% { transform: translateX(0); }
  33% { transform: translateX(-300px); }
  66% { transform: translateX(-600px); }
  100% { transform: translateX(0); }
}

/*一番最初に出てくる横にシャーってなるやつ　文字の下のアンダーライン*/
.underline1 {
    text-decoration: none;
    background: linear-gradient(transparent 80%, rgba(255, 252, 107, .69) 50%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.5s;
}

/*YouTubeの種類を選ぶやつ*/

.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #FF003E;
font-size: 20px;
  border: solid 3px #73FBFD;
  border-radius: 4px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #4D07FF;
font-size: 30px;
  color: #FFFFFF;
}

/****************************************
サイトの一番下の部分でロゴとかがあるやつの背景
*****************************************/
.site-footer{
	background: #333;
	color: #fff;
	padding: 80px 0;
}
/****************************************
contents
*****************************************/
.page-title{
	text-align: center;
}

.hero{
	margin-bottom: 120px;
	max-height: 600px;
	overflow: hidden;
}

.hero__img{
	height: auto;
	width: 100%;
}

.sec{margin-bottom: 120px;
}
/*下の左からニョロ*/
.col2{
    width:40%;
}


.img-container{
	overflow: hidden;
	position: relative;
}

.page-title__title{
	color: #FFFFFF;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 40px;
}

.text-container{
	padding:0 10px;
}

.text-container__title{
	color: #FFFFFF;
	display: block;
	font-size: 60px;
	font-weight: 700;
	overflow: hidden;
	position: relative;
	z-index: 0;
}


.text-container__title__inner{
	display: #183634;
	margin-right: 30px;
	text-align: right -10px;
	transition: all .8s .5s ease;
}



/*ネオンの部分*/
/*
Copyright (c) 2016 Thomas Trinca
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-color: black;
}

@font-face {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.neon {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  color: #FB4264;
  font-size: 6vw;
  line-height: 4vw;
  text-shadow: 0 0 3vw #F40A35;
	
}

.flux {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  color: #426DFB;
  font-size: 6vw;
  line-height: 15vw;
  text-shadow: 0 0 3vw #2356FF;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 2s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 2s linear infinite;
  -o-animation: flux 2s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}


.touch:hover {
	color:#14FF00;
}
.slight {line-hight: 20;
}
.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #FF003E;
font-size: 20px;
  border: solid 3px #73FBFD;
  border-radius: 4px;
  transition: .4s;
}

/*フォーム全体*/
#form1{
position:relative;/*フォームの相対位置*/	
max-width:270px;/*フォームのサイズ*/
margin-bottom:15px;/*フォームの下に余白*/	 	
}
/*検索ボックス*/
#sbox{
position:absolute;/*フォームの絶対位置*/	
left:0;
top:0; 	
outline:0;/*クリック時の青い枠線消す*/	
height:50px;/*検索ボックスの高さ*/	
padding:0 10px;/*テキスト位置調整*/	 
border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/		
background:#eee;/*検索ボックスの背景カラー*/		
}
/*検索ボタン*/
#sbtn{
width:70px;/*検索ボタンの横幅*/ 
height:50px;/*検索ボタンの縦幅*/ 
position:absolute;/*検索ボタンの絶対位置*/  
left:270px;/*検索ボタンの位置調整*/  
top:0;
border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ 
background:#7fbfff;/*検索ボタンの背景カラー*/ 
border:none;/*検索ボタンの枠線を消す*/ 
color:#fff;/*検索ボタンのテキストカラー*/ 
font-weight:bold;/*検索ボタンのテキスト太字*/ 
font-size:16px;/*検索ボタンのフォントサイズ*/ 
}
/*検索ボタンマウスオーバー時*/
#sbtn:hover{
color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ 
}