@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}

.box1,.box2{
	opacity: 0;
}
::-webkit-scrollbar{
		height: 10px;
		width: 10px;
	}
	/*スクロールバーの色と形*/
	::-webkit-scrollbar-thumb {
		/*縦方向にグラデーション*/
  		background: linear-gradient(0deg,dimgray,black);
  		border-radius: 5px;
	}
/*===============================================

●ＰＣ用CSS 画面の横幅が641px以上のとき

===============================================*/

@media screen and (min-width : 641px) {
	.mobile_nav{
		display: none;
	}
	
	/*ヘッダーの編集*/
	header{
		height: 100px;
		background-color: #1f1f1f;
		display: flex;
		justify-content: space-around;
	}
	/*ロゴ*/
	.Logo{
		width: 200px;
		margin: 5px 5px 5px 20%;
	}
	/*ナビ*/
	.PC_nav{
		margin-top: 60px;
		margin-right: 10%;
	
	} 
	.PC_nav ul{
		display: flex;
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
		width: 100%;
	}
	.PC_nav li{
		padding: 0 5px;
	}

	.PC_nav li a{
		height: 60px;
		display:block;
		line-height: 60px;
		color: white;
		text-decoration: none;
		font-size: 16px;
	}

	/*メインビジュアル*/
	.mainvisual{
		padding-top: 50px;
	}

	/*メイン*/
	main{
		width: 500px;
		margin: 50px auto;
		padding: 60px;
		justify-content: center;
		background-color:darkgray;
	}

	main h2,h3{
		color: white;
		margin-bottom: 20px;
		text-align: center;
	}

	main p{
		color: white;
		text-align: center;
		margin-bottom: 50px;
		margin-top: 10px;
		font-weight: bold;
	}
	main img{
		display: block;
		width: 60%;
		margin: 0 auto;
	}

	/*お知らせ*/
	.news{
		width: 500px;
		margin: 50px auto;
		padding: 60px;
		justify-content: center;
	}

	.news h2{
		margin-bottom: 20px;
		text-align: center;
	}

	.news_inner{
		width: 400px;
		height: 400px;
		overflow-y: scroll;
		margin: 0 auto;
	}
	
	dl{
		display: flex;
		flex-wrap: wrap;
		width: 100%
	}

	dt{
		width: 30%;
		padding-bottom: 10px;
		font-weight: bold
	}

	dd{
		width: 70%;
		padding-bottom: 10px;
		font-weight: bold
	}
	

	/*使用上の注意*/
	.guide-line{
		width: 500px;
		margin: 50px auto;
		padding: 60px;
		justify-content: center;
		background-color:darkgray;
	}

	.guide-line h2{
		color: white;
		text-align: center;
		margin-bottom: 20px;
	}
	.guide-line p{
		text-align: center;
		color: white;
		margin-bottom: 60px;
		margin-top: 10px;
		font-weight: bold;
	}

	/*REQUEST*/
	.request{
		width: 500px;
		margin: 50px auto;
		padding: 60px;
		justify-content: center;
	}

	.request h2{
		text-align: center;
		margin-bottom: 30px;
	}

	.request h3{
		color: black;
		text-align: center;

	}
	
	.request p{
		text-align: center;
		margin-bottom: 10px;
		margin-top: 10px;
		font-weight: bold
	}

	/*フッダー*/
	footer{
		height: 60px;
		background: #1f1f1f;
		text-align: center;
	}
	
	.PC_footer{
		margin-top: 7px;
		margin-right: 19%;
	}

	footer ul{
		padding-top: 7px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
		width: 100%;
	}
	
	footer li{
		padding: 0 5px;
	}
	
	footer li a{
		text-decoration: none;
		color: white;
		font-size: 14px;
	}

	small{
		color: white;
		font-size: 8px;
	}
}

/*===============================================

●スマホ用CSS  画面の横幅が640px以下のとき

===============================================*/

@media screen and (max-width:640px){
	.PC_nav{
		display: none;
	}
	
	header{
		position: fixed;
		top: 0;
		left: 0;
		height: 80px;
		width:100%;
		background-color: #1f1f1f;
		display: flex;
		justify-content: space-between;
		z-index: 999;
	}

	/*ロゴ*/
	.Logo{
		width: 180px;
		margin: 5px 5px 5px 20%;
	}
	/*ナビ*/
	.mobile_nav{
		padding-top: 10%;
		margin-right: 10%;
	
	} 
	.mobile_nav ul{
		align-items: center;
		list-style-type: none;
		margin: 0 0 0 auto;
	}
	
	.mobile_nav li{
		padding: 0 5px;
	}

	.mobile_nav li a{
		color: white;
		text-decoration: none;
		font-size: 16px;
	}

	/*メインビジュアル*/
	.mainvisual{
		top: 80px;
		padding-top: 100px;
	}

	/*メイン*/
	main{
		width: 80%;
		margin: 30px auto;
		padding: 60px 10px 30px;
		justify-content: center;
		background-color:darkgray;
	}

	main h2{
		color: white;
		margin-bottom: 20px;
		text-align: center;
		font-size: 24px;
	}
	main h3{
		color: white;
		text-align: center;
		font-size: 18px;
	}

	main p{
		color: white;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 5px;
		font-weight: bold;
		font-size: 12px;
		line-height: 20px;
	}
	main img{
		display: block;
		margin: 0 auto;
		width: 60%;
	}

	/*お知らせ*/
	.news{
		width: 80%;
		margin: 50px auto;
		padding: 60px 10px;
		justify-content: center;
	}

	.news h2{
		margin-bottom: 20px;
		text-align: center;
		font-size: 24px;
	}

	.news_inner{
		width: 100%;
		height: 300px;
		overflow-y: scroll;
		margin: 0 auto;
	}

	dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	dt{
		width: 35%;
		padding-bottom: 10px;
		font-weight: bold;
		font-size: 12px;
	}

	dd{
		width: 65%;
		padding-bottom: 10px;
		font-weight: bold;
		font-size: 12px;
	}

	/*使用上の注意*/
	.guide-line{
		width: 80%;
		margin: 50px auto;
		padding: 60px 10px 30px;
		justify-content: center;
		background-color:darkgray;
	}

	.guide-line h2{
		color: white;
		text-align: center;
		margin-bottom: 20px;
		font-size: 24px
	}
	.guide-line p{
		color: white;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 5px;
		font-weight: bold;
		font-size: 12px
	}

	/*CONTACT*/
	.request{
		width: 80%;
		margin: 50px auto;
		padding: 60px 10px 30px;
		justify-content: center;
	}

	.request h2{
		text-align: center;
		margin-bottom: 30px;
		color: black;
		font-size: 24px
	}
	
	.request h3{
		text-align: center;
		margin-bottom: 30px;
		color: black;
		font-size: 16px
	}
	.request p{
		text-align: center;
		font-weight: bold;
		font-size: 14px
	}

	/*フッダー*/
	footer{
		height: 60px;
		width: 100vw;
		background: #1f1f1f;
		text-align: center;
	}
	small{
		margin-top: auto;
		color: white;
		font-size: 8px;
	}
	
	.PC_footer{
		display: none;
	}

}