@charset "utf-8";

/*----------wrapper----------*/

#wrapper section#pageCenter {
	padding: 0;
}
	@media screen and (max-width: 769px){
		#wrapper {
			background: url("../images/puni_wave_sp_bottom.png") no-repeat center bottom / contain;
		}
		#wrapper section#pageCenter {
			padding: 0;
		}
	}

/*----------ヘッダー----------*/

header {
	width: 100%;
	margin-bottom: -20px;
	padding-bottom: 7%;
	background: url("../images/under/header_bg.png") no-repeat center bottom / cover;
}
	@media screen and (max-width: 769px){
		header {
			padding: 10px 0 2% !important;
			background: url("../images/puni_wave_sp_top.png") no-repeat center top / contain, url("../images/under/header_bg.png") no-repeat center bottom / cover;
		}
	}

/*----------箱----------*/

.contents {
	min-height: calc(100vh - 470px);
}
	@media screen and (max-width: 769px){
		.contents {
			min-height: auto;
		}
	}

/*----------パンくず----------*/

.breadcrumb {
	width: 100%;
	margin-bottom: 15px;
	padding: 8px 0 8px 15px;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(to bottom, #ef8bb7, #ef8bb7 50%, #eb6ea5 50%, #eb6ea5);
}
.breadcrumb a {
	color: #fff;
}
	@media screen and (max-width: 769px){
		.breadcrumb {
			position: relative;
			margin-bottom: 5px;
			padding: 0 80px 0 15px;
			font-size: 12px;
			line-height: 1.5;
			background: none;
			z-index: 10;
		}
	}
	
/*----------ロゴ、ページタイトル----------*/

h1 {
	margin: 0 auto 10px;
	width: 240px;
}
h1:hover {
	animation: zoom 0.2s ease-in-out;
	filter: brightness(1.1);
}
h2.pagettl {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 10px;
	text-align: center;
}
h1 img,
h2.pagettl img {
	width: 100%;
}
	@media screen and (max-width: 769px){
		h1 {
			position: relative;
			margin: 0 110px 5px !important;
			width: auto;
			z-index: 10;
		}
		h2.pagettl {
			padding: 0 15px;
		}
	}

/*----------記事ボックス----------*/

.entry {
	margin-bottom: 40px;
	padding: 0 40px;
}
.entry h3 {
	margin: 0 -40px 20px;
	padding: 22px 40px;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.5;
	font-feature-settings: "palt";
	color: #855dac;
	background: url("../images/under/h3_bg.svg") repeat left top / 115px #ddd2e8;
	border-top: 2px solid #855dac;
	border-bottom: 2px solid #855dac;
	box-shadow: 0 2px 0 0 #fff inset, 0 -2px 0 0 #fff inset;
	-webkit-text-stroke: 3px #fff;
	paint-order: stroke;
}
.entry.staff h3,
.entry.onair h3,
.entry.special h3 {
	padding: 10px 40px 14px;
	font-size: 32px;
}
.entry.episodes h3 {
	padding-right: 260px;
}
.entry .date {
	position: relative;
	width: 220px;
	margin-bottom: -19px;
	height: 36px;
	line-height: 34px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: #855dac;
	border-radius: 100px;
	z-index: 10;
}
	@media screen and (max-width: 769px){
		.entry {
			margin: 15px 0 25px;
			padding: 0 15px;
		}
		.entry h3 {
			margin: 0 -15px 15px;
			padding: 15px;
			font-size: 18px;
		}
		.entry.staff h3,
		.entry.onair h3,
		.entry.special h3 {
			padding: 9px 15px 11px;
			font-size: 24px;
		}
		.entry.episodes h3 {
			padding-right: 15px;
		}
		.entry .date {
			width: 170px;
			margin-bottom: -13px;
			height: 24px;
			line-height: 22px;
			font-size: 14px;
		}
	}

/*----------タブコンテンツ----------*/

.tab_contents {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
#tab_punirunes4:checked ~ #punirunes4,
#tab_punirunes3:checked ~ #punirunes3,
#tab_punirunes2:checked ~ #punirunes2,
#tab_punirunes1:checked ~ #punirunes1,
#tab_goods_toy:checked ~ #goods_toy,
#tab_goods_prize:checked ~ #goods_prize,
#tab_goods_apparel:checked ~ #goods_apparel,
#tab_goods_food:checked ~ #goods_food,
#tab_goods_blu-ray:checked ~ #goods_blu-ray,
#tab_goods_others:checked ~ #goods_others {
    display: block;
}
.tab,
.tab_s {
	text-align: center;
	background: url("../images/under/tab_bg.png") no-repeat center center / contain;
	cursor: pointer;
}
.tab {
	width: 23%;
	max-width: 300px;
	margin: 0 4px 40px;
	padding: 1.5% 2%;
}
.tab_s {
	width: 150px;
	height: 50px;
	margin: 0 3px 6px;
	line-height: 48px;
	font-weight: 700;
	font-size: 24px;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	border-radius: 100px;
}
.tab img {
	width: 100%;
}
.tab:hover,
.tab_s:hover {
	transition: 0.4s;
	filter: brightness(1.2);
}
input[name="tab"],
input[name="tab_s"] {
	display: none;
}
input:checked + .tab,
input:checked + .tab_s {
	background: url("../images/under/tab_bg_select.png") no-repeat center center / contain;
}
input:checked + .tab:hover,
input:checked + .tab_s:hover {
	filter: none;
}
.tab_contents_entry {
    display: none;
	width: 100%;
}
	@media screen and (max-width: 769px){
		.tab {
			width: 36%;
			margin: 0 4px 8px;
			padding: 2.3% 4%;
		}
		.tab_s {
			width: 120px;
			height: 40px;
			line-height: 38px;
			font-size: 18px;
		}
	}

/*----------ボタン----------*/

.btn a {
	display: block;
	width: 320px;
	height: 80px;
	margin: 0 auto 40px;
	line-height: 78px;
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	font-feature-settings: "palt";
	color: #fff;
	text-decoration: none;
	background: url("../images/under/btn_common.png") no-repeat center center / contain;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
	@media screen and (max-width: 769px){
		.btn a {
			width: 240px;
			height: 60px;
			margin-bottom: 25px;
			line-height: 58px;
			font-size: 18px;
		}
	}
	
/*----------ページ送り----------*/

.pagenavi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 30px 30px;
}
.pagenavi a,
.current_page {
	margin: 0 3px 6px;
	width: 48px;
	height: 48px;
	color: #000;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	line-height: 46px;
	border-radius: 100px;
	background: #a5eb6e;
}
.pagenavi a.link_next,
.pagenavi a.link_before {
	width: auto;
	padding: 0 15px;
}
.pagenavi a:hover,
.current_page {
	color: #fff;
	background: #eb6ea5;
}
	@media screen and (max-width: 769px){
		.pagenavi {
			margin: 0 15px 15px;
		}
		.pagenavi a,
		.current_page {
			width: 40px;
			height: 40px;
			line-height: 38px;
		}
	}


/*----------キャラクターアニメーション----------*/

.charaanime {
	flex-direction: column;
	max-width: 180px;
	margin: auto;
}
.charaanime li:not(:last-child) {
	margin-bottom: 20px;
}
	@media screen and (max-width: 769px){
		.charaanime {
			flex-direction: row;
			align-items: center;
			max-width: 100%;
			margin: 0 0 60px 1.4%;
		}
		.charaanime li {
			width: 20%;
		}
		.charaanime li:not(:last-child) {
			margin-bottom: 0;
		}
	}