@charset "utf-8";

/* --------------- common --------------- */
section {}

section + section {padding-top: 6em;}

h2 {}
h2 span {}

@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------------- mainimg --------------- */

@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------------- main --------------- */
main {
	background-repeat: no-repeat;
	background-position: top left -1.334em;
	background-size: 96% auto;
	background-image: url("../img/bg-star01.png");}

/* --- header --- */

/* --- nav --- */

@media (min-width:641px) {}
@media (max-width:640px) {
	main {
        background-position: top 30px left -175px;
        background-size: 180% auto;}
}

/* --------- mainimg --------- */
.mainimg {padding: 10.667em 0 6em;}

.mainimg h2 {
	position: relative;
	z-index: 10;
	width: 82.8125%;
	font-size: 1em;
	text-align: center;
	margin: 0 auto;}

.mainimg h2::before,
.mainimg h2::after {
	position: absolute;
	z-index: -10;
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;}
.mainimg h2::before {
	top: -24.674%; left: 6.604%;
	width: 21.069%; height: 300px;
	background-image: url("../img/title-logo_rivale.png");}
.mainimg h2::after {}

.mainimg h2 > img {width: 69.812%;}
.mainimg h2 > span {
	display: block;
	text-align: center;}

	.mainimg img + span {margin-top: 2em;}

.mainimg h2 + ul {margin-top: 5.667em;}
.mainimg ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 1em;}
.mainimg li a {
	display: block;
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: 0.112em;
	padding: 0.584em 0.593em;
	color: #fff;
	background-color: #d80b45;
	border: solid 4px #ffcad9;
	border-radius: 8px;}

.mainimg li a:hover {
	background-color: #ff88aa;
	border-color: #ffcad9;}

@media (min-width:641px) {
	.mainimg h2 > span img {
		width: 75%;
		max-width: 530px;}
}
@media (max-width:640px) {
	.mainimg {padding-top: 10em;}
	
	.mainimg h2 {width: 100%;}

	.mainimg h2::before {
		top: -65%; left: calc(50% - 130px);
		width: 200px; height: 352px;}
	.mainimg h2::after {
		top: -15%; right: 5%;
		width: 20.3125%;}
	
	.mainimg h2 > img {width: 88%;}
	.mainimg h2 > span img {width: 59.375%;}

	.mainimg ul {gap: 1.5em;}
	.mainimg li {}
	.mainimg li a {
		font-size: 1.5em;
		padding-left: 1.5em;
		padding-right: 1.5em;}
	
	.mainimg li:first-of-type {
		margin: 0 20%;
		padding-left: 2em;
		padding-right: 2em;}
}

/* --------- section：sec01 --------- */
.sec01 > div {
	display: flex; flex-wrap: wrap; justify-content: center;
	border: solid 7px #ffcccc;}

.sec01 div h2 {
	position: relative;
	width: 100%;
	font-size: 1em;
	padding-bottom: 2em;}
.sec01 div h2 [class^="deco"] {
	position: absolute;
	content: '';
	display: block;}
.sec01 div h2 .deco01 {
	bottom: -30px; left: 2.815%;
	width: 22.983%;}
.sec01 div h2 .deco02 {
	bottom: 0; right: 2.815%;
	width: 25.329%;}
.sec01 [src$="sec01-main.png"] {
		width: 100%;
		max-width: 790px;}

.sec01 .point {
	width: 39.3997%;
	padding: 1.292em 0 0.79971em 0;
	background-color: #a80022;
	border-radius: 1em;}
	.sec01 h3 {
		/* font-size: 1.171875vw; */
		font-size: 1.5em;
		letter-spacing: 0.112em;
		text-align: center;
		color: #fff;}
	.sec01 h3 b {
		font-size: 1.423em;
		font-weight: 700;}

.sec01 .point + .flow {margin-top: 1.334em;}

@media (min-width:641px) {
	.sec01 .point + .point {margin-left: 1.8762%;}
}
@media (max-width:640px) {
	.sec01 div h2 {
		padding-bottom: 3em;}
	.sec01 div h2 .deco01 {
		bottom: -22px; left: 0%;
		width: 26.502%;}
	.sec01 div h2 .deco02 {
		right: -5%;
		width: 35.336%;}

	.sec01 .point {width: 90%;}

	.sec01 .point + .point {margin-top: 1em;}
	.sec01 .point + .flow {margin-top: 3em;}
}

/* --------- section：sec02 --------- */
.sec02 {position: relative;}
.sec02 .bg-star02 {
	position: absolute;
	top: -10px; left: -50%;
	display: block;
	width: 200%;}
.sec02 .bg-star02 img {width: 100%;}

.sec02 > div {position: relative;}
.sec02 [class^="info0"] + h3 {margin-top: 3.334em;}

.sec02 .info01 {border: solid 7px #c4c2ff;}
	.info01 h2 {
		position: relative;
		z-index: 10;}
	.info01 [class^="deco"] {position: absolute;}
	.info01 .deco01 {
		top: 0; left: 0;
		transform: translate(-17.5%,-16.667%);
		width: 37.524%;}
	.info01 .deco02 {
		z-index: 20;
		bottom: 0; right: 0;
		transform: translate(-6.25%,9.2593%);
		width: 22.5141%;}

.sec02 .info02 {
	display: flex; flex-wrap: nowrap; justify-content: space-between;
	align-items: center;
	background-color: transparent;}
.sec02 h3 + .info02 {margin-top: 2.667em;}

.info02 li {
	position: relative;
	width: 43.152%;
	padding-bottom: 175px;
	text-align: center;}
.info02 li:nth-of-type(2) {width: 7.505%;}
.info02 li img {max-width: 100%;}

	/*  mascot → msct  */
	.info02 [class^="msct"] {
		position: absolute;
		bottom: 0; left: 50%;
		transform: translateX(-50%);}
	.info02 .msct01 {
		bottom: 15px;
		width: 25%;}
	.info02 .msct02 {width: 39.131%;}

.info02 + p {
	font-size: 1.334em;
	margin-top: 3.2493em;
	color: #fff;}

@media (min-width:641px) {
	.sec02 .bg-star02 {
		position: absolute;
		top: -90px; left: -38.889%;
		width: 177.778%;}
	.info02 + p {margin-top: 1.2493em;}
}
@media (max-width:640px) {
	.sec02 {padding-bottom: 1.334em;}
	.sec02 > div {
		padding: 3em 0 2em;}
		.info01 .deco01 {
			top: -15px; left: -30px;
			width: 260px;}
		.info01 .deco02 {
			transform: translate(30%,17.5%);
			width: 26.502%;}

	.sec02 .info01 h2 {
		width: 90%;
		margin: 0 auto;}
	.sec02 .info01 h2 img {width: 90%;}
	
	.sec02 .info02 {
		flex-wrap: wrap;}
		.info02 li {
			width: 100%;
			padding-bottom: 160px;}
		.info02 li:nth-of-type(2) {
			width: 12%;
			margin: 0 auto;
			padding: 15px 0 20px;}
		.info02 li:nth-of-type(2) img {
			transform: rotate(90deg);}

			.info02 .msct01 {width: 20%;}
			.info02 .msct02 {width: 31%;}
}

/* --------- section：sec03 --------- */
.sec03 {
	width: 100%;
	max-width: none;
	background-repeat: repeat;
	background-color: #fff;
	background-image: url("../img/pattern-purple.png");
	background-size: 30px auto;
	background-position: center;
	border-top: solid 10px #c4c2ff;
	border-bottom: solid 10px #c4c2ff;}

.sec03 > p {text-align: center;}
.sec03 > p img {max-width: 100%;}
.sec03 > h2 + p {
	font-size: 1.334em;
	margin-top: 0.9994em;}

.sec03 .info02 {margin-top: -2.334em}

@media (min-width:641px) {}
@media (max-width:640px) {
	.sec03 > p.info01 img {
		max-width: 120%;
		transform: translateX(-8.5%);}
	
	.sec03 > h2.info03 img {width: 90%;}
}

/* --------- section：sec04 --------- */
.sec04 > div {
	position: relative;
	padding-left: 14.822%;
	padding-right: 14.822%;
	border: solid 7px #c4c2ff;}
.sec04 > div::before {
	position: absolute;
	bottom: -30px; right: 4.6297%;
	content: '';
	display: block;
	width: 140px; height: 210px;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	background-image: url("../img/sec05-mascot.png");}


.sec04 .flow li {display: flex; flex-wrap: wrap; justify-content: flex-start;}

	.flow li {position: relative;}
	.flow li + li {margin-top: 0.215em;}
	.flow [class^="stp"]::before,
	.flow [class^="stp"]::after {
		content: '';
		display: block;}
	.flow [class^="stp"]::after {
			width: 100%; height: 4em;}
	.flow [class^="stp"]::before {
		position: absolute;
		top: 100%; left: 20px;
		transform: translateY(-100%);
		width: 2.667em; height: 60px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center;}

	.flow .stp1::before {
		background-image: url("../img/step_icon-arrow01.png");}
	.flow .stp2::before {
		background-image: url("../img/step_icon-arrow02.png");}
	.flow .stp3::before {
		transform: translateY(-200%);
		background-image: url("../img/step_icon-arrow03.png");}

	.flow li span {
		display: block;
		width: 5.334em;}
	.flow li span img {width: 100%;}
	.flow li dl {
		width: calc(100% - 5.334em);
		padding-left: 5.97%;}

		.flow li dt {
			font-size: 2em;
			font-weight: 700;
			letter-spacing: 0.1em;}
		.flow li dd {
			font-size: 1.4em;
			font-weight: 600;}
		.flow li dd small {font-size: 0.8572em;}
		.flow li li {font-weight: 600;}

		.flow dt + dd {margin-top: 0.346em;}

		.flow dd > small {
			display: block;
			margin-top: 1.125em;}

@media (min-width:641px) {}
@media (max-width:640px) {
	.sec04 > div {
		padding-left: 5%;
		padding-right: 5%;}
	.sec04 > div::before {
		bottom: -30px; right: -30px;}
	
		.sec04 .flow > li:not([class^="stp"]) small {
			padding-right: 5em;}
}

/* --------- section：sec05 --------- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}

/* --------- ●●● --------- */
/* --- ●●● --- */

@media (min-width:641px) {}
@media (max-width:640px) {}