/* popular.css
========================================*/
/* module */
/* ==========================
	base style
============================= */
/* font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
.l-main-box a {
	color:#000;
	display:inline-block;
	text-decoration:none;
}

.l-main-box * {
	box-sizing:border-box;
}

/* style */
.fp-contents {
	background-color:#ffdc02;
}
.fp-contents .popular-header {
	position:relative;
	text-align:center;
}
.fp-contents .popular-header .-lead {
	color:#555;
	font-weight:700;
	line-height:1.5;
}
.fp-contents .popular-header .-illust {
	position:absolute;
}
.fp-contents .popular-list > li {
	background-color:#fff;
}
.fp-contents .popular-list > li > dl > dt {
	border-bottom:1px solid #ffdc02;
	color:#555;
	font-family:"M PLUS Rounded 1c", sans-serif;
	font-weight:bold;
}
.fp-contents .popular-list > li > dl > dd > figure {
	text-align:center;
}
.fp-contents .popular-list > li > dl > dd .-btn-list {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.fp-contents .popular-list > li > dl > dd .-btn-list > li {
	color:#555;
	text-align:center;
}
.fp-contents .popular-list > li > dl > dd .-btn-list > li > a,
.fp-contents .popular-list > li > dl > dd .-btn-list > li > p {
	background-color:#d8d8b9;
	color:#555;
	display:block;
}
.fp-contents .js-popup-box {
	background-color:#d8d8b9;
	box-shadow:1px 3px 5px rgba(0, 0, 0, 0.2);
	display:none;
	position:fixed;
	top:35%;
	text-align:left;
	opacity:0;
	transition:all 0.3s ease;
}
.fp-contents .js-popup-box.is-show {
	display:block;
	opacity:1;
}
.fp-contents .js-popup-box .js-popup-close {
	position:absolute;
}
.fp-contents .js-popup-box > dl > dt {
	font-family:"M PLUS Rounded 1c", sans-serif;
	font-weight:bold;
}
.fp-contents .js-popup-box > dl > dd {
	background-color:#fff;
	color:#333;
	line-height:1.5;
}
.fp-contents .js-popup-box > dl > dd .-button {
	background-color:#ffdc02;
	color:#555;
	display:block;
	font-weight:700;
	text-align:center;
}
@media screen and (max-width: 767px) {
	.l-main-box .pconly {
		display:none;
	}
	.fp-contents {
		padding-bottom:4vw;
		width:100%;
	}
	.fp-contents .popular-header {
		padding:2.66667vw 6.66667vw 4vw 2.13333vw;
	}
	.fp-contents .popular-header .-lead {
		font-size:3.2vw;
		margin-top:1.33333vw;
		margin-right:-5.33333vw;
	}
	.fp-contents .popular-header .-lead > strong {
		font-size:3.73333vw;
	}
	.fp-contents .popular-header .-illust {
		top:5.33333vw;
		right:0;
	}
	.fp-contents .popular-header .-illust > img {
		width:24vw;
	}
	.fp-contents .popular-list {
		padding:0 2.66667vw;
	}
	.fp-contents .popular-list > li {
		border-radius:4vw;
		margin-bottom:4vw;
		padding:3.2vw 4vw 4vw;
	}
	.fp-contents .popular-list > li > dl > dt {
		font-size:4vw;
		margin-bottom:5.33333vw;
		padding-bottom:2.13333vw;
	}
	.fp-contents .popular-list > li > dl > dd > figure > img {
		max-height:17.33333vw;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list {
		margin-top:5.33333vw;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list > li {
		font-size:3.46667vw;
		width:37.86667vw;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > a,
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > p {
		border-radius:1.33333vw;
		padding:2.66667vw;
	}
	.fp-contents .js-popup-box {
		padding:4vw;
		left:2.66667vw;
		width:94.66667vw;
	}
	.fp-contents .js-popup-box .js-popup-close {
		top:2.66667vw;
		right:4vw;
	}
	.fp-contents .js-popup-box > dl > dt {
		font-size:4.26667vw;
		margin-bottom:4vw;
		padding:0.53333vw 0;
	}
	.fp-contents .js-popup-box > dl > dd {
		border-radius:4vw;
		padding:4vw;
	}
	.fp-contents .js-popup-box > dl > dd .-button {
		border-radius:1.33333vw;
		font-size:3.73333vw;
		margin-top:5.33333vw;
		padding:3.46667vw;
	}
}
@media print, screen and (min-width: 768px) {
	.l-main-box {
		font-size:14px;
	}
	.l-main-box .sponly {
		display:none;
	}
	.fp-contents {
		padding:15px 30px;
	}
	.fp-contents .popular-header {
		padding-right:30px;
		padding-bottom:25px;
	}
	.fp-contents .popular-header .-lead {
		font-size:14px;
		padding-right:30px;
		position:absolute;
		top:147px;
		width:100%;
	}
	.fp-contents .popular-header .-lead > strong {
		font-size:17px;
	}
	.fp-contents .popular-header .-illust {
		right:-20px;
		bottom:-1px;
	}
	.fp-contents .popular-list {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.fp-contents .popular-list > li {
		border-radius:15px;
		margin-bottom:20px;
		padding:12px 25px 20px;
		width:410px;
	}
	.fp-contents .popular-list > li > dl > dt {
		font-size:16px;
		margin-bottom:20px;
		padding-bottom:8px;
	}
	.fp-contents .popular-list > li > dl > dd > figure {
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		height:90px;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list {
		margin-top:20px;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list > li {
		font-size:13px;
		width:175px;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > a,
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > p {
		border:1px solid #d8d8b9;
		border-radius:5px;
		cursor:pointer;
		padding:10px;
	}
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > a:hover,
	.fp-contents .popular-list > li > dl > dd .-btn-list > li > p:hover {
		background-color:#fff;
		border:1px solid #ffdc02;
	}
	.fp-contents .js-popup-box {
		padding:15px;
		left:calc(50% - 340px);
		width:420px;
	}
	.fp-contents .js-popup-box .js-popup-close {
		cursor:pointer;
		top:12px;
		right:15px;
	}
	.fp-contents .js-popup-box > dl > dt {
		font-size:20px;
		margin-bottom:15px;
		padding:3px 0;
	}
	.fp-contents .js-popup-box > dl > dd {
		border-radius:15px;
		font-size:14px;
		padding:18px 20px 15px;
	}
	.fp-contents .js-popup-box > dl > dd .-button {
		border:1px solid #ffdc02;
		border-radius:5px;
		font-size:15px;
		margin-top:20px;
		padding:13px;
	}
	.fp-contents .js-popup-box > dl > dd .-button:hover {
		background-color:#fff;
	}
}