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

1.リセット
2.全体設定
3.タイトル
4.ナビゲーション
5.フッタ
6.メインコンテンツ
7.レスポンシブ

------------------------------------------------------------------------------------------------ */

/* 1.リセット -------------------------------------------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
a{color:#fc0;text-decoration:none;}
a:hover, .active{color:#fff;text-decoration:underline;}
a:active, a:focus,input:active, input:focus{outline:0;}

/* 2.全体設定 -------------------------------------------------------------------------------------- */

@font-face {font-family:"neslike";src:url("./font/neslike.woff") format('woff');}

body{
	font:24px/1.9 'neslike', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
	font-weight:0;-webkit-text-size-adjust:100%;overflow-x:hidden;color:#fff;background:#000;overscroll-behavior-y:none;
}
body,#menu,#players,#scores,#copyright{display:flex;align-items:center;}
#seaNsky,#scores,#wrap{position:fixed;top:0;left:0;}

/* 3.タイトル -------------------------------------------------------------------------------------- */

#seaNsky{z-index:-10;}
#players{flex-direction:column;justify-content:center;width:100%;height:100vh;}
h1{margin-top:200px;}
#scores{justify-content:space-around;width:100%;}
#scores p,#scores span{display:block;text-align:center;}

/* 4.ナビゲーション ----------------------------------------------------------------------------------- */

#menu{flex-direction:column;justify-content:center;margin-top:30px;}

/* 5.フッタ --------------------------------------------------------------------------------------- */

#copyright{position:fixed;bottom:50px;align-items:flex-end;justify-content:center;width:100%;}
#copyright a{color:#fff;}

/* 6.メインコンテンツ ---------------------------------------------------------------------------------- */

#wrap{width:100%;height:100vh;z-index:90;cursor:pointer;}
#products,#photographs{text-align:center;}
#products,#photographs,#profile{
	display:none;margin:0 auto;min-width:1024px;width:70%;height:100vh;z-index:100;
	font-size:16px;background:rgba(80,80,80,0.7);overflow-y:scroll;scrollbar-color:rgba(10,10,10,0.8) rgba(60,60,60,0.8);scrollbar-width:thin;
}
h2{font-size:22px;margin:90px 0 50px}
h3{font-size:20px;margin:90px 0 50px 40px;}
img{margin-bottom:50px;}
.detail,#profile_detail p,#profile_detail img{margin:0 80px;}
.photos p{margin:0 80px;}
.photos img{object-fit:cover;max-width:500px;max-height:500px;}
.detail p{margin-bottom:50px;}
#profile_detail h2{margin-left:40px;}
#profile_detail ul li{margin:0 80px 0 120px;}
.final{margin-bottom:50px !important;}

/* 7.レスポンシブ ------------------------------------------------------------------------------------ */

@media only screen and (max-width:640px){
	
	img,.detail,#profile_detail p,#profile_detail img,.photos p,.detail p,#profile_detail ul li{margin:0;}
	body,h2,h3{font-size:18px;}
	
	#scores{display:none;}
	#players{padding:0 30px;text-align:center;}
	
	h1{margin-top:0px;}
	#products,#photographs,#profile{padding:0 10px;min-width:0px;width:100%;}
	img{object-fit:cover;margin-bottom:20px;max-width:375px;max-height:400px;width:95%;}
	h2,h3,#profile_detail h2{margin:20px 0;}
	.detail p{margin-bottom:30px;}
	
	#back{position:fixed;bottom:0;left:0;background-color:rgba( 255, 255, 255, 0.5 );color:#444;cursor:pointer;width:50%;text-align:center;z-index:1000;}

}

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

}