@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  PC
**************************************************
--------------------------------------------------*/
#rules_catch {
	margin-top:40px;
	padding:120px 0 80px;
	background:#efefef;
}
#rules_catch p {
	text-align:center;
	font-size:3rem;
	font-weight:700;
	line-height:2;
}
#rules_catch p span {
	background:#1d1d1d;
	color:#ffffff;
	padding:0 5px 2px;
}


.rules_content {
	background: linear-gradient(to bottom,  #efefef 0%,#efefef 360px,transparent 360px,transparent 100%);
}
.rules_content_inner {
	margin-top:120px;
	background: linear-gradient(to left,  #22afc3 0%,#22afc3 83%,transparent 83%,transparent 100%);
	padding: 80px 0;
	color:#FFF;
	display:flex;
	justify-content:center;
}
.rules_content_inner:first-child {
	margin-top:0;
}
.rules_content_inner.even {
	background: linear-gradient(to right,  #22afc3 0%,#22afc3 83%,transparent 83%,transparent 100%);
}
.rules_content_inner.odd {
	flex-direction:row-reverse;
}
.rules_content_inner .content_text {
	width:50%;
	display:flex;
}
.content_text_inner {
	width:664px;
	max-width:100%;
	position:relative;
}
.content_text_inner::before {
	content:"01";
	position:absolute;
	font-family:Roboto;
	font-size:9.6rem;
	font-weight:800;
	font-style:italic;
	color:rgba(29,29,29,.5);
	left:0;
	top:-160px;
}
.content_text.c02 .content_text_inner::before {
	content:"02";
}
.content_text.c03 .content_text_inner::before {
	content:"03";
}
.content_text_inner h2 {
	font-size:5rem;
	font-weight:800;
}
.content_text_inner p {
	margin-top:20px;
	font-size:1.8rem;
	font-weight:700;
	line-height:2;
}
.content_text_inner ul {
	margin:10px 0 0;
}
.content_text_inner ul li {
	margin-top:10px;
	font-size:1.6rem;
	font-weight:600;
	padding-left:1em;
	text-indent:-1em;
}
.content_text_inner ul li::before {
	content:"・";
}
.rules_content_inner.even .content_text {
	justify-content:flex-end;
}
.rules_content_inner .photo {
	width:calc(50% - 80px);
	display:flex;
}
.rules_content_inner.odd .photo {
	margin-right:80px;
	justify-content:flex-end;
}
.rules_content_inner.even .photo {
	margin-left:80px;
}
.photo_inner {
	width:760px;
	max-width:100%;
}


.rules_image_content h2 {
	text-align:center;
	font-size:7rem;
	font-weight:800;
	line-height:1.4;
}
.rules_image_content ul {
	width:90%;
	margin:60px auto 0;
	display:flex;
	justify-content:space-between;
	gap:54px;
}
.rules_image_content ul li {
	width:540px;
	max-width:32%;
}
.rules_image_content p {
	margin-top:60px;
	text-align:center;
	font-size:2.4rem;
	font-weight:700;
	line-height:2;
}



/*--------------------------------------------------
**************************************************
  PC - SP
**************************************************
--------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1299px) {
	
	.rules_content {
		background: linear-gradient(to bottom,  #efefef 0%,#efefef 50vw,transparent 50vw,transparent 100%);
	}
	.rules_content_inner {
		margin-top:90px;
		background: linear-gradient(to left,  #22afc3 0%,#22afc3 85%,transparent 85%,transparent 100%);
		padding: 40px 0;
		flex-direction:column;
	}
	.rules_content_inner.even {
		background: linear-gradient(to right,  #22afc3 0%,#22afc3 85%,transparent 85%,transparent 100%);
	}
	.rules_content_inner.odd {
		flex-direction:column;
	}
	
	.rules_content_inner .content_text {
		width:65%;
		display:flex;
		margin:0 15% 0 20%;
	}
	.rules_content_inner.even .content_text {
		margin:0 10% 0 5%;
	}
	.content_text_inner {
		width:100%;
		max-width:100%;
		position:relative;
	}
	.content_text_inner::before {
		left:0;
		top:-12rem;
	}
	.rules_content_inner.even .content_text {
		justify-content:flex-end;
	}
	.rules_content_inner.odd .photo {
		width:75%;
		display:block;
		margin:40px 0 0 20%;
	}
	.rules_content_inner.even .photo {
		width:75%;
		display:block;
		margin:40px 0 0 5%;
	}
	.photo_inner {
		width:100%;
		max-width:100%;
	}
	
}


/*--------------------------------------------------
**************************************************
  SP
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	
	#rules_catch {
		margin-top:20px;
		padding:60px 5%;
		background:#efefef;
	}
	#rules_catch p {
		text-align:left;
		font-size:1.6rem;
		font-weight:700;
		line-height:2;
	}
	
	.rules_content {
		background: linear-gradient(to bottom,  #efefef 0%,#efefef 250vw,transparent 250vw,transparent 100%);
	}
	.rules_content_inner {
		margin-top:60px;
		background: linear-gradient(to left,  #22afc3 0%,#22afc3 95%,transparent 95%,transparent 100%);
		padding: 40px 0;
		flex-direction:column;
	}
	.rules_content_inner.even {
		background: linear-gradient(to right,  #22afc3 0%,#22afc3 95%,transparent 95%,transparent 100%);
	}
	.rules_content_inner.odd {
		flex-direction:column;
	}
	.rules_content_inner .content_text {
		width:85%;
		display:flex;
		margin:0 5% 0 10%;
	}
	.rules_content_inner.even .content_text {
		margin:0 10% 0 5%;
	}
	.content_text_inner {
		width:100%;
		max-width:100%;
		position:relative;
	}
	.content_text_inner::before {
		font-size:6rem;
		left:0;
		right:0;
		top:-23vw;
		text-align:center;
	}
	.content_text_inner h2 {
		font-size:2.6rem;
	}
	.content_text_inner p {
		margin-top:20px;
		font-size:1.8rem;
		font-weight:700;
		line-height:2;
	}
	.content_text_inner ul {
		margin:20px 0 0;
	}
	.content_text_inner ul li {
		font-size:1.4rem;
	}
	.content_text_inner ul li::before {
		content:"・";
	}
	.rules_content_inner.even .content_text {
		justify-content:flex-end;
	}
	.rules_content_inner .photo {
		width:100%;
		display:block;
		margin-top:40px;
	}
	.rules_content_inner.odd .photo {
		margin-right:0;
	}
	.rules_content_inner.even .photo {
		margin-left:0;
	}
	.photo_inner {
		width:100%;
		max-width:100%;
	}
	
	.rules_image_content {
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}
	.rules_image_content h2 {
		text-align:center;
		font-size:2.6rem;
		font-weight:800;
		line-height:1.4;
	}      
	.rules_image_content ul {
		position: relative;
		display: block;
		width: 100%;
		margin-top:30px;
	}
	.rules_image_content ul::before {
		content: "";
		display: block;
		aspect-ratio: 9 / 10;
	}
	.rules_image_content ul li {
		position: absolute;
		width: 100%;
		max-width: 100%;
		inset: 0;
		opacity: 0;
		transition: opacity 1.5s ease;
	}
	.rules_image_content ul li.active {
		opacity: 1;
		z-index: 1;
	}
	.rules_image_content ul li img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.rules_image_content p {
		margin-top:30px;
		text-align:center;
		font-size:1.8rem;
	}
	
	
}