@charset "utf-8";

body{
        background: linear-gradient(0deg, #00205f 10%, black 95%);
        width: 100vw;
        height: auto;
        margin: 0;

	color: white;
	font-family: 'SQUAREFONT', 'メイリオ', 'Meiryo UI', sans-serif;	
}

p{
	color: white;
}

.text1{
  	text-align: center;
    font-weight: bold;
	color: white;
    font-size: 5rem;
}

.text2{
    text-align: center;
    font-weight: bold;
	color: white;
    font-size: 4rem;
}



@media screen and (max-width: 1024px){
  .text1{
  	text-align: center;
    font-weight: bold;
	color: white;
    font-size: 2rem;
}

  .text2{
    text-align: center;
    font-weight: bold;
	color: white;
    font-size: 1.7rem;
}
}

@media screen and (max-width: 576px){
  .text1{
  	text-align: center;
    font-weight: bold;
	color: white;
    font-size: 1.4rem;
}

  .text2{
    text-align: center;
    font-weight: bold;
	color: white;
    font-size: 1.1rem;
}
}


div {
	text-align: center;
	}

.Black {
        background-color: black;
}
    
header {
	margin-top: 0px; 
	margin-left: -10px; 
	margin-right: -10px;
	display: flex;
	z-index: 999;
	top: 0;
	left: 0;
	width: auto;
	padding: 10px;
    background-color: black;
	color: lightblue;
    height: auto;
}

.HeaderImg {
	width: 23vw;
	height: auto;
}

@media screen and (max-width: 1024px){
.HeaderImg {
	width: 25vw;
	height: auto;
	}
}

@media screen and (max-width: 576px){
.HeaderImg {
	width: 40vw;
  	margin-top: 5px;
	height: auto;
	}
}

.Contents {
	width: 100%;
	overflow: auto;
	text-align: center;
}
}

.main {
       	background-color: lightblue;
       	height: 300px;
}

.Item {
		padding-top 5vw;
}

/*メモ１ ヘッダーとフッターのリストアップ */ 
     
.header-list li {
       	list-style: none;
       	float: left;
       	padding: 35px 20px;
}
      
.HeaderLink {
       	text-decoration:none;
       	color: white;
       	font-size: 25px;
}
      
.FooterLink {
       	text-decoration:none;
       	color: #c0c0c0;
      	}

     	p{
            	color: white;
	    	font-size: 12px;
      	}
      	
	h1{
		color: white;
		font-size: 3rem;
		margin-left: 50px;
	}
	
	h2{
		color: white;
		font-size: 1.75rem;
		margin-left: 240px;
	}

	@media screen and (max-width: 1024px){

		p{
            		color: white;
	    		font-size: 5px;
      		}
	
		h1{
			color: white;
			font-size: 2rem;
			margin-left: 32px;
		}
	
		h2{
			color: white;
			font-size: 1.5rem;
			margin-left: 52px;
		}
	}
	
	@media screen and (max-width: 576px){	
	
		p{
        	    	color: white;
		    	font-size: 3px;
      		}

		h1{
			color: white;
			font-size: 1.5rem;
			margin-left: 10px;
		}
	
		h2{
			color: white;
			font-size: 1.2rem;
			margin-left: 35px;
		}
	}


      	.Black {
        	background-color: black;
      	}
      
      
      	header {
       		background-color: black;
	    	display: flex;
	
        	justify-content: space-between;
        	align-items: center;
        	padding: 20px 20px;
        	position: relative;
      	}

	footer {
		background-color: black;
		display: flex;
      	}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
 position: absolute;
  right: 8vw;
  top: 4vw;
  z-index: 100;
  cursor: pointer;
}
@media screen and (max-width: 1024px){

.drawer_open {
	  position: absolute;
	  right: 10vw;
	  top: 5vw;
	  z-index: 100;
	  cursor: pointer;
	}

}
@media screen and (max-width: 576px){	
.drawer_open {	
	  position: absolute;
	  right: 15vw;
	  top: 12vw;
	  z-index: 100;
	  cursor: pointer;
	}		
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 0.3vw;
  width: 3vw;
  border-radius: 10px;
  background: #00bfff;
  transition: 0.5s;
  position: absolute;
}

@media screen and (max-width: 1024px){

.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 0.5vw;
  width: 6vw;
  border-radius: 10px;
  background: #00bfff;
  transition: 0.5s;
  position: absolute;
  }
  
}
@media screen and (max-width: 576px){	
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 0.5vw;
  width: 7.5vw;
  border-radius: 10px;
  background: #00bfff;
  transition: 0.5s;
  position: absolute;
  }
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 1vw;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 1vw;
}

@media screen and (max-width: 1024px){
.drawer_open span:before {
  bottom: 2vw;
	}
.drawer_open span:after {
  top: 2vw;
	}
}
@media screen and (max-width: 576px){
.drawer_open span:before {
  bottom:2.53vw;
	}
.drawer_open span:after {
  top: 2.5vw;
  	}
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
  background: #00bfff;
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
  background: #00bfff;
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(25, 46, 83, 0.9);
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}





      .main {
       	background-color: lightblue;
       	height: 300px;
      }

     .records-artist li {
	display: inline-block;
	}	
      
      .header-list li {
       	list-style: none;
       	float: left;
       	padding: 35px 20px;
      }
      
      .HeaderLink {
       	text-decoration:none;
       	color: black;
       	font-size: 2rem;
       
      }
      
      .FooterLink {
 
       	color: #c0c0c0;
      }
      
      .Left {
      	text-align: left;
       	float: left;
        color: silver;
      }
      
      .Right {
       text-align: right;
       color: silver;
      }
      

      /*文字左, 画像右, 横並び*/
      .MainText{
        	font-size: 23px;
        	/* margin-left: 360px; */
        	display: inline-block;
        	text-align: left;
      }

	@media screen and (max-width: 1024px){
		.MainText{
        		font-size: 12px;
        		/* margin-left: 240px; */
        		display: inline-block;
        		text-align: left;
      			}
		
		}
	@media screen and (max-width: 576px){	
		.MainText{
        		font-size: 6px;
        		/* margin-left: 125px; */
        		display: inline-block;
        		text-align: left;
      			}
		}


      .MainImg{
        text-align: center;
        display: inline-block;
        width: 20vw;
        height: auto;
        margin-left: 0;
      }
	
	@media screen and (max-width: 768px){
	  .MainImg{
        text-align: center;
        display: inline-block;
        width: 90vw;
        height: auto;
        margin-left: -1.5vw;
      }
}
      
      
      /*文字右, 画像左, 横並び*/
      .MainText2{
        font-size: 40px;
        display: inline-block;
        margin-left: 0px;
        text-align: left;
        color: #002478;
      }

	@media screen and (max-width: 1024px){
		.MainText2{
        		font-size: 40px;
        		display: inline-block;
			margin-left: 0px;
        		text-align: left;
			color: #002478;
      			}
		
		}
	@media screen and (max-width: 576px){	
		.MainText2{
        		font-size: 40px;
        		display: inline-block;
        		margin-left: 0px;
        		text-align: left;
			color: #002478;
      			}
		}


      
      .MainImg2{
        display: inline-block;
        /* margin-left: 360px; */
        
      }
      
      
      .Kome{
        display: inline-block;
        text-align: left;
        color: white;
      }


.Waku{
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid white; 
	border-radius: 10px;
	}


.Link{
        color: yellow;
      }
.Link:visited{
        color: #40e0d0;
      }
.Link:hover{
        color: #ee82ee;
      }
.Link:active{
        color: #ff1493;
      }
      /* メモ　 style="width: 160px; height: 38px;" */


      	.MainText{
        	font-size: 23px;	
        	text-align: left;
      	}

	h1{
		color: white;
		font-size: 55px;
	}

	@media screen and (max-width: 1024px){

		.MainText{
        		font-size: 12px;
        		text-align: left;
      		}

		h1{
			color: white;
			font-size: 44px;
		}
	}
	@media screen and (max-width: 576px){	
	
		.MainText{
        		font-size: 6px;
        		text-align: left;
      		}

		h1{
			color: white;
			font-size: 23px;
		}
	}

footer {
	margin-top: 0px; 
	margin-left: -10px; 
	margin-right: -10px;
	display: flex;
	z-index: 999;
	top: 0;
	width: 100%;
	padding: 10px;
    background-color: black;
	color: lightblue;
       	height: auto;
}

.footerfont {
	margin-left: 1%; 
	margin-top: 0%; 
	font-size: 2rem; 
	color: white;
}

.footerfont2 {
	margin-left: 0%; 
	text-align: right; 
	font-size: 1.5rem; 
	color: white;
}

@media screen and (max-width: 1024px){

.footerfont {
	margin-left: 0%; 
	margin-top: 0%; 
	font-size: 100%; 
	color: white;
  }

.footerfont2 {
	margin-left: 0%; 
	text-align: right; 
	font-size: 100%; 
	color: white;
	}
}

@media screen and (max-width: 576px){	
.footerfont {
	margin-left: 0%; 
	margin-top: 0%; 
	font-size: 100%; 
	color: white;
  }

.footerfont2 {
	margin-left: 0%; 
	text-align: right; 
	font-size: 100%; 
	color: white;
	}
}

.footerimg {
	width: 25vw; 
	height: auto;  
	margin-bottom: 0px; 
	float:center;
}

@media screen and (max-width: 576px){
  .footerimg {
	width: 90vw; 
	height: auto;  
	margin-bottom: 0px; 
	float:center;
}
}

p {
  text-align: center;
  margin: 0px auto 0px;
}

table {
  text-align: center;
  margin-left: 2vw;
}
.tbl-r02 th {
  padding: 10px;
}
.tbl-r02 td {
  padding: 10px;
}
 
@media screen and (max-width: 768px) {
  
table {
  margin-left: 0;
}
  
  .last td:last-child {
    width: 100%;
  }
  .tbl-r02 {
    width: 90%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
    margin-left: -1vw;
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}