@charset "utf-8";
/*
outline: solid  1px #F00;
*/

:root
{
	--theme-color: #4B70F5;
}


*,
::before,
::after
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

[hidden]
{
	display: none;
}

a[href]
{
	color: #3F60CE;
	text-decoration: rgba(63, 96, 206, .5) solid underline;
}
a[href]:hover
{
	text-shadow: .2rem .2rem .2rem rgba(63, 96, 206, .3);
}
a[href]:visited
{
	color: rgba(76, 132, 193, 1);
	text-decoration: rgba(76, 132, 193, .2) dashed underline;
}

img 
{
	display: block;
	height: auto;
}


html
{
	overflow-x: hidden;
	background: #E9F3FF url("common/html-background.jpg") top center repeat-y;
	background-size: auto 1920px;
	color: #4673FF;
	
	font-family: "Noto Serif JP", serif;
	font-weight: 800;
	font-style: normal;
	
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

body
{
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	scrollbar-gutter: stable;
}

/*-- #main-visual --------------------------------------------------------------- */
	
	#main-visual
	{
		position: relative;
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
		padding-top: 110%;
		background: url("main-visual.png") top center no-repeat;
		background-size: 1920px auto;
	}
	@media (max-width: 1400px) {
		#main-visual
		{
			padding-top: 110%;
			background-size: 1600px auto;
		}
	}
	@media (max-width: 1200px) {
		#main-visual
		{
			padding-top: 120%;
			background-size: 1200px auto;
		}
	}
	@media (orientation: portrait) and (max-width: 1200px) {
		#main-visual
		{
			background-position: 70% 0%;
			padding-top: 180%;
			background-size: 1000px auto;
		}
	}
	@media (orientation: portrait) and (max-width: 1000px) {
		#main-visual
		{
			padding-top: 200%;
			background-size: 900px auto;
		}
	}
		
		#main-visual h1
		{
			position: absolute;
			top: 2%;
			left: 2%;
			width: 400px;
			height: auto;
		}
		@media (orientation: portrait) {
			#main-visual h1
			{
				top: 1%;
				left: auto;
				right: 1%;
				width: 40%;
			}
		}
			
			#main-visual h1 img
			{
				width: 100%;
				height: auto;
			}
			
		#catch-copy
		{
			position: absolute;
			top: 2%;
			right: 2%;
			width: 80px;
			height: auto;
		}
		@media (orientation: portrait) {
			#catch-copy
			{
				top: 1%;
				right: auto;
				left: 3%;
				width: 10%;
			}
		}
		
		#reserved-date,
		#release-date
		{
			position: absolute;
			left: 10%;
			bottom: 15%;
			width: 20%;
			height: auto;
		}
		@media (max-width: 1400px) {
			#reserved-date,
			#release-date
			{
				left: 5%;
				bottom: 5%;
				width: 30%;
			}
		}
		@media (max-width: 1200px) {
			#reserved-date,
			#release-date
			{
				left: 5%;
				bottom: 5%;
			}
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#reserved-date,
			#release-date
			{
				left: 5%;
				bottom: 5%;
				width: 40%;
			}
		}
		@media (orientation: portrait) and (max-width: 1000px) {
			#reserved-date,
			#release-date
			{
				left: 5%;
				bottom: 5%;
			}
		}
		
		
		
		
		
/*-- #page-menu --------------------------------------------------------------- */
	
	#page-menu
	{
		z-index: 10000;
		position: sticky;
		top: 0;
		background: url("menu/background.png") top left repeat-x;
		background-size: auto 100%;
		display: block;
	}
	@media (orientation: portrait) {
		#page-menu
		{
			background-size: auto 120%;
		}
	}
		
		#page-menu ul
		{
			display: flex;
			align-items: flex-end;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 3.9% 1.3%;
			list-style: none;
		}
		@media (orientation: portrait) {
			#page-menu ul
			{
				justify-content: space-between;
				padding: 0 2% 1.3%;
			}
		}
			
			#page-menu li + li
			{
				margin-left: 1%;
			}
				
				#page-menu a
				{
					position: relative;
					display: block;
				}
					
					#page-menu a img
					{
						display: block;
						width: 90%;
						height: auto;
					}
					
					#page-menu a img:nth-child(1)
					{
						z-index: 2;
						opacity: 0;
						pointer-events: none;
					}
					#page-menu a:hover img:nth-child(1)
					{
						opacity: 1;
						transition: opacity 500ms;
					}
					
					#page-menu a img:nth-child(2)
					{
						position: absolute;
						z-index: 1;
						opacity: 1;
						top: 0;
					}
					#page-menu a:hover img:nth-child(2)
					{
						opacity: 0;
						transition: opacity 500ms;
					}
					/* * x 80 = 1224
					info		343		
					story		170		
					episode		233		
					special		217		
					products	261		
					*/
					#page-menu li:nth-child(1) { width: 28%; }
					#page-menu li:nth-child(2) { width: 13.89%; }
					#page-menu li:nth-child(3) { width: 19%; }
					#page-menu li:nth-child(4) { width: 17.77%; }
					#page-menu li:nth-child(5) { width: 21.32%; }
					
					#page-menu li:nth-child(2),
					#page-menu li:nth-child(3),
					#page-menu li:nth-child(4)
					{
						position: relative;
						top: .5rem;
					}
					@media (orientation: portrait) and (max-width: 1000px) {
						#page-menu li:nth-child(2),
						#page-menu li:nth-child(3),
						#page-menu li:nth-child(4)
						{
							position: relative;
							top: .2rem;
					}
					}
					
					
					
					
					
/*-- footer --------------------------------------------------------------- */
	
	footer
	{
		width: 100%;
		margin-top: 5rem;
		background: url("common/footer-background.png") top left repeat;
		background-size: cover;
	}
	
		footer > .contents
		{
			display: flex;
			flex-flow: column;
			width: 400px;
			margin: 0 auto;
			padding: 2rem 1rem;
		}
			
			#footer-shares
			{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 1.5rem 0 0;
			}
				
				#shares-menu
				{
					display: block;
					}
				
					#shares-menu ul
					{
						display: flex;
						justify-content: center;
						gap: 2px;
						width: 231px;
						height: 40px;
						margin: 0;
						padding: 1% 0 1% 47%;
						background: url("common/share-base.png") top left no-repeat;
						background-size: 100% 100%;
						list-style: none;
					}
						
						#shares-menu li
						{
						}
							
							#shares-menu a
							{
								position: relative;
								display: block;
								width: calc(100% - 5px);
								cursor: pointer;
							}
								
								#shares-menu img
								{
									width: 100%;
									height: auto;
								}
								
								#shares-menu a img:nth-child(1)
								{
									position: absolute;
									top: 0;
									left: 0;
									opacity: 0;
								}
								
								#shares-menu a:hover img:nth-child(1)
								{
									opacity: 1;
								}
								
								#shares-menu a img:nth-child(2)
								{
									opacity: 1;
								}
								#shares-menu a:hover img:nth-child(2)
								{
									opacity: 0;
								}
								
								
								
			#footer-logo
			{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				margin: 3rem auto;
			}
				
				#footer-logo img
				{
					width: 100%;
					height: auto;
				}
				
			#footer-copyrights
			{
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				margin: 0 0 1rem;
			}
				
				#footer-copyrights img
				{
					width: 100%;
					max-width: 128px;
					height: auto;
				}
				
				
				
				
				
/*-- .expand --------------------------------------------------------------- */
	
	a .expand
	{
		display: none;
		pointer-events: none;
	}
	a[href] + .expand
	{
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: block;
		width: 24px;
		height: 24px;
		pointer-events: none;
	}
		
		a[href] + .expand img
		{
			width: 100%;
			height: auto;
		}
		
		a[href] + .expand img:nth-child(1)
		{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
		a[href]:hover + .expand  img:nth-child(1)
		{
			opacity: 1;
		}
		
		a[href] + .expand  img:nth-child(2)
		{
			opacity: 1;
		}
		a[href]:hover + .expand  img:nth-child(2)
		{
			opacity: 0;
		}
		
		
		
/*-- section --------------------------------------------------------------- */
	
	section.h2,
	section.h2.home
	{
		scroll-margin-top: 80px;
		user-select: none;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	@media (orientation: portrait) {
		section.h2.home
		{
			scroll-margin-top: 20px;
		}
	}
	
	section.h2.home + section.h2.home
	{
		margin-top: 5rem;
	}
		
		section.h2.home h2
		{
			display: flex;
			justify-content: center;
			background: url("common/title-line-bg.png") 50% 42% no-repeat;
			background-size: 800px 10px;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			section.h2.home h2
			{
				background-size: 94% 5px;
			}
		}
			
			section.h2.home h2 img
			{
				width: auto;
				height: 96px;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				section.h2.home h2 img
				{
					width: auto;
					height: 64px;
				}
			}
			
		section.h2.home .contents
		{
			width: 100%;
			max-width: 1000px;
			margin: 0 auto;
		}
			
			section.h1.theme h2,
			section.h3
			{
				scroll-margin-top: 50px;
			}
			
			section.h3,
			section.h3 .contents
			{
				width: 100%;
				max-width: 1000px;
				margin: 0 auto;
			}
			
			
			
			
/*-- section .panels --------------------------------------------------------------- */
	
	section.h1.theme h1
	{
		display: flex;
		justify-content: center;
		height: 1%;
		background: url("common/title-line-bg.png") 50% 42% no-repeat;
		background-size: 800px 10px;
	}
			
			section.h1.theme h1 img
			{
				width: auto;
				height: 96px;
			}
			
		section.h1.theme h2
		{
			content: '';
			display: flex;
			justify-content: center;
		}
		
		section.h1.theme h2:before,
		section.h1.theme h2:after
		{
			content: '';
			display: block;
			width: 170px;
			padding-top: 64px;
		}
		section.h1.theme h2:before
		{
			background: url("common/title-leaf-left.png") 100% 50% no-repeat;
			background-size: contain;
		}
		section.h1.theme h2:after
		{
			background: url("common/title-leaf-right.png") 0% 50% no-repeat;
			background-size: contain;
		}
			
			section.h1.theme h2 img
			{
				width: auto;
				height: 64px;
			}
			
/*-- section .thumb-panels --------------------------------------------------------------- */
	
	.thumb-panels
	{
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		gap: 2rem 1rem;
		max-width: calc((470px * 2) + 2rem);
		margin: auto;
		padding: 1rem 0;
	}
	@media (max-width: 780px) {
		.thumb-panels
		{
			width: calc(100% - 2rem);
			max-width: 470px;
		}
	}
		
		.thumb-panels > a
		{
			position: relative;
			display: block;
			width: calc((100% - 2rem) / 2);
			border-radius: 0 0 0 45px;
			background: url("common/panel-thumb-design.png") 100% 0% no-repeat;
			filter: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
			text-decoration: none;
		}
		@media (max-width: 780px) {
			.thumb-panels > a
			{
				width: 100%;
			}
		}
		.thumb-panels .thumbnail
		{
			float: left;
			display: block;
			width: calc(50% - 30px);
			height: auto;
			margin: 15px auto 15px 15px;
			border-radius: 0 45px 0 45px;
		}
		
		.thumb-panels .subject
		{
			display: flex;
			align-items: flex-end;
			width: calc(50% - 30px);
			height: 100%;
			margin: auto auto 15px 50%;
			padding: 0 0 25px;
			background: url("common/frame-subject-onepoint.png") 0% calc(100% - 13px) no-repeat;
			background-size: 2.2rem auto;
			color: var(--theme-color);
			font-size: 1.4rem;
		}
		@media (max-width: 460px) {
			.thumb-panels .subject
			{
				font-size: 1.2rem;
			}
		}
		
/*-- section information --------------------------------------------------------------- */
	
	@media (orientation: portrait) and (max-width: 1200px) {
		#section-information
		{
			margin: 3rem auto 0;
		}
	}
	
	#topics
	{
		display: flex;
		flex-flow: wrap;
		align-items: center;
		gap: 1rem;
		margin: 0 auto;
		padding: 1rem;
	}
	@media (orientation: portrait) and (max-width: 1200px) {
		#topics
		{
		}
	}
		
		#topics .topic
		{
			position: relative;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			width: calc((100% - 2rem) / 3);
			padding: 4.1% 0 0;
			
			background: url("common/frame-design-short.png") 100% 0% no-repeat;
			background-size: 40% auto;
			color: #666;
			text-decoration: none;
			filter:drop-shadow(0 0 2px rgba(0, 0, 0, .3));
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#topics .topic
			{
				aawidth: calc((100% - 1rem) / 2);
				aabackground-size: 14.0vw 4.0vw;
			}
		}
		#topics a.topic[href]:hover
		{
			text-shadow: none;
		}
		#topics a.topic[href]:visited
		{
			color: #666;
			text-decoration: none;
		}
		#topics .category
		{
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			width: 61%;
			padding: 15% 0 0 0;
			background:
				url("common/frame-subject-onepoint.png") 8% 80% no-repeat,
				#FFF;
			background-size:
				15% auto,
				auto;
			color: #4971FD;
			font-size: 120%;
		}
		#topics .category .text
		{
			position: absolute;
			top: 0;
			left: 0;
			padding: .5% 0 0 5%;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#topics .category
			{
				font-size: 60%;
			}
		}
		
		#topics .details
		{
			z-index: 3;
			position: relative;
			margin: 0 0 5px;
			border-radius: 0 0 0 2rem;
			padding: 15px 1px 0;
			background: #FFF;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#topics .details
			{
				padding: 3px 1px;
			}
		}
			
			#topics .details img
			{
				width: calc(100% - 2rem);
				margin: 2px 1rem;
				border: solid 1px #436BE7;
				background: #FFF;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#topics .details img
				{
					width: calc(100% - 1rem);
					margin: 2px .5rem;
				}
			}
			
		#topics .subject
		{
			padding: .2rem 1.2rem 0 4%;
			line-height: 1;
			color: #4971FD;
			font-size: 1.3rem;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#topics .subject
			{
				font-size: .6rem;
			}
		}
		#topics time
		{
			display: block;
			padding: .6rem .5rem .4rem;
			line-height: 1;
			text-align: right;
			color: #4971FD;
			font-size: .9rem;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#topics time
			{
				padding: .6rem .5rem .4rem;
				font-size: .7rem;
			}
		}
		
	#updated-info
	{
		position: relative;
		display: flex;
		flex-flow: column;
		width: calc(100% - 2rem);
		margin: 3rem auto 0;
		padding: 4.4% 0 0;
		background: url("common/frame-design-long.png") 100% 0% no-repeat;
		background-size: 40% auto;
		color: #666;
		text-decoration: none;
		filter:drop-shadow(0 0 2px rgba(0, 0, 0, .3));
	}
	@media (orientation: portrait) and (max-width: 1200px) {
		#updated-info
		{
			margin: 3rem 1rem 0;
		}
	}
		
		#updated-info .title
		{
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			width: 60%;
			padding: 15% 0 0 0;
			background:
				url("common/frame-subject-onepoint.png") 5% 36% no-repeat,
				#FFF;
			background-size:
				1.2rem auto,
				auto;
			color: #4971FD;
			font-size: 120%;
		}
		
			#updated-info .title .text
			{
				position: absolute;
				top: 0;
				left: 0;
				padding: .2rem 0 0 4%;
			}
			
		#updated-info .contents
		{
			margin: 0 0 5px;
			border-radius: 0 0 0 30px;
			padding: 1px;
			background: #FFF;
		}
			
			#updated-info .contents dl
			{
				z-index: 3;
				position: relative;
				width: calc(100% - 30px);
				margin: 15px;
				border-radius: 0 0 0 25px;
				padding: .5rem;
				background: #EAF4FF;
			}
				
				#updated-info .contents div
				{
					width: 100%;
					color: #39618F;
					padding: 0 .8rem 1rem;
				}
					
					#updated-info .contents dt
					{
					}
					@media (orientation: portrait) {
					}
					
					#updated-info .contents dd
					{
					}
						
						#updated-info .contents ul
						{
							padding: 0 0 0 1.4rem;
						}
						@media (orientation: portrait) {
						}
						
						
						
						
						
/*-- section story --------------------------------------------------------------- */
	
	#section-story
	{
	}
		
		#section-story .contents
		{
			position: relative;
			width: 100%;
			max-width: 1920px;
			margin: 0 auto;
			padding: 4rem 2rem 8rem;
			text-align: center;
			color: #2341A5;
			text-shadow:
				0 0 4px rgba(255, 255, 255, 1),
				0 0 4px rgba(255, 255, 255, 1),
				0 0 4px rgba(255, 255, 255, 1),
				0 0 4px rgba(255, 255, 255, 1),
				0 0 4px rgba(255, 255, 255, 1),
				0 0 4px rgba(255, 255, 255, 1);
			font-family: "Noto Serif JP", serif;
			font-optical-sizing: auto;
			font-weight: 800;
			font-size: 1.4rem;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#section-story .contents
			{
				padding: 2rem 2rem 2rem;
				font-size: 1.0rem;
			}
		}
			#section-story .contents
			{
			}
			
			#section-story .contents .lp + .lp
			{
				margin-top: 2.6rem;
			}
				
				#section-story .contents p + p
				{
					margin-top: .8rem;
				}
				
				
				
				
				
/*-- section episode --------------------------------------------------------------- */
	
	#section-episode
	{
		width: 100%;
	}
	
	#episode-list + .annotation
	{
		width: 38%;
		margin: 1rem 0 0 auto;
		padding: 0 0 0 1.8rem;
		text-indent: -1.8rem;
		font-size: .8rem;
	}
	@media (orientation: portrait) and (max-width: 1200px) {
		#episode-list + .annotation
		{
			width: 80%;
			margin: 1rem 1rem 0 auto;
			padding: 0 0 0 1.8rem;
			text-indent: -1.8rem;
			font-size: .8rem;
		}
	}
		
		#episode-list + .annotation small
		{
			display: block;
			padding: 0 0 0 1.8rem;
		}
		
	/*-- #episode-navi */
		
		#episode-navi
		{
			display: flex;
			justify-content: space-between;
		}
		#episode-navi.head
		{
		}
		#episode-navi.foot
		{
			margin: 2rem 0 0;
		}
			
			#episode-navi a
			{
				color: var(--theme-color);
			}
			
			#episode-navi [hidden]
			{
				display: none;
			}
			
			#episode-navi .left
			{
				display: table;
				margin: 0 auto 0 0;
			}
			
			#episode-navi .right
			{
				display: table;
				margin: 0 0 0 auto;
			}
			
	/*-- episode SVG styles */
	.episode-path
	{
		fill: #FFF;
		opacity: 0;
	}
	.episode .hover
	{
		display: none;
		opacity: 0;
	}
	.episode:has(.anchor:hover) .default
	{
		display: none;
		opacity: 0;
		transition: all 500ms;
		transition: all 500ms allow-discrete;
	}
	.episode:has(.anchor:hover) .hover
	{
		display: inline;
		opacity: 1;
		transition: all 500ms;
		transition: all 500ms allow-discrete;
	}
	#episode-list
	{
		width: 100%;
		max-width: 1000px;
	}
	#episode-list svg
	{
		width: 100%;
		height: auto;
	}
	
	#episode-nino,
	#episode-hiyori,
	#episode-arisu,
	#episode-sorane,
	#episode-shina
	{
		position: relative;
		margin-top: -2%;
		display: block;
	}
	
	
	
	
	
/*-- section.h3.theme --------------------------------------------------------------- */
	
	section.h3.theme
	{
		display: flex;
		flex-flow: column;
		width: 100%;
		max-width: 800px;
		margin: 3rem auto 0;
		padding: 0 0 1rem;
		background:
			url("common/frame-design-long.png") 100% 0% no-repeat;
		background-size:
			auto;
		color: #666;
		text-decoration: none;
		filter:drop-shadow(0 0 2px rgba(0, 0, 0, .3));
	}
	section.h3.theme.short
	{
		width: calc((50% - 1rem));
		max-width: auto;
		background:
			url("common/frame-design-short.png") 100% 0% no-repeat;
	}
		
		section.h3.theme > .title
		{
			width: calc(100% - 474px);
			min-height: 56px;
			padding: .3rem 0 .3rem 1.2rem;
			background:
				url("common/frame-subject-onepoint.png") 1.2rem 87% no-repeat,
				#FFF;
			background-size:
				2.2rem auto,
				auto;
			color: #4971FD;
			font-size: 1.4rem;
		}
		section.h3.theme.short > .title
		{
			width: calc(100% - 169px);
		}
		
		section.h3.theme > .contents
		{
			margin: 0 0 5px;
			border-radius: 0 0 0 30px;
			padding: 1px;
			background: #FFF;
		}
			
			section.h3.theme > .contents dl
			{
				width: calc(100% - 30px);
				margin: 15px;
				border-radius: 0 0 0 25px;
				padding: .5rem;
			}
				
				section.h3.theme > .contents div
				{
				}
					
					section.h3.theme > .contents dt
					{
					}
					
					section.h3.theme > .contents dd
					{
					}
						
						section.h3.theme > .contents ul
						{
							list-style: none;
						}
/*-- section special --------------------------------------------------------------- */
	
	/*- ダウンロード */
		
		a[download]
		{
			position: relative;
			display: block;
			margin: .4rem 1rem .2rem;
		}
			
			a[download] img
			{
				display: block;
				width: 100%;
				max-width: 170px;
				height: auto;
			}
			
			a[download] img:nth-child(1)
			{
				z-index: 2;
				opacity: 0;
				pointer-events: none;
			}
			a[download]:hover img:nth-child(1)
			{
				opacity: 1;
				transition: opacity 500ms;
			}
			
			a[download] img:nth-child(2)
			{
				position: absolute;
				z-index: 1;
				opacity: 1;
				top: 0;
			}
			a[download]:hover img:nth-child(2)
			{
				opacity: 0;
				transition: opacity 500ms;
			}
			
			
			
		#x-headers
		{
		}
			
			#x-headers ul
			{
				display: flex;
				flex-flow: column;
				justify-content: center;
				gap: 1rem;
			}
				
				#x-headers li
				{
					display: flex;
					flex-flow: column;
				}
				
				#x-headers li a[download]
				{
					margin-left: auto;
				}
				
		#x-icons
		{
		}
			
			#x-icons ul
			{
				display: flex;
				flex-flow: wrap;
				gap: 1rem;
			}
				
				#x-icons li
				{
					display: flex;
					flex-flow: column;
					width: calc((100% - 3rem) / 4);
				}
				
		#wallpapers
		{
		}
			
			#wallpapers ul
			{
				display: flex;
				justify-content: center;
				gap: 1rem;
			}
				
				#wallpapers li
				{
					display: flex;
					flex-flow: column;
				}
				
				#wallpapers li .size
				{
					width: 100%;
					max-width: 220px;
					height: auto;
				}
				
				#wallpapers li:nth-child(1)
				{
					width: 70%;
				}
				
				#wallpapers li:nth-child(1) a[download]
				{
					margin-left: auto;
				}
				
				#wallpapers li:nth-child(2)
				{
					width: calc(30% - 1rem);
				}
				
				
				
	/*- ムービー */
		
		#movie-contents
		{
			padding: 1.5rem 2rem;
		}
		
		.movie-frame
		{
			display: block;
			position: relative;
			width: 100%;
			border-radius: 0 0 0 40px;
			padding-top: 56.25% !important;
		}
			
			.movie-frame iframe
			{
				z-index: 1000;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 0 30px 0 30px;
			}
					
					
					
					
					
/*-- section product --------------------------------------------------------------- */
	
	#section-product-details
	{
		width: 100%;
		max-width: 800px;
		margin: 2rem auto 0;
	}
		
		#section-product-details dl
		{
			width: 100%;
		}
			
			#section-product-details dl > div
			{
				display: flex;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#section-product-details dl > div
				{
					display: block;
				}
			}
			
			#section-product-details dl > div + div
			{
				margin: 0;
				padding: .5rem 0 0;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#section-product-details dl > div + div
				{
					margin-top: 1rem;
				}
			}
				
				#section-product-details dt
				{
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;
					width: 9rem;
					margin: 0 auto;
					padding: 0 .5rem;
					letter-spacing: .5rem;
					font-size: 1.0rem;
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-product-details dt
					{
						justify-content: center;
						width: 100%;
					}
				}
				#section-product-details dd
				{
					display: flex;
					flex-flow: column;
					justify-content: flex-start;
					align-items: flex-start;
					width: calc(100% - 9rem);
					margin: 0;
					padding: 0 0 0 2rem;
					font-size: 1.0rem;
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-product-details dd
					{
						align-items: center;
						width: calc(100% - 2rem);
						margin: 0 auto;
						padding: 0;
					}
				}
					
					#product-title dd span
					{
						white-space: nowrap;
					}
					#product-title dd span + span
					{
						padding: 0 0 0 8rem;
					}
					@media (orientation: portrait) and (max-width: 1200px) {
						#product-title dd span
						{
							padding: 0 7rem 0 0;
						}
						#product-title dd span + span
						{
							padding: 0 0 0 2rem;
						}
					}
					#section-product-details dd small
					{
						vertical-align: center;
						font-size: .8rem;
					}
				
			.packages
			{
			}
				
				.packages .version
				{
					display: block;
					width: 100%;
				}
				
				.packages .version > span
				{
					display: inline-flex;
					justyfy-content: space-between;
					width: 6rem;
					padding: 0 1rem 0 0;
				}
				
				.packages .version ul
				{
					padding: 0 .5rem 0 1.8rem;
					font-size: .8rem;
				}
				
				#section-product-details  span
				{
					display: inline;
				}
				
				
				
				
				
	#section-cast
	{
		margin: 4rem auto;
	}
		
		#section-cast h3
		{
			display: flex;
			justify-content: center;
			width: 100%;
			max-width: 500px !important;
			margin: 0 auto;
			background: url("products/cast-title-line-bg.png") 50% 52% no-repeat;
			background-size: 500px 10px;
		}
			
			#section-cast h3 img
			{
				width: auto;
				height: 71px;
			}
			
		#section-cast .h3.contents
		{
			display: flex;
			gap: 1rem;
			padding: 3rem 0;
		}
		@media (orientation: portrait) and (max-width: 1200px) {
			#section-cast .h3.contents
			{
				display: table;
				width: auto;
				margin: 0 auto;
				padding: 0;
			}
			#section-cast .h3.contents div + div
			{
				margin-top: 5rem;
			}
		}
		
			#section-cast .column1,
			#section-cast .column2,
			#section-cast .column3
			{
				width: calc((100% - 1rem) / 3);
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#section-cast .column1,
				#section-cast .column2,
				#section-cast .column3
				{
					width: calc(100% - 2rem);
					margin: 1rem auto;
				}
			}
			
		#section-cast table
		{
			width: 100%;
			margin: 0;
			padding: 0;
			border-collapse: collapse;
		}
		#section-cast table + table
		{
			margin-top: 1.5rem;
		}
			
			#section-cast tr
			{
				margin: 0;
				padding: 0;
			}
				
				#section-cast th
				{
					width: 11rem;
					border: none;
					padding: .2rem 0;
					color: var(--theme-color);
					text-align: right;
					vertical-align: middle;
					letter-spacing: .1rem;
					font-size: 1.2rem;
					font-weight: 800;
					
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-cast th
					{
						width: 9rem !important;
						min-width: 9rem !important;
						text-align: left;
						font-size: 1.2rem;
						white-space: nowrap;
					}
				}
				
				#section-cast th:after
				{
					content: '：';
					margin: 0 .3rem;
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-cast th:after
					{
						display: none;
					}
				}
				#section-cast td
				{
					width: calc(100% - 8rem);
					margin: 0;
					padding: .2rem 0;
					letter-spacing: .1rem;
					font-size: 1.2rem;
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-cast td:before
					{
						content: '：';
						margin: 0 .3rem;
					}
					#section-cast td
					{
						width: 10rem;
						white-space: nowrap;
					}
				}
				
				
				
				
				
/*-- #section-xrepost-page --------------------------------------------------------------- */
	
	#section-xrepost-page
	{
	}
	
	#section-xrepost-page ul.annotation
	{
		padding: 0 0 0 .8rem;
		color: #FC4F7F;
		font-size: 1.0rem;
		list-style-type: '＊';
	}
	
	#section-xrepost-page h1
	{
		display: flex;
		justify-content: center;
		height: 1%;
		background: url("common/title-line-bg.png") 50% 42% no-repeat;
		background-size: 800px 10px;
	}
		#section-xrepost-page h1 img
		{
			width: auto;
			height: 96px;
		}
			
	/*- .description */
		
		#section-xrepost-page .description
		{
			margin-top: 1rem;
			padding: 0 2rem;
		}
			
			#section-xrepost-page .description .lp + .lp
			{
				margin-top: 1rem;
				color: var(--theme-color);
			}
			
			#section-xrepost-page .description p
			{
				margin-top: 1rem;
			}
			
	/*- dl.summary-table */
		
		/* dl */ #section-xrepost-page .summary-table
		{
			font-family: sans-serif;
			font-weight: 400;
		}
			
			#section-xrepost-page .summary-table > div
			{
			}
			
			#section-xrepost-page .summary-table > div:before
			{
				content: '';
				display: block;
				width: 3rem;
				margin: 0 auto;
				border-top: dotted 6px var(--theme-color);
				padding-top: 1rem;
			}
			#section-xrepost-page .summary-table > div + div:before
			{
				margin: 1rem auto 0;
			}
				
				#section-xrepost-page .summary-table dt
				{
					padding: 0 0 .2rem;
					color: var(--theme-color);
					text-align: center;
					font-size: .8rem;
					font-weight: 600;
				}
				
				#section-xrepost-page .summary-table dd
				{
					padding: .2rem 2rem;
					font-size: 1.0rem;
				}
				@media (orientation: portrait) {
					#section-xrepost-page .summary-table dd
					{
						padding: .5rem;
						font-size: 1.2rem;
					}
				}
				
				#section-xrepost-page .summary-table .proc ol
				{
					padding: 0 0 0 1.8rem;
				}
				
				#section-xrepost-page .summary-table .present ul
				{
					padding: 1rem 0 1rem 2rem;
					line-height: 2;
					font-size: 1.0rem;
					list-style-type: '🎁';
				}
				

	/*- ハッシュタグ ブロック */
		
		#hashtag-block
		{
			display: flex;
		}
		@media (max-width: 450px) and (orientation: portrait) {
			#hashtag-block
			{
				flex-flow: wrap;
			}
		}
			
			#hashtag-value
			{
				display: block !important;
				width: 20rem;
				border-color: var(--theme-color);
				padding: .2rem 1rem;
				background: #DEF;
				color: var(--theme-color);
				font-family: sans-serif;
				font-size: 1.0rem;
				font-weight: 600;
				font-style: normal;
				outline: none;
			}
			@media (max-width: 450px) and (orientation: portrait) {
				#hashtag-value
				{
					width: 100%;
				}
			}
			
			#hashtag-copy-button
			{
				margin: 0 0 0 1rem;
				border: solid 2px var(--theme-color);
				border-radius: .3rem;
				padding: .2rem .5rem;
				background: var(--theme-color);
				color: #FFF;
				box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .3);
				cursor: pointer;
			}
			@media (max-width: 450px) and (orientation: portrait) {
				#hashtag-copy-button
				{
					margin: .5rem 0;
				}
			}
			
			
			
	/*- プレゼント内容 ブロック */
		
		#section-xrepost-page-present
		{
			scroll-margin-top: 80px;
		}
			
			#section-xrepost-page-present .contents
			{
				display: flex;
				gap: 2rem;
				padding: 2rem;
			}
			#section-xrepost-page-present .item
			{
				width: calc(50% - 1rem);
				color: var(--theme-color);
				text-align: center;
			}
				
				#section-xrepost-page-present .item-image
				{
					position: relative;
					border: solid 3px var(--theme-color);
					padding: 4px;
				}
					
					#section-xrepost-page-present .item img
					{
						width: 100%;
						height: auto;
					}
					
					
					
	/*- 対象ポスト ブロック */
		
		#section-xrepost-page-targetpost
		{
			scroll-margin-top: 80px;
		}
			
			#section-xrepost-page-targetpost .annotation
			{
				padding: 1rem 2rem 1rem 2.8rem !important;
			}
			
	/*- 注意書き ブロック */
		
		#section-xrepost-page-attention
		{
			scroll-margin-top: 80px;
		}
			
			#section-xrepost-page-attention ul
			{
				padding: 2rem 2rem 2rem 2.8rem;
				color: #FC4F7F;
				font-family: sans-serif;
				font-size: .8rem;
				font-weight: 400;
				list-style-type: '＊';
			}
			
			#section-xrepost-page-attention li + li
			{
				margin: .5rem 0 0;
			}
			
	/*- ページ内ナビ */
		
		#section-xrepost-page nav.sect
		{
			margin: 1rem auto 4rem;
			padding: 0;
			font-size: 1.0rem;
		}
			
			#section-xrepost-page nav.sect ul
			{
				display: flex;
				flex-flow: wrap;
				justify-content: flex-end;
				margin: -.5rem 0 0 -1rem;
				padding: 0;
				list-style-type: none;
			}
				
				#section-xrepost-page nav.sect li
				{
					display: block;
					margin: .5rem 0 0 .5rem;
				}
				
					#section-xrepost-page nav.sect li a
					{
						color: var(--theme-color);
						text-decoration: underline;
					}
					
					
					
					
					
			
			
			
			
/*-- #section-product-page --------------------------------------------------------------- */
	
	#product-packages section.h3
	{
		display: flex;
		gap: 1rem;
	}
		
		#product-packages .item
		{
			width: calc(50% - 1rem);
		}
			
			#product-packages .item-image
			{
				position: relative;
				border: solid 3px var(--theme-color);
				padding: 4px;
			}
				
				#product-packages img
				{
					width: 100%;
					height: auto;
				}
			
			#product-packages .subject
			{
				margin-top: .6rem !important;
			}
			
	#product-packages + section.h2
	{
		margin: 5rem auto 0;
	}
		#product-packages + section.h2 .h3.theme
		{
			max-width: 1000px;
			margin: 1rem auto 0;
		}
		
		#product-packages + section.h2 .contents ul
		{
			margin: 1rem 0 2rem;
			padding: 0 .5rem 0 2.8rem;
			list-style-type: '▪️';
		}
		
	#store-benefits,
	#original-benefits
	{
		display: flex;
		flex-flow: wrap;
		gap: 1rem;
		width: 900px;
		margin: 0 auto;
		padding: 2rem 0;
	}
		
		#store-benefits section.h3.theme,
		#original-benefits section.h3.theme
		{
			margin-top: 0 !important;
			padding: 0 0 2rem !important;
		}
			
			#store-benefits section.h3.theme > .title.long,
			#original-benefits section.h3.theme > .title.long
			{
				letter-spacing: -.1rem;
				font-size: 1.2rem;
			}
		
			#store-benefits section.h3.theme > .title.llong,
			#original-benefits section.h3.theme > .title.llong
			{
				letter-spacing: -.1rem;
				font-size: 1.1rem;
			}
			
			#store-benefits section.h3.theme > .contents .chara,
			#original-benefits section.h3.theme > .contents .chara
			{
				display: block;	
				margin: 1rem auto;
			}
			
			#store-benefits section.h3.theme > .contents .charas,
			#original-benefits section.h3.theme > .contents .charas
			{
				display: flex;
				justify-content: center;
				gap: 1rem;
				margin: 0 auto;
				padding: 1rem 1.5rem;
			}
				
				#store-benefits section.h3.theme > .contents .charas .chara,
				#original-benefits section.h3.theme > .contents .charas .chara
				{
					margin: 0;
					width: auto;
					height: 1.5rem;
				}
				
			#store-benefits section.h3.theme > .contents .item-name,
			#original-benefits section.h3.theme > .contents .item-name
			{
				display: block;	
				margin: .5rem auto;
				padding: 0 1rem;
			}
				
				#store-benefits section.h3.theme > .contents .item-name .paid,
				#original-benefits section.h3.theme > .contents .item-name .paid
				{
					color: #AAA;
					font-size: .8rem;	
				}
				
			#store-benefits section.h3.theme > .contents .item-image,
			#original-benefits section.h3.theme > .contents .item-image
			{
				position: relative;
				padding: 0 1rem;
			}
				#store-benefits section.h3.theme > .contents .item-image a,
				#original-benefits section.h3.theme > .contents .item-image a
				{
					display: block;	
					border: solid 2px var(--theme-color);
					padding: 2px;
				}
				
				#store-benefits section.h3.theme > .contents .item-image a img,
				#original-benefits section.h3.theme > .contents .item-image a img
				{
					width: 100%;
					height: auto;
				}
				#store-benefits section.h3.theme > .contents .item-image a[href] + .expand,
				#original-benefits section.h3.theme > .contents .item-image a[href] + .expand
				{
					right: 30px;
					bottom: 25px;
				}
				
			#store-benefits section.h3.theme  > .contents .shop-link,
			#original-benefits section.h3.theme  > .contents .shop-link
			{
				display: block;
				margin: .2rem 1rem 2rem;
				padding: .5rem 1rem;
				background: var(--theme-color);
				color: #FFF;
				text-align: center;
				text-decoration: none;
			}
			#store-benefits section.h3.theme  > .contents .shop-link:hover,
			#original-benefits section.h3.theme  > .contents .shop-link:hover
			{
				opacity: .6;
				pointer: cursor;
			}
			
			#store-benefits section.h3.theme  > .contents .shop-link[hidden],
			#original-benefits section.h3.theme  > .contents .shop-link[hidden],
			#store-benefits section.h3.theme  > .contents .shop-link[hidden]:hover,
			#original-benefits section.h3.theme  > .contents .shop-link[hidden]:hover
			{
				visibility: hidden;
				pointer: default !important;
			}
			
/*-- section-episode --------------------------------------------------------------- */
	
	#section-episode-page
	{
		scroll-margin-top: 40px;
		user-select: none;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	@media (orientation: portrait) {
		#section-episode-page
		{
			scroll-margin-top: 68px;
		}
	}
		
		#section-episode-page h1
		{
			display: flex;
			justify-content: center;
			max-width: 800px;
			margin: 0 auto;
			background: url("common/title-line-bg.png") 50% 42% no-repeat;
			background-size: 85% 8px;
		}
			
			#section-episode-page h1 img
			{
				width: 25%;
				height: auto;
				margin: 0 auto;
			}
			#section-episode-page h2 img
			{
				width: auto;
				height: 84px;
				margin: 0 auto;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#section-episode-page h2 img
				{
					height: 48px;
				}
			}
			
		#section-episode-page section.h2 .contents
		{
			width: 100%;
			max-width: 850px;
			margin: 0 auto;
		}
			
			#section-episode-page section.h3
			{
				scroll-margin-top: 50px;
			}
			@media (orientation: portrait) and (max-width: 1200px) {
				#section-episode-page section.h3
				{
					scroll-margin-top: 68px;
				}
			}
			
			/*- #section-ep-story */
				
				#section-ep-story
				{
					margin: 1rem auto;
					color: #666;
					font-size: 1.4rem;
					text-align: center;
					text-shadow:
						-1px -1px 1px	 rgba(255, 255, 255, 1),
						-1px -1px 1px	 rgba(255, 255, 255, 1),
						-1px 0px 1px	 rgba(255, 255, 255, 1),
						-1px 0px 1px	 rgba(255, 255, 255, 1),
						-1px 1px 1px	 rgba(255, 255, 255, 1),
						-1px 1px 1px	 rgba(255, 255, 255, 1),
						1px -1px 1px	 rgba(255, 255, 255, 1),
						1px -1px 1px	 rgba(255, 255, 255, 1),
						1px 0px 1px		 rgba(255, 255, 255, 1),
						1px 0px 1px		 rgba(255, 255, 255, 1),
						1px 1px 1px		 rgba(255, 255, 255, 1),
						1px 1px 1px		 rgba(255, 255, 255, 1),
						-2px -2px 2px	 rgba(255, 255, 255, 1),
						-2px -2px 2px	 rgba(255, 255, 255, 1),
						-2px 0px 2px	 rgba(255, 255, 255, 1),
						-2px 0px 2px	 rgba(255, 255, 255, 1),
						-2px 2px 2px	 rgba(255, 255, 255, 1),
						-2px 2px 2px	 rgba(255, 255, 255, 1),
						2px -2px 2px	 rgba(255, 255, 255, 1),
						2px -2px 2px	 rgba(255, 255, 255, 1),
						2px 0px 2px		 rgba(255, 255, 255, 1),
						2px 0px 2px		 rgba(255, 255, 255, 1),
						2px 2px 2px		 rgba(255, 255, 255, 1),
						2px 2px 2px		 rgba(255, 255, 255, 1);
				}
				@media (orientation: portrait) and (max-width: 1200px) {
					#section-ep-story
					{
						font-size: .8rem;
					}
				}
					
					#section-ep-story .lp + .lp
					{
						margin-top: 2rem;
					}
					
					#section-ep-story + .annotation
					{
						text-align: right;
					}
						
						#section-ep-story + .annotation small
						{
							display: block;
						}
						
			/*- #section-ep-gallery */
				
				#section-ep-gallery
				{
					margin: 3rem auto;
				}
				@media (max-width: 820px) {
					#section-ep-gallery
					{
						width: calc(100% - 2rem);
						margin: 3rem 1rem;
					}
				}
					
					
					#section-ep-gallery ul
					{
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						align-items: center;
						gap: 1rem;
						list-style: none;
					}
					#section-ep-gallery li
					{
						position: relative;
						width: calc((100% - 2rem) / 3);
					}
						
						#section-ep-gallery li a
						{
							display: block;
							width: 100%;
							border: solid 2px #4673FE;
							padding: 2px;
						}
							
							#section-ep-gallery li img
							{
								width: 100%;
								height: auto;
							}
							
							
							
			/*- #section-ep-character */
				
				#section-ep-character
				{
					width: 100%;
					max-width: 800px;
					margin: 4rem auto 0;
					padding: 4px;
					background: #FFF;
				}
				@media (max-width: 820px) {
					#section-ep-character
					{
						width: calc(100% - 2rem);
					}
				}
					
					/*- #section-ep-character .contents */
						
						#section-ep-character .contents
						{
							background:
								url("episode/episode_waku_top.png") top center no-repeat,
								url("episode/episode_waku_bottom.png") bottom center no-repeat,
								url("episode/episode_waku_middle.png") top center repeat-y,
								url("episode/episode_waku_bg.jpg") top center repeat-y,
								#FFF;
							background-size:
								100% auto,
								100% auto,
								100% auto,
								100% auto,
								100%;
						}
						
						/*- #section-ep-character .character-panel */
							
							#section-ep-character .character-panel
							{
								position: relative;
							}
							
							#section-ep-character .contents > .character-panel + .character-panel:before,
							#section-ep-character .contents > .sub:before
							{
								content: '';
								display: block;
								width: calc(100% - 3rem);
								border-top: 8px solid linear-gradient(in oklab to right, rgba(57, 97, 143, .3), rgba(57, 97, 143, .1) 50%, rgba(57, 97, 143, .3) 100%);
								margin: 5px 1.5rem 0;
								border-top: 5px solid #C4D2FF;
								padding: 5px 16px 0;
							}
							
							/*- #section-ep-character .stand */
								
								#section-ep-character .stand
								{
									z-index: 1;
									position: relative;
									display: block;
									width: 30%;
									height: auto;
								}
								
								#section-ep-character .rev .stand
								{
									margin: 0 0 0 auto;
								}
								
							/*- #section-ep-character .summary */
								
								#section-ep-character .summary
								{
									z-index: 2;
									position: absolute;
									top: 0;
									right: 0;
									width: 68%;
									margin: 20px;
								}
								@media (orientation: portrait) and (max-width: 1200px) {
									#section-ep-character .summary
									{
										z-index: 2;
										position: absolute;
										top: 0;
										right: 0;
										padding: 20px;
									}
								}
								#section-ep-character .rev .summary
								{
									right: auto;
									left: 0;
								}
								
								/*- #section-ep-character .serif */
									
									#section-ep-character .serif
									{
										width: 100%;
									}
										
										#section-ep-character .serif img
										{
											display: block;
											width: auto;
											height: 2rem;
										}
										@media (orientation: portrait) and (max-width: 1200px) {
											#section-ep-character .serif img
											{
												height: 1.2rem;
											}
										}
										
										#section-ep-character .serif .first
										{
											margin-right: auto;
										}
										
										#section-ep-character .serif .second
										{
											margin-left: auto;
										}
										
								/*- #section-ep-character .catch */
									
									#section-ep-character .catch
									{
										margin: 1rem 0 0 7%;
									}
										#section-ep-character .catch img
										{
											width: auto;
											height: 1.5rem;
										}
										@media (orientation: portrait) and (max-width: 1200px) {
											#section-ep-character .catch img
											{
												height: 1rem;
											}
										}
										
								/*- #section-ep-character .name */
									
									#section-ep-character .name
									{
										margin: .5rem 0 0 25%;
									}
										
										#section-ep-character .name img
										{
											width: auto;
											height: 3.0rem;
										}
										@media (orientation: portrait) and (max-width: 1200px) {
											#section-ep-character .name img
											{
												height: 2.2rem;
											}
										}
										
							/*- #section-ep-character .summary2 */
								
								#section-ep-character .summary2
								{
									z-index: 3;
									position: absolute;
									top: 42%;
									right: 0;
									width: 66%;
									padding: 20px 4px 10px 10px;
								}
								@media (orientation: portrait) and (max-width: 1200px) {
									#section-ep-character .summary2
									{
										z-index: 3;
										position: relative;
										margin-top: -2rem;
										padding: 0 .5rem 0;
									}
								}
								
								#section-ep-character .rev .summary2
								{
									right: auto;
									left: 0;
									padding: 20px 10px 10px 20px;
								}
								
								/*- #section-ep-character .text */
									
									#section-ep-character .text
									{
										margin: 0 1rem 0 0;
										color: #666;
										font-size: 1.0rem;
										font-weight: 600;
										text-shadow:
											-1px -1px 1px	 rgba(255, 255, 255, 1),
											-1px -1px 1px	 rgba(255, 255, 255, 1),
											-1px 0px 1px	 rgba(255, 255, 255, 1),
											-1px 0px 1px	 rgba(255, 255, 255, 1),
											-1px 1px 1px	 rgba(255, 255, 255, 1),
											-1px 1px 1px	 rgba(255, 255, 255, 1),
											1px -1px 1px	 rgba(255, 255, 255, 1),
											1px -1px 1px	 rgba(255, 255, 255, 1),
											1px 0px 1px		 rgba(255, 255, 255, 1),
											1px 0px 1px		 rgba(255, 255, 255, 1),
											1px 1px 1px		 rgba(255, 255, 255, 1),
											1px 1px 1px		 rgba(255, 255, 255, 1),
											-2px -2px 2px	 rgba(255, 255, 255, 1),
											-2px -2px 2px	 rgba(255, 255, 255, 1),
											-2px 0px 2px	 rgba(255, 255, 255, 1),
											-2px 0px 2px	 rgba(255, 255, 255, 1),
											-2px 2px 2px	 rgba(255, 255, 255, 1),
											-2px 2px 2px	 rgba(255, 255, 255, 1),
											2px -2px 2px	 rgba(255, 255, 255, 1),
											2px -2px 2px	 rgba(255, 255, 255, 1),
											2px 0px 2px		 rgba(255, 255, 255, 1),
											2px 0px 2px		 rgba(255, 255, 255, 1),
											2px 2px 2px		 rgba(255, 255, 255, 1),
											2px 2px 2px		 rgba(255, 255, 255, 1);
									}
										
										#section-ep-character .text .lp + .lp
										{
											margin-top: 1rem;
										}
										#section-ep-character .text em
										{
											color: #FF46E7;
											font-style: normal;
										}
								
							/*- #section-ep-character .sub */
								
								#section-ep-character .sub
								{
									display: flex;
									flex-flow: wrap;
									justify-content: center;
									gap: 1rem 1rem;
									padding: 0 1rem;
								}
								@media (orientation: portrait) and (max-width: 1200px) {
									#section-ep-character .sub
									{
										flex-flow: column;
										gap: 2rem 0;
									}
								}
									
									#section-ep-character .sub .character-panel
									{
										width: calc(50% - 1rem);
									}
									@media (orientation: portrait) and (max-width: 1200px) {
										#section-ep-character .sub img
										{
											width: 100%;
											height: auto;
											margin: 0 auto;
										}
									}
									
									#section-ep-character .sub .character-panel .stand
									{
										height: auto;
										margin: 0 auto;
									}
									
									#section-ep4-humino .stand
									{
										width: 92%;
									}
									
									#section-ep4-yuyu .stand
									{
										width: 84%;
									}
									
									#section-ep4-suginami .stand
									{
										width: 80%;
									}
									
									#section-ep4-tougo .stand
									{
										width: 80%;
									}
									
							/*- #section-ep1-arisa */
								
								#section-ep1-arisa
								{
								}
									
									#section-ep1-arisa .stand
									{
										z-index: 1;
										position: relative;
										top: -10px;
										display: block;
										width: 60%;
									}
									@media (orientation: portrait) {
										#section-ep1-arisa .stand
										{
											z-index: 1;
											position: relative;
											margin-top: -20px;
											display: block;
											width: 60%;
										}
									}
									
									#section-ep1-arisa .serif
									{
										margin-top: -.5rem !important;
									}
									
									#section-ep1-arisa .catch
									{
										margin-left: 15%;
									}
									
									#section-ep1-arisa .name
									{
										margin-left: 26%;
									}
									
									#section-ep1-arisa .summary2
									{
										top: 41%;
									}
							/*- #section-ep1-mizuha */
								
								#section-ep1-mizuha
								{
								}
									
									#section-ep1-mizuha .stand
									{
										width: 40%;
									}
									
									#section-ep1-mizuha .summary
									{
										width: 82%;
									}
										
										#section-ep1-mizuha .name
										{
											margin-left: 22%;
										}
										
									#section-ep1-mizuha .summary2
									{
										top: 61%;
										width: 72%;
									}
									
							/*- #section-ep1-menoa */
								
								#section-ep1-menoa
								{
								}
									
									#section-ep1-menoa .stand
									{
										width: 40%;
									}
									
									#section-ep1-menoa .summary
									{
										width: 80%;
									}
										
										#section-ep1-menoa .catch
										{
											margin-left: 18%;
										}
										
									#section-ep1-menoa .summary2
									{
										top: 64%;
										width: 70%;
									}
									
							/*- #section-ep1-gen */
								
								#section-ep1-gen
								{
									margin-top: -15px;
									padding: 0 0 20px;
								}
									
									#section-ep1-gen .stand
									{
										width: 90%;
									}
									
									
							/*- #section-ep1-tokiko */
								
								#section-ep1-tokiko
								{
									margin-top: -15px;
									padding: 0 0 20px;
								}
									
									#section-ep1-tokiko .stand
									{
										width: 90%;
									}
									
									
							/*- #section-ep2-nino */
								
								#section-ep2-nino
								{
								}
									
									#section-ep2-nino .stand
									{
										top: -10px;
										width: 37%;
									}
									
									#section-ep2-nino .summary
									{
										width: 80%;
									}
									
									#section-ep2-nino .catch
									{
										margin-top: 1.5rem;
										margin-left: 21%;
									}
									
									#section-ep2-nino .name
									{
										margin-left: 40%;
									}
									
									#section-ep2-nino .summary2
									{
										top: 41%;
									}
									
							/*- #section-ep2-sorane */
								
								#section-ep2-sorane
								{
								}
									
									#section-ep2-sorane .stand
									{
										width: 44%;
									}
									
									#section-ep2-sorane .summary
									{
									}
									
									#section-ep2-sorane .catch
									{
										margin-top: 1.5rem;
										margin-left: 3%;
									}
									
									#section-ep2-sorane .name
									{
										margin-left: 26%;
									}
									
									#section-ep2-sorane .summary2
									{
										top: 57%;
										width: 71%;
									}
									
							/*- #section-ep2-kako */
								
								#section-ep2-kako
								{
								}
									
									#section-ep2-kako .stand
									{
										width: 24%;
										margin-left: 6%;
									}
									
									#section-ep2-kako .summary
									{
									}
									
									#section-ep2-kako .catch
									{
										margin-left: 13%;
									}
									
									#section-ep2-kako .name
									{
										margin-left: 26%;
									}
									
									#section-ep2-kako .summary2
									{
										top: 62%;
										width: 69%;
									}
									
							/*- #section-ep2-menoa */
								
								#section-ep2-menoa
								{
								}
									
									#section-ep2-menoa .stand
									{
										width: 40%;
										margin-left: 6%;
										padding: 0 5px 5px 0;
									}
									
									#section-ep2-menoa .summary
									{
									}
									
									#section-ep2-menoa .catch
									{
										margin-left: 7%;
									}
									
									#section-ep2-menoa .name
									{
										margin-left: 15%;
									}
									
									#section-ep2-menoa .summary2
									{
										top: 62%;
										width: 71%;
									}
									
							/*- #section-ep3-hiyori */
								
								#section-ep3-hiyori
								{
								}
									
									#section-ep3-hiyori .stand
									{
										width: 48%;
										padding: 0 5px 5px 0;
									}
									
									#section-ep3-hiyori .summary
									{
										width: 74%;
									}
									
									#section-ep3-hiyori .catch
									{
										margin-left: 12%;
									}
										
										#section-ep3-hiyori .catch img
										{
											margin-top: -.5rem;
											height: 2.4rem;
										}
										
									#section-ep3-hiyori .name
									{
										margin-left: 28%;
									}
									
									#section-ep3-hiyori .summary2
									{
										top: 41%;
										width: 66%;
									}
									
							/*- #section-ep3-miu */
								
								#section-ep3-miu
								{
								}
									
									#section-ep3-miu .stand
									{
										width: 28%;
										padding: 0 5px 5px 0;
									}
									
									#section-ep3-miu .summary
									{
										width: 74%;
									}
									
									#section-ep3-miu .catch
									{
										margin-left: 14%;
									}
										
										#section-ep3-miu .catch img
										{
											margin-top: -.5rem;
											height: 2.4rem;
										}
										
									#section-ep3-miu .name
									{
										margin-left: 15%;
									}
									
									#section-ep3-miu .summary2
									{
										top: 53%;
										width: 72%;
									}
									
							/*- #section-ep3-suginami */
								
								#section-ep3-suginami
								{
									margin-top: -15px;
									padding: 0 0 20px;
								}
									
									#section-ep3-suginami .stand
									{
										width: 90%;
									}
									
									
							/*- #section-ep3-kanata */
								
								#section-ep3-kanata
								{
									margin-top: -15px;
									padding: 0 0 20px;
								}
									
									#section-ep3-kanata .stand
									{
										width: 100%;
									}
									
									
							/*- #section-ep3-kotori */
								
								#section-ep3-kotori
								{
									padding: 0 0 20px;
								}
									
									#section-ep3-kotori .stand
									{
										width: 120%;
									}
									
									
							/*- #section-ep4-arisu */
								
								#section-ep4-arisu
								{
								}
									
									#section-ep4-arisu .stand
									{
										z-index: 1;
										position: relative;
										top: -15px;
										display: block;
										width: 50%;
									}
									@media (orientation: portrait) {
										#section-ep4-arisu .stand
										{
											z-index: 1;
											position: relative;
											margin-top: -20px;
											display: block;
											width: 60%;
										}
									}
									
							/*- #section-ep4-souma */
								
								#section-ep4-souma
								{
									margin-top: -10px;
								}
								
								#section-ep4-souma .stand
								{
									margin-top: -20px !important;
									margin-right: 2% !important;
									width: 35%;
								}
									
									#section-ep4-souma .serif
									{
										margin-left: 4rem;
									}
									
									#section-ep4-souma .catch
									{
										margin-left: 25%;
									}
									
									#section-ep4-souma .name
									{
										margin-left: 32%;
									}
									
									#section-ep4-souma .summary2
									{
										top: 60%;
									}
									
							/*- #section-ep4-menoa */
								
								#section-ep4-menoa
								{
								}
									
									#section-ep4-menoa .stand
									{
										width: 45%;
									}
									
									#section-ep4-menoa .summary2
									{
										top: 63%;
										width: 70%;
									}
									
							/*- #section-ep4-yukina */
								
								#section-ep4-yukina
								{
								}
									
									#section-ep4-yukina .stand
									{
										width: 40%;
									}
									
									#section-ep4-yukina	 .catch
									{
										margin-left: 0 !important;
									}
									
									#section-ep4-yukina	 .name
									{
										margin-left: 18% !important;
									}
									
									#section-ep4-yukina	 .summary2
									{
										top: 62%;
										width: 68%;
									}
							/*- #section-ep4-aika */
								
								#section-ep4-aika
								{
								}
									
									#section-ep4-aika .stand
									{
										width: 26%;
										margin-left: 2% !important;
									}
									
									#section-ep4-aika .catch
									{
										margin-left: 5% !important;
									}
									
									#section-ep4-aika .name
									{
										margin-left: 16% !important;
									}
									
									#section-ep4-aika .summary2
									{
										top: 62%;
										width: 70%;
									}
									
							/*- #section-ep4-kako */
								
								#section-ep4-kako
								{
								}
									
									#section-ep4-kako .catch
									{
										margin-left: 10% !important;
									}
									
									#section-ep4-kako .name
									{
										margin-left: 21% !important;
									}
									
									#section-ep4-kako .stand
									{
										width: 24%;
										margin-right: 5% !important;
									}
									
									#section-ep4-kako .summary2
									{
										top: 58%;
										width: 70%;
									}
									
							/*- #section-ep4-akari */
								
								#section-ep4-akari
								{
								}
									
									#section-ep4-akari .summary
									{
										width: 82%;
									}
										
										#section-ep4-akari .catch
										{
											margin-left: 20% !important;
										}
										
										#section-ep4-akari .name
										{
											margin-left: 40% !important;
										}
										
									#section-ep4-akari .stand
									{
										width: 35%;
									}
									
									#section-ep4-akari	 .summary2
									{
										top: 55%;
										width: 70%;
									}
									
							/*- #section-ep4-menoa */
								
								#section-ep4-menoa
								{
								}
									
									#section-ep4-menoa .stand
									{
										width: 45%;
									}
									
									#section-ep4-menoa .summary2
									{
										top: 63%;
										width: 70%;
									}
									
							/*- #section-ep5-sorane */
								
								#section-ep5-sorane
								{
									position: relative;
								}
									
									#section-ep5-sorane .still
									{
										width: 100%;
									}
										#section-ep5-sorane .still img
										{
											width: 100%;
											height: auto;
										}
									
									#section-ep-character .still-serif
									{
										position: absolute;
										top: 3%;
										left: 20%;
										width: 76%;
									}
										#section-ep-character .still-serif img
										{
											display: block;
											width: auto;
											height: 2rem;
										}
										
										#section-ep-character .still-serif .first
										{
											margin-right: auto;
										}
										
										#section-ep-character .still-serif .second
										{
											margin-left: auto;
										}
										
									#section-ep5-sorane .still-summary
									{
										position: absolute;
										top: 62%;
										width: 78%;
									}
									
									#section-ep5-sorane .name
									{
										margin-left: 22% !important;
									}
										
										#section-ep5-sorane .name img
										{
											height: 5rem !important;
										}
										
									#section-ep5-sorane .still-summary2
									{
										position: absolute;
										top: 85%;
										left: 3%;
										width: 90%;
									}
									
							/*- #section-ep5-gen */
								
								#section-ep5-gen
								{
									padding: 0 0 20px;
								}
									
									#section-ep5-gen .stand
									{
										width: 90%;
									}
									
							/*- #section-ep5-menoa */
								
								#section-ep5-menoa
								{
									margin-top: -7px;
									padding: 0 0 20px;
								}
									
									#section-ep5-menoa .stand
									{
										width: 90%;
									}
									
							/*- #section-ep6-shiina */
								
								#section-ep6-shiina
								{
								}
									
									#section-ep6-shiina .summary
									{
										width: 77%;
									}
										
										#section-ep6-shiina .catch
										{
											margin-left: 16% !important;
										}
										
										#section-ep6-shiina .name
										{
											margin-left: 36% !important;
										}
										
									#section-ep6-shiina .stand
									{
										margin-left: 4%;
										width: 36%;
									}
									
									#section-ep6-shiina	 .summary2
									{
										top: 54%;
										width: 66%;
									}
									
							/*- #section-ep6-chiyoko */
								
								#section-ep6-chiyoko
								{
									padding: 0 0 8px;
								}
									
									#section-ep6-chiyoko .summary
									{
										width: 73%;
									}
										
										#section-ep6-chiyoko .catch
										{
											margin-left: 0;
										}
											
											#section-ep6-chiyoko .catch img
											{
												margin-top: -.5rem;
												height: 2.4rem;
											}
											
										#section-ep6-chiyoko .name
										{
											margin-left: 11% !important;
										}
										
									#section-ep6-chiyoko .stand
									{
										margin-left: 4%;
										width: 36%;
									}
									
									#section-ep6-chiyoko .summary2
									{
										top: 54%;
										width: 72%;
									}
									
/*-- lightbox --------------------------------------------------------------- */
	
	#lightbox-popup
	{
		z-index: 100000;
		position: fixed;
		top: -5rem;
		left: -5rem;
		display: none;
		justify-content: center;
		align-items: center;
		width: calc(100vw + 10rem);
		height: calc(100vh + 10rem);
		padding: 5rem;
		background: rgba(0, 0, 0, .4) !important;
		-webkit-user-select: none;
		user-select: none;
	}
	#lightbox-popup.open
	{
		display: flex;
	}
		
		#lightbox-popup .frame
		{
			display: flex;
			flex-flow: stre
			width: auto;
			max-width: 90%;
			max-height: calc(90% - 50px);
			border-color: #365F8B;
		}
			
			#lightbox-popup .main
			{
				padding: 5px;
				background: #FFF;
			}
				
				#lightbox-popup .nav
				{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 76px;
					height: 100%;
					margin: auto 0;
					padding: 24px 12px;
					cursor: pointer;
				}
					
					#lightbox-popup .nav img
					{
						width: 100%;
						height: auto;
					}
					
				#lightbox-popup .canvas
				{
					position: relative;
				}
					
					#lightbox-popup .canvas > img
					{
						z-index: 1;
						position: relative;
						width: 100%;
						max-width: 80vw;
						height: 100%;
						max-height: 80vh;
						object-fit: contain;
						border: solid 3px var(--theme-color);
					}
					
				#lightbox-popup .tool-bar
				{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #FFF;
				}
					
					#lightbox-popup .close-button
					{
						margin: 0 0 0 auto;
						padding: .5rem 0;
						cursor: pointer;
					}
						
						#lightbox-popup .close-button img
						{
							width: auto;
							height: 2rem;
						}
						
				
				
				
				
/*-- イベントテンプレ --------------------------------------------------------------- */

	#event-title
	{
		width: 100%;
		max-width: 1000px;
		margin: auto;
		padding: 1rem 0;
	}
		
		#event-title img
		{
			width: 100%;
			height: auto;
		}
		
	#section-event-desc
	{
		width: 100%;
		max-width: 1000px;
		margin: auto;
		padding: 2rem 4rem;
		background: linear-gradient(in oklab to right, #b1cbda, transparent 80%, transparent 100%);
		color: #375F8C;
	}
	
	#section-event-summary
	{
		width: 100%;
		max-width: 1000px;
		margin: 5rem auto;
		background: linear-gradient(in oklab to right, #b1cbda, transparent 80%, transparent 100%);
	}
		
		#section-event-summary h2
		{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 0 .5rem;
			padding: .3rem 0 .3rem .5rem;
			background: linear-gradient(in oklab to right, #7796B5, transparent 65%, transparent 100%) left center no-repeat;
			background-size: 100% 10px;
			font-size: 1.8rem;
		}
		@media (orientation: portrait) {
			#section-event-summary h2
			{
				background-size: 100% 1.5vw;
				font-size: 3.6vw;
			}
		}
		
		#section-event-summary .contents
		{
			padding: 1rem;
		}
		

	/*- 公式に戻るナビゲーション --------------------------------------------------------------- */
		
		#return-official
		{
			width: 100%;
			max-width: 1000px;
			margin: .5rem auto;
		}
		
/*- セクション --------------------------------------------------------------- */
	
	#section-event-present-item,
	#section-event-post-item,
	#section-event-attention
	{
		width: 100%;
		max-width: 1000px;
		margin: 5rem auto;
	}
		
		#section-event-present-item h2,
		#section-event-post-item h2,
		#section-event-attention h2
		{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: .3rem 0 .3rem .5rem;
			background: linear-gradient(in oklab to right, #7796B5, transparent 65%, transparent 100%) left center no-repeat;
			background-size: 100% 10px;
			font-size: 1.8rem;
		}
		@media (orientation: portrait) {
			#section-event-present-item h2,
			#section-event-post-item h2,
			#section-event-attention h2
			{
				background-size: 100% 1.5vw;
				font-size: 3.6vw;
			}
		}
		
	/*- プレゼント セクション --------------------------------------------------------------- */
		
		#section-event-present-item p
		{
			padding: .2rem 2rem;
		}
		
		#section-event-present-item .image
		{
			display: flex;
			flex-flow: column;
			align-items: center;
			padding: 1rem 2rem;
		}
		
		#section-event-present-item img
		{
			width: 100%;
			max-width: 500px;
			height: auto;
		}
		
		
		
	/*- ポストアイテム セクション --------------------------------------------------------------- */
		
		#section-event-post-item-target
		{
			display: flex;
			flex-flow: column;
			align-items: center;
			padding: 1rem 2rem;
		}
			
			#section-event-post-item img
			{
				width: 100%;
				max-width: 500px;
				height: auto;
			}
			
		#section-event-post-item .annotation
		{
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			padding: 1rem 0;
			color: #FF8E1E;
			font-size: 1.0rem;
		}
		@media (orientation: portrait) {
			#section-event-post-item .annotation
			{
				padding: 1rem;
			}
		}
		
		
	/*- ページ内ナビ --------------------------------------------------------------- */
		
		#event-title ~ * nav.sect
		{
			margin: 1rem auto 4rem;
			padding: 0;
			font-size: 1.0rem;
		}
			
			#event-title ~ * nav.sect ul
			{
				display: flex;
				flex-flow: wrap;
				justify-content: flex-end;
				margin: -.5rem 0 0 -1rem;
				padding: 0;
				list-style-type: none;
			}
				
				#event-title ~ * nav.sect li
				{
					display: block;
					margin: .5rem 0 0 .5rem;
				}
				
					#event-title ~ * nav.sect li a
					{
						color: #375F8C;
						text-decoration: underline;
					}