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


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */

html,
body { font-family: 'Noto Sans JP', sans-serif;background-color: #f7e8d9;
}
body { position: relative;
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	will-change: transform, animation; 
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

main {width: 100%; position: relative;
	height: auto; padding: 0; margin: 0;
}

section {
	padding: 20px; margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;

}


@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
	.listen a:hover {
		opacity: 1;
	}
	
	.listen a:hover {
		transform: scale(1.1);
	}
	
}
@media screen and (max-width: 820px) {
	body {
		font-size: min(3vw, 14px);
	}
	.pc { display: none;}
	
}



/* ////////////////////////////////////////////////////////////////////////////////

	Title

//////////////////////////////////////////////////////////////////////////////// */
.title {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;text-align: center; color: #DF2935;
}
.title p{padding: 30px 0 0 0; font-weight: bold;font-size: 18px; }

.title h1 {
padding: 0;
font-size: 200%; font-weight: bold;
	letter-spacing: .24em;
	line-height: 1.6;
animation: fadein 3s ease-out forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}


@media screen and (min-width: 821px) {
	.title h1 {	
width: 100%;
	}
}
@media screen and (max-width: 820px) {
	.title h1 { padding: 20px 10px 0 10px; font-size: 200%;
	}
.title img{
width: 100%;
}


}

/* ////////////////////////////////////////////////////////////////////////////////

	Footer

//////////////////////////////////////////////////////////////////////////////// */

footer { text-align: center; position: absolute; z-index: 99;
 width: 100%; height: 20px; bottom: 0;
}
footer .copyright {
	font-size: 10px;color: #000;
}


/* ////////////////////////////////////////////////////////////////////////////////

	Content

//////////////////////////////////////////////////////////////////////////////// */


#playlist .playlistWrap {
	display: none; position: relative;
	width: 60%;
    height: auto; padding: 0;
	margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#playlistSingle #playlist .playlistWrap {
	display: block;
	opacity: 0;
	animation: pl 1s ease-out 0s forwards;
}
@keyframes pl {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
#playlist h3 { color: #fff;
	text-align: center;
    padding: 0 0 15px;
    font-size: 24px;
    letter-spacing: .1em;
    margin-bottom: 10px;
}
#playlist .jacket {
    line-height: 0;
    width: 40vh;
    margin: 0 auto 35px;
}
#playlist .jacket img{
width: 100%; height: auto;
}

#playlist .flame{ width: 400px; margin: auto; border: 4px #35201b solid; padding: 14px; margin-bottom: 20px; margin-top: 20px;
}

#playlist .songlist { color: #000;
    column-count: 1;
    margin-bottom: 0px;
	width: 90%; margin: auto;
}
#playlist .songlist li { color: #35201b;
    width: 100%;
    text-indent: -20px;
	list-style-position: inside;
	padding: 8px 0 8px 1em;
    font-size: 20px; font-weight: bold;
    margin: 0 auto;
    line-height: 1.6;
}

#playlist .listen a {
	display: block;
	margin: 0 auto;
	color: #a3182d;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	width: 260px;
	background-color: #ffc4e4;
	padding: 10px;
  border-radius: 40px;
  position: relative;
  z-index: 1;  transition: .3s;
}

#playlist .listen span {
	display: block;
	margin: 0 auto;
	color: #ffc4e4;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	width: 260px;
	padding: 15px;
}
#playlist .listen p {
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
}
#playlist .listen a:hover {
  color: #ffc4e4;
  background: transparent;
}
#playlist .listen a:hover::before {
  transform: scale(1);
  opacity: 1;
}

#playlist .listen a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #ffc4e4;
  border-radius: 40px;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}

.btnBack a {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 3px;
    border-radius: 40px;
    margin: 0 auto 10px;
    border: #fff solid 1px;
    width: 180px;
}
.btnBack a:hover {  color: #fff; background-color:#7d80f6 ; }


@media screen and (max-width: 1024px) {
	#playlist .playlistWrap {
		max-width: 680px; 
		margin: 0 auto;
	}
}
@media screen and (max-width: 820px) {
	
	#playlist {
		top: 10px;
		left: 10px;
	}
	#playlist .contentWrap {
		width: 100%;
		height: 100%;
		padding: 5px;
		display: block;
		overflow: auto;
	}

	
	#playlist h3 { 
		padding: 0 0 min(3vw, 15px);
		font-size: min(3vw, 18px);
		margin-bottom: min(8vw, 20px); margin-top: 10px;
	}
	#playlist .jacket {
		width:100%;
		margin: 0 auto ;
	}
	#playlist .songlist {
		column-count: unset;
		margin-bottom: min(8vw, 10px);
		width: 100%;
	}
	#playlist .songlist li { 
		width: 100%;
		padding: min(2vw, 8px) 0 min(2vw, 8px) 1em;
		font-size: min(3.2vw, 16px);
	}
	#playlist .listen a,
	#playlist .listen span { 
		font-size: min(3.8vw, 18px);
		width: min(54vw, 260px);
		padding: min(3vw, 15px);
	}
	
	#playlist .listen p {
		font-size: min(3vw, 14px);
		margin-top: min(3vw, 10px);
	}


#playlist .playlistWrap { 
	width: 90%;
    height: auto; padding: 0;
	margin: 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#playlistSingle #playlist .playlistWrap { 
	display: block; padding: 0; margin:0;
	opacity: 0;
	animation: pl 1s ease-out 0s forwards;
}
	
	.btnBack {
		margin-top: min(1vw, 10px);
	}
	.btnBack a {
		font-size: min(2.8vw, 14px);
		padding: min(1vw, 3px);
    	width: min(40vw, 260px);
	}

#playlist .flame{ width: 100%; margin: auto; border: 4px #ffc6e6 solid; padding: 14px 14px 0 14px; margin-bottom: 20px; margin-top: 20px;
}

}
div.share{ margin: 10px 0 ;color: #fff;text-align: center;}
ul.snsShare{ display:flex;justify-content:center;align-items:center;}
ul.snsShare li{ padding: 0 10px; font-size: 40px; line-height: 1; margin-left: 10px;}
ul.snsShare li a{ color: #fff;}
ul.snsShare li img{ padding-top: 8px; width: 40px; height: auto;}

.sns-x_bg{ background-color: #c00000; border-radius: 10px; display: inline-block; width: 40px; padding: 5px; text-align: center; font-size: 70%; }

section .wave01{position: absolute; bottom: 0px; left: 0; width: 30%;}
section .wave02{position: absolute; top: 0; right: 0; width: 30%;}

.blink{ position: absolute; top: 0; left: 20%; width: 10%;}
.blink02{ position: absolute; top: 0; right: 0;}
.blink03{ position: absolute; top: 80%; right: 0; width: 20%;}