@charset "UTF-8";

/*-- top.css --*/





/*-- main 低解像度用 トップ専用 --*/
	
	@media screen and (max-width: 1025px) {
		
		main
		{
			display: flex;
			flex-flow: column;
		}
		
	}





/*-- #main-menu 低解像度用 トップ専用 --*/
	
	@media screen and (max-width: 1024px) {
		
		#main-menu
		{
			margin: 0;
			padding: 0;
		}
			
			#main-menu ul
			{
				flex-flow: wrap;
				justify-content: space-around;
				margin: 0;
				padding: 0;
			}
				
				#main-menu li
				{
					width: 50%;
					margin: 0;
				}
					
				#main-menu li a
				{
					display: block;
					width: 100%;
				}
					
					#main-menu li img
					{
						width: auto;
						height: 48px;
						margin: 0 auto;
					}
					
	}
	
	@media screen and (max-width: 424px) {
		
		#main-menu li img
		{
			height: 24px;
		}
		
	}





/*-- #flyer-section --*/
	
	#flyer-section
	{
		z-index: 1;
		position: absolute;
		right: 0;
		width: 600px;
		max-width: 100%;
		height: 848px;
		
		opacity: 0;
	}
	
	.ready #flyer-section
	{
		animation: 4000ms initFlyer forwards;
	}
	
	@keyframes initFlyer {
		from {
		}
		to {
			opacity: 1;
		}
	}
	
		
		#flyer-mainVisual
		{
			z-index: 1;
			position: absolute;
			right: 0;
			display: block;
			width: 600px;
			max-width: 100%;
		}
		
		.ready #flyer-section.animation #flyer-mainVisual
		{
			animation: 2500ms ease-in-out infinite alternate both playFuwaFuwa;
			opacity: 1;
		}
		
		@keyframes playFuwaFuwa {
			from {
				transform: translateY(0);
			}
			to {
				transform: translateY(5px);
			}
		}
		
		#flyer-catchCopy
		{
			z-index: 3;
			position: absolute;
			top: 20px;
			right: 10px;
			display: block;
			width: auto;
			height: 60%;
		}
		
		#flyer-releasePlans
		{
			z-index: 4;
			position: absolute;
			display: block;
			right: 0;
			bottom: 40px;
			width: 600px;
			height: auto;
			text-align: center;
			pointer-events: none;
		}
			
			#flyer-bundled
			{
				width: 100%;
				margin: 0;
			}
			
			#flyer-releasePlan
			{
				width: 75%;
			}
			
		#flyer-circusNorthern
		{
			z-index: 2;
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 10%;
			height: auto;
		}
			
			#flyer-circusNorthern img
			{
				width: 100%;
			}
		
	/*-- 低解像度用 --*/
		
		@media screen and (max-width: 1025px) {
			
			#flyer-section
			{
				position: relative;
				width: 100%;
				height: auto;
			}
			
			#flyer-mainVisual
			{
				position: relative;
				display: block;
				width: 100%;
				height: auto;
			}
			
			#flyer-releasePlans
			{
				position: relative;
				display: block;
				width: 100%;
				top: -200px;
				bottom: auto;
			}
			
		}
			
		@media screen and (max-width: 625px) {
			
			#flyer-catchCopy
			{
				height: 50%;
			}
			
			#flyer-releasePlans
			{
				width: 100%;
				top: -100px;
			}
			
		}
		@media screen and (max-width: 525px) {
			
			#flyer-releasePlans
			{
				width: 100%;
				top: auto;
			}
			
			#flyer-circusNorthern
			{
				bottom: auto;
			}
		}





/*-- header タイトルロゴ --*/
	
	header
	{
		z-index: 2;
		position: relative;
		display: flex;
		flex-flow: column;
		align-items: center;
		width: 40%;
		margin: 0;
		padding: 1rem;
		
		opacity: 0;
	}
	
	.ready header
	{
		animation: 4000ms initHeader forwards;
	}
	
	@keyframes initHeader {
		from {
		}
		to {
			opacity: 1;
		}
	}
		
		header img
		{
			z-index: 2;
			position: relative;
		}
		h1
		{
			width: 300px;
			margin: 0 auto;
		}
			
			h1 img
			{
				width: 100%;
			}
			
		#header-bundled
		{
			display: block;
			width: 406px;
			margin: 0 auto;
		}
			
			#header-bundled img
			{
				width: 100%;
			}
			
		#header-reserved
		{
			width: 331px;
			margin: 0 auto;
		}
		
	/*-- 低解像度用 --*/
		
		@media screen and (max-width: 1025px) {
			
			header
			{
				z-index: 2;
				position: absolute;
				top: 50vw;
				left: 1rem;
				width: 50vw;
				margin: 0;
				padding: 1rem;
			}
				
				h1
				{
					width: 100%;
				}
				#header-bundled
				{
					width: 90%;
				}
				#header-reserved
				{
					width: 80%;
				}
				
		}
		
		@media screen and (max-width: 625px) {
			
			header
			{
				top: 60vw;
				left: 0;
				width: 80%;
				margin: 0;
				padding: 0 10%;
			}
			
				h1
				{
					width: 60%;
				}
				#header-bundled
				{
					width: 80%;
				}
				#header-reserved
				{
					width: 50%;
				}
				
		}




/*-- #news-section --*/
	
	#news-section
	{
		z-index: 2;
		position: relative;
	}
	
	/*-- タイトル --*/
		
		#news-section > h2
		{
			display: block;
			line-height: 1;
		}
			
			#news-section > h2 img
			{
				display: block;
				background: #FFF
			}
			
		#news-section > h2:after
		{
			content: "";
			display: block;
			width: calc(100% - 94px);
			margin: -1rem 0 0 auto;
			border-style: solid none none;
			border-width: .2rem;
			border-color: #C9CFE5;
			padding: 1rem 0 0 0;
		}
		
	/*-- 各記事 装飾 --*/
		
		.news-days
		{
			margin: 0;
			padding: .2rem;
			font-size: .8rem;
		}
			
			.news-days > li
			{
				display: flex;
				flex-flow: column;
				align-items: top;
				height: 158px;
				border-style: solid;
				border-width: .2rem;
				border-color: #00C7FF;
				border-radius: .8rem;
				padding: 0 3px 0 94px;
				background: #4978BD;
				background-color: rgba(73, 120, 189, .8);
				background-position: 4px 4px;
				background-repeat: no-repeat;
				color: #FFF;
				
				opacity: 0;
				transform: translateX(-60px);
			}
			
			.news-days > li.old
			{
				display: none;
			}
			
			/*-- PhotoSwipe中 --*/
				
				.pswp .news-days
				{
					height: 100vh;
					overflow-y: auto;
					padding-top: 3rem;
				}
				.pswp .news-days > li.old
				{
					display: flex;
				}
				
				.pswp .news-days > li
				{
					height: auto;
					min-height: 128px;
					padding: 0 3px 0 94px;
					background-size: 68px auto;
				}
			
			.ready .news-days > li
			{
				animation: 1000ms newsIn forwards;
			}
			.news-days > li:nth-child(2) { animation-delay: 400ms; }
			.news-days > li:nth-child(3) { animation-delay: 800ms; }
			.news-days > li:nth-child(4) { animation-delay: 1200ms; }
			.news-days > li:nth-child(5) { animation-delay: 1600ms; }
			.news-days > li:nth-child(6) { animation-delay: 1800ms; }
			.news-days > li:nth-child(7) { animation-delay: 2000ms; }
			.news-days > li:nth-child(8) { animation-delay: 2200ms; }
			.news-days > li:nth-child(9) { animation-delay: 2400ms; }
			.news-days > li:nth-child(10) { animation-delay: 2600ms; }
			.news-days > li:nth-child(11) { animation-delay: 2800ms; }
			.news-days > li:nth-child(12) { animation-delay: 3000ms; }
			
			@keyframes newsIn {
				from {
				}
				to {
					opacity: 1;
					transform: translateX(0);
				}
			}
			
			.news-days > li + li
			{
				margin: .5rem 0 0 0;
			}
			
			/* キャラ画像 85×144 */
				
				.news-days > li.arisu
				{
					background-image: url("news/chara_arisu.png");
				}
				.news-days > li.nino
				{
					background-image: url("news/chara_nino.png");
				}
				.news-days > li.sorane
				{
					background-image: url("news/chara_sorane.png");
				}
				.news-days > li.hiyori
				{
					background-image: url("news/chara_hiyori.png");
				}
				.news-days > li.shiina
				{
					background-image: url("news/chara_shiina.png");
				}
				.news-days > li.miu
				{
					background-image: url("news/chara_miu.png");
				}
				.news-days > li.chiyoko
				{
					background-image: url("news/chara_chiyoko.png");
				}
				.news-days > li.arisa
				{
					background-image: url("news/chara_arisa.png");
				}
				
			/* 日付 */
				
				.news-days .date
				{
					border-bottom: solid 1px #FFF;
					padding: .2rem 0;
				}
				
				.news-items
				{
					list-style: disc;
					overflow-x: hidden;
					overflow-y: auto;
					margin: .2rem 0;
					padding: 0 0 0 1.5rem;
				}
					
					.news-items > li
					{
						margin: 0;
						padding: 0;
					}
					.news-items > li + li
					{
						margin: .2rem 0 0 0;
					}
					
			/* リンク 装飾改変 */
				
				.news-items a
				{
					color: #FFBCE0;
				}
				
				
	/*-- OLD --*/
		
		#news-old
		{
			display: block;
			line-height: 1;
		}
		
			#news-old a
			{
				float: right;
				display: inline-block;
				cursor: pointer;
			}
			
		#news-old:after
		{
			content: "";
			display: block;
			width: calc(100% - 116px);
			margin: 0 auto 2rem 0;
			border-style: none none solid;
			border-width: .2rem;
			border-color: #C9CFE5;
			padding: 1rem 0 0 0;
		}
		
	/*-- 高解像度用 --*/
		
		@media screen and (min-width: 1025px) {
			
			#news-section
			{
				width: 45%;
			}
			.news-days
			{
				min-height: 11rem;
			}
			
		}

		
	/*-- 低解像度用 --*/
		
		@media screen and (max-width: 1024px) {
			
			#news-section
			{
				width: 100%;
				margin: 2rem 0;
				padding: .5rem;
			}
			
		}
		
	/*-- 超低解像度用 85*144--*/
		
		@media screen and (max-width: 424px) {
			
			.news-days > li
			{
				height: auto;
				padding: 0 3px 0 74px;
				background-size: 68px auto;
			}
			
		}




/*-- #pickup-section --*/
	
	#pickup-section
	{
		z-index: 3;
		position: relative;
		width: 45%;
	}
		
		#pickup-section > h2
		{
			display: none;
		}
		
		#pickup-section > ul
		{
			list-style: none;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
		}
			
			#pickup-section li
			{
				display: block;
			}
			#pickup-section li + li
			{
				margin-top: .3rem;
			}
				
				#pickup-section a
				{
					display: block;
					width: 100%;
					margin: 0;
					padding: 0;
					border: none;
				}
					
					#pickup-section a img
					{
						display: block;
						width: 100%;
					}
					
	/*-- 低解像度用 --*/
		
		@media screen and (max-width: 1025px) {
			
			#pickup-section
			{
				width: 100%;
			}
				
				#pickup-section > ul
				{
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
				}
					
					#pickup-section li
					{
						width: 100%;
						margin: 0;
						padding: 0;
					}
					
					#pickup-section li + li
					{
						margin-top: .2rem;
					}
			
		}



/*-- #relation-section --*/
	
	#relation-section
	{
		width: 100%;
		max-width: 1000px;
		margin: 1rem auto;
	}
		
		#relation-section ul
		{
			list-style: none;
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			align-items: center;
			margin: -.5rem 0 0 -.5rem;
		}
		
		#relation-section li
		{
			display: block;
			width: calc(25% - .5rem);
			margin: .5rem 0 0 .5rem;
		}
		
		#relation-section a
		{
			display: block;
			width: 100%;
		}
			
			#relation-section img
			{
				display: block;
				width: 100%;
			}
			
	/*-- 低解像度用 --*/
		
		
		@media screen and (max-width: 1025px) {
			
			#relation-section
			{
				margin: 0;
			}
				
				#relation-section ul
				{
					justify-content: flex-start;
					margin: .1rem 0 0 -.1rem;
					padding: 0;
				}
				
				#relation-section li
				{
					width: calc(50% - .1rem);
					margin: .1rem 0 0 .1rem;
					padding: 0;
				}
				
		}