@charset "utf-8";

	body{
		background: #000 url(images/body-bk.jpg) center top repeat-y;
		box-shadow: 0 5px 15px -2px #000 inset;
	}
@media screen and (max-width:767px){
	body{
		font-size: .8em;
		background-size: 70% auto;
	}
}
	
/*- 金属板ラッパー -*/
	.wrapper{
		background: #ccc url(images/bk-metal.png) center top;
		background-size: 100% 1400px;
		text-align: center;
		margin: auto auto 2em;
		overflow: hidden;
		box-shadow: 0 0 30px 1px #000;
		position: relative;
	}
		.wrapper > *{
			position: relative;
			z-index: 5;
		}
		.wrapper::before{
			content: "";
			display: block;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0; left: 0;
			background: url(images/bk-noise.png) center top;
			background-size: 100% auto;
			box-shadow: 1px 1px 0 0 rgba(175,175,175,.5) inset , -1px -1px 0 0 rgba(100,100,100,.5) inset ,8em 0 15em -4em rgba(0,0,0,0.5) inset , -8em 0 15em -4em rgba(0,0,0,0.5) inset;
		}


/*- タイトル -*/
	header[role="banner"]{
	
		& h1{
			padding: 1em 0;
			& > img{
				max-width: 85%;
			}
		}
		& > span img{
			max-width: 100%;
			padding: 0 0 1em;
		}
	}



/*- YCSJ説明 -*/
	.ycsj-about{
		
	}


	
/* -基本情報 - */
	.ycsj-information{
		
	}


	.information{
		padding: 2em .5em 0;
	}
		.information > div{
			display: inline-block;
			box-shadow: 0 0 8px 0 #000;
			border-radius: 1em;
			padding: .2em;
			background: #ccc;
			margin: auto;
			overflow: hidden;
			
		}
		.information > div > div{
			border-radius: .8em;
			box-shadow: 0 0 0 2px #be1319 inset , 0 0 0 3px #fff inset;
			padding: .5em .8em;
			background: #444;
		}
		.information > div > div > table{
			display: block;
			color: #fff;
			border-collapse: separate;
			border-spacing: .5em;
		}
			.information > div > div > table th{
				background: #333;
				color: #d5d5d5;
				border-radius: 5px;
				font-weight: bold;
				text-align: center;
				width: 8em;
				padding: .2em 0;
				vertical-align: middle;
			}
			.information > div > div > table td{
				font-weight: bold;
				text-align: left;
				padding: .2em 0  .2em .5em;
				vertical-align: middle;
			}



.ycsj-about{
	background:
		repeating-linear-gradient(-45deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px , rgba(0,0,0,.1) 0px , rgba(0,0,0,.1) 4px),
		url(/japan/event/ycsj/common/images/state.jpg) center center no-repeat,
		#000;
	box-shadow: 0 1em 2em -.5em #000 inset , 0 -1em 2em -.5em #000 inset;
	position: relative;
	margin: 40px auto;
	border-top: 3px solid #555555;
	border-bottom: 3px solid #cccccc;
	padding: 3em 1em 2em;
	@media screen and (max-width:767px){
		padding: 2.5em 1em;
		background-size: auto, auto 120%, auto;
		margin: auto auto 2em;
	}
	@media screen and (min-width:1600px){
		background-size: auto, 100% auto, auto;
	}
	
	&::before , &::after{
		content: "";
		position: absolute;
		left: 0;
		height: 32px;
		width: 100%;
		background-repeat: no-repeat;
		background-image: url(/japan/event/ycsj/common/images/ycsj-about.png);
		@media screen and (max-width:767px){
			content: none;
		}
	}
	&::before{
		background-position: center top;
		top: -30px;
	}
	&::after{
		background-position: center bottom;
		bottom: -30px;
	}
	& h1{
		border-top: 1px solid;
		border-bottom: 1px solid;
		max-width: 980px;
		padding: 5px 0 0;
		margin: auto auto 2em;
		border-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,.9) 71%, rgba(255,255,255,0) 100%) 1;
		
		& img{
			max-width: 100%;
		}
	}
	& picture *{
		max-width: 100%;
		margin: auto auto 1.5em;
	}
	& p{
		color: #ccc;
		
		& em{
			color: #fee300;
			font-weight: bold;
			font-size: 1.25em;
			display: block;
			line-height: 1em;
			padding: 0 0 .8em;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
			
			& > span{
				font-size: .8em;
			}
		}
	}
}

.ycsj-information{
	padding: 1em;
	
	& div{
		margin: auto;
		box-shadow: 0 0 8px 0 #000;
		border-radius: .9em;
		padding: 3px;
		background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(68,68,68,1) 50%,rgba(255,255,255,1) 100%);
		width: fit-content;
		@media screen and (max-width:767px){
			width: auto;
			padding: 1px;
		}

		& table{
			color: #fff;
			background: #444;
			border-collapse: separate;
			border-spacing: .4em;
			border-radius: .8em;
			box-shadow: 0 0 0 2px #f55 inset , 0 0 0 3px #eee inset;
			padding: .5em;
		
			& tbody{
				
			}
			& th{
				background: #333;
				color: #d5d5d5;
				border-radius: 5px;
				font-weight: bold;
				text-align: center;
				width: 8em;
				padding: .2em 0;
				vertical-align: middle;
			}
			& td{
				font-weight: bold;
				text-align: left;
				padding: .2em 1em .2em .5em;
				vertical-align: middle;
			}
		}
	}
}


.ycsj-contents{
	padding: 2.5em .5em 0;
	
	&:last-child{
		padding-bottom: 2.5em;
	}
	
	& h1{
		background: url(/japan/event/ycsj/common/images/section-title-bk.png) center center repeat-x;
		height: 60px;
		margin: auto -1em 1em;
		display: flex;
		align-items: center;
	
		& img{
			display: block;
			vertical-align: bottom;
			margin: auto;
			max-width: 100%;
		}
	}
}


/*基本スタイル：フチのある黒い領域*/
.ycsj-items{
	max-width: 980px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: .5em;
	box-shadow: 0 0 3px 1px rgba(0,0,0,0.5) , 0 0 2px 0 #fff inset;
	margin: auto auto 1em;
	@media screen and (max-width:767px){
		padding: 6px;
	}
	
	& > div:last-child{
		margin: auto;
	}	
	& > div{
		box-sizing: border-box;
		margin: auto auto .5em;
		background: rgba(0,0,0,0.75);
		text-align: left;
		border-radius: .2em;
		color: #eee;
		font-size: .95em;
		position: relative;
		padding: 1em 1em .8em 20%;
		@media screen and (max-width:767px){
			padding: 1em 1em .8em;
		}
		
		&.center{
			text-align: center;
			padding: 1em 1em .8em;
		}
		
		& > *:not(:last-child){
			margin-bottom: .5em;
		}		
		& h2{
			position: absolute;
			left: 1em;
			top: 1em;
			width: 17%;
			color: #fff;
			font-weight: bold;
			@media screen and (max-width:767px){
				position: relative;
				left: 0;
				top: 0;
				width: auto;
				font-size: 1.2em;
				padding: .5em 0 .5em;
			}
		}
		& h3{
			color: #ccc;
			display: block;
			background: rgba(0,0,0,.5);
			line-height: 1em;
			padding: .6em .8em .4em;
			position: relative;
			margin-top: 2em;
			
			&.num{
				padding: .6em .8em .4em 2.7em;	
			}
			&.num::before{
				content: attr(rel);
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 2em;
				background: #555;
				color: #eee;
				font-weight: bold;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 0 1px #888 inset;
			}
		}
		& h2 + h3{
			margin-top: auto;
		}
		
		& h4{
			border-bottom: 1px solid #888;
			margin-top: 2em;
			padding: 0 0 .2em .2em;
			font-weight: bold;
		}
		& h5{
			margin-top: 2em;
			font-weight: bold;
			&.deco::before{	content: "＜ ";}
			&.deco::after{	content: " ＞";}
		}
		& h6{
			border: 1px solid #888;
			padding: .4em .5em .2em;
		}
		& p{
			&.special{
				padding-top: 1.5em;
				color: #fff;
			}
			&.information{
				padding: 1.5em 0;
				font-size: 1.1em;
				font-weight: bold;
			}
			&.enter-attention{
				color: #ee0;
				font-weight: bold;
				position: relative;
				padding: 1.5em 0 1.5em 2.3em;
				
				&::before{
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0,-50%);
					width: 1.8em;
					height: 1.8em;
					background: url(../common/images/icon-attention.png);
					background-size: 100% auto;
				}
			}

			&.enter-notice{
				border: 1px solid #888;
				border-radius: 2em;
				text-align: center;
				padding: .5em 0 .4em;
				line-height: 1em;
				color: #ccc;
				margin-bottom: 1.5em;
			}

			& em{
				display: block;
				font-weight: bold;
			}
			& small{
				display: block;
				position: relative;
				padding-left: 1.3em;
				opacity: .7;
				
				&::before{
					position: absolute;
					left: 0;
					top: 0;
					content: "※";
				}
			}
		}
		
		& a{
			color: #fee300;
		}
		
		& b{
			font-weight: bold;
			font-size: 1.05em;
		}
		
		& table{
			& th{
				line-height: 1em;
				color: #ccc;
				padding: .6em 0 .4em;
				background: rgba(0,0,0,.6);
			}
			& td{
				vertical-align: middle;
				border-bottom: 1px solid #888;
				line-height: 1.4em;
				padding: .8em .5em;
			}
			& tr > *:first-child{
				text-align: center;
			}
			& tr:last-child td{
				border-bottom: 0;
			}
			&.frame{
				border: 1px solid #888;
				& th{
					width: 10em;
					border-bottom: 1px solid #888;
					vertical-align: middle;
				}
				& td{
					padding: .5em;
				}
			}
		
		}
		& ul,& ol{
			padding-left: 1.3em;
			
			& li{
				padding: .1em 0;
			}
		}
		& ul > li{list-style-type: square;}
		& ol > li{list-style-type: decimal;}
		
		& figure{

			& img{
				max-width: 100%;
			}
		}
		
		& div.flex{
			
		}
	}
}/*.ycsj-items*/


		div.sales-enter{
			display: flex;
			justify-content: space-between;
			margin-bottom: 1em;
			
			& figure{
				width: calc(94% / 3);
				background: rgba(0, 0, 0, 0.4);
				padding: .8em 1em;
				box-sizing: border-box;
				border: 1px solid #666;
				border-radius: 5px;
				text-align: center;
				position: relative;
				
				&:not(:nth-child(3))::after{
					content: "";
					position: absolute;
					background: url(/japan/assets/svg/triangle.svg);
					background-size: 100% auto;
					width: 1.4em;
					height: 1.4em;
					right: -1.2em;
					top: 50%;
					transform: translate(0,-50%);
					filter: brightness(0) saturate(100%) invert(61%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(92%) contrast(92%);
				}
				
				& img{
					max-width: 80%;
				}
				
				& figcaption{
					color: #ddd;
					font-size: .8em;
					font-weight: bold;
					line-height: 1.2em;
					& span{
						color: #cc0;
						font-weight: bold;
					}
				}
			}
		}



/* 黒い枠：濃 */
	.black-panel{
		background: rgba(0,0,0,0.4);
		padding: .8em;
		border: 1px solid #666;
		border-radius: .5em;
		margin-bottom: .8em;
		box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
		text-align: center;
		
		& img{
			vertical-align: bottom;
		}
		
		& em{
			display: block;
			font-size: 1.2em;
			text-align: left;			
			color: #dd0;
			font-weight: bold;
			margin-bottom: .8em;
			padding: .3em 0;
			text-align: center;
			border-bottom: 1px solid #444;
			& span{
				font-weight: bold;
				font-size: .9em;
				display: block;
			}
		}
		
		& figure + span{
			display: block;
			background: #444;
			color: #bbb;
			font-size: 1;
			text-align: center;
			line-height: 1em;
			margin: .5em auto .8em;
			padding: .6em .5em .4em;
			&::before{
				content: "販売価格：";
			}
			&.venue::before{
				content: "会場販売価格：";
			}
		}
		& figure + p{
			padding: 1em 0 1.2em;
			color: #bbb;
		}
		
		& figure{
			padding: 0;
			margin-bottom: 1em;
			
			&.logo{
				background: #fff;
				margin-bottom: .5em;
				border-radius: .3em;
				& img{
					width: 30%;
				}
			}
			
			&.set img:first-child{	width: 54%;}
			&.set img:last-child{	width: 46%;}	
			@media screen and (max-width:767px){
				&.set img:first-child{	width: 80%;}
				&.set img:last-child{	width: 80%;}		
			}
			
			& figcaption{
				font-size: .85em;
				opacity: .6;
			}
		}
		
		& ul{
			text-align: left;
		}
		
		& a.apply{
			text-decoration: none;
			border-radius: .3em;
			display: block;
			padding: 1em;
			margin: auto;
			color: #fff;
			box-sizing: border-box;
			text-align: center;
			background: #ff001e;
			box-shadow: 0.2em 0.2em 0.2em 0 rgb(0 0 0 / 20%);
			position: relative;
		
			&:hover{
				opacity: .7;
				transition: .2s;
				color: #fff;
			}
			&::before{
				content: "";
				position: absolute;
				left: 1em; top: 50%;
				transform: translate(50%,0);
				rotate: -90deg;
				width: 1.5em; height: 1.5em;
				background: url(/japan/images/common/svg/pageancor.svg) center center no-repeat;
				background-size: 100% auto;
				filter: invert(100%) sepia(29%) saturate(2%) hue-rotate(253deg) brightness(109%) contrast(101%);
			}
			.&:hover::before{
				transform: translate(50%,0) scale(1.1,1.1);
				transition: .2s;
			}
			
		}
	}


/*- 申し込み -*/
	.application{
		background: rgba(0,0,0,0.5);
		border-radius: .2em;
		margin-bottom: .5em;
		padding: 1em 0 0;
		text-align: center;
	}
		.application::after{
			content: "";
			clear: both;
			height: 1px;
			display: block;
			border-bottom: 1px solid rgba(0,0,0,0.5);
		}
		.application.inline{
			margin-top: 1.5em;
		}
		.application.inline a{
			display: inline-block;
			padding: .5em 1em;
		}
		.application a{
			display: block;
			background: #e60013;
			max-width: 90%;
			text-align: center;
			color: #fff;
			text-decoration: none;
			font-weight: bold;
			font-size: 1.2em;
			border-radius: .5em;
			padding: .5em 0;
			margin: auto auto .8em;
			box-shadow: 0 0 .3em 0 #fff inset , 0 0 2px 0 #fff inset , .1em .1em .2em 0 #000;
			position: relative;
			overflow: hidden;
		}
		.application a span{
			display: block;
			font-weight: bold;
			font-size: .8em;
			padding: .3em 0 .5em;
		}
		.application a b{
			display: block;
			font-weight: bold;
			font-size: 1.4em;
		}
		.application a em{
			display: block;
			font-weight: bold;
			font-size: .9em;
			padding: .54em 1.5em .3em;
			line-height: 1em;
		}
			.application a::after{
				content: "";
				display: block;
				position: absolute;
				width: 120%;
				height: 100%;
				top: -40%;
				left: -10%;
				border-radius: 0 0 50% 50%;
				box-shadow: 0 0 5em 0 rgba(255,255,255,.4) inset;
			}
			.application a:hover{
				transition: .2s;
				color: #fff;
				background: #ff4f3d;
			}
			.application a img{
				display: block;
				max-width: 200px;
				width: 60%;
				margin: auto;
				vertical-align: bottom;
			}
	.application a.trialink > img{
		width: 65%;
		max-width: 650px;
	}
	
	
	
	.apply{}
		.apply figure{
			background: rgba(255,255,255,1);
			text-align: center;
			border-radius: .2em;
			margin-bottom: 1em;
			padding: 0 !important;
		}
		.apply figure img{
			width: 200px;
			vertical-align: bottom;
		}

		.apply a{
			
			text-decoration: none;
			border-radius: .3em;
			display: block;
			padding: 1em;
			margin: auto;
			color: #fff;
			box-sizing: border-box;
			text-align: center;
			background: #ff001e;
			box-shadow: 0.2em 0.2em 0.2em 0 rgb(0 0 0 / 20%);
			position: relative;
		}
		.apply .bblock a{
			background: #001eff;
		}
			.apply a:hover{
				opacity: .7;
				transition: .2s;
				color: #fff;
			}
			.apply a::before{
				content: "";
				position: absolute;
				left: 1em; top: 50%;
				transform: translate(50%,0);
				rotate: -90deg;
				width: 1.5em; height: 1.5em;
				background: url(/japan/images/common/svg/pageancor.svg) center center no-repeat;
				background-size: 100% auto;
				filter: invert(100%) sepia(29%) saturate(2%) hue-rotate(253deg) brightness(109%) contrast(101%);
			}
			.apply a:hover::before{
				transform: translate(50%,0) scale(1.1,1.1);
				transition: .2s;
			}
		
		.apply span{
			background: #111;
			display: block;
			padding: .5em 0;
		}
		.apply p{
			padding: .5em 0;
			color: #888;
		}
	
	
	

/*- 注釈箱 -*/
	.aside-box{
		margin-top: 2em;
		padding: 2em 1em 1em;
		border: 1px solid #888;
		position: relative;
	
		& h6{
			line-height: 1.2em;
			padding: .4em 2em .2em;
			display: inline-block;
			position: absolute;
			background: #393939;
			font-weight: normal;
			border: 1px solid #999;
			left: 1em;
			top: -1em;
			margin-bottom: .5em;
		}
		& p{
			border-bottom: 1px dashed #888;
			margin-bottom: .5em;
			
			&:last-child{
				border: none;
				margin-bottom: auto;
				padding-bottom: none;
			}
		}
	}
		
	#products-copyright{
		text-align: center;
		color: #ccc;
		font-size: .9em;
		padding: 1em 0;
		text-shadow: 0 0 15px #000 , 0 0 15px #000 , 0 0 5px #000;
	}


/*- ライブ情報 -*/
	.live-area{
		text-align: center;
	}
	.live-area a{
		margin: auto;
		position: relative;
		padding-bottom: 1em;
	}
		.live-area a img{
			border-radius: .5em;
			box-shadow: 0 0 3px 0 #000;
			vertical-align: bottom;
		}
		.live-area a::before{
			content: "";
			position: absolute;
			display: block;
			background: #f00;
			width: 3em;
			height: 3em;
			left: .8em;
			bottom: 1.8em;
			margin: auto;
			border-radius: 100%;
		}
		.live-area a::after{
			content: "";
			position: absolute;
			display: block;
			width: 0; height: 0;
			border-style: solid;
			border-color: transparent transparent transparent #fff;
			border-width: .6em 1.2em;
			bottom: 2.7em;
			left: 1.8em;
			
		}
		.live-area a:hover img{
			opacity: .8;
			transition: .3s;
		}
	
	
	
/*- トライアル -*/
	.trial{
		border-top: 3px solid #333;
		color: #fff;
		text-align: center;
		padding: 2.5em 1em 1.5em;
		background: rgba(0,0,0,.2);
		box-shadow: 0 0 2em 0 #000 inset;
	}
		.trial h1, .trial p, .trial>ul{
			max-width: 700px;
			margin: auto;
		}
		.trial h1{
			margin-bottom: .5em;
		}
			.trial h1 img{
				width: 100%;
				max-width: 640px;
				vertical-align: bottom;
			}
		.trial p{
			font-size: 1.1em;
			margin-bottom: 1em;
		}
		.trial>.application{
			position: relative;
			box-shadow: 0 0 2em 0 #000;
			margin-bottom: 1.5em;
		}
		.trial>.application::before , .trial .application::after{
			position: absolute;
			display: block;
			content: "";
			height: 2px;
			width: 100%;
			left: 0;
			background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.01) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#03ffffff',GradientType=1 ); /* IE6-9 */
		}
			.trial .application::before{top: 0;}
			.trial .application::after{bottom: 0;}
				
		
		.trial .application ul.grid{
			max-width: 980px;
			margin: auto;
		}
			.trial .application .grid.shop4 li{width: 25%;}
			.trial .application .grid.shop4 li a img{width: 65%;}
			.trial .application .grid.shop5 li{width: 20%;}
			.trial .application .grid.shop5 li a img{width: 65%;}
		@media screen and (max-width:767px){
			.trial .application .grid.shop4 li{width: 50%;}
			.trial .application .grid.shop5 li{width: 50%;}
		}
		.trial>ul{
			font-size: .9em;
			color: #ccc;
			text-align: left;
		}
			.trial>ul li{
				padding-left: 1.2em;
				position: relative;
			}
			.trial>ul li::before{
				position: absolute;
				content: "■";
				left:0;
			}
		.trial em.trial-soon{
			font-weight: bold; 
			display: block;
			color: #999;
			padding: 3em 0 4em;
		}


/*- トライアル2 -*/
	.ycs-item-trial{
		padding: 1em 0;
	}
		.ycs-item-trial em{
			display: block;
			font-weight: bold;
			font-size: 1.2em;
			margin-bottom: 1em;
		}
		.ycs-item-trial img{
			max-width: 100%;
		}
		

	
/*- 開催報告 -*/
	.result-area{
		padding: .2em .25em .15em;
		border-radius: .5em;
		box-shadow: 0 0 3px 1px rgba(0,0,0,0.5), 0 0 2px 0 #fff inset;
		margin: auto auto 1em;
		max-width: 980px;
		position: relative;
	}
	.result-area>.ycs-item{
		padding: 1em 0;
		width: calc(50% - .5em);
		margin: .25em;
		text-align: center;
	}
	.result-area.three>.ycs-item{
		padding: .5em 0;
		width: calc(33% - .5em);
		margin: .25em;
		text-align: center;
	}
	.result-area2{
		letter-spacing: -.40em;
	}
		.result-area2 > div{
			letter-spacing: normal;
			display: inline-block;
			width: 49%;
			margin: auto .5% 1%;
			box-sizing: border-box;
			background: rgba(0,0,0,0.5);
			padding: .5em;
			text-align: center;
		}
		.result-area2 > div img{
			max-width: 100%;
		}
@media screen and (max-width:767px){
	.result-area>.ycs-item{
		width: auto;
		margin: .25em;
		text-align: center;
		display: block;
	}
	.result-area.three>.ycs-item{
		padding: 1em;
		width: auto;
		margin: .25em;
		text-align: center;
	}
}
		a.used-deck2{
			display: block;
			background: #e60013;
			text-align: center;
			color: #fff;
			text-decoration: none;
			border-radius: .5em;
			padding: .4em 0 .2em;
			font-size: .9em;
			max-width: 95%;
			box-shadow: 0 0 1em 0 #fff inset, 0.1em 0.1em 0.2em 0 #000;
			position: relative;
			margin: auto;
		}
		a.used-deck{
			display: block;
			background: #e60013;
			text-align: center;
			color: #fff;
			text-decoration: none;
			font-weight: bold;
			border-radius: .5em;
			padding: .5em 0;
			max-width: 95%;
			box-shadow: 0 0 1em 0 #fff inset, 0.1em 0.1em 0.2em 0 #000;
			position: relative;
			margin: auto;
		}
@media screen and (max-width:767px){
		.result-area a.used-deck{
			max-width: 450px;
		}
}
			a.used-deck:hover{
				background: #ff5442;
				transition: .2s;
			}
			a.used-deck2:hover{
				background: #ff5442;
				transition: .2s;
				color: #fff;
			}
			a.used-deck::before{
				content: "使用デッキ";
				position: absolute;
				font-size: .5em;
				font-weight: normal;
				color: #fff;
				line-height: 1em;
				padding: .2em .5em;
				background: #000;
				border: 1px solid #fff;
				display: inline-block;
				top: -1em;
				left: 1em;
			}
		.result-area img{
			max-width: 95%;
			border-radius: .5em;
			vertical-align: bottom;
			margin-bottom: 1.5em;
		}
		.result-area img.sdw{box-shadow: 0 0 3px 1px rgba(0,0,0,0.5), 0 0 2px 0 #fff inset;}



/*- LPリンク -*/
	.lp-link{
		text-align: center;
		padding: 1.5em 2em 1em;
	}
		.lp-link img{
			max-width: 640px;
			width: 100%;
			vertical-align: bottom;
		}
		.lp-link a:hover{
			opacity: .9;
			transition: .2s;
		}


/*-nav-*/	
	
	.follow-nav{
		position: fixed;
		z-index: 500000000000000000000;
		left: 0;
		top: 0;
		width: 100%;
		opacity: 0;
	}



/*- trial2 -*/
	.trial2{
		textalign: center;
		padding: 3em 1em;
	}
	.trial2 > div{
		max-width: 980px;
		box-shadow: 0 0 8px 0 #000;
		border-radius: 1em;
		padding: .2em;
		background: #ccc;
		margin: auto;
		overflow: hidden;
		background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(68,68,68,1) 50%,rgba(255,255,255,1) 100%);
	}
	.trial2 > div > div{
		border-radius: .8em;
		box-shadow: 0 0 0 50em rgba(0,0,0,.6) inset , 0 0 0 2px #be1319 inset , 0 0 0 3px #fff inset;
		padding: 5em .8em;
		background: #000 url(../common/images/body-bk.jpg) center center repeat-y;
		text-align: center;
		color: #ccc;
	}
	.trial2 > div > div h1{
		margin-bottom: 1em;
	}
	.trial2 > div > div h1 img{
		max-width: 100%;
	}
	.trial2 > div > div em{
		display: block;
		font-weight:bold;
		padding: 1.5em 0 0;
		font-size: 1.3em;
		color: #fff;
	}
@media screen and (max-width: 767px){
	.trial2 > div > div{
		background-size: 70% auto;
	}
}



/*- NOTES -*/
	.notes{
		position: relative;
		background: #000;
		color: #ccc;
		text-align: center;
		padding: 3em 1em 2em;
		margin-bottom: 2em;
	}
		.notes::before , .notes::after{
			position: absolute;
			display: block;
			content: "";
			height: 2px;
			width: 100%;
			left: 0;
			background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.01) 100%);
		}
		.notes::before{top: 0;}
		.notes::after{bottom: 0;}
		
	.notes > *{
		max-width: 980px;
		margin: auto auto 2em;
	}
	.notes h1 img{
		max-width: 100%;
	}
	.notes > ul{
		max-width: 560px;
		letter-spacing: -.40em;
	}
	.notes > ul > li{
		letter-spacing: normal;
		display: inline-block;
		width: 32%;
		font-size: .9em;
	}
	.notes > ul > li:nth-child(2){
		border-left: 1px solid #555;
		border-right: 1px solid #555;
	}
	
	.notes > div{
		text-align: left;
	}
		.notes > div > *{
			margin-bottom: 1em;
		}
		.notes > div h2{
			color: #eee;
			font-weight: bold;
			font-size: 1.2em;
			padding-top: 2.5em;
			position: relative;
			padding-left: 2.5em;
		}
		.notes > div h2::before{
			content: "";
			position: absolute;
			left: 0; bottom: -.1em;
			height: 1.7em;
			width: 1.7em;
			background: url(../common/images/icon-attention.png);
			background-size: 100%  auto;
		}
		
		.notes > div > p{
		
		}
		.notes a{
			display: inline-block;
			color: #fee300;
			padding: 0 .3em;
		}
			.notes a:hover{
				color: #fff;
				transition: .2s;
			}
		.notes > div small{
			display: block;
			position: relative;
			padding-left: 1.2em;
			opacity: .8;
		}
			.notes > div small::before{
				content: "※";
				position: absolute;
				left: 0; top: 0;
			}
		.notes > div em{
			display: block;
			font-weight: bold;
			color: #eee;
			border: 1px solid #888;
			text-align: center;
			padding: .5em;
		}
		.notes > div ol{
			counter-reset: admiss;
		}
		.notes > div ol > li{
			position: relative;
			padding: .5em 0 .4em 2.3em;
			border-top: 1px dashed #888;
		}
		.notes > div ol > li::before{
			counter-increment: admiss;
			content: counter(admiss);
			position: absolute;
			left: 0; top: .5em;
			border: 1px solid #ff9;
			width: 1.2em; height: 1.2em;
			line-height: 1.4em;
			text-align: center;
			font-weight: bold;
			color: #ff9;
			overflow: hidden;
		}
		.notes > div ol li div{
			border: 1px solid #333;
			margin: .5em auto;
			padding: 1em;
			font-size: .85em;
		}
		.notes > div ol li div h3{
			padding-bottom: .5em;
			margin-bottom: .5em;
			border-bottom: 1px solid #333;
		}
		.notes > div ol li b{
			color: #ff9;
			display: inline-block;
		}
		.notes > div ol li dl{
			display: flex;
			padding: .4em 0 .3em;
		}
		.notes > div ol li dl dt{
			width: 2em;
			font-weight: bold;
			color: #eee;
			font-size: 1.2em;
		}
		
		.notes > div ul > li{
			position: relative;
			padding: .2em 0 .1em 1.4em;
		}
		.notes > div ul > li::before{
			content: "■";
			position: absolute;
			left: 0;
			top: .2em;
			opacity: .5;
		}
		
		
		
/* past */

	.ycsj-past{
		padding: 0 1em 2em;
		text-align: center;
	}
	.ycsj-past div{
		background: rgba(0,0,0,.5);
		border: 1px solid #222;
		max-width: 980px;
		box-shadow: 0 0 .2em 0 #000;
		margin: auto;
		padding: 1em 1.5em;
		box-sizing: border-box;
	}
		.ycsj-past h1{
			text-align: center;
			color: #888;
			font-size: .9em;
			margin-bottom: 1em;
		}
		.ycsj-past ul{
			color: #aaa;
			font-size: .9em;
			text-align: left;
		}
		.ycsj-past ul li{
			padding-bottom: .2em;
		}
		.ycsj-past ul a{
			color: #fee300;
		}
		.ycsj-past ul a:hover{
			color: #fff;
			transition: .2s;
		}
		
		
/* 最新こちら */
		.newest{
			padding: 1.5em 1em;
			color: #fff;
			background: repeating-linear-gradient(-45deg, #9f0101, #980707 2px, #980707 5px, #9f0101 7px);
			background: repeating-linear-gradient(-45deg, #000, #000 2px, #1a1a1a 5px, #1a1a1a 7px);
			position: relative;
			z-index: 20;
			text-align: center;
		}
			.newest a{
				margin: auto;
				max-width: 300px;
				display: inline-block;
				padding: .2em 1em;
				background: #f8d200;
				border-radius: .3em;
				box-shadow: 0 0 .5em 0 rgb(255 ,255 ,200 , .75) inset;
			}
			.newest a img{
				width: 90%;
				vertical-align: bottom;
			}
				.newest a:hover{
					background: #f22;
					transition: .2s;
					box-shadow: 0 0 0 1px #fff;
				}
@media screen and (max-width:767px){
			.newest a{
				display: block;
				max-width: 90%;
			}
			.newest a img{
				max-width: 60%;
			}
}

figure.guest{
	letter-spacing: -.40em;
	display: inline-block;
	letter-spacing: normal;
	width: 32.5%;
	margin: auto auto 2em auto;
	text-align: center;
}
	figure.guest img{
		border-radius: .2em;
		width: 90%;
		border: 1px solid #666;
		border-radius: 5px;
		box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
	}
	figure.guest figcaption{
		font-size: .9em;
	}
	figure.guest figcaption span{
		display: block;
		font-size: .9em;
		opacity: .5;
	}




				
/*-----------分布図-----------*/
 
			.distributionmap{
				display: flex;
				justify-content: space-around;
				justify-content: space-between;
				align-items: center;
				
				--p0: #999999;
				--p1: #c33d2d;
				--p2: #4785f9;
				--p3: #9e3cbd;
				--p4: #69a942;
				--p5: #e9e9e9;
				--p6: #ffb56d;
				--p7: #3e7583;
				--p8: #f99999;
			}
				figure.pie-chart {
					width: 40%;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					opacity: .9;
					box-sizing: border-box;
					padding: 5.5%;
					
				}
					figure.pie-chart figcaption{
						width: auto;
						aspect-ratio: 1 / 1;	
						background: #222;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
						
					}
					figure.pie-chart figcaption p{
						
						font-weight: bold;
						font-size: 1.2em;
					}
	 
				table.deckname{
					width: 55%;
					border-collapse: collapse;
					font-size: .8em;
				}
	 
				table.deckname tr{
					position: relative;
					
					text-align: left;
				}
					table.deckname tr:first-child{
						
					}
					table.deckname tr::before{
						content: "";
						position: absolute;
						display: block;
						aspect-ratio: 1 / 1;
						height: 1em;
						top: 50%;
						left: 10px;
						transform: translate(-50%, -50%);
						-webkit-transform: translate(-50%, -50%);
						-ms-transform: translate(-50%, -50%);
						
					}
					table.deckname tr:nth-child(1)::before{ background-color: var(--p1);}
					table.deckname tr:nth-child(2)::before{ background-color: var(--p2);}
					table.deckname tr:nth-child(3)::before{ background-color: var(--p3);}
					table.deckname tr:nth-child(4)::before{ background-color: var(--p4);}
					table.deckname tr:nth-child(5)::before{ background-color: var(--p5);}
					table.deckname tr:nth-child(6)::before{ background-color: var(--p6);}
					table.deckname tr:nth-child(7)::before{ background-color: var(--p7);}
					table.deckname tr:nth-child(8)::before{ background-color: var(--p8);}
					table.deckname tr.wrap::before{ background-color: var(--p0);}
					table.deckname tr.wrap{border-bottom: none;}
					table.deckname tr.wrap:last-child{}
					
				table.deckname tr td:first-child{
					text-align: left !important;
					padding-left: 2.3em;
				}
				table.deckname tr td:last-child{
					text-align: center;
				}


@media screen and (max-width : 768px){	
 
		.distributionmap{
			display: block;
		}
			figure.pie-chart {
				margin: 0 auto 28px;
				width: 50%;
				padding: 8%;
			}
	 
			table.deckname{
				margin: 0 auto;
				width: 100%;
			}
 
}