/* =====================================
　TOPPAGE css
====================================== */


/*	TOP Layout
============================== */
.section{
	width: 100%;
	position: relative;
}
.content{
	position: relative;
}

@media all and (min-width: 768px) {
	.content{
		width: 1030px;
		margin: 0 auto;
	}	
	#section-topimg{
		height: 1068px;
		background: rgba(0,0,0,0);
	}
	#section-update{
		height: 868px;
		background: 
			url("../img/content_bg_left@2x.png"),
			url("../img/content_bg_right@2x.png"),
			#eee;
		background-position: 
			left 5% top 200%,
			right 3% top -80%,
			0;
		background-repeat: no-repeat;
		background-size: 
			157px,
			259px,
			0;
	}
	#section-twitter-sp{
		display: none;
	}
	#top-header{
		width: 1030px;
		position: absolute;
		top: 30px;
	}

	#top-sidebar{
		width: 320px;
		position: absolute;
		top: 226px;
	}
	#content-topimg{
		
	}
	#content-update{

	}
	.top-contents-block{
		
	}
	#top-menu-sp{
		display: none;
	}
	

}
@media all and (max-width: 767px) {
	
	#section-topimg{
		background: rgba(0,0,0,0);
		padding: 0 0 0 0;
	}
	#section-update{
		background: #eee;
	}
	#section-twitter-sp{
		background: 
			url("../img/content_bg_left.png"),
			url("../img/content_bg_right.png"),
			#eee;
		background-position: 
			left -3% bottom -68%,
			right -8% bottom -65%,
			0;
		background-size: 
			20%,
			30%,
			0;
		background-repeat: no-repeat;
		padding: 3em 0 200px;
	}
	#top-menu-sp{
		width: 100%;
		height: 30px;
		padding: 5px 0 15px;
		background: #ff8ea4;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.openbtn-area{
		width: 100%;
	}
	.openbtn{
		width: 120px;
		margin: 10px auto;
		text-align: center;
		display: block;
	}
	.openbtn img{
		width: 100%;
	}

}


/*	TOP Design
============================== */

.dotline {
  height: 2px;
  position: relative;
}
.dotline::before {
  content: "";
  background-image: linear-gradient(to right, #271b13, #271b13 3px, transparent 3px, transparent 8px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.update-date{
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background: #271b13;
	border-radius: 20px;
}
.z-index-100{
	z-index: 100;
}
.z-index-200{
	z-index: 200;
}
.z-index-300{
	z-index: 100;
}

.top-visual-chara img,
.top-visual-bottom img{
	width: 100%;
}
.onair-banner img{
	width: 100%;
}

@media all and (min-width: 768px) {
	.top-onair{
		width: 310px;
		height: 273px;
		margin: 0 auto 40px;
		background-image: url("../img/top_onair_pc@2x.png");
		background-size: cover;
		background-repeat: no-repeat;
	}
	.top-onair-banner-area{
		width: 310px;
	}
	.onair-banner{
		width: 300px;
		margin: 0 auto 14px;
	}
	.top-movie{
		width: 294px;
		height: 191px;
		margin: 0 0 24px 2px;
	}
	.top-movie img{
		width: 100%;
	}
	.top-movie-sp{
		display: none;
	}
	.top-twitter{
		width: 270px;
		height: 268px;
		margin: 0 auto;
		background-image: url("../img/top_twitter_pc@2x.png");
		background-size: cover;
		background-repeat: no-repeat;
	}
	.top-twitter-timeline{
		width: 250px;
		height: 220px;
		padding: 10px 10px;
		overflow: hidden;
	}
	#top-visual{
		position: relative;
	}
	.top-visual-chara{
		width: 930px;
		height: 1105px;
		position: absolute;
		top: 160px;
		left: 300px;
		text-align: left;
		overflow: hidden;
	}
	
	.top-visual-bottom{
		width: 930px;
		height: 1105px;
		position: absolute;
		top: 160px;
		left: 300px;
		text-align: left;
		overflow: hidden;
	}
	.top-catch{
		width: 108px;
		height: 684px;
		background-image: url("../img/top_catch_pc@2x.png");
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 194px;
		right: 10px;
	}
	.top-h2-update{
		width: 288px;
		height: 175px;
		margin: 0 0 0 16px;
		background-image: url("../img/top_h2_update.png");
		background-size: cover;
		background-repeat: no-repeat;
	}
	.top-update-area{
		width: 950px;
		margin: 56px auto 0;
	}
	.update-box{
		width: 950px;
		display: flex;
		margin: 24px 0 0;
	}
	.update-date{
		width: 90px;
		height: 20px;
		margin: 4px 0 0;
		padding:7px 5px 2px;
		font-size: 14px;
	}
	.update-text{
		width: 840px;
		margin: 0 0 20px 20px;
		font-size: 18px;
		font-weight: bold;
		line-height: 27px;
	}

}
@media all and (max-width: 767px) {
	
	.top-movie,
	.top-twitter{
		display: none;
	}
	#content-topimg{
		margin: 12% auto 26%;
	}
	#top-visual{
		position: relative;
		margin: 0 auto;
		padding-top: 132%;
		overflow: hidden;
		
	}
	.top-visual-chara{
		width: 105%;
		position: absolute;
		top: 6%;
		left: 7%;
		text-align: left;
		overflow: hidden;
	}
	.top-visual-bottom{
		width: 105%;
		position: absolute;
		top: 6%;
		left: 7%;
		text-align: left;
		overflow: hidden;
	}
	.top-visual-chara img,
	.top-visual-bottom img{
		width: 100%;
	}
	.top-onair{
		width: 90%;
		margin: 0 auto;
		padding-top: 34%;
		background-image: url("../img/top_onair_sp@2x.png");
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		bottom: -31%;
		left: 5%;
	}
	.top-onair-banner-area{
		width: 100%;
		margin: 0 auto;
		position: absolute;
		bottom: -17%;
		display: flex;
		justify-content: space-between;
	}
	.onair-banner{
		width: 48%;
		margin: 0 1% 2%;
	}
	.top-movie-sp{
		width: 24%;
		margin: 0 auto 24px;
		position: absolute;
		top: -5%;
		right: 2%;
		display: block;
		-webkit-backface-visibility:hidden;
	    backface-visibility:hidden;
	}
	.top-movie-sp img{
		width: 100%;
	}
	.top-catch{
		width: 11%;
		padding-top: 83%;
		background-image: url("../img/top_catch_sp.png");
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 11%;
		right: 5%;
	}
	.top-h2-update{
		width: 50%;
		margin: 0 auto 0;
		padding-top: 25%;
		background-image: url("../img/top_h2_update.png");
		background-size: contain;
		background-repeat: no-repeat;
	}
	.top-update-area{
		width: 80%;
		margin: 0 auto 0;
	}
	.update-box{
		width: 100%;
		margin: 1em auto 0;
	}
	.update-date{
		width: 8em;
		margin: 0 0 0.7em;
		padding:0.3em 0.2em 0.2em;
		font-size: 12px;
	}
	.update-text{
		margin: 0 0 1em;
		font-size: 0.9em;
		line-height: 1.5em;
		font-weight: bold;
	}
	#content-twitter-sp{
		width: 320px;
		height: 358px;
		margin: 0 auto;
		background-image: url("../img/top_twitter_sp@2x.png");
		background-size: cover;
		overflow: hidden;
	}
	.top-twitter-timeline{
		width: 290px;
		height: 290px;
		margin: 0 auto;
		padding: 20px 0 0;
	}
	
	/*========= ナビゲーションのためのCSS ===============*/

	/*アクティブになったエリア*/
	#g-nav-sp.panelactive{
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		position:fixed;
		z-index: 999;
		top: 0;
		width:100%;
		height: 100vh;
	}

	/*丸の拡大*/
	.circle-bg{
		position: fixed;
		z-index:3;
		/*丸の形*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #ff8ea4;
		/*丸のスタート位置と形状*/
		transform: scale(0);/*scaleをはじめは0に*/
		right:-50px;
		top:-50px;
		transition: all .6s;/*0.6秒かけてアニメーション*/
	}

	.circle-bg.circleactive{
		transform: scale(50);/*クラスが付与されたらscaleを拡大*/
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav-list{
		display: none;/*はじめは表示なし*/
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#g-nav-sp.panelactive #g-nav-list{
		 display: block; /*クラスが付与されたら出現*/
	}

	/*ナビゲーション*/
	#g-nav-sp ul {
		opacity: 0;/*はじめは透過0*/
		/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
		position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}

	/*背景が出現後にナビゲーションを表示*/
		#g-nav-sp.panelactive ul {
			opacity:1;
	}

	/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
	#g-nav-sp.panelactive ul li{
		animation-name:gnaviAnime;
		animation-duration:1s;
		animation-delay:.2s;/*0.2 秒遅らせて出現*/
		animation-fill-mode:forwards;
		opacity:0;
		}
		@keyframes gnaviAnime{
			0% {
			opacity: 0;
			}
			100% {
			opacity: 1;
			}
		}


	/*リストのレイアウト設定*/
	#g-nav-sp li{
		text-align: center; 
		list-style: none;
	}
	#g-nav-sp li a{
		/*
		color: #333;
		text-decoration: none;
		padding:10px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		*/
		width: 300px;
		margin: 0 auto 20px;
		display: block;
	}
	#g-nav-sp li a img{
		width: 100%;
	}
	.animate__flipInX{
        animation: none;
        transform: none;
        transition: unset;
    }
	.animate__flipInY{
        animation: none;
        transform: none;
        transition: unset;
    }

}

/*	BDジャック
============================== */
/*
@media all and (min-width: 768px) {
	.top-visual-bd-pc{
		width: 1030px;
		height: 1068px;
		margin: 0 auto;
		background: url("../img/bd_img_20230928@2x.png") no-repeat;
		background-size: contain;
		background-position: bottom center;
		display: block;
	}
	.top-visual-bd-sp{
		display: none;
	}
	.top-catch{
		display: none;
	}
	.top-twitter{
		display: none;
	}
	.top-bd-meta{
		width: 335px;
		height: 461px;
		background: url("../img/meta@2x.png") no-repeat;
		background-size: contain;
		position: absolute;
		top: 600px;
	    left: 30px;
		
		margin: 0 auto;
		
	}
	.top-bd-meta img{
		width: 100%;
	}
}

@media all and (max-width: 767px) {
	
	.top-visual-bd-pc{
		display: none;
	}
	#top-visual {
		position: relative;
		margin: 0 auto;
		padding-top: 0%;
	}
	#content-topimg {
		margin: 12% auto 0%;
	}
	.top-visual-bd-sp{
		width: 100%;
		padding-top: 167%;
		margin: 0 auto;
		background: url("../img/bd_img_20230928_sp@2x.png") no-repeat;
		background-size: contain;
		background-position: bottom center;
		display: block;
	}
	.top-onair{
		display: none;
	}
	.top-catch{
		display: none;
	}
	.top-onair-banner-area {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		bottom: 2%;
		display: flex;
		justify-content: space-between;
	}
	
}
*/


/* =====================================
　TOPPAGE css END
====================================== */