@charset "UTF-8";

/*-- base.css --*/





/*-- base --*/
	
	html, body, main, section, article, aside, nav, div,
	h1, h2, ul, li, dl, dt, dd, img,
	:before, :after
	{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html, body, main, section, article, aside, nav, div,
	h1, h2, ul, dl, dt, dd, img,
	{
		display: block;
	}
	html
	{
		width: 100%;
		background-size: cover;
		color: #444;
		font-family: 'Noto Sans JP', sans-serif;
	}
	
	body
	{
		width: 100%;
		/* bad status for IE
		display: flex;
		flex-flow: column;
		*/
	}
	
	main
	{
		width: 100%;
		position: relative;
	}
	
	.center-wrapper
	{
		width: 1000px;
		margin: 0 auto;
	}
	@media screen and (max-width: 1025px) {
		.center-wrapper
		{
			width: 100%;
		}
	}


/*-- main-menu --*/
	
	#main-menu
	{
		z-index: 100;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		background: #6DCAFF;
	}
		
		#site-title
		{
			display: flex;
			align-items: center;
			width: 15%;
			max-width: 150px;
			height: auto;
		}
		#site-title img
		{
			width: 100%;
			height: auto;
		}
		
		#main-menu ul
		{
			list-style: none;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 -.5rem;
		}
		
			#main-menu li
			{
				margin: 0 0 0 .5rem;
				
				opacity: 0;
				transform: translateY(-100%);
			}
			.ready #main-menu li
			{
				animation: 800ms menuIn forwards;
			}
			#main-menu li:nth-child(2) { animation-delay: 200ms; }
			#main-menu li:nth-child(3) { animation-delay: 300ms; }
			#main-menu li:nth-child(4) { animation-delay: 400ms; }
			#main-menu li:nth-child(5) { animation-delay: 500ms; }
			#main-menu li:nth-child(6) { animation-delay: 600ms; }
			#main-menu li:nth-child(7) { animation-delay: 700ms; }
			
			@keyframes menuIn {
				from {
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			
			@keyframes fadeIn {
				from {
				}
				to {
					opacity: 1;
				}
			}
			
			#main-menu a
			{
				display: block;
			}
			
	/* 分岐 
		トップは top.css に記載
		他は common.css に記載
	*/
	/*-- 低解像度用 --*/
	@media screen and (max-width: 1024px) {
		/*
		#main-menu
		{
			justify-content: flex-start;
		}
		
		#main-menu header
		{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: auto;
		}
			#main-menu header .close
			{
				display: flex;
				align-items: center;
				margin: 0 0 0 auto;
				white-space: nowrap;
				cursor: pointer;
			}
		*/
		
		
	}




/*-- footer --*/
	
	footer
	{
		width: 100%;
		margin: 1rem 0 0;
		padding: .5rem 0;
		background: url('/product/dc4fd/rc/product_bg.jpg') center top no-repeat;
		background-size: cover;
	}
	/*
	footer
	{
		flex-flow: column;
	}
	*/
		
		#footer-product
		{
			display: flex;
			align-items: center;
			margin: 1rem auto 0;
		}
			
			#footer-productTitle
			{
				width: 30%;
				margin: 1rem auto 0;
			}
				
				#footer-productTitle img
				{
					width: 100%;
				}
				
			#footer-productInfo
			{
				width: calc(70% - 3rem);
				margin-left: 3rem;
			}
				
				#footer-productInfo dl
				{
					display: flex;
					flex-flow: wrap;
					font-size: .85rem;
				}
					
					#footer-productInfo dt
					{
						width: 6rem;
					}
					
					#footer-productInfo dd
					{
						display: flex;
						width: calc(100% - 7rem);
						margin: 0 0 0 1rem;
					}
					#footer-productInfo dd:before
					{
						content: '：';
					}
					
		#footer-share
		{
			display: flex;
			flex-flow: column;
			align-items: center;
			width: calc(1000px - 2rem);
			margin: 4rem auto;
		}
			
			#footer-share ul
			{
				list-style: none;
			}
			
	/*-- スマホ解像度 --*/
		
		@media screen and (max-width: 1025px) {
			
			#footer-product
			{
				flex-flow: column;
				margin: 0 auto;
			}
				
				#footer-productTitle
				{
					width: 30%;
					margin: 0 auto;
				}
					
					#footer-productTitle img
					{
						width: 100%;
					}
					
				#footer-productInfo
				{
					width: 100%;
					margin-left: 0;
				}
				
				#footer-productInfo dl
				{
					padding: 0 1rem;
				}
					
					#footer-productInfo dt
					{
						width: 100%;
					}
					
					#footer-productInfo dd
					{
						width: 100%;
						margin: 0 0 0 1rem;
					}
					#footer-productInfo dd:before
					{
						content: '';
					}
			#footer-share
			{
				width: 100%;
				margin: 2rem auto;
			}
			
		}





/*-- マウスオーバー 汎用 - 画像入れ替え不要なもののみ対応 --*/
	
	.flip,
	.no-flip
	{
		position: relative;
	}
	
	.flip img,
	.no-flip img
	{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	
		.flip img:nth-child(1),
		.no-flip img:nth-child(1)
		{
			z-index: 1;
			position: relative;
		}
		
		.flip img:nth-child(2),
		.no-flip img:nth-child(2)
		{
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			opacity: 0;
			transition: opacity 500ms;
		}