@charset "utf-8";

@font-face {
	font-family: "NSansJP";/*要素に指定するときに使うフォント名*/
	src:url(../fonts/NSansJP-R.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "NSansJP";
	src:url(../fonts/NSansJP-L.woff2) format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* font size */
	html{
	font-size: 15px;
	}

	/* MOB */
	@media screen and (max-width:599px){
		h1,h2{
		font-size:1.2rem;
		}
	}

	/* TAB*/
	@media screen and (min-width:600px) and (max-width:1024px){
		h1,h2{
		font-size:1.5rem;
		}
	}

	/* PC*/
	@media screen and (min-width:1025px){
		h1,h2{
		font-size:1.8rem;
		}
	}

/* general */
	*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	box-sizing:border-box;
	color: #242121;
	}

	body{
	font-family: "NSansJP",sans-serif;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height:1.9;
	}
	
	a:hover{
	opacity:0.5;
	}

	.fb{
	display:flex;
	flex-wrap:wrap;
	}

/* header */

	.head-wrap{
	width:100%;
	display:flex;
	padding-left:20px;
	position:fixed;
	top:0;
	background:#fff;
	z-index:98;
	}

/* header's style for home only */
	#home .head-wrap{
	position:absolute;
	background:transparent;
	}

	/* MOB*/
	@media screen and (max-width:599px){
		#home h1{
		margin-left:40px;
		}
	}

	/* TAB*/
	@media screen and (min-width:600px) and (max-width:1024px){
		#home h1{
		margin-left:60px;
		}
	}

	/* PC*/
	@media screen and (min-width:1025px){
		#home h1{
		margin-left:70px;
		}
	}

/* YC icon  */
	#home .yc_svg{
	position:fixed;
	fill:#DD4A22;
	}

	#music .yc_svg{
	fill:#F4DE16;
	}

	#about .yc_svg{
	fill:#64CCBD;
	}

	#mail .yc_svg{
	fill:#737373;
	}

/* MOB YC-size */
	@media screen and (max-width:599px){
		.yc_svg{
		width:30px;
		height:43.12px;
		}
	}

/* TAB YC-size */
	@media screen and (min-width:600px) and (max-width:1024px){
		.yc_svg{
		width:40px;
		height:57.49px;
		}
	}

/* PC YC-size */
	@media screen and (min-width:1025px){
		.yc_svg{
		width:50px;
		height:71.8636px;
		}
	}

/* MOB header */
@media screen and (max-width:599px){
	.head-wrap h1{
	font-size:1.2rem;
	margin-top:8px;
	margin-left:12px;
	}
		
	.menu-btn{
	position:fixed;
	bottom:-10px;
	right:-10px;
	visibility:hidden;
	z-index:99;
	cursor:pointer;
	}
	
	/* menu button */
	.menu-btn::after{
	visibility:visible;
	content:"menu";	
	display:block;
	position:fixed;
	bottom:30px;
	right:30px;
	width:60px;
	height:60px;
	text-align:center;
	font-size:1rem;
	line-height:60px;
	border: 0.5px solid rgba(100, 100, 100, 0.3);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.8);
	cursor:pointer;
	}
	
	/* close button */
	.btn-active::after{
	visibility:visible;
	content:"close";	
	display:block;
	position:fixed;
	bottom:30px;
	right:30px;
	width:60px;
	height:60px;
	text-align:center;
	font-size:1rem;
	line-height:60px;
	border: 0.5px solid rgba(100, 100, 100, 0.3);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.5);
	cursor:pointer;
	}

	/* default menu (hidden) */
	.menu{
	opacity:0;
	position:fixed;
	top:0;
	left:100vw;
	transition: opacity 2s ease 0s;
	}
	
	/* view menu */
	.menu.menu-active{
	opacity:1;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:rgba(255, 255, 255, 1);
	z-index:97;
	}
	
	/* default menu-text (hidden) */
	.menu-home,.menu-music,.menu-about,.menu-mail{
	position:fixed;
	display:block;
	width:180px;
	font-size:1.4rem;
	line-height:2;
	text-align:right;
	padding-right:35px;
	}
	
	.menu-home{
	bottom:270px;
	right:-200px;
	transition: right 0.5s ease 0.1s;
	}
	
	.menu-music{
	bottom:220px;
	right:-200px;
	transition: right 0.5s ease 0.2s;
	}
	
	.menu-about{
	bottom:170px;
	right:-200px;
	transition: right 0.5s ease 0.3s;
	}
	
	.menu-mail{
	bottom:120px;
	right:-200px;
	transition: right 0.5s ease 0.4s;
	}
	
	/* view menu-text */
	.h-active,.mu-active,.a-active,.ma-active{
	position:fixed;
	display:block;
	width:180px;
	font-size:1.4rem;
	line-height:2;
	text-align:right;
	padding-right:35px;
	}
	
	.menu-home.h-active{
	right:0;
	}
	
	.menu-music.mu-active{
	right:0;
	}
	
	.menu-about.a-active{
	right:0;
	}
	
	.menu-mail.ma-active{
	right:0;
	}
}


/* TAB header */
@media screen and (min-width:600px) and (max-width:1024px){
	.head-wrap h1{
	font-size:1.5rem;
	margin-top:14px;
	margin-left:15px;
	}

	.menu-btn{
	display:none;
	}

	.menu{
	position:fixed;
	bottom:0;
	left:0;
	width:100vw;
	height:90px;
	padding:13px calc(50vw - 250px);
	display:flex;
	justify-content:space-between;
	background:rgba(255, 255, 255, 0.8);
	font-size:1.3rem;
	}
}

/* PC header */
@media screen and (min-width:1025px){
	.head-wrap h1{
	font-size:1.8rem;
	margin-top:24px;
	margin-left:15px;
	}

	.menu-btn{
	display:none;
	}

	.menu{
	width:300px;
	margin-left:35px;
	margin-top:40px;
	display:flex;
	justify-content:space-between;
	}
}

/* MOB home-top-img */
@media screen and (max-width:599px){
	#top-img{
	background:url(../img/mobtop.jpg);
	background-size:cover;
	background-position: bottom;
	width:100%;
	height:178vw;
	}
}

/* TAB home-top-img */
@media screen and (min-width:600px) and (max-width:1024px){
	#top-img{
	background:url(../img/tabtop.jpg);
	background-size:cover;
	background-position: bottom;
	width:100%;
	height:140vw;
	}
}

/* PC home-top-img */
@media screen and (min-width:1025px){
	#top-img{
	background:url(../img/pctop.jpg);
	background-size:cover;
	background-position: bottom;
	width:100%;
	height:70vw;
	}
}

/* MOB home contents */
@media screen and (max-width:599px){
	.outnow-wrap{
	width:100%;
	height:95vw;
	}
	
	.whats-wrap{
	width:100%;
	line-height:1.6;
	}
	
	.outnow-wrap img{
	width:70%;
	object-fit:cover;
	margin:15vw;
	}
	
	.whats-wrap ul{
	width:70%;
	margin:0 15vw;
	}
	
	.whats-wrap h2{
	font-size:1.3rem;
	}
	
	.whats-wrap h3{
	font-size:1.5rem;
	}
	
}

/* TAB home contents */
@media screen and (min-width:600px) and (max-width:1024px){
	.outnow-wrap{
	width:100%;
	height:95vw;
	}
	
	.whats-wrap{
	width:100%;
	line-height:1.6;
	}
	
	.outnow-wrap img{
	width:70%;
	object-fit:cover;
	margin:15vw;
	}
	
	.whats-wrap ul{
	width:70%;
	margin:0 15vw;
	}
	
	.whats-wrap h2{
	font-size:1.3rem;
	}
	
	.whats-wrap h3{
	font-size:1.5rem;
	}
	
}

/* PC home contents */
@media screen and (min-width:1025px){
	.outnow-wrap{
	width:50%;
	height:40vw;
	}
	
	.whats-wrap{
	width:50%;
	height:40vw;
	}
	
	.outnow-wrap img,.whats-wrap ul{
	width:50%;
	object-fit:cover;
	margin:7.5vw 12.5vw;
	}
}

/* main-margin-top for subpage */
	/* main-MOB */
	@media screen and (max-width:599px){
		#news main,#music main,#about main,#mail main{
		margin-top:53px;
		}
	}

	/* main-TAB*/
	@media screen and (min-width:600px) and (max-width:1024px){
		#news main,#music main,#about main,#mail main{
		margin-top:60px;
		}
	}

	/* main-PC*/
	@media screen and (min-width:1025px){
		#news main,#music main,#about main,#mail main{
		margin-top:75px;
		}
	}

/* music */
	#music li{
	font-weight:300;
	}
	/* music-MOB */
	@media screen and (max-width:599px){
		#music main{
		min-height:calc(100vh - 296px);
		}
		
		.music-img,.a-music-img{
		width:100%;
		vertical-align:middle;
		}
		
		.music-grid:hover{
		opacity:0.7;
		}
		
		.music-data{
		padding:30px 20px;
		}
		
		.music-title::before{
		content:attr(data-item);
		}
		
		.music-title h2{
		font-size:1.3rem;
		}
		
		.music-rele{
		margin-bottom:20px;
		}
		
		.music-songs{
		font-size:1rem;
		}
		
		.tap-req{
		font-size:0.7rem;
		line-height:5;
		}
	}
		
	/* music-TAB */
	@media screen and (min-width:600px) and (max-width:1024px){
		#music main{
		min-height:calc(100vh - 380px);
		}
		
		.music-item{
		width:50%;
		}
		
		.music-img{
		width:100%;
		vertical-align:middle;
		}
		
		.a-music-img{
		width:60%;
		vertical-align:middle;
		margin:30px 0 0 20%;
		}
		
		.music-grid:hover{
		opacity:0.7;
		}
		
		.music-data{
		width:100%;
		padding:30px 0 0 20%;
		}
		
		.music-title::before{
		content:attr(data-item);
		}
		
		.music-title h2{
		font-size:1.2rem;
		}
		
		.music-rele{
		margin-bottom:20px;
		}
		
		.music-songs{
		font-size:1rem;
		}
		
		.tap-req{
		font-size:0.7rem;
		line-height:5;
		}
	}
	
	/* music-PC*/
	@media screen and (min-width:1025px){
		#music main{
		min-height:calc(100vh - 295px);
		}
		
		.m-fb-pc{
		display:flex;
		flex-wrap:wrap;
		width:1000px;
		margin:0 auto;
		}
		
		.music-item{
		width:25%;
		}
		
		.music-img{
		width:100%;
		vertical-align:middle;
		}
		
		.a-music-img{
		width:450px;
		height:450px;
		margin:50px 0 0 50px;
		vertical-align:middle;
		}
		
		.music-grid:hover{
		opacity:0.7;
		}
		
		.music-data{
		width:50%;
		padding:50px;
		}
		
		.music-title::before{
		content:attr(data-item);
		}
		
		.music-title h2{
		font-size:1.2rem;
		}
		
		.music-rele{
		margin-bottom:20px;
		}
		
		.music-songs{
		font-size:1rem;
		}
		
		.tap-req{
		font-size:0.7rem;
		line-height:5;
		}
	}
	
	/* lyric-MOB */
	@media screen and (max-width:599px){
		.lyric-wrap{
		width:calc(100% - 40px);
		margin:60px auto 30px;
		border:solid 0.5px #bababa;
		}
		
		.lyric-wrap li{
		padding-left:15px;
		padding-right:15px;
		}
		
		.lyric-title{
		font-size:1.4rem;
		line-height:1.3;
		padding-top:15px;
		}
		
		.lyric-wrap li aside{
		font-size:0.8rem;
		line-height:1;
		padding-bottom:15px;
		margin-top:5px;
		}
		
		.lyric-lyric{
		border-top:solid 0.5px #bababa;
		font-size:0.9rem;
		white-space: pre-wrap;
		padding-top:30px;
		padding-bottom:50px;
		}
		
		.back{
		margin-left:20px;
		font-weight:300;
		}
	}
	
	/* lyric-TAB */
	@media screen and (min-width:600px) and (max-width:1024px){
		.lyric-wrap{
		width:calc(100% - 40px);
		margin:90px auto 30px;
		border:solid 0.5px #bababa;
		}
		
		.lyric-wrap li{
		padding-left:15px;
		padding-right:15px;
		}
		
		.lyric-title{
		font-size:1.4rem;
		line-height:1.3;
		padding-top:15px;
		}
		
		.lyric-wrap li aside{
		font-size:0.8rem;
		line-height:1;
		padding-bottom:15px;
		margin-top:5px;
		}
		
		.lyric-lyric{
		border-top:solid 0.5px #bababa;
		font-size:0.9rem;
		white-space: pre-wrap;
		padding-top:30px;
		padding-bottom:50px;
		}
		
		.back{
		margin-left:20px;
		font-weight:300;
		}
	}

	/* lyric-PC */
	@media screen and (min-width:1025px){
		.lyric-wrap{
		width:600px;
		margin:110px auto 30px;
		border:solid 0.5px #bababa;
		}
		
		.lyric-wrap li{
		padding-left:15px;
		padding-right:15px;
		}
		
		.lyric-title{
		font-size:1.4rem;
		line-height:1.3;
		padding-top:15px;
		}
		
		.lyric-wrap li aside{
		font-size:0.8rem;
		line-height:1;
		margin-top:5px;
		padding-bottom:15px;
		}
		
		.lyric-lyric{
		border-top:solid 0.5px #bababa;
		font-size:0.9rem;
		white-space: pre-wrap;
		padding-top:30px;
		padding-bottom:50px;
		}
		
		.back{
		display:block;
		width:600px;
		margin:0 auto;
		font-weight:300;		
		}
	}
	
/* about */
	#about span{
	font-weight:400;
	}
	
	#about aside{
	font-size:0.8rem;
	}

/* about-MOB */
	@media screen and (max-width:599px){
	.about-img{
	background:url(../img/pfp_medium.jpg);
	background-position:50% 60%;
	width:100%;
	height:calc(100vw - 40px);
	background-size:cover;
	}
	
	#about-me ul{
	padding:40px 20px;
	}
	
	#about-me li{
	margin-bottom:20px;
	}
	
	.history{
	font-size:0.9rem;
	font-weight:300;
	background:#DEDDDD;
	}
}

/* about-TAB */
	@media screen and (min-width:600px) and (max-width:1024px){
	.about-img{
	background:url(../img/pfp_medium.jpg);
	background-position:50% 60%;
	width:100%;
	height:calc(100vw - 40px);
	background-size:cover;
	}
	
	#about-me ul{
	padding:40px 20px;
	}
	
	#about-me li{
	margin-bottom:20px;
	}

	.history{
	font-size:0.9rem;
	font-weight:300;
	background:#DEDDDD;
	}
}

/* about-PC */
	@media screen and (min-width:1025px){
	#about-me{
	max-width:1300px;
	margin:0 auto;
	}
	
	.about-img{
	background:url(../img/pfp_medium.jpg);
	width:480px;
	height:640px;
	background-size:cover;
	}
	
	.about-text{
	width:calc(100% - 480px);
	max-width:820px;
	margin-top:80px;
	}
	
	#about-me ul{
	padding:40px 30px;
	}
	
	#about-me li{
	margin-bottom:20px;
	}
	
	.about-hist{
	width:100%;
	background:#DEDDDD;
	}
	
	.history h3{
	font-size:1.5rem;
	}
	
	.history{
	font-weight:300;
	max-width:1300px;
	}
}

/* mail */
	/* mail-MOB */
	@media screen and (max-width:599px){
		#mail main{
		height:calc(100vh - 296px);
		min-height:500px;
		padding:50px 20px 0;
		}
		
		#mail main p{
		padding:0 0 30px;
		}
	}

	/* mail-TAB */
	@media screen and (min-width:600px) and (max-width:1024px){
		#mail main{
		height:calc(100vh - 380px);
		min-height:500px;
		padding:50px 20px 0;
		}
	}

	/* mail-PC */
	@media screen and (min-width:1025px){
		#mail main{
		height:calc(100vh - 310px);
		min-height:500px;
		padding:50px 20px 0;
		}
	}

/* footer */
	.fh{
	padding-top:50px;
	text-align:center;
	}
	
	footer ul{
	width:230px;
	margin:0 auto;
	padding-top:40px;
	justify-content:space-between;
	}

	footer li{
	width:25px;
	}

	footer img{
	width:25px;
	object-fit:cover;
	}

	small{
	display:block;
	width:100%;
	text-align:center;
	position:absolute;
	font-size:0.6rem;
	font-weight:300;
	}

	/* footer-MOB */
	@media screen and (max-width:599px){
		footer{
		height:250px;
		position:relative;
		}
		
		small{
		bottom:50px;
		}
	}

	/* footer-TAB*/
	@media screen and (min-width:600px) and (max-width:1024px){
		footer{
		height:320px;
		position:relative;
		}
		
		small{
		bottom:120px;
		}
	}

	/* footer-PC*/
	@media screen and (min-width:1025px){
		footer{
		height:220px;
		position:relative;
		}
		
		small{
		bottom:20px;
		}
	}