/* CSS Document */

#main{
	overflow: hidden;
	}
	#main article{
		display: grid;
		grid-gap: 2em 0;
		width: var(--wrap);
		margin: clamp(32px, 7.2vw, 48px) auto calc(clamp(32px, 7.2vw, 48px) * 2) auto;
		}
	#main h2+*{
		margin-top: 0;
		}
	#main section{
		display: grid;
		grid-gap: 1em 0;
		margin: 0;
		}
		#main section h3+*{
			margin-top: 0;
			}

#sample{
	width: var(--wrap);
	margin: clamp(32px, 7.2vw, 48px) auto calc(clamp(32px, 7.2vw, 48px) * 2) auto;
	}
	#sample h2+div{
		margin-top: clamp(32px, 7.2vw, 48px);
		}
	#sample dl{
		display: grid;
		grid-gap: 1em;
		}
	#sample dd{
		display: contents;
		}
		#sample dd a{
			display: grid;
			place-items: center;
			padding: 1em;
			background: var(--color);
			border: 2px solid var(--color);
			border-radius: 4px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			}
	#sample dl+dl{
		margin-top: 2em;
		}

#wow{
	overflow: hidden;
	}
	#wow h2+div{
		display: grid;
		grid-gap: 1em;
		}
	#wow figure{
		position: relative;
		padding-top: 66.66%;
		}
		#wow figure img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

#css{}
	#css h2+div{
		display: grid;
		grid-gap: 1em;
		}
	#css figure{
		position: relative;
		padding-top: 66.66%;
		}
		#css figure img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

#youtube{}
	#youtube div{
		justify-self: start;
		}
	#youtube a[href*="youtube.com"]{
		position: relative;
		display: block;
		}
		#youtube a[href*="youtube.com"]:before{
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 48px;
			height: 48px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: #c4302b;
			transform: translate(-50%, -50%);
			}

#etc{}
	#etc xmp{
		margin-top: 0 !important;
		}

.animation{
	visibility: hidden;
	animation-duration: 1s;
	animation-delay: 0.2s;
	transition: visibility 0.2s ease-out 0.2s;
	}
	.animation:not(.done){
		animation-name: none;
		}
	.animation.done{
		visibility: visible;
		
		}




/* for lower */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}
@media (max-width: 767.98px) {
/*767px以下*/
}
@media (max-width: 575.98px) {
/*575px以下*/
}


/* Small */
@media (min-width: 576px) {
/*576px以上*/
#wow{}
	#wow h2+div{
		grid-template-columns: repeat(3, 1fr);
		}
#css{}
	#css h2+div{
		grid-template-columns: repeat(3, 1fr);
		}
}
@media (min-width: 576px) and (max-width: 767.98px) {
/*576px～767px*/
#sample{}
	#sample dl{
		grid-template-columns: repeat(2, 1fr);
		}
	#sample dt{
		grid-column: 1 / 3;
		}
}
@media (min-width: 576px) and (max-width: 991.98px) {
/*576px～991px*/
}
@media (min-width: 576px) and (max-width: 1199.98px) {
/*576px～1199px*/
}
@media (min-width: 576px) and (max-width: 1399.98px) {
/*576px～1399px*/
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
#sample{}
	#sample dl{
		grid-template-columns: repeat(3, 1fr);
		}
	#sample dt{
		grid-column: 1 / 4;
		}
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 1399.98px) {
/*768px～1399px*/
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 992px) and (max-width: 1399.98px) {
/*992px～1399px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}