@charset "utf-8";

body {
  background-color: #333333;
  margin: 0;
  font-size: 18px;
  font-family: 'メイリオ','Meiryo','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','YuGothic','Yu Gothic','ＭＳ Ｐゴシック','MS PGothic'  
  font-weight: 300;
}

#layout00 {
  width: 1080px; /* 幅(px指定) */
  margin: 0 auto;  /* 余白の大きさ 中央寄せ(センタリング)) */
}
#layout01 {
  background-color: black;
  width: 100%; /* 幅(％指定) */
  line-height:0%;
  height: 100px;
}
#layout02 {
  background-color: black;
  width: 20%; /* 幅(％指定) */
  height: 1700px;
  float: left;
}

#layout03 {
  background-color: #111111;
  width: 50%; /* 幅(％指定) */
  height: 1700px;
  float: left;
}
#layout04 {
  background-color: #000000;
  width: 30%; /* 幅(％指定) */
  height: 1700px;
  float: left;
}
#layout05 {

}
/* リンクボタン */
a.cp_btn {
	display: block;
	width: 80%x;
	margin : 10px ;
	padding: 0.3em;
	text-align: center;
	text-decoration: none;
	background: #222222;
	color: #ffffff;
	border: 1px solid #777777;
	border-radius: 3px;
	transition: .4s;
}
a.cp_btn:hover {

	background: #6495ed;
	color: #fff;
}

/* link用のフォント色 */
a {
  color: #888;
  font-size: 0.85em;/*文字サイズ2倍*/
  text-decoration: none;
}

/* 点滅 */
.blinking{
    -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.75s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*問合せボタン*/
.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/*チームの戦績表*/
/*タイトルが無色*/
table.p{
  width: 100%;
  font-weight: bold;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 8px;
}
table.p th,table td{
  padding: 3px 0;
  text-align: center;
}
table.p tr:nth-child(even){
  background-color: #333
}

/* STAFF */
img.example1 {
width: 80%;
}
table {
width: 100%;
border: 0px #333333 solid;
}
img.example2 {
width: 80%;
}
table {
width: 100%;
border: 0px #333333 solid;
}
/* 戦績用 LIST BOX ↓↓↓*/
ol {
font-size: 1;
  width: 97%;
  height: 1050px;
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.1em 0.3em;
	  position:relative;
	  top:-15px;
  border: solid 1px #888888;
  overflow-y: scroll;
}
ol li {
  color: #777777;
  border-bottom: dashed 1px;
  position: relative;
  padding: 0.3em 0.3em 0.3em 0px;
  line-height: 1em;
}

ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}
/* 戦績用 LIST BOX ↑↑↑*/
/*HOME用TOPICS LIST BOX↓*/
ol.homelist {
font-size: 1;
  width: 97%;
  height: 150px;
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.1em 0.3em;
	  position:relative;
	  top:-15px;
  border: solid 1px #888888;
  overflow-y: scroll;
}
ol.homelist li {
  color: #777777;
  border-bottom: dashed 1px;
  position: relative;
  padding: 0.3em 0.3em 0.3em 0px;
  line-height: 1em;
}

ol.homelist li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}
/*HOME用TOPICS LIST BOX↑*/
ul.sli{
  display:block;
  width:98%;
  height:342px;
  position: relative;
  overflow:hidden;
  padding:0;
  margin:0 auto;
  border:1px solid gray;
  box-sizing:border-box;
}
ul.sli li{
  display:block;
  float:left;
  width:100%;
  height:100%;
  transform:translateX(100%);
  position: absolute;
}
ul.sli li:nth-of-type(1){
  transform:translateX(0);
  animation:slide 20s 0s infinite;
}
ul.sli li:nth-of-type(2){
  animation:slide 20s 4s infinite;
}
ul.sli li:nth-of-type(3){
  animation:slide 20s 8s infinite;
}
ul.sli li:nth-of-type(4){
  animation:slide 20s 12s infinite;
}
ul.sli li:nth-of-type(5){
  animation:slide 20s 16s infinite;
}

@keyframes slide{
  0%{
    transform:translateX(100%);
    opacity:1;
  }
  3%{
    transform:translateX(0%);
    opacity:1;
  }
  20%{
    transform:translateX(0%);
    opacity:1;
  }
  23%{
    transform:translateX(-100%);
    opacity:0;
  }
  99.999%{
    transform:translateX(-100%);
    opacity:0;
  }
  100%{
    transform:translateX(100%);
    opacity:1;
  }
  
}

/*レスポンシブ対応*/
@media only screen and (min-width: 481px) {
	#menu li{
	  display:none;
	}
	#toggle{
	  display:none;
	}
	#layout05 {
	  display:none;
	}
}

@media screen and (max-width:480px) {
	/* この位置に記述する */
	#layout00 {
	  width: 100%;	  
	}

	#layout01 {
	  display:none;
	}

	#layout02 {
	  display:none;
	}

	#layout03 {
	  height: 100%;
	  font-size: 10px;

	  width: 100%;
	  background-color: #111111;
	}
	#layout04 {
	  height: 100%;
	  font-size: 10px;

	  width: 100%;
	  background-color: #111111;
	}
	#layout05 {
	  height: 100%;
	  font-size: 10px;
	  width: 100%;
	  background-color: #111111;
	}

	/* スマホ用メニューボタン */
	#menu{
	  display: none;
          background: #333;
	  padding-top: 0px;
	  padding-bottom: 0px
	  padding-right: 0px;
	  padding-left :0;

	}
	#menu li{
	  width: 70%;
	  list-style: none;
          background: #333;
	  font-size: 15px;
	  top: 10%;
	  left: 10%;
	  padding-top: 0px;
	  padding-bottom: 0px
	  padding-right: 0px;
	  padding-left :0;
	  padding-top: 0px;
	  padding-bottom: 0px
	}
	#toggle{
	  display: block;
	  position: relative;

	  width: 100%;
	  background: #222;
	}
	#toggle a{
	  display: block;
	  position: relative;
	  padding: 12px 0 10px;
	  border-bottom: 1px solid #444;
	  color: #fff;
	  text-align: center;
	  text-decoration: none;

	}
	#toggle:before{
	  display: block;
	  content: "";
	  position: absolute;
	  top: 49%;
	  left: 10px;
	  width: 25px;
	  height: 20px;
	  margin-top: -10px;
	  background: #fd0;
	}
	#toggle a:before, #toggle a:after{
	  display: block;
	  content: "";
	  position: absolute;

	  top: 50%;
	  left: 10px;
	  width: 25px;
	  height: 4px;
	  background: #111;
	}
	#toggle a:before{
	  margin-top: -6px;
	}
	#toggle a:after{
	  margin-top: 2px;
	}

	/* PAGE TOP ボタン */
	#page_top{
	  width: 100px;
	  height: 60px;
	  position: fixed;
	  right: 0;
	  bottom: 13%;	/*下からの位置*/
	  background: #555555;
	  opacity: 0.9;
	  border-radius: 15px;
	}
	#page_top a{
	  position: relative;
	  display: block;
	  width: 100px;
	  height: 60px;
	  text-decoration: none;
	}
	#page_top a::before{
	  font-family: 'Font Awesome 5 Free';
	  font-weight: 900;
	  content: '\f102';
	  font-size: 25px;
	  color: #fff;
	  position: absolute;
	  width: 25px;
	  height: 25px;
	  top: -25px;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  margin: auto;
	  text-align: center;
	}
	#page_top a::after{
	  content: 'PAGE TOP';
	  font-size: 13px;
	  color: #fff;
	  position: absolute;
	  top: 30px;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  margin: auto;
	  text-align: center;
	}

	/* スマホ用リンクボタン */
	a.scp_btn {
		display: block;
		width: 200px;
		height: 22px;
		margin : 5px ;
		padding: 0.3em;
		text-align: center;
		text-decoration: none;
		background: #222222;
		color: #ffffff;
		border: 1px solid #777777;
		border-radius: 3px;
		transition: .4s;
	} 
		a.scp_btn:hover {
			background: #6495ed;
			color: #fff;
	}

	/* TOPICS LIST BOX ↓↓↓*/
		ol.homelist {
		  font-size: 15px;
		  width: 97%;
		  height: 150px;
		  counter-reset:number; /*数字をリセット*/
		  list-style-type: none!important; /*数字を一旦消す*/
		  padding: 0.2em 0.3em;
			  position:relative;
			  top:-10px;
		  border: solid 1px #888888;
		  overflow-y: scroll;
		}
		ol.homelist li {

		  color: #ffffff
		  border-bottom: dashed 1px;
		  position: relative;
		  padding: 0.3em 0.3em 0.3em 0px;
		  line-height: 1em;
		}

		ol.homelist li:last-of-type {
		  border-bottom: none; /*最後のliの線だけ消す*/
		}
	/* TOPICS LIST BOX ↑↑↑*/
	/*TOPスライダーレスポンシブ対応*/
		ul2{
		  display:block;
		  width:95%;
		  height:363px;
		  position: relative;
		  overflow:hidden;
		  padding:0;
		  margin:0 auto;
		  border:1px solid gray;
		  box-sizing:border-box;
		}
		/*INDEX画面スライダーレスポンシブ対応*/
		ul.sli{
		  display:block;
		  width:98%;
		  height:272px;
		  position: relative;
		  overflow:hidden;
		  padding:0;
		  margin:0 auto;
		  border:0px solid gray;
		  box-sizing:border-box;
		}

}

/* YouTube 100% Disply*/
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 95%;
     height: 95%;
}

/* twitterアイコン周り全体 */
.flowbtn18{
font-family:'Georgia',sans-serif;	
display:inline-block;
position:relative;
width:90%;
height:50px;
font-size:23px;
border-radius:5px;
background-color:#444;
color:#fff!important;
text-decoration:none;
}
.flowbtn18 i{
position:relative;
bottom:5px;
}
.flowbtn18:hover{
text-decoration:none;
}
.flowbtn18 div{
font-size:15px;	
position:relative;
bottom:22px;
}
/* Twitterマウスホバー時 */
.flowbtn18.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn18.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* プロフィールマウスホバー時 */
.flowbtn18.fl_pf2:hover{
background:linear-gradient(135deg, #fad961 0%,#f8a33f 100%);
}
/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}
/* twitterアイコン周り全体 */



video {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: auto;
}


/* 動画全体の横幅を指定するためのdiv */
.video-wrap {
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%;
  height:0;
  padding-top: 56.25%;
}

/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}