@charset "utf-8";

/*----------ローディング画面----------*/

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
#loading #random-block {
	max-width: 430px;
	text-align: center;
}
#loading #random-block #random-text {
	width: 100%;
	margin-bottom: 30px;
	transform: rotate(-5deg);
}
#loading #random-block #random-chara {
	width: 100%;
	margin-bottom: 30px;
	cursor: pointer;
}
#loading #random-block #skip img {
	width: 50%;
	cursor: pointer;
}
#loading #random-block #skip img:hover {
	transition: 0.4s;
	filter: brightness(1.2);
}
#loading #random-block #random-chara.purun {
	animation: purun 0.8s linear 0s 1;
}
@keyframes purun {
	0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15% { transform: scale(0.9, 0.9) translate(0%, 5%); }
	30% { transform: scale(1.3, 0.8) translate(0%, 10%); }
	50% { transform: scale(0.8, 1.3) translate(0%, -10%); }
	70% { transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
/* フェードアウト時に非表示にするクラス */
.loaded {
	opacity: 0;
	transition: 0.5s;
	visibility: hidden;
}
	@media screen and (max-width: 769px){
		#loading {
			height: 100svh;
		}
		#loading #random-block {
			max-width: 300px;
		}
		#loading #random-block #random-text,
		#loading #random-block #random-chara {
			margin-bottom: 30px;
		}
	}

/*----------時間変更----------*/

.time_change {
	position: relative;
	margin: 0;
	padding: 6px 0;
	text-align: center;
	line-height: 0.7;
	background: #e84340;
	z-index: 2;
}
	@media screen and (max-width: 769px){
		.time_change {
			display: none;
		}
		.onairinfo {
			position: relative;
			margin: 0;
			padding: 10px 85px 10px 10px;
			line-height: 1.5;
			color: #fff;
			background: #e84340;
			z-index: 5;
		}
	}

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

#wrapper section#pageRight .column {
	margin: auto;
}
	@media screen and (max-width: 769px){
		#wrapper section#pageRight .column {
			width: 100%;
		}
	}

/*----------ロゴ、放送文言、KV----------*/

h1 {
	max-width: 650px;
	margin: 0 auto 5px;
	text-align: center;
}
.hoso {
	max-width: 600px;
	margin: 0 auto 15px;
	padding: 0 10px;
	text-align: center;
}
.kv {
	margin-bottom: 30px;
}
h1 img, 
.hoso img, 
.kv img {
	width: 100%;
}
	@media screen and (max-width: 769px){
		h1 {
			margin: 0 73px 5px !important;
		}
		.hoso {
			width: 75%;
			margin-bottom: 10px;
			padding: 0;
		}
		.kv {
			margin-bottom: 15px;
		}
	}

/*----------ぷにるんずちゃんねるバナー----------*/

.bnr_punirunes_ch {
	max-width: 860px;
	margin: 30px auto;
	padding: 0 30px;
}
.bnr_punirunes_ch img {
	width: 100%;
}
	@media screen and (max-width: 769px){
		.bnr_punirunes_ch {
			margin: 25px 15px;
			padding: 0;
		}
	}
	
/*----------動画----------*/

.mov {
	margin: 0 30px 30px;
}
	@media screen and (max-width: 769px){
		.mov {
			margin: 0 15px 15px;
		}
	}
	
/*----------リード----------*/

.lead {
	margin: 0 30px 30px;
	color: #c91275;
	font-size: 20px;
	font-weight: 700;
	font-feature-settings: "palt";
	line-height: 1.8;
	text-align: center;
}
ruby[data-ruby] {
	position: relative;
	display: inline-block;
}
ruby[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	transform: translate(-50%, -0.7em);
	display: block;
	left: 50%;
	top: 0;
	white-space: nowrap;
	font-size: 50%;
}
ruby[data-ruby] rt {
	display: none;
}
	@media screen and (max-width: 769px){
		.lead {
			margin: 0 15px 15px;
			font-size: 16px;
		}
	}

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

.charaanime {
	margin: 0 0 0 1.4%;
}
.charaanime li {
	width: 20%;
}

/*----------おしらせ----------*/

.topNews {
	width: auto;
	margin: 0 30px 30px;
}
.topNews .ttl {
	max-width: 130px;
	margin: 0 auto 8px;
}
.topNews .ttl img {
	width: 100%;
}
.topNews li {
	margin-bottom: 12px;
	line-height: 1.5;
}
.topNews ul li a {
	text-decoration: none;
	color: #000;
}
.topNews ul li a p:first-child {
	margin-bottom: 0.4em;
	padding: 2px 8px 3px;
	color: #855dac;
	background: url("../images/top/news_bg.svg") repeat left top / 115px #ddd2e8;
	border: 1px solid #855dac;
	-webkit-text-stroke: 3px #fff;
	paint-order: stroke;
}
.topNews ul li a p:last-child {
	font-weight: 400;
	font-size: 14px;
}
	@media screen and (max-width: 769px){
		.topNews {
			margin: 0 15px 30px;
			padding: 15px 15px 3px;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 15px;
		}
		.topNews .ttl {
			width: 110px;
			max-width: auto;
		}
	}

/*----------バナー----------*/

.bnr_right {
	width: auto;
	max-width: 500px;
	margin: 0 30px 20px;
}
.bnr_right img {
	width: 100%;
	border: 1px solid #855dac;
}
	@media screen and (max-width: 769px){
		.bnr_right {
			max-width: 260px;
			margin: 0 auto 20px;
		}
	}
	
/*----------SNS----------*/

ul.sns {
	display: grid;
	grid-template-columns: repeat(auto-fit, 60px);
	gap: 8px;
	justify-content: center;
	margin: 0 30px 20px;
}
ul.sns li img {
	width: 100%;
}
ul.sns li:hover {
	transition: 0.4s;
	transform: scale(1.1);
}
	@media screen and (max-width: 769px){
		ul.sns {
			max-width: 300px;
			margin: 0 auto 30px;
		}
	}
	
/*----------ソーシャルボタン----------*/

ul.social {
	margin: 0 auto;
	text-align: center;
}
	@media screen and (max-width: 769px){
		ul.social {
			display: none;
		}
		#sp_social_area {
			display: block!important;
			margin: 0 0 10px 15px !important;
		}
	}