@charset "utf-8";

/* revival */
#revival{
	position: relative;
	margin:  0 auto;
	padding: 20px 0 0 0;
}
#revival h2{margin: 0 auto 30px auto;}
#revival .lead{
	position: relative;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
#revival .lead ruby[data-ruby]::before{top:-0.5em;}

/* release */
#revival #release{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 50px);
	max-width: 680px;
	padding-bottom: 40px;
}
#revival #release dl{position: relative;}
#revival #release dl dt{
	position: relative;
	margin: 0 auto;
	padding: 7px 0;
	font-size: 90%;
	line-height: 1em;
	background-image: url("../img/bg/bg_yellow.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	text-align: center;
	color: #000000;
}
#revival #release dl dd{
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0 20px 0;
}
#revival #release dl dd p{padding-top: 10px;}

/* list */
#revival #list{
	position: relative;
	margin: 0 auto 40px auto;
	padding: 20px 0 60px 0;
	background-image: url("../img/bg/bg_more.jpg");
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 100px auto;
}
#revival #list ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 1100px;
	gap: 20px 10px;
}
#revival #list ul li{
	position: relative;
	margin: 0;
	width: calc(100% - 60px);
	padding: 20px;
	outline: solid 1px #ffef00;
	outline-offset: -1px;
	background-color: rgba(15,16,18,0.5);
}
#revival #list ul li .Img{
	position: relative;
	margin: 0 auto;
	width: 70%;
}
#revival #list ul li .title{
	position: relative;
	margin: 20px auto;
	text-align: center;
	font-size: 120%;
	color: #ffef00;
}
#revival #list ul li .title ruby[data-ruby]::before{top:-0.7em;}
#revival #list ul li .area{
	position: relative;
	margin: 10px auto 0 auto;
	gap: 10px 0;
	text-align: center;
}
#revival #list ul li .area a{
	position: relative;
	margin: 0 auto;
	width: 100%;
	display: block;
	padding: 7px 10px;
	background-color: #ffef00;
	font-size: 90%; 
	border-radius: 7px;
	outline: solid 2px #000000;
	outline-offset: -4px;
}
#revival #list ul li .area a span{display: block;}
#revival #list ul li .area a span.shop{font-size: 120%; padding-bottom: 3px;}
#revival #list ul li .area a span.kikan{padding-bottom: 10px;}
#revival #list ul li .area a span.underline{display: inline-block;}
span.arrow{
	position: relative;
	margin: 0.2em 0 0 0.5em;
	width: 0.6em;
	height: 0.8em;
	display: inline-block !important;
	clip-path: polygon(0 0,100% 50%,0 100%);
	background-color: #000000;
}

#revival .links{
	position: relative;
	margin: 40px auto 60px auto;
	width: calc(100% - 40px);
	max-width: 560px;
	text-align: center;
}
#revival .links p{
	padding-bottom: 5px;
	color: #ffef00;
}
#revival .links a{
	background-color: #ffef00;
	color: #000000;
	display: block;
	outline: solid 1px #ffef00;
	outline-offset: -1px;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* revival */
	#revival h2{margin: 0 auto 50px auto;}
	#revival .lead{margin: 20px auto 0 auto;}

	/* release */
	#revival #release{
		margin: 80px auto 0 auto;
		padding-bottom: 100px;
	}
	#revival #release h2{max-width: 480px;}
	#revival #release dl dt{padding: 8px 0;}
	#revival #release dl dd{padding: 20px 0 40px 0;}

	/* list */
	#revival #list{
		margin: 0 auto 80px auto;
		padding: 20px 0 90px 0;
	}
	#revival #list ul{
		gap: 20px 10px;
		justify-content: flex-start;
	}
	#revival #list ul li{
		width: calc(33.333% - 47px);
		padding: 20px;
	}
	#revival #list ul li .title{font-size: 100%;margin: 20px auto;}
	#revival #list ul li .text{font-size: 86%;line-height: 1.6em;}
	#revival #list ul li .title ruby[data-ruby]::before{top:-0.5em;}
	#revival #list ul li .area{
		margin: 20px auto 0 auto;
		font-size: 86%;
	}
	#revival #list ul li .area a span.shop{font-size: 130%; padding-bottom: 0;}
	#revival #list ul li .area a span.kikan{padding-bottom: 5px;}
	#revival #list ul li .area a:hover{color: #000000;background-color: #FFFFFF;}

	#revival .links{margin: 60px auto 100px auto;}


}