header[role="banner"] * , main[role="main"] *{
			font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO" !important;
			font-weight: bold;
		}
		
@media screen and (max-width:767px){
		header[role="banner"] * , main[role="main"] *{
			font-size: .95em;
		}
}
		
		:root{
			--key: #009944;
			--key2: #008e3c;
			--link:	#ff8a00;
			--hover: #ff4900;
		}
		.konami-header{
			background: var(--key);
		}
		img{
			max-width: 100%;
		}
		a{
			color: var(--link);
		}
		a:hover{	
			color: var(--hover);
			transition: .2s;
		}
		
		header[role="banner"]{
			position: relative;
			background: url(images/main-bk.jpg) center center no-repeat;
			background-size: 150% auto;
			text-align: center;
		}
			header[role="banner"] h1{
				background: url(images/main.png) center center no-repeat;
				overflow: hidden;
				height: 0;
			}
@media screen and (min-width:880px){
			header[role="banner"] h1{
				padding-top: 690px;
				background-size: auto 100%;
			}	
}
@media screen and (min-width:768px) and (max-width:879px){
			header[role="banner"] h1{
				padding-top: 78%;
				background-size: auto 100%;
			}
}
		
@media screen and (max-width:767px){
		header[role="banner"]{
			background: #c9d84e;
		}
			header[role="banner"] h1{
				background-image: url(images/main.jpg);
				width: 100%;
				background-size: 100% auto;
				padding-top: 126.6%;
			}
}
		
		
		

.polkadots{
	position: relative;
	
	& > *{
		position: relative;
		z-index: 5;
	}
	&::before,
	&::after{
		content: "";
		width: 50%; height: 100%;
		position: absolute;
		top: 0;
		background: url(images/polkadots-gradient.png) left 0 repeat-y;
		background-size: 250px auto;
		opacity: .1;
		z-index: 1;
		@media (width <= 767px){
			background-size: 150px auto;	
		}
	}
	&::before{
		left: 0;
	}
	&::after{
		right: 0;
		transform: rotate(180deg);
	}
	
}
			
	
	section.date{
		padding: 1.5em 1em;
		text-align: center;
		position: relative;
		background: var(--key);
		
		& span{
			background: rgba(0,0,0,.2);
			display: inline-block;
			border-radius: 50em;
			color: #fff;
			line-height: 1em;
			padding: .5em 1.5em;
			margin-bottom: 1.5em;
		}
		
		& div{
			border: 2px solid #fe0;
			box-shadow: 0 0 .5em 0 #000;
			background: linear-gradient(to bottom, #009742 0%,#007534 100%);
			width: fit-content;
			padding: 1em 6em;
			@media (width <= 767px){
				& {
					width: auto;
					padding: 1em 5em;
				}
			}

			& time{
				display: inline-block;
				line-height: 1em;
				background: #fff;
				font-size: 2.2em;
				padding: .4em 1em .2em;
				position: relative;
				@media (width <= 767px){
					& {
						padding: .4em .5em .2em;
						font-size: 1.4em;
					}
				}
			}
			& time b{
				font-size: 1.2em;
			}
			& time::before,
			& time::after{
				content: "";
				position: absolute;
				top: 50%;
				transform: translate(0,-50%);
				font-size: .8em;
				color: #fff;
				line-height: 1em;
				padding: 0 .5em;
			}
			& time::before{
				content: "次回";
				left: -3em;
			}
			& time::after{
				content: "開催";
				right: -3em;
			}
			
		}
		
	}	
			
	
	section.link{
		padding: 1.5em 1em;
		text-align: center;
		position: relative;
		background: var(--key2);
		text-align: center;
		
		& p{
			color: #fff;
			font-size: .9em;
			margin-bottom: 1em;
			& > span{
				display: inline-block;
			}
			& a{
				color: #ffd80a;
				@media (width <= 767px){
					display: block;
				}
			}
		}
		

			
		& div.kcgn{
			padding: 2em;
			margin: 1.5em auto 2em;
			display: flex;
			flex-wrap: wrap;
			/*border: 2px solid #fff;*/
			border-radius: .5em;
			max-width: 750px;
			background: rgba(0,0,0,.2);
			box-shadow: 0 0 .2em 0 rgba(0,0,0,.5);
			@media (width <= 767px){
				padding: 2em 1em;
				display: block;
			}
		}
		
		& a.btn{
			display: block;
			width: 48%;
			text-align: center;
			color: #fff;
			text-decoration: none;
			background: #c31921;
			border-radius: .8em;
			box-sizing: border-box;
			padding: 1em 3em;
			font-size: 1.1em;
			box-shadow: .1em .1em .3em 0 rgba(0,0,0,.5);
			border-width: 3px;
			border-style: solid;
			border-color: #dd7c81 #9e141b #801016 #9e141b;
			position: relative;
			@media (width <= 767px){
				width: 100%;
				margin: .5em auto;
			}
			
			&::before{
				content: "";
				position: absolute;
				left: .5em; top: 50%;
				transform: translate(0,-50%);
				width: 1.8em;
				height: 1.8em;
				background: url(images/introduction-kcgn-icon.png) center center;
				background-size: 140% auto;
			}
			
			&:hover{
				background: #c33219;
			}
			
		}

		
	}		
/*
@media screen and (max-width:767px){
			section.date div{
				width: auto;
			}
				section.date div time{
					display: inline-block;
					line-height: 1em;
					background: #fff;
					font-size: 1.8em;
					padding: .4em 1em .2em;
					position: relative;
				}
				section.date div time b{
					font-size: 1.2em;
				}
				section.date div time::before,
				section.date div time::after{
					
				}
			section.date > section:last-child{
				padding: .5em 0 0;
			}
			section.date a{
				width: auto;
				border-radius: 0;
				border: none;
				box-shadow: none;
				padding: 1.5em 0;
				box-shadow: 0 0 0 2px rgba(0,0,0,.5) inset;
			}
}
	*/
		
		
		section.introduction{
			background: 
				linear-gradient(to bottom, #eee 0, #eee 3px, #d5d5d5 4px, #f3f3f3 6em),
				#f3f3f3
			;
			color: #555;
			padding: 1em ;
		}
			.introduction > section{
				max-width: 880px;
				padding-bottom: 4em;
			}
			.introduction > section:not(.lead) > *{
				margin-bottom: 1.5em;
				line-height: 1.5em;
			}
			.introduction > section.lead{
				text-align: center;
				padding-top: 2.5em;
			}
				.introduction > section.lead > p{
					font-size: 1.6em;
				}
				.introduction > section.lead > p span{
					display: inline-block;
				}
				
			.introduction > section h2{
				background: var(--key);
				color: #fff;
				text-align: center;
				padding: .5em;
				font-size: 1.1em;
				position: relative;
			}
				.introduction > section h2::before,
				.introduction > section h2::after{
					content: "";
					width: 50%; height: 100%;
					position: absolute;
					top: 0;
					background: url(images/polkadots-gradient.png) left 0 repeat-y;
					background-size: auto 60px;
					opacity: .1;
				}
				.introduction > section h2::before{
					left: 0;
				}
				.introduction > section h2::after{
					right: 0;
					transform: rotate(180deg);
				}
			
			.introduction > section small{
				position: relative;
				padding-left: 1.2em;
				display: block;
				opacity: .8;
				font-size: .9em;
			}
				.introduction > section small::before{
					content: "※";
					position: absolute;
					left: 0;
					top: 0;
				}
			.introduction > section ol{
				counter-reset: number 0;
				
			}
			.introduction > section ol li{
				position: relative;
				padding: .5em 0 1em 3.5em;
				font-size: 1.1em;
			}
				.introduction > section ol li span.line{
					background: linear-gradient(to top, #fe0 0, #fe0 5px, rgba(0,0,0,0) 5px);
				}
				
				.introduction > section ol li::before{
					counter-increment: number 1;
					content: counter(number) " ";
					position: absolute;
					width: 2.5em; height: 2.5em;
					left: 0;
					background: var(--key);
					top: .5em; left: 0;
					color: #fffc00;
					text-align: center;
					line-height: 2.5em;
					overflow: hidden;
					border-radius: .3em;
				}
			.introduction > section p:not(:last-child){
				margin-bottom: .5em;
			}
				.introduction > section p a{
				
				}
				.introduction > section a.external{
					position: relative;
					padding-right: 1.2em;
					display: inline-block;
				}
					.introduction > section a.external::after{
						content: "";
						position: absolute;
						right: 0; top: .1em;
						width: 1em;
						height: 1em;
						background: url(/yugioh/assets/svg/external.svg);
						background-size: 100% auto;
						filter: invert(58%) sepia(62%) saturate(2692%) hue-rotate(359deg) brightness(101%) contrast(106%);
					}
					
			.introduction > section div.attention{
				border: 3px solid var(--key);
				position: relative;
				padding: 1em 1em 1em 6em;
				background: #fff;
				color: var(--key2);
				border-radius: .5em;
			}
			.introduction > section div.attention::before{
				content: "";
				position: absolute;
				left: 1.5em;
				top: 50%;
				transform: translate(0,-50%);
				width: 2.8em;
				height: 2.8em;
				background: url(/yugioh/assets/svg/attention.svg);
				background-size: 100% auto;
				filter: invert(29%) sepia(76%) saturate(3396%) hue-rotate(139deg) brightness(98%) contrast(102%);
			}
			
			
			
			
			.introduction > section div.event{
				position: relative;
				padding-left: 25%;
				padding-top: 1em;
				position: relative;
			}
			.introduction > section div.event::before{
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				width: 25%;
				aspect-ratio: 1;
				transform: translate(0,-50%);
				filter: invert(32%) sepia(52%) saturate(4153%) hue-rotate(137deg) brightness(95%) contrast(103%);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 65% auto;
			}
			.introduction > section div.event.free::before{
				background-image: url(/yugioh/assets/svg/casual.svg);
			}
			.introduction > section div.event.teaching::before{
				background-image: url(/yugioh/assets/svg/beginner.svg);
			}
				.introduction > section div.event h3{
					font-size: 1.8em;
					color: #111;
					padding: 0 0 .5em 0;
				}
@media screen and (max-width:767px){
			.introduction > section div.event{
				padding-left: 25%;
				padding-top: 0;
			}
			.introduction > section div.event::before{
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				width: 25%;
				aspect-ratio: 1;
				transform: translate(0,-50%);
				filter: invert(32%) sepia(52%) saturate(4153%) hue-rotate(137deg) brightness(95%) contrast(103%);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 65% auto;
			}
}
			
			
			.introduction > section div.division{
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: .5em;
				align-items: stretch;
			}
				div.division > div{
					margin-top: 0;
					box-shadow: 0 0 0 2px var(--key) inset;
					box-sizing: border-box;
					padding: .5em .8em;
					text-align: center;
					background: #fff;
					border-radius: .5em;
				}
				
					div.division > div figure{
						text-align: center;
						& img + img{
							margin-top: 1em;
						}
					}
					div.division > div figure figcaption{
						padding-top: .8em;
						line-height: 1.5em;
						border-top: 1px solid #ccc;
						opacity: .8;
						font-size: .9em;
						& em{
							display: block;
							background: #ccc;
							margin: .5em 0;
							padding: .2em 0;
						}
						& a.decks{
						    display: block;
							text-decoration: none;
							border: 1px solid var(--link);
							color: var(--link);
							font-size: .85em;
							line-height: 1em;
							padding: .4em 0 .2em;
							position: relative;
							background: #fff;
							margin: auto auto .5em;
							&::before{
								content: "▲";
								position: absolute;
								left: 0; top: 50%;
								transform: rotate(90deg) translate(-50%,-30%);
							}
							&:hover{
								color: var(--hover);
								border-color: var(--hover);
								transition: .2s;
							}
						}
					}
					div.division > div figure.logo img{
						max-width: 50%;
						margin: auto;
					}
					div.division > div h4{
						background: var(--key);
						color: #fcfffc;
						text-align: center;
						font-size: .9em;
						padding: .3em;
						margin-bottom: 1em;
						border-radius: .2em;
					}
					
					div.division > div div{
						aspect-ratio: 1/.9;
						letter-spacing: -.40em;
						/*
						display: flex;
						flex-wrap: wrap;
						*/
					}
					div.division > div div a{
						display: inline-block;
						text-align: center;
						letter-spacing: normal;
						margin: .5em auto;
					}
					div.division > div div.ocg a{
						width: 32%;
					}
					div.division > div div.rush a{
						width: 32%;
						text-align: center;
						margin: .5em 3%;
					}
					div.division > div div.rush a img{
						border-width: 3px;
						border-style: solid;
						border-radius: .5em;
						width: calc(100% - 6px);
					}
						div.division > div div.rush a:nth-child(1) img{
							border-color: #cd000d;
						}
						div.division > div div.rush a:nth-child(2) img{
							border-color: #004da1;
						}
						div.division > div div.rush a:nth-child(3) img{
							border-color: #018bcb;
						}
						div.division > div div.rush a:nth-child(4) img{
							border-color: #ff3a00;
						}
					div.division > div a span{
						display: inline-block;
						border: 1px solid var(--link);
						color: var(--link);
						font-size: .75em;
						line-height: 1em;
						padding: .4em 0 .2em;
						position: relative;
						background: #fff;
						width: 90%;
						margin: auto;
					}
					div.division > div a span::before{
						content: "▲";
						position: absolute;
						left: 0; top: 50%;
						transform: rotate(90deg) translate(-50%,-30%);
					}
					div.division > div a:hover span{
						color: var(--hover);
						border-color: var(--hover);
						transition: .2s;
					}
@media screen and (max-width:767px){
			.introduction > section div.division{
				display: block;
				align-content: stretch;
				justify-content: space-between;
			}
				div.division > div{
					margin-top: 0;
					margin-bottom: 1em;
					width: auto;
				}
				div.division > div:first-child{
					margin-left: auto;
				}
				div.division > div:last-child{
					margin-right: auto;
				}
					div.division > div div{
						aspect-ratio: unset;
						padding: .5em 0;
					}
					div.division > div div.ocg a{
						margin-bottom: 2em;
					}
					div.division > div div.ocg a img{
						margin-bottom: .5em;
					}
					div.division > div a span{
						display: inline-block;
						border: 1px solid var(--link);
						color: var(--link);
						font-size: .75em;
						line-height: 1em;
						padding: 1em 0 1.1em;
						position: relative;
						background: #fff;
						width: 90%;
						margin: auto;
					}
				
}
		
		/* 注意事項 */
		section.notes{
			background: var(--key);
			padding: 3em 1em 4em;
		}
			section.notes > *{
				max-width: 880px;
				box-sizing: border-box;
			}
			section.notes > h2{
				color: #fff;
				text-align: center;
				padding: .5em;
				font-size: 1.2em;
			}
			section.notes > ul{
				background: #fff;
				color: #666;
				padding: 1.2em 1.5em;
				border-radius: .7em;
				border: 3px solid var(--key2);
			}
				section.notes > ul li{
					position: relative;
					padding: .4em 0 .4em 1.5em;
					border-top: 1px dashed #ddd;
				}
				section.notes > ul li:first-child{
					border-top: none;
				}
				section.notes > ul li span{
					display: block;
					opacity: .8;
				}
				section.notes > ul li::before{
					content: "■";
					position: absolute;
					left: 0; top: .7em;
					color: var(--key);
					font-size: .8em;
				}
		
		aside.satellite{
			padding: 2em 1em;
			font-size: .95em;
			font-weight: normal !important;
			text-align: center;
			color: #fff;
			background: repeating-linear-gradient(-45deg, #990014, #990014 3px, #8d0007 0, #8d0007 4px);
		}
			aside.satellite a{
				display: inline-block;
				background: #fff;
				width: 400px;
				max-width: 90%;
				overflow: hidden;
				box-shadow: 0 0 0 1px #b4b4b4, 0 0 0 4px #eee;
				border-radius: .1em;
			}
			aside.satellite a img{
				margin: -9% auto -11%;
			}
			aside.satellite a:hover img{
				opacity: .8;
			}
			aside.satellite p{
				padding: .5em 0 0;
				font-size: .95em;
			}