@charset "utf-8";

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

img#logo01 {
  width: 27.5%;
z-index: 1;
  position: fixed;
  top: 1%;/*自分が固定したい位置(例は上から0pxの位置)*/
  left: 10%;/*自分が固定したい位置(例は左から10pxの位置)*/
}

img#logo02 {
  width: 17.5%;
z-index: 1;
  position: fixed;
  bottom: 5%;/*自分が固定したい位置(例は上から0pxの位置)*/
  right: 10%;/*自分が固定したい位置(例は左から10pxの位置)*/
}

#layout00 {
  background-color: #322625;
  width: 1080px; /* 幅(px指定) */
  margin: 0 auto;  /* 余白の大きさ 中央寄せ(センタリング)) */

}
#layout01 {
  font-color:#000000;
  font-size:27.5px;
  background-color: #ffffff;
  width: 90%; /* 幅(px指定) */
  margin: 0 auto;  /* 余白の大きさ 中央寄せ(センタリング)) */

}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/* 動画全体の横幅を指定するための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%;
}



table {
width: 100%;
border: 0px #333333 solid;
}

ul {
  list-style: none;
}
/*チームの戦績表*/
/*タイトルが無色*/
table.p{
  width: 100%;
  font-weight: bold;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 20px;
}
table.p th,table td{
  padding: 3px 0;
  text-align: center;
}
table.p tr:nth-child(even){
  background-color: #444
}
/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体への指定*/
#menubar {
	position: fixed;
	bottom: 05%;	/*ロゴやメニューが入っているブロックに対して、下からの配置場所の指定。*/
	left: 5%;
	width: 100%;
	text-align: center;

}
/*メニュー１個あたりの指定*/
#menubar li {
	display: inline-block;
	margin: 0 1%;
	animation-name: opa1;
	animation-delay: 1S;
	animation-duration: 1S;
	animation-fill-mode: both;
	font-weight: bold;
}
#menubar li a {
	text-decoration: none;display: block;text-align: left;
	width: 600px;	/*メニューの幅*/
	color: #fff;	/*文字色*/
	border-bottom: 2px solid transparent;	/*下線の幅、線種、色。transparentは透明の事。*/
	text-shadow: 1px 2px 5px #000000;
	padding-bottom: 7px;	/*下線と文字の間にとる余白*/
	font-size: xx-large ;
}
/*マウスオン時の指定*/
#menubar li a:hover {
/*	border-bottom: 2px solid #fff;	下線の幅、線種、色*/
	letter-spacing: 0.3em;			/*文字間隔を少しだけ広くする指定。そのままがいいならこの１行を削除。*/
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}

ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}


h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}

ul {list-style-type: none;}
/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 55px;
}
ol {
	padding: 0 20px 20px 42px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #fff;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 15px 40px;list-style: disc;}
.color1, .color1 a {color: #ff4765;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.big1 {font-size: 25px;letter-spacing: 0em;	font-weight: bold;}
.big2 {font-size: 20px;letter-spacing: 0em;	font-weight: bold;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}

/* 戦績用 LIST BOX ↓↓↓*/
ol {
    font-size: 3;
    width: 90%;
    height: 1050px;
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 0.1em 0.3em;
    position:relative;
    top:-15px;
    border: solid 1px #ffffff; /*外枠の色*/
    overflow-y: scroll;
}
ol li {
    color: #fffffff;
    border-bottom: dashed 1px;
    position: relative;
    padding: 0.3em 0.3em 0.3em 0px;
    line-height: 1em;
}
ol li:last-of-type {
  font-size: xx-large;
  border-bottom: none; /*最後のliの線だけ消す*/
}
/* 戦績用 LIST BOX ↑↑↑*/

/*↓↓↓メニューボタン↓↓↓*/
.menu-btn {
    position: fixed;
    top: 3%;
    right: 5%;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #322625;
    border-radius:30px;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #EFC229;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

.menu-content {
    width: 30%;
    height: 375px;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #322625;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #EFC229;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#EFC229;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #EFC229;
    border-right: solid 2px #EFC229;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

#menu-btn-check {
    display: none;
}
#menu-btn-check:checked ~ .menu-content {
    left: 50%;/*メニューを画面内へ*/
}


/*↑↑↑メニューボタン↑↑↑*/

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #888;		/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #ff4765;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


	h2{
		font-size: 25px; /*ここに検証で使用する単位を使用*/
		font-weight: bold; /*見出しだとわかりやすくするため、太字の記述を追加*/
	}

	h3{
		font-size: 30px; /*ここに検証で使用する単位を使用*/
		font-weight: bold; /*見出しだとわかりやすくするため、太字の記述を追加*/
	}

/* ボックスのプロパティ */
.box {
  border: 2px solid #aaa;
  width:80%; /* 幅(px指定) */
  padding: 2em;
  border-radius: 15px;
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー（一番上の、ロゴやメニューが入っているブロック）
---------------------------------------------------------------------------*/

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*ヘッダー（一番上の、ロゴやメニューが入っているブロック）
---------------------------------------------------------------------------*/

#layout00 {
  position: center;
  background-color: #322625;
  width:100%; /* 幅(px指定) */
  margin: 0 ;  /* 余白の大きさ 中央寄せ(センタリング)) */
  height: 100%;
  font-size: xx-small;
}
#layout01 {
  font-color:#000000;
  font-size:17px;
  background-color: #ffffff;
  width: 90%; /* 幅(px指定) */
  margin: 0 auto;  /* 余白の大きさ 中央寄せ(センタリング)) */

}
img#logo01 {
  width: 40%;
  position: fixed;
  top: 1%;/*自分が固定したい位置(例は上から0pxの位置)*/
  left: 2%;/*自分が固定したい位置(例は左から10pxの位置)*/
}

img#logo02 {
  width: 30%;

  position: fixed;
  bottom: 4%;/*自分が固定したい位置(例は上から0pxの位置)*/
  right: 1%;/*自分が固定したい位置(例は左から10pxの位置)*/
}

/*メニューブロック全体への指定*/
	#menubar {
		position: fixed;
		bottom: 3%;	/*ロゴやメニューが入っているブロックに対して、下からの配置場所の指定。*/
		left: -2%;
		width: 100%;
		text-align: center;
	}
	/*メニュー１個あたりの指定*/
	#menubar li {
		display: inline-block;
		margin: 0 1%;
		animation-name: opa1;
		animation-delay: 1S;
		animation-duration: 1S;
		animation-fill-mode: both;
		font-weight: bold;
	}
	#menubar li a {
		text-decoration: none;display: block;text-align: left;
		width: 300px;	/*メニューの幅*/
		color: #fff;	/*文字色*/
		font-size: 25px; /*文字サイズ*/
		line-height: 1; /*文字行間隔*/
		border-bottom: 2px solid transparent;	/*下線の幅、線種、色。transparentは透明の事。*/
		text-shadow: 1px 2px 5px #000000;
		padding-bottom: 7px;	/*下線と文字の間にとる余白*/

	}
	/*マウスオン時の指定*/
	#menubar li a:hover {
	/*	border-bottom: 2px solid #fff;	下線の幅、線種、色*/
		letter-spacing: 0.1em;			/*文字間隔を少しだけ広くする指定。そのままがいいならこの１行を削除。*/
	}
	
/* 戦績用 LIST BOX ↓↓↓*/
	ol
	 {
	font-size: 1;
	  width: 90%;
	  height: 550px;
	  counter-reset:number; /*数字をリセット*/
	  list-style-type: none!important; /*数字を一旦消す*/
	  padding: 0.1em 0.3em;
		  position:relative;
		  top:-15px;
	  border: solid 1px #ffffff; /*外枠の色*/
	  overflow-y: scroll;
	}
	ol li {
	  color: #fffffff;
	  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 ↑↑↑*/
/*チームの戦績表*/
/*タイトルが無色*/
	table.p{
	  width: 100%;
	  font-weight: bold;
	  border-collapse: collapse;
	  border-spacing: 0;
	  font-size: 10px;
	}
	table.p th,table td{
	  padding: 3px 0;
	  text-align: center;
	}
	table.p tr:nth-child(even){
	  background-color: #000
	}
	h2{
		font-size: 15px; /*ここに検証で使用する単位を使用*/
		font-weight: bold; /*見出しだとわかりやすくするため、太字の記述を追加*/
	}
	h3{
		font-size: 20px; /*ここに検証で使用する単位を使用*/
		font-weight: bold; /*見出しだとわかりやすくするため、太字の記述を追加*/
	}
.menu-content {
    width: 50%;
    height: 335px;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #322625;
    transition: all 0.5s;/*アニメーション設定*/
}
	

/* ボックスのプロパティ */
.box {
  border: 2px solid #aaa;
  width:70%; /* 幅(px指定) */
  padding: 2em;
  border-radius: 15px;
}

}