main {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #acd5d0;
	--svg-color: #7fb1ac;
	}
	main::before {
		content: '';
		position: absolute;
		inset: 0;
		transform: rotate(-21deg) scale(6);
		z-index: -1;
		pointer-events: none;
		mask-image: url("../images/mainFootBgSvg.svg");
		-webkit-mask-image: url("../images/mainFootBgSvg.svg");
		background-color: var(--svg-color);
		mask-size: 10rem auto;
		mask-position: center;
		}
	@media (min-width: 768px) {
		main::before {
			transform: rotate(-21deg) scale(3);
			mask-size: 30rem auto;
			}
		}

#hero {
	display: grid;
	grid-gap: 3rem;
	align-items: end;
	}
#heroTitle {
	order: -1;
	}
	#heroTitle img{
		width: 100%;
		border-radius: 0.8rem;
		}
	@media( min-width: 1100px) {
		#hero {
		grid-template-columns: 3fr 2fr;
		}
	}

#subject{
	background: none;
	padding-bottom: 0;
	}
	#subject h2{
		line-height: 1.25;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		}
	#subject #gameTitle{
		font-size: 1.2em;
		@media(min-width: 768px){
			margin-left: 0.8rem;	
			}
		}
	#subject>div {
		position: relative;
		/*background: #a7d1cc!important;*/
		background: linear-gradient(to bottom, #efc502 60%, #e17902 80%);
		border-radius: 10px;
		padding: 2em 1em;
		text-align: center;
		font-weight: bold;
		font-size: 1.5rem;
		border: 4px solid #000;
		display: inline-block;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		width: 100%;
		}
		#subject>div::before {
			content: '';
			position: absolute;
			inset:0;
			top: 35%;
			height: 55%;
			width: 100%;
			background-image: 
			  radial-gradient(#e17902 2px, transparent 1px),
			  radial-gradient(#e17902 2px, transparent 1px);
			background-size: 8px 8px;
			background-position: 0 0, 4px 4px;
			background-repeat: repeat;
			opacity: 1;
			mask-image: linear-gradient(to bottom, transparent, black);
			-webkit-mask-image: linear-gradient(to bottom, transparent, black);
			}
	#subject>div>span {
		position: absolute;
		width: 1em;
		height: 1em;
		background: #ccc;
		border-radius: 50%;
		border: 2px solid #999;
		box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
		display: inline-block;
		aspect-ratio: 1;
		background: conic-gradient(#efc502, #e17902);
		clip-path: polygon(
			50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
			);
		}
		#subject>div>span::before {
			content: '';
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			background: #000;
			clip-path: polygon(
				50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
				);
			}
		#subject>div>span:nth-of-type(1) {
			top: 9px;
			left: 9px;
			transform: rotate(5deg);
			}
		#subject>div>span:nth-of-type(2) {
			top: 9px;
			right: 9px;
			transform: rotate(-8deg);
			}
		#subject>div>span:nth-of-type(3) {
			bottom: 9px;
			left: 9px;
			transform: rotate(12deg);
			}
		#subject>div>span:nth-of-type(4) {
			bottom: 9px;
			right: 9px;
			transform: rotate(-6deg);
			}

#game {}
	#game section {
		position: relative;
		}
	#game h3 {
		--outline-inner-color: #000;
		--outline-outer-color: #fff;
		--outline-inner-width: 2px;
		--outline-outer-width: 3px;
		font-size: 2.4rem;
		margin-bottom: 3.6rem;
		/*padding: 0rem 1rem 0rem 6.5rem;*/
		padding: 0rem 1rem;
		height: 5rem;
		position: relative;
		z-index: 10;
		letter-spacing: 2px;
		display: flex;
		align-items: flex-end;
		font-weight: bold;
		color: #face02;
		text-shadow:
		/* 内側 */
		var(--outline-inner-width) 0 var(--outline-inner-color),
		calc(-1 * var(--outline-inner-width)) 0 var(--outline-inner-color),
		0 var(--outline-inner-width) var(--outline-inner-color),
		0 calc(-1 * var(--outline-inner-width)) var(--outline-inner-color),
		var(--outline-inner-width) var(--outline-inner-width) var(--outline-inner-color),
		calc(-1 * var(--outline-inner-width)) calc(-1 * var(--outline-inner-width)) var(--outline-inner-color),
		var(--outline-inner-width) calc(-1 * var(--outline-inner-width)) var(--outline-inner-color),
		calc(-1 * var(--outline-inner-width)) var(--outline-inner-width) var(--outline-inner-color),

		/* 外側 */
		var(--outline-outer-width) 0 var(--outline-outer-color),
		calc(-1 * var(--outline-outer-width)) 0 var(--outline-outer-color),
		0 var(--outline-outer-width) var(--outline-outer-color),
		0 calc(-1 * var(--outline-outer-width)) var(--outline-outer-color),
		var(--outline-outer-width) var(--outline-outer-width) var(--outline-outer-color),
		calc(-1 * var(--outline-outer-width)) calc(-1 * var(--outline-outer-width)) var(--outline-outer-color),
		var(--outline-outer-width) calc(-1 * var(--outline-outer-width)) var(--outline-outer-color),
		calc(-1 * var(--outline-outer-width)) var(--outline-outer-width) var(--outline-outer-color);
		}
		#game h3:after {
			position: absolute;
			bottom: -2.4rem;
			left: 0;
			width: 100%;
			height: 10px;
			content: '';
			background-image: -webkit-repeating-linear-gradient(
				-45deg,
				#000,
				#000 4px,
				transparent 6px,
				transparent 9px
				);
			background-image: repeating-linear-gradient(
				-45deg,
				#000,
				#000 4px,
				transparent 6px,
				transparent 9px
				);
			  background-size: 12px 12px;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			}
		#game h3 span{
			margin-right: 3rem;
			margin-left: -4.8rem;
			transform: translateY(-1.5rem);
			color: yellow;
			}
	#game h4 {
		font-size: 2rem;
		}
#game h4:before {
	background: #dc3e61;
	}
	#game ul {
		margin-left: 1.6rem;
		}
	#game p {
		font-size: 1.8rem;
		line-height: 1.65;
		}
	#game .youtube {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		}
		#game .youtube iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 0.8rem;
			border: 4px solid #000;
			}

#products dl {
	margin-bottom: 1.6rem;
	color: initial;
	}
#productsInfo {
	display: grid;
	grid-template-columns: 500px 1fr;
	align-items: flex-start;
	column-gap: 4.8rem;
	/*margin: 0 2.4rem;*/
	}

#tableList {}
	#tableList img {
		width: 100%;
		}
	#tableList dd {
		background: #fff;
		}

#contact div {
	margin-bottom: 1.6rem;
	}

#background{}
	#background p span {
		display: block;
		font-weight: bold;
		margin-bottom: 1rem;
		}
	@media (max-width: 1099.98px) {
		#productsInfo {
			display: block;
			margin: 0;
			}
		#products dl {
			margin: 1.6rem 0;
			}
		}


.cardSample {
	position: absolute;
	top: -5rem;
	right: 1rem;
	transform: rotate(15deg);
	z-index: -1;
	@media(max-width: 767.98px){
		display: none;
		}
	}
	.cardSample img{
		border-radius: 0.5rem;
		}

.linkBtn {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	display: grid;
	grid-template-columns: 1fr 1.4rem;
	align-items: center;
	width: min(100%, 30rem);
	background: #fff;
	border: 1px solid #1ea799;
	border-radius: 9999px;
	color: inherit;
	font-size: 1.2rem;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.12rem;
	margin: 1.4rem auto;
	padding: 1.4rem;
	font-weight: bold;
	line-height: 1.4rem;
	outline: none;
	color: initial;
	}
	.linkBtn:after{
		content: "";
		aspect-ratio: 1;
		background: #1ea799;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><polyline points="15 10 15 15 1 15 1 10"/><polyline points="12 5 8 9.24 4 5"/><line x1="8" y1="1" x2="8" y2="9"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		transition: all 0.2s ease-out;
		}

.bgContents {
	position: relative;
	padding: 1.5rem;
	background: #f2f2f2;
	border-radius: 0.8rem;
	border: 4px solid #000;
	}
	.bgContents p {
		position: relative;
		z-index: 2;
		margin-bottom: 1.6rem;
		}
@media (min-width: 768px) {
	.bgContents p{
		padding: 1rem;
		margin: 0;
		}
	}


/*lib*/
#gallery {
	width: 100%;
	}
	#gallery figure{
		position:relative;
		aspect-ratio: 4 / 3;
		background:#eee;
		border-radius:8px;
		}
	#gallery img{
		width:100%;
		max-width: 100%;
		height:100%;
		object-fit:contain;
		border: 1px solid #ccc;
		border-radius:8px;
		user-select:none;
		}
#gallery .slick-prev,
#gallery .slick-next{
	position:absolute;
	top:45%;
	transform:translateY(-50%);
	width: 4.8rem;
	height: 4.8rem;
	background:#fff;
	color:#666;
    border: 1px solid #666;
	border-radius:50%;
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .25s ease;
	font-size: 0;
	}
	#gallery .slick-prev{
		left: 0.5rem;
		}
	#gallery .slick-next{
		right: 0.5rem;
		}

#gallery .slick-prev:before,
#gallery .slick-next:before{
	content: "";
	width: 2rem;
	height: 2rem;
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 16 16"><path d="M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z" /></svg>');
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	background: #000;
	}
	#gallery .slick-prev:before{
		transform: scale(-1);
		}

#gallery .slick-dots {
	text-align: center;
	padding-top: 1em;
	}
	#gallery .slick-dots li {
		display: inline-block;
		margin: 0 0.8rem;
		}
	#gallery .slick-dots li button {
		font-size: 0;
		line-height: 0;
		padding: 0;
		border: none;
		background: none;
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		transition: all 0.3s ease;
		}
	#gallery .slick-dots li.slick-active button {
		background-color: #000;
		transform: scale(1.2);
		}

@media (max-width: 767.98px) {
	#gallery {
		max-width: 100%;
		}
	#gallery .slick-prev,
	#gallery .slick-next{
		width: 3.2rem;
		height: 3.2rem;
		}
	#gallery .slick-prev:before,
	#gallery .slick-next:before{
		width: 1.6rem;
		height: 1.6rem;
		}
	}

#colorbox, 
#cboxOverlay, 
#cboxWrapper,
#cboxContent{
	overflow: visible;
	}
#cboxPrevious,
#cboxNext,
#cboxClose{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:4.8rem;
	height:4.8rem;
	background:#fff;
	border:1px solid #666;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:0;
	}
#cboxPrevious{ 
	left:-2rem;
	}
#cboxNext{
	right:-2rem;
	left: auto;
	}
	#cboxPrevious::before,
	#cboxNext::before{
		content:""; 
		width:2rem;
		height:2rem;
		mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"4 4 16 16\"><path d=\"M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z\"/></svg>');
		mask-repeat:no-repeat;
		mask-size:contain;
		mask-position:center;
		background:#000;
		}
	#cboxPrevious::before{
		transform:scale(-1);
		}

#cboxClose {
	top: 0;
	right: 0;
	transform: translateY(-180%);
	}
	#cboxClose:before {
		content: '×';
		font-size: 1.6rem;
		}

#cboxCurrent{
	left: 0;
	}

@media (max-width: 767.98px) {
	#cboxPrevious,
	#cboxNext,
	#cboxClose{
		width: 3.6rem;
		height: 3.6rem;
		}
	#cboxPrevious::before,
	#cboxNext::before{
		width: 1.6rem;
		height: 1.6rem;
		}
	}