@charset "UTF-8";
#bo-series {
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.5);
		
		.modal-box {
			background-color: #fff;
			color:#333;
			font-size:14px;
			line-height:1.6;
			width: 80vw;
			max-width: 500px;
			height:80vw;
			max-height:500px;
			top:50%;
			left:50%;
			transform:translate(-50%, -50%);
			padding:3%;
			position: relative;
			
			h3{
				border-bottom:1px solid #ccc;
				text-align: center;
				padding: 0.5em 0;
				margin-bottom: 0.5em;
				font-size: 1.6em;
			}
			p.ctgName{
				font-size:1.4em;
				font-weight:bold;
				text-align: center;
			}
			p.prodDetail{
				margin:1.5em auto;
				font-size:1.6em;
				letter-spacing:0.03em;
				span{
					font-size:0.6em;
					vertical-align: top;
					
				}
			}
			p.prodNotes{
				font-size:0.7em;
			}
			
			.modalClose{
				position: absolute;
				width:25px;
				height:25px;
				top: -10px;
				right: -10px;
				border-radius:50%;
				background-color:#333;
				color:#fff;
				font-size:14px;
				text-align:center;
			}
			
		}//.modal-box
		
		@keyframes show{
			from{
				opacity: 0;
			}
			to{
				opacity: 1;
			}
		}
	}//.modal
}
@media only screen and (max-width: 768px) {
	#bo-series {
		.modal {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0,0,0,0.5);
			
			.modal-box {
				background-color: #fff;
				color:#333;
				font-size:14px;
				line-height:1.6;
				width: 80vw;
				max-width: 500px;
				height:80vw;
				max-height:500px;
				top:50%;
				left:50%;
				transform:translate(-50%, -50%);
				padding:3%;
				position: relative;
				
				h3{
					border-bottom:1px solid #ccc;
					text-align: center;
					padding: 0.5em 0;
					margin-bottom: 0.5em;
					font-size:1.0em;
				}
				p.ctgName{
					font-size:1.0em;
					font-weight:bold;
					text-align: center;
				}
				p.prodDetail{
					margin:1.0em auto;
					font-size:1.0em;
					letter-spacing:0.03em;
					span{
						font-size:0.6em;
						vertical-align: top;
						
					}
				}
				p.prodNotes{
					font-size:0.6em;
				}
				
				.modalClose{
					position: absolute;
					width:25px;
					height:25px;
					top: -10px;
					right: -10px;
					border-radius:50%;
					background-color:#333;
					color:#fff;
					font-size:14px;
					text-align:center;
				}
				
			}//.modal-box
			
			@keyframes show{
				from{
					opacity: 0;
				}
				to{
					opacity: 1;
				}
			}
		}//.modal
	}
/* PC
----------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
#bo-series {
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.5);
		
		.modal-box {
			background-color: #fff;
			color:#333;
			font-size:14px;
			line-height:1.6;
			width: 80vw;
			max-width: 500px;
			height:80vw;
			max-height:500px;
			top:50%;
			left:50%;
			transform:translate(-50%, -50%);
			padding:3%;
			position: relative;
			
			h3{
				border-bottom:1px solid #ccc;
				text-align: center;
				padding: 0.5em 0;
				margin-bottom: 0.5em;
				font-size:1.5em;
			}
			p.ctgName{
				font-size:1.4em;
				font-weight:bold;
				text-align: center;
			}
			p.prodDetail{
				margin:1.5em auto;
				font-size:1.2em;
				letter-spacing:0.03em;
				span{
					font-size:0.6em;
					vertical-align: top;
					
				}
			}
			p.prodNotes{
				font-size:1.0em;
			}
			
			.modalClose{
				position: absolute;
				width:25px;
				height:25px;
				top: -10px;
				right: -10px;
				border-radius:50%;
				background-color:#333;
				color:#fff;
				font-size:14px;
				text-align:center;
			}
			
		}//.modal-box
		
		@keyframes show{
			from{
				opacity: 0;
			}
			to{
				opacity: 1;
			}
		}
	}//.modal
}
}