@charset "utf-8";

@import url('https://fonts.cdnfonts.com/css/forced-square');

body{
        background: #00205f;
        width: 99.4%;
        height: auto;
        margin: 0;

	color: white;
	font-family: 'FORCED SQUARE', 'メイリオ', sans-serif;	
}

p{
	color: white;
}

b{
  	color: white;
  	text-align: center;
}

.totop{
	text-align: right;
	text-decoration: underline;
	font-size: 3rem;
	margin-right: 3vw;
}

.text1{
  	text-align: left;
	color: white;
    	font-size: 6.5rem;
	text-decoration: underline;
	font-style: italic;
  	margin-left: 5vw;
}

.text2{
    	text-align: center;
	color: white;
	font-size: 4rem;
	font-style: italic;
  	margin-right: 0;
	font-style: normal;
}

.text3{
    	text-align: center;
	color: white;
	font-size: 4rem;
	font-style: italic;
  	margin-right: 0;
	font-style: normal;
}

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

  .totop{
	text-align: right;
	text-decoration: underline;
	font-size: 2rem;
	margin-right: 2vw;
	}

  .text1{
  	text-align: center;
	color: white;
    	font-size: 4.2rem;
	text-decoration: underline;
	font-style: italic;
    	margin-left: -1vw;
	}

  .text2{
    text-align: center;
	color: white;
    font-size: 2.2rem;
	font-style: italic;
    margin-right: 0;
	font-style: normal;
    margin-top: -4vw;
	}
  
  .text3{
    text-align: center;
	color: white;
    font-size: 2.2rem;
	font-style: italic;
    margin-right: 0;
	font-style: normal;
	}
}

div {
	text-align: center;
	border: none;
  }

.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: none;
}
}

.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;
  	margin-left: 0;
}

@media screen and (max-width: 1024px){
.HeaderLink {
       	text-decoration:none;
       	color: white;
       	font-size: 25px;
  	margin-left: -5vw;
  }
}

@media screen and (max-width: 576px){
.HeaderLink {
       	text-decoration:none;
       	color: white;
       	font-size: 25px;
  		margin-left: -10vw;
  }
}

.FooterLink {
       	text-decoration:none;
       	color: #c0c0c0;
      	}

        p{
		color: white;
        }

	p2{
		color: white;
		font-size: 4rem;
		margin-left: 2vw;
        }

	.p3{
		text-align: right;
		color: white;
		font-size: 3rem;
		margin-right: 2vw;
		}

	h1{
		color: white;
		font-size: 5rem;
		margin-left: 7vw;
	}
	
	h2{
		color: white;
		font-size: 3rem;
		margin-left: 4vw;
	}

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

		p{
			color: white;
      			}

		p2{
			color: white;
			font-size: 1.2rem;
			margin-left: 1vw;
      			}

		.p3{
			text-align: right;
			color: white;
			font-size: 1.5rem;
			margin-right: 2vw;
			}
	
		h1{
			color: white;
			font-size: 4rem;
			margin-left: 2vw;
		}
	
		h2{
			color: white;
			font-size: 2rem;
		}
	}
	

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

	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: 2.2rem;
        margin-left: 0;
      }

	@media screen and (max-width: 768px){
	.HeaderLink {
       	text-decoration:none;
       	color: black;
       	font-size: 2rem;
  		margin-left: -5vw;
  		}
	}
      
      .FooterLink {
 
       	color: #c0c0c0;
      }
      
      .Left {
      	text-align: left;
       	float: left;
        color: silver;
      }
      
      .Right {
       text-align: right;
       color: silver;
      }
      

      /*文字右, 画像左, 横並び*/
      .MainText{
        	font-size: 4.5rem;
        	display: inline-block;
        	text-align: center;
      }

	@media screen and (max-width: 768px){
	.MainText{
        	font-size: 2rem;
		margin-left: 2.5vw;
        	/* margin-left: 240px; */
        	display: inline-block;
        	text-align: center;
      		}
		
	}


      .MainImg{
       	text-align: left;
        display: inline-block;
        width: 10vw;
        height: auto;
        margin-left: 0;
      }
	
	@media screen and (max-width: 768px){
	.MainImg{
        	text-align: center;
        	display: inline-block;
        	width: 16.5vw;
        	height: auto;
        	margin-left: 0;
      		}
	}

      .MainText1{
        font-size: 2.7rem;
        display: inline-block;
        margin-left: 0;
	margin-top: 2vw;
        text-align: left;
        color: #002478;
      }

	@media screen and (max-width: 768px){	
		.MainText1{
        		font-size: 2.5rem;
        		display: inline-block;
        		margin-left: -5vw;
			margin-top: 0;
        		text-align: left;
			color: #002478;
      			}
		}

      /*文字左, 画像右, 横並び*/

.MainText2{
        font-size: 1.4rem;
	font-weight: bold;
        display: inline-block;
        text-align: center;
	margin-top: 0;
	margin-left: -1.5vw;
	padding: 0.1rem;
      }

@media screen and (max-width: 768px){	
	.MainText2{
        	font-size: 1rem;
		margin-left: 0;
        	display: inline-block;
        	text-align: center;
		margin-left: -3vw;      		
      		}
	}

   .MainImg1{
        text-align: left;
        display: inline-block;
	width: 80vw;
        height: auto;
        margin-left: 0;
      }
	
@media screen and (max-width: 768px){
   .MainImg1{
        text-align: left;
        display: inline-block;
        width: 80vw;
        height: auto;
	margin-left: 0;
     	margin-top: 1.2vw;
      }
}   
     
   .MainImg2{
        text-align: center;
        display: inline-block;
	width: 27vw;
        height: auto;
        margin-left: -1.5vw;
	margin-top: -1vw;
	cursor: pointer;
	transition: transform 0.2s;
      }
	
@media screen and (max-width: 768px){
   .MainImg2{
        text-align: left;
        display: inline-block;
        width: 80vw;
        height: auto;
	margin-left: -3vw;
     	margin-top: 1.2vw;
	cursor: pointer;
	transition: transform 0.2s;
      }
}   

p{
	color: white;
}

.MainText3{
        font-size: 1.5rem;
        margin-right: 5vw;
        text-align: right;
	margin-top: 0.5vw;
      }

@media screen and (max-width: 768px){
	.MainText3{
        	font-size: 0.8rem;
		margin-right: 4vw;
        	text-align: right;
		margin-top: 0.5vw;
      		}
		
	}

     .MainImg3{
       	text-align: left;
        display: inline-block;
        width: 30vw;
        height: auto;
        margin-left: 1.7vw;
      }

@media screen and (max-width: 768px){
     .MainImg3{
        text-align: left;
        display: inline-block;
        width: 60vw;
        height: auto;
	margin-left: 2vw;
        margin-top: 1.2vw;
      }
}

.MainText4{
        font-size: 3rem;
        display: inline-block;
        margin-left: 0;
        text-align: center;
	margin-top: 0.5vw;
      }

@media screen and (max-width: 768px){
	.MainText4{
        	font-size: 1rem;
		margin-left: -1vw;
        	display: inline-block;
        	text-align: center;
      		}
		
	}

.MainImg4{
        text-align: center;
        display: inline-block;
        width: 90vw;
        height: auto;  		
      }

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

     	.MainImg4{
        	text-align: center;
        	display: inline-block;
        	width: 90vw;
        	height: auto;
      	}
}

.MainImg5{
       	text-align: center;
        display: inline-block;
        width: 60vw;
        height: auto;
	margin-top: -1vw;
      }     

@media screen and (max-width: 768px){
	.MainImg5{
        text-align: center;
        display: inline-block;
        width: 80vw;
        height: auto;
	margin-left: 0.5vw;
	margin-top: -5vw;
      	}
}

.MainImg6{
        text-align: center;
        display: inline-block;
        width: 19vw;
        height: auto;  		
      }

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

     	.MainImg6{
        	text-align: center;
        	display: inline-block;
        	width: 75vw;
		margin-left: 1vw;
        	height: auto;
      	}
}

.MainImg7{
        text-align: center;
        display: inline-block;
        width: 19vw;
        height: auto;
	cursor: pointer;
	transition: transform 0.2s;  		
      }

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

     	.MainImg7{
        	text-align: center;
        	display: inline-block;
        	width: 75vw;
		margin-left: 1vw;
        	height: auto;
		cursor: pointer;
		transition: transform 0.2s;
      	}
}

      .Kome{
        display: inline-block;
        text-align: left;
        color: white;
      }


  .Waku{
	box-sizing: border-box; 
	max-width: 91%;
	padding: 7rem 0rem 0.7rem 0rem; 
	margin-top: -3vw; 
	border: 0.3rem solid yellow; 
	border-radius: 0.7rem;
	}

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

  .Waku{
	box-sizing: border-box; 
	max-width: 91%;
	padding: 3rem 0.5rem 0.2rem 0.9rem; 
	margin-top: -10vw; 
	border: 0.3rem solid yellow; 
	border-radius: 0.4rem;
	margin-left: 2vw;
	}
  
}

  .Waku1{
	box-sizing: border-box; 
	max-width: 21vw;
	padding: 0.7rem 0.5rem 0.7rem 0.5rem; 
	margin-left: -0.4vw;  
	border-radius: 0.7rem;
	}

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

  .Waku1{
	box-sizing: border-box; 
	max-width: 90vw;
	padding: 0.5rem; 
	margin-left: 5vw;  
	border-radius: 0.4rem;
	}
  
}

  .Waku2{
	border: 0.1rem solid white;
	box-sizing: border-box; 
	max-width: 25vw;
	padding: 0.7rem 0.5rem 0.7rem 0.5rem; 
	margin: auto;  
	border-radius: 0.7rem;
	}

ul{
	margin-left: -2.5vw;
	}


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

  ul{
	margin-left: -7vw;
}

  .Waku2{
	border: 0.1rem solid white;
	box-sizing: border-box; 
	max-width: 90vw;
	padding: 0.5rem; 
	margin-left: 0;  
	border-radius: 0.4rem;
	}
  
}

.Link{
        color: yellow;
	font-size: 2rem;
      }
.Link:visited{
        color: #40e0d0;
	font-size: 2rem;
      }
.Link:hover{
        color: #ee82ee;
	font-size: 2rem;
      }
.Link:active{
        color: #ff1493;
	font-size: 2rem;
      }

.Link2{
        color: yellow;
	font-size: 1.5rem;
      }
.Link2:visited{
        color: #40e0d0;
	font-size: 1.5rem;
      }
.Link2:hover{
        color: #ee82ee;
	font-size: 1.5rem;
      }
.Link2:active{
        color: #ff1493;
	font-size: 1.5rem;
      }

@media screen and (max-width: 768px) {
	.Link{
        	color: yellow;
		font-size: 1.2rem;
      	}
	.Link:visited{
	        color: #40e0d0;
		font-size: 1.2rem;
	}
	.Link:hover{
	        color: #ee82ee;
		font-size: 1.2rem;
	}
	.Link:active{
	        color: #ff1493;
		font-size: 1.2rem;
	}
	.Link2{
        	color: yellow;
		font-size: 0.8rem;
      	}
	.Link2:visited{
	        color: #40e0d0;
		font-size: 0.8rem;
	      }
	.Link2:hover{
	        color: #ee82ee;
		font-size: 0.8rem;
	      }
	.Link2:active{
	        color: #ff1493;
		font-size: 0.8rem;
	      }

}


      /* メモ　 style="width: 160px; height: 38px;" */

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-right: 1vw; 
	text-align: right; 
	font-size: 1.4rem; 
	color: white;
}

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

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

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

@media screen and (max-width: 768px){
  .footerimg {
	text-align: center;
	width: 100vw; 
	height: auto;  
	margin-bottom: 0px; 
}
}

p {
  text-align: center;
}

table {
  text-align: center;
  margin-left: 1.5vw;
}

.tbl-r01 {
	border: none;
}

.tbl-r01 td {
	width: 20vw;
	}

.tbl-r02 th {
	width: 24vw;
}
.tbl-r02 td {
	width: 23vw;
}

.tbl-r03 {
	border: none;
}

.tbl-r03 th {
	width: 30vw;
}
.tbl-r03 td {
	width: 30vw;
}


@media screen and (max-width: 768px) {
  
table {
  margin-left: 0;
  text-align: center;
}
  
  .last td:last-child {
    width: 100%;
  }

.tbl-r01 {
    width: 90%;
	border: none;
  }
  .tbl-r01 th,
  .tbl-r01 td {
    text-align: center;
    margin-left: -1vw;
　　border-bottom: none;
    display: block;
    width: 100%;
  }

  .tbl-r02 {
    width: 90%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
    text-align: center;
    margin-left: -1vw;
　　border-bottom: none;
    display: block;
    width: 100%;
  }

  .tbl-r03 {
    width: 84vw;
  }
  .tbl-r03 th,
  .tbl-r03 td {
    text-align: center;
    margin-left: 0;
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

.col-head-type1 {
  	border-collapse: collapse;
  	width: 91%;
	margin-left: -0.6vw;
	}
.col-head-type1 th,
.col-head-type1 td {
	font-size: 2rem;
	border: 0.1rem solid white;  
	padding: 0.5rem;
	}
.col-head-type1 th {
    	background: black;
	text-align: center;
	}
	
@media only screen and (max-width: 768px) {
.col-head-type1 {
  	width: 91%;
	margin-left: 2vw;
	}	
	.col-head-type1 tr,
	.col-head-type1 th,
	.col-head-type1 td {
			font-size: 1.1rem;
			display: block;
    			width: auto;
  	}
	.col-head-type1 tr:first-child {
  	  		border-top: 0.1rem solid white;  
  	}
  	.col-head-type1 th,
  	.col-head-type1 td {
  	  		border-top: none;
  	}
}