@charset "utf-8";

/* revival */
#revival{
	position: relative;
	margin: 0 auto;
}
#revival h2{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
}
#revival h2 img{
	position: relative;
	margin: 0 auto;
}
#revival .revivalWrap{
	position: relative;
	margin: 20px auto 0 auto;
}
#revival .revivalWrap .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	text-align: center;
}
#revival .lead, #revival .kikan{
	paint-order: stroke;
	text-stroke: 4px #0e0d20;
	-webkit-text-stroke: #0e0d20 4px;
}
#revival .release{
	position: relative;
	margin: 30px auto 0 auto;
	padding-bottom: 30px;
	text-align: center;
}
#revival .release h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
	background: rgba(0,0,0,0);
}
#revival .release h3{
	position: relative;
	margin: 30px auto -10px auto;
	width: calc(100% - 30px);
	max-width: 570px;
	background-color: #05163d;
	color: #ffffff;
	font-weight: 700;
	padding: 6px 0;
	line-height: 1em;
}
#revival .release .releaseWrap{
	position: relative;
	margin: 0 auto 30px auto;
	max-width: 600px;
}
#revival .release .typeTxt{
	position: relative;
	margin:  0 auto 5px auto;
	padding: 6px 0;
	background-color: #ffffff;
	max-width: 400px;
	font-weight: 500;
	line-height: 1em;
	width: calc(100% - 30px);
	color: #120f26;
}
#revival .release .typeTxt span{font-size: 80%;}
#revival .release .kikan{
	position: relative;
	margin: 0 auto;
	font-size: min(3.7vw, .14rem);
}

#revival .reList{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	padding: 30px 0 0 0;
	background-color: rgba(255,255,255,0.90);
	max-width:600px;
	border-radius: 8px;
	color: #031324;
}
#revival .reList .reBlock{
	position: relative;
	margin: 0 auto 30px auto ;
	border-bottom: solid 1px #698380;
	width: calc(100% - 30px);
	padding: 0 5px 40px 5px;
	max-width: 960px;
}
#revival .reList .reBlock:last-child{border: none;}
#revival .reList .reBlock .reImg{
	position: relative;
	width: calc(100% - 80px);
	margin: 0 auto;
	max-width: 200px;
	min-width: 100px;
}
#revival .reList .reBlock .dateList{
	position: relative;
	margin: 20px auto 0 auto;
	text-align: center;
	width: 100%;
}
#revival .reList .reBlock .dateList .Ttl{
	position: relative;
	margin:  0 auto;
	color: #C80412;
	font-weight: 700;
	font-size: .17rem;
}
#revival .reList .reBlock .dateList ul{
	position: relative;
	margin: 0 auto;
}
#revival .reList .reBlock .dateList ul li{
	position: relative;
	margin: 0 auto 40px auto;
	text-align: center;
}
#revival .reList .reBlock .dateList ul li:last-child{margin: 0 auto;}
#revival .reList .reBlock .dateList ul li .closed{
	position: relative;
	opacity: 0.2;
}
#revival .reList .reBlock .dateList ul li .closedW{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
#revival .reList .reBlock .dateList ul li .closedW::after{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '開催終了';
	font-style: italic;
	font-weight: 900;
	font-size: 130%;
	paint-order: stroke;
	text-stroke: 4px #ffffff;
	-webkit-text-stroke: #ffffff 4px;
}
#revival .reList .reBlock .dateList ul li .shopName, #revival .reList .reBlock .dateList ul li .date, #revival .reList .reBlock .dateList ul li .Btn{
	position: relative;
	margin: 10px auto 0 auto;
	width: 100%;
	font-size: .15rem;
}
#revival .reList .reBlock .dateList ul li .Btn a:nth-child(n+2){margin: 10px auto 0 auto;}
#revival .reList .reBlock .dateList ul li .shopName{
	background-color: #031324;
	padding: 2px;
	color: #ffffff;
	margin: 20px auto 0 auto;
}
#revival .reList .reBlock .dateList ul li .Btn{margin: 15px auto 0 auto;text-align: center;}
#revival .reList .reBlock .dateList ul li.end .shopName, #revival .reList .reBlock .dateList ul li.end .date{opacity: .4;}
#revival  .button{
	padding: 3px 0;
	margin: 0 auto 10px auto;
	font-size: .12rem !important;
	width: 100%;
	background: #428F92;
	border: solid 1px #ffffff;
	color: #ffffff;
}

/* history */
#history{
	position: relative;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 0;
}
#history h2{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
}
#history h2 img{
	position: relative;
	margin: 0 auto;
}
#history .historyBlock{
	position: relative;
	margin: 0 auto 40px auto;
}
#history .historyBlock .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	padding-top: 40px;
	paint-order: stroke;
	text-stroke: 4px #0e0d20;
	-webkit-text-stroke: #0e0d20 4px;
}
#history .timeline{
	position: relative;
	margin: 40px auto 0 auto;
	background-color: rgba(0,48,73,0.80);
	padding:40px 0 0 0;
}
#history .timeline .historyWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	padding-bottom: 20px;
	max-width: 760px;
}
#history .timeline .historyBox{
	position: relative;
	margin: 30px auto 40px auto;
}
#history .timeline .year{
	position: relative;
	padding-left: 17px;
	font-size: .30rem;
	font-style: italic;
	color: #76F9FF;
	max-width: 860px;
	margin: 0 auto;
}
#history .timeline .year::before{
	position: absolute;
	top: 50%;
	left: -0.2em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	transform: translateY(-50%) scale(0.8, 1);
	display: block;
	content: '\025b6';
	font-style: normal;
	font-size: .16rem;
}
#history .timeline .date{
	position: relative;
	margin:  0 auto 8px auto;
	color: #FFED00;
	font-size: .19rem;
}
#history .timeline .historyImg.badge::after{
	position: absolute;
	top:-40px;
	right: -50px;
	width: 75px;
	height: 75px;
	display: block;
	content: '';
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
	transform: rotate(6deg);
}
#history .timeline .historyImg.badge.re::after{background-image: url("../img/revival/iconR.png");}
#history .timeline .historyImg.badge.sale::after{background-image: url("../img/revival/iconN.png");}
#history .timeline .historyImg.badge.now::after{background-image: url("../img/revival/iconT.png");}
#history .timeline .historyImg{
	position: relative;
	width: calc(100% - 80px);
	margin: 20px auto 10px auto;
	max-width: 200px;
	min-width: 100px;
}
#history .timeline .historyImg.badge{margin: 30px auto 10px auto;}
#history .timeline .historyTxt{
	position: relative;
	margin: 0 auto 20px auto;
	color: #ffffff;
}
#history .timeline .ttilM{
	position: relative;
	font-size: .18rem;
	font-style: italic;
	font-weight: 700;
	margin: 0 auto;
	width: calc(100% - 20px);
}
#history .timeline .textM{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 20px);
}
#history .timeline .textM .moreTxt{
	position: relative;
	margin: 0 auto;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .3s ease-out;
}
#history .timeline .textM .moreTxt.disp{opacity: 1; height: auto;}
#history .timeline .textM .btnMore{
	position: relative;
	margin: 20px auto 40px auto;
	text-align: center;
	font-size: .12rem;
	cursor: pointer;
	width: 10em;
	border: solid 1px #ffffff;
	transition: all .3s ease-out;
	background-color: rgba(255,255,255,.2);
}
#history .timeline .textM .btnMore:hover{background-color: rgba(255,255,255,.4);}

#history .kidtwitter{
	position: relative;
	margin: 20px auto 0 auto;
	max-width: 575px;
}

#history .conan2025{
	position: relative;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 40px;
}
#history .conan2025 h2{	
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	background: rgba(0,0,0,0);
}

/* catch */
#history .conan2025 .catch{
	position: relative;
	margin: 0 auto;
	padding: 0 0 40px 0;
}
#history .conan2025 .catch .catchTxt{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 418px;
}
#history .conan2025 p{
	position: relative;
	width: calc(100% - 40px);
	margin: 0 auto 20px auto;
	text-align: center;
	paint-order: stroke;
	text-stroke: 4px #0e0d20;
	-webkit-text-stroke: #0e0d20 4px;
}
#history .conan2025 .kv{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
	border: solid 1px #ffffff;
}

.button{
	width:18em;
	padding: 4px 0;
	background: #428F92;
	color: #ffffff !important;
	border: solid 1px #ffffff;
}
a.button::after{
	position: absolute;
	display: block;
	content: '\025b6';
	top:50%;
	transform: translateY(-50%);
	right: 5px;
	font-size: .10rem;
	transition: all .3s ease-out;
}
a.button:hover{background-color: #ffffff !important;color: #428F92 !important;border: solid 1px #428F92 !important; }
a.button.margin{margin: 10px auto 0 auto;}
p.button{padding: 1px 4.5em;background-color: #B8B8B8;border: solid 1px #B8B8B8; color: #F3F3F3 !important;}
.button::after{display: none;}
#history .conan2025 .btnArea{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
	transform: translateX(-1px);
}
#history .conan2025 .btnArea .button{width: 100%;background-color: #1F799C; border-left: solid 1px #ffffff;border-right: solid 1px #ffffff;border-bottom: solid 1px #ffffff;}
#history .conan2025 .btnArea .button:hover{background-color: #ffffff; color: #428F92 !important;}

#history .timeline .date ruby[data-ruby]::before{top:0;}
	
/* ----- pc ----- */
@media screen and (min-width: 641px) {

	/* revival */
	#revival{padding-top: 60px;}
	#revival .revivalWrap{margin: 60px auto 0 auto;}
	#revival .revivalWrap .lead{text-align: center;font-size: .18rem;line-height: 1.8em;}
	#revival .release{
		padding-bottom: 40px;
		margin: 90px auto 0 auto;
	}
	#revival .release ul{margin: 0 auto 30px auto;}
	#revival h2{padding: 40px 0;}

	#revival .release ul li{margin: 0 auto 30px auto;}
	#revival .release .typeTxt{
		margin:  10px auto;
		padding: 5px 0;
		font-size: .17rem;
	}
	#revival .release .playTxt{
		margin:  0 auto;
		padding:5px 0;
		font-size: .17rem;
	}
	#revival .release .typeTxt span{
		display: inline;
		font-size: .14rem;
		padding-bottom: 0;
	}
	#revival .release .typeTxt.marginT{margin:  40px auto 10px auto;}
	#revival .release p{
		padding-bottom: 20px;
		font-size: .17rem;
	}
	#revival .release .Ttl{
		padding: 5px 0;
		font-size: .16rem;
		margin: 0 auto 20px auto;
	}
	#revival .release p{
		padding-bottom: 20px;
		font-size: .16rem;
	}
	#revival .reList{
		padding: 50px 0;
		max-width: 760px;
	}
	#revival .reList .reBlock{
		margin: 0 auto 30px auto ;
		padding: 20px 0 40px 0;
	}
	#revival .reList .reBlock .reImg{margin: 0 20px 0 0;width: 30%; max-width: 220px;}
	#revival .reList .reBlock .dateList{
		width: calc(70% - 80px);
		margin: 0;
	}
	#revival .reList .reBlock .dateList ul li{padding-bottom: 0;}
	#revival .reList .reBlock .dateList .Ttl{font-size: .20rem;}
	#revival .reList .reBlock .dateList ul li .shopName, #revival .reList .reBlock .dateList ul li .date, #revival .reList .reBlock .dateList ul li .Btn{
		margin: 10px auto 0 auto ;
		font-size: .16rem;
	}
	#revival .reList .reBlock .dateList ul li .shopName{padding: 5px;}
	#revival .reList .reBlock .dateList ul li .dateA{width: 100%;}

	/* history */
	#history{padding-top: 80px; padding-bottom: 0;}
	#history .innerWrap{margin: 40px auto;}
	#history .historyBlock{margin: 40px auto;}
	#history .historyBlock .lead{font-size: .18rem;text-align: center;line-height: 1.8em;}
	#history .timeline{margin: 60px auto 0 auto;}
	#history .timeline .historyWrap{width: calc(100% - 80px);}
	#history .timeline .historyBox{margin: 30px auto 80px auto;}
	#history .timeline .date{
		margin:  15px 0 2px 0;
		font-size: .24rem;
	}
	#history .timeline .historyImg{
		width: calc(50% - 80px);
		margin: 20px 0 0 10px;
		max-width: 220px;
	}
	#history .timeline .historyImg.badge{margin: 20px 0 0 0;}
	#history .timeline .historyImg.badge::after{display: none;}
	#history .timeline .date.badge span{
		position: relative;
		display: inline-block;
		width: auto;
	}
	#history .timeline .date.badge span::after{
		position: absolute;
		top:-45px;
		right: -90px;
		width: 100px;
		height: 100px;
		display: block;
		content: '';
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: contain;
		transform: rotate(6deg);
	}
	#history .timeline .date.badge.re span::after{background-image: url("../img/revival/iconR.png");}
	#history .timeline .date.badge.sale span::after{background-image: url("../img/revival/iconN.png");}
	#history .timeline .date.badge.now span::after{background-image: url("../img/revival/iconT.png");}
	#history .timeline .historyTxt{
		margin: 30px 0 0 30px;
		width: calc(50% + 80px);
		max-width: 700px;
	}
	#history .timeline .ttilM{font-size: .20rem;line-height: 1.6em;}
	#history .timeline .textM{width: 100%;}
	#history .timeline .btnArea{
		width: 100%;
		margin: 25px auto 0 0;
	}
	#history .timeline .textM .btnMore{
		margin: 30px auto 50px auto;
		font-size: .14rem;
	}

	#history .conan2025{
		padding-top: 100px;
		padding-bottom: 0;
	}
	/* catch */
	#history .conan2025 .catch{padding: 0 0 50px 0;}
	#history .conan2025 .catch .catchTxt{
		margin:  0 auto;
		padding:0 0 20px 0;
	}
	#history .conan2025 p{
		margin: 0 auto 30px auto;
		font-size: .18rem;
		line-height: 2em;
	}
	
	.button{
		padding: 5px 0;
		font-size: .16rem;
		width: 400px;
		max-width: calc(100% - 80px);
	}
	#history .conan2025 .btnArea{
		width: 100%;
		max-width: 580px;
	}
	#history .conan2025 .btnArea .button{max-width: 580px;}

}

/* ----- navigation ----- */
@media screen and (min-width: 1170px) {
	.pages header{display: none;}
		/* detail */
	#detail,#goods, #howto{
		padding-top: 120px;
	}
}